@charset "UTF-8";
/* CSS Document */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');


html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, dialog, figure, footer, header,
hgroup, menu, nav, section,
time, mark, audio, video {
		/*-webkit-transition: 0.25s ease-in-out;
		-moz-transition: 0.25s ease-in-out;
		transition: 0.25s ease-in-out;*/
}
img {
	max-width:100%;
	height:auto;
}

/* -----------------------------------------------------------------------
## Reset #################################################################
----------------------------------------------------------------------- */
html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,img,
pre,form,fieldset,input,textarea,p,blockquote,th,td {
  margin: 0px;
  padding: 0px;
}
html {overflow:auto; height:100%;}
body{
	color: #000;
	font-size: 14px;
	font-family: 'Noto Sans JP', sans-serif;
  	font-weight: 400;
  	font-style: normal;
	overflow-x: hidden;
	-webkit-text-size-adjust: 100%;
	letter-spacing: 0.05em;
}
fieldset,img {
  border: 0;
  vertical-align: bottom;
}

address,caption,cite,code,dfn,em,var {
  font-style: normal;
  font-weight: normal;
}
ul {
  list-style: none;
}
ol li {
	list-style-position: outside;
	list-style: decimal;
	margin-left: 25px;
	margin-bottom:5px;
}

caption,th {
  text-align: left;
  font-weight: normal;
}
h1,h2,h3,h4,h5,h6 {
  font-size: 100%;
  font-weight: normal;
}

a{
	color: #333333;
	text-decoration:none;
}
sup,sub {
    height: 0;
    line-height: 1;
    vertical-align: baseline;
    position: relative;
     
}
sup {
    bottom: 0.6ex;
}
sub {
    top: .5ex;
}
.alpha{
	display:block;
	text-decoration:none;
	opacity: 1;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all  0.3s ease;
}
.alpha:hover{
	opacity: 0.7;
}


.clearfix:after {
    content:" ";
    display:block;
    clear:both;
}

.ma_b5 {margin-bottom: 5px;}
.ma_b10 {margin-bottom: 10px;}
.ma_b15 {margin-bottom: 15px;}
.ma_b20 {margin-bottom: 20px;}
.ma_b21 {margin-bottom: 21px;}
.ma_b25 {margin-bottom: 25px;}
.ma_b30 {margin-bottom: 30px;}
table, tr, th, td {
    border-collapse: collapse;
	text-align:left;
	font-weight:normal;
	vertical-align:top;
}
.lett {letter-spacing: -0.1em;}

.pc {display:block!important;}
.sp {display:none!important;}

/*---- FOR SP ----*/
@media only screen and (max-width: 768px){
body{
	color: #000;
	font: 12px/165% "Zen Kaku Gothic New", sans-serif;
	-webkit-text-size-adjust: 100%;
	letter-spacing:0.05em;
	line-height:160% !important;
	
}

.pc {display:none !important;}
.sp {display:block!important;}
.img100 {width:100%; height:auto;}
.img90 {width:90%; height:auto;}
.img80 {width:80%; height:auto;}
.img70 {width:70%; height:auto;}
}
.re { position:relative;}


a:hover {
	opacity: 0.6;
}
footer a:hover {
	opacity: 1.0;
}

/* フェードイン用のスタイル */
.inview {
  opacity: 0; /* 初期状態で透明 */
  transform: translateY(80px); /* 下に50pxずらす */
  transition: opacity 0.9s ease-out, transform 0.9s ease-out; /* 滑らかなアニメーション */
}

.inview.is-show {
  opacity: 1; /* 表示状態で不透明 */
  transform: translateY(0); /* 元の位置に戻す */
}

/* 各セクションや要素に適用する場合は必要に応じて調整 */
section, .inview > * {
  will-change: opacity, transform; /* パフォーマンス最適化 */
}


/****************************************

HEADER

*****************************************/
header {
	background-image: linear-gradient(90deg, #f7a948 14%, #ff8000);
	height: 150px;
	padding: 0;
}
header .inner {
	max-width: 100%;
	height: 100px;
	margin: 0 auto;
	padding: 0;
	background-color: #fff;
}
header .inner h1 {
	max-width: 160px;
	padding: 30px 20px 0;
	vertical-align: middle;
	margin: 0;
}
@media only screen and (max-width: 768px){
header {
	background-image: linear-gradient(90deg, #f7a948 14%, #ff8000);
	height: 80px;
	padding: 0;
}
header .inner {
	max-width: 100%;
	height: 60px;
	margin: 0 auto;
	padding: 0;
	background-color: #fff;
}
header .inner h1 {
	max-width: 100px;
	padding: 20px 20px 0;
	vertical-align: middle;
	margin: 0;
}
}

/****************************************

footer

*****************************************/
footer {
	width: 100%;
	max-width: 100%;
	background-size: 100%;
}
footer .ft-sns {
	width: 100%;
	max-width: 100%;
	margin: auto;
	padding: 50px 0 50px;
	background-color: #fff;
}

footer .ft-sns ul {
	width: 300px;
	max-width: 100%;
	margin: auto;
	display: flex;
	justify-content: space-between;
	align-items: center;

}


footer .ft-logo {
	width: 100%;
	padding: 50px 0 50px;
	margin: auto;
	background-color: #000;
}
@media only screen and (max-width: 768px){
	footer .ft-logo {
		
	}
}

footer .footer_logo {
	width: 264px;
	max-width: 100%;
	margin: auto;
	text-align: center;
}

footer .copyright {
	width: 264px;
	max-width: 100%;
	margin: auto;
	padding-top: 20px;
	text-align: center;
}

/*---- FOR SP ----*/


/******************************
　inview css
******************************/
/*動き1*/
.sli-up1 {
	opacity: 0;
	transform: translate(0px, 30px);
	-webkit-transform: translate(0px, 30px);
}

.sli-up2 {
	opacity: 0;
	transform: translate(0px, 30px);
	-webkit-transform: translate(0px, 30px);
}

.sli-up3 {
	opacity: 0;
	transform: translate(0px, 30px);
	-webkit-transform: translate(0px, 30px);
}


/******************************
main
******************************/
/*mv*/


#main {
	width:100%;
	max-width: 100%;
	max-height:760px;
	background: url("../img/main_back.png") no-repeat center bottom;
	background-size: cover;
}
@media only screen and (max-width: 768px){
#main {
	width:100%;
	max-width: 100%;
	max-height:760px;
	background: url("../img/main_back_sp.png") no-repeat center bottom;
	background-size: cover;
}
}

#main h2 {
	width: 680px;
	max-width: 100%;
	margin: auto;
	padding: 80px 0 40px;
}
@media only screen and (max-width: 768px){
#main h2 {
	width: 60%;
	max-width: 100%;
	margin: auto;
	padding: 80px 0 40px;
}
}


#main ul {
	width:100%;
	max-width: 100%;
	margin: auto;
	padding: 40px 0 30px;
	display: flex;
	justify-content: center;
	align-items: center;
}

#main ul li {
	width: 260px;
	max-width: 100%;
	margin: 0 20px;
	padding: 0;
}
@media only screen and (max-width: 768px){
#main ul {
	width:70%;
	max-width: 100%;
	margin: auto;
	padding: 0px 0 20px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;

}
#main ul li {
	width: 44%;
	max-width: 100%;
	margin: 0 2%;
	padding: 0 0 10px;
}
}

#main p {
	width: 100%;
	max-width: 100%;
	margin: auto;
	padding: 20px 40px 20px 0;
	color: #fff;
	text-align: right;
}
@media only screen and (max-width: 768px){
#main p {
	width: 100%;
	max-width: 100%;
	margin: auto;
	padding: 20px 5px;
	color: #fff;
	font-size: 2.4vw;
	text-align: center;
	line-height: 1.6;
}
}




/****************************************
charm
*****************************************/

#charm {
	width:100%;
	max-width: 100%;
	max-height: 620px;
	background: url("../img/charm_back.png") no-repeat center bottom;
	background-size: cover;
}
@media only screen and (max-width: 768px){
#charm {
	width:100%;
	max-width: 100%;
	max-height: 620px;
	background: url("../img/charm_back_sp.png") no-repeat center bottom;
	background-size: cover;
}
}

#charm h3 {
	width:100%;
	max-width: 100%;
	margin: auto;
	padding: 80px 0 30px;
	color: #003185;
	text-align: center;
	font-size: 3.2rem;
	font-weight: 400;
	letter-spacing: 0.4rem;
}
@media only screen and (max-width: 768px){
#charm h3 {
	width:100%;
	max-width: 100%;
	margin: auto;
	padding: 40px 0 0px;
	color: #003185;
	text-align: center;
	font-size: 1.66rem;
	font-weight: 400;
	letter-spacing: 0.3rem;
	line-height: 1.6;
}
}

#charm ul {
	width:100%;
	max-width: 100%;
	margin: auto;
	padding: 40px 0 100px;
	display: flex;
	justify-content: center;
	align-items: center;
}

#charm ul li {
	width: 234px;
	max-width: 100%;
	margin: 0 20px;
	padding: 0;
}
@media only screen and (max-width: 768px){
#charm ul {
	width:70%;
	max-width: 100%;
	margin: auto;
	padding: 40px 0 100px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
}

#charm ul li {
	width: 44%;
	max-width: 100%;
	margin: 0 2%;
	padding: 0 0 16px;
}
}



/****************************************
examination
*****************************************/

main .examination {
	background: url("../img/back_01.png") repeat-y center 100px;
	background-size: contain;
	background-color: #d8f0ff;
}


/****************************************
point
*****************************************/

