@charset 'UTF-8';

/*

    Base

*/

/*  additional  */
:root {
	--shin-nyu-color: #f4abae;
	--ten-nyu-color: #ffbc42;
	--hen-nyu-color: #908d96;
}

#contents #shin-nyu .tag {
	background-color: var(--shin-nyu-color);
}
#contents #shin-nyu a.button {
	border: 1px solid var(--shin-nyu-color);
	background-color: var(--shin-nyu-color);
}
#contents #shin-nyu a.button:hover {
	color: #ffffff;
}
#contents #shin-nyu a.button:after {
	border-bottom: 1px #ffffff solid;
	border-right: 1px #ffffff solid;
}
#contents #shin-nyu ul.check li:before {
	border-left: 2px solid var(--shin-nyu-color);
	border-bottom: 2px solid var(--shin-nyu-color);
}
#contents #shin-nyu .header .number {
	color: var(--shin-nyu-color);
}
#contents #shin-nyu ul.flow .dash-v {
	background-image: repeating-linear-gradient(180deg, var(--shin-nyu-color), var(--shin-nyu-color) 4px, transparent 4px, transparent 6px);
}
#contents #shin-nyu ul.flow .dash-v:before,
#contents #shin-nyu ul.flow .dash-v:after {
	background-color: var(--shin-nyu-color);
}

#contents #ten-nyu .tag {
	background-color: var(--ten-nyu-color);
}
#contents #ten-nyu a.button {
	border: 1px solid var(--ten-nyu-color);
	background-color: var(--ten-nyu-color);
}
#contents #ten-nyu a.button:hover {
	color: #ffffff;
}
#contents #ten-nyu a.button:after {
	border-bottom: 1px #ffffff solid;
	border-right: 1px #ffffff solid;
}
#contents #ten-nyu ul.check li:before {
	border-left: 2px solid var(--ten-nyu-color);
	border-bottom: 2px solid var(--ten-nyu-color);
}
#contents #ten-nyu .header .number {
	color: var(--ten-nyu-color);
}
#contents #ten-nyu ul.flow .dash-v {
	background-image: repeating-linear-gradient(180deg, var(--ten-nyu-color), var(--ten-nyu-color) 4px, transparent 4px, transparent 6px);
}
#contents #ten-nyu ul.flow .dash-v:before,
#contents #ten-nyu ul.flow .dash-v:after {
	background-color: var(--ten-nyu-color);
}

#contents #hen-nyu .tag {
	background-color: var(--hen-nyu-color);
}
#contents #hen-nyu a.button {
	border: 1px solid var(--hen-nyu-color);
	background-color: var(--hen-nyu-color);
}
#contents #hen-nyu a.button:hover {
	color: #ffffff;
}
#contents #hen-nyu a.button:after {
	border-bottom: 1px #ffffff solid;
	border-right: 1px #ffffff solid;
}
#contents #hen-nyu ul.check li:before {
	border-left: 2px solid var(--hen-nyu-color);
	border-bottom: 2px solid var(--hen-nyu-color);
}
#contents #hen-nyu .header .number {
	color: var(--hen-nyu-color);
}
#contents #hen-nyu ul.flow .dash-v {
	background-image: repeating-linear-gradient(180deg, var(--hen-nyu-color), var(--hen-nyu-color) 4px, transparent 4px, transparent 6px);
}
#contents #hen-nyu ul.flow .dash-v:before,
#contents #hen-nyu ul.flow .dash-v:after {
	background-color: var(--hen-nyu-color);
}





/*

    Common

*/

/*  fonts  */
@font-face {
	font-family: 'DIN-Condensed';
	font-style: normal;
	font-weight: bold;
	src: url('./fonts/DIN-Condensed-Bold.woff') format('woff2');
}

/*  subtitle  */
#contents div.lead {
	position: relative;
	z-index: 2;
}
#contents div.lead + div.subtitle {
	position: relative;
	z-index: 1;
}
#contents div.lead + div.subtitle p {
	position: relative;
	z-index: 1;
}

/*  .description  */
#contents p.description {
	margin: 2em 0 4em;
	text-align: center;
}
#contents div.lead + div.subtitle + p.description {
	margin-top: -2em;
}





/*

    section

*/

/*  normal  */
#contents section {
	padding: 2em 0 5em;
	box-sizing: border-box;
}
#contents section:nth-of-type(2n) {
	position: relative;
	background-color: var(--light-color);
}
#contents section:has(.lead h2) {
	padding: 1px 0 5em;
}

/*  .conversion  */
#contents section.conversion {
	position: relative;
	padding: 1px 0 5em;
	background-image: url('../images/page/common/bg_conversion.png');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	color: #ffffff;
}
#contents section.conversion div.subtitle p {
	color: rgba(255,255,255,0.25);
}
#contents section.conversion ul.columns {
	justify-content: center;
}





/*

    basic

*/
table tr th:nth-of-type(1){
	min-width: 25%;
}




