@charset "utf-8";

html{
font-size: 62.5%;/* 10px */
color: #333;
}

body{
margin: 0;
color: #333;
}

#content{
font-size: 14px;
font-size: 1.4rem;
text-align: center;
font-family: メイリオ, Meiryo, 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', 'ＭＳ Ｐゴシック', sans-serif;;
}


/*------------------------

Link

------------------------*/

a.txt-link01:link, a.txt-link02:link{
color: #f66;
text-decoration: none;
}

a.txt-link01:visited, a.txt-link02:visited{
color: #faa;
text-decoration: none;
}

a.txt-link01::before{
box-sizing: border-box;
width: 16px;
height: 16px;
border: 1px solid #f66;
-webkit-border-radius: 50%;
border-radius: 50%;
}

.txt-link01{
position: relative;
display: inline-block;
padding: 0 0 0 18px;
color: #f66;
vertical-align: middle;
text-decoration: none;
}
.txt-link01::before,
.txt-link01::after{
position: absolute;
top: 0;
bottom: 0;
left: 0;
margin: auto;
content: "";
vertical-align: middle;
}

a.txt-link01::after{
left: 4px;
width: 5px;
height: 5px;
border-top: 1px solid #f66;
border-right: 1px solid #f66;
transform: rotate(45deg);
}

@media screen and (min-width:768px){
a.txt-link01:hover, a.txt-link02:hover{
color: #faa;
text-decoration: underline;
}
}

@media screen and (max-width:768px) {
a.txt-link01:link, a.txt-link02:link{
text-decoration: underline;
}

a.txt-link01:visited, a.txt-link02:visited{
color: #faa;
text-decoration: underline;
}
}


/*------------------------

Navigation

------------------------*/

nav.nav-wrapper{
text-align: center;
max-width: 100%;
margin: 0 auto;

}

.nav-top{
list-style: none;
flex-basis: 25%;
flex-wrap: wrap;
display: flex;
background-color: #fff;
justify-content: center;
margin: 0 auto;
padding: 0;
}

.nav-top > li{
text-align: center;
padding: 1.2rem 2rem;
font-size: 1.8rem;
font-size: 18px;
font-weight: normal;
}

a.nav-link{
display: inline-block;
padding-bottom: 4px;
position: relative;
}

a.nav-link:link, .nav-link:visited{
color: #333;
text-decoration: none;
}

a.nav-link::after{
background-color: #ccc;
bottom: 0;
content: '';
display: block;
height: 2px;
width: 100%;
}

a.nav-link.color1::after{
background-color: #dab8d9;
}

a.nav-link.color2::after{
background-color: #ffbb88;
}

a.nav-link.color3::after{
background-color: #faaaaa;
}

a.nav-link.color4::after{
background-color: #cde5aa;
}

@media screen and (min-width:768px){
a.nav-link::after{
background-color: #ccc;
bottom: 0;
content: '';
display: block;
height: 2px;
position: absolute;
left: 50%;
transform: translateX(-50%);
transition: .5s all;
width: 0;
}

a.nav-link:hover::after{
width: 110%;
}

a.nav-link.color1:hover{
color: #dab8d9;
}

a.nav-link.color2:hover{
color: #ffbb88;
}

a.nav-link.color3:hover{
color: #faaaaa;
}

a.nav-link.color4:hover{
color: #cde5aa;
}

}

/*.site-header{
position: absolute;
justify-content: space-between;
width: 100%;
}
.site-header.fixed{
position: fixed;
top: 0;
}*/

/*------------------------

Heading

------------------------*/
.hdg-l1_top {
margin: 0 auto;
padding: 0;
width: 100%;
}

h1.kv{
margin: 0 auto;
}

h1.kv > img{
width: 100%;
}

h1.kv > img.kvimg-pc{
display: inline-block;
}

h1.kv > img.kvimg-sp{
display: none;
}

/* 下層用 */
.hdg-l1{
margin: 0px auto;
display: block;
padding-top: 40px;
padding-bottom: 40px;
background-color: #bbb;
color: #fff;
width: 100%;
}

