@charset "utf-8";

/* ***************************************************
ＨＵＧっと！プリキュア
------------------------------------------------------
お楽しみ用CSS
------------------------------------------------------5%
・640pxまでをスマホとする
・641pxからタブレット／PCととする
・1000pxはPC専用とする
*************************************************** */

/* =============================================
 お楽しみ
============================================= */
/* 0）お楽しみ 共通
---------------------------------------- */
.enjoypage p,
.enjoypage ul,
.enjoypage dl{
	color:#891085;
	text-align: left;
	line-height: 1.6;
}
.enjoy_box + .enjoy_box{
	margin-top: 16%;
}
@media screen and (min-width:641px) {
	.enjoy_box + .enjoy_box{
		margin-top: 10%;
	}
}

/* ページャー */
.enjoy_pager{
	margin: 6% 0;
	text-align: center !important;
}
.enjoy_pager:after{
	content: "";
	display: block;
	clear: both;
}
.enjoy_pager .btn_s a {/* アプリ追加 */
    padding: 3% 0;
    width: 98%;
    box-sizing: border-box;
    margin: 2% 0;
}
@media screen and (max-width:425px) {
	.enjoy_pager .btn_s a{
		font-size: 0.68rem;
	}
}
@media screen and (max-width:879px) {
	.enjoy_pager {
		margin: 5% 0 4%;
	}
	.enjoy_pager li{
		display: inline-block;
		width: 48%;
		margin: 0.5% 0;
	}
	.enjoy_pager .btn_s a::after {
		background: url("../img/common/ico_arrow_wh.png") no-repeat right center;
        background-size: auto auto;
		background-size: 5% !important;
	}
}
@media screen and (min-width:880px) {
	.enjoy_pager{
		margin: 5% 0 4%;
	}
	.enjoy_pager li{
		display: inline-block;
		width: 20%;
		width: 24%;
	}
	.enjoy_pager .btn_s a {
    margin: 5% 0;
		background-color: #fff;
		padding: 5% 0;
	}
}

/*
@media screen and (max-width:640px) {
	.enjoy_pager li{
		display: inline-block;
		width: 28%;
	}
	.enjoy_pager li:first-of-type{
		width: 34%;
	}
}
.enjoy_pager .btn_s a{
	padding: 6% 12% 6% 12%;
	width: 74%;
}
@media screen and (max-width:640px) {
	.enjoy_pager li:first-of-type .btn_s a{
		padding: 5% 12% 5% 12%;
	}
}*/


	
/* １）データ放送
---------------------------------------- */
.db_inner:after{
	content: "";
	display: block;
	clear: both;
}
.data_box p{
	margin-bottom: 3%;
}
.data_box .pict + .pict{
	margin-top: 3%;
}
.data_box ul{
	margin-left: 6%;
}
.data_box li{
	list-style: disc;
}
.data_box li +li{
	padding-top: 1em;
}
.data_box dt{
	color: #e5005e;
	font-weight: bold;
}
.data_box dd{
	margin-bottom: 1em;
}
.data_sbox{
	background-color: #FFF;
	padding: 3%;
	margin-bottom: 6%;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}
.data_sbox p{
	margin-bottom: 0;
}
.db_title{
	margin: 0 auto 2%;
	width: 72%;
}
.db_stitle{
	background: url(../img/common/bg_strred.png);
	box-shadow: 0 0 0 2px #fef4ba, 0 0 0 3px #d5aa59;
	-webkit-border-radius: 100px;
	-moz-border-radius: 100px;
	border-radius: 100px;
	padding: 2% 0;
	margin: 6% auto 4%;
	color: #FFF;
	font-weight: bold;
	font-size:1.25rem; /* 20pt */
}
.db_sstitle{
	text-align: left;
	color: #e5005e;
	font-weight: bold;
	margin: 0 auto 4%;
	line-height: 1;
	font-size:1rem; /* 16pt */
}
.db_stitle_ex{
	margin-top: 0;
}
.data_sbox.ex{
	margin-top: 6%;
	background: url(../img/common/bg_oblpi2.png);
	border: 4px dotted #891085; 
}
.data_sbox p:last-child{
	margin-bottom: 0;
}
.pict_clock{
	width: 90%;
	margin:  0 auto;
}
.txt_hugclock{
	padding-top: 6%;
}
.pict_hugclock{
	width:42%;
	padding: 6% 0 0 2%;
	float: right;
}