/*

    parts

*/

/*  .img  */
#contents .img-wide {
	margin: 2em 0;
	border-radius: 20px;
	max-width: 100%;
	overflow: hidden;
}
#contents .img-narrow {
	margin: 2em 0;
	border-radius: 20px;
	max-width: 640px;
	overflow: hidden;
}
#contents .img-wide img,
#contents .img-narrow img {
	width: 100%;
	height: auto;
	object-fit: cover;
}

/*  align  */
#contents .align-right {
	text-align: right;
}
#contents .align-center {
	text-align: center;
}

/*  frame  */
#contents .shadow-frame {
	display: block;
	border-radius: 20px;
	background-color: #ffffff;
	box-shadow: 0 0 15px rgba(0,0,0,0.1);
	overflow: hidden;
}
#contents .line-frame {
	display: block;
	border-radius: 20px;
	border: 1px solid var(--main-color);
	background-color: #ffffff;
	overflow: hidden;
}

/*  .header  */
#contents .header {
	display: flex;
	margin: 0 0 1em 0;
}
#contents .header .number {
	flex-shrink: 0;
	width: 1em;
	margin: 0 0.25em 0 0;
	font-family: 'DIN-Condensed', sans-serif;
	font-size: 4em;
	color: var(--main-color);
	text-align: center;
	line-height: 1;
}
#contents .header .number span i {
	display: block;
	font-style: normal;
	font-size: 0.5em;
}
#contents .header .title strong {
	display: block;
	font-size: 1.5em;
}
#contents .header .title span.note {
	display: block;
	margin: 1em 0 0 0;
	font-size: 1em;
}

/*  .content  */
#contents .content {
	padding: 2em;
	box-sizing: border-box;
}
#contents .header + .content {
	padding: 0 0 0 5em;
}

/*  .emphasis  */
#contents .emphasis {
	margin: 2em 0;
	padding: 2em;
	border-radius: 20px;
	box-sizing: border-box;
}
#contents .emphasis.low {
	background-color: var(--quarter-color);
}
#contents .emphasis.high {
	background-color: var(--main-color);
	color: #ffffff;
}
#contents .emphasis strong.title {
	display: block;
	margin: 0 0 0.5em 0;
	font-size: 1.5em;
}
#contents .emphasis > *:first-child {
	margin-top: 0 !important;
}
#contents .emphasis > *:last-child {
	margin-bottom: 0 !important;
}

/*  .quotation  */
#contents .quotation {
	position: relative;
	margin: 4em 0;
	padding: 1em 2em;
	border-radius: 20px;
	background-color: var(--quarter-color);
	font-family: serif;
	font-size: 1.5em;
	color: var(--main-color);
	box-sizing: border-box;
}
#contents .quotation:before {
	position: absolute;
	top: -0.5em;
	left: 0.25em;
	content: "“";
	font-size: 8em;
}
#contents .quotation p small {
	display: block;
	text-align: right;
}

/*  .notes  */
#contents .notes {
	margin: 2em 0;
	padding: 2em;
	border-radius: 20px;
	background-color: #eeeeee;
	box-sizing: border-box;
}
#contents .notes strong.title {
	display: block;
	margin: 0 0 0.5em 0;
	font-size: 1.5em;
}
#contents .notes > *:first-child {
	margin-top: 0 !important;
}
#contents .notes > *:last-child {
	margin-bottom: 0 !important;
}

/*  .comment  */
#contents .comment {
	display: block;
	margin: 1em 0 0;
	padding: 0.5em 1em;
	border-radius: 5px;
	background-color: #eeeeee;
	box-sizing: border-box;
}

/*  .induction  */
#contents p.induction {
	margin: 2em 0;
	text-align: center;
}
#contents p.induction strong {
	font-size: 1.5em;
}

/*  .hr  */
#contents .hr {
	display: block;
	width: 1px;
	height: 75px;
	margin: 75px auto;
	background-color: var(--main-color);
}

/*  .catch  */
#contents p.catch {
	margin: 1em 0;
	font-family: 'fot-udkakugoc80-pro', sans-serif;
	font-size: 3em;
	color: var(--main-color);
	line-height: 1.25;
	font-feature-settings: "palt";
}

/*  .icon  */
#contents img.icon {
	max-width: 60px;
}

/*  .circle  */
#contents .circle {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 90px;
	height: 90px;
	border-radius: 9999px;
	background-color: var(--quarter-color);
}

/*  .tag  */
#contents .tag {
	width: 110px;
	padding: 0.25em 1em;
	border-radius: 9999px;
	border: 2px solid var(--main-color);
	font-size: 1.3rem;
	font-weight: bold;
	color: var(--main-color);
	text-align: center;
	box-sizing: border-box;
}