.hdg-l1 > h1{
margin: 0 auto;
font-size: 5rem;
font-weight: normal;
}

.hdg-l1 > h1 > img{
max-width: 100%;
}

span.hdg-l1-sub{
font-size: 20px;
font-size: 2rem;
color: #fff;
font-weight: normal;
padding-top: 0;
margin: 0 auto;
display: block;
}

/* h2 */
.hdg-l2-01{
font-size: 44px;
font-size: 4.4rem;
font-weight: normal;
margin: 20px auto;
}

span.l2-main{
display: inline;
padding: 0 25px;
border-bottom: 3px #ccc solid;
line-height: 0.1;
}

span.l2-main.hdg-color-01, span.l3-main.hdg-color-01{
border-color: #dab8d9;
}

span.l2-main.hdg-color-02, span.l3-main.hdg-color-02, span.l3-main-02.hdg-color-02{
border-color: #ffbb88;
}

span.l2-main.hdg-color-03, span.l3-main.hdg-color-03{
border-color: #faaaaa;
}

span.l2-main.hdg-color-04, span.l3-main.hdg-color-04, span.l3-main-02.hdg-color-04{
border-color: #cde5aa;
}

.hdg-l2-sub{
font-size: 15px;
font-size: 1.5rem;
font-weight: normal;
padding-top: 0;
margin: 0 auto;
display: inline-block;
}

.hdg-l2-02{
font-size: 36px;
font-size: 3.6rem;
line-height: 2;
font-weight: normal;
margin: 20px auto;
}


.hdg-l3-01{
font-size: 30px;
font-size: 3.0rem;
font-weight: normal;
line-height: 1;
margin: 60px auto 40px;
display: block;
}

.hdg-l3-02{
font-size: 20px;
font-size: 2rem;
font-weight: normal;
line-height: 1;
margin: 20px auto;
}

span.l3-main{
display: inline;
padding: 0 20px;
border-bottom: 2px #ccc solid;
line-height: 1.5;
}

span.l3-main-02{
display: inline;
padding: 0 20px;
border-left: 2px #ccc solid;
line-height: 1.5;
}

/* h4 */
.hdg-l4-01{
font-size: 17px;
font-size: 1.7rem;
font-weight: normal;
}

.hdg-l4-games{
font-size: 24px;
font-size: 2.4rem;
margin-top: 0;
font-weight: normal;
}

/* h5 */
.hdg-l5-games{
text-align: left;
font-size: 20px;
font-size: 2rem;
margin-bottom: 0;
font-weight: normal;
}

@media screen and (max-width:768px){
.hdg-l1_top {
width: 100%;
}

h1.kv > img{
width: 100%;
}

h1.kv > img.kvimg-pc{
display: none;
}

h1.kv > img.kvimg-sp{
display: inline-block;
}


.hdg-l4-games, .hdg-l5-games{
text-align: center;
margin: 10px auto;
}

span.hdg-l1-main{
font-size: 4rem;
display: block;
margin: 0 5%;
}

.hdg-l1 > h1 > img{
max-width: 80%;
}

span.hdg-l1-sub{
font-size: 18px;
font-size: 1.8rem;
}

.hdg-l2-01{
font-size: 3.6rem;
}

.hdg-l2-02{
font-size: 30px;
font-size: 3rem;
}

span.l2-main{
padding: 0 20px;
}

.ldg-l3-01{
font-size: 26px;
font-size: 2.6rem;
}
span.l3-main{
line-height: 1.8;
}

.hdg-l2-sub{
margin: 20px auto 0;
}

}

@media screen and (max-width:480px) {
span.hdg-l1-main{
font-size: 38px;
font-size: 3.8rem;
padding-bottom: 10px;
}

.hdg-l2-02{
font-size: 22px;
font-size: 2.2rem;
}
}
/*------------------------

box

------------------------*/

.content-box-01{
margin: 0 auto 80px;
max-width: 1000px;
}
.inner{
margin: 20px;
padding: 40px;
}

