@charset "utf-8";

#tomobataraki_style .pageTitle h1 {
	width: 100%;
	margin: 0 auto;
	overflow: hidden;
	}

@media print,
screen and (min-width: 768px) {

	#tomobataraki_style .pageTitle h1 {
		height: 36px;
		padding-top: 36px;
		background: url(../img/pageTitle_txt_pc.png) no-repeat center center / contain;
		}

}
@media screen and (max-width: 767px) {

	#tomobataraki_style .pageTitle {
		padding-top: 38px !important;
		background-position: 60% 50%;
		}
	#tomobataraki_style .pageTitle h1 {
		height: 50px;
		padding-top: 50px;
		background: url(../img/pageTitle_txt_sp.png) no-repeat center center / contain;
		}

}


/* =============================================
profile
============================================= */
#profile h2 {
	font-weight: bold;
	}
#profile figure img {
	width: 100%;
	height: auto;
	}
#profile dl {
	display: flex;
	flex-wrap: wrap;
	position: relative;
	background-color: #efefef;
	}
#profile dt span {
	width: 100%;
	display: block;
	background-color: #fff;
	border: 1px solid #ccc;
	line-height: 1.8;
	}
#profile dd {
	letter-spacing: 0.06em;
	line-height: 1.8;
	text-align: left;
	}
#profile dt:not(:first-of-type),
#profile dd:not(:first-of-type) {
	margin-top: 10px;
	}

@media print,
screen and (min-width: 768px) {

	#profile h2 {
		font-size: 200%;
		}
	#profile .bundle {
		margin-top: 24px;
		display: flex;
		justify-content: center;
		}
	#profile figure {
		width: 268px;
		align-self: center;
		}
	#profile dl {
		width: 450px;
		padding: 20px 30px;
		margin-left: 30px;
		}
	#profile dl::before,
	#profile dl::after {
		width: 0;
		height: 0;
		margin: auto;
		position: absolute;
		left: -15px;
		border-style: solid;
		border-width: 7.5px 15px 7.5px 0;
		border-color: transparent #efefef transparent transparent;
		content: '';
		}
	#profile dl::before {
		top: -15%;
		bottom: 0;
		}
	#profile dl::after {
		top: 0;
		bottom: -15%;
		}
	#profile dt {
		width: 7em;
		}
	#profile dt span {
		padding: 6px 3px;
		}
	#profile dd {
		width: calc(100% - 7em);
		padding: 6px 0 0 20px;
		font-size: 107%;
		}

}
@media screen and (max-width: 767px) {

	#profile h2 {
		font-size: 150%;
		}
	#profile .bundle {
		margin-top: 15px;
		display: block;
		}
	#profile figure {
		width: 100%;
		max-width: 240px;
		margin: 0 auto;
		}
	#profile dl {
		width: 100%;
		padding: 18px 6%;
		position: relative;
		top: -2px;
		}
	#profile dt {
		width: 90px;
		}
	#profile dt span {
		padding: 4px;
		font-size: 90%;
		}
	#profile dd {
		width: calc(100% - 90px);
		padding: 4px 0 0 20px;
		font-size: 90%;
		}

}


/* =============================================
schedule
============================================= */
#schedule {
	margin-top: 24px;
	border: 1px solid #ccc;
	}
#schedule h3 {
	text-align: center;
	}
#schedule h3+p {
	font-weight: bold;
	text-align: center;
	}
#schedule p.note {
	text-align: center;
	visibility: hidden;
	opacity: 0;
	transition: 0.3s;
	color: #fa5987;
	}
#schedule .timetable {
	width: 100%;
	padding: 0 128px 45px;
	margin: 30px auto 0;
	overflow-x: auto;
	position: relative;
	}
#schedule .timetable table {
	width: 810px;
	margin: 0 auto;
	}

/* thead */
#schedule .timetable thead th {
	padding-bottom: 15px;
	}
#schedule .timetable thead th span {
	padding: 8px 0;
	display: block;
	position: relative;
	border-radius: 3px;
	color: #fff;
	font-size: 115%;
	font-weight: normal;
	}
#schedule .timetable thead th span::after {
	width: 0;
	height: 0;
	margin: auto;
	position: absolute;
	bottom: -6px;
	left: 0;
	right: 0;
	border-style: solid;
	border-width: 6px 6px 0 6px;
	content: '';
	}
#schedule .timetable thead th.mama {
	padding-left: 20px;
	}
#schedule .timetable thead th.mama span {
	width: 155px;
	background-color: #084084;
	}
#schedule .timetable thead th.mama span::after {
	border-color: #084084 transparent transparent transparent;
	}
#schedule .timetable thead th.papa {
	padding-left: 10px;
	}
#schedule .timetable thead th.papa span {
	width: 155px;
	background-color: #e37408;
	}