/*  .tips  */
#contents .tips {
	display: inline-block;
	margin: 0.5em 0;
	padding: 0.25em 1em;
	border-radius: 9999px;
	background-color: var(--quarter-color);
	font-size: 1.3rem !important;
	font-weight: bold;
	color: var(--main-color);
	text-align: center;
	box-sizing: border-box;
}

/*  .check-label  */
#contents .check-label {
	border-radius: 10px;
	background-color: #ffffff;
	box-shadow: 0 0 15px rgba(0,0,0,0.1);
}
#contents .check-label .content {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	padding: 1.5em;
	color: #333333;
	box-sizing: border-box;
}
#contents .check-label .content img.icon {
	width: 2em;
	height: 2em;
	margin: 0 1em 0 0;
}

/*  .message  */
#contents div.msg {
	margin: 4em 0;
}
#contents div.msg p {
	font-family: serif;
	font-size: 1.125em;
}





/*  .button  */
/* .square */
#contents a.button.square {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0;
	padding: 1em;
	border-radius: 10px;
	background-color: var(--main-color);
	font-size: 1.125em;
	font-weight: bold;
	color: #ffffff;
	box-sizing: border-box;
}
#contents a.button.square:after {
	content: none;
}
#contents a.button.square img {
	width: 1.125em;
	height: 1.125em;
	margin: 0 0.5em 0 0;
	border-radius: 0;
}
/* .ghost */
#contents a.button.square.ghost {
	border: 1px solid #ffffff;
	background-color: transparent;
	color: #ffffff;
}





/*  ul.check  */
/* common */
#contents ul.check li {
	position: relative;
	padding: 0 0 0 1.5em;
	box-sizing: border-box;
}
#contents ul.check li:before {
	position: absolute;
	top: 0.5em;
	left : 0;
}
#contents ul.check li strong {
	margin: 0 0 1em 0;
	font-size: 1.3125em;
}

/* .white */
#contents ul.check.white li:before {
	border-left: 2px #ffffff solid;
	border-bottom: 2px #ffffff solid;
}

/* .maincolor */
#contents ul.check.maincolor li:before {
	border-left: 2px var(--main-color) solid;
	border-bottom: 2px var(--main-color) solid;
}





/*  ul.columns  */
/* common */
#contents ul.columns {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	margin: 2em -1em;
}
#contents ul.columns > li {
	display: block;
	width: 100%;
	margin: 0;
	padding: 1em;
	box-sizing: border-box;
}
#contents ul.columns > li:before {
	content: none;
}
@media screen and (min-width: 768px) {
	#contents ul.columns {
		margin: 2em -2em;
	}
	#contents ul.columns > li {
		padding: 2em;
	}
}

/* .part2 */
@media screen and (min-width: 768px) {
	#contents ul.columns.part2 {
		margin: 2em -1em;
	}
	#contents ul.columns.part2 > li {
		width: 50%;
		padding: 1em;
	}
}
/* .part3 */
@media screen and (min-width: 768px) {
	#contents ul.columns.part3 {
		margin: 2em -1em;
	}
	#contents ul.columns.part3 > li {
		width: 33.33%;
		padding: 1em;
	}
}
/* .part4 */
@media screen and (min-width: 768px) {
	#contents ul.columns.part4 {
		margin: 2em -1em;
	}
	#contents ul.columns.part4 > li {
		width: 25%;
		padding: 1em;
	}
}
/* .part5 */
@media screen and (min-width: 768px) {
	#contents ul.columns.part5 {
		margin: 2em -1em;
	}
	#contents ul.columns.part5 > li {
		width: 20%;
		padding: 1em;
	}
}
/* line-frame */
#contents ul.columns.line-frame > li + li {
	border: none;
	border-top: 1px solid var(--main-color);
}
@media screen and (min-width: 768px) {
	#contents ul.columns.line-frame > li + li {
		border: none;
		border-left: 1px solid var(--main-color);
	}
}
/* .shadow-frame */
@media screen and (min-width: 768px) {
	#contents ul.columns > li > .shadow-frame {
		height: 100%;
	}
}
/* .img-txt */
@media screen and (min-width: 768px) {
	#contents ul.columns > li > .img-txt .txt {
		height: 100%;
	}
}




/*  ul.flow  */
#contents ul.flow {
	position: relative;
	margin: 0;
	padding: 4em 0;
	box-sizing: border-box;
}
#contents ul.flow li {
	position: relative;
	z-index: 2;
}
/*
#contents ul.flow:before {
	position: absolute;
	top: 0;
	left: 4.5em;
	display: block;
	content: "";
	width: 3px;
	height: 100%;
	border-left: 3px dotted var(--main-color);
	z-index: 1;
}
*/
#contents ul.flow .dash-v {
	position: absolute;
	top: 0;
	left: calc(1em + 2em + 2em);
	display: block;
	content: "";
	width: 2px;
	height: 100%;
	background-image: repeating-linear-gradient(180deg, var(--main-color), var(--main-color) 4px, transparent 4px, transparent 6px);
	background-position: left top;
	background-repeat: repeat-y;
	background-size: 2px 100%;
}
#contents ul.flow .dash-v:before,
#contents ul.flow .dash-v:after {
	display: block;
	content: "";
	width: 10px;
	height: 10px;
	border-radius: 9999px;
	background-color: var(--main-color);
}
#contents ul.flow .dash-v:before {
	position: absolute;
	top: 0;
	left: -4px;
}
#contents ul.flow .dash-v:after {
	position: absolute;
	bottom: 0;
	left: -4px;
}
@media screen and (min-width: 768px) {
	#contents ul.flow .dash-v {
		left: calc(2em + 2em + 2em);
	}
}







