@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;
}

a:hover img{
	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:780px;
	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:740px;
	background: url("../img/main_back_sp.png") no-repeat center bottom;
	background-size: cover;
}
}

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


#main ul {
	width:100%;
	max-width: 100%;
	margin: auto;
	padding: 40px 20px 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: 5px 0px 10px 10px;
	color: #fff;
	font-size: 2.4vw;
	text-align: left;
	line-height: 1.6;
}
}


/****************************************
movie
*****************************************/

#movie {
	width:100%;
	max-width: 100%;
	margin: auto;
}
@media only screen and (max-width: 768px){
#movie {
	width:100%;
	max-width: 100%;
	margin: auto;
}
}

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


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

#charm {
	width:100%;
	max-width: 100%;
	padding: 0 0 20px;
	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: auto;
	background: url("../img/charm_back_sp.png") no-repeat center bottom;
	background-size: 120%;
}
}

#charm h3 {
	width:100%;
	max-width: 100%;
	margin: auto;
	padding: 20px 0 30px;
	color: #dc696d;
	text-align: center;
	font-size: 3.2rem;
	font-weight: 400;
	letter-spacing: 0.2rem;
}
@media only screen and (max-width: 768px){
#charm h3 {
	width:100%;
	max-width: 100%;
	margin: auto;
	padding: 40px 0 0px;
	color: #dc696d;
	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 20px;
	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 10px;
	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;
}
}

#charm p {
	width:100%;
	max-width: 100%;
	margin: auto;
	padding: 20px 0 60px;
	color: #dc696d;
	text-align: center;
	font-size: 1.54rem;
	font-weight: 400;
	letter-spacing: 0.2rem;
}
@media only screen and (max-width: 768px){
#charm p {
	width:100%;
	max-width: 100%;
	margin: auto;
	padding: 10px 0 20px;
	color: #dc696d;
	text-align: center;
	font-size: 1.04rem;
	font-weight: 400;
	letter-spacing: 0.1rem;
	line-height: 1.6;
}
}

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

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


