@charset "shift_jis"; 

/************************************************************
BASE
************************************************************/
body {
	color: #333333;
	font-size: 1em;
	line-height: 1.8em;
	font-family:"Yu Gothic Medium", "ŸเƒSƒVƒbƒN Medium", "ŸเƒSƒVƒbƒN", YuGothic, "ŸเƒSƒVƒbƒN‘ฬ", Arial, Helvetica, "ƒƒCƒŠƒI", "‚l‚r ‚oƒSƒVƒbƒN", "MS PGothic", "ƒqƒ‰ƒMƒmŠpƒS Pro W3", sans-serif;
	-webkit-text-size-adjust: 100%;/*iPhone•ถŽšŽฉ“ฎŠg‘ๅ‚ศ‚ญ‚ท*/
	font-weight:500;
}
@media only screen and (max-width: 768px){
	body {
	font-size:0.9em;
	line-height: 1.6em;
		}
}

.wrapper{
	position:relative;
	margin:0;
	clear:both;
	float:none;
	}
.inner{
	width:92%;
	max-width:980px;/*ƒTƒCƒg‚ฬ•‚ษ’ฒฎ*/
	margin-left:auto;
	margin-right:auto;
	clear:both;
	float:none;
	}



/***************************************************/
/*h1{}ƒƒS*/
h2{}
h3{
  font-family: "M PLUS U", sans-serif;
  font-optical-sizing: auto;
  position: relative;
  width: 100%;
	text-align:center;
  border-radius: 5px;
  background: linear-gradient(to bottom, #f3b1a3 0%, #eca092 100%);
	padding:15px 10px 20px;
	min-height:52px;
	overflow:hidden;
  display: flex;
  align-items: center;
  justify-content: center;
	margin-bottom:20px;
	}
/*
h3::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 5px;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.35),
    inset 0 -2px 0 rgba(190,90,80,0.25);
  pointer-events: none;
	}
*/
.h3Txt{
	display:inline-block;
  position: relative;
  z-index: 2;
  font-size:1.6em;
  line-height: 1.3em;
  font-weight:bold;
	color:#fff;
  text-shadow:0 2px 3px rgba(0,0,0,0.50);
  /*
	color: #dcaf00;
  text-shadow:
    -1.5px -1.5px 1.5px #fff,
     1.5px -1.5px 1.5px #fff,
    -1.5px  1.5px 1.5px #fff,
     1.5px  1.5px 1.5px #fff,
     0 4px 4px rgba(0,0,0,0.75);
	*/
	}
.h3Txt:before,
.h3Txt:after{
	content:'';
	position:absolute;
	width:137px;
	height:52px;
	bottom: 50%;
	-webkit-transform: translateY(50%);
	-ms-transform: translateY(50%);
	transform: translateY(50%);
	}
.h3Txt:before{
	background:url(../images/common/leaf-L.png);
	left:-147px;
	}
.h3Txt:after{
	background:url(../images/common/leaf-R.png);
	right:-147px;
	}

h4{
	font-size:1.2em;
	color:#649D1B;
	font-weight:bold;
	border-bottom:#649D1B solid 2px;
	padding:5px;
	margin-bottom:20px;
}
h4.h4Pink{
	color:#333333;
	border-bottom:#ff8f7f solid 2px;
	margin-bottom:20px;
}
h4 span{
	float:right;
	font-weight:500;
	font-size:0.7em;
}
h5{
	background:#eafada;
	font-weight:bold;
	padding:5px 10px;
	margin-bottom:10px;
}

@media only screen and (max-width: 768px){
	h3{
		margin-bottom:15px;
		}
	.h3Txt:before,
	.h3Txt:after{
		display:none;
		}
	.h3Txt{
		font-size:1.3em;
	  line-height: 1.3em;
		}
}

/************************************************************
ƒwƒbƒ_[Eƒtƒbƒ^[
************************************************************/
#header{
	display:block;
	clear:both;
	float:none;
	position:relative;
	z-index: 102;
	padding:15px 0;
	border-top:#6faa28 solid 3px;
	}