/*  ul.steps  */
/* common */
#contents ul.steps {
	display: none;
}
@media screen and (min-width: 768px) {
	#contents ul.steps {
		display: flex;
		position: relative;
		margin: 4em 0;
	}
	/*
	#contents ul.steps:before {
		position: absolute;
		top: calc(1em + 45px);
		left: 0;
		right: 0;
		content: "";
		display: block;
		border-top: 3px dotted var(--main-color);
		width: calc(100% - 20%);
		height: 3px;
		margin: auto;
		z-index: 1;
	}
	*/
	#contents ul.steps:before {
		position: absolute;
		top: calc(1em + 45px);
		left: 0;
		right: 0;
		content: "";
		display: block;
		width: calc(100% - 20%);
		height: 2px;
		margin: auto;
		background-image: repeating-linear-gradient(90deg, var(--main-color), var(--main-color) 4px, transparent 4px, transparent 6px);
		background-position: left top;
		background-repeat: repeat-x;
		background-size: 100% 2px;
		z-index: 1;
	}
	#contents ul.steps li {
		padding: 0;
	}
	#contents ul.steps li .icon-txt {
		padding: 0;
	}
}
/* .number-circle */
#contents ul.steps li .number-circle {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 90px;
	height: 90px;
	border-radius: 9999px;
	background-color: #ffffff;
	font-family: 'DIN-Condensed', sans-serif;
	font-size: 2em;
	color: var(--main-color);
	text-align: center;
	line-height: 1;
	z-index: 2;
}
#contents ul.steps li .number-circle span i {
	display: block;
	font-style: normal;
	font-size: 0.5em;
}





/*  ul.circles  */
#contents ul.circles {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}
#contents ul.circles li {
	width: 50%;
	padding: 1em;
	box-sizing: border-box;
}
#contents ul.circles li:before {
	content: none;
}
#contents ul.circles li .wrap {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 150px;
	height: 150px;
	border-radius: 9999px;
	border: 2px solid var(--main-color);
	font-size: 1.5em;
	font-weight: bold;
	color: var(--main-color);
	text-align: center;
}
@media screen and (min-width: 768px) {
	#contents ul.circles li {
		width: 25%;
	}
	#contents ul.circles li .wrap {
		width: 200px;
		height: 200px;
	}
}





/*  ul.chart  */
#contents ul.chart {
	position: relative;
	display: flex;
	justify-content: center;
}
#contents ul.chart:after {
	display: block;
	content: "↓";
	width: 100%;
	font-size: 2em;
	font-weight: bold;
	color: var(--main-color);
	text-align: center;
	line-height: 1;
}
#contents ul.chart > li {
	position: relative;
	padding: 2em !important;
}
#contents ul.chart > li:before {
	content: none;
}
#contents ul.chart > li + li:before {
	position: absolute;
	top: -0.5em;
	right: 0;
	bottom: auto;
	left: 0;
	display: block;
	content: "＋";
	width: 1em;
	height: 1em;
	margin: auto;
	background-color: transparent;
	font-size: 1.5em;
	color: var(--main-color);
	line-height: 1;
}
@media screen and (min-width: 768px) {
	#contents ul.chart > li + li:before {
		top: 0;
		right: auto;
		bottom: 0;
		left: -0.5em;
	}
}






/*  ul.switch  */
#contents ul.switch {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin: 2em 0;
	border-radius: 9999px;
	background-color: #eeeeee;
}
#contents ul.switch > li {
	width: 33.33%;
	margin: 0;
	padding: 0;
}
#contents ul.switch > li:before {
	content: none;
}
#contents ul.switch > li a {
	display: block;
	width: 100%;
	border-radius: 9999px;
	padding: 0.5em 1em;
	font-weight: bold;
	color: #cccccc;
	text-align: center;
	box-sizing: border-box;
	cursor: pointer;
}
#contents ul.switch > li a.current {
	background-color: var(--main-color);
	color: #ffffff;
}
#contents ul.switch > li a[data-type="shin-nyu"].current {
	background-color: var(--shin-nyu-color);
}
#contents ul.switch > li a[data-type="ten-nyu"].current {
	background-color: var(--ten-nyu-color);
}
#contents ul.switch > li a[data-type="hen-nyu"].current {
	background-color: var(--hen-nyu-color);
}
@media screen and (min-width: 768px) {
	#contents ul.switch {
		margin: 4em 0;
	}
}

