@charset "UTF-8";
/* CSS Document */

/*************************************************************************************************************************
* デフォルト：640px以下用の記述
*************************************************************************************************************************/
#cdnPage{ background: #f1f4f8; }

/* subMain */
#cdnPage .subMain{ padding-bottom: 60px;}
#cdnPage .subMain .subTxt p{ font-weight: bold;}
#cdnPage .subMain .btn-area{ max-width: 400px; margin-top: 26px; font-family:"Hiragino Sans", sans-serif;}
#cdnPage .subMain .btn-area > span{ display: table; margin: 0 auto 8px; padding: 0 26px; position: relative; font-size: 18px; font-weight: 700; color: #FFFB00;}
#cdnPage .subMain .btn-area > span::before,
#cdnPage .subMain .btn-area > span::after{ content: ""; display: block; background: url("/cdn/img/submain_txt.svg") no-repeat center /contain; width: 20px; height: 18px; position: absolute; top: 8px;}
#cdnPage .subMain .btn-area > span::before{ left: 0; transform: scale(-1,1);}
#cdnPage .subMain .btn-area > span::after{ right: 0;}
#cdnPage .subMain .btn-area > span > span{ font-size: 16px;}
#cdnPage .subMain .yellow_btn{ background: url("/cdn/img/submain_arrow.svg") no-repeat right 30px center /9px auto; background-color: #FBB500; width: 100%; max-width: 400px; height: 58px; padding: 0 10px; font-size: 20px; font-weight: 700; color: white; line-height: 58px; border-bottom: #FB8700 4px solid; border-radius: 0; transition: all 0.3s ease-in-out 0s;}
#cdnPage .subMain .yellow_btn:hover{ background-color: #FFC224;}
@media print, screen and (max-width:641px) {
	#cdnPage .subMain .btn-area > span{ font-size: 16px; }
	#cdnPage .subMain .btn-area > span > span{ font-size: 14px;}
	#cdnPage .subMain .btn-area > span::before,
	#cdnPage .subMain .btn-area > span::after{ top: 4px;}
	#cdnPage .subMain .yellow_btn{ height: 48px; font-size: 16px; line-height: 48px;}
}

#cdnPage .featureBox li:before{ width: 120px;}
#cdnPage .featureBox li:nth-child(1):before{ background: url(../../cdn/img/offer_txt01.png) no-repeat; background-size: contain; }
#cdnPage .featureBox li:nth-child(2):before{ background: url(../../cdn/img/offer_txt02.png) no-repeat; background-size: contain; }
#cdnPage .featureBox li:nth-child(3):before{ background: url(../../cdn/img/offer_txt03.png) no-repeat; background-size: contain; }
#cdnPage .floatBox img{ width: 260px; margin:-10px auto 0!important; }

#cdnPage .recommend{ background: white; max-width: 1060px; margin: 30px auto 0; padding: 30px 20px; border-radius: 5px; }
#cdnPage .recommend p{ font-size: 20px; font-weight: bold; text-align: center; letter-spacing: 1px;}
#cdnPage .recommend ul{ display: flex; flex-wrap: wrap; margin-top: 6px; font-size: 14px; }
#cdnPage .recommend li{ background: url(/common/img/icon_ok.png) no-repeat left 4px /20px 16px; width: 100%; margin-top: 10px; padding-left: 34px;}

#cdnPage #feature{ background: white; }
#cdnPage .itemList ul{ display: flex; justify-content: center; flex-wrap: wrap;}
#cdnPage .itemList li{ float: none;}
#cdnPage .itemList li img{ margin-bottom: 12px;}

#cdnPage #plan .wrap{ padding-bottom: 0!important;}
#cdnPage #plan .detail{ display: flex; justify-content: center; flex-wrap: wrap; margin-top: 66px;}
#cdnPage #plan .detail > li{ width: 100%;}
#cdnPage #plan .detail > li:not(:first-child){ margin-top: 10px;}

#cdnPage #plan .detail > li > div{ background: white; overflow: hidden; border-radius: 4px; border: #ddd 1px solid;}
#cdnPage #plan .detail .tit{ background: #00a1e6; padding: 14px 20px 20px; color: white; font-size: 24px; font-weight: bold; text-align: center;}
#cdnPage #plan .detail .tit span{ display: table; background: white; width: 100%; max-width: 160px; margin: 8px auto 0; padding: 5px 10px; color: #00a1e6; font-size: 14px; font-weight: normal; line-height: 1; text-align: center; border-radius: 20px;}

#cdnPage #plan .detail .txt{ padding: 18px 20px 22px; text-align: center; }
#cdnPage #plan .detail .price{ color: #00a1e6;}
#cdnPage #plan .detail .price > span{ display: inline-block; margin-right: 4px; font-weight: bold;}
#cdnPage #plan .detail .price span > span{ display: inline-block; margin-right: 2px; font-size: 30px; line-height: 1;}

