@charset "shift_jis";

/*font-size:.625rem;/*10px*/
/*font-size:.75rem;/*12px*/
/*font-size:.875rem;/*14px*/
/*font-size:1rem;/*16px*/
/*font-size:1.125rem;/*18px*/
/*font-size:1.25rem;/*20px*/

/*font-size:1.5rem;/*24px*/
/*font-size:1.625rem;/*26px*/

/*font-size:1.875rem;/*30px*/

/*font-size:2.25rem;/*36px*/

/*font-size:2.5rem;/*40px*/

/*font-size:3.125rem;/*50px*/

/*font-size:3.75rem;/*60px*/

#contents{
	color:#666666;
	font-size:1.25rem;
	line-height:1.6;
}

h1{
	background-color:#F7EACC;
	text-align:center;
}

h1 img{
	width:100%;
	max-width:1200px;
	height:auto;
}

h2{
	background-color:#3EBCD2;
	padding-top:8px;
	padding-bottom:8px;
	margin-bottom:40px;
	color:#FFFFFF;
	text-align:center;
}

h2::before{
	content:"";
	display:inline-block;
	background:url(../images/icon_note_w.png) center center no-repeat;
	background-size:contain;
	height:1.6em;
	width:1.6em;
	margin-right:.2em;
	vertical-align:middle;
}

h2.icon-question::before{
	background-image:url(../images/icon_question_w.png);
}

h3{
	margin-top:40px;
	margin-bottom:16px;
	border-bottom:#309BAE 2px dashed;
	color:#309BAE;
	text-align:center;
}

h3:first-child{margin-top:0;}

h4{
	color:#309BAE;
}

h5{
	margin-bottom:10px;
	color:#7E5F13;
}

#contents table{
}

#contents table tr{
	border:4px solid #3EBCD2;
}

#contents table th{
	background:#F3FBFC;
	border-color:#3EBCD2;
}

#contents table td{
	border:none;
}


#contents a{
	color:inherit;
}

#contents a.normalLink{
	color:#DE435E;
	text-decoration:underline;
}

#contents a.normalLink::after{
	color:#DE435E;
	text-decoration:underline;
}

#contents a.link:hover{
	text-decoration:none;
}

#contents p, #contents ul, #contents ol{
	margin-bottom:24px;
}

#contents li{
	margin-bottom:4px;
}

#contents p:last-child, #contents li:last-child{
	margin-bottom:0;
}

#contents .btn{
	display:inline-block;
	background-color:#DE435E;
	padding:.5em 1.5em;
	border-radius:2em;
	color:#FFFFFF;
	line-height:1.2;
	box-shadow:none;
}

#contents .btn.light{
	background-color:#FBF1F8;
	color:#DE435E;
}

#contents .btn.transparent{
	background-color:transparent;
	border:1px solid #cccccc;
	color:#333333;
}

#contents .btn:hover{
	opacity:.9;
	box-shadow:0 0 8px 2px rgba(0,0,0,.3);
}

.bnr{
	overflow:hidden;
	display:inline-block;
	border-radius:7.5%/50%;
	box-shadow:0 0 8px 2px rgba(0,0,0,.3);
}

.bnr:hover{
	opacity:.9;
	box-shadow:none;
}

.link,
.iconLink{
	position:relative;
}

.iconLink{
	display: flex;
	align-items:center;
}

.iconLink img{
	width:100%;
	height:auto;
	max-width:80px;
	margin-right:5px;
	flex-shrink:0;
}

.link::after,
.iconLink::after{
	content:"";
	display:inline-block;
	height:.6em;
	width:.6em;
	border-top:1px solid #333;
	border-right:1px solid #333;
	transform:rotate(45deg);
	flex-shrink:0;
}

.list > li{
}

.list > li::before{
	content:"";
	display:inline-block;
	background-color:#309BAE;
	height:.5em;
	width:.5em;
	margin:0 .5rem .12rem;
	border-radius:100%;
	vertical-align:baseline;
}


.fsSet1{
}

.fsSet1 h2{
}

.fsSet2{
}

.fsSet2 h2{
}

strong{
	position:relative;
	background:-webkit-linear-gradient(top, rgba(255,229,153, 0) .8em, rgba(255,229,153, 1) .8em);
	background:linear-gradient(to bottom, rgba(255,229,153, 0) .8em, rgba(255,229,153, 1) .8em);
	font-weight:normal;
	z-index:1;
}
/*
strong::after{
	content:"";
	position:absolute;
	bottom:0;
	top:60%;
	left:0;
	right:0;
	display:block;
	background-color:#FFE599;
	z-index:-1;
}*/

#contents img{
	width:100%;
	height:auto;
}

.notes{
	font-size:1rem;
}

.notes li{
	padding-left:1.2em;
	text-indent:-1.2em;
}



.center{
	text-align:center !important;
}

.mb5{margin-bottom:5px !important;}
.mb20{margin-bottom:20px !important;}
.mb40{margin-bottom:40px !important;}
.mb80{margin-bottom:80px !important;}
.mt80{margin-top:80px !important;}

