@charset "utf-8";
body{
	margin:0;
	font-family: "Noto Sans JP", sans-serif;
}
/*browser -------------------------------------------------*/
@media screen and (min-width:641px) {
	.sp { display:none; }
	.pc { display:block; }
}

@media screen and (max-width:640px) {
	.sp { display:block; }
	.pc { display:none; }
}

#container {
	overflow:hidden;
}
a{color: #000;}

@media screen and (max-width:640px) {
	img{width: 100%;}
}

/*fv -------------------------------------------------*/
.fv {
	text-align: center;
	position: relative;
	background: #00aaff;
	height: 540px;
}
.fv .fv_bg{
	display: inline-block;
	width: 100%;
	height: 200px;
	border-radius: 99em / 0 0 200% 200%;
	background: repeating-linear-gradient(90deg, #00aaff, #00aaff 60px, #3fbffe 20px, #3fbffe 120px);;
	padding-top: 1%;
}
.fv .fv_img{
	margin: 0 auto;
    width: 980px;
}
.fv .fv_img img{
	max-width: 100%;
	margin: 0 auto;
}
.fv .img_tie-up02 img{
	position: absolute;
    bottom: 0;
    max-width: 980px;
}
.fv .img_tie-up a img{
	position: relative;
	top: 0;
	box-shadow: 0 6px #879db538;
	border-radius: 20px;
	transition: .2s ease-in-out;
	text-decoration: none;
}
.fv .img_tie-up a img:hover {
	top: 6px; /* 元の位置から9px分下げる */
	box-shadow: 0 0 #879db538; /* 影を0pxにする */
}
@media screen and (max-width:640px) {
	.fv {
		height: auto;
		position: static;
		background-image: url("../images/fv/bg_img_sp.png");
		background-position: center;
	}
	.fv .fv_bg{
		display: block;
		background: none;
		height: auto;
	}
	.fv .fv_bg{
		padding-top: 5%;
	}
	.fv .fv_img{
		width: 100%;
		margin: 0 auto;
	}
	.fv .img_tie-up a img{
		width: 90%;
		border-radius: 10px;
		position: static;
		margin-bottom: 5%;
	}
	.fv .img_tie-up02 img{
		position: static;
	}
}


/*other -------------------------------------------------*/
.clear {
	clear:both;
}

.clearfix {
	zoom:1;
}

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

.text_center { text-align:center; }
.bold { font-weight:bold; }
.pink { color:#ff374f; }
.green { color:#189e00; }

.indent-1 {
padding-left:1em;
text-indent:-1em;
}
.indent-2 {
padding-left:2em;
text-indent:-2em;
}
menu,ol,ul {
    list-style: none;
}

/*margin padding -------------------------------------------------*/
.mt1per { margin-top:1%; }
.mt2per { margin-top:2%; }
.mt5per { margin-top:5%!important; }

.ml1em { margin-left:1em; }

.pt2per { padding-top:2%; }

@media screen and (max-width:640px) {
	.mt0per_sp { margin-top:0%; }
	.mt4per_sp { margin-top:4%; }
}
.color_red{
	color: #c00 !important;
}
/*フォント*/
.fontb{font-weight: 700;}

/*margin*/
.mb0{margin-bottom:0 !important;}
.mb05{margin-bottom:5px !important;}
.mb10{margin-bottom:10px !important;}
.mb20{margin-bottom:20px !important;}
.mb30{margin-bottom:30px !important;}
.mb50{margin-bottom:50px !important;}
@media screen and (max-width:640px) {
    .mb10_sp{margin-bottom:10px!important;}
}

.mt0{margin-top:0 !important;}


/*動画スライドショー -------------------------------------------------*/
.movie_out{
	background-color: #fefdeb;
}
.movie {
	display: flex;
	align-items: center;
	height: 340px;
	overflow: hidden;
 }
.slideshow {
	display: flex;
	animation: loop-slide 70s infinite linear 1s both;
	padding: 0;
}
@keyframes loop-slide {
	from {transform: translateX(0);}
	to {transform: translateX(-100%);}
}
.slide_content{
	margin: 0 10px;
}
.slide_content img{
	border-radius: 10px;
}
@media screen and (max-width:640px) {
	.slideshow img{
		width: auto;
	}
	.movie {
		height: 300px;
	}
}

/*アオハルキャンペーン内容 -------------------------------------------------*/
.aoharu{
	background-color: #def4ff;
}
.aoharu_inner{
	width: 900px;
	margin: 0 auto;
	padding: 150px 0 4%;
	text-align: center;
}
.aoharu_inner .box{
	background-color: #fff;
	position: relative;
	padding: 50px 75px 30px;
    border-radius: 20px;
	text-align: center;
}
.aoharu_inner .box h3{
	position: absolute;
	top: -50px;
	left: 50%;
	transform: translate(-50%,-50%);
}
.aoharu_inner .box .left{
	text-align: left;
	font-size: 80%; 
}
@media screen and (max-width:640px) {
	.aoharu_inner{
		width: 95%;
		padding: 100px 0 4%;
	}
	.aoharu_inner img{
		width: 90%;
		margin: 0 auto;
	}
	.aoharu_inner .box{
		margin-bottom: 10%;
		padding: 10% 5% 5%;
	}
	.aoharu_inner .box h3{
		top: -10%;
		left: 0;
		transform: none;
		right: 0;
	}

}
/*たぶ ---------*/
@media only screen and (max-width: 736px){
.tab-2 {
    display: flex;
    flex-wrap: wrap;
    max-width: 500px;
}
.tab-2 > label {
    flex: 1 1;
    order: -1;
    opacity: .5;
    min-width: 70px;
    padding: .5em 1em;
    border-radius: 10px 10px 0 0;
    background-color: #aeadad;
    color: #000;
    font-size: 1.1em;
	font-weight: 700;
    text-align: center;
    cursor: pointer;
}
.tab-2 > label:hover {
    opacity: .8;
}
.tab-2 input {
    display: none;
}
.tab-2 > div {
    display: none;
    width: 100%;
    padding: 0.3em;
    background-color: #fff;
}
.tab-2 label:has(:checked) {
    opacity: 1;
	background-color: #b8e8f2;
}
.tab-2 label:has(:checked) + div {
    display: block;
	border: 2px solid #b8e8f2;
}

}

/*申込み -------------------------------------------------*/
.apply{
	background-color: #ff623d;
}
.apply_inner{
	width: 850px;
	margin: 0 auto;
	padding: 2% 0;
	text-align: center;
}
.apply .apply_contents{
	display: flex;
}
.apply .apply_contents p{
	width: calc(100% / 2 - 10px);
	margin-top: 0;
	padding: 0 5px;
}
.apply p a img{
	position: relative;
	top: 0;
	box-shadow: 0 6px #815e5138;
	border-radius: 20px;
	transition: .2s ease-in-out;
	text-decoration: none;
}
.apply p a img:hover {
	top: 6px; /* 元の位置から9px分下げる */
	box-shadow: 0 0 #815e5138; /* 影を0pxにする */
}
@media screen and (max-width:640px) {
	.apply_inner{
		width: 95%;
	}
	.apply_inner h3{
		margin: 3% 0; 
	}
	.apply_inner h3 img{
		width: 40%;
		max-width: 185px;
	}
	.apply h4{
		font-size: 20px;
	}
	.apply p a img{
		border-radius: 10px;
		box-shadow: 0 3px #815e5138;
	}
	.apply p a img:hover {
		top: 3px; /* 元の位置から9px分下げる */
	}
}

/*動画の詳細 -------------------------------------------------*/
.collab{
	background-color: #fefdeb;
}
.collab_inner{
	width: 900px;
	margin: 0 auto;
	padding: 3% 0;
	text-align: center;
}
@media screen and (max-width:640px) {
	.collab_inner{
		width: 95%;
	}
}
.collab .collab_ttl{
	background-color: #4f4f4f;
    border-radius: 99em;
	color: #fff;
    display: inline-block;
    padding: 1% 5%;
}
@media screen and (max-width:640px) {
	.collab .collab_ttl{
		padding: 1% 8%;
		font-size: 100%;
		margin-bottom: 3%;
	}
	.collab .collab_ttl.comment{
		margin-bottom: 28%;
	}
}
.collab .collab_inner .box{
	background-color: #fff;
	border-radius: 20px;
	text-align: center;
	padding: 3%;
}
.collab .collab_inner .movie_btn a img{
	position: relative;
	top: 0;
	box-shadow: 0 6px #ffdfc9;
	border-radius: 20px;
	transition: .2s ease-in-out;
	text-decoration: none;
}
.collab .collab_inner .movie_btn a img:hover {
	top: 6px; /* 元の位置から9px分下げる */
	box-shadow: 0 0 #ffdfc9; /* 影を0pxにする */
}
@media screen and (max-width:640px) {
	.collab .collab_inner .movie_btn a img{
		width: 70%;
	}
}
.collab .collab_inner .box_comment{
	background-color: #fff;
	border: 1px solid #2f2f2f;
	border-radius: 20px;
	text-align: center;
	padding: 3% 5%;
	position: relative;
	margin-bottom: 70px;
}
.collab .collab_inner .box_comment:last-child{
	margin-bottom: 0;
}
.collab .collab_inner .box_comment .talent_icon{
	position: absolute;
	top: -110px;
    left: 70px;
}
@media screen and (max-width:640px) {
	.collab .collab_inner .box_comment{
		padding: 6% 5%;
	}
	.collab .collab_inner .box_comment .talent_icon{
		left: 2%;
	}
}
.collab  .box_comment h4{
	font-size: 150%;
	margin: 0 0 40px;
}
.collab .box_comment .furigana{
	margin: 0;
	font-size: 50%;
	letter-spacing: .5em;
}
@media screen and (max-width:640px) {
	.collab .box_comment .furigana,
	.collab  .box_comment h4{
		text-align: right;
	}
}
.collab .box_comment .comment_out{
	display: flex;
	flex-wrap: wrap;
	text-align: left;
}
.collab .box_comment .comment_out .comment{
	width: calc(100% / 2 - 20px);
	padding: 0 10px;
	margin-bottom: 10px;
}
@media screen and (max-width:640px) {
	.collab .box_comment .comment_out .comment{
		width: 100%;
		padding: 0;
		margin-bottom: 3%;
	}
}
.collab .box_comment .comment_out h5{
	margin: 0;
	font-weight: 700;
	font-size: 100%;
}
.collab .box_comment .comment_out h5 span{
	background: linear-gradient(transparent 60%, #fffbb1 60%);
}
.collab .box_comment .comment_out h5 small{
	font-size: 80%;
}
.collab .box_comment .comment_out p{
	font-size: 80%;
}

.video {
	position: relative;
	width: 284px;
	padding-top: 56.25%; /* 16:9のアスペクト比 */
	height: 0;
	margin: 0 auto;
}
.video iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
@media screen and (max-width:640px) {
	.video {
		width: 59%;
		padding-top: 100%;
	}
}


/*キャンペーン詳細 -------------------------------------------------*/
.info{
	background-color: #def4ff;
	margin-bottom: 60px;
}
.info_inner{
	width: 900px;
	margin: 0 auto;
	padding: 5% 0;
	text-align: center;
}
@media screen and (max-width:640px) {
	.info{
		margin-bottom: 0;
	}
	.info_inner{
		width: 100%;}
	.info img{width: 100%;}
}
.info_inner .info_ttl{
	background-color: #fff;
	border-radius: 99em;
	border: 1px solid #272727;
	display: inline-block;
	padding: 1% 5%;
}
.info_inner .text_box .day{
	font-size: 150%;
	margin: 0;
}
.info_inner .text_box .indent-1{
	text-align: left;
	font-size: 80%;
}
@media screen and (max-width:640px) {
	.info_inner .text_box {
		width: 95%;
		margin: 0 auto;
	}
	.info_inner .info_ttl{
		padding: 1% 8%;
		font-size: 100%;
	}
}


/*選ばれる理由 -------------------------------------------------*/
.reason{
	background-color: #e8f6e5;
	width: 900px;
	margin: 0 auto;
	text-align: center;
	padding-bottom: 30px;
}
@media screen and (max-width:640px) {
	.reason{
		width: 100%;
		margin: 0 auto 30px;
	}
	.reason img{
		width: 100%;}
	.reason .reason_inner{
		width: 95%;
		margin: 0 auto;
	}
}


/*フッター -------------------------------------------------*/
#footer {
	background: #fff;
	margin: 1% 0 100px;
	padding-top: 1%;
	border-top: 5px solid #a5cf41;
}
#footer ul {
	text-align: center;
	font-size: 13px;
	line-height: 18px;
}
#footer ul li {
	display: inline-block;
	float: none;
	border-right: 1px solid #000;
	padding: 0 5px;
}
#footer ul li a {
	color: #444;
	text-decoration: none;
}
#footer ul li.blnk {
	background: url(../images/icon_blank_s.png) 94% center no-repeat;
	padding-right: 25px;
}
#footer .copyright{text-align: center;}