#point {
	width:100%;
	max-width: 100%;
	margin: auto;
	padding: 80px 0;
}
@media only screen and (max-width: 768px){
#point {
	width:100%;
	max-width: 100%;
	margin: auto;
	padding: 60px 0 30px;
}
}


#point .inner {
	width: 1200px;
	max-width: 100%;
	margin: auto;
	padding: 0 0 80px;
	border-radius: 100px;
	background-color: rgba(255, 255, 255, 0.7);
}

@media only screen and (max-width: 768px){
#point .inner {
	width: 94%;
	max-width: 100%;
	margin: auto;
	padding: 0 0 40px;
	border-radius: 40px;
	background-color: rgba(255, 255, 255, 0.7);
}
}

#point .inner h3 {
	width: 1200px;
	max-width: 100%;
	height: 136px;
	margin: auto;
	padding-top: 34px;
	background: url("../img/orange_back.png") no-repeat center top;
	background-size: contain;
	color: #fff;
	font-size: 3.0rem;
	font-weight: 500;
	letter-spacing: 0.4rem;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: baseline;
}
@media only screen and (max-width: 768px){
#point .inner h3 {
	width: 100%;
	max-width: 100%;
	height: 60px;
	padding-top: 16px;
	background: url("../img/orange_back_sp.png") no-repeat center top;
	background-size: contain;
	color: #fff;
	font-size: 0.9rem;
	font-weight: 500;
	letter-spacing: 0.1rem;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: baseline;
}
}

#point .inner ul {
	width: 100%;
	max-width: 100%;
	margin: auto;
	padding: 0;
}
@media only screen and (max-width: 768px){
#point .inner ul {
	width: 90%;
	max-width: 100%;
	margin: auto;
	padding: 0 0 0 2%;
}
}

#point .inner li {
	width: 80%;
	max-width: 100%;
	margin: 0 10% 4%;
}



/****************************************
challenge
*****************************************/

#challenge {
	width:100%;
	max-width: 100%;
	margin: auto;
	padding: 80px 0;
}
@media only screen and (max-width: 768px){
#challenge {
	width:100%;
	max-width: 100%;
	margin: auto;
	padding: 30px 0;
}
}

#challenge .inner {
	width: 1200px;
	max-width: 100%;
	margin: auto;
	padding: 0 0 80px;
	border-radius: 100px;
	background-color: rgba(255, 255, 255, 0.7);
}


#challenge .inner h3 {
	width: 1200px;
	max-width: 100%;
	height: 136px;
	margin: auto;
	padding-top: 34px;
	background: url("../img/orange_back.png") no-repeat center top;
	background-size: contain;
	color: #fff;
	font-size: 3.0rem;
	font-weight: 500;
	letter-spacing: 0.4rem;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: baseline;
}
@media only screen and (max-width: 768px){
#challenge .inner {
	width: 94%;
	max-width: 100%;
	margin: auto;
	padding: 0 0 40px;
	border-radius: 40px;
	background-color: rgba(255, 255, 255, 0.7);
}
}
@media only screen and (max-width: 768px){
#challenge .inner h3 {
	width: 100%;
	max-width: 100%;
	height: 60px;
	margin: auto;
	padding-top: 16px;
	background: url("../img/orange_back_sp.png") no-repeat center top;
	background-size: contain;
	color: #fff;
	font-size: 0.9rem;
	font-weight: 500;
	letter-spacing: 0.1rem;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: baseline;
}
}

#challenge .more {
	width: 150px;
	max-width: 100%;
	margin: -250px 0 160px 80px; 
	padding: 0;
}
@media only screen and (max-width: 768px){
#challenge .more {
	width: 64px;
	max-width: 100%;
	margin: -90px 0 40px 0px; 
	padding: 0;
}
}

#challenge .white_box {
	width: 100%;
	max-width: 100%;
	margin: -36px auto 80px; 
	padding: 0;
	background-color: #fff;
}
@media only screen and (max-width: 768px){
#challenge .white_box {
	width: 100%;
	max-width: 100%;
	margin: -26px auto 40px; 
	padding: 0;
	background-color: #fff;
}
}

#challenge h4 {
	width: 100%;
	max-width: 100%;
	margin: 0px auto 0;
	padding: 0 0 10px;
	color: #003185;
	font-size: 2.2rem;
	font-weight: 500;
	letter-spacing: 0.4rem;
	text-align: center;
}
@media only screen and (max-width: 768px){
#challenge h4 {
	width: 100%;
	max-width: 100%;
	margin: -10px auto 0;
	padding: 0 0 10px;
	color: #003185;
	font-size: 1.06rem;
	font-weight: 500;
	letter-spacing: 0.2rem;
	text-align: center;
	line-height: 1.6;
}
}

#challenge p {
	width: 100%;
	max-width: 100%;
	margin:auto;
	padding: 60px 0 10px;
	font-size: 1.3rem;
	font-weight: 500;
	letter-spacing: 0.2rem;
	text-align: center;
}
@media only screen and (max-width: 768px){
#challenge p {
	width: 100%;
	max-width: 100%;
	margin:auto;
	padding: 30px 0 10px;
	font-size: 0.66rem;
	font-weight: 500;
	letter-spacing: 0.02rem;
	text-align: center;
}
}

#challenge .img {
	width: 80%;
	max-width: 100%;
	margin:auto;
	padding: 10px 0 60px;
	font-size: 1.4rem;
	font-weight: 500;
	letter-spacing: 0.4rem;
	text-align: center;
}
@media only screen and (max-width: 768px){
#challenge .img {
	width: 90%;
	max-width: 100%;
	margin:auto;
	padding: 10px 0 30px;
	font-size: 1.4rem;
	font-weight: 500;
	letter-spacing: 0.4rem;
	text-align: center;
}
}

#challenge .blue_box {
	width: 100%;
	max-width: 1140px;
	margin:auto;
	padding: 0 0 40px;
	border: #003185 3px solid;
}
@media only screen and (max-width: 768px){
#challenge .blue_box {
	width: 94%;
	max-width: 100%;
	margin:auto;
	padding: 0 0 20px;
	border: #003185 2px solid;
}
}

.text_wrapper {
  position: relative;
  margin-bottom: 45px;
}

#challenge .blue_box .head {
	width: 100%;
	padding: 10px 0 20px;
	background-color: #003185;
	text-align: center;
	color: #fff;
	font-size: 1.8rem;
	font-weight: 500;
	letter-spacing: 0.2rem;
}
@media only screen and (max-width: 768px){
#challenge .blue_box .head {
	width: 100%;
	padding: 10px 0 10px;
	background-color: #003185;
	text-align: center;
	color: #fff;
	font-size: 0.88rem;
	font-weight: 500;
	letter-spacing: 0.02rem;
}
}

#challenge .blue_box .read {
	width: 70%;
	padding: 30px 0 40px;
	margin: auto;
	text-align: center;
	color: #fff;
}
@media only screen and (max-width: 768px){
#challenge .blue_box .read {
	width: 90%;
	padding: 30px 0 40px;
	margin: auto;
	text-align: center;
	color: #fff;
}
}

#challenge .inner ul {
	width: 100%;
	max-width: 100%;
	margin: auto;
	padding: 0;
}



#challenge .inner li {
	width: 80%;
	max-width: 100%;
	margin: 0 10% 4%;
}

#challenge .step {
	width: 1000px;
	max-width: 1080px;
	margin:auto;
	padding: 0;
	border: #003185 3px solid;
	background-color: #fff;
}
@media only screen and (max-width: 768px){
#challenge .step {
	width: 90%;
	max-width: 100%;
	margin:auto;
	padding: 0 0;
	border: #003185 2px solid;
	background-color: #fff;
}
}

#challenge .step .step_head {
	border-bottom: #003185 2px solid;
	padding: 0;
}

#challenge .step .flex {
	margin: auto;
	padding: 0 30px;
	display: flex;
	justify-content: center;
	align-items: center;
}
@media only screen and (max-width: 768px){
#challenge .step .flex {
	margin: auto;
	padding: 0 10px;
	display: flex;
	justify-content: center;
	align-items: center;
}
}

#challenge .step .flex p {
	text-align: left;
}

#challenge .step p {
	margin: 0;
	padding: 40px 0;
	text-align: center;
	font-size: 1.00rem;
}
@media only screen and (max-width: 768px){
#challenge .step p {
	margin: 0;
	padding: 10px 0;
	text-align: center;
	font-size: 0.6rem;
	line-height: 1.4;
}
}

#challenge .step p.taisho {
	width: 14%;
	margin: 0;
	padding: 0;
	text-align: center;
	font-size: 1.12rem;
}
@media only screen and (max-width: 768px){
#challenge .step p.taisho {
	width: 24%;
	margin: 0;
	margin-right: 1%;
	padding: 0;
	text-align: center;
	font-size: 0.5rem;
}
}

#challenge .step span {
	margin:0;
	padding: 4px;
	border: #222 2px solid;
}
@media only screen and (max-width: 768px){
#challenge .step span {
	margin:0;
	padding: 8px 4px;
	border: #222 1px solid;
}
}

#challenge .step p.read2 {
	margin: 0;
	padding: 40px 0;
	text-align: left;
	font-size: 1.00rem;
	display: flex;
	justify-content: center;
	align-items: center;
}
@media only screen and (max-width: 768px){
#challenge .step p.read2 {
	width: 96%;
	max-width: 100%;
	margin: 0;
	padding: 10px 2%;
	text-align: left;
	font-size: 0.54rem;
	display: flex;
	justify-content: center;
	align-items: center;
}
}