/* 下層用 */
section.cont-section-01{
margin: 50px auto;
}

.content-box-games > h4{
text-align: left;
}

@media screen and (max-width:768px){
.content-box-01{
margin-bottom: 40px;
}
.inner{
margin: 20px 15px;
padding: 40px 25px;
}

.content-box-games > h4.hdg-l4-games{
text-align: center;
}

}

/*------------------------

p

------------------------*/

p{
text-align: left;
margin: 20px auto;
max-width: 80%;
}

p.w100-mt0{
text-align: left;
margin: 0 auto 20px auto;
max-width: 100%;
}

p.lead{
margin-top: 0;
}

em{
font-weight: bold;
font-style: normal;
color: #f66;
}

p.lead > span.lead-txt{
font-size: 1.6rem;
font-size: 1.6rem;
line-height: 1.8;
box-shadow: inset 0 -9px #fd9;
}

p.price > em{
font-weight: bold;
font-style: normal;
color: #f80;
}

@media screen and (max-width:768px){
p{
max-width: 100%;
}
p.lead{
margin-top: 20px;
}
}

/*------------------------

button

------------------------*/

a.link-btn01,a.link-btn02{
font-size: 18px;
font-size: 1.8rem;
display: block;
text-align: center;
}

a.link-btn02{
width: 50%;
}

a.link-btn01, a.link-btn02{
display: block;
padding: 20px;
margin: 20px auto;
text-align: center;
background-color: #f66;
border-radius: 6px;
}

a.link-btn01:link, a.link-btn01:hover, a.link-btn01:visited, a.link-btn02:link, a.link-btn02:hover, a.link-btn02:visited{
color: #fff;
text-decoration: none;
}

.dead-btn{
color: #fff;
font-size: 18px;
font-size: 1.8rem;
padding: 20px;
display: block;
text-align: center;
background-color: #ccc;
border-radius: 6px;
}

@media screen and (max-width:768px) {
a.link-btn01, a.link-btn02{
width: auto;
}
}

@media screen and (min-width:768px) {
a.link-btn01:hover, a.link-btn02:hover{
background-color: #faa;
}
}


/* ボタン複数カラム */
.btn-list-col{
display: flex;
margin: auto 0;
flex-wrap: nowrap;
}

.btn-list-col > .col{
margin: auto 20px;
width: 100%;
}

@media screen and (max-width:768px) {
.btn-list-col{
display: block;
}

.btn-list-col > .col{
margin: 20px auto;
}
}

/*------------------------

List

------------------------*/

/* 順不同リスト  */
ul.list{
margin: auto;
list-style-type: disc;
color: #ccc; 
text-align: left;
width: 80%;
}

ul.list > li{
width: auto;
margin-bottom: 20px;
padding: 0;
}

ul.list > li > span{
color: #333;
}

ol.order-list{
margin:40px auto 80px;
font-weight: bold;
text-align: left;
width: 75%;
padding: 0;
}

ol.order-list > li{
margin-bottom: 20px;
list-style-type: decimal;
}

ol.order-list > li > span{
color: #333;
font-weight: normal;
}

ol.order-list.mb-0{
margin-bottom: 0px;
}

/* 注釈リスト */
ul.notice-list , ul.notice-list-num {
width: 85%;
text-align: left;
margin: 0 auto 40px;
}
ul.notice-list > li , ul.notice-list-num > li{
list-style-type: none;
display: flex;
flex-wrap: nowrap;
}

ul.notice-list > li::before {
content: '※';
}

ul.notice-list > li > span.mark {
display: none;
}

ul.notice-list > li > .note, ul.notice-list-num> li > .note {
padding-left: 0.5rem;
flex: auto;
}


ul.notice-list.col2{
text-align: left;
padding-left: 0;
margin-left: 0;
}


@media screen and (max-width:768px){
ul.list, ol.order-list, ul.notice-list{
width: 95%;
padding-left: 20px;
}

ul.notice-list , ul.notice-list-num{
margin: 0 auto;
padding: 0;
width: 100%;
}

ul.notice-list > li > ol , ul.notice-list > li > ul , ul.notice-list-num > li > ol , ul.notice-list-num > li > ul{
margin-left: 20px;
max-width: 85%;
}
}