/*注釈-------------------------------------------------*/
.caution{
	width: 900px;
	margin: 0 auto 40px;
	font-size: 12px;
}
.caution h3,
.caution p{
	margin: 0;
	font-weight: 400;
}
.caution ul{
	padding: 0;
}

.border-t-primary {
    border: none;
	width: 900px;
	margin: 0 auto 40px;
}
@media screen and (max-width:640px) {
	.caution{
		width: 95%;
		margin: 0 auto;
	}
	.border-t-primary {
		width: 100%;
	}
}

/*追従CVボタン -------------------------------------------------*/
.fixed_btn{
	position: fixed;
	bottom: 0; 
	right: 0;
	padding: 15px 40px 10px;
	background-color: #d9d9d980;
    border: none;
	z-index: 1000;
	width: 100%;
}
.fixed_contents{
	display: flex;
	align-items: center;
	justify-content: space-around;
	width: 900px;
    margin: 0 auto;
	text-align: center;
}
@media screen and (max-width:640px) {
	.fixed_btn{
		padding: 15px 10px 10px;
	}
	.fixed_contents{
		width: 100%;
	}
}

/*外部リンク -------------------------------------------------*/
a[target="_blank"].txt_link::after {
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: .1em;
	margin-left: .1em;
    background: url(../../img/common/icon_blank_g.png) no-repeat;
    background-size: contain;
}


