@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Jost:wght@600&family=M+PLUS+1p:wght@400;500;700&display=swap');

/* ===================================================
 Body
=====================================================*/
html{
	background:#FFF;
}
body{
	margin:0 auto;
	padding:0;
	background:#FFFFFF;
	text-align:left;
	color:#333;
	font-family:'M PLUS 1p', sans-serif;
	font-size: 62.5%; /*1em=10px*/
	-webkit-text-size-adjust: 100%;
	overflow-x:hidden;
}

a{color:#333;}

.mt2 {margin-top:2%}
.mt5 {margin-top: 5%;}
.mt10 {margin-top: 10%;}
.barcode {margin: 5% 0 13% 0;}

/* ===================================================
 Reset
=====================================================*/
html {overflow-y: scroll;}
div, dl, dt, dd, ul, ul li, h1, h2, h3, h4, h5, h6,
pre, form, fieldset, input, textarea, p, blockquote, th, td,
section, nav, article, aside, hgroup, header, address,
figure, figcaption, ul, ol {margin: 0; padding: 0;}
address, caption, cite, code, dfn, em, strong, th, var {font-style: normal; font-weight: normal;}
table{ border-collapse: collapse; border-spacing: 0;}
caption, th {text-align: left;}
q:before ,q:after {content: '';}
object, embed {vertical-align: top;}
hr, legend {display: none;}
h1, h2, h3, h4, h5, h6 {font-size: 100%; font-weight: normal;}
img, abbr, acronym, fieldset {border: 0;}
img {vertical-align: top; -ms-interpolation-mode: bicubic;}
ul li, ol li {list-style-type: none; margin: 0px; padding: 0px;}
img {max-width : 100%; border: 0}


/* ===================================================
障害お知らせ
=====================================================*/
div.attention{
border: solid 3px #FF0000;
margin: 1%;
padding: 2%;
text-align:left;
}

.oshirase{
font-size: 120%;
line-height: 190%;
color:#FF0000;
}

/* ===================================================
for SP
=====================================================*/
p{font-size: 1.4em; line-height: 1.8}

.content{margin: auto; width: 100%}
.content .wrap{padding: 0 4%; box-sizing: border-box; width: 100%}
.content .wrap.top_margin{padding: 2% 4% 0 4%}
.content .wrap.last{padding: 2% 4% 12% 4%}

.btn_box h3{
color: #000;
font-size: 2.4em;
font-weight: bold;
text-align: center;
margin-bottom: 0.7em;
line-height: 1.4;
}
@media screen and (max-width: 374px) { 
.btn_box h3 span{letter-spacing: -0.05em;}
}
.btn_box h3 span.pre{font-size: 80%; font-weight: normal; white-space: nowrap}
.btn_box h3 span.smart{color: #9c6e00}
.btn_box h3 span.onde{color: #ff6600}
.btn_box h3 span.myuta{color: #448aca}

.content p.kome{margin-top: 1.5em; text-indent: -1em; margin-left: 1em; font-size: 1.2em}
.content p.kome.sec{margin-top: 0.3em}
.content p.koumoku{
	line-height: 1.6;
    font-size: 1.6em;
	margin-top:1em;
	margin-bottom: 0.5em;
	padding-left:1.2em;
	position:relative;
	color: #000000
}
.content p.koumoku span{display: block}
.content p.koumoku:before{
	content:'';
	width:0.9em;
	height:0.9em;
	border-radius: 50%;
	position:absolute;
	top:0.4em;
	left:0;
	background-color:#000000;
}
	
.content p.koumoku2{
	line-height: 1.6;
    font-size: 1.6em;
	margin-top:1em;
	margin-bottom: 0.5em;
	color: #000000;
	font-weight:bold;
	}

.content h3{
margin:5% 0 5% 0;
text-align: center;
background-color: #333333;
display: block;
position: relative;
color: #FFF;
line-height: 1.4;
font-size: 2em;
font-weight: bold;
padding: 15px 0;
}

.content h3::before{
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -15px;
  border: 15px solid transparent;
  border-top: 15px solid #333333;
} 
.content h3 span{font-weight: normal; font-size: 80%}
.content h3 span.pre{display: block}

.plan{margin-top: 	10px}

/*#main_head
-------------------------------------------------------------------*/
#header{width: 100%; box-sizing: border-box; display: table; background-color: #FFFFFF;}
#header .wrap{padding: 7px 10px; margin: auto; text-align: center;}
#header img{vertical-align: middle}
#header h1, 
#header #logo{display: table-cell; box-sizing: border-box; vertical-align: middle;}
#header h1{width: 70%; text-align: left; padding-right: 5%}
#header #logo{width: 25%; text-align: right}
#header #logo img{text-align: right}

#main{
margin: auto;
text-align: center;
display: block;
position: relative
}

} 
#main .wrap{padding: 0% 0%}
#main .coupon{margin-top: 4%}

#main_btn_area{ padding: 4% 4% 0% 4%; text-align: center;  box-sizing: border-box}
#main_btn_area .wrap{padding:0 4%}
#main_btn_area .btn01{margin-bottom: 5%}
#main_btn_area .btn02{margin-bottom: 0%}

																												
/*ボタンエリア
-------------------------------------------------------------------*/
.btn_box{
border: 1px solid #ffe380;
background-color: #fff4cd;
text-align: center;
padding: 6%;
margin:8% 4% 4% 4%;
box-sizing: border-box
}
.btn_box.sec{margin-top: 6%}

.btn_area{text-align: center;}
.btn_area a{
border-radius: 100px;
padding: 15px;
text-decoration: none;
font-weight: 500;
font-size: 1.6em;
display: block;
box-sizing: border-box;
margin: auto;
color: #FFF;
}


.btn_white a{background-color: #FFF; border: 3px solid #ff6600; color: #ff6600; width: 80%; }
.btn_premium a{
background-color: #ba8300;
-webkit-box-shadow: 0 5px #5b4001;
box-shadow: 0 5px #5b4001;
}
.btn_ondemand a{
background-color: #ff6600;
-webkit-box-shadow: 0 5px #883400;
box-shadow: 0 5px #883400;
margin-top: 6%;
}
.btn_myuta a{
background-color: #448aca;
-webkit-box-shadow: 0 5px #00436c;
box-shadow: 0 5px #00436c;
}
.btn_area a span{color: #ffff00; display: block; font-size: 120%; font-weight: 700;}
.btn_area a span.inline{display:inline; padding-left: 0.3em}

.btn_area#member{padding: 0 0 12px 0;} 
.btn_area#member a{font-size: 1.4em; padding: 12px; width:90%; letter-spacing: -0.03em}
@media screen and (min-width: 428px) { 
.btn_area#member a{width:85%; letter-spacing: 0}
}
@media screen and (max-width: 374px) { 
.btn_area#member a{font-size: 1.3em;}
}

.btn_area .kome{font-size: 1.1em; margin-top: 15px}
.btn_area#member .kome{margin-top: 10px}

/*画像エリア
-------------------------------------------------------------------*/
.img_area{text-align: center;}
.img_area a{
border-radius: 100px;
padding: 15px;
text-decoration: none;
font-weight: 500;
font-size: 1.6em;
display: block;
box-sizing: border-box;
margin: auto;
color: #FFF;
}

.img_area a span{color: #ffff00; display: block; font-size: 120%; font-weight: 700;}
.img_area a span.inline{display:inline; padding-left: 0.3em}

.img_area#member{padding: 0 0 0 0;} 
.img_area#member a{font-size: 1.4em; padding: 12px; width:90%; letter-spacing: -0.03em}
@media screen and (min-width: 428px) { 
.img_area#member a{width:85%; letter-spacing: 0}
}
@media screen and (max-width: 374px) { 
.img_area#member a{font-size: 1.3em;}
}

.img_area .kome{font-size: 1.1em; margin-top: 15px}
.img_area#member .kome{margin-top: 10px}

.img_area .sub{font-size: 1.8em; margin-top: 25px; font-weight: bold; }
.img_area#member .sub{margin-top: 25px}

/*globalMenuSp
-------------------------------------------------------------------*/
/*開閉メニュー*/
nav.globalMenuSp{display: block; margin-top: 20px}

nav.globalMenuSp p.text, 
nav.globalMenuSp p.kome{margin-left: 1.5em}

nav.globalMenuSp ul.accordion > li{ text-align: left; color: #333; margin-bottom: 15px;}
nav.globalMenuSp ul.accordion > li:last-child{margin-bottom: 0}
nav.globalMenuSp div.ttl {
cursor: pointer;
position: relative;
font-weight: bold;
line-height: 1.4;
font-size: 1.8em;
margin: 0;
display: block;
padding: 15px 55px 15px 15px;
background-color: #ededed;
color: #000000;
}
nav.globalMenuSp div.ttl::before, 
nav.globalMenuSp div.ttl::after{
position: absolute;
  content: "";
  display: block;
  transition: all 0.4s;
  background: #e4004f;
  right: 2%;
  top: 50%;
  width: 14px;
  height: 2px;
  transform: translate(-50%, -50%);
}
nav.globalMenuSp div.ttl:before {transform: translate(-50%, -50%) rotate(90deg);}
nav.globalMenuSp div.ttl.open::before{transform: translate(-50%, -50%) rotate(0deg);}

nav.globalMenuSp ul div.children{display:none; padding: 0 1%}
nav.globalMenuSp p.kome02{margin-top: 1.5em; font-size: 1.2em; border: 1px dotted #CCC; padding: 0.5em 0.8em; color: #ff0000ff;}
nav.globalMenuSp p.kome02.sec{margin-top: 0.3em}
nav.globalMenuSp p.kome_sub{font-size: 1.2em; margin-left: 18px;}
nav.globalMenuSp p.koumoku, 
nav.globalMenuSp p.num{
	line-height: 1.6;
    font-size: 1.6em;
	margin-top:1em;
	margin-bottom: 0.5em;
	padding-left:1.2em;
	position:relative;
	color: #000000;
	
nav.globalMenuSp p.koumoku2 
	line-height: 1.6;
    font-size: 1.6em;
	margin-top:1em;
	margin-bottom: 0.5em;
	color: #000000;		
	font-weight:bold;
}																															
nav.globalMenuSp p.num{padding-left:0; text-indent: -2em; margin-left: 2em;}
nav.globalMenuSp p.koumoku span{display: block}
nav.globalMenuSp p.koumoku:before{
	content:'';
	width:0.9em;
	height:0.9em;
	border-radius: 50%;
	position:absolute;
	top:0.4em;
	left:0;
	background-color:#000000;
}

nav.globalMenuSp p.koumoku2 span{display: block}
nav.globalMenuSp p.koumoku2:before{
	content:'';
	width:0.9em;
	height:0.9em;
	top:0.4em;
	background-color:#000000;
}

nav.globalMenuSp p.note{font-size: 1.6em; font-weight: bold; margin-top: 1.5em; color: #000000; border-bottom: 2px solid #000}

nav.globalMenuSp .btn_details{margin-top: 1.5em; margin-left: 16px}
nav.globalMenuSp .btn_details a{color: #000000; font-size: 1.4em;}


/* ===================================================
for tablet/PC
=====================================================*/
@media screen and (min-width: 577px) { 

p{font-size: 1.6em}
p.center{text-align: center}

.content{max-width: 1040px;}
.content .wrap.last{max-width: 1040px;}
.content p.kome{font-size: 1.4em}

.content h3{
font-size: 3.2em;
margin-bottom: 0.8em;
margin-top: 5%;
}

.btn_box h3{font-size: 3.2em;}

/*#main_head
-------------------------------------------------------------------*/
#header .wrap{padding: 7px 4%; max-width: 1040px;}

#main .wrap{padding: 0% 0%}
#main .coupon{margin-top: 4%}

#main_btn_area{padding:4% 4% 0% 4%;}
#main_btn_area .wrap{}
#main_btn_area .btn01{}

/*ボタンエリア
-------------------------------------------------------------------*/
.btn_area a{font-size: 2.4em; width: 100%}

.btn_area#member{padding: 0 0 0 0;} 
.btn_area#member a{font-size: 1.8em; width: 80%;}
.btn_area .kome{font-size: 1.4em;}

.btn_ondemand a, 
.btn_myuta a{padding: 20px 15px}

/*画像エリア
-------------------------------------------------------------------*/
.img_area a{font-size: 2.4em; width: 100%}

.img_area#member{padding: 0 0 0 0;} 
.img_area#member a{font-size: 1.8em; width: 80%;}
.img_area .kome{font-size: 1.4em;}

	
/*globalMenuSp
-------------------------------------------------------------------*/
/*開閉メニュー*/
nav.globalMenuSp{margin-top: 40px}
nav.globalMenuSp div.ttl{font-size: 2em; }
nav.globalMenuSp p.koumoku, 
nav.globalMenuSp p.num, 
nav.globalMenuSp p.note{font-size: 1.6em}
nav.globalMenuSp div.ttl::before, 
nav.globalMenuSp div.ttl::after{width: 27px; height: 3px; right: 0.2em}
nav.globalMenuSp .children{margin-bottom: 30px}
nav.globalMenuSp p.koumoku span{display: inline}

nav.globalMenuSp p.kome02, 
nav.globalMenuSp p.kome_sub{font-size: 1.4em;}

}

/* ===================================================
for PC
=====================================================*/
@media screen and (min-width: 1040px) { 

a{transition: all 0.3s;}
a:hover{opacity: .7}

p{font-size: 2em;}

.content .wrap{padding:0;}
.content .wrap.last{padding: 2% 0 100px 0}
.content .wrap.top_margin{padding: 2% 0 0 0}

.content p.koumoku{font-size: 2em}
.content p.kome{font-size: 2em}
.content h3{
margin:5% 0 1em 0;
font-size: 4.6em;
padding: 0.2em 0;
}

.content h3::before{
  margin-left: -20px;
  border: 20px solid transparent;
  border-top: 20px solid #333333;
} 
.content h3 span{font-weight: normal; font-size:75%}
.content h3 span.pre{display: inline}

.btn_box h3{
font-size:3.6em;
margin-bottom: 0.7em;
}
.btn_box h3 span.pre{font-size: 100%;}

/*#main_head
-------------------------------------------------------------------*/
#header .wrap{padding: 7px 0;}

#main .wrap{padding: 0px 0}
#main .coupon{margin-top: 40px}

#main_btn_area{padding: 4% 0 0 0}
#main_btn_area .wrap{padding:0px 0; max-width: 1040px; margin: auto}
#main_btn_area .btn01{margin-bottom: 40px}

/*ボタンエリア
-------------------------------------------------------------------*/
.btn_box{
padding: 55px 0;
margin:4% auto 0 auto;
max-width: 1040px;
}
.btn_box.sec{margin-top: 55px; }

.btn_area a{font-size:2.6em; width: 60%; padding:1em}

.btn_area#member{padding: 0px 0px; }
.btn_area#member a{font-size: 2.6em; padding: 0.6em; width: 55%; letter-spacing: 0}

.btn_white a{width: 80%; border: 4px solid #ff6600; font-size:3em;}
.btn_area a span{display:inline; padding-left: 0.3em}
.btn_area .kome{font-size: 2em;}

/*画像エリア
-------------------------------------------------------------------*/
.img_area a{font-size:2.6em; width: 60%; padding:1em}

.img_area#member{padding: 0px 0px; }
.img_area#member a{font-size: 2.6em; padding: 0.6em; width: 55%; letter-spacing: 0}
.img_area a span{display:inline; padding-left: 0.3em}
.img_area .kome{font-size: 2em;}
.img_area .sub{font-size: 2em; padding-top:25px; font-weight: bold; }
	
/*globalMenuSp
-------------------------------------------------------------------*/
/*開閉メニュー*/
nav.globalMenuSp div.ttl{font-size: 2.4em; }
nav.globalMenuSp ul.accordion > li{margin-bottom: 20px;}
nav.globalMenuSp p.koumoku, 
nav.globalMenuSp p.num, 
nav.globalMenuSp p.note{font-size: 2em;}

nav.globalMenuSp p.kome02, 
nav.globalMenuSp p.kome_sub{font-size: 1.6em;}
nav.globalMenuSp p.kome_sub{margin-left: 22px;}

nav.globalMenuSp .btn_details{margin-left: 20px}
nav.globalMenuSp .btn_details a{font-size: 2em;}

}