@media screen and (max-width:640px) {
	.txt_screen:after{
		content: "";
		display: block;
		clear: both;
	}
	.txt_rule{
		width: 64%;
		float: left;
		padding-top: 6%;
	}
	.pict_rule{
		width:33%;
		padding: 6% 0 0 2%;
		float: right;
	}
}
@media screen and (min-width:641px) {

	.txt_clock{
		text-align: center !important;
	}
	.data_box .pict + .pict{
		margin-top: 2%;
	}
	.data_box ul{
		margin-left: 3%;
	}
	.data_box li{
		list-style: disc;
	}
	.data_box li +li{
		padding-top: 1em;
	}
	.data_box dt{
		color: #e5005e;
		font-weight: bold;
	}
	.data_box dd{
		margin-bottom: 1em;
	}
	.data_sbox{
		background-color: #FFF;
		padding: 3%;
		margin-bottom: 6%;
		-webkit-border-radius: 10px;
		-moz-border-radius: 10px;
		border-radius: 10px;
	}
	.db_title{
		width: 40%;
	}
	.db_stitle{
		padding: 1% 0;
		margin: 4% auto 2%;
	}
	.db_sstitle{
		text-align: left;
		color: #e5005e;
		font-weight: bold;
		margin: 0 auto 2%;
		line-height: 1;
		font-size:1rem; /* 16pt */
	}
	.db_stitle_ex{
		width: 50%;
		margin: 0 auto 2%;
	}
	.data_sbox.ex{
		margin-top: 3%;
	}	
	.pict_screen{
		width:60%;
		float: left;
		vertical-align: top;
	}
	.txt_screen{
		width:35%;
		float: right;
	}
	.txt_rule{
	}
	.pict_rule{
		width: 60%;
		margin: 4% 0 0 12%;
	}
	.pict_clock{
		width: 44%;
	}
	.txt_hugclock{
		padding-top: 0;
	}
	.pict_hugclock{
		width:22%;
		padding: 0;
		margin-top: -5%;
		float: right;
	}

}

/* ２）月額コンテンツ
---------------------------------------- */
.sub_title.mobile{
	margin-bottom: 0;
}
.mobile_box{
	margin-bottom: 6%;
}
.mobile_box.mail{
	background: url("../img/common/enjoyment/mb_pict_mail_sp.png") no-repeat 5% center;
	background-size: auto 100%;
	padding-left: 40%;
}
.mobile_box.machiuke{
	background: url("../img/common/enjoyment/mb_pict_machiuke.png") no-repeat 95% center;
	background-size: auto 100%;
	padding-right: 40%;
}
.mb_stitle{
	margin-bottom: 3%;
}