#header .inner{
	display:flex;
	align-items: center;
	}
.logo {margin-right:auto;}
.logo img{ max-height:60px;}
.h-btn{
	margin-left:auto;
	display:flex;
	gap:10px;
	}

@media only screen and (max-width: 768px){
	#header{
		padding:8px 0 0;
		height:58px;
		background:#fff;
		}
	#header .inner{
		padding-right:55px;
		}
	.logo img{ max-height:50px;}
	.h-btn{
		display:none;
		}
}

#footer{
	display:block;
	clear:both;
	float:none;
	position:relative;
	background:url(../images/common/footerBg.png) center top repeat-x;
	padding:20px 0;
	height:107px;
	margin-bottom:20px;
}
#footer p{
	position:absolute;
	left:5%;
	bottom: 50%;
	width:90%;
	text-align:center;
	-webkit-transform: translateY(50%);
	-ms-transform: translateY(50%);
	transform: translateY(50%);
	}
#footer p img{
	margin:auto;
	}

/************************************************************
‹ค’ส
************************************************************/
#mainImg{
	display:block;
	clear:both;
	float:none;
	position:relative;
	text-align:center;
	background:url(../images/common/main_bg.png) center bottom no-repeat;
	padding-top:408px;
	}
#mainImg img{
	margin:auto;
	}
#mainImg .mainCircle{
	position:absolute;
	top:-25px;
	left: 50%;
	width:80%;
	max-width:420px;
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	transform: translateX(-50%);
	}
#mainImg h2{
	position:absolute;
	top:140px;
	left:0;
	width:100%;
	text-align:center;
	font-size:1.2em;
	font-weight:bold;
}
#mainImg .mainJyosei{
	position:absolute;
	bottom:0;
	left: 50%;
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	transform: translateX(-50%);
}
#mainImg .mainUnder{
	position:absolute;
	bottom:-20px;
	left:0;
	width:100%;
	background:url(../images/common/mainUnder.png) center bottom no-repeat;
	height:40px;
	z-index:9;
	}
@media only screen and (max-width: 768px){
	#mainImg{
		background:url(../images/common/main_bg.png) center bottom no-repeat;
		background-size:cover;
		padding-top:300px;
		margin-top:10px;
		}
	#mainImg .mainCircle{
		top:-10px;
		}
	#mainImg .mainCircle img{
		max-height:300px;
		width:auto;
		}
	#mainImg .mainUnder{
		background:url(../images/common/mainUnder.png) center bottom no-repeat;
		height:20px;
		background-size:cover;
		bottom:-10px;
		}
}
@media only screen and (max-width: 480px){
	#mainImg{
		padding-top:250px;
		}
	#mainImg .mainCircle img{
		max-height:250px;
		width:auto;
		}
}



#secondImg{
	display:block;
	clear:both;
	float:none;
	position:relative;
	background:url(../images/common/second_bg.png) center top no-repeat;
	padding-top:190px;
	text-align:center;
}
#secondImg img{
	margin:auto;
}
#secondImg .mainCircle{
	position:absolute;
	top:-25px;
	left: 50%;
	width:80%;
	max-width:450px;
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	transform: translateX(-50%);
}
#secondImg .mainUnder{
	position:absolute;
	bottom:-20px;
	left:0;
	width:100%;
	background:url(../images/common/mainUnder.png) center bottom repeat-x;
	height:40px;
	z-index:9;
	}


@media only screen and (max-width: 768px){
	#secondImg{
		background:url(../images/common/second_bg.png) center bottom no-repeat;
		background-size:cover;
		padding-top:150px;
		margin-top:10px;
		}
	#secondImg .mainCircle{
		top:-10px;
		}
	#secondImg .mainCircle img{
		max-height:150px;
		width:auto;
		}
	#secondImg .mainUnder{
		background:url(../images/common/mainUnder.png) center bottom no-repeat;
		height:20px;
		background-size:cover;
		bottom:-10px;
		}
}
@media only screen and (max-width: 480px){
	#secondImg{
		padding-top:110px;
		}
	#secondImg .mainCircle img{
		max-height:110px;
		width:auto;
		}
}