/*  ul.types  */
#contents ul.types {
	margin: 2em 0;
}
#contents ul.types > li {
	margin: 0;
}
#contents ul.types > li:before {
	content: none;
}
@media screen and (min-width: 768px) {
	#contents ul.types {
		margin: 4em 0;
	}
}






/*  ul.indexes  */
#contents ul.indexes {
	margin: 2em 0;
}
#contents ul.indexes > li {
	margin: 0;
}
#contents ul.indexes > li:before {
	content: none;
}







/*  dl.open-close  */
#contents dl.open-close {
	margin: 0;
}
#contents dl.open-close dt,
#contents dl.open-close dd {
	padding: 1em 0;
	box-sizing: border-box;
}
#contents dl.open-close dt {
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1px solid #eeeeee;
	cursor: pointer;
}
#contents dl.open-close dt:after {
	content: "＋";
	font-size: 2em;
	font-weight: bold;
	color: var(--main-color);
}
#contents dl.open-close dt.open:after {
	content: "ー";
}
#contents dl.open-close dt h3 span {
	display: block;
	font-weight: normal;
}




/*  .faq  */
#contents .faq {
	margin: 2em 0;
}
#contents .faq h2 {
	margin: 0 0 1em 0;
	padding: 0;
	border: none;
}
#contents .faq h2:after {
	content: none;
}






/*  dl.q-a  */
#contents dl.q-a {
	margin: 0;
}
#contents dl.q-a dt,
#contents dl.q-a dd {
	padding: 1.5em 0;
	box-sizing: border-box;
}
#contents dl.q-a dt {
	display: flex;
	align-items: center;
	border-top: 1px solid #eeeeee;
	font-size: 1.125em;
	font-weight: bold;
	cursor: pointer;
}
#contents dl.q-a dt:before {
	flex-shrink: 0;
	content: "Q.";
	margin: 0 0.5em 0 0;
	font-family: 'DIN-Condensed', sans-serif;
	font-size: 2em;
	color: var(--main-color);
	text-align: center;
}





/*  .round-table  */
#contents .round-table {
	margin: 2em 0;
}
#contents .round-table .tr {
	margin: 1em 0;
	border-radius: 10px;
	background-color: var(--light-color);
}
#contents .round-table .tr:nth-of-type(3) {
	background-color: var(--light-color);
}
#contents .round-table .tr:nth-of-type(2) {
	background-color: var(--quarter-color);
}
#contents .round-table .tr:nth-of-type(1) {
	background-color: var(--half-color);
}
#contents .round-table .tr .cell {
	padding: 1em;
	box-sizing: border-box;
}
#contents .round-table .tr .cell:not(:first-of-type) {
	flex-grow: 2;
}
#contents .round-table .tr .cell .th {
	padding: 1em;
	font-size: 1.125em;
	font-weight: bold;
	text-align: center;
	box-sizing: border-box;
}
#contents .round-table .tr .cell .td {
	padding: 1em;
	border-radius: 10px;
	background-color: #ffffff;
	box-sizing: border-box;
}
#contents .round-table .tr .cell .supple {
	margin: 0 1em;
	font-size: 0.75em;
	font-weight: normal;
	color: #999999;
}
#contents .round-table .tr .cell strong {
	display: block;
	font-size: 2em;
	text-align: center;
}
#contents .round-table .tr .cell table tr td:last-of-type {
	text-align: right;
}
@media screen and (min-width: 768px) {
	#contents .round-table .tr {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;
	}
	#contents .round-table .tr .cell {
		width: 33.33%;
	}
}






/*  .img-txt  */
/* common */
#contents .img-txt {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}
#contents .img-txt > .img {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
}
#contents .img-txt > .img img {
	display: block;
	width: 100%;
	height: auto;
}
#contents .img-txt > .txt {
	width: 100%;
	padding: 2em;
	box-sizing: border-box;
}
#contents .img-txt > .txt > strong {
	display: block;
	margin: 0 0 0.5em 0;
}
#contents .img-txt > .txt > *:first-child {
	margin-top: 0;
}
#contents .img-txt > .txt > *:last-child {
	margin-bottom: 0;
}
@media screen and (min-width: 768px) {
	#contents .img-txt {
		justify-content: space-between;
	}
	#contents .img-txt > .img {
		flex-shrink: 0;
		width: 30%;
	}
	#contents .img-txt > .img img {
		width: auto;
		height: 100%;
	}
	#contents .img-txt > .txt {
		flex-grow: 2;
		width: 70%;
		padding: 0 0 0 4em;
	}
}

/* .equal */
@media screen and (min-width: 768px) {
	#contents .img-txt.equal > .img {
		width: 45%;
	}
	#contents .img-txt.equal > .txt {
		width: 55%;
	}
}