/* ****************************************
PC・タブレット用 CSS
**************************************** */
@media screen and (min-width:641px) {
	.enjoypage .inner{
		padding: 0 3%;
	}
	.mb_stitle{
		margin-bottom: 3%;
	}
	.mobile_box.mail,
	.mobile_box.machiuke{
		width: 32%;
		margin-bottom: 4%;
		padding: 0 18% 0 0; 
		float: left;
	}
	.mobile_box.mail{
		background: url("../img/common/enjoyment/mb_pict_mail_pc.png") no-repeat 92% center;
		position: relative;
	}
	.mobile_box.mail:after{
		content: "";
		display: block;
		width: 8px;
		height: 100%;
		position: absolute;
		top: 0;
		right: 5.5%;
		background: url("../img/common/line_wavy.png") repeat-y left top;
		background-size: 8px auto;
	}
	.mobile_box.machiuke{
		background: url("../img/common/enjoyment/mb_pict_machiuke.png") no-repeat right center;
	}
	.mb_stitle{
		width: 100%;
	}
	.mobile_box_only{
		background: url("../img/common/bg_oblpi2.png");
		background-size: 20px;
		-webkit-border-radius: 20px;
		-moz-border-radius: 20px;
		border-radius: 20px;
		border:4px solid #d5aa59;
		padding: 1%;
		margin: 0 3%;
		display: table;
		text-align: left;
	}
	.mb_stitle_only{
		display: table-cell;
		vertical-align: middle;
		width: 40%;
		padding:0 2% 0 1%;
		border-right: 2px solid #d6d6d6;
	}
	.mb_stitle_only img{
		max-width:382px;
	}
	.mobile_box_only p{
		display: table-cell;
		width: 43%;
		padding:0 2% 0 2%;
		vertical-align: middle;
	}
	.mobile_box_only div{
		display: table-cell;
		width: 10%;
		vertical-align: middle;
	}
	.mobile_box_only div img{
		max-width: 102px;
	}
}
/* ****************************************
背景 微調整 CSS
**************************************** */
@media screen and (max-width:330px){
	.mobile_box.mail{
		background-size: auto 65%;
	}
	.mobile_box.machiuke{
		background-size: auto 70%;
	}
}
@media screen and (min-width:331px) and (max-width:350px){
	.mobile_box.mail{
		background-size: auto 72%;
	}
	.mobile_box.machiuke{
		background-size: auto 75%;
	}	
}
@media screen and (min-width:351px) and (max-width:370px){
	.mobile_box.mail{
		background-size: auto 78%;
	}
	.mobile_box.machiuke{
		background-size: auto 80%;
		background-position:right center;
	}
}
@media screen and (min-width:371px) and (max-width:400px){
	.mobile_box.mail{
		background-size: auto 85%;
	}
	.mobile_box.machiuke{
		background-position:right center;
	}	
}
@media screen and (min-width:401px) and (max-width:430px){
	.mobile_box.mail{
		background-size: auto 90%;
		background-position:left center;
	}
}
@media screen and (min-width:431px) and (max-width:540px){
	.mobile_box.mail{
		background-size: auto 95%;
		background-position:2.5% center;
	}
}
@media screen and (min-width:541px) and (max-width:640px) {
	.mobile_box.mail{
		background-size: auto 100%;	
	}
	.mobile_box.machiuke{
		background-size: auto 100%;	
	}	
}
@media screen and (min-width:641px) and (max-width:700px){
	.mobile_box.mail{
		background-size: auto 90%;	
	}
	.mobile_box.machiuke{
		background-size: auto 70%;	
	}	
}
@media screen and (min-width:641px) and (max-width:750px){
	.mobile_box.mail{
		background-size: auto 100%;	
	}
	.mobile_box.machiuke{
		background-size: auto 85%;	
	}	
}
@media screen and (min-width:751px) and (max-width:900px){
	.mobile_box.mail{
		background-size: auto 100%;	
	}
	.mobile_box.machiuke{
		background-size: auto 95%;	
	}	
}
@media screen and (min-width:901px){
	.mobile_box.mail{
		background-size: auto 100%;	
		background-position:85% center;
	}
	.mobile_box.machiuke{
		background-size: auto 95%;	
		background-position:95% center;
	}	
}