#schedule .timetable thead th.papa span::after {
	border-color: #e37408 transparent transparent transparent;
	}
#schedule .timetable thead th.child+.child {
	padding-left: 10px;
	}
#schedule .timetable thead th.child span {
	width: 140px;
	background-color: #f3c60e;
	}
#schedule .timetable thead th.child span::after {
	border-color: #f3c60e transparent transparent transparent;
	}
#schedule .timetable thead th.child span small {
	font-size: 75%;
	}

/* tbody */
#schedule .timetable tbody tr:nth-of-type(odd) {
	background-color: #efefef;
	}
#schedule .timetable tbody tr:last-of-type td:nth-of-type(2)::before {
	content: none;
	}
#schedule .timetable tbody td {
	height: 32px;
	padding: 7px 0 6px 22px;
	position: relative;
	}
#schedule .timetable tbody td dl {
	display: flex;
	}
#schedule .timetable tbody td dt {
	padding-top: 2px;
	margin-right: 12px;
	font-size: 85%;
	line-height: 1.3;
	text-align: left;
	}
#schedule .timetable tbody td dd {
	font-size: 100%;
	line-height: 1.3;
	text-align: left;
	}
#schedule .timetable tbody td:nth-of-type(2)::before {
	width: 4px;
	height: 100%;
	display: block;
	position: absolute;
	top: 12px;
	left: 3px;
	background-color: #e3e3e3;
	content: '';
	}
#schedule .timetable tbody tr.marked td:nth-of-type(2)::after {
	width: 10px;
	height: 10px;
	display: block;
	position: absolute;
	top: 12px;
	left: 0;
	background-color: #fff;
	border: 1px solid #888;
	border-radius: 50%;
	content: '';
	}

/* child */
#schedule .timetable tbody td.child::before {
	width: 4px;
	height: 100%;
	display: block;
	position: absolute;
	top: 12px;
	left: 2px;
	background-color: #e3e3e3;
	}
#schedule .timetable tbody td.marked::after {
	width: 8px;
	height: 8px;
	display: block;
	position: absolute;
	top: 12px;
	left: 0;
	background-color: #fff;
	border: 1px solid #888;
	border-radius: 50%;
	content: '';
	}

/* ellipsis */
#schedule .timetable tbody tr.ellipsis td {
	height: 80px;
	}
#schedule .timetable tbody tr.ellipsis td:nth-of-type(2)::after,
#schedule .timetable tbody tr.ellipsis td.child::after {
	width: 36px;
	height: 16px;
	margin: auto;
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	left: -12px;
	background: url(../img/ellipsis.png) no-repeat 0 0 / contain;
	content: '';
	}

/* comment */
#schedule .timetable tbody td p.comment {
	width: 145px;
	padding: 15px 12px;
	position: absolute;
	background-color: #fff;
	border-radius: 12px;
	font-size: 86%;
	line-height: 1.5;
	letter-spacing: 0;
	text-align: center;
	}
#schedule .timetable tbody td.mama p.comment {
	border: 1px solid #386eaf;
	box-shadow: 4px 4px #dae3ee;
	}
#schedule .timetable tbody td.papa p.comment {
	border: 1px solid #e37408;
	box-shadow: 4px 4px #f5e2cf;
	}
#schedule .timetable tbody td.child p.comment {
	border: 1px solid #f3c60e;
	box-shadow: 4px 4px #f9efc8;
	}
#schedule .timetable tbody td p.comment::after {
	width: 18px;
	height: 13px;
	position: absolute;
	display: block;
	content: '';
	}
#schedule .timetable tbody td p.comment.tail_a_right::after {
	bottom: -13px;
	right: 15%;
	}
#schedule .timetable tbody td p.comment.tail_a_left::after {
	transform: scale(-1, 1);
	bottom: -13px;
	left: 15%;
	}
#schedule .timetable tbody td.mama p.comment.tail_a_right::after,
#schedule .timetable tbody td.mama p.comment.tail_a_left::after {
	background: url(../img/tail_01a.png) no-repeat 0 0 / contain;
	}
#schedule .timetable tbody td.papa p.comment.tail_a_right::after,
#schedule .timetable tbody td.papa p.comment.tail_a_left::after {
	background: url(../img/tail_02a.png) no-repeat 0 0 / contain;
	}
#schedule .timetable tbody td.child p.comment.tail_a_right::after,
#schedule .timetable tbody td.child p.comment.tail_a_left::after {
	background: url(../img/tail_03a.png) no-repeat 0 0 / contain;
	}
#schedule .timetable tbody td p.comment.tail_b_left::after {
	background: url(../img/tail_01b.png) no-repeat 0 0 / contain;
	top: 15%;
	left: -18px;
	}