/* 更新リスト  */
.update-list{
list-style: none;
width: 80%;
margin: 0 auto;
padding-left: 0;
text-align: left;
}
ul.update-list > li{
display: block;
margin-bottom: 20px;
}

li > span.up-date{
display: inline-block;
padding: 0 20px 0 0;
text-align: left;
vertical-align: top;
}

li > span.up-news{
display: inline-block;
max-width: 84%;
vertical-align: top;
}

@media screen and (max-width: 768px){
.update-list, ul.update-list > li, li > span.up-news{
width: 100%;
max-width: 100%;
text-align: center;
}
.up-news, .up-date{
display: block;
margin: 0 auto;
}
}

/* メンバーメディアリスト */

.member-media-list{
display: inline-block;
list-style: none;
margin: 0 auto;
}

.member-media-list > li{
display: inline-block;
text-align: center;
}


/* QandA */

.qa-list{
margin: 0 auto 20px auto;
text-align: left;
max-width: 80%;
}

.qa-list-q, .qa-list-a{
margin: 0;
padding-bottom: 9px;
display: flex;
/* border-bottom: #6aa6e5 dotted 2px; */
}

.qa-list-a{
margin-bottom: 14px;
padding-bottom: 12px;
border-bottom: #ffddaa solid 1px;
}

.qa-list-a:last-child{
border-bottom: 0;
}

.qa-q{
color: #6aa6e5;
font-weight: 200;
font-size: 2rem;
padding-right: 10px;
}

.qa-q-txt{
font-size: 1.6rem;
letter-spacing: 0.05rem;
line-height: 2.2rem;
padding-top: 4px;
}

.qa-a{
color: #ec4444;
font-weight: 200;
font-size: 2rem;
padding-left: 2px;
padding-right: 10px;
}

.qa-a-txt{
padding-top: 4px;
line-height: 2rem;
}

.ex-t{
color: #f79549;
font-size: 1.42rem;
}

.ex-t::after{
content: "：";
color: #f79549;
font-size: 1.42rem;
}

.ex-t-txt{
font-size: 1.42rem;
}

.ex-d{
margin-left: 30px;
}

.ex-d-txt{
text-align: left;
max-width: 100%;
}



@media screen and (min-width:320px) and (max-width:768px){
.qa-list{
max-width: 100%;
}

.ex-d{
margin-left: 0;
}

}

/* QA内リスト */

ul.qa-ul-list{
margin: auto;
list-style-type: disc;
color: #ccc; 
text-align: left;
width: 94%;
}

ul.qa-ul-list > li{
color: #ffddaa;
margin-bottom: 20px;
padding: 0;
margin-left: -20px;
}

ul.qa-ul-list > li > span{
color: #333;
}

@media screen and (min-width:320px) and (max-width:768px){
.qa-ul-list{
max-width: 88%;
}

}


/*------------------------

Media

------------------------*/

div.media-lyt-01 > div.image > img{
max-width: 100%;
text-align: center;
}
    
span.caption{
display: inline-block;
padding: 10px 0 0;
font-size: 16px;
font-size: 1.6rem;
}

div.media-lyt-01 > span{
display: block;
text-align: center;
}

.media-lyt-02{
display: flex;
margin: 0 auto 40px;
}

div.media-lyt-02 > div.image{
display: inline-block;
width: 40%;
vertical-align: middle;
}

div.media-lyt-02 > div.image > img{
width: 80%;
}

div.media-lyt-02 > div.text{
display: inline-block;
margin-right: 0;
width: 60%;
vertical-align: top;
padding-top: 0;
}
div.text > p{
margin-top: 0;
margin-left: 0;
max-width: 90%;
}

div.media-lyt-02._reverse{
flex-direction: row-reverse;
}