.pt0{padding-top:0px !important;}
.pb0{padding-bottom:0px !important;}
.pb40{padding-bottom:40px !important;}

.c-blue{
	color:#309BAE;
}

.bg-lightBlue{
	background-color:#F3FBFC;
	border:none;
}




.column,
.flex{
  display: flex;
  justify-content: center;
}

.flex > *{
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 100%;
}

.column > *,
.col{
  padding:8px;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 100%;
}

.col2{flex-basis: 200%;}
.col3{flex-basis: 300%;}
.col4{flex-basis: 400%;}
.col5{flex-basis: 500%;}
.col6{flex-basis: 600%;}

.column.center > *{
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
}




.section{
	max-width:1000px;
	margin:0 auto;
	padding:24px 16px 80px;
}

.section.narrow{
	max-width:800px;
}

.section.wide{
	max-width:1200px;
}

.iconMark{
	background:#ffffff;
	margin-bottom:16px;
	border:1px solid #C2EAF1;
	border-radius:3em;
	color:#309BAE;
	text-align:center;
}

.borderBox{
	border:1px solid #ccc;
	padding:16px;
}


.QABox{
	overflow:hidden;
	position:relative;
	padding-bottom:24px;
	-webkit-transition: height .5s ease;
	-ms-transition: height .5s ease;
	transition: height .5s ease;
}

.QABox h4{
	background-color:#F7EACC;
	padding:8px 8px 8px 24px;
	border-radius:16px 0 0 0;
	text-align:left;
}

.QABox h4::before{
	content: "Q";
	background: #F3FBFC;
	border: #309BAE solid 1px;
	border-radius: 4px;
	padding: .2em .5em;
	color:#309BAE;
	line-height: 1;
	font-size: 1.2em;
	display: inline-block;
	margin: 0 .5em 0 0;
}

.QABox p{
}

.QABox p:first-child{
}

.QABox p:first-of-type::before{
	content:"A";
	background: #ffffff;
	border: #7E5F14 solid 3px;
	border-radius: 4px;
	padding: .2em .5em;
	color:#7E5F14;
	line-height: 1;
	font-weight: bold;
	font-size:1.875rem;
	display: inline-block;
	margin: 0 .5em 0 0;
}

.ABox{
	overflow:hidden;
	position:relative;
	background-color:#FCF8ED;
	max-height:none;
	padding:16px 16px 24px 24px;
	font-size:1.125rem;
	line-height:2;
	z-index:0;
}

.ABox > figure{
	float:right;
	margin:8px 0 8px 8px;
	text-align:center;
}

.ABox > figure img{
	max-width:250px;
}

.ABox::before{
	display:none;
	content:"";
	position:absolute;
	top:50%;
	bottom:0;
	left:0;
	right:0;
	background:-webkit-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,1) 75%);
	background:linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1) 75%);
	z-index:10;
}

.resumeBox{
	display:none;
	text-align:center;
}

.close .ABox{
	max-height:4em;
}

.close .ABox::before,
.close .resumeBox{
	display:block;
}


.sideBox{
	background-color:#F3FBFC;
}


.sideBox{
	overflow:hidden;
	padding-bottom:8px;
	border-radius:16px;
}


.QABox .sideBox{
	border-radius:0 16px 0 0;
	font-size:1rem;
}

.sideBox > *{
	padding:8px 16px;
}

.sideBox h5{
	background-color:#C2EAF1;
	padding:8px 16px;
	color:#309BAE;
	font-size:1rem;
	text-align:center;
}


.talkLeft{
	display:flex;
	align-items:center;
	max-width:80%;
	margin:40px auto;
}

.talkLeft > p{
	position:relative;
	background:#FBF1F8;
	padding:16px 24px 16px;
	border:8px solid #ffffff;
	border-radius:16px;
	box-shadow:0 0 8px 0 rgba(0,0,0,0.3);
	flex-shrink:1;
}

.talkLeft > p::before{
	overflow:hidden;
	content:'';
	position:absolute;
	top:50%;
	left:-30px;
	height:24px;
	width:30px;
	background:url(../images/bg_coment.png) left top no-repeat;
	transform:translateY(-50%);
}
.talkLeft img{
	flex-shrink:0;
	}


/*
.talkLeft,
.talkRight{
	position:relative;
	max-width:60%;
	margin:0 auto;
	z-index:30;
	}

.talkLeft img,
.talkRight img{
	position:absolute;
	top:50%;
	right:100%;
	transform:translateY(-50%);
	}

.talkRight img{
	right:auto;
	left:100%;
	}

.talkLeft p,
.talkRight p{
	position:relative;
	background:#ffffff;
	min-height:56px;
	margin:0 5px 30px;
	padding:20px 26px 15px;
	border-radius:26px;
	-ms-border-radius:26px;
	-moz-border-radius:26px;
	-webkit-border-radius:26px;
	box-shadow:0 0 2px 2px rgba(0,0,0,0.3);
	-ms-box-shadow:0 0 2px 2px rgba(0,0,0,0.3);
	-moz-box-shadow:0 0 2px 2px rgba(0,0,0,0.3);
	-webkit-box-shadow:0 0 2px 2px rgba(0,0,0,0.3);
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	}

.talkLeft p:before,
.talkRight p:after{
	overflow:hidden;
	content:'';
	position:absolute;
	top:50%;
	left:-30px;
	height:24px;
	width:30px;
	background:url(../images/bg_coment.png) left top no-repeat;
	transform:translateY(-50%);
	}

.talkRight p:after{
	left:auto;
	right:-30px;
	background:url(../images/bg_coment.png) right top no-repeat;
	}

*/


