@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.375rem;/*22px*/
/*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*/

#AS-wrapper{
	overflow:hidden;
}

#contents{
	background:url(../images/bg.png) center top #ffffff;
	color:#000000;
	font-size:1.375rem;
	line-height:1.6;
	box-sizing:border-box;
}

h1{
	background:url(../images/bg-title.png) center top;
	margin-bottom:40px;
	text-align:center;
}

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

h2{
	color:#C52C03;
	font-size:1.875rem;
}

.hBox{
	position:relative;
	background-color:#FCFEAB;
	margin-bottom:40px;
	padding:16px 0;
	text-align:center;
	z-index:10;
}

.hBox.type2{
	background-color:#fbe8d8;
}

.hBox h2{
}

#contents .btn{
	display:inline-block;
	background-color:#C52C03;
	padding:.5em 1.5em;
	border-radius:2em;
	box-shadow:0 0 8px 0 #666666;
	color:#FFFFFF;
	line-height:1.2;
}

#contents .btn:hover{
	opacity:.9;
	box-shadow:none;
}

.notes{
	font-size:1rem;
}

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

.fs14{font-size:.875rem;}
.fs16{font-size:1rem;}
.fs20{font-size:1.25rem;}
.fs24{font-size:1.5rem;}
.fs30{font-size:1.875rem;}


strong{
	display:inline-block;
	margin:0 .2em;
	font-size:1.2em;
	-webkit-transform: skewX(-15deg);
	transform: skewX(-15deg);
}

#contents a{
	color:#C52C03;
}

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


.pic,
.comic{
	display:inline-block;
	background-color:#ffffff;
	border-radius:16px;
	box-sizing:border-box;
}

.pic{
	border:4px solid #ffffff;
}

.shadow{
	box-shadow:0 0 8px rgba(0,0,0,.4);
}

.center{
	text-align:center;
}

.area-before,
.area-middle,
.area-after{
	position:relative;
	background:-webkit-linear-gradient(top, rgba(255,255,255,0), #dddddd) center center no-repeat;
	background:linear-gradient(to bottom, rgba(255,255,255,0), #dddddd) center center no-repeat;
	padding-top:60px;
}

.area-before + .area-before{padding-top:15vw;}
.area-middle{padding-top:15vw;background:#ffffff;}
.area-after{padding-top:15vw;background:#FCFEAB;}

.area-before::after,
.area-middle::after,
.area-after::after{
	content:"";
	display:block;
	position:absolute;
	bottom:-35.35vw;
	left:15%;
	right:15%;
	background-color:#dddddd;
	height:70.70vw;
	transform:scaleY(.2) rotate(45deg);
	z-index:1;
}

.area-middle::after{background-color:#ffffff;}
.area-after::after{background-color:#ffffff;}

.bg-w{background-color:#ffffff;}

.bg-plan1,
.bg-plan2,
.bg-plan3,
.bg-plan4{
	display:inline-block;
	background-color:#588E4A;
	color:#ffffff;
	font-style:italic;
	padding:0 .5em 0 .3em;
	margin:0 .5em;
}

.bg-plan2{
	background-color:#B3472A;
}

.bg-plan3{
	background-color:#EA8E3B;
}

.bg-plan4{
	background-color:#238EA8;
}

.c-plan1{color:#588E4A;}
.c-plan2{color:#B3472A;}
.c-plan3{color:#EA8E3B;}
.c-plan4{color:#238EA8;}
.c-red{color:#C52C03;}

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

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

.column > *,
.talkBox > *,
.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%;}
.lineCol{flex-basis: 400%;}




.section{
	position:relative;
	max-width:1000px;
	margin:0 auto;
	padding:0 16px 40px;
	z-index:10;
}

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

.mb40{margin-bottom:40px;}
.pt40{padding-top:40px;}



.box{
	position:relative;
	background-color:#ffffff;
	padding:16px;
	border:8px solid #84D2DE;
	border-radius:16px;
	box-shadow:0 0 4px rgba(0,0,0,.2);
}

.box::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%);
}

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



.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:12px solid #ffffff;
	border-radius:2em;
	box-shadow:0 0 8px 0 #666666;
	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:hover{
	box-shadow:none;
	border-color:#eeeeee;
}

.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;
	font-style:normal;
}

.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{
	margin:0;
	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;
}

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




.mb20{margin-bottom:20px;}
.mb40{margin-bottom:40px;}
.mb80{margin-bottom:80px;}
.mt20{margin-top:20px;}
.mt80{margin-top:80px;}
.mt15vw{margin-top:15vw;}





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

}

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

#contents{
	font-size:100%;
}

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

.column{
	flex-direction:column;
	align-items:normal;
}

.column > *{
	flex-basis:auto;
	padding-left:0;
	padding-right:0;
}

.talkBox{
}
.lineCol{
	padding:0;
	flex-basis:200%;
}

.box{
}

.comic{
	border-radius:0;
}

.lanking-panel{
	border-radius:1em;
}

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

}