/*データプラン料金表 -------------------------------------------------*/
.info .table_ttl{
	background-color: #000;
	border-radius: 10px;
	color: #fff;
	font-weight: 700;
	display: inline-block;
	margin: 0 auto 10px;
	padding: 1.5% 5%;
}
@media only screen and (max-width: 736px){
	.info .table_ttl{
		margin: 0 auto;
	}
}
/* table_data */
.table_data {
	width: 100%;
	border-radius: 20px;
	overflow: hidden;
}

.table_data th{
	padding: 1em;
	border-bottom: 1px solid #DEE1E5;
	width: auto;
}
.table_data td {
	padding: 1em;
	border-bottom: 1px solid #fff;
	width: auto;
}

.table_data thead th {
	color: #fff;
	background: #000000;
	background-clip: padding-box;
}

.table_data tbody th {
	color: #fff;
	background: #62666A;
	text-align: center;
	background-clip: padding-box;
}

.table_data tbody td {
	background: #EFF1F4;
	text-align: center;
	background-clip: padding-box;
}

.table_data tbody td span {
	font-size:  3.0rem;
}

.table_data tbody td .different-price-wrap {
	display: flex;
	align-items: baseline;
	justify-content: flex-end;
	width: 80%;
    margin: 0 0 0 auto;
}
.table_data tbody td .different-price-wrap:first-child{
	margin-bottom: 0.8rem;
}
.table_data tbody td .different-price-wrap + .different-price-wrap {
	border-top: 1px solid #fff;
    padding-top: 0.8rem;
}
.table_data tbody td span.txt-firsttime {
	font-size:  1.6rem;
	margin-right: 1.6rem;
	display: inline-block;
}
.table_data tbody td span.txt-secondtime {
	font-size:  1.8rem;
	margin: 0 auto 0 0;
	display: inline-block;
}
.table_data tbody td span.txt-firsttime {
	font-size:  1.6rem;
	margin: 0 auto 0 0;
	display: inline-block;
}
.table_data tbody td span.txt-secondtime + span{
	display: inline-block;
}
.table_data tbody td span.txt-firsttime  + span{
	font-size:  2.4rem;
	display: inline-block;
}