/****************************************
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: 1180px;
	max-width: 100%;
	margin: auto;
	padding: 0 0 80px;
	border-radius: 100px;
	background-color: rgba(255, 255, 255, 0.8);
}

@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.8);
}
}

#point .inner h3 {
	width: 1180px;
	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.2rem;
	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: 18px;
	padding-left: 5px;
	background: url("../img/orange_back_sp.png") no-repeat center top;
	background-size: contain;
	color: #fff;
	font-size: 1.10rem;
	font-weight: 500;
	letter-spacing: 0.05rem;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: baseline;
}
}

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

#point .inner li {
	width: 885px;
	max-width: 100%;
	margin: 0 auto;
	padding: 20px 0 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: 1180px;
	max-width: 100%;
	margin: auto;
	padding: 0 0 80px;
	border-radius: 100px;
	background-color: rgba(255, 255, 255, 0.8);
}


#challenge .inner h3 {
	width: 1180px;
	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.2rem;
	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.8);
}
}
@media only screen and (max-width: 768px){
#challenge .inner h3 {
	width: 100%;
	max-width: 100%;
	height: 60px;
	margin: auto;
	padding-top: 18px;
	padding-left: 5px;
	background: url("../img/orange_back_sp.png") no-repeat center top;
	background-size: contain;
	color: #fff;
	font-size: 1.10rem;
	font-weight: 500;
	letter-spacing: 0.05rem;
	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: #dc696d;
	font-size: 2.12rem;
	font-weight: 500;
	letter-spacing: 0.2rem;
	text-align: center;
}
@media only screen and (max-width: 768px){
#challenge h4 {
	width: 100%;
	max-width: 100%;
	margin: -10px auto 0;
	padding: 0 0 5px;
	color: #dc696d;
	font-size: 1.00rem;
	font-weight: 500;
	letter-spacing: 0.05rem;
	text-align: center;
	line-height: 1.6;
}
}

#challenge p {
	width: 100%;
	max-width: 100%;
	margin:auto;
	padding: 60px 0 10px;
	font-size: 1.22rem;
	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 20px;
	font-size: 1.4rem;
	font-weight: 500;
	letter-spacing: 0.2rem;
	text-align: center;
}
@media only screen and (max-width: 768px){
#challenge .img {
	width: 95%;
	max-width: 100%;
	margin:auto;
	padding: 10px 0 10px;
	font-size: 1.4rem;
	font-weight: 500;
	letter-spacing: 0.2rem;
	text-align: center;
}
}

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

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

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

#challenge .blue_box .head {
	width: 100%;
	padding: 10px 0 20px;
	background-color: #dc696d;
	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: 8px 0 10px;
	background-color: #dc696d;
	text-align: center;
	color: #fff;
	font-size: 0.88rem;
	font-weight: 500;
	letter-spacing: 0.02rem;
}
}

#challenge .blue_box .read {
	width: 624px;
	max-width: 100%;
	padding: 50px 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 20px;
	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: 100%;
	margin:auto;
	padding: 0;
	border: #dc696d 4px solid;
	border-top: #dc696d 0px solid;
	background-color: #fff;
}
@media only screen and (max-width: 768px){
#challenge .step {
	width: 90%;
	max-width: 100%;
	margin:auto;
	padding: 0 0;
	border: #dc696d 2px solid;
	background-color: #fff;
}
}

#challenge .step .step_head {
	border-top: #dc696d 4px solid;
	border-bottom: #dc696d 0px solid;
	padding: 0;
}
@media only screen and (max-width: 768px){
#challenge .step .step_head {
	border-top: #dc696d 0px solid;
	border-bottom: #dc696d 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 0 0 4px;
	display: flex;
	justify-content: center;
	align-items: center;
}
}

#challenge .step .flex p {
	text-align: left;
	font-feature-settings: "palt"
}

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

#challenge .step p.taisho {
	width: 136px;
	margin-right: 1%;
	padding: 0;
	text-align: center;
	font-size: 1.12rem;
	display: block;
}
@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 16px;
	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 3%;
	text-align: left;
	font-size: 0.5rem;
	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.54rem;
	text-align: left;
}
}

#challenge .step span.co01 {
	color: #dc696d;
	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: #f1c3c5;
	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;
}
#challenge .step dl dd p {
	padding: 0;
	text-align: left;
	font-weight: 400;
}
@media only screen and (max-width: 768px){
#challenge .step dl {
	width: 100%;
	max-width: 100%;
	margin:auto;
	padding: 0;
	background-color: #f1c3c5;
	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: 96%;
	max-width: 100%;
	margin:0;
	padding: 0;
	font-size: 0.54rem;
	text-align: left;
	line-height: 1.4;
	letter-spacing: 0;
}

#challenge .step dl dd p {
	width: 96%;
	margin:0;
	padding: 0;
	padding-left: 1em;  /* 全体を1文字分右へずらす */
	padding-right: 2em;
  	text-indent: -1em;  /* 1行目だけを元の位置に戻す */
	text-align: left;
	letter-spacing: 0em;
}
}

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

#challenge .arrow01 {
	width: 1000px;
	max-width: 100%;
	margin: auto;
	padding: 20px 40px;
	text-align: left;
	font-size: 0.88rem;
}
#challenge .arrow01 img {
	width: 32px;
	max-width: 100%;
	margin: auto;
	padding: 0 0 0 40px;
}

@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: 1180px;
	max-width: 100%;
	margin: auto;
	padding: 0 0 80px;
	border-radius: 100px;
	background-color: rgba(255, 255, 255, 0.8);
}

#system .inner h3 {
	width: 1180px;
	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.2rem;
	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.8);
}
}
@media only screen and (max-width: 768px){
#system .inner h3 {
	width: 100%;
	max-width: 100%;
	height: 60px;
	padding-top: 18px;
	padding-left: 5px;
	background: url("../img/orange_back_sp.png") no-repeat center top;
	background-size: contain;
	color: #fff;
	font-size: 1.10rem;
	font-weight: 500;
	letter-spacing: 0.05rem;
	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: #dc696d;
	font-size: 2.12rem;
	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: 1180px;
	max-width: 100%;
	margin: auto;
	padding: 0 0 80px;
	border-radius: 100px;
	background-color: rgba(255, 255, 255, 0.8);
}

