@charset "UTF-8";

/**********************************
共通
**********************************/
html{ }

*{
	box-sizing:border-box;
}

.clearfix:after{
	content:"";
	display:block;
	clear:both;
}

.onlySp{
	display:block;
}

.onlyPc{
	display:none;
}

div.inner {
    width: auto;
    margin: 0 auto;
    background-color: #FFF;
    padding: 35px 0px 60px;
    margin-bottom: 50px;
}

.movie_inn{

    width:80%;
    margin: 0 auto;

}

.movie_area iframe,.movie_area video{
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
	border:10px solid #ffe6f7;
}



.youtube_box{
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    margin: 0 auto;
}

.column640{width:90%;margin:0 auto;}
.column480{width:90%;margin:0 auto;}

.ttl{

	padding:1.2rem 1rem;
	background:url("/precure-dreamstage/hugtto_precure/img/ttl_bg.png") repeat;
	font-size:1.6rem;
	color:#ffffbe;

}


.ttl_inn:after {
   content: "";
    position: absolute;
    right: 0;
    bottom: -32px;
    left: 0;
    width: 0px;
    height: 0px;
    margin: auto;
    border-style: solid;
    border-color: #f89cd9 transparent transparent transparent;
    border-width: 30px 20px 0 20px;
    padding-top: 1%;
}

.ttl_inn{
	position: relative;
	padding-left:1.8rem;
	font-weight:700;
}

.ttl_inn:before{
	content:"";
	position: absolute;
	top: 0;
	left: -0.25rem;	
	background:url("/precure-dreamstage/hugtto_precure/img/ttl_icon.png") no-repeat;
	background-position:left center;
	background-size:2rem 2rem;
	width:2rem;
	height:2rem;
	margin-right:0.5rem;
	vertical-align:middle;
}

.cont_inn{
	background:#ffffff;
	border-radius:10px;
	padding:15px;

}

.blk{
	margin-bottom:4rem;
}

/**********************************
コンテンツ部分
**********************************/
.contents{
	background:url("/precure-dreamstage/hugtto_precure/img/contents_bg.jpg") repeat;
}

.common_head{
	display:none;
}

/**********************************
メインビジュアル部分
**********************************/
.mv_area{
	background:url("/precure-dreamstage/hugtto_precure/img/main_areabg.png") no-repeat;
	background-size:cover;
	background-position:center bottom;
	position:relative;
	margin:0 auto 2rem;
	padding-bottom:2rem;
}

.mv_main{
	text-align:center;
	padding-top:3rem;
	position:relative;
	overflow:hidden;
}

.main_visual{
	max-width:110%;
	margin: 0 -1rem;
}

.mv_txt{
	position:absolute;
	top:0;
	width:100%;
	text-align:center;
}

.mv_logo{
	width:50%;
	position:absolute;
	left:1rem;
	bottom:0.5rem;
}

.totopArea{
	width:20%;
	position:absolute;
	right:2rem;
	bottom:2rem;
}



/**********************************
スケジュール部分
**********************************/
.schedule_area{
	margin-bottom:4rem;
}

.schedule_area .lead {
	float:left;
	margin-bottom:1rem;
	color: #e8446b;
	font-weight: bold;
}
.schedule_area .update { float:right; margin:1rem 0; }

.schedule_area table{
	font-size:1.4rem;
	/*border:1px solid #ef5e9b;*/
	width:100%;
}

.schedule_area thead{
	color:#fff;
	background-color:#ea4c73;
	display:none;
}

.schedule_area tr{
	border:1px solid #f3a7c7;
	display:block;
	margin-bottom:2rem;
}

.schedule_area td{
/*	padding:2rem;*/
/*	text-align:right;*/
	display:table;
	border-bottom:1px dotted #f3a7c7;
	width:100%;
	text-align:left;
}

.schedule_area td:last-child{
	border-bottom:none;
}

table td:before {
    content: attr(aria-label);
/*    float: left;*/
/*	margin-right:5rem;*/
	font-weight:bold;
	width:6rem;
/*	height:6rem;*/
	color:#ea4b72;
	background-color:#ffebfa;
	display:table-cell;
	padding:1rem;
}

.schedule_area td p{
	display:table-cell;
/*	width:100%;*/
	padding:1rem;
}