#challenge .step .read3 {
	margin: auto;
	padding: 40px;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: left;
}
@media only screen and (max-width: 768px){
#challenge .step .read3 {
	margin: auto;
	padding: 4px;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: left;
}
}

#challenge .step .read3 p {
	margin: auto;
	padding: 0 0 0 60px;
	text-align: left;
	font-size: 1.00rem;
	line-height: 1.6;
}
@media only screen and (max-width: 768px){
#challenge .step .read3 p {
	width: 96%;
	max-width: 100%;
	margin: 0;
	padding: 10px 1%;
	text-align: center;
	font-size: 0.50rem;
	text-align: left;
}
}

#challenge .step span.co01 {
	color: #003185;
	padding: 0;
	border: none;
}

#challenge .step span.co02 {
	color: #ff2600;
	padding: 0;
	border: none;
}

#challenge .step dl {
	width: 100%;
	max-width: 100%;
	margin:auto;
	padding: 0;
	background-color: #99e8fb;
	display: flex;
	justify-content: center;
	align-items: center;
}

#challenge dl dt {
	width: 10%;
	max-width: 100%;
	margin:0;
	padding: 10px 30px;
	text-align: right;
}

#challenge dl dd {
	width: 80%;
	max-width: 100%;
	margin:0;
	padding: 0;
	font-size: 1.00rem;
	text-align: left;
}
@media only screen and (max-width: 768px){
#challenge .step dl {
	width: 100%;
	max-width: 100%;
	margin:auto;
	padding: 0;
	background-color: #99e8fb;
	display: flex;
	justify-content: center;
	align-items: center;
}

#challenge dl dt {
	width: 8%;
	max-width: 100%;
	margin:0;
	padding: 10px 6px;
	text-align: right;
}

#challenge dl dd {
	width: 90%;
	max-width: 100%;
	margin:0;
	padding: 0;
	font-size: 0.54rem;
	text-align: left;
	line-height: 1.4;
	letter-spacing: 0;
}
}

#challenge p.cotion {
	width: 1000px;
	max-width: 100%;
	margin: auto;
	padding: 10px 0;
	text-align: left;
	font-size: 0.88rem;
}
@media only screen and (max-width: 768px){
#challenge p.cotion {
	width: 94%;
	max-width: 100%;
	margin: auto;
	padding: 10px 0;
	text-align: left;
	font-size: 0.54rem;
}
}

#challenge .arrow01 {
	width: 1000px;
	max-width: 100%;
	margin: auto;
	padding: 40px 0;
	text-align: left;
	font-size: 0.88rem;
}
@media only screen and (max-width: 768px){
#challenge .arrow01 {
	width: 6%;
	max-width: 100%;
	margin: 0;
	padding: 20px 30px;
	text-align: left;
	font-size: 0.88rem;
}
}


/****************************************
system
*****************************************/

#system {
	width:100%;
	max-width: 100%;
	margin: auto;
	padding: 80px 0;
}
@media only screen and (max-width: 768px){
#system {
	width:100%;
	max-width: 100%;
	margin: auto;
	padding: 30px 0;
}
}

#system .inner {
	width: 1200px;
	max-width: 100%;
	margin: auto;
	padding: 0 0 80px;
	border-radius: 100px;
	background-color: rgba(255, 255, 255, 0.7);
}

#system .inner h3 {
	width: 1200px;
	max-width: 100%;
	height: 136px;
	margin: auto;
	padding-top: 34px;
	background: url("../img/orange_back.png") no-repeat center top;
	background-size: contain;
	color: #fff;
	font-size: 3.0rem;
	font-weight: 500;
	letter-spacing: 0.4rem;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: baseline;
}

@media only screen and (max-width: 768px){
#system .inner {
	width: 94%;
	max-width: 100%;
	margin: auto;
	padding: 0 0 40px;
	border-radius: 40px;
	background-color: rgba(255, 255, 255, 0.7);
}
}
@media only screen and (max-width: 768px){
#system .inner h3 {
	width: 100%;
	max-width: 100%;
	height: 60px;
	padding-top: 16px;
	background: url("../img/orange_back_sp.png") no-repeat center top;
	background-size: contain;
	color: #fff;
	font-size: 0.9rem;
	font-weight: 500;
	letter-spacing: 0.1rem;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: baseline;
}
}

#system .more {
	width: 150px;
	max-width: 100%;
	margin: -250px 0 160px 80px; 
	padding: 0;
}
@media only screen and (max-width: 768px){
#system .more {
	width: 64px;
	max-width: 100%;
	margin: -90px 0 40px 0px; 
	padding: 0;
}
}



#system h4 {
	width: 100%;
	max-width: 100%;
	margin: 0px auto 0;
	padding: 0 0 10px;
	color: #003185;
	font-size: 2.2rem;
	font-weight: 600;
	letter-spacing: 0.2rem;
	text-align: center;
}

#system p {
	width: 100%;
	max-width: 100%;
	margin:auto;
	padding: 60px 0 10px;
	font-size: 1.3rem;
	font-weight: 500;
	letter-spacing: 0.2rem;
	text-align: center;
}


#system .inner ul {
	width: 100%;
	max-width: 100%;
	margin: auto;
	padding: 0;
}

#system .inner li {
	width: 80%;
	max-width: 100%;
	margin: 0 0 4% 10%;
}
@media only screen and (max-width: 768px){
	#system .inner ul {
	width: 100%;
	max-width: 100%;
	margin: auto;
	padding: 0;
}

#system .inner li {
	width: 80%;
	max-width: 100%;
	margin: auto;
}
}


/****************************************
method
*****************************************/

#method {
	width:100%;
	max-width: 100%;
	margin: auto;
	padding: 80px 0;
}
@media only screen and (max-width: 768px){
#method {
	width:100%;
	max-width: 100%;
	margin: auto;
	padding: 30px 0;
}
}

#method .inner {
	width: 1200px;
	max-width: 100%;
	margin: auto;
	padding: 0 0 80px;
	border-radius: 100px;
	background-color: rgba(255, 255, 255, 0.7);
}

#method .inner h3 {
	width: 1200px;
	max-width: 100%;
	height: 136px;
	margin: auto;
	padding-top: 34px;
	background: url("../img/orange_back.png") no-repeat center top;
	background-size: contain;
	color: #fff;
	font-size: 3.0rem;
	font-weight: 500;
	letter-spacing: 0.4rem;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: baseline;
}
@media only screen and (max-width: 768px){
#method .inner {
	width: 94%;
	max-width: 100%;
	margin: auto;
	padding: 0 0 40px;
	border-radius: 40px;
	background-color: rgba(255, 255, 255, 0.7);
}
}
@media only screen and (max-width: 768px){
#method .inner h3 {
	width: 100%;
	max-width: 100%;
	height: 60px;
	padding-top: 16px;
	background: url("../img/orange_back_sp.png") no-repeat center top;
	background-size: contain;
	color: #fff;
	font-size: 0.9rem;
	font-weight: 500;
	letter-spacing: 0.1rem;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: baseline;
}
}

#method .more {
	width: 150px;
	max-width: 100%;
	margin: -250px 0 160px 80px; 
	padding: 0;
}

#method h4 {
	width: 100%;
	max-width: 100%;
	margin: 0px auto 0;
	padding: 0 0 10px;
	color: #003185;
	font-size: 2.2rem;
	font-weight: 500;
	letter-spacing: 0.4rem;
	text-align: center;
}

#method p {
	width: 100%;
	max-width: 100%;
	margin:auto;
	padding: 60px 0 10px;
	font-size: 1.3rem;
	font-weight: 500;
	letter-spacing: 0.2rem;
	text-align: center;
}


#method .inner ul {
	width: 80%;
	max-width: 100%;
	margin: 80px auto;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
}
@media only screen and (max-width: 768px){
#method .inner ul {
	width: 90%;
	max-width: 100%;
	margin: 20px auto;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
}
}


#method .inner li {
	width: 46%;
	max-width: 100%;
	margin: auto;
	padding: 2%;
}

#method .inner li p {
	width: 100%;
	max-width: 100%;
	margin: auto;
	padding: 10px 0 0 0;
	color: #003185;
	font-size: 1.2rem;
	font-weight: 400;
	line-height: 1.6;
	letter-spacing: 0.4rem;
	text-align: center;
}
@media only screen and (max-width: 768px){
#method .inner li p {
	width: 100%;
	max-width: 100%;
	margin: auto;
	padding: 10px 0 0 0;
	color: #003185;
	font-size: 0.66rem;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.0rem;
	text-align: center;
}
}


#method .white_box {
	width: 100%;
	max-width: 100%;
	margin: -36px auto 80px; 
	padding: 0;
	background-color: #fff;
}

#method h4 {
	width: 100%;
	max-width: 100%;
	margin: 0px auto 0;
	padding: 0 0 10px;
	color: #003185;
	font-size: 2.2rem;
	font-weight: 600;
	letter-spacing: 0.2rem;
	text-align: center;
}

@media only screen and (max-width: 768px){
#method .white_box  {
	width: 100%;
	max-width: 100%;
	margin: -20px auto 40px; 
	padding: 0;
	background-color: #fff;
}
}

@media only screen and (max-width: 768px){
#method h4 {
	width: 100%;
	max-width: 100%;
	margin: 0 auto 0;
	padding: 0 0 10px;
	color: #003185;
	font-size: 0.84rem;
	font-weight: 500;
	letter-spacing: 0.02rem;
	text-align: center;
	line-height: 1.6;
}
}