/*************************/
#contents{
	display:block;
	clear:both;
	float:none;
	position:relative;
	padding:50px 0;
}
@media only screen and (max-width: 768px){
	#contents{
		padding:30px 0;
	}
}
@media only screen and (max-width: 480px){
	#contents{
		padding:20px 0;
	}
}

/*****************************************************/
.btnOrange a{
	display:block;
	border:#ff7e00 solid 2px;
	color:#ff7e00;
	font-weight:bold;
	text-align:center;
	text-decoration:none;
	border-radius:10px;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	overflow:hidden;
	}
.btnYellow a{
	display:block;
	border:#dcaf00 solid 2px;
	color:#dcaf00;
	font-weight:bold;
	text-align:center;
	text-decoration:none;
	border-radius:10px;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	overflow:hidden;
	}
.btnImg{
	margin:10px 10px 0;
	}
.btnTxt{
	color:#fff;
	padding:10px;
	}
.btnOrange .btnTxt{background:#ff7e00;}
.btnYellow .btnTxt{background:#dcaf00;}

.btnOrange a:hover,
.btnOrange a:active{
	background:#ffd9b3;
	}
.btnYellow a:hover,
.btnYellow a:active{
	background:#f5e7b3;
	}
.btnOrange a:hover img,
.btnYellow a:hover img{
	opacity:1;
	}



/*****************************************************/
#step1 h3{
	display:block;
	text-align:left;
	font-size:1.2em;
	font-weight:bold;
	color:#ffffff;
	padding:15px 20px;
	background:#ff7e00;
	margin-bottom:20px;
	border-bottom:none;
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	behavior: url(border-radius.htc); /* IE */
}
#step1 h3 span{
	display:inline-block;
	color:#ffffff;
	margin-right:10px;
	text-shadow:none;
}

#step1 h4{
	font-size:1.2em;
	font-weight:bold;
	padding:5px 10px;
	border-bottom:#ff7e00 solid 2px;
	color:#ff7e00;
	margin-bottom:10px;
}

#step1 h5{
	background:#ffffd5;
	font-weight:bold;
	padding:5px 10px;
	margin-bottom:10px;
}

#step1 ul{padding:0 20px;}
#step1 ol{padding:0 20px;}


#step2 h3{
	display:block;
	text-align:left;
	font-size:1.2em;
	font-weight:bold;
	color:#ffffff;
	padding:15px 20px;
	background:#649D1B;
	margin-bottom:20px;
	border-bottom:none;
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	behavior: url(border-radius.htc); /* IE */
}
#step2 h3 span{
	display:inline-block;
	color:#ffffff;
	margin-right:10px;
	text-shadow:none;
}

#step2 h4{
	font-size:1.2em;
	font-weight:bold;
	padding:5px 10px;
	border-bottom:#649D1B solid 2px;
	color:#649D1B;
	margin-bottom:10px;
}

#step2 h5{
	background:#eafada;
	font-weight:bold;
	padding:5px 10px;
	margin-bottom:10px;
}
#step2 ul{padding:0 20px;}
#step2 ol{padding:0 20px;}



#step3 h3{
	display:block;
	text-align:left;
	font-size:1.2em;
	font-weight:bold;
	color:#ffffff;
	padding:15px 20px;
	background:#007cb5;
	margin-bottom:20px;
	border-bottom:none;
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	behavior: url(border-radius.htc); /* IE */
}
#step3 h3 span{
	display:inline-block;
	color:#ffffff;
	margin-right:10px;
	text-shadow:none;
}

#step3 h4{
	font-size:1.2em;
	font-weight:bold;
	padding:5px 10px;
	border-bottom:#007cb5 solid 2px;
	color:#007cb5;
	margin-bottom:10px;
}