/*.schedule_area td:nth-of-type(1){
	width:15%;
}

.schedule_area td:nth-of-type(2){
	width:10%;
}

.schedule_area td:nth-of-type(3){
	width:10%;
}

.schedule_area td:nth-of-type(4){
	width:25%;
}

.schedule_area td:nth-of-type(5){
	width:25%;
}

.schedule_area td:nth-of-type(6){
	width:10%;
}

.schedule_area td span.contact_name{
	display:table-cell;
	padding-bottom:0.5rem;
}

.schedule_area td:nth-of-type(4) span:nth-of-type(2) a{
	display:block;
	background-color:#fc3689;
	color:#fff;
	border-radius:0.8rem;
	padding:0.5rem 1.5rem;
	position:relative;
	text-decoration:none;
}

.schedule_area td:nth-of-type(4) span:nth-of-type(2) a:after{
	content:"";
	position:absolute;
	display:inline-block;
	width:0.7rem;
	height:0.8rem;
	background-image:url("/precure-dreamstage/hugtto_precure/img/schedule_arrow.png");
	background-repeat:no-repeat;
	background-size:0.7rem 0.8rem;
	top:0.7rem;
	right:0.5rem;
}*/









/**********************************
お知らせ部分
**********************************/
.topics_ttl{
	font-size:4rem;
	color:#e9486f;
	margin-bottom:1rem;
	text-align:center;
	line-height:1.4;
}

.detail{
	font-size:1.8rem;
	text-align:center;
	line-height:1.4;
}

/**********************************
ページトップへ戻るボタンエリア
**********************************/
#js_totop{
	position:fixed;
	right:1rem;
	bottom:5%;
	z-index:100;
}

#js_totop img{
	width:6rem;
}

#js_totop a{
	display:block;
	height:100%;
	width:100%;
}

/**********************************
フッター
**********************************/
footer{
	background:url("/precure-dreamstage/hugtto_precure/img/sp_footer_bg.png") no-repeat;
	background-size:cover;
	background-position:center bottom;
}

.footer_inn{
	padding-top:26.6%;
	position:relative;
}

footer p{
	text-align:center;
	position:absolute;
	bottom:11%;
	color:#ffffff;
	width:100%;
}

.banner_area{
	width:90%;
	margin:100px auto 1rem;
}

/**********************************************************************
モニターの大きさ（PC表示）　768px～
**********************************************************************/
@media screen and (min-width:768px){

/**********************************
共通
**********************************/
.onlySp{
	display:none;
}

.onlyPc{
	display:block;
}

.wrapper{
	overflow:hidden;
}

div.inner {
    width: auto;
    margin: 0 auto;
    background-color: #FFF;
    padding: 50px 0px 70px;
    margin-bottom: 50px;
}


.ttl{
    padding: 0;
    font-size: 2.5rem;
    width: auto;
    padding: 20px;
}

.ttl_inn:after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -58px;
    left: 0;
    width: 0px;
    height: 0px;
    margin: auto;
    border-style: solid;
    border-color: #f89cd9 transparent transparent transparent;
    border-width: 30px 20px 0 20px;
    padding-top: 1%;
}

.ttl_inn{
    max-width: 800px;
    margin: 0 auto;
    padding-left: 3rem;
    font-weight:700;
}

.ttl_inn:before{
	top: 0.3rem;
	background-position:left -0.2rem;
	background-size:2.5rem 2.5rem;
	width:2.5rem;
	height:2.5rem;
}



.cont_inn {
    width: 950px;
    margin: 0 auto;
}