/* .reverse */
@media screen and (min-width: 768px) {
	#contents .img-txt.reverse {
		flex-direction: row-reverse;
	}
	#contents .img-txt.reverse > .txt {
		padding: 0 4em 0 0;
	}
}

/* .horizontal */
#contents .img-txt.horizontal > .img {
	width: 30%;
}
#contents .img-txt.horizontal > .txt {
	width: 70%;
	padding: 0 0 0 2em;
}
@media screen and (min-width: 768px) {
	#contents .img-txt.horizontal > .txt {
		padding: 0 0 0 4em;
	}
}

/* .vertical */
@media screen and (min-width: 768px) {
	#contents .img-txt.vertical > .img {
		width: 100%;
	}
	#contents .img-txt.vertical > .img img {
		width: 100%;
		height: auto;
	}
	#contents .img-txt.vertical > .txt {
		width: 100%;
		padding: 2em;
	}
}

/* .shadow-frame */
@media screen and (min-width: 768px) {
	#contents .shadow-frame > .img-txt {
		align-items: stretch;
	}
	#contents .shadow-frame > .img-txt > .img img {
		object-fit: cover;
	}
	#contents .shadow-frame > .img-txt > .txt {
		padding: 3em;
	}
	#contents .shadow-frame > .img-txt.vertical > .txt {
		padding: 2em;
	}
}





/*  .icon-txt  */
#contents .icon-txt {
	display: flex;
	align-items: center;
	padding: 1em 2em;
	box-sizing: border-box;
}
#contents .icon-txt .img img {
	width: 60px;
	height: auto;
}
#contents .icon-txt .txt {
	padding: 0 0 0 2em;
	box-sizing: border-box;
}
#contents .icon-txt .txt strong {
	display: block;
	font-size: 1.125em;
	margin: 0 0 0.5em 0;
}
@media screen and (min-width: 768px) {
	#contents .icon-txt {
		flex-wrap: wrap;
		justify-content: center;
		padding: 2em 1em;
	}
	#contents .icon-txt .img {
		display: flex;
		justify-content: center;
		width: 100%;
	}
	#contents .icon-txt .txt {
		width: 100%;
		padding: 1em 0 0 0;
		text-align: center;
	}
}





/*

    slider

*/
/*  .slider-frame  */
#contents .slider-frame {
	width: 100%;
	overflow: hidden;
}
#contents .slider-frame ul {
	position: relative;
	left: 0;
	display: flex;
	list-style: none;
	margin: 0;
}
#contents .slider-frame ul::-webkit-scrollbar {
	display: none;
}
#contents .slider-frame ul li {
	flex-shrink: 0;
	margin: 0;
	padding: 0 0.5em;
	box-sizing: border-box;
}
#contents .slider-frame ul li .frame {
	position: relative;
	border-radius: 20px;
	overflow: hidden;
}
#contents .slider-frame ul li .frame img {
	display: block;
	width: 300px;
	height: 200px;
}
#contents .slider-frame ul li .frame .detail {
	position: absolute;
	bottom: 0;
	padding: 1em 2em;
	width: 100%;
	background-color: rgba(0,0,0,0.5);
	color: #ffffff;
	box-sizing: border-box;
}
#contents .slider-frame ul li .frame .detail strong {
	display: block;
	margin: 0 0 0.5em 0;
}
@media screen and (min-width: 768px) {
	#contents .slider-frame ul li .frame img {
		width: 630px;
		height: 420px;
	}
}
/* reset */
#contents .slider-frame ul li:before {
	content: none;
}
/* .pointer */
#contents .pointer {
	margin: 1.5em 0;
	text-align: center;
	line-height: 1;
}
#contents .pointer a {
	display: inline-block;
	width: 10px;
	height: 10px;
	margin: 0 5px;
	background-color: #eeeeee;
	border-radius: 9999px;
	cursor: pointer;
}
#contents .pointer a.current {
	background-color: #cccccc;
}





/*

    Page

*/
/*  #kashimanet  */
#kashimanet section#intro h2 {
	margin: 2em 0;
	padding: 0;
	border: none;
}
#kashimanet section#intro h2:after {
	content: none;
}
#kashimanet section#intro h2 img {
	width: 100%;
	height: auto;
	max-width: 420px;
}

#kashimanet section#features img.img02 {
	max-width: 105px;
}
#kashimanet section#features ul.columns li .header {
	align-items: center;
}
#kashimanet section#features .emphasis.low .img-txt .img {
	width: 90px;
}

#kashimanet section#voices .img-txt .img {
	position: relative;
	margin-bottom: -1em;
	z-index: 1;
}

#kashimanet section#requirements h3 {
	color: #333333;
}