.table_data tbody .recommend th,
.table_data tbody .emphasis th {
	background: #EA6068;
	position: relative;
	z-index: 0;
}
.table_data tbody .recommend th::before {
	content: "";
	display: inline-block;
	width: 4em;
	height: 2em;
	position: absolute;
	margin: auto;
	top: -10px;
	left: 50%;
	transform: translateX(-50%);
	background: url(../img/common/icon_recommend2022.svg) no-repeat center center/ contain;
	z-index: 1;
}
.table_data tbody .recommend th.noicon::before {
	content: none;
}

.table_data tbody .recommend th.notossm{
	background: #62666A!important;
}
.table_data tbody .recommend td {
	background: #FCE7E8;
}
.table_data .txt_right{
	text-align: right;
}
.table_data .txt_red{
	color: #EA6068;
}
.table_data tbody td .before_price{
	position: relative;
}
.table_data tbody td .color_pink_renew {
	font-size: 18px;
}
.table_data tbody td .color_pink_renew span{
	font-size: 30px;
}
.table_data tbody td .before_price{
	font-size: 15px;
}
.table_data tbody td .before_price span{
	font-size: 20px;
}
.table_data tbody td .before_price::after{
	content: "";
	width: 100%;
	height:1px;
	display: block;
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(50%);
	background: #EA6068;
}
.pct_scrollhint{
   display: none;
}
.color_pink_renew {
    color: #EA6068 !important;
}
.color_pink_renew span {
    font-size: 30px;
}
@media only screen and (max-width: 1020px){
	.table_data {
		width: 200vw;
	}
}
@media only screen and (max-width: 736px){
	.table_data tbody td .different-price-wrap {
		display: block;
	}
	.table_data tbody td span.txt-secondtime {
		font-size:  1.6rem;
		margin-right: 0;
		display: block;
		line-height: 1;
	}
	
	.table_data tbody td span.txt-firsttime {
		font-size:  1.4rem;
		margin-right: 0;
		line-height: 1;
		display: block;
	}
	.table_data tbody td span.txt-secondtime + span,
	.table_data tbody td span.txt-firsttime  + span{
		width: auto;
		display: inline-block;
    }
	.table_scroll{
		overflow: scroll;
	}
   .table_scroll .scroll_bar {
	   overflow-x: auto;
	   overflow-y: hidden;
	   height: 6px;
   }
  
   .table_scroll .scroll_bar .scroll-in {
	   height: 10px;
	   border-radius: 2px;
   }
  
   .table_scroll .scroll_table {
	   overflow: auto;
	   position: relative;
	   padding: .5em 0 1em;
   }
}
	   
	   

/*視聴方法 -------------------------------------------------*/
.movie_link{
	background-color: #fde0d9;
	border-radius: 30px;
	padding: 1% 5% 2%;
	margin-bottom: 50px;
}
.movie_link .movie_link_button{
	display: flex;
	justify-content: center;
}
.movie_link .movie_link_button p:first-child{
    margin-right: 20px;
}
.movie_link .movie_link_button a img{
	box-shadow: 2px 5px 0 #b1cdef;
	border-radius: 20px;
	position: relative;
	top: 0;
	display: block;
	transition: .2s ease-in-out;
}
.movie_link .movie_link_button a img:hover{
	top: 5px; /* 元の位置から9px分下げる */
	box-shadow: 0 0 0 #b1cdef;
}
@media only screen and (max-width: 736px){
	.movie_link{
		padding: 2% 5% 5%;
		margin-bottom: 8%;
	}
	.movie_link .movie_link_button{
		display: block;
	}
	.movie_link h3 img{
		max-width: 191px;
	}
	.movie_link .movie_link_button p:first-child{
		margin-right: 0;
	}
}