#cdnPage #plan .detail .txt ul{ padding-bottom: 20px; margin: 10px 0 20px; color: #898989; font-size: 13px; border-bottom: #ddd 1px solid;}
#cdnPage #plan .detail .txt li{ margin-top: 8px; }
#cdnPage #plan .detail .txt li span{ display: inline-block; margin-left: 4px; color: #333; font-weight: bold; }
#cdnPage #plan .detail .txt .btn{ background: #00a1e6; width: 200px; margin: 0 auto;}

#cdnPage #plan .detail .light{ position: relative;}
#cdnPage #plan .detail .light::before{ content: "人気プラン"; display: block; background: url("/common/img/icon_crown.png") no-repeat center top /18px auto; padding: 15px 0 0; position: absolute; top: -46px; left: 50%; color: #616dd8; font-size: 12px; -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0);}
#cdnPage #plan .detail .light .tit,
#cdnPage #plan .detail .light .txt .btn{ background: #616dd8;}
#cdnPage #plan .detail .light .tit span,
#cdnPage #plan .detail .light .price{ color: #616dd8;}

#cdnPage #plan .planTable{ min-width: 800px;}
#cdnPage #plan .planTable th,
#cdnPage #plan .planTable td{ font-size: 13px;}
#cdnPage #plan .planTable thead th{ width: 25%!important; }
#cdnPage #plan .planTable tbody td p{ margin-bottom: -4px; color: red; font-size: 12px; font-weight: bold;}
#cdnPage #plan .planTable tbody td span > span{ display: inline-block; margin-right: 2px; font-size: 26px;}

#cdnPage .white_area{ background: white; padding: 30px 0; border:#eee 1px solid;}
#cdnPage .white_area > div{ max-height: 700px; padding: 0 20px; overflow-y: scroll;}
#cdnPage .white_area .tit{ font-size: 16px; }
#cdnPage .white_area .tit:not(:first-of-type){ margin-top: 30px; }

#cdnPage #function .planTable{ min-width: 800px; }
#cdnPage #function .planTable th,
#cdnPage #function .planTable td{ font-size: 13px;}
#cdnPage #function thead th{ width: 30%;}
#cdnPage #function thead .txt{ width: 40%;}
#cdnPage #function tbody .txt{ font-size: 12px!important; text-align: left;}

#cdnPage #entryArea{ background: #f1f4f8;}
#cdnPage #entryArea .area ul{ background: white;}


/*************************************************************************************************************************
* 641px以上用の記述
*************************************************************************************************************************/
@media print, screen and (min-width:641px) {

	#cdnPage .offer .secTit{ font-size: 26px;}
	#cdnPage .recommend{ margin-top: 50px; padding: 30px 60px 40px; }
	#cdnPage .recommend p{ font-size: 22px; }
	#cdnPage .recommend ul{ font-size: 16px; }
	#cdnPage .recommend li{ width: 50%; margin-top: 18px; background-position: left 6px; }

	#cdnPage .itemList li img{ height: 68px; margin-bottom: 16px;}
	#cdnPage #plan .detail > li{ width: 49%; }
	#cdnPage #plan .detail > li:nth-child(2){ margin-top: 0; margin-left: 2%;}
}


/*************************************************************************************************************************
* 980px以上用の記述
*************************************************************************************************************************/
@media print, screen and (min-width:980px){

	#cdnPage .floatBox{ padding-right: 20px!important;}
	#cdnPage .floatBox .txt{ width: 70%!important;}
	#cdnPage .floatBox img{ width: 28%!important; max-width: 300px; margin-top: 60px!important; }

	#cdnPage #plan .detail{ justify-content: space-between;}
	#cdnPage #plan .detail > li{ width: 32.16%; margin: 0!important;}
	#cdnPage #plan .detail .tit{ padding: 18px 20px 22px; }
	#cdnPage #plan .detail .tit span{ margin-top: 12px; }
	#cdnPage #plan .detail .txt{ padding: 24px 30px 30px; }
	#cdnPage #plan .detail .txt ul{ padding-bottom: 28px; margin: 16px 0 30px; }
	#cdnPage #plan .detail .txt .btn:hover{ background: #00adf7;}

	#cdnPage #plan .planTable th,
	#cdnPage #plan .planTable td{ font-size: 15px;}
	#cdnPage #plan .planTable tbody td p{ font-size: 14px; }

	#cdnPage .white_area{ padding: 40px 0; }
	#cdnPage .white_area > div{ max-height: 860px; padding: 0 40px; }
	#cdnPage .white_area .tit{ font-size: 18px; }
	#cdnPage .white_area .tit:not(:first-of-type){ margin-top: 40px; }
	#cdnPage .planTable th,
	#cdnPage .planTable td{ font-size: 15px;}
}