/*  #system  */
#system section {
	padding: 0 !important;
	background-color: transparent !important;
}
#system section#correspondence-school ul.columns.emphasis.low {
	margin: 2em 0;
	padding: 0;
}
#system section#correspondence-school ul.columns.emphasis.low li h3 {
	margin: 0;
}
#system section#correspondence-school ul.columns.emphasis.low li ul {
	margin: 0 -1em;
}
#system section#roles ul.columns {
	position: relative;
}
#system section#roles ul.columns > img.icon {
	position: absolute;
	top: 0;
	right: 3em;
	bottom: 0;
	left: auto;
	display: block;
	margin: auto;
	width: 90px;
	max-width: none;
}
@media screen and (min-width: 768px) {
	#system section#roles ul.columns > img.icon {
		position: absolute;
		top: 3em;
		right: 0;
		bottom: auto;
		left: 0;
	}
	#system section#roles ul.columns li .shadow-frame .icon-txt .txt ul {
		display: inline-block;
		margin: 0 auto;
	}
}





/*  #styles  */
#styles section ul.columns.part3 li .shadow-frame .img-txt .txt h3 {
	margin: 0;
	color: #333333;
}
#styles section ul.columns.part3 li .shadow-frame .img-txt .txt a.button.square {
	width: 100%;
	padding: 0.5em 1em;
	font-size: 1em;
}
@media screen and (min-width: 768px) {
	#styles section ul.columns.part3 li .shadow-frame .img-txt .txt {
		padding: 2em;
	}
}





/*  #options  */
#options section ul.columns li .shadow-frame .img-txt .txt a.button.square {
	width: fit-content;
	padding: 0.5em 1em;
	font-size: 1em;
}





/*  #learning  */
#learning section ul.columns li .shadow-frame .img-txt .txt {
	position: relative;
}
#learning section ul.columns li .shadow-frame .img-txt .txt .tag {
	position: absolute;
	top: 2em;
	right: 2em;
}
#learning section ul.chart {
	margin: 0 -1em;
}
#learning section ul.chart:after {
	content: none;
}
#learning section ul.chart li:nth-of-type(3):before,
#learning section ul.chart li:nth-of-type(4):before {
	content: "↓";
}
@media screen and (min-width: 768px) {
	#learning section ul.chart li:nth-of-type(3):before,
	#learning section ul.chart li:nth-of-type(4):before {
		transform: rotate(-90deg);
	}
}
#learning section ul.chart li:nth-of-type(4) .shadow-frame {
	background-color: var(--main-color);
	color: #ffffff;
}
#learning section .emphasis.high {
	margin-bottom: 0;
}
#learning section .emphasis.high a.button {
	padding: 0.5em 1em;
}






/*  #uniform  */
#uniform section:nth-of-type(2n) {
	background-color: transparent;
}
@media screen and (min-width: 768px) {
	#uniform section:nth-of-type(1) .img-txt .txt ul.check li {
		margin: 2em 0;
	}
}
#uniform section ul.columns {
	justify-content: center;
}
#uniform section ul.columns li .emphasis {
	padding: 1em 0 0;
}
#uniform section ul.columns li .emphasis h3 {
	margin: 1em 0;
	text-align: center;
}
#uniform section ul.columns li .emphasis .icon-txt .img {
	padding: 0 1em 0 0;
}
#uniform section ul.columns li .emphasis .icon-txt .img img {
	width: 125px;
	max-width: none;
}
#uniform section ul.columns li .emphasis .icon-txt .txt {
	padding: 2em;
	text-align: left;
}
#uniform section ul.columns li .emphasis .icon-txt .txt strong {
	font-size: 1em;
	color: var(--main-color);
}
#uniform section ul.columns li .emphasis .icon-txt .txt strong + p {
	font-size: 0.8125em;
	font-feature-settings: "palt";
}
@media screen and (min-width: 768px) {
	#uniform section ul.columns li .emphasis .icon-txt .img {
		padding: 0;
	}
	#uniform section ul.columns li .emphasis .icon-txt .img img {
		width: 150px;
	}
}





/*  #flow  */
#flow section ul.columns.part3 li .shadow-frame .img-txt .txt h3 {
	margin: 1em 0;
	color: #333333;
}
#flow section ul.columns.part3 li .shadow-frame .img-txt .txt a.button.square {
	padding: 0.5em 1em;
	border: none;
	font-size: 1em;
}
#flow section ul.columns.part3 li .shadow-frame .img-txt .txt .tag {
	border: none;
	color: #ffffff;
}






/*  #tution  */
#tution .emphasis.high {
	font-size: 1.5em;
	font-weight: bold;
	text-align: center;
}
#tution .total strong span {
	display: block;
	margin: 0 0 0 0.25em;
	font-size: 2em;
}
#tution section#details .round-table .cell .td {
	font-size: 1.125em;
	font-weight: bold;
	text-align: center;
}
#tution section#details .shadow-frame:has(dl.open-close) {
	margin: 4em 0;
}
#tution section#details .shadow-frame dl.open-close h3 {
	margin: 1em 0;
}