#method p {
	width: 100%;
	max-width: 100%;
	margin:auto;
	padding: 60px 0 10px;
	font-size: 1.3rem;
	font-weight: 500;
	letter-spacing: 0.2rem;
	text-align: center;
}
@media only screen and (max-width: 768px){
#method p {
	width: 100%;
	max-width: 100%;
	margin:auto;
	padding: 20px 0 10px;
	font-size: 0.70rem;
	font-weight: 500;
	letter-spacing: 0.02rem;
	text-align: center;
}
}


#method .img {
	width: 60%;
	max-width: 100%;
	margin:auto;
	padding: 40px 0 40px;
	font-size: 1.4rem;
	font-weight: 500;
	letter-spacing: 0.4rem;
	text-align: center;
}
@media only screen and (max-width: 768px){
#method .img {
	width: 90%;
	max-width: 100%;
	margin:auto;
	padding: 20px 0 20px;
	font-size: 1.4rem;
	font-weight: 500;
	letter-spacing: 0.4rem;
	text-align: center;
}
}

#method .obi {
	width: 100%;
	max-width: 100%;
	margin: 20px 0 0 -55px;
	padding: 0;
	font-size: 1.4rem;
	font-weight: 500;
	letter-spacing: 0.4rem;
	text-align: center;
}
@media only screen and (max-width: 768px){
#method .obi {
	width: 100%;
	max-width: 100%;
	margin: 20px 0 0 -3%;
	padding: 0;
	font-size: 1.4rem;
	font-weight: 500;
	letter-spacing: 0.4rem;
	text-align: center;
}
}

#method .sch {
	width: 80%;
	max-width: 100%;
	margin: auto;
	padding: 0 0 80px;
	font-size: 1.4rem;
	font-weight: 500;
	letter-spacing: 0.4rem;
	text-align: center;
}

@media screen and (max-width: 768px) {
  #method .sch {
  margin-left: auto;
  margin-right: auto;
  padding: 0 2px 0;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start; 
  overflow-x: scroll; 
  }

  #method .sch img {
    width: 700px;
	max-width: 700px;
    margin: 0 1px;
    padding: 0 0 10px;
    }

.arrow02 {
      width: 40px;
      margin: 0;
      text-align: left;
      padding: 20px;
  }
}

/****************************************
ao
*****************************************/

#ao {
	width:100%;
	max-width: 100%;
	margin: auto;
	padding: 80px 0;
}
@media only screen and (max-width: 768px){
#ao {
	width:100%;
	max-width: 100%;
	margin: auto;
	padding: 30px 0;
}
}

#ao .inner {
	width: 1200px;
	max-width: 100%;
	margin: auto;
	padding: 0 0 80px;
	border-radius: 100px;
	background-color: rgba(255, 255, 255, 0.7);
}

#ao .inner h3 {
	width: 1140px;
	max-width: 97%;
	margin: auto;
	padding: 30px 0;
	color: #fff;
	font-size: 3.0rem;
	font-weight: 500;
	letter-spacing: 0.4rem;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: baseline;
}

@media only screen and (max-width: 768px){
#ao .inner {
	width: 94%;
	max-width: 100%;
	margin: auto;
	padding: 0 0 60px;
	border-radius: 40px;
	background-color: rgba(255, 255, 255, 0.7);
}

#ao .inner h3 {
	width: 96%;
	max-width: 100%;
	margin: auto;
	padding: 2%;
	color: #fff;
	font-size: 3.0rem;
	font-weight: 500;
	letter-spacing: 0.4rem;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: baseline;
}
}

#method .more {
	width: 150px;
	max-width: 100%;
	margin: -250px 0 160px 80px; 
	padding: 0;
}

#ao .blue_box {
	width: 96%;
	max-width: 1140px;
	margin:auto;
	padding: 0 0 40px;
	border: #003185 3px solid;
	background-color: #fff;
}



#ao .head {
	width: 100%;
	max-width: 100%;
	margin: 0px auto 0;
	padding: 5px 0 10px;
	background: #003185;
	color: #fff;
	font-size: 2.2rem;
	font-weight: 500;
	letter-spacing: 0.4rem;
	text-align: center;
}


#ao p {
	width: 100%;
	max-width: 100%;
	margin:auto;
	padding: 60px 0 10px;
	font-size: 1.3rem;
	font-weight: 500;
	letter-spacing: 0.2rem;
	text-align: center;
}

#ao .obi {
	width: 1000px;
	max-width: 100%;
	margin: 60px auto 30px;
	padding: 2px 0 4px;
	background: #003185;
	color: #fff;
	font-size: 1.2rem;
	font-weight: 500;
	letter-spacing: 0.4rem;
	text-align: center;
}


.sch {
	width: 1000px;
	max-width: 100%;
	margin: 0px auto 0;
	padding: 0 0 10px;
	color: #fff;
	font-size: 1.8rem;
	font-weight: 500;
	letter-spacing: 0.4rem;
	text-align: center;
}

.sch2 {
	width: 84%;
	max-width: 100%;
	margin: 0px auto 0;
	padding: 20px 0 10px;
	color: #fff;
	font-size: 1.8rem;
	font-weight: 500;
	letter-spacing: 0.4rem;
	text-align: center;
}
@media only screen and (max-width: 768px) {
  #ao .blue_box {
    width: 94%;
    max-width: 100%;
    margin: auto;
    padding: 0 0 20px;
    border: #003185 2px solid;
    background-color: #fff;
  }

  #ao .head {
    width: 100%;
    max-width: 100%;
    margin: 0px auto 0;
    padding: 4px 0 8px;
    background: #003185;
    color: #fff;
    font-size: 1.0rem;
    font-weight: 500;
    letter-spacing: 0.02rem;
    text-align: center;
  }

  #ao .obi {
    width: 90%;
    max-width: 100%;
    margin: 20px auto 10px;
    padding: 2px 0 2px;
    background: #003185;
    color: #fff;
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.02rem;
    text-align: center;
  }

  .sch, .sch2 {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    padding: 0 2px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    overflow-x: scroll;
    position: relative; /* アイコンを絶対位置で配置するための基準 */
    -webkit-overflow-scrolling: touch; /* iOSでのスムーズなスクロール */
  }

  .sch img {
    width: 700px;
    max-width: 700px;
    margin: 0 1px;
    padding: 0 0 10px;
  }

  .sch2 img {
    width: 400px;
    max-width: 400px;
    margin: 0 1px;
    padding: 0 0 10px;
  }

  .schScroll.schScroll-sch,
  .schScroll.schScroll-sch2 {
    position: absolute;
    width: 8.32rem;
    height: 4.23rem;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 15;
    pointer-events: none;
  }

  .schScroll.schScroll-sch::before,
  .schScroll.schScroll-sch2::before {
    content: "スクロール可能";
    color: #fff;
    display: block;
    text-align: center;
    font-size: 0.66rem;
    line-height: 1;
    padding-top: 2.84rem;
    box-sizing: border-box;
    font-weight: 500;
    width: 8.32rem;
    height: 4.23rem;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%22116%22%20height%3D%2248%22%20viewBox%3D%220%200%20116%2048%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M0.433742%2023.5078L6.50874%2016.5078L7.64161%2017.491L2.64412%2023.2494H22V24.7494H2.63081L7.56943%2030.5113L6.43053%2031.4875L0.430725%2024.4875L0.00976562%2023.9963L0.433742%2023.5078Z%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M52.1122%2047.9961C51.7845%2047.9961%2051.4842%2047.803%2051.3476%2047.4995L51.1292%2047.0582C50.5557%2045.8444%2048.9991%2042.5892%2048.3438%2041.4306C47.388%2039.7754%2046.0499%2037.734%2044.7664%2035.7478C43.128%2033.2375%2040.916%2029.8168%2038.9499%2026.3409C37.6391%2024.0237%2037.6937%2021.9823%2039.0591%2020.5754C39.8237%2019.803%2040.8614%2019.3616%2041.981%2019.3616C43.1007%2019.3616%2044.2203%2019.8306%2045.0122%2020.6582L50.0095%2026.4237V4.21678C50.0095%201.89954%2051.8665%20-0.00390625%2054.1603%20-0.00390625C55.2526%20-0.00390625%2056.3176%200.437473%2057.0822%201.23747C57.8742%202.03747%2058.2838%203.08575%2058.2838%204.21678V10.9478L59.3761%2010.5616C59.813%2010.3961%2060.2773%2010.3133%2060.7415%2010.3133C62.298%2010.3133%2063.6907%2011.1961%2064.4007%2012.5754L64.783%2013.2926L65.493%2012.934C66.0665%2012.6582%2066.64%2012.5202%2067.1861%2012.5202C69.5346%2012.5754%2070.7361%2013.8995%2071.1184%2015.1133L71.3915%2015.9961L72.2381%2015.6375C72.7569%2015.4168%2073.3031%2015.3064%2073.8765%2015.3064C74.9961%2015.3064%2076.0338%2015.7478%2076.7985%2016.5478C77.5904%2017.3478%2078%2018.3961%2078%2019.5271V31.1133C78%2034.1478%2076.0338%2041.5133%2074.1769%2047.3892C74.0677%2047.7478%2073.74%2047.9961%2073.3577%2047.9961H52.1395H52.1122ZM42.063%2020.9892C41.4895%2020.9892%2040.9434%2021.2375%2040.3426%2021.734C39.7145%2022.3409%2039.3049%2023.4444%2040.4518%2025.4582C42.336%2028.7961%2044.3841%2031.9685%2046.2138%2034.7823C47.6064%2036.934%2048.8899%2038.8926%2049.8457%2040.5478C50.5284%2041.7616%2052.003%2044.8513%2052.4399%2045.7892L52.6584%2046.2582H72.7296L72.8934%2045.6789C73.6854%2043.0857%2076.2796%2034.3961%2076.2796%2031.1133V19.5547C76.2796%2018.1754%2075.1873%2017.072%2073.8492%2017.072C72.8115%2017.072%2071.9104%2017.7616%2071.5554%2018.7271H71.4188V19.5547V24.4926C71.4188%2024.7685%2071.3369%2024.9892%2071.2004%2025.1547C71.0365%2025.3202%2070.8181%2025.4306%2070.5723%2025.4306C70.3265%2025.4306%2070.1081%2025.3202%2069.9442%2025.1547C69.7804%2024.9892%2069.6984%2024.7685%2069.7257%2024.5202V16.7685C69.7257%2015.3892%2068.6334%2014.2857%2067.2954%2014.2857C65.9573%2014.2857%2064.865%2015.3892%2064.865%2016.7685V22.2582C64.865%2022.672%2064.4553%2023.0582%2064.0184%2023.0582C63.5815%2023.0582%2063.1719%2022.6995%2063.1719%2022.2306V14.5616C63.1719%2013.8995%2062.9261%2013.2651%2062.4619%2012.8237C61.9976%2012.3547%2061.3696%2012.1064%2060.7415%2012.1064C59.4034%2012.1064%2058.3111%2013.2099%2058.3111%2014.5892V20.1064C58.3111%2020.5202%2057.9015%2020.9064%2057.4646%2020.9064C57.0276%2020.9064%2056.618%2020.5478%2056.618%2020.0789V4.21678C56.618%202.83747%2055.5257%201.73402%2054.1876%201.73402C52.8495%201.73402%2051.7572%202.83747%2051.7572%204.21678V28.7409C51.7572%2029.0995%2051.5388%2029.4306%2051.2111%2029.5409C51.1018%2029.5685%2051.0199%2029.5961%2050.9107%2029.5961C50.6649%2029.5961%2050.4191%2029.4857%2050.2553%2029.2926L43.7834%2021.8168C43.3737%2021.403%2042.8549%2020.9892%2042.1176%2020.9892H42.063Z%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M115.566%2023.5078L109.491%2016.5078L108.358%2017.491L113.356%2023.2494H94V24.7494H113.369L108.431%2030.5113L109.569%2031.4875L115.569%2024.4875L115.99%2023.9963L115.566%2023.5078Z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-size: 4.15rem;
    background-color: rgba(0, 0, 0, 0.7);
    border-radius: 0.5rem;
    background-position: top 0.2rem center;
    position: absolute;
    inset: 0;
    margin: auto;
    z-index: 15;
    pointer-events: none;
    transition: opacity 0.25s ease-in-out;
    opacity: 1;
  }

 .schScroll.schScroll-sch.hidden::before,
  .schScroll.schScroll-sch2.hidden::before {
    opacity: 0 !important; /* 一時的な非表示 */
  }

  /* 永続的な非表示 */
  .schScroll.schScroll-sch.permanently-hidden,
  .schScroll.schScroll-sch2.permanently-hidden {
    display: none !important; /* 完全に非表示 */
  }

  /* inview クラスとの互換性 */
  .schScroll.inview.is-show::before {
    opacity: 1; /* 初期表示を保証 */
  }

  .schScroll.inview.is-show.hidden::before {
    opacity: 0 !important; /* スクロール時の非表示 */
  }

  .schScroll.inview.is-show.permanently-hidden {
    display: none !important; /* inview との競合を防止 */
  }
}