@media screen and (max-width:768px){
.media-lyt-01, .media-lyt-02 , div.media-lyt-02 > div.image, div.media-lyt-02 > div.text{
width: 100%;
display: block;
margin: 0 auto 20px;
}

.media-lyt-02{
margin-bottom: 40px;
}

div.text > p{
max-width: 100%;
display: block;
margin: 20px 0;
}

div.div-media-lyt-02 > div.image > img{
text-align: center;
}

}


/*------------------------

table

------------------------*/

table.table01{
border: 1px #666 solid;
color: #444;
font-size: 16px;
font-size: 1.6rem;
margin: 40px auto;
width: 80%;
border-collapse: collapse;
}

th td{
vertical-align: middle;
}

thead > tr > th{
color: #fff;
font-size: 18px;
font-size: 1.8rem;
background-color: #bbb;
font-weight: normal;
padding: 1rem;
max-width: 25%;
border: 1px #666 solid;
}

tbody > tr > td{
padding: 10px;
max-width: 25%;
border: 1px #666 solid;
}

@media screen and (min-width:320px) and (max-width:768px){

table.table01{
font-size: 1.3rem;
width: 100%;
}

thead > tr > th{
font-size: 1.4rem;
padding-bottom: 10px;
}

tbody > tr > td{
padding: 5px;
}
}




/*------------------------

Unique

------------------------*/

/* 緊急エリア */
.attention-area{
margin: 0 auto;
padding-top: 30px;
padding-bottom: 30px;
background-color: #ffeeee;
color: #ca6666;
text-align: center;
}

.attention-area-txt{
font-size: 1.4rem;
margin: 0 auto 20px auto;
text-align: center;
}

.txt-link-attention:link{
color: #ec4444;
text-decoration: underline;
font-size: 1.5rem;
}

.txt-link-attention:hover{
color: #eeaaaa;
text-decoration: none;
}

.txt-link-attention:visited{
color: #ed7777;
text-decoration: underline;
}

.txt-link-attention:visited:hover{
color: #eeaaaa;
text-decoration: none;
}

@media screen and (max-width:768px){
.attention-area{
padding: 40px 25px;
}

}



/* メンバーリスト */
.member{
list-style: none;
margin: 0 auto;
display: flex;
padding: 0;
}

ul.member > li{
display: inline-block;
max-width: 22.5%;
margin: 0 auto;
text-align: center;
vertical-align: top;
}

.member-txt{
text-align: center;
margin: 5px auto 10px;
}


ul.member li > div.media-lyt-01 > img{
max-width: 60%;
text-align: center;
}

span.caption.member{
display: inline-block;
padding: 10px 0 0;
font-size: 16px;
font-size: 1.6rem;
}

ul.member li > div.media-lyt-01 > span{
display: block;
text-align: center;
}

@media screen and (max-width:480px){
.member, ul.member > li{
display: block;
}
ul.member > li{
max-width: 100%;
margin: 20px auto 40px;
}
}

@media screen and (min-width:481px) and (max-width:768px){
.member{
flex-wrap: wrap;
}
ul.member > li{
max-width: 40%;
margin: 0 auto 40px;
}
}


/* 購入導線 */
.buy-list{
display: flex;
flex-wrap: nowrap;
margin: 0 auto;
}

.buy-price{
width: 50%;
}

.price-list{
text-align: left;
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin-right: 0;
}

dl.price-list > dt{
display: inline-flex;
align-items: center;
width: 60%;
}

dl.price-list > dt::after{
content: '：';
}

dl.price-list > dd{
width: 80px;
margin-left: 0;
}

.buy-btn{
margin: 0 5% 0 5%;
}

@media screen and (max-width:768px){
.buy-list{
display: block;
margin: 0 auto;
}

.buy-price{
width: 100%;
}

.buy-btn{
margin: 0;
}

.price-list{
margin: 0 auto;
align-items: center;
justify-content: center;
}

dl.price-list > dd{
width: 100%;
}


}