/*  #guidance  */
#guidance section#program .img-txt.equal {
	margin: 4em 0;
}
#guidance section#messages ul.columns li .shadow-frame .img-txt {
	align-items: center;
}
#guidance section#messages ul.columns li .shadow-frame .img-txt .img {
	margin: 2em 0 0 0;
	width: 150px;
	height: 150px;
	border-radius: 9999px;
	background-color: #eeeeee;
	overflow: hidden;
}
@media screen and (min-width: 768px) {
	#guidance section#messages ul.columns li .shadow-frame .img-txt .img {
		margin: 0 0 0 2em;
		width: 200px;
		height: 200px;
	}
}
#guidance section#achievement table {
	table-layout: fixed;
}





/*  #faq  */
#faq section .container h2 {
	margin: 0 0 1em 0;
	padding: 0;
	border: none;
}
#faq section .container h2:after {
	content: none;
}






/*  #requirements  */
@media screen and (min-width: 768px) {
	#requirements section ul.columns.part3 li .shadow-frame .img-txt {
		height: 100%;
	}
	#requirements section ul.columns.part3 li .shadow-frame .img-txt .txt {
		display: flex;
		flex-wrap: wrap;
		align-content: space-between;
		padding: 2em;
	}
	#requirements section ul.columns.part3 li .shadow-frame .img-txt .txt h3 {
		margin: 0;
	}
	#requirements section ul.columns.part3 li .shadow-frame .img-txt .txt a.button.square {
		width: 100%;
	}
}





/*  #message2  */
@media screen and (min-width: 768px) {
	#message2 section#process ul.flow #ten-nyu .img-txt,
	#message2 section#process ul.flow #hen-nyu .img-txt {
		height: 100%;
	}
	#message2 section#process ul.flow #ten-nyu .img-txt .txt,
	#message2 section#process ul.flow #hen-nyu .img-txt .txt {
		display: flex;
		flex-wrap: wrap;
		align-content: space-between;
		padding: 2em;
	}
}





/*  #message3  */
@media screen and (min-width: 768px) {
	#message3 section#data .img-txt {
		margin: 3em 0 0;
		align-items: flex-start;
	}
	#message3 section#data .img-txt .txt ul.check li {
		margin: 2em 0;
	}
}






/*

    .asahi

*/
/*  #message1  */
/*  #message2  */
body.asahi #message1 div.features div.item div.text h2,
body.asahi #message2 div.features div.item div.text h2 {
	margin-left: 0;
}
body.asahi #message1 div.features div.item div.text p.content,
body.asahi #message2 div.features div.item div.text p.content {
	margin-left: 0;
}

/*  #message3  */
body.asahi #message3 ul.switch > li {
	width: 20%;
}





/*

    .yamakita

*/
/*  #schooling  */
/* #mv */
body.yamakita #schooling section#mv {
	margin-top: -4em;
	padding: 0;
}
body.yamakita #schooling section#mv img {
	width: auto;
	height: 300px;
	object-fit: cover;
}
@media screen and (min-width: 768px) {
	body.yamakita #schooling section#mv img {
		width: 100%;
		height: auto;
		object-fit: cover;
	}
}

/* #movie */
body.yamakita #schooling section#movie .shadow-frame {
	width: 100%;
}
body.yamakita #schooling section#movie video {
	display: block;
	width: 100%;
	max-height: 100vh;
	object-fit: cover;
	object-position: bottom center;
}

/* #messages */
body.yamakita #schooling section#messages ul.columns li .icon-txt {
	padding: 2em;
}
body.yamakita #schooling section#messages ul.columns li .icon-txt .txt {
	text-align: left;
}

/* #chart */
body.yamakita #schooling section#chart .emphasis.high strong {
	font-size: 1.5em;
}
@media screen and (min-width: 768px) {
	body.yamakita #schooling section#chart .emphasis.high {
		width 100%;
		margin: 2em auto;
	}
}
body.yamakita #schooling section#chart ul.chart li .shadow-frame {
	transform: scale(1);
	transition: transform 0.3s ease;
	cursor: pointer;
}
body.yamakita #schooling section#chart ul.chart li .shadow-frame:hover {
	transform: scale(1.1);
	background-color: var(--light-color);
}

/*  #tution  */
@media screen and (min-width: 768px) {
	body.yamakita #tution .round-table .tr .cell {
		width: 25%;
	}
}

/*  #message2  */
@media screen and (min-width: 768px) {
	body.yamakita #message2 #process ul.flow li#ten-nyu .img-txt .txt strong,
	body.yamakita #message2 #process ul.flow li#hen-nyu .img-txt .txt strong {
		display: block;
		width: 100%;
	}
	body.yamakita #message2 #process ul.flow li#ten-nyu .img-txt .txt a.button,
	body.yamakita #message2 #process ul.flow li#hen-nyu .img-txt .txt a.button {
		padding: 0.5em 2em;
		width: 100%;
	}
}