@charset "utf-8";
body {
	background-color: #fff;
	font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
	color: #333;
	max-width: 750px;
	margin: auto;
	}

a {
	color: #00b5e2;
	text-decoration: none;
	-webkit-transition: all 0.3s;
  transition: all 0.3s;
	}
a:visited { color: #00b5e2; }
a:hover {
	color: #00b5e2;
	text-decoration: none;
	-webkit-transition: all 0.3s;
  transition: all 0.3s;
	}

/* clearfix */
.clearfix { display: inline-block; }
.clearfix::after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
	}
.flL, .lBlk, .lBox { float: left; }
.flR, .rBlk, .rBox { float: right; }

img{ width: 100%; }

.anmS{ opacity: 0; }

#head{ position: relative; background: #c4eef2;}
#head .chara01{ position: absolute; content: ""; width: 20%; top: 9.655%; right: 2.4%; z-index: 1;}
#head .ttl{ margin: 0 auto; position: relative;}
#head .ttl01{ width: 85.333%; padding: 6.667% 0 2.667%;}
#head .ttl02{ width: 85.867%; padding-bottom: 3.333%;}
#head .ttl03{ width: 79.067%; padding-bottom: 4%;}
#head .ttl04{ width: 85.333%; padding-bottom: 7.333%;}
#head .chara01.animated{animation: scaleIn .6s cubic-bezier(0.175, 0.885, 0.32, 1.275) .4s backwards; -webkit-animation: scaleIn .6s cubic-bezier(0.175, 0.885, 0.32, 1.275) .4s backwards; opacity: 1;}
#head .ttl01.animated{animation: scaleIn .6s cubic-bezier(0.175, 0.885, 0.32, 1.275) .4s backwards; -webkit-animation: scaleIn .6s cubic-bezier(0.175, 0.885, 0.32, 1.275) .4s backwards; opacity: 1;}
#head .ttl02.animated{animation: scaleIn .6s cubic-bezier(0.175, 0.885, 0.32, 1.275) .4s backwards; -webkit-animation: scaleIn .6s cubic-bezier(0.175, 0.885, 0.32, 1.275) .4s backwards; opacity: 1;}
#head .ttl03.animated{-webkit-animation: fadeIn .8s both 1s; animation: fadeIn .8s both 1s;}
#head .ttl04.animated{-webkit-animation: fadeIn .8s both 1s; animation: fadeIn .8s both 1s;}