.cont_back02{background-color:#ffedf9 !important;}

.column640{width:640px;margin:0 auto;}
.column480{width:480px;margin:0 auto;}

.blk{
	margin-bottom:5rem;
}

.common_head{
	display:block;
}

/**********************************
メインビジュアル部分
**********************************/
.mv_area{
	margin:0 auto 4rem;
}

.main_visual{
   width: 80% !important;
}

.mv_txt{
    top: 1rem;
    width: 70%;
    margin: 3px auto 0 13%;
}

.mv_txt img {
    width: 100%;
    vertical-align: middle;
    border: 0;
}

.mv_main{
    width: 100rem !important;
    margin: 0 auto;
    position: relative;
    padding-top: 6rem;
}

.mv_logo{
	left:-2rem;
}

.totopArea{
	/*
	right:2.5rem;
	bottom:11rem;
	*/
}

/**********************************
動画部分
**********************************/


.movie_inn{

    width: 640px;
    margin: 0 auto;

}

.movie_area iframe,.movie_area video{
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
	border:10px solid #ffe6f7;
}



.youtube_box{
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    margin: 0 auto;
}
/**********************************
スケジュール部分
**********************************/
.schedule_area table{
	font-size:1.6rem;
	border:3px solid #ef5e9b;
	width:100%;
}

.schedule_area thead{
	color:#fff;
	background-color:#ea4c73;
	display:block;
}

.schedule_area tr{
	border:none;
	display:table;
	margin-bottom:0;
	border-bottom:3px solid #f3a7c7;
	width:100%;
}

.schedule_area tr:last-child{
	border-bottom:none;
}

.schedule_area td{
	padding:1.2rem 0.5rem;
	text-align:center;
}

.schedule_area td{
	padding:1.2rem 0.5rem;
	text-align:center;
	line-height:1.4;
	display:table-cell;
	border-bottom:none;
}

table td:before {
	display:none;
}

.schedule_area td p{
	padding:0;
	display:inline;
}

.schedule_area td:nth-of-type(1){
	width:10%;
	padding:1.2rem 0.5rem;
}

.schedule_area td:nth-of-type(2){
	display:table-cell;
	width:12%;
}

.schedule_area td:nth-of-type(3){
	width:15%;
}

.schedule_area td:nth-of-type(4){
	width:auto;
}

.schedule_area td:nth-of-type(5){
	width:26%;
}

.schedule_area td:nth-of-type(6){
	width:13%;
}

/*.schedule_area td:nth-of-type(4) span:nth-of-type(2) a{
	padding:0.5rem 3.5rem 0.5rem 1.9rem;
}

.schedule_area td:nth-of-type(4) span:nth-of-type(2) a:after{
	top:0.9rem;
	right:0.5rem;
}*/






/**********************************
バナーエリア
**********************************/

.banner_area {
	width:320px;
	margin: 200px auto 0;
}


/**********************************
お知らせ部分
**********************************/
.topics_ttl{
	font-size:7rem;
	margin-bottom:1rem;
	line-height:1.4;
}

.detail{
	font-size:2.5rem;
	line-height:1.4;
}

/**********************************
ページトップへ戻るボタンエリア
**********************************/
#js_totop img{
	width:100%;
}

/**********************************
フッター
**********************************/
footer{
	background:url("/precure-dreamstage/hugtto_precure/img/pc_footer_bg.png") no-repeat;
	background-size:100%;
	background-position:center bottom;
}

.footer_inn{
	padding-top:13.73%;
}



footer p{
	font-size:1.1rem;
	bottom:4%;
}


}





.gray{color:#bbb;background-color:#f6f6f6 !important;font-size:0.785em ;}



@media screen and (min-width:768px){
.logodream {
width: 44% !important;
position: absolute;
z-index: 1000;
bottom: -2px;
left: 7%;
}


.scBtn {
    width: 13%;
    position: absolute;
    z-index: 1001;
    bottom: 30px;
    right: 257px;
}

}

 @media screen and (max-width:767px) {
.logodream {
    width: 60% !important;
    position: absolute;
    z-index: 1000;
    bottom: -12px;
    left: -1%;
}

.scBtn {
    width: 20%;
    position: absolute;
    z-index: 1001;
    bottom: 12px;
    right: 11%;
}
}


@media screen and (min-width:768px){
.logodream {
width: 44% !important;
position: absolute;
z-index: 1000;
bottom: -2px;
left: 7%;
}


.scBtn{ width: 22%;
position: absolute;
z-index: 1001;
bottom: 50px;
right: 229px;
}

}

 @media screen and (max-width:767px) {
.logodream {
    width: 60% !important;
    position: absolute;
    z-index: 1000;
    bottom: -12px;
    left: -1%;
}

.scBtn {
    width: 37%;
    position: absolute;
    z-index: 1001;
    bottom: -2px;
    right: 2%;
}
}