#method .inner h3 {
	width: 1180px;
	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.2rem;
	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.8);
}
}
@media only screen and (max-width: 768px){
#method .inner h3 {
	width: 100%;
	max-width: 100%;
	height: 60px;
	padding-top: 18px;
	padding-left: 5px;
	background: url("../img/orange_back_sp.png") no-repeat center top;
	background-size: contain;
	color: #fff;
	font-size: 1.10rem;
	font-weight: 500;
	letter-spacing: 0.05rem;
	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: #dc696d;
	font-size: 2.12rem;
	font-weight: 500;
	letter-spacing: 0.2rem;
	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: 100%;
	max-width: 1000px;
	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: 48%;
	max-width: 100%;
	margin: 0;
	padding: 3% 0;
}

#method .inner li p {
	width: 100%;
	max-width: 100%;
	margin: auto;
	padding: 10px 0 0 0;
	color: #dc696d;
	font-size: 1.2rem;
	font-weight: 400;
	line-height: 1.6;
	letter-spacing: 0.2rem;
	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: #dc696d;
	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 0px; 
	padding: 0;
	background-color: #fff;
}

#method h4 {
	width: 100%;
	max-width: 100%;
	margin: 0px auto 0;
	padding: 0 0 10px;
	color: #dc696d;
	font-size: 2.12rem;
	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 0px; 
	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: #dc696d;
	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: 40px 0 20px;
	font-size: 1.22rem;
	font-weight: 500;
	letter-spacing: 0.1rem;
	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 p.cotion {
	width: 1000px;
	max-width: 100%;
	margin: auto;
	padding: 10px 0 30px;
	text-align: left;
	font-size: 0.88rem;
	font-weight: 500;
	letter-spacing: 0.05em;
}
@media only screen and (max-width: 768px){
#method p.cotion {
	width: 90%;
	max-width: 100%;
	margin: auto;
	padding: 5px 0 20px;
	text-align: left;
	font-size: 0.44rem;
	letter-spacing: 0rem;
	line-height: 1.1;
}
}


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

#method .obi {
	width: 100%;
	max-width: 1144px;
	margin: 20px 0 0 -53px;
	padding: 0;
	font-size: 1.4rem;
	font-weight: 500;
	letter-spacing: 0.2rem;
	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.2rem;
	text-align: center;
}
}

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

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

  #method .sch img {
    width: 600px;
	max-width: 600px;
    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: 1180px;
	max-width: 100%;
	margin: auto;
	padding: 0 0 60px;
	border-radius: 100px;
	background-color: rgba(255, 255, 255, 0.8);
}

#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.2rem;
	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 30px;
	border-radius: 40px;
	background-color: rgba(255, 255, 255, 0.8);
}

#ao .inner h3 {
	width: 96%;
	max-width: 100%;
	margin: auto;
	padding: 2%;
	color: #fff;
	font-size: 3.0rem;
	font-weight: 500;
	letter-spacing: 0.2rem;
	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: 95.5%;
	max-width: 1140px;
	margin:auto;
	padding: 0 0 40px;
	border: #dc696d 4px solid;
	border-top: #dc696d 3px solid;
	background-color: #fff;
}



#ao .head {
	width: 100%;
	max-width: 100%;
	margin: 0px auto 0;
	padding: 10px 0 15px;
	background: #dc696d;
	color: #fff;
	font-size: 1.88rem;
	font-weight: 500;
	letter-spacing: 0.2rem;
	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: #dc696d;
	color: #fff;
	font-size: 1.2rem;
	font-weight: 500;
	letter-spacing: 0.2rem;
	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.2rem;
	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.2rem;
	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: #dc696d 2px solid;
    background-color: #fff;
  }

  #ao .head {
    width: 100%;
    max-width: 100%;
    margin: 0px auto 0;
    padding: 4px 0 8px;
    background: #dc696d;
    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: #dc696d;
    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: 640px;
	max-width: 640px;
    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.00rem;
    height: 7.90rem;
    background-image: url("../img/scroll.png");
    background-repeat: no-repeat;
    background-size: 4.0rem;
    background-color: rgba(0, 0, 0, 0.6);
    border-radius: 0.5rem;
    background-position: center 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.2rem;
	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.2rem;
	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.2rem;
	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.2rem;
	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.2rem;
	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.2rem;
	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.2rem;
	text-align: center;
}