@media only screen and (min-width: 769px) {
  .schScroll.schScroll-sch,
  .schScroll.schScroll-sch2 {
    display: none;
  }
}

/* スクロールバーのカスタマイズ */
@media screen and (max-width: 768px) {
  .sch::-webkit-scrollbar,
  .sch2::-webkit-scrollbar {
    height: 4px;
  }
  .sch::-webkit-scrollbar-track,
  .sch2::-webkit-scrollbar-track {
    background: #eee;
  }
  .sch::-webkit-scrollbar-thumb,
  .sch2::-webkit-scrollbar-thumb {
    background: #aaa;
    border: none;
  }
  .sch::-webkit-scrollbar-thumb:hover,
  .sch2::-webkit-scrollbar-thumb:hover {
    background: #999;
  }
}




#ao .arrow {
	width: 80px;
	max-width: 100%;
	margin:auto;
	padding: 40px 0 20px;
	font-size: 1.4rem;
	font-weight: 500;
	letter-spacing: 0.4rem;
	text-align: center;
}
@media only screen and (max-width: 768px){
#ao .arrow {
	width: 30px;
	max-width: 100%;
	margin:auto;
	padding: 20px 0 10px;
	font-size: 1.4rem;
	font-weight: 500;
	letter-spacing: 0.4rem;
	text-align: center;
}
}

#ao .gohhi {
	width: 1140px;
	max-width: 97%;
	margin: 0px auto 0px;
	padding: 0;
	font-size: 1.8rem;
	font-weight: 500;
	letter-spacing: 0.4rem;
	text-align: center;
}
@media only screen and (max-width: 768px){
#ao .gohhi {
	width: 90%;
	max-width: 100%;
	margin: 0px auto 0px;
	padding: 0;
	font-size: 1.8rem;
	font-weight: 500;
	letter-spacing: 0.4rem;
	text-align: center;
}
}



.exam {
	width: 60%;
	max-width: 100%;
	margin: 0px auto 0;
	padding: 0 0 80px;
	color: #fff;
	font-size: 1.8rem;
	font-weight: 500;
	letter-spacing: 0.4rem;
	text-align: center;
}

.exam p img {
	width: 440px;
	max-width: 100%;
	margin: 0px auto 0;
	padding: 0;
	color: #fff;
	font-size: 1.8rem;
	font-weight: 500;
	letter-spacing: 0.4rem;
	text-align: center;
}

.exam .exam_btn {
	width: 600px;
	max-width: 100%;
	margin: 0px auto 0;
	padding: 20px 0 20px;
	color: #fff;
	font-size: 1.8rem;
	font-weight: 500;
	letter-spacing: 0.4rem;
	text-align: center;
}

.exam .appli_btn {
	width: 600px;
	max-width: 100%;
	margin: 0px auto 0;
	padding: 20px 0 20px;
	color: #fff;
	font-size: 1.8rem;
	font-weight: 500;
	letter-spacing: 0.4rem;
	text-align: center;
}
@media only screen and (max-width: 768px){
.exam {
	width: 90%;
	max-width: 100%;
	margin: 0px auto 0;
	padding: 0 0 20px;
	color: #fff;
	font-size: 1.8rem;
	font-weight: 500;
	letter-spacing: 0.4rem;
	text-align: center;
}

.exam p {
	width: 80%;
	max-width: 100%;
	margin: 0px auto 0;
	padding: 0;
}

.exam p img {
	width: 80%;
	max-width: 100%;
	margin: 0px auto 0;
	padding: 0;
	color: #fff;
	font-size: 1.8rem;
	font-weight: 500;
	letter-spacing: 0.4rem;
	text-align: center;
}

.exam .exam_btn {
	width: 90%;
	max-width: 100%;
	margin: 0px auto 0;
	padding: 10px 0 10px;
	color: #fff;
	font-size: 1.8rem;
	font-weight: 500;
	letter-spacing: 0.4rem;
	text-align: center;
}
.exam .appli_btn {
	width: 90%;
	max-width: 100%;
	margin: 0px auto 0;
	padding: 10px 0 10px;
	color: #fff;
	font-size: 1.8rem;
	font-weight: 500;
	letter-spacing: 0.4rem;
	text-align: center;
}
}
/* 既存: appli_btnの表示制御 */
.appli_btn.hidden {
  display: none !important;
}

.appli_btn.visible {
  display: block;
  animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* 新規追加: リロード通知 */
.reload-notification {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  padding: 20px;
  border-radius: 10px;
  font-size: 1.6rem;
  text-align: center;
  z-index: 1000;
  display: none;
}

.reload-notification.visible {
  display: block;
  animation: fadeIn 0.5s ease-in-out;
}



/****************************************
outdoor
*****************************************/

#outdoor {
	width:100%;
	max-width: 100%;
	margin: auto;
	padding: 80px 0;
}
@media only screen and (max-width: 768px){
#outdoor {
	width:100%;
	max-width: 100%;
	margin: auto;
	padding: 30px 0;
}
}

#outdoor .inner {
	width: 1200px;
	max-width: 100%;
	margin: auto;
	padding: 0 0 80px;
	border-radius: 100px;
	background-color: rgba(255, 255, 255, 0.7);
}

#outdoor .inner h3 {
	width: 1140px;
	max-width: 97%;
	margin: auto;
	padding: 30px 0;
	color: #fff;
	font-size: 3.0rem;
	font-weight: 500;
	letter-spacing: 0.4rem;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: baseline;
}

@media only screen and (max-width: 768px){
#outdoor .inner {
	width: 94%;
	max-width: 100%;
	margin: auto;
	padding: 0 0 60px;
	border-radius: 40px;
	background-color: rgba(255, 255, 255, 0.7);
}

#outdoor .inner h3 {
	width: 96%;
	max-width: 100%;
	margin: auto;
	padding: 2%;
	color: #fff;
	font-size: 3.0rem;
	font-weight: 500;
	letter-spacing: 0.4rem;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: baseline;
}
}

#outdoor .blue_box {
	width: 97%;
	max-width: 1140px;
	margin:auto;
	padding: 0 0 60px;
	border: #003185 3px solid;
	background-color: #fff;
}