#schedule .timetable tbody td p.comment.tail_b_right::after {
	background: url(../img/tail_01b.png) no-repeat 0 0 / contain;
	transform: scale(-1, 1);
	top: 15%;
	right: -18px;
	}
#schedule .timetable tbody td.mama p.comment.tail_b_right::after,
#schedule .timetable tbody td.mama p.comment.tail_b_left::after {
	background: url(../img/tail_01b.png) no-repeat 0 0 / contain;
	}
#schedule .timetable tbody td.papa p.comment.tail_b_right::after,
#schedule .timetable tbody td.papa p.comment.tail_b_left::after {
	background: url(../img/tail_02b.png) no-repeat 0 0 / contain;
	}
#schedule .timetable tbody td.child p.comment.tail_b_right::after,
#schedule .timetable tbody td.child p.comment.tail_b_left::after {
	background: url(../img/tail_03b.png) no-repeat 0 0 / contain;
	}

/* point */
#schedule .timetable tbody td .point {
	width: 145px;
	padding: 15px;
	position: absolute;
	background-color: #fff;
	border: 2px solid #fa5987;
	border-radius: 12px;
	font-size: 86%;
	line-height: 1.5;
	text-align: center;
	}
#schedule .timetable tbody td .point h4 {
	padding: 0 15px;
	position: relative;
	color: #fa5987;
	font-size: 112%;
	font-weight: bold;
	line-height: 1.4;
	}
#schedule .timetable tbody td .point h4::before,
#schedule .timetable tbody td .point h4::after {
	width: 2px;
	height: 30px;
	display: block;
	position: absolute;
	bottom: 10%;
	background-color: #fa5987;
	content: '';
	}
#schedule .timetable tbody td .point h4::before {
	left: 0;
	transform: rotate(-20deg);
	}
#schedule .timetable tbody td .point h4::after {
	right: 0;
	transform: rotate(20deg);
	}
#schedule .timetable tbody td .point h4+p {
	margin-top: 10px;
	font-size: 100%;
	letter-spacing: 0;
	line-height: 1.4;
	text-align: center;
	}

/* img */
#schedule .timetable figure {
	position: absolute;
	}

@media print,
screen and (min-width: 768px) {

	#schedule {
		padding: 60px 15px 30px;
		}
	#schedule h3 {
		font-size: 185%;
		}
	#schedule h3+p {
		font-size: 121%;
		}
	#schedule .timetable {
		max-width: 1068px;
		}

}
@media screen and (max-width: 767px) {

	#schedule {
		padding: 30px 3% 0;
		}
	#schedule h3 {
		font-size: 145%;
		}
	#schedule h3+p {
		font-size: 108%;
		}
	#schedule p.note {
		margin-top: 15px;
		font-size: 85%;
		}
	#schedule .timetable {
		width: 109%;
		margin-bottom: -60px;
		transform: scale(0.9);
		transform-origin: top left;
		}

}
@media screen and (max-width: 1152px) {

	#schedule p.note {
		visibility: visible;
		opacity: 1;
		}

}


/* =============================================
interview
============================================= */
#interview p.intro {
	margin-top: 48px;
	background-color: #f7f7f7;
	border: 1px solid #ccc;
	font-weight: bold;
	text-align: center;
	}
#interview .column {
	margin-top: 60px;
	}
#interview p.intro+.column {
	margin-top: 40px;
	}
#interview .column h3,
#interview .column p {
	display: flex;
	text-align: left;
	}
#interview .column h3 {
	letter-spacing: 0.08em;
	}
#interview .column p {
	letter-spacing: 0.06em;
	}
#interview .column h3 small,
#interview .column p small {
	width: 45px;
	display: block;
	}
#interview .column p.h small {
	color: #e37408;
	font-weight: bold;
	}
#interview .column p.w small {
	color: #084084;
	font-weight: bold;
	}
#interview .column h3 span.txt,
#interview .column p span.txt {
	width: calc(100% - 45px);
	display: block;
	}
#interview .column p.interviewer {
	width: 100%;
	margin: 21px 0;
	background-color: #f7f7f7;
	font-weight: bold;
	}

@media print,
screen and (min-width: 768px) {

	#interview p.intro {
		padding: 30px;
		font-size: 107%;
		}
	#interview .column h3 {
		font-size: 128%;
		line-height: 1.8;
		}
	#interview .column p {
		margin-top: 16px;
		font-size: 107%;
		line-height: 1.8;
		}
	#interview .column p.interviewer {
		padding: 30px 45px;
		}

}
@media screen and (max-width: 767px) {

	#interview p.intro {
		padding: 24px 6%;
		font-size: 100%;
		}
	#interview .column h3 {
		font-size: 104%;
		line-height: 1.7;
		}
	#interview .column p {
		margin-top: 12px;
		font-size: 93%;
		line-height: 1.7;
		}
	#interview .column p.interviewer {
		padding: 24px 6%;
		}

}