@charset "utf-8";
/* CSS Document */

/*--reset start--*/
html{font-feature-settings:"palt"; scroll-behavior:smooth; background:var(--C2)}
body,div,h1,h2,h3,h4,h5,h6,p,ol,ul,li,dl,dt,dd,button,small,strong,table,input{margin:0; font-size:1em}
body{font-family:-apple-system, BlinkMacSystemFont,'Helvetica Neue', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN',"Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif; -webkit-font-smoothing:antialiased; line-height:1.75; color:var(--C4)}/*color, line-height*/
ul,ol{padding:0; list-style:none}
i,em{font-style:normal}
img{max-width:100%}
a{color:inherit; text-decoration:none}
button{background:none; border:0; outline:0; appearance:none}
/*--reset end--*/

/*--共通パーツ start--*/
:root{
    --C1:#960018;/*赤・ボタンの色*/
    --C2:#4C1C24;/*黄土色　→　2502黒*/
    --C3:#DC143C;/**/
    --C4:#fff;/*黒・文字基本色　→　2502白*/
    --C5:#800020;/*白　→　2502紺*/
    --C6:#b4b4b4;/*白灰・メニュー日本語*/
    --C7:#0af;/*リンクの色：水色*/
    --C8:#B7282E;/*灰２・input背景、スライダー背景　→　2502紺*/
    --C9:#fff;/*紺　→　2502白*/
    --C10:#bdddff;/*グローバルメニュー背景色*/
    
    --C11:#000;/*250630追加*/
}


@media(max-width:789px){
      .PcOnly{display:none !important}
      html{font-size:calc(100vw / 750)}
      body{font-size:28rem}/*基礎font-size*/
      .Btxt{font-size:38rem}/*タイトルなど大きい文字*/
      .Btxt2{font-size:34rem; font-weight:bold}/*少し大きい文字*/
}

@media(min-width:790px){
    .SpOnly{display:none !important}
    html{font-size:0.1vw}
    body{font-size:16rem}/*基礎font-size*/
    .Btxt{font-size:26rem}/*タイトルなど大きい文字*/
    .Btxt2{font-size:23rem; font-weight:bold}/*少し大きい文字*/
    a,label,button,summary,select{transition:opacity .6s; cursor:pointer}
    a:hover,label:hover,button:hover,summary:hover{opacity:.6}
    
    html::-webkit-scrollbar{width:5px}/*remはSafariでバグが出るのでpx指定*/
    html::-webkit-scrollbar-track{background-color:var(--C2)}
    html::-webkit-scrollbar-thumb{background-color:var(--C1)}
}

@media(min-width:1000px){
	html{font-size:1px}
}

/*--Header--*/
#Header,
#HeaderNoLink{position:relative}
#HeaderLogo{display:block}
#HeaderMenu{display:flex; align-items:center; text-align:center; line-height:1; font-weight:bold; border-top:2rem solid var(--C5); border-bottom:2rem solid var(--C5); background: var(--C1)}
.HeaderBtxt{color:var(--C4); display:block}
.HeaderStxt{color:var(--C4); display:block}
.HeaderLogoImg{display:block; width:100%}

#HeaderMenuBg{position:fixed; top:0; left:100vw; background-size:cover; background-position:top center; background-color:var(--C2); height:100vh; z-index:5; transition:.6s}
#HeaderMenuBg.Active{left:0}
#HeaderMenuUl{position:fixed; color:var(--C4); background:var(--C1); overflow:auto; z-index:6; text-align:right; transition:.6s}
#HeaderMenuUl:not(.Active),
#HeaderMenuBg:not(.Active){opacity:0}
.HeaderMenuLi{display:block; border-bottom:1px solid var(--C2)}
.HeaderMenuLi:last-child{margin-bottom:0}
#CloseBtn{position:absolute}

@media(max-width:789px){
    #Header{min-height:150rem}
    #HeaderMenu{justify-content:space-around; height:110rem}
    .HeaderBtxt{font-size:36rem}
    .HeaderStxt{padding-top:4rem; font-size:24rem}
    
    #HeaderMenuUl{top:200rem; width:670rem; left:calc(100vw + 40rem); max-height:calc(100vh - 400rem)}
    #HeaderMenuUl.Active{left:40rem}
    .HeaderMenuLi{padding:30rem 40rem}
    #HeaderMenuBg{width:100vw}
    #CloseBtn{top:80rem; right:80rem; width:40rem; height:40rem}
}

@media(min-width:790px){
    #Header{min-height:120rem; margin:0 auto}
    #HeaderH1{background:var(--C2)}
    #HeaderLogo{width:1000rem; margin:0 auto; max-width:100%}
    #HeaderMenu{padding:0 calc(50% - 420rem); height:70rem; justify-content:space-between}
    .HeaderBtxt{font-size:24rem}
    .HeaderStxt{padding-top:3rem}
    #HeaderMenuBtn{cursor:pointer; transition:opacity .6s}
    #HeaderMenuUl{top:90rem; width:500rem; left:calc(200vw - 530rem); max-height:calc(100vh - 180rem); padding-top:20rem}
    #HeaderMenuUl.Active{left:calc(100vw - 530rem)}
    .HeaderMenuLi{margin-bottom:20rem; padding:0 30rem 20rem}
    #HeaderMenuBg{width:100vw; cursor:pointer}
    #CloseBtn{top:30rem; right:30rem; width:30rem; height:30rem}
    #HeaderMenuUl::-webkit-scrollbar{width:5rem}
    #HeaderMenuUl::-webkit-scrollbar-track{background-color:transparent}
    #HeaderMenuUl::-webkit-scrollbar-thumb{background-color:var(--C5)}
    
    #HeaderMenuBtn:hover{opacity:.6}
}

/*--メール無効の人に表示（TOPページ）--*/
#MailNone{border:2rem solid red; padding:2em; margin:0 auto 2em; box-sizing:border-box}
@media(max-width:789px){
    #MailNone{width:670rem}
}
@media(min-width:790px){
    #MailNone{width:1000rem}
}

/*--Footer--*/
#Footer,
#FooterNoLink{color:var(--C9)}
#Footer:not(.NoBt),
#FooterNoLink{border-top:solid 2rem var(--C1)}

.FooterBtxt,
.FooterStxt{display:block; text-align:center}
#FooterLogoA,
#Copy,
#FooterNoLink{display:block}
.FooterMenu{line-height:1; font-weight:bold}
#FooterNoLink,
#Copy{text-align:center; line-height:1}

@media(max-width:789px){
    #Footer,
    #FooterNoLink{padding:40rem 0 60rem}
    #Footer:not(.NoBt){margin-top:100rem}
    #FooterLogoA{padding-top:50rem}
    .FooterBtxt{font-size:35rem; padding-top:10rem}
    #FooterP + .FooterMenu{padding-top:50rem}
    .FooterMenuA{display:block; white-space:nowrap}
    .FooterMenuA::before,
    .FooterMenu + .FooterMenu .FooterMenuA:last-child::after{display:block; width:375rem; content:""; background:var(--C1); height:2rem; margin:30rem auto}
    #FooterP{padding:0 40rem}
    #Copy{font-size:24rem}
}

@media(min-width:790px){
    #Footer,
    #FooterNoLink{padding:40rem calc(50% - 420rem) 50rem; font-size:14rem}
    #Footer:not(.NoBt){margin-top:100rem}
    .FooterBtxt{font-size:20rem; padding-top:10rem}
    #FooterP{padding-bottom:20rem}
    .FooterMenu{display:flex; justify-content:space-around; flex-wrap:wrap; padding:30rem 0}
    #FooterLogoA{padding-top:10rem}
    .FooterMenu:first-child{border-bottom:2rem solid var(--C1)}
    #Copy{padding-top:20rem}
    .FooterLogoImg{display:block; margin:0 auto}
}

/*--Wrapper--*/
.Ttl1{background:var(--C1); color:var(--C5); text-align:center; display:flex; align-items:center; justify-content:center; box-sizing:border-box; padding:.5em 1em; min-height:50rem}
.Ttl2{color:var(--C9); text-align:center}
.Ttl3{color:var(--C4); text-align:center}
.Link{color:var(--C7)}
.BtnArea{display:flex; justify-content:space-between}
.Btn1,
.Btn2,
.Btn3,
.Btn4,
.Btn5{background:var(--C11); color:var(--C4); font-weight:bold; text-align:center; display:flex; justify-content:center; align-items:center; margin:0 auto; line-height:1.3; box-sizing:border-box; flex-direction:column}
.Btn3{background:var(--C9); color:var(--C5)}
.Btn4{background:var(--C2); color:var(--C1)}
.Btn5{background:var(--C11); color:var(--C9); border:2rem solid var(--C2); box-sizing:border-box}
.W1{box-sizing:border-box}
div.Btn3{opacity:.35}
.BtnRuby{font-size:.8em}
.TC{text-align:center}
.TJ{text-align:justify}
.Red{color:var(--C9)}
.FreeTxt{border-bottom:1rem dotted var(--C1); text-align:justify}
.FreeTxt img{display:block}
.ListDetailPagerA{position:absolute}
.Th,.Td{border:1rem solid var(--C9); padding:.5em; word-break:break-all}
.Th{color:var(--C5); background:var(--C9)}
.Table .Th,
.Table .Td{text-align:center}
.Table2{table-layout:fixed}
.Table2 .Th{width:35%}
.ThRuby{display:block; font-size:.6em; line-height:1}
.FormLabel:not(:first-child){margin-left:1em}
.labelInput{margin-right:.5em}
.ListABox,
.Ul{list-style:disc}
.ListA{display:list-item; color:var(--C7)}
.Ol{list-style:decimal}
.ListABox,
.Ol,
.Ul{padding-left:1em; box-sizing:border-box}
.Ul{list-style-position:inside}
.Li{text-indent:-1.3em; padding-left:1.3em}
.LpImg,
.LpA,
.DelayImg{display:block}
pre img,
.DelayImg{pointer-events:none}
pre a{pointer-events:auto; color:var(--C7); text-decoration:underline}
.DelayImg{margin:0 auto}
.TableInput,
.TableSelect,
.TableTexterea{width:100%; border:1rem solid var(--C9); display:block; margin:0 auto; box-sizing:border-box; padding:.5em; border-radius:10rem; background:var(--C8); color:var(--C4)}
.TableInput::placeholder{color:var(--C4)}
.Details{border:1rem solid var(--C1); background:var(--C5); border-radius:10rem; padding:1em; word-break:break-all}
.Summary{color:var(--C4); display:block}
.Summary::-webkit-details-marker {display:none}/* Safari対策 */
.Details[open] .Summary{padding-bottom:1em; border-bottom:1rem solid var(--C1); margin-bottom:1em}
.LbL{line-break:loose; font-feature-settings:normal}
.TtlRuby{display:block; font-size:.7em; line-height:1}
@media(max-width:789px){
    .BtnArea{padding:0 40rem}
    .Btn1,
    .Btn2,
    .Btn3,
    .Btn4,
    .Btn5{min-height:70rem; padding:15rem}
    .Btn1,
    .Btn3,
    .Btn4,
    .Btn5{font-size:30rem; width:450rem}
    .Btn2{flex:1 1 210rem}
    .Btn2:not(:first-child){margin-left:20rem}
    .W1{width:670rem; margin:0 auto}
    .Mt1{margin-top:100rem}
    .Mt2{margin-top:50rem}
    .Mt3{margin-top:20rem}
    .Mt4{margin-top:10rem}
    .Pt1{padding-top:100rem}
    .Pt2{padding-top:50rem}
    .Pt3{padding-top:20rem}
    .Pt4{padding-top:10rem}
    .Pb1{padding-bottom:100rem}
    .TableSelect,
    .TableTexterea{max-width:400rem; min-height:70rem}
    .TableTexterea{min-height:250rem}
    .FreeTxt img{height:auto !important}
    .Ttl3{font-size:31rem}
    .PointCheckTable .Th,
    .PointCheckTable .Td{font-size:27rem}
    .Th{line-height:1.2}
    .ThRuby{margin-top:5rem}
    .ThS{display:block; font-size:20rem}
}

@media(min-width:790px){
    .BtnArea{padding:0 60rem}
    .Btn1,
    .Btn2,
    .Btn3,
    .Btn4,
    .Btn5{min-height:40rem; padding:10rem}
    .Btn3:disabled:hover{opacity:1; cursor:auto}
    .Btn1,
    .Btn3,
    .Btn4,
    .Btn5{font-size:18rem; width:280rem}
    .Btn2{flex:1 1 170rem}
    .Btn2:not(:first-child){margin-left:15rem}
    .W1{width:840rem; margin:0 auto}
    .Mt1{margin-top:100rem}
    .Mt2{margin-top:50rem}
    .Mt3{margin-top:20rem}
    .Mt4{margin-top:10rem}
    .Pt1{padding-top:100rem}
    .Pt2{padding-top:50rem}
    .Pt3{padding-top:20rem}
    .Pt4{padding-top:10rem}
    .Pb1{padding-bottom:100rem}
    .TableSelect{min-height:50rem}
    .TableTexterea{min-height:200rem}
    #MainColumn:not(.FullWidth){width:1000rem; margin:0 auto}
    .Ttl3{font-size:20rem}
    .PcTC{text-align:center}
}

/*--Top--*/
#FreePassArea{display:flex; justify-content:center; align-items:center}
#FreePassBtn{display:block}
.ItemAreaUl,
.ItemBtnArea,
#BannerArea,
#MemberArea{background:var(--C1)}
.TopTtlImg,
.ItemAreaLiImg,
.BannerAImg,
#BookCover{display:block}
#BookTxt{text-align:center}
#BookTxt{font-weight:bold; color:var(--C9)}
.MemberStatusLi{text-align:center; font-weight:bold;}
.MemberStatusEGttl{color:var(--C4)}
.MemberStatusJPttl{color:var(--C4)}
.MemberStatusData{color:var(--C4); background:var(--C11); padding:0 .5em}
.MemberBtnArea{display:flex}
.NoItem{padding:100rem 0}
.MemberBtn{line-height:1}
.BannerPush{background:var(--C11); text-align:center; font-weight:bold; color:var(--C4); position:relative}
.Gt{position:absolute; right:0; top:0; display:flex; justify-content:center; align-items:center; text-align:center; height:100%; font-weight:bold}
@media(max-width:789px){
    #FreePassArea{height:210rem; background-size:50rem}
    #FreePassA{width:630rem}
    #ItemArea{padding:135rem 0}
    .ItemAreaUl{padding:35rem 35rem 0}
    .ItemAreaLi{padding-bottom:45rem; display:block}
    .ItemBtnArea{padding:20rem 0 80rem}
    .BannerA{display:block; border:2rem solid var(--C2); margin-bottom:50rem}
    #BannerArea{padding:70rem 45rem 40rem}
    .TopTtl{padding-top:70rem}
    #BookArea{padding-bottom:70rem}
    #BookTxt{font-size:34rem; padding-top:10rem}
    #BookCover{width:530rem; margin:50rem auto 0}
    .BookBtn{width:530rem; margin-top:20rem}
    .MemberStatusBox{border:2rem solid var(--C2)}
    .MemberStatusLi{width:600rem; margin:0 auto; font-size:38rem}
    .MemberStatusLi:not(:first-child){margin-top:30rem}
    .MemberStatus{padding-top:60rem}
    .MemberBtnArea{width:630rem; margin:0 auto; flex-wrap:wrap; justify-content:space-between; padding:55rem}
    .MemberBtn{width:306rem; height:90rem; font-size:36rem; min-height:90rem; box-sizing: border-box; margin:0}
    .MemberBtn:first-child{margin-bottom:18rem}
    
    .ItemBtnArea .Btn5{width:600rem}
    .ItemBtnArea .Btn5,
    .BookBtn{min-height:100rem; font-size:42rem}
    .Gt{width:74rem; font-size:32rem}
}

@media(min-width:790px){
    #FreePassArea{height:160rem; background-size:28rem}
    #FreePassA{width:420rem}
    #ItemArea{padding:50rem 0}
    .ItemAreaUl{padding:30rem 0 0 30rem; display:flex; flex-wrap:wrap}
    .ItemAreaLi{flex:0 0 240rem; padding:0 30rem 30rem 0}
    .ItemBtnArea{padding:15rem 0 45rem}
    #BannerArea{display:flex; flex-wrap:wrap; padding:50rem calc(50% - 420rem) 30rem}
    .BannerA{border:1rem solid var(--C2); margin-bottom:20rem; flex:0 0 250rem; box-sizing:border-box}
    .BannerA:not(:nth-child(3n)){margin-right:45rem}
    .TopTtl{padding-top:50rem}
    #BookArea{position:relative; height:620rem}
    #BookCover{width:240rem; position:absolute; top:260rem; left:calc(50% - 295rem)}
    #BookTxt{position:absolute; left:calc(50% - 10rem); top:330rem; font-size:20rem}
    .BookBtn{position:absolute; left:calc(50% - 10rem); top:430rem}
    .MemberStatusBox{border:1rem solid var(--C11)}
    .MemberStatus{display:flex; padding:50rem 40rem 40rem; flex-wrap:wrap; width:840rem; margin:0 auto; border-bottom:1rem solid var(--C2); box-sizing:border-box; justify-content:center}
    .MemberStatusLi{width:240rem; padding-bottom:10rem}
    .MemberStatusLi:not(:nth-of-type(3n)):not(:last-child){padding-right:19rem}
    .MemberBtnArea{width:580rem; margin:30rem auto 0; padding-bottom:70rem}
    .MemberBtn{flex:0 0 122rem; height:36rem; min-height:36rem; padding:0; font-size:16rem}
    
    .ItemBtnArea .Btn5,
    .BookBtn{min-height:50rem; font-size:21rem; width:300rem}
    .Gt{width:30rem; font-family:"メイリオ", Meiryo,-apple-system, BlinkMacSystemFont,'Helvetica Neue', 'sans-serif'; font-size:32rem}
}