@media screen and (min-width:320px) and (max-width:768px){
.price-list{
display: block;
margin: 20px auto;
}

dl.price-list > dt::after{
content: '';
}

dl.price-list > dt{
display: inline-block;
width:100%;
padding: 0 0 10px;
border-bottom: 1px #ccc solid;
}

dl.price-list > dt, dl.price-list > dd{
margin: 0 auto;
line-height: 0.2;
text-align: center;
}

dl.price-list > dd > p.price{
display: inline-block;
text-align: center;
}

dl.price-list > dd:last-child{
padding: 0;
padding-bottom: 10px;
}
}

/* イベントリスト */
.event-list{
width: 80%;
display: flex;
flex-wrap: wrap;
align-items: baseline;
margin: 20px auto;
}

.event-list > dt{
color: #ec4444;
display: inline-block;
background-color: #fffefe;
border-radius: 2px;
border: 1px #f66 solid;
padding: 5px 10px;
margin-right: 0;
width: 20%;
margin-bottom: 5px;
}

.event-list > dd{
margin-left: 15px;
border-bottom: 2px #eee dotted;
width: 74%;
margin-bottom: -2px;
text-align: left;
}

@media screen and (max-width:768px) {

.event-list{
width: 100%;
display: block;
padding: 0 0 20px;
border-bottom: 2px #ccc dotted;
}

.event-list.last{
border-bottom: none;
}

.event-list > dt{
border: none;
border-bottom: 1px #f66 solid;
padding: 5px 0;
margin: 0 auto 10px;
width: 100%;
}

.event-list > dd{
border-bottom: none;
width: 100%;
margin: 0 auto 10px;
}
}

@media screen and (min-width:768px) and (max-width:900px) {

.event-list{
width: 90%;
}

.event-list > dt{
width: 15%;
}

.event-list > dd{
width: 70%;
}
}


/*スムーススクロール*/
a.smooth{
width: 30px;
height: 30px;
background: #6aa6e5;
border-radius: 40px;
-moz-border-radius: 40px;
-webkit-border-radius: 40px;
text-align:center;
padding: 1.5rem 1.5rem;
border: none;
box-shadow: 1px 3px 2px -1px #eee;
position: fixed;
bottom: 20px;
right: 20px;
margin: 4rem 0 0;
opacity: 0.9;
}

.smooth-txt{
width: 7px;
height: 14px;
white-space: nowrap;
overflow: hidden;
}

a.smooth:link, a.smooth:visited{
color: transparent;
}
a.smooth:hover{
background-color: #fcfeff;
border: 1px #6aa6e5 solid;
}

a.smooth::after{
content: '';
width: 14px;
height: 14px;
border: 0px;
border-top: solid 2px #fff;
border-right: solid 2px #fff;
-ms-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
position: absolute;
top: 50%;
left: 37%;
margin-top: -4px;
}

a.smooth:hover::after{
border-top: solid 2px #6aa6e5;
border-right: solid 2px #6aa6e5;
}

/* 日付 */



/* common */
.pc-left{
text-align: left;
}

.pc-center{
text-align: center;
}

.pl-0{
padding-left: 0;
}

.border{
border: 1px #ccc solid;
}

.mb-0{
margin-bottom: 0;
}

.mt-10{
margin-bottom: 10px;
}




/* 下層用カラーコントロールクラス */
body.color-at .hdg-l1, body.color-at table.table01 > thead > tr > th{
background-color: #ca6666;
}



body.color-at .l2-main, body.color-at .l3-main-02{
border-color: #ecaaaa;
}

body.color-at .order-list, body.color-01 .list,body.color-01 .qa-ul-list{
color: #ca6666;
}

body.color-01 .hdg-l1{
background-color: #ce96e1;
}

body.color-01 .l2-main{
border-color: #dab8d9;
}

body.color-01 .order-list, body.color-01 .list,body.color-01 .qa-ul-list{
color: #ce96e1;
}

body.color-02 .hdg-l1{
background-color: #f79549;
}

body.color-02 .l2-main{
border-color: #ffbb88;
}

body.color-02 .order-list, body.color-02 .list,body.color-02 .qa-ul-list{
color: #f79549;
}