@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap');

/* ==========================================================================
共通
========================================================================== */
a {
	color: #1e9ac7;
}
a.a_txt{color: #ff2d30!important;text-decoration: underline;}
a.a_txt:hover{color: #262626!important;}
.opacity:hover, a img:hover {
	opacity: .6;
	transition: .3s;
}
img {
    max-width: 100%;
}
section + section{margin-top:4em!important; }
.contents {
	width: 100%;
	margin: 0 auto;
	color: #FFF;
	background-image:url(../images/bg_01.png);
	background-position: center top;
	background-size: auto;
	background-repeat: no-repeat;
	    background-attachment: fixed;
	padding-bottom: 2em;
}
.contents.hl{padding-top: 200px;
	margin-top: -120px;}
.contents + .contents {    padding: 60px 0 0 ;
    margin-top: 0;}
.contents + .contents.last{padding-bottom: 60px;}
.inner {
	width: 85%;
	margin: 0 auto;
	max-width: 1100px;
	text-align: center;
}
.bgOuter {
	padding-bottom: 0;
	background-image: url(../images/bg_outer.png);
	background-position: center bottom;
	background-size: 100% auto;
	background-repeat: no-repeat;
}
.cpr.en{    background: -webkit-linear-gradient(45deg, hsla(26, 100%, 62%, 1) 0%, hsla(333, 100%, 51%, 1) 100%);
    padding: 20px 0;
    text-align: center;
    color: #fff;font-size: 0.9em;}

.notes {
  font-size: 0.8em;
  line-height: 1.4em;
  margin: 10px auto;
}



/*--------------------------------------------
アンカーリンク位置修正
--------------------------------------------*/

#ticket,#d_max_area,#d_card_area{scroll-margin-top: 80px;}


/* ==========================================================================
section
========================================================================== */
section {
	width: 100%;
	font-family: 'Noto Sans JP', sans-serif;
	overflow: hidden;
}

section.bg_block00 {
	background-color: unset;;
	max-width: 1100px;
	margin: 0 auto;
	padding: 40px 50px 50px;
}

section.bg_block {
	background-color: rgb(16 16 16 / 87%);
	max-width: 1100px;
	margin: 0 auto;
	padding: 40px 50px 50px;
}
section.bg_block02 {
	background-color: rgba(255, 255, 255, 0.8);
	max-width: 1100px;
	margin: 0 auto;
	padding: 40px 50px 50px;
	color: #292929;
}
section.bg_block03 {
	background-color: #000;
	max-width: 1100px;
	margin: 0 auto;
	padding: 40px 50px 50px;
	color: #292929;
}

section .inner {
	margin: 40px auto 0;
	width: auto;
}
section {
	position: relative;
	width: 100%;
	background-size: 100% auto;
	background-repeat: no-repeat;
	padding: 0 0 5%;
}

.title02 {
	position: relative;
	padding-bottom: 0.5em;
	font-size: 2em;
	text-align: center;
	font-weight: 800;
	letter-spacing: 0.02em;
	max-width: 1000px;
    margin: 0 auto;
}

.title02 span {
	position: relative;
	z-index: 2;
}

.title02::before {
	content: attr(data-en);
    position: absolute;
    top: 0.5em;
    left: 50%;
    transform: translateX(-50%);
    color: rgb(255 0 0);
    font-size: 0.6em;
    font-family: "noto-serif", serif;
	font-weight: 400;
}

.title02::after {
	         content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    height: 1px;
    background-color: rgb(255 0 0);
    right: 0;
    margin: 0 auto;
}

/* ==========================================================================
mv_area
========================================================================== */
h1 + p{text-align: center;color: #fff;margin: 0 auto 2em;    background: #000000b5;
    padding: 1em;}
.seat_img{max-width: 800px;margin: 0 auto;width: 90%;text-align: center;}

.mv_area {
	    position: relative;
    width: 100%;
    background-size: cover;
    background-repeat: no-repeat;
  /*  background-image: url(../images/mv_area.png);*/
    background-position: center center;
	background: #0000007a;
    padding: 40px 0 20px;
	    margin-top: 80px;
}
.mv_area h1 {
	margin: 0 auto;
    color: #ffffff;
    font-weight: 700;
    text-align: center;
    font-size: clamp(1.2em, 3vw, 30px);
    position: relative;
    font-family: "biz-udpgothic", sans-serif;
}
.mv_area h1 span.tx_bl{display: grid;
    background: #000;
    color: #fff;
    width: 60%;
    margin: 0 auto;
    font-weight: 800;
    font-size: 0.9em;
    letter-spacing: 0.02em;}
.mv_area .kv{max-width: 1000px;margin: 0 auto;}


/* ==========================================================================
料金　PC
========================================================================== */
#ticket{    background: #0000007a;}
#ticket h3{font-weight: bold;margin-bottom: 0.2em;}
#ticket p + h3{margin-top: 2em;}
h3 span.str{font-size: 1.1em;border-bottom:4px double red;display: inline-block;padding-bottom: 0;}
.table_area{background: #e5e5e5;
    padding: 4px;
    max-width: 800px;
    margin: 1em auto;
width: 90%;}

#ticket table , #ticket td, #ticket th {
	border: 1px solid #595959;
    border-collapse: collapse;
    width: 100%;
    margin: 0 auto 0em;
    font-size: 0.95em;
    background: #e5e5e5;
    color: #000;
}
#ticket table tr:nth-child(1) td:nth-child(1){min-width: 2em;}
#ticket table tr:nth-child(1) td:nth-child(2){min-width: 8em;}

#ticket td, #ticket th {
	padding: 3px;
	width: 50%;
	height: 25px;    text-align: center;
    vertical-align: middle;
}
#ticket th {
	background: #f0e6cc;
}
#ticket .notes{width: 100%;max-width: 800px;width: 90%;}