#contents{ position: relative;}
.bk01{background: #c4eef2; position: relative;}
.bk01 h3{width: 100%; background: #07bdcd; position: relative;}
.bk01 h3 img{width: 59.333%; padding: 0; margin: -4% auto -2.5% 20%;}
.bk01 .mainImg{width: 95.667%; margin: 8.533% auto 0; padding-left: 0.667%;}
.bk01 .mainImgtxt{width: 89.2%; margin: 4% auto 9.067%; padding-left: 0.667%;}
.bk01 .img{width: 89.333%; margin: 0 auto 5.333%; position: relative;}
.bk01 .img.n06{padding-bottom: 8%; margin-bottom: 0;}
.bk01 .ttl.animated{-webkit-animation: fadeInUp .8s both 1.7s; animation: fadeInUp .8s both 1.7s;}
.bk01 .mainImg.animated{-webkit-animation: fadeInUp .8s both 1.7s; animation: fadeInUp .8s both 1.7s;}
.bk01 .mainImgtxt.animated{-webkit-animation: fadeInUp .8s both .7s; animation: fadeInUp .8s both .7s;}
.bk01 .img.animated{-webkit-animation: fadeInUp 1s both; animation: fadeInUp 1s both;}


.bk02{width: 100%; background: #d2fce9; position: relative;}
.bk02 h3{width: 100%; background: #14ae67; position: relative;}
.bk02 h3 img{width: 59.333%; padding: 0; margin: -4% auto -2.5% 20%;}
.bk02 .mainImg{width: 89.333%; margin: 8% auto 5.333%;}
.bk02 .img{width: 89.333%; margin: 0 auto; padding-bottom: 8%;}

.bk02 .ttl.animated{-webkit-animation: fadeInUp .5s both; animation: fadeInUp .5s both;}
.bk02 .img.animated{-webkit-animation: fadeInUp 1s both; animation: fadeInUp 1s both;}
.bk02 .mainImg.animated{-webkit-animation: fadeInUp 1s both; animation: fadeInUp 1s both;}


.bk03 .txtArea01{width: 89.333%; padding: 1.775% 0; box-sizing: border-box; background: #fff6b1; position: relative; margin:2.5% auto 8%; border-radius: 15px;}
.bk03 .txtArea01 .chara10{ content: ""; position: absolute; width: 21.045%; top: -5.258%; right: -1.194%;}
.bk03 .ttl{width: 63.2%; margin: 6% auto 5%;}
.bk03 .ttl.animated{-webkit-animation: fadeInUp .5s both; animation: fadeInUp .5s both;}
.bk03 .txtArea01 .t01{width: 71%; margin: 3% auto 3% 5%;}
.bk03 .img{width: 89.333%; margin: 0 auto 5.333%;}
.bk03 .txtArea02 .img.i01{width: 85.067%;}
.bk03 .txtArea02 .img.i02{width: 85.467%; margin-bottom: 6%;}
.bk03 .img.i04{position: relative;}
.bk03 .img.i05{position: relative; width: 65.733%;}

.bk03 .txtArea01.animated{-webkit-animation: fadeInUp 1s both; animation: fadeInUp 1s both ;}
.bk03 .txtArea01 .t01.animated{-webkit-animation: fadeIn 1s both; animation: fadeIn 1s both;}
.bk03 .txtArea02.animated{-webkit-animation: fadeInUp 1s both .2s; animation: fadeInUp 1s both .2s;}
.bk03 .txtArea02 .img.i01.animated{-webkit-animation: fadeInUp 1s both; animation: fadeInUp 1s both;}
.bk03 .txtArea02 .img.i02.animated{-webkit-animation: zoomIn 1s both; animation: zoomIn 1s both; opacity: 1;}
.bk03 .img.i03.animated{-webkit-animation: fadeInUp 1s both; animation: fadeInUp 1s both ;}
.bk03 .img.i04.animated{-webkit-animation: fadeInUp 1s both; animation: fadeInUp 1s both;}
.bk03 .img.i05.animated{-webkit-animation: fadeInUp 1s both; animation: fadeInUp 1s both;}


.lnkBlk{width: 86.667%; margin: 0 auto;}
.lnkBlk .b01{margin-bottom: 2.667%;}

.lnkBlk .b01.animated{-webkit-animation: fadeInUp 1s both; animation: fadeInUp 1s both;}
.lnkBlk .b02.animated{-webkit-animation: fadeInUp 1s both; animation: fadeInUp 1s both;}



/*==========================================================
Gloval Footer
===========================================================*/
#g_footer{}

/* 共有CSS「footer-zenrosai_sp.css」をOverwrite
-------------------------------------------------*/
footer {
	background-color: #fff;
	width:100%;
	margin:0;
	padding: 5px 0 10px;
	border-top:none;
	}

.footer_bottom {
	background: url(/library/line/contents/img/img_footer/footer_bg_sp.png) 50% 50% no-repeat;
	background-size: 100%;
	padding: 5.067% 0 0;
	font-family: "メイリオ", "Meiryo", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", Helvetica, Arial, Sans-Serif;
	font-size: 4vw;
	color: #000;
	line-height: 1.8;
	}
.footer_bottom .inner { padding: 0 4%; }
.footer-logo {
	width: 52.667%;
	line-height: 1;
	margin: 0 auto 11.733%;
	}
.footer-logoNews {
	width: 32%;
	line-height: 1;
	margin-left: auto;
	}
.footer-copy {
	width: 100%;
	text-align: right;
	font-size: 2.267vw;
	line-height: 1;
	margin: 0;
	margin-top: 4%;
	margin-right: 4%;
	}

@media screen and (min-width: 751px) {
	.footer_bottom {
		padding: 38px 0 0;
		background: url(/library/line/contents/img/img_footer/footer_bg_pc.png) 50% 50% no-repeat;
		background-size: 100%;
		}
	.footer_bottom.inner {
		width: 100%;
		padding: 0 42px;
		}
	.footer-logo {
		width: 197px;
		font-size: 0;
		margin: 0 auto 5%;
		}
	.footer-logoNews {
		width: 150px;
		font-size: 0;
		}
	.footer-copy {
		font-size: 14px;
		margin-top: 1.667%;
		}
}

/* チェックリスト
-------------------------------------------------*/

li{position: relative;}
.col_check{display: table-cell; width:84.925%; height: 0; padding-bottom: 5.97%; vertical-align:top; position: absolute; left: 9.104%;}
/*.col_check.c01{top: 27.652%;}
.col_check.c02{top: 50.253%;}
.col_check.c03{top: 31.117%;}
.col_check.c04{top: 56.436%;}
.col_check.c05{top: 30.544%;}
.col_check.c06{top: 40.307%; padding-bottom: 11.1%;}
.col_check.c07{top: 25.948%;}
.col_check.c08{top: 34.242%;}
.col_check.c09{top: 42.536%;}
.col_check.c10{top: 63.744%;}
.col_check.c11{top: 41.714%;}
.col_check.c12{top: 22.918%; padding-bottom: 11.1%;}
.col_check.c13{top: 12.334%;}
.col_check.c14{top: 18.545%;}
.col_check.c15{top: 24.756%;}
.col_check.c16{top: 40.639%;}
.col_check.c17{top: 46.85%;}
.col_check.c18{top: 53.061%;}
.col_check.c19{top: 68.944%;}
.col_check.c20{top: 75.155%; padding-bottom: 11.1%;}
.col_check.c21{top: 84.028%; padding-bottom: 11.1%;}
*/

.col_check.c01{top: 31.6%;}
.col_check.c02{top: 52.9%;}
.col_check.c03{top: 33%;}
.col_check.c04{top: 57.7%;}
.col_check.c05{top: 32.9%;}
.col_check.c06{top: 42.5%; padding-bottom: 11.1%;}
.col_check.c07{top: 28%;}
.col_check.c08{top: 36%;}
.col_check.c09{top: 44.2%;}
.col_check.c10{top: 64.8%;}
.col_check.c11{top: 44%;}
.col_check.c12{top: 25.5%; padding-bottom: 11.1%;}
.col_check.c13{top: 12.08%;}
.col_check.c14{top: 18.05%;}
.col_check.c15{top: 24.1%;}
.col_check.c16{top: 39.59%;}
.col_check.c17{top: 45.67%;}
.col_check.c18{top: 51.68%;}
.col_check.c19{top: 67.2%;}
.col_check.c20{top: 75.75%; padding-bottom: 11.1%;}
.col_check.c21{top: 84.5%; padding-bottom: 11.1%;}
.col_check input[type="checkbox"] {display:none;}
.checkbox_icon{ display: block; position: relative; width: 100%; height: 0; padding-bottom: 7%;}
.checkbox_icon::before{position: absolute; content: ""; width: 4.85%; height: 52.7%; background-repeat: no-repeat; background-position: 0 0; background-size: 100% 100%; left: 1.055%; top: 25%; z-index: -1;}
.col_check input[type="checkbox"]:checked+.checkbox_icon::before{z-index: 1;}
.checkbox_icon::before{background-image:url(/library/line/contents/img/049/check.png);}

.col_check.c06 .checkbox_icon,.col_check.c12 .checkbox_icon,.col_check.c20 .checkbox_icon,.col_check.c21 .checkbox_icon{ padding-bottom: 13.1%;}
.col_check.c06 .checkbox_icon::before,
.col_check.c12 .checkbox_icon::before,
.col_check.c20 .checkbox_icon::before,
.col_check.c21 .checkbox_icon::before{height: 28%; top: 13.333%;}


/* アニメーション
-------------------------------------------------*/

@keyframes characterInRight{
	0%{opacity: 0; transform: rotate(20deg) translateY(-150%);}
	10%{opacity: 1;}
	100%{opacity: 1; transform: rotate(0deg) translateY(20%);}
}
@-webkit-keyframes characterInRight{
	0%{opacity: 0; transform: rotate(20deg) translateY(-150%);}
	10%{opacity: 1;}
	100%{opacity: 1; transform: rotate(0deg) translateY(20%);}
}

@-webkit-keyframes characterInEnd {
 0%{-webkit-transform:translateY(8%); transform:translateY(8%);}
 100%{-webkit-transform:translateY(0); transform:translateY(0);}
}
@keyframes characterInEnd {
 0% {-webkit-transform:translateY(8%); transform:translateY(8%);}
 100% { -webkit-transform:translateY(0); transform:translateY(0);}
}

@keyframes fadeInLeft{
	0% {opacity: 0;}
	100% {opacity: 1;}
}
@-webkit-keyframes fadeInLeft{
	0% {opacity: 0;}
	100% {opacity: 1;}
}

@keyframes scaleIn{
	0%{opacity: 0; transform: scale(0.5);}
	50%{opacity: 1;}
	100%{opacity: 1; transform: scale(1);}
}
@-webkit-keyframes scaleIn{
	0%{opacity: 0; transform: scale(0.5);}
	50%{opacity: 1;}
	100%{opacity: 1; transform: scale(1);}
}