.exam .appli_btn1 {
	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.2rem;
	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.2rem;
	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.2rem;
	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.2rem;
	text-align: center;
}
.exam .appli_btn1 {
	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.2rem;
	text-align: center;
}
}


@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;
}


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


/****************************************
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: 1180px;
	max-width: 100%;
	margin: auto;
	padding: 0 0 80px;
	border-radius: 100px;
	background-color: rgba(255, 255, 255, 0.8);
}

#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.2rem;
	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.8);
}

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

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

#outdoor .head {
	width: 100%;
	max-width: 100%;
	margin: 0px auto 0;
	padding: 10px 0 15px;
	background: #dc696d;
	color: #fff;
	font-size: 1.88rem;
	font-weight: 500;
	letter-spacing: 0.2rem;
	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: #dc696d;
	color: #fff;
	font-size: 1.2rem;
	font-weight: 500;
	letter-spacing: 0.2rem;
	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.2rem;
	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.2rem;
	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: #dc696d 2px solid;
	background-color: #fff;
}

#outdoor .head {
	width: 100%;
	max-width: 100%;
	margin: 0px auto 0;
	padding: 4px 0 8px;
	background: #dc696d;
	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: #dc696d;
	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 24px;
  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: 640px;
	max-width: 640px;
    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: 1180px;
	max-width: 100%;
	margin: auto;
	padding: 0 0 80px;
	border-radius: 100px;
	background-color: rgba(255, 255, 255, 0.8);
}

#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.2rem;
	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.8);
}

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


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

#general .head {
	width: 100%;
	max-width: 100%;
	margin: 0px auto 0;
	padding: 10px 0 15px;
	background: #dc696d;
	color: #fff;
	font-size: 1.88rem;
	font-weight: 500;
	letter-spacing: 0.2rem;
	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: #dc696d;
	color: #fff;
	font-size: 1.2rem;
	font-weight: 500;
	letter-spacing: 0.2rem;
	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.2rem;
	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.2rem;
	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: #dc696d 2px solid;
	background-color: #fff;
}

#general .head {
	width: 100%;
	max-width: 100%;
	margin: 0px auto 0;
	padding: 4px 0 8px;
	background: #dc696d;
	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: #dc696d;
	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 24px;
  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: 640px;
	max-width: 640px;
    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: 1180px;
	max-width: 100%;
	margin: auto;
	padding: 0 0 60px;
	border-radius: 100px;
	background-color: rgba(255, 255, 255, 0.8);
}

#women .inner h3 {
	width: 1180px;
	max-width: 100%;
	margin: auto;
	padding: 24px;
	color: #fff;
	font-size: 3.0rem;
	font-weight: 500;
	letter-spacing: 0.2rem;
	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 30px;
	border-radius: 40px;
	background-color: rgba(255, 255, 255, 0.8);
}

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

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

#women .head {
	width: 100%;
	max-width: 100%;
	margin: 0px auto 0;
	padding: 10px 0 15px;
	background: #dc696d;
	color: #fff;
	font-size: 1.88rem;
	font-weight: 500;
	letter-spacing: 0.2rem;
	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: #dc696d;
	color: #fff;
	font-size: 1.2rem;
	font-weight: 500;
	letter-spacing: 0.2rem;
	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.2rem;
	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.2rem;
	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: #dc696d 2px solid;
	background-color: #fff;
}

#women .head {
	width: 100%;
	max-width: 100%;
	margin: 0px auto 0;
	padding: 4px 0 8px;
	background: #dc696d;
	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: #dc696d;
	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 24px;
  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: 640px;
	max-width: 640px;
    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;
  }
}

#women .new_btn {
	width: 700px;
	max-width: 97%;
	margin: 24px auto 0px;
	padding: 0 10px 0;
	font-size: 1.8rem;
	font-weight: 500;
	letter-spacing: 0.2rem;
	text-align: center;
}
@media only screen and (max-width: 768px){
#women .new_btn {
	width: 90%;
	max-width: 100%;
	margin: 16px auto 0px;
	padding: 0;
	font-size: 1.8rem;
	font-weight: 500;
	letter-spacing: 0.2rem;
	text-align: center;
}
}


/****************************************
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: 1180px;
	max-width: 100%;
	margin: auto;
	padding: 0 0 80px;
	border-radius: 100px;
	background-color: rgba(255, 255, 255, 0.8);
}

#preparation .inner h3 {
	width: 1180px;
	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.2rem;
	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.8);
}
}
@media only screen and (max-width: 768px){
#preparation .inner h3 {
	width: 100%;
	max-width: 100%;
	height: 60px;
	padding-top: 18px;
	padding-left: 5px;
	background: url("../img/orange_back_sp.png") no-repeat center top;
	background-size: contain;
	color: #fff;
	font-size: 1.10rem;
	font-weight: 500;
	letter-spacing: 0.05rem;
	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 30px;
	color: #dc696d;
	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: #dc696d;
	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 -24px;
	display: flex;
	justify-content: center;
	align-items: baseline;
	border-top: #dc696d 2px solid;
	border-bottom: #dc696d 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: auto;
	margin: 40px auto -2px;
	display: flex;
	justify-content: center;
	align-items: baseline;
	border-top: #dc696d 2px solid;
	border-bottom: #dc696d 2px solid;
}

#preparation h4.flex p.qa {
	width: 35%;
	max-width: 100%;
	margin: 0;
	padding: 15px 15px 10px 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 .accordion-container9 dl:nth-child(1) {
	width: 74%;
	max-width: 100%;
	margin: auto;
	padding: 60px 0 10px;
	color: #222;
}


#preparation .accordion-container9 dl:nth-child(3) {
	width: 74%;
	max-width: 100%;
	margin: auto;
	padding: 20px 0 10px;
	color: #222;
}

#preparation .accordion-container9 dl:nth-child(5) {
	width: 74%;
	max-width: 100%;
	margin: auto;
	padding: 20px 0 10px;
	color: #222;
}

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

#preparation dl dt p  {
	width: 94%;
	max-width: 100%;
	font-size: 1.24rem;
	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;
}

#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: 30px 0;
}

#preparation .accordion-container9 dl:nth-child(1) {
	width: 94%;
	max-width: 100%;
	margin: auto;
	padding: 30px 0 5px;
	color: #222;
}


#preparation .accordion-container9 dl:nth-child(3) {
	width: 94%;
	max-width: 100%;
	margin: auto;
	padding: 10px 0 5px;
	color: #222;
}

#preparation .accordion-container9 dl:nth-child(5) {
	width: 94%;
	max-width: 100%;
	margin: auto;
	padding: 10px 0 5px;
	color: #222;
}


#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;
	
}




#preparation dl dd  {
	width: 100%;
	max-width: 100%;
	margin: 0 0 8%;
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
}

#preparation dl dt p  {
	width: 94%;
	max-width: 100%;
	font-size: 2.58vw;
	letter-spacing: 0em;
	line-height: 1.6;
	font-weight: 600;
}

#preparation dl dd p  {
	width: 94%;
	max-width: 100%;
	font-size: 2.48vw;
	letter-spacing: 0.01em;
	line-height: 1.6;
	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: 10px;
    height: 36px;
}


#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: 10px;
    height: 36px;
}
}

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

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

#preparation .read p span {
	max-width: 100%;
	margin: auto;
	padding: 0;
	color: #dc696d;
	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: #dc696d;
	font-size: 1.10rem;
	font-weight: 500;
	text-decoration: underline #dc696d;
}

#preparation .read p span {
	max-width: 100%;
	margin: auto;
	padding: 0;
	color: #dc696d;
	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%;
}

#preparation .accordion-box label:after {
	left: 5%;
	width: 90%;
	height: 10px;
    max-width: 100%;
	margin: 4px auto 0;
	padding-top: 8px;
	padding-bottom: 4px;
	border-bottom: #dc696d 2px solid;
	display: flex;
    justify-content: center;
	text-align: center;

}


.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: 76px; /* 開く前に見えている部分の高さ */
    -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: 14.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: 76px; /* 開く前に見えている部分の高さ */
    -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: 14.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-container9 {
	overflow: hidden;
	height: 24px; /* 開く前に見えている部分の高さ */
    -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: 2px; /* 開く前に見えている部分の高さ */
    -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_close.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%;
}