/*装飾*/
#ticket table .t_black{background: #181818;
    color: #fff;}
#ticket table .t_price{text-align: right;padding-right: 20%;}

.even {
	background: #fbf8f0;
}
.odd {
	background: #fefcf9;
}

/* ==========================================================================
購入方法　PC
========================================================================== */

#buy_area h3{font-size: 1.4em;
    font-weight: bold;
    background: #fff;
    line-height: 1.35em;
    padding: 0.5em 0 0.2em;}
#buy_area h3 span{    background-image: linear-gradient(90deg, rgb(255 61 0), rgb(205 0 0));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;}
#buy_area h4{width: 80%;
    max-width: 700px;
    margin: 2em auto 1em;
    font-size: 1.3em;
    font-weight: bold;
    border: solid #000 1px;}
#buy_area h4 + p.fw-bold{font-size: 1.2em;}
p.info_day{color: #000;
    text-align: center;
    margin: 0 auto 1em;
    font-size: 1.4em;
    max-width: 600px;
    font-weight: bold;}

/*.btn_area.d_card{flex-flow: column;}*/
.btn_area.d_card li{width: 100%;max-width: 600px;text-align: center;}
/*.btn_area.d_card li + li{margin-top: 2em;}*/
.btn_area.d_card .button.portal a{text-align: center;line-height: 1.25em;}
.btn_area.d_card li p{margin-top: 0.8em;color: #000;}
.btn_area.d_card li p a{text-decoration: underline;color: #fff;}
.btn_area.d_card li ruby rt{text-align: right;font-size: 0.6em;}


/* ==========================================================================
「ドコモ MAX」 「ドコモ ポイ活 MAX」　PC
========================================================================== */
.lead_h{font-size: 1.3em;
    font-weight: 800;}
.user{    max-width: 600px;
    margin: 0 auto;
    border: 1px solid #000;
padding: 1em 1em 1.5em;width: 90%;}
.user + .user{margin-top: 2em;}
.user h4{text-align: center;
    font-weight: bold;
    font-size: 1.1em;
    margin-bottom: 0.5em;}

/*btn_ドコモMAX詳細はこちら*/
.d_max_info{    border-radius: 6px;
    background: #ffffff;
    padding: 1em;
    max-width: 450px;
    display: block;
    margin: 2em auto 0;
    color: #f93600;
    border: solid #f93600 1px;
width: 90%;}

/* ==========================================================================
info
========================================================================== */
.info_box{    padding: 2em 0;
    background: #e5e5e5;
    margin: 1em auto;
color: #000;}
.info_box + .info_box{margin-top: 2em;}
.info_box .notes{margin-top: 2em;max-width: 700px;text-align: left;}
.info_box ul.notes li{text-indent: -1em;padding-left: 1em;}
/* ==========================================================================
fix-content　下部追従
========================================================================== */
.fix-content {
	bottom: 0;
	left: 0;
	z-index: 998;
	width: 100%;
	text-align: center;
	background-color: rgba(0, 0, 0, 0.7);
	margin: 0 auto;
	padding-top: 10px;
}
.fix-content_bl {
	position: fixed;
	opacity: 1;
	display: block;
}
.fix-content img {
	width: auto;
}
.scrollTop {
	position: fixed;
	right: 0;
	bottom: 130px;
	z-index: 998;
	display: none;
}
.fix-content .fix-btn {
	/* background-color: rgba(0, 0, 0, 0.7);*/

}

.under_btn p{    font-size: 1em;
    color: #fff;
    font-weight: bold;
    padding: 0.5em 0 3px;}
.fix-content .fix_ul {
	display: flex;
	max-width: 1000px;
	margin: 0 auto;
	padding-bottom: 10px;
}

.fix-content .fix_ul li {
	width: 50%;
	margin: 0 auto;
	padding: 0 .3em;
}

.blue-btn a {
 line-height: 100%;
 background: linear-gradient(90deg, #3ccdc4 0%, #2871fa 100%)!important;
}
.btn_purple {
	background-image: -moz-linear-gradient(0deg, rgb(40, 0, 200) 0%, rgb(120, 3, 175) 55%, rgb(200, 5, 150) 100%) !important;
	background-image: -webkit-linear-gradient(0deg, rgb(40, 0, 200) 0%, rgb(120, 3, 175) 55%, rgb(200, 5, 150) 100%) !important;
	background-image: -ms-linear-gradient(0deg, rgb(40, 0, 200) 0%, rgb(120, 3, 175) 55%, rgb(200, 5, 150) 100%) !important;
}
.btn_orange {
	background-image: -moz-linear-gradient(0deg, rgb(246 117 7) 0%, rgb(236 0 64) 100%);
	background-image: -webkit-linear-gradient(0deg, rgb(246 117 7) 0%, rgb(236 0 64) 100%);
	background-image: -ms-linear-gradient(0deg, rgb(246 117 7) 0%, rgb(236 0 64) 100%);
}
@media screen and (max-width: 812px) {
	.fix-content{padding: 5px 0 10px;}
	.fix-content .fix-btn a {
		font-size: 0.8em;
		height: 3.5em;
	}
	.fix-content .fix-btn a.btn_max{height: 5em;}
	.fix-content .fix-btn a span.btn-s {
		font-size: 1em;
	}
	.fix-content .fix_ul {
		display: block;
		width: 100%;
		padding: 0;
	}
	.fix-content .fix_ul li {
		width: 100%;
	}
}
@media screen and (max-width: 480px) {
	.fix-content .fix-btn a.btn_max{height: 4.5em;}
}

@media screen and (max-width: 812px) {
	
	.method_title {
		font-size: 20px;
		margin-bottom: 25px;
	}
	.btn a {
		margin-top: 20px;
		padding-right: 0.5em;
		font-size: 13px;
		font-weight: bold;
	}
	.btn a span {
		margin-left: 5px;
	}
	.btn.small {
		margin-left: auto;
		margin-right: auto;
	}
	section#osusume .inner, section#method .inner {
		padding: 0 5%;
		;
	}
	
	.premium {
		width: 60%;
		margin: 30px auto;
	}
		
	.btn.small {
		margin-top: 20px;
	}
	h2 picture img {
		width: 85%;
	}
	
	.bn_area p{color: #fff;font-weight: bold;font-size: 0.8em;}
	
/* ==========================================================================
sp section
========================================================================== */
	section {
		position: relative;
		background-size: 100% auto;
		background-repeat: no-repeat;
	}
	
	.inner {
		width: 100%;
		padding: 0 5%;
	}
	
	.bg_block .inner,.bg_block02 .inner {
		padding: 0;
		margin-top: 30px;
		font-size: 0.9em;
	}
	section.bg_block {
		        padding: 5% 4% 5%;
        margin-bottom: 0;
        width: 100%;
	}
	section.bg_block02 {
		padding: 2%;
		margin-bottom: 0;
		width: 100%;
	}
	section.bg_block03{        padding: 0;
        border: 1px solid #919191;
        width: 100%;
        margin: 0 auto;}
	.contents.hl{margin-top: 20px;padding-top: 0;}

	.contents {
		
		padding-bottom: 30px;
		margin-top: 0px;
		background-image: url(../images/bg_sp_01.png);
		background-size: 100% auto;
	}
	.contents + .contents{padding: 20px 0 50px;}
	.title02{font-size: 1em;}
	section + section {
    margin-top: 2em !important;
}
/* ==========================================================================
sp mv_area
========================================================================== */
	.mv_area {
		/*background-image: url(../images/mv_area.png);*/
		background-size: cover;
		background-position: left bottom;
		padding-top: 1px;
		padding-bottom: 00;
		line-height: 1.35em;
		font-size: 0.9em;
	}
	.mv_area h1 {              
		margin-top: 30px;
		margin-bottom:0;
		padding-right: 0;
		width: 100%;margin: 10px auto 0;
		font-size: 1.1em;
		padding: 10px 0;        line-height: 1.35em;
	}
	.mv_area h1 span.tx_bl{font-size: 1em;padding: 0.2em 0;}
	
	h1 + p{font-size: 0.85em}
	
	.button.portal a:after{right: 1em;}
	
/* ==========================================================================
sp 料金
========================================================================== */
#ticket{font-size: 0.8em;}
	#ticket table .t_price{padding-right: 15%;}
	
/* ==========================================================================
購入方法　sp
========================================================================== */
	#buy_area h3{font-size: 1.1em;}
	#buy_area h3 + p{font-size: 1.1em;}
	#buy_area h4 + p.fw-bold{font-size: 1.1em;}
	.btn_area.d_card li p{font-size: 1.2em;}
	
	.btn_area.d_card{font-size: 0.8em;margin: 2em auto 0;}
	.btn_area.d_card .button.portal a{padding: 10px;font-size: 14px;}
	.button.portal a:after{right: 1em;}
	
/* ==========================================================================
「ドコモ MAX」 「ドコモ ポイ活 MAX」sp
========================================================================== */
	.lead_h{font-size: 1em;}
	.info_box{font-size: 0.9em;}
	.notes{font-size: 11px;text-align: left;padding: 0 5px;width: 90%;}
	
	.user{padding: 1em 0.5em 1.5em;width: 96%;}
	.button.portal a.btn_gold{font-size: 1em;}
	
/* ==========================================================================
sp 概要
========================================================================== */
/* ==========================================================================
  sp fix-content
========================================================================== */
	.scrollTop img {
		width: 80px;
		display: none;
	}
	.scrollTop a img:hover {
		opacity: 1;
	}
	.scrollTop {
		text-align: right;
		bottom: 90px;
	}
	.fix-content .fix-btn {
		/*  background-color: rgba(0, 0, 0, 0.9);*/
		padding: 5px 2% 0;
	}
	.under_btn p {
    font-size: 0.7em;
    padding: 0.5em 0 0;
}
}
@media screen and (min-width: 813px) {
	.is-sp {
		display: none;
	}
}


@media screen and (max-width: 812px) {
.js-fixed-area {
  position: relative;
}
.js-fixed-elm {
  position: absolute;
  top: 0;
	right: 0;
  left: 0;
}
	.bg_block02 .is-fixed{background: #d0d0d0;}
	.bg_block .is-fixed{ background: #3f3f3f;}
.js-fixed-elm.is-fixed {
  position: fixed;
        z-index: 998;        padding-bottom: 10px;
       
	}
	.is-fixed h2{padding-top: 80px;}
}
.is-hidden{display: none !important;}
.under_btn .hide {
 display: none;
}