.lanking-title{
	background-color:#F7EACC;
	color:#309BAE;
}

.lanking-title::before{
	background-image:url(../images/icon_crown.png);
}

.lanking-box .column > *{
	display:flex;
	padding:1em;
}

.lanking-box .column > * > *{
}

.lanking-panel{
	position:relative;
	display:flex;
	z-index:1;
	background-color:#eee;
	background:-webkit-linear-gradient(top, #F7DFC4, #DFCDB3, #FCF5E0) center center no-repeat;
	background:linear-gradient(to bottom, #F7DFC4, #DFCDB3, #FCF5E0) center center no-repeat;
	border:8px solid #ffffff;
	border-radius:1em;
	box-shadow:0 0 4px 0 rgba(0,0,0,.3);
	padding:16px 8px 8px;
	flex-grow:1;
	flex-shrink:1;
	flex-basis:100%;
	align-items:center;
	justify-content:flex-end;
	flex-direction:column;
}

.lanking-panel.lanking-no2{
	background:-webkit-linear-gradient(top, #dddddd, #cccccc, #eeeeee);
	background:linear-gradient(to bottom, #dddddd, #cccccc, #eeeeee);
}

.lanking-panel.lanking-no3{
	background:-webkit-linear-gradient(top, #ECCCB9, #FBF2EE);
	background:linear-gradient(to bottom, #ECCCB9, #FBF2EE);
}

.lanking-panel .lanking-pic{
	max-width:180px;
	max-height:180px;
}

.lanking-panel .lanking-txt{
	text-align:center;
	line-height:1.2;
}

.lanking-panel .lanking-txt strong::before{
	content:"";
	display:block;
}

.lanking-panel strong{
	background:none;
	font-weight:bold;
}

.lanking-panel .lanking-mark{
	position:absolute;
	top:-2.5rem;
	left:-2.5rem;
	display:flex;
	background:url(../images/icon_crown_w.png) center .3em no-repeat #FC3;
	background-size:cover;
	border-radius:100%;
	height:6rem;
	width:6rem;
	border:4px solid #EA9300;
	color:#000;
	font-size:1rem;
	line-height:1;
	text-shadow:0 0 8px rgba(255,255,255,1);
	z-index:-1;
	justify-content: center;
	align-items: center;
}

.lanking-panel .lanking-mark strong{
	font-size:4rem;
	font-weight:normal;
}

.lanking-panel.lanking-no2 .lanking-mark{
	background:#999;
	border-color:#777;
	color:#ffffff;
	text-shadow:none;
}

.lanking-panel.lanking-no3 .lanking-mark{
	background:#C95A1F;
	border-color:#A84B1A;
	color:#ffffff;
	text-shadow:none;
}







@media screen and (min-width:661px){

h2, .fs-h2{font-size:3.75rem;}
h3, .fs-h3{font-size:2.5rem;}
h4, .fs-h4{font-size:1.625rem;}
h5, .fs-h5{font-size:1.625rem;}

.fs16{font-size:1rem;}
.fs24{font-size:1.5rem;}
.fs30{font-size:1.875rem;}

}

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


#contents table tr{
	display:block;
	margin-bottom:20px;
}

#contents table th{
	display:block;
	text-align:center;
}

#contents table th img{
	max-width:140px !important;
}

.section{
	padding-left:8px;
	padding-right:8px;
}

.column{
	flex-direction:column;
}

.column > *{
	flex-basis:auto;
}

.QABox h4{
	padding:8px;
	border-radius:16px 16px 0 0;
}

.QABox .sideBox{
	border-radius:0 0 16px 16px;
}

.ABox{
	display:flex;
	padding:16px;
	flex-direction:column;
	font-size:1rem;
}

.QABox p:first-of-type::before{
	font-size:1.375rem;
}

.ABox > figure{
	float:none;
	order:1;
}

.talkLeft{
	max-width:none;
}

.talkLeft > img{
	max-width:120px !important;
	min-width:100px !important;
}

.talkLeft > p{
	padding:8px;
	font-size:1rem;
}

.lanking-panel{
	align-items:
}

.lanking-panel .lanking-pic{
	max-width:140px;
	max-height:140px;
}

.lanking-panel .lanking-txt{
	font-size:1rem;
}

.lanking-panel .lanking-txt strong::before{
	display:none;
}

.lanking-panel .lanking-mark{
	top:-1.5rem;
	left:-1.5rem;
	height:4rem;
	width:4rem;
}

.lanking-panel .lanking-mark strong{
	font-size:3rem;
}

}