/* 3）アプリ
---------------------------------------- */
.sub_title.app{
	margin-bottom: 0;
}
.app_box{
	margin-bottom: 6%;
}
.app_box:after{
	content: "";
	display: block;
	clear: both;
}
.app_box .app_txt{
	width: 55%;
	float: left;
}
.app_box .app_pict{
	width: 45%;
	float: right;
}
@media screen and (max-width:640px) {
	.app_box:nth-of-type(even) .app_txt{
		float: right;
	}
	.app_box:nth-of-type(even) .app_pict{
		float: left;
	}
}
.mb_stitle{
	margin-bottom: 3%;
}



/* ****************************************
PC・タブレット用 CSS
**************************************** */
@media screen and (min-width:641px) {
	.app_inner{
		padding: 0 3%;
		font-size: 0;
	}
	.app_inner:after{
		content: "";
		display: block;
		clear: both;
	}
	.app_box{
		display: inline-block;
		width: 48%;
		font-size: 1rem;
		vertical-align: top;
		margin-bottom: 3%;
	}
	.app_box:nth-of-type(odd){
		width:48%;
		padding-right: 2%;
		margin-right:2%;	
		background: url("../img/common/line_wavy.png") repeat-y right top;
		background-size: 8px auto;
	}
	/*
	.mobile_box_only{
		background: url("../img/common/bg_oblpi2.png");
		background-size: 20px;
		-webkit-border-radius: 20px;
		-moz-border-radius: 20px;
		border-radius: 20px;
		border:4px solid #d5aa59;
		padding: 1%;
		margin: 0 3%;
		display: table;
		text-align: left;
	}
	.mb_stitle_only{
		display: table-cell;
		vertical-align: middle;
		width: 40%;
		padding:0 2% 0 1%;
		border-right: 2px solid #d6d6d6;
	}
	.mb_stitle_only img{
		max-width:382px;
	}
	.mobile_box_only p{
		display: table-cell;
		width: 43%;
		padding:0 2% 0 2%;
		vertical-align: middle;
	}
	.mobile_box_only div{
		display: table-cell;
		width: 10%;
		vertical-align: middle;
	}
	.mobile_box_only div img{
		max-width: 102px;
	}
	*/
}


/* 4）webアプリ：HUGっと！チャレンジ
---------------------------------------- */
.br_non {
	display: none;
}

.apr_title {
	position: relative;
	text-align: right;
}
/*.apr_title:before {
position: absolute;
top: 0;
left: 0%;
content: "　";
display: inline-block;
background: url(../img/common/enjoyment/webapri/ico_start.png) 0 50% no-repeat transparent;
background-size: contain;
margin: 0 auto;
vertical-align: middle;
	
width: 20%;
height: 100%;
}*/
.apr_title img {
	/*! width: 80%; */
}

.apri_copy {
	text-align: center !important;
	margin-bottom: 1% !important;
}
.apri_procedure {
		width: 90%;
		margin: 0 auto 2%;
}
.apri_procedure li {
	list-style: none;
	margin-bottom: 1%;
}
.apri_att {
	text-align: right !important;
	font-size: 0.9rem;
	padding-right: 7%;
	box-sizing: border-box;
}

.apri_txt {
	background: url("../img/common/bg_oblpi2.png");
background-size: auto auto;
background-size: 20px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
border: 4px solid #d5aa59;
display: table;
text-align: left;
	
	padding: 4%;
margin: 0;
}
.apri_txt p {
	width: 100%;
	vertical-align: middle;
}
.apri_txt em {
	font-style: normal;
	display: inline-block;
	argin-top: 1%;
}

.apr_onl {
position: relative;
border: none;
width: auto;
padding: 3%;
display: block;
box-sizing: border-box;
}
.apr_onl:before {
	position: absolute;
	top: -20%;
	left: 2%;
content: "　";
display: inline-block;
background: url(../img/common/enjoyment/webapri/ico_start2.png) 0 0 no-repeat transparent;
background-size: auto auto;
background-size: contain;
margin: 0 auto;
vertical-align: middle;
height: 100%;
width: 35%;

}