#outdoor .head {
	width: 100%;
	max-width: 100%;
	margin: 0px auto 0;
	padding: 5px 0 10px;
	background: #003185;
	color: #fff;
	font-size: 2.2rem;
	font-weight: 500;
	letter-spacing: 0.4rem;
	text-align: center;
}

#outdoor p {
	width: 100%;
	max-width: 100%;
	margin:auto;
	padding: 60px 0 10px;
	font-size: 1.3rem;
	font-weight: 500;
	letter-spacing: 0.2rem;
	text-align: center;
}

#outdoor .obi {
	width: 1000px;
	max-width: 100%;
	margin: 60px auto 30px;
	padding: 2px 0 4px;
	background: #003185;
	color: #fff;
	font-size: 1.2rem;
	font-weight: 500;
	letter-spacing: 0.4rem;
	text-align: center;
}

#outdoor .sch {
	width: 1000px;
	max-width: 100%;
	margin: 0px auto 0;
	padding: 0 0 10px;
	color: #fff;
	font-size: 1.8rem;
	font-weight: 500;
	letter-spacing: 0.4rem;
	text-align: center;
}

#outdoor .sch2 {
	width: 84%;
	max-width: 100%;
	margin: 0px auto 0;
	padding: 20px 0 10px;
	color: #fff;
	font-size: 1.8rem;
	font-weight: 500;
	letter-spacing: 0.4rem;
	text-align: center;
}

@media only screen and (max-width: 768px){
#outdoor .blue_box {
	width: 94%;
	max-width: 100%;
	margin:auto;
	padding: 0 0 20px;
	border: #003185 2px solid;
	background-color: #fff;
}

#outdoor .head {
	width: 100%;
	max-width: 100%;
	margin: 0px auto 0;
	padding: 4px 0 8px;
	background: #003185;
	color: #fff;
	font-size: 1.0rem;
	font-weight: 500;
	letter-spacing: 0.02rem;
	text-align: center;
}

#outdoor p {
	width: 100%;
	max-width: 100%;
	margin:auto;
	padding: 60px 0 10px;
	font-size: 1.3rem;
	font-weight: 500;
	letter-spacing: 0.2rem;
	text-align: center;
}

#outdoor .obi {
	width: 90%;
	max-width: 100%;
	margin: 20px auto 10px;
	padding: 2px 0 2px;
	background: #003185;
	color: #fff;
	font-size: 0.8rem;
	font-weight: 500;
	letter-spacing: 0.02rem;
	text-align: center;
}

#outdoor .sch {
width: 90%;
max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding: 0 2px 0;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start; 
  overflow-x: scroll; 
  }

#outdoor .sch2 {
	width: 90%;
	max-width: 100%;
	margin: 0px auto 0;
	padding: 0 2px 0;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start; 
  overflow-x: scroll; 
}

#outdoor .sch img {
    width: 700px;
	max-width: 700px;
    margin: 0 1px;
    padding: 0 0 10px;
    }
#outdoor .sch2 img {
    width: 400px;
	max-width: 400px;
    margin: 0 1px;
    padding: 0 0 10px;
    }

.arrow02 {
      width: 40px;
      margin: 0;
      text-align: left;
      padding: 20px;
  }
}



/****************************************
general
*****************************************/

#general {
	width:100%;
	max-width: 100%;
	margin: auto;
	padding: 80px 0;
}
@media only screen and (max-width: 768px){
#general {
	width:100%;
	max-width: 100%;
	margin: auto;
	padding: 30px 0;
}
}

#general .inner {
	width: 1200px;
	max-width: 100%;
	margin: auto;
	padding: 0 0 80px;
	border-radius: 100px;
	background-color: rgba(255, 255, 255, 0.7);
}

#general .inner h3 {
	width: 1140px;
	max-width: 97%;
	margin: 0 auto;
	padding: 30px 0 30px;
	color: #fff;
	font-size: 3.0rem;
	font-weight: 500;
	letter-spacing: 0.4rem;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: baseline;
}

@media only screen and (max-width: 768px){
#general .inner {
	width: 94%;
	max-width: 100%;
	margin: auto;
	padding: 0 0 60px;
	border-radius: 40px;
	background-color: rgba(255, 255, 255, 0.7);
}

#general .inner h3 {
	width: 96%;
	max-width: 100%;
	margin: auto;
	padding: 2%;
	color: #fff;
	font-size: 3.0rem;
	font-weight: 500;
	letter-spacing: 0.4rem;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: baseline;
}
}


#general .blue_box {
	width: 97%;
	max-width: 1140px;
	margin:auto;
	padding: 0 0 60px;
	border: #003185 3px solid;
	background-color: #fff;
}

#general .head {
	width: 100%;
	max-width: 100%;
	margin: 0px auto 0;
	padding: 5px 0 10px;
	background: #003185;
	color: #fff;
	font-size: 2.2rem;
	font-weight: 500;
	letter-spacing: 0.4rem;
	text-align: center;
}

#general p {
	width: 100%;
	max-width: 100%;
	margin:auto;
	padding: 60px 0 10px;
	font-size: 1.3rem;
	font-weight: 500;
	letter-spacing: 0.2rem;
	text-align: center;
}

#general .obi {
	width: 1000px;
	max-width: 100%;
	margin: 60px auto 30px;
	padding: 2px 0 4px;
	background: #003185;
	color: #fff;
	font-size: 1.2rem;
	font-weight: 500;
	letter-spacing: 0.4rem;
	text-align: center;
}

#general .sch {
	width: 1000px;
	max-width: 100%;
	margin: 0px auto 0;
	padding: 0 0 10px;
	color: #fff;
	font-size: 1.8rem;
	font-weight: 500;
	letter-spacing: 0.4rem;
	text-align: center;
}

#general .sch2 {
	width: 84%;
	max-width: 100%;
	margin: 0px auto 0;
	padding: 20px 0 10px;
	color: #fff;
	font-size: 1.8rem;
	font-weight: 500;
	letter-spacing: 0.4rem;
	text-align: center;
}
@media only screen and (max-width: 768px){
#general .blue_box {
	width: 94%;
	max-width: 100%;
	margin:auto;
	padding: 0 0 20px;
	border: #003185 2px solid;
	background-color: #fff;
}

#general .head {
	width: 100%;
	max-width: 100%;
	margin: 0px auto 0;
	padding: 4px 0 8px;
	background: #003185;
	color: #fff;
	font-size: 1.0rem;
	font-weight: 500;
	letter-spacing: 0.02rem;
	text-align: center;
}

#general p {
	width: 100%;
	max-width: 100%;
	margin:auto;
	padding: 60px 0 10px;
	font-size: 1.3rem;
	font-weight: 500;
	letter-spacing: 0.2rem;
	text-align: center;
}

#general .obi {
	width: 90%;
	max-width: 100%;
	margin: 20px auto 10px;
	padding: 2px 0 2px;
	background: #003185;
	color: #fff;
	font-size: 0.8rem;
	font-weight: 500;
	letter-spacing: 0.02rem;
	text-align: center;
}

#general .sch {
width: 90%;
max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding: 0 2px 0;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start; 
  overflow-x: scroll; 
  }

#general .sch2 {
	width: 90%;
	max-width: 100%;
	margin: 0px auto 0;
	padding: 0 2px 0;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start; 
  overflow-x: scroll; 
}

#general .sch img {
    width: 700px;
	max-width: 700px;
    margin: 0 1px;
    padding: 0 0 10px;
    }
#general .sch2 img {
    width: 400px;
	max-width: 400px;
    margin: 0 1px;
    padding: 0 0 10px;
    }

.arrow02 {
      width: 40px;
      margin: 0;
      text-align: left;
      padding: 20px;
  }
}

/****************************************
women
*****************************************/

#women {
	width:100%;
	max-width: 100%;
	margin: auto;
	padding: 80px 0;
}
@media only screen and (max-width: 768px){
#women {
	width:100%;
	max-width: 100%;
	margin: auto;
	padding: 30px 0;
}
}

#women .inner {
	width: 1200px;
	max-width: 100%;
	margin: auto;
	padding: 0 0 80px;
	border-radius: 100px;
	background-color: rgba(255, 255, 255, 0.7);
}

#women .inner h3 {
	width: 1200px;
	max-width: 100%;
	margin: auto;
	padding: 24px;
	color: #fff;
	font-size: 3.0rem;
	font-weight: 500;
	letter-spacing: 0.4rem;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: baseline;
}
@media only screen and (max-width: 768px){
#women .inner {
	width: 94%;
	max-width: 100%;
	margin: auto;
	padding: 0 0 60px;
	border-radius: 40px;
	background-color: rgba(255, 255, 255, 0.7);
}

#women .inner h3 {
	width: 100%;
	max-width: 100%;
	margin: auto;
	padding: 2%;
	color: #fff;
	font-size: 3.0rem;
	font-weight: 500;
	letter-spacing: 0.4rem;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: baseline;
}
}

#women .blue_box {
	width: 96%;
	max-width: 1140px;
	margin:auto;
	padding: 0 0 40px;
	border: #003185 3px solid;
	background-color: #fff;
}

#women .head {
	width: 100%;
	max-width: 100%;
	margin: 0px auto 0;
	padding: 5px 0 10px;
	background: #003185;
	color: #fff;
	font-size: 2.2rem;
	font-weight: 500;
	letter-spacing: 0.4rem;
	text-align: center;
}

#women p {
	width: 100%;
	max-width: 100%;
	margin:auto;
	padding: 60px 0 10px;
	font-size: 1.3rem;
	font-weight: 500;
	letter-spacing: 0.2rem;
	text-align: center;
}