#step3 h5{
	background:#e0f3fb;
	font-weight:bold;
	padding:5px 10px;
	margin-bottom:10px;
}
#step3 ul{padding:0 20px;}
#step3 ol{padding:0 20px;}

	#step1 h3 span,
	#step2 h3 span,
	#step3 h3 span{
		display:inline-block;
		margin-right:8px;
	}


@media all and (-ms-high-contrast:none){
	h4{padding:8px 5px 2px;}

	#step1 h3,
	#step2 h3,
	#step3 h3{
		padding:18px 20px 12px;
	}
	#step1 h4,
	#step2 h4,
	#step3 h4{
		padding:8px 10px 2px;
	}
	h5,
	#step1 h5,
	#step2 h5,
	#step3 h5{
		padding:8px 10px 2px;
	}
}

@media only screen and (max-width: 480px){
	#step1 h3,
	#step2 h3,
	#step3 h3{
		font-size:1.1em;
		line-height:1.5em;
	}


	#step1 ul,
	#step1 ol,
	#step2 ul,
	#step2 ol,
	#step3 ul,
	#step3 ol	{padding:0}
	}


/************************************************************
ƒOƒ‰ƒt
************************************************************/

.graphWrap{
	display:flex;
	align-items: stretch;
	gap:10px;
	margin-bottom:60px;
	}
.graph_time{
	flex-shrink: 0;
	width:50px;
	content:'';
	background:url(../images/graph/graph_time.png) center top repeat-y;
	text-align:center;
	position:relative;
	padding-top:10px;
	padding-bottom:25px;
	font-weight:bold;
}
.graph_time:after{
	position:absolute;
	bottom:0;
	left:0;
	width:50px;
	height:25px;
	background:url(../images/graph/graph_time_arr.png);
	background-size:contain;
	content:'';
}
.graph_cont{
	flex-shrink: 0;
	width:calc(100% - 60px);
}

/*f’fŽž*/
.graph_diagnosis{
	position:relative;
	left:-20px;
	width:calc(100% + 40px);
	height:30px;
	line-height:30px;
	background:#333333;
	padding-left:10px;
	font-weight:bold;
	color:#ffffff;
	margin-bottom:10px;
	text-align:left;
	}
.graph_diagnosis:before{
	position:absolute;
	left:-22px;
	top:0;
	width:20px;
	height:30px;
	background-size:contain;
	content:'';
}