/* 0402以前 */
/*.apr_title:before {
position: absolute;
top: 0;
left: 0;
content: "　";
display: inline-block;
width: 20%;
background: url(../img/common/enjoyment/webapri/ico_start.png) 0 80% no-repeat transparent;
background-size: auto auto;
background-size: contain;
margin: 0 auto 1%;
vertical-align: middle;
height: 100%;
}
*/
/* 0402以降 */
/*.apri_copy_after:before {
	position: absolute;
top: 0;
left: 0;
content: "　";
display: inline-block;
width: 20%;
background: url(../img/common/enjoyment/webapri/ico_after.png) 0 80% no-repeat transparent;
background-size: auto auto;
background-size: contain;
margin: 0 auto 1%;
vertical-align: middle;
height: 100%;
}*/

.apri_txt_aft p {
	display: block;
}

/* ****************************************
PC・タブレット用 CSS
**************************************** */

@media screen and (min-width:641px) {
.apr_title {
	text-align: center;
}

/* 0402以前 */
/*.apr_title:before {
position: absolute;
top: 2%;
left: -17%;
content: "　";
display: inline-block;
width: 23.5%;
background: url(../img/common/enjoyment/webapri/ico_start.png) 0 50% no-repeat transparent;
background-size: contain;
margin: 0 auto;
vertical-align: middle;
height: 100%;
}*/
/* 0402以降 */
/*.apri_copy_after:before {
position: absolute;
top: 2%;
left: -17%;
content: "　";
display: inline-block;
width: 23.5%;
background: url(../img/common/enjoyment/webapri/ico_after.png) 0 50% no-repeat transparent;
background-size: contain;
margin: 0 auto;
vertical-align: middle;
height: 100%;
}*/

.apr_title img {
	width: 87.5%;
}
	
.apri_procedure {
		width: 100%;
    margin: 0 0 0 3%;}
.apri_procedure li {
	width: 46.25%;
	display: inline-block;
	}
.apri_procedure li img {
	padding: 0 3%;
	box-sizing: border-box;
	display: block;
	}

.apri_txt {	
	padding: 2%;
	width: 100%;
	box-sizing: border-box;
}
.apr_onl {
position: relative;
border: none;
	width: 45%;
padding: 1.5% 0;
display: table-cell;
}
.apr_onl:before {
position: absolute;
top: -25%;
left: 0;
content: "　";
display: inline-block;
width: 45%;
background: url(../img/common/enjoyment/webapri/ico_start2.png) 0 0 no-repeat transparent;
background-size: auto auto;
background-size: contain;
margin: 0 auto;
vertical-align: middle;
height: 100%;
}
.apr_onl p {
	width: 55%;
display: table-cell;

}


/* QRコード表示 PC */
.apri_txt_aft {
	display: table;
	padding: 1% 2%;
}
.apri_txt_aft p {
	display: table-cell;
}
.apri_txt_aft .apr_qr {
	width: 13%;
}
.apri_txt_aft .apri_txt_title {
	width: 37%;
	padding: 0 1%;
	box-sizing: border-box;
}
.apri_txt_aft .txt{
	width: 60%;
	padding-left: 1%;
}

.pleft {
	padding-left: 1%;
}

}

@media screen and (min-width:801px) {
.br_non {
	display: inherit;
}
.apr_onl {
padding: 0 0 0 7%;
}
	
.apr_onl:before {
	top: -31%;
width: 36%;
background: url(../img/common/enjoyment/webapri/ico_start2.png) 0 0 no-repeat transparent;
background-size: auto auto;
background-size: contain;

}
}

	
/* =============================================
 お楽しみ (POPUP用)
============================================= */
.subpage.enjoyment.popup{
	padding-top: 0 !important;
}
.subpage.enjoyment.popup #generalHeader{
	display: none;	
}
.subpage.enjoyment.popup .enjoy_box{
	margin-top: 0;
}
.subpage.enjoyment.popup .contents{
	padding-bottom: 3%;
}