#women .obi {
	width: 1000px;
	max-width: 100%;
	margin: 60px auto 30px;
	padding: 2px 0 4px;
	background: #003185;
	color: #fff;
	font-size: 1.2rem;
	font-weight: 500;
	letter-spacing: 0.4rem;
	text-align: center;
}

#women .sch {
	width: 1000px;
	max-width: 100%;
	margin: 0px auto 0;
	padding: 0 0 10px;
	color: #fff;
	font-size: 1.8rem;
	font-weight: 500;
	letter-spacing: 0.4rem;
	text-align: center;
}

#women .sch2 {
	width: 84%;
	max-width: 100%;
	margin: 0px auto 0;
	padding: 20px 0 10px;
	color: #fff;
	font-size: 1.8rem;
	font-weight: 500;
	letter-spacing: 0.4rem;
	text-align: center;
}
@media only screen and (max-width: 768px){
#women .blue_box {
	width: 94%;
	max-width: 100%;
	margin:auto;
	padding: 0 0 20px;
	border: #003185 2px solid;
	background-color: #fff;
}

#women .head {
	width: 100%;
	max-width: 100%;
	margin: 0px auto 0;
	padding: 4px 0 8px;
	background: #003185;
	color: #fff;
	font-size: 1.0rem;
	font-weight: 500;
	letter-spacing: 0.02rem;
	text-align: center;
}

#women p {
	width: 100%;
	max-width: 100%;
	margin:auto;
	padding: 60px 0 10px;
	font-size: 1.3rem;
	font-weight: 500;
	letter-spacing: 0.2rem;
	text-align: center;
}

#women .obi {
	width: 90%;
	max-width: 100%;
	margin: 20px auto 10px;
	padding: 2px 0 2px;
	background: #003185;
	color: #fff;
	font-size: 0.8rem;
	font-weight: 500;
	letter-spacing: 0.02rem;
	text-align: center;
}

#women .sch {
width: 90%;
max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding: 0 2px 0;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start; 
  overflow-x: scroll; 
  }

#women .sch2 {
	width: 90%;
	max-width: 100%;
	margin: 0px auto 0;
	padding: 0 2px 0;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start; 
  overflow-x: scroll; 
}

#women .sch img {
    width: 700px;
	max-width: 700px;
    margin: 0 1px;
    padding: 0 0 10px;
    }
#women .sch2 img {
    width: 400px;
	max-width: 400px;
    margin: 0 1px;
    padding: 0 0 10px;
    }

.arrow02 {
      width: 40px;
      margin: 0;
      text-align: left;
      padding: 20px;
  }
}


/****************************************
preparation
*****************************************/

#preparation {
	width:100%;
	max-width: 100%;
	margin: auto;
	padding: 80px 0;
}
@media only screen and (max-width: 768px){
#preparation {
	width:100%;
	max-width: 100%;
	margin: auto;
	padding: 30px 0;
}
}

#preparation .inner {
	width: 1200px;
	max-width: 100%;
	margin: auto;
	padding: 0 0 80px;
	border-radius: 100px;
	background-color: rgba(255, 255, 255, 0.7);
}

#preparation .inner h3 {
	width: 1200px;
	max-width: 100%;
	height: 136px;
	padding-top: 34px;
	background: url("../img/orange_back.png") no-repeat center top;
	background-size: cover;
	color: #fff;
	font-size: 3.0rem;
	font-weight: 500;
	letter-spacing: 0.4rem;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: baseline;
}

@media only screen and (max-width: 768px){
#preparation .inner {
	width: 94%;
	max-width: 100%;
	margin: auto;
	padding: 0 0 40px;
	border-radius: 40px;
	background-color: rgba(255, 255, 255, 0.7);
}
}
@media only screen and (max-width: 768px){
#preparation .inner h3 {
	width: 100%;
	max-width: 100%;
	height: 60px;
	padding-top: 16px;
	background: url("../img/orange_back_sp.png") no-repeat center top;
	background-size: contain;
	color: #fff;
	font-size: 0.9rem;
	font-weight: 500;
	letter-spacing: 0.1rem;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: baseline;
}
}


#preparation h4 {
	width: 100%;
	max-width: 100%;
	margin: 20px auto 0;
	padding: 30px 0 40px;
	color: #003185;
	font-size: 1.8rem;
	font-weight: 600;
	letter-spacing: 0.2rem;
	text-align: center;
}
@media only screen and (max-width: 768px){
#preparation h4  {
	width: 100%;
	max-width: 100%;
	margin: 0 auto 0;
	padding: 0 0 10px;
	color: #003185;
	font-size: 0.8rem;
	font-weight: 500;
	letter-spacing: 0.02rem;
	text-align: center;
	line-height: 1.6;
}
}


#preparation ul {
	width: 56%;
	max-width: 100%;
	margin: auto;
	padding: 0;
}

#preparation ul li {
	width: 100%;
	max-width: 100%;
	margin: 24px auto;
	padding: 0;
}
@media only screen and (max-width: 768px){
#preparation ul {
	width: 84%;
	max-width: 100%;
	margin: auto;
	padding: 0;
}

#preparation ul li {
	width: 100%;
	max-width: 100%;
	margin: 10px auto;
	padding: 0;
}
}


#preparation h4.flex {
	width: 90%;
	max-width: 100%;
	margin: 100px auto;
	display: flex;
	justify-content: center;
	align-items: baseline;
	border-top: #003185 2px solid;
	border-bottom: #003185 2px solid;
}

#preparation h4.flex p.qa {
	width: 30%;
	max-width: 100%;
	margin: auto;
	padding: 2px 60px;
}

#preparation h4.flex p.title {
	width: 70%;
	max-width: 100%;
	margin: auto;
	padding-left: 60px;
	text-align: left;
}
@media only screen and (max-width: 768px){
#preparation h4.flex {
	width: 90%;
	max-width: 100%;
	height: 84px;
	margin: 40px auto;
	display: flex;
	justify-content: center;
	align-items: baseline;
	border-top: #003185 1px solid;
	border-bottom: #003185 1px solid;
}

#preparation h4.flex p.qa {
	width: 35%;
	max-width: 100%;
	margin: 0;
	padding: 5px 15px 5px 25px;
}

#preparation h4.flex p.title {
	width: 65%;
	max-width: 100%;
	margin: auto;
	padding: 5px 0 0;
	text-align: left;
	font-size: 1.06rem;
}
}


#preparation dl {
	width: 74%;
	max-width: 100%;
	margin: auto;
	padding: 0;
}

#preparation dl dt  {
	width: 100%;
	max-width: 100%;
	margin: 0 auto 4%;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	font-size: 1.06rem;
	font-weight: 600;
}

#preparation dl dd  {
	width: 100%;
	max-width: 100%;
	margin: 0 0 4%;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	font-size: 1.06rem;
	font-weight: 400;
}

#preparation dl dd p  {
	width: 94%;
	max-width: 100%;
	font-size: 1.06rem;
	font-weight: 400;
}


#preparation dl dt:before {
    margin: 0;  /*画像右の余白*/
	padding-left: 30px;
    content: ""; /* ← 空っぽのコンテンツを用意しておく */
    display: inline-block; /* ← 行頭に表示させるならinline-block */
    background-image: url("../img/qanda_q.png");
    background-size: 27px;
    background-repeat:no-repeat;
    width: 27px;
    height: 46px;
}


#preparation dl dd:before {
    margin: 0;  /*画像右の余白*/
	padding-left: 30px;
    content: ""; /* ← 空っぽのコンテンツを用意しておく */
    display: inline-block; /* ← 行頭に表示させるならinline-block */
    background-image: url("../img/qanda_a.png");
    background-size: 27px;
    background-repeat: no-repeat;
	background-position: top left;
    width: 27px;
    height: 46px;
}
@media only screen and (max-width: 768px){
#preparation dl {
	width: 94%;
	max-width: 100%;
	margin: auto;
	padding: 0;
}

#preparation dl dt  {
	width: 100%;
	max-width: 100%;
	margin: 0 auto 4%;
	padding-top: 5px;
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	font-size: 0.66rem;
	font-weight: 600;
}

#preparation dl dd  {
	width: 100%;
	max-width: 100%;
	margin: 0 0 4%;
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	font-size: 0.66rem;
	font-weight: 400;
}

#preparation dl dt p  {
	width: 94%;
	max-width: 100%;
	font-size: 0.7rem;
	font-weight: 400;
}

#preparation dl dd p  {
	width: 94%;
	max-width: 100%;
	font-size: 0.7rem;
	font-weight: 400;
}


#preparation dl dt:before {
    margin: 0;  /*画像右の余白*/
	padding-left: 20px;
    content: ""; /* ← 空っぽのコンテンツを用意しておく */
    display: inline-block; /* ← 行頭に表示させるならinline-block */
    background-image: url("../img/qanda_q.png");
    background-size: 20px;
    background-repeat: no-repeat;
	background-position: 0 0;
    width: 20px;
    height: 46px;
}


#preparation dl dd:before {
    margin: 0;  /*画像右の余白*/
	padding-left: 20px;
    content: ""; /* ← 空っぽのコンテンツを用意しておく */
    display: inline-block; /* ← 行頭に表示させるならinline-block */
    background-image: url("../img/qanda_a.png");
    background-size: 20px;
    background-repeat: no-repeat;
	background-position: top left;
    width: 20px;
    height: 46px;
}
}

#preparation .read {
	width: 74%;
	max-width: 100%;
	margin: auto;
	padding: 0;
}

#preparation .read p {
	margin: 60px 0 30px;
	padding: 0;
	color: #003185;
	font-size: 1.36rem;
	font-weight: 500;
	text-decoration: underline #003185;
}