.graph_step1 .graph_diagnosis{background:#ff7e00;}
.graph_step2 .graph_diagnosis{background:#689d02;}
.graph_step3 .graph_diagnosis{background:#009be2;}
.graph_step4 .graph_diagnosis{background:#ec5f4a;}

.graph_step1 .graph_diagnosis:before{background:url(../images/graph/graph_diagnosisL1.png);}
.graph_step2 .graph_diagnosis:before{background:url(../images/graph/graph_diagnosisL2.png);}
.graph_step3 .graph_diagnosis:before{background:url(../images/graph/graph_diagnosisL3.png);}
.graph_step4 .graph_diagnosis:before{background:url(../images/graph/graph_diagnosisL4.png);}


.graph_diagnosis span{
	font-weight:500;
	font-size:0.8em;
	padding-left:10px;
	padding-right:10px;
	position:relative;
	z-index:50;
	}
.graph_diagnosis span a{color:#ffffff;}
.graph_diagnosis span a:hover,
.graph_diagnosis span a:active{color:#0047ca;}


/**/
span.otherPage{
	position:relative;
	color:#333333;
	text-decoration:none;
	cursor:default;
}
span.otherPage a{ display:none;}
span.otherPage:hover a{
	white-space:nowrap;
	display: block;
	position:absolute;
	top:0.8em;
	left:0.8em;
	border:#cccccc solid 1px;
	background:rgba(255,255,255,0.8);
	font-size:0.8em;
	line-height:1;
	padding:5px;
	text-indent: 0;
	}



/*ƒXƒeƒbƒvƒ^ƒCƒgƒ‹*/
.graph_stepTtl{
	position:relative;
	z-index:50;
	display:table-cell;
	vertical-align:middle;
	width:316px;
	text-align:center;
	font-weight:bold;
}
/*ƒŠƒXƒg*/
.graph_list{
	display:table-cell;
	vertical-align:middle;
}

@media only screen and (max-width: 768px){
	.graph_stepTtl,
	.graph_list{
		display:block;
		width:100%;
		}
	}
@media only screen and (max-width: 480px){
	.graph_time{ width:15px;}
	.graph_time:after{
		left:-5px;
		width:25px;
		height:12.5px;
	}

	.graph_cont{ width:calc(100% - 25px);}
	.graph_diagnosis:before{
		left:-10px;
		top:0;
		width:10px;
		height:30px;
	}

}

/*ƒ{ƒ^ƒ“*/

.graph_btn{
	margin:0 auto 10px;
	max-width:260px;
	text-align:center;
	font-weight:500;
}
.graph_btn a{
	display:block;
	background:#333333;
	color:#ffffff;
	padding:5px 10px;
	text-decoration:none;
	border-radius:20px;
	-moz-border-radius:20px;
	-webkit-border-radius:20px;
	behavior: url(border-radius.htc); /* IE */
	/*‡˜ ‰กE‰บE‚ฺ‚ฉ‚ตEF*/
	box-shadow: 3px 3px 3px rgba(255,255,255,0.3) inset, -3px -3px 3px rgba(0,0,0,0.2) inset;
	-moz-box-shadow: 3px 3px 3px rgba(255,255,255,0.3) inset, -3px -3px 3px rgba(0,0,0,0.2) inset;
	-o-box-shadow: 3px 3px 3px rgba(255,255,255,0.3) inset, -3px -3px 3px rgba(0,0,0,0.2) inset;
	-webkit-box-shadow: 3px 3px 3px rgba(255,255,255,0.3) inset, -3px -3px 3px rgba(0,0,0,0.2) inset;

}
.graph_step1 .graph_btn a{background:#ff7e00;}
.graph_step1 .graph_step1_btn a:hover,
.graph_step1 .graph_step1_btn a:active{background:#f56500;}

.graph_step2 .graph_btn a{background:#689d02;}
.graph_step2 .graph_step1_btn a:hover,
.graph_step2 .graph_step1_btn a:active{background:#537e02;}

.graph_step3 .graph_btn a{background:#009be2;}
.graph_step3 .graph_step1_btn a:hover,
.graph_step3 .graph_step1_btn a:active{background:#007cb5;}




/*€”๕*/
dl.graph_reserve{
	clear:both;
	margin-top:10px;
	font-size:0.9em;
	display:table;
	border:#cccccc solid 1px;
	background:rgba(255,255,255,0.8);
	max-width:776px;
	width:100%;
	line-height:1.5em;
	position:relative;
	z-index:50;
}
.graph_reserve dt,
.graph_reserve dd{
	display:table-cell;
	padding:10px;
	vertical-align:middle;
}
.graph_reserve dt{
	width:310px;
	background:#f7f7f7;
	text-align:center;
	font-weight:bold;
}

/*ƒXƒeƒbƒv‚P*/
.graph_step1{
	background:#ffffd5;
	padding:0 20px 20px;
	font-weight:bold;
	margin-bottom:20px;
	border:#ff7e00 solid 2px;
	border-top:none;
}
/*ƒXƒeƒbƒv2*/
.graph_step2{
	background:#eafada;
	padding:0 20px 20px;
	position:relative;
	margin-bottom:20px;
	border:#689d02 solid 2px;
	border-top:none;
}
/*ƒXƒeƒbƒv3*/
.graph_step3{
	background:#e0f3fb;
	padding:0 20px 20px;
	position:relative;
	margin-bottom:20px;
	border:#009be2 solid 2px;
	border-top:none;
}
/*–๎ˆ๓BOX*/
.graph_arr{
	position:relative;
	height:10px;
}
/*ƒXƒeƒbƒv4*/
.graph_step4{
	background:#ffeae5;
	padding:0 20px 20px;
	font-weight:bold;
	text-align:center;
	border:#ec5f4a solid 2px;
	border-top:none;
}


/*‰บ–๎ˆ๓*/
.arr1{
	position:absolute;
	right:20px;
	top:-20px;
	height:100%;
  height: -webkit-calc(100% + 22px) ;
  height: calc(100% + 22px) ;
	width:30px;
	background:#ff7e00;
	z-index:10;
	}
.arr2{
	position:absolute;
	right:70px;
	top:-20px;
	height:100%;
  height: -webkit-calc(100% + 22px) ;
  height: calc(100% + 22px) ;
	width:30px;
	background:#689d02;
	}

.graph_arr .arr1{
	position:absolute;
	right:12px;
	top:-20px;
	width:50px;
	background:none;
	}
.graph_arr .arr2{
	position:absolute;
	right:62px;
	top:-20px;
	width:50px;
	background:none;
	}
.graph_arr .arr3{
	position:absolute;
	right:112px;
	top:-20px;
	width:50px;
	}

@media only screen and (max-width: 768px){
	.dl.graph_reserve,
	.graph_reserve dt,
	.graph_reserve dd{
		display:block;
		width:100%;
		}
	.graph_reserve dt,
	.graph_reserve dd{
		padding:5px;
		}
}
@media only screen and (max-width: 480px){
	.arr1{ width:15px; right:5px;}
	.arr2{ width:15px; right:25px;}
	.graph_arr { height:auto;}
	.graph_arr .arr1{
		width:25px;
		right:2.5px;
		}
	.graph_arr .arr2{
		width:25px;
		right:22.5px;
		}
	.graph_arr .arr3{
		width:25px;
		right:42.5px;
		}
}




@media all and (-ms-high-contrast:none){

	.graph_diagnosis{	line-height:35px;}
	.graph_btn a{	padding:8px 10px 2px;}
	.graph_reserve dt,
	.graph_reserve dd{padding:13px 10px 7px;}


}


.document{padding:0 10px; margin-bottom:20px;}


.bookletWrap{ width:100%;}
.bookletWrap a{
	display:flex;
	align-items:center;
	gap: 20px;
	padding:10px;
	border-bottom:dotted 4px #999;
	padding:10px;
	color:#333;
	text-decoration:none;
	font-weight:700;
	}
.bookletWrap a:hover,
.bookletWrap a:active{
	color:#cc0000;
	background:#f7f7f7;
	}
.bookletImg{
	flex-shrink: 0;
	width:180px;
	}
.bookletTxt{
	flex-shrink: 0;
	width:calc(100% - 260px);
	}

.bookletWrap .ico{
	flex-shrink: 0;
	width:40px;
	margin-left:auto;
	}
.bookletWrap .ico img{
	display:inline-block;
	vertical-align:middle;
}

.bookletWrap .icoYoutube{
	flex-shrink: 0;
	width:150px;
	margin-left:auto;
	}

@media only screen and (max-width: 768px){
	.bookletImg{
		width:130px;
		}
	.bookletWrap .ico{
		width:30px;
		}
	.bookletTxt{
		width:calc(100% - 200px);
		}
	.bookletWrap .icoYoutube{
		width:120px;
		}
}
@media only screen and (max-width: 480px){
	.bookletWrap a{
		gap:10px;
		}
	.bookletImg{
		width:60px;
		}
	.bookletTxt{
		width:calc(100% - 110px);
		}
	.bookletWrap .icoYoutube{
		width:70px;
		}
}

/*YouTube
*****************************************************/
.youtube{
	position:relative;
	padding-top:56.25%;
	}
.youtube iframe{
	position:absolute;
	top:0;
	left:0;
	width: 100% !important;
	height: 100% !important;
	}