#preparation .read p span {
	max-width: 100%;
	margin: auto;
	padding: 0;
	color: #003185;
	font-size: 1.00rem;
	font-weight: 400;
}

@media only screen and (max-width: 768px){
#preparation .read {
	width: 94%;
	max-width: 100%;
	margin: auto;
	padding: 0;
}

#preparation .read p {
	margin: 30px 0 10px;
	padding: 0;
	color: #003185;
	font-size: 0.9rem;
	font-weight: 500;
	text-decoration: underline #003185;
}

#preparation .read p span {
	max-width: 100%;
	margin: auto;
	padding: 0;
	color: #003185;
	font-size: 0.7rem;
	font-weight: 400;
}
}

/*===========
.scroll-box
===========*/

@media screen and (max-width: 767px) {
.scroll-box {
  overflow-x: auto;
  padding-bottom: 10px;
  -webkit-overflow-scrolling: touch;
}


/*スクロールバー全体の高さ*/
.scroll-box::-webkit-scrollbar {
  height: 4px;
}
/*スクロールバー全体の背景*/
.scroll-box::-webkit-scrollbar-track {
  background: #eee;
}
/*スクロールバーの動く部分*/
.scroll-box::-webkit-scrollbar-thumb {
  background: #aaa;
  border: none;
}
/*スクロールバーの動く部分のホバー（マウスオーバー）*/
.scroll-box::-webkit-scrollbar-thumb:hover {
  background: #999;
}

.scroll-box .f_area {
  display: flex;
  justify-content: center;
}
.scroll-box .f_area .f_one {
  width: 33.333%;
  display: block;
  overflow: hidden;
  backface-visibility: hidden;
}

@media screen and (max-width: 767px) {
  .scroll-box .f_area .f_one {
    flex: 0 0 80%;
  }
}
}


.scroll-space{
  box-sizing: border-box;
  overflow: hidden;
}
.fadein {
    opacity: 0;
    transform: translate(0,0);
    transition: all 1.5s;
}
.fadein-bottom{
      transform: translate(0,30px);
  }
.scrollin {
    opacity: 1 !important;
    transform: translate(0, 0) !important;
  }



.accordion-box {
	position: relative;
	padding: 0;
}
.accordion-box label {
	height: 24px; /* グラデーションの高さ */
	cursor: pointer;
	text-align: center;
	font-size: 12px;
	position: absolute; /* ラベルが位置の基準を持つようにする */
    display: block; /* ラベルがスクロールのターゲットとして適切に機能するようにする */
	bottom: 0;
	width: 100%;  
	/* 以下グラデーションは「背景が白」に併せて設定しています */	
	
	background-size: contain;

}
.accordion-box input:checked + label {
	background: inherit; /* 開いた時には背景グラデーションを消す */
}
.accordion-box label:before {
	content: " ";
	font-weight: 700;
	position: absolute;
	bottom: -2.2vw;
	left: 85%;
	-webkit-border-radius: 100%;
	-moz-border-radius: 100%;
	border-radius: 100%;
	width: 4.0vw;
	height: 4.0vw;
	line-height: 12.0vw;
	background-image: url(../img/btn_open.png);
	background-position: top;
	background-repeat: no-repeat;
	background-size: contain;
	z-index: 100;
}
@media screen and (min-width: 1366px) {
.accordion-box label:before {
	bottom: -30px;
	width: 60px;
	height: 60px;
}
}
@media screen and (max-width: 768px) {
.accordion-box label:before {
	bottom: -2.4vw;
	left: 88%;
	width: 6.0vw;
	height: 6.0vw;
}
}

.accordion-box label:after {
	content: " "; /* ラベルの文字 */
	position: absolute;
	bottom: 0;
	left: 50%;
}

.accordion-box input {
	display: none;
}
.accordion-box .accordion-container {
	overflow: hidden;
	height: 70px; /* 開く前に見えている部分の高さ */
    -webkit-transition: all 0.1s;
    -moz-transition: all 0.1s;
    -ms-transition: all 0.1s;
    -o-transition: all 0.1s;
    transition: all 0.1s;
}

@media screen and (max-width: 768px) {
  .accordion-box .accordion-container {
	overflow: hidden;
	height: 7.5vw; /* 開く前に見えている部分の高さ */
    -webkit-transition: all 0.1s;
    -moz-transition: all 0.1s;
    -ms-transition: all 0.1s;
    -o-transition: all 0.1s;
    transition: all 0.1s;
}
}

.accordion-box .accordion-container01 {
	overflow: hidden;
	height: 70px; /* 開く前に見えている部分の高さ */
    -webkit-transition: all 0.1s;
    -moz-transition: all 0.1s;
    -ms-transition: all 0.1s;
    -o-transition: all 0.1s;
    transition: all 0.1s;
}

@media screen and (max-width: 768px) {
  .accordion-box .accordion-container01 {
	overflow: hidden;
	height: 9.8vw; /* 開く前に見えている部分の高さ */
    -webkit-transition: all 0.1s;
    -moz-transition: all 0.1s;
    -ms-transition: all 0.1s;
    -o-transition: all 0.1s;
    transition: all 0.1s;
}
}

.accordion-box .accordion-container001 {
	overflow: hidden;
	height: 74px; /* 開く前に見えている部分の高さ */
    -webkit-transition: all 0.1s;
    -moz-transition: all 0.1s;
    -ms-transition: all 0.1s;
    -o-transition: all 0.1s;
    transition: all 0.1s;
}

@media screen and (max-width: 768px) {
  .accordion-box .accordion-container001 {
	overflow: hidden;
	height: 13.5vw; /* 開く前に見えている部分の高さ */
    -webkit-transition: all 0.1s;
    -moz-transition: all 0.1s;
    -ms-transition: all 0.1s;
    -o-transition: all 0.1s;
    transition: all 0.1s;
}
}

.accordion-box .accordion-container002 {
	overflow: hidden;
	height: 74px; /* 開く前に見えている部分の高さ */
    -webkit-transition: all 0.1s;
    -moz-transition: all 0.1s;
    -ms-transition: all 0.1s;
    -o-transition: all 0.1s;
    transition: all 0.1s;
}

@media screen and (max-width: 768px) {
  .accordion-box .accordion-container002 {
	overflow: hidden;
	height: 13.6vw; /* 開く前に見えている部分の高さ */
    -webkit-transition: all 0.1s;
    -moz-transition: all 0.1s;
    -ms-transition: all 0.1s;
    -o-transition: all 0.1s;
    transition: all 0.1s;
}
}

.accordion-box .accordion-container9 {
	overflow: hidden;
	height: 24rem; /* 開く前に見えている部分の高さ */
    -webkit-transition: all 0.1s;
    -moz-transition: all 0.1s;
    -ms-transition: all 0.1s;
    -o-transition: all 0.1s;
    transition: all 0.1s;
}

@media screen and (max-width: 768px) {
  .accordion-box .accordion-container9 {
	overflow: hidden;
	height: 136px; /* 開く前に見えている部分の高さ */
    -webkit-transition: all 0.1s;
    -moz-transition: all 0.1s;
    -ms-transition: all 0.1s;
    -o-transition: all 0.1s;
    transition: all 0.1s;
}
}


.accordion-box input:checked + label {
	/* display: none ; 閉じるボタンは要らないとき */
}
.accordion-box input:checked + label:after {
	content: " ";
}
.accordion-box input:checked + label:before {
	content: " ";
	background-image: url(../img/btn_cloce.png);
	background-position: top;
	background-repeat: no-repeat;
	background-size: contain;
	z-index: 100;
}
.accordion-box input:checked ~ .accordion-container {
    height: auto;
	padding-bottom: 0; /* 閉じるボタンのbottomからの位置 */
    -webkit-transition: all 0.1s;
    -moz-transition: all 0.1s;
    -ms-transition: all 0.1s;
    -o-transition: all 0.1s;
    transition: all 0.1s;
	bottom: -2.2vw;
	left: 45%;
}

.accordion-box input:checked ~ .accordion-container01 {
    height: auto;
	padding-bottom: 0; /* 閉じるボタンのbottomからの位置 */
    -webkit-transition: all 0.1s;
    -moz-transition: all 0.1s;
    -ms-transition: all 0.1s;
    -o-transition: all 0.1s;
    transition: all 0.1s;
	bottom: -2.2vw;
	left: 45%;
}
.accordion-box input:checked ~ .accordion-container001 {
    height: auto;
	padding-bottom: 0; /* 閉じるボタンのbottomからの位置 */
    -webkit-transition: all 0.1s;
    -moz-transition: all 0.1s;
    -ms-transition: all 0.1s;
    -o-transition: all 0.1s;
    transition: all 0.1s;
	bottom: -2.2vw;
	left: 45%;
}
.accordion-box input:checked ~ .accordion-container002 {
    height: auto;
	padding-bottom: 0; /* 閉じるボタンのbottomからの位置 */
    -webkit-transition: all 0.1s;
    -moz-transition: all 0.1s;
    -ms-transition: all 0.1s;
    -o-transition: all 0.1s;
    transition: all 0.1s;
	bottom: -2.2vw;
	left: 45%;
}

.accordion-box input:checked ~ .accordion-container9 {
    height: auto;
	padding-bottom: 0; /* 閉じるボタンのbottomからの位置 */
    -webkit-transition: all 0.1s;
    -moz-transition: all 0.1s;
    -ms-transition: all 0.1s;
    -o-transition: all 0.1s;
    transition: all 0.1s;
	bottom: -2.2vw;
	left: 45%;
}