@charset "utf-8";
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video{margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent; }
body{line-height:1; }
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section{display:block; }
ul{list-style:none;}
blockquote, q{quotes:none; }
blockquote:before, blockquote:after,
q:before, q:after{content:''; content:none; }
a{margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; }
img{vertical-align:top; font-size:0; line-height:0; }
ins{background-color:#ff9; color:#000; text-decoration:none; }
mark{background-color:#ff9; color:#000; font-style:italic; font-weight:bold; }
del{text-decoration:line-through; }
abbr[title], dfn[title]{border-bottom:1px dotted; cursor:help; }
table{border-collapse:collapse; border-spacing:0; }
em{font-style:normal; }
hr{display:block; height:1px; border:0; border-top:1px solid #cccccc; margin:1em 0; padding:0; }
input, select{vertical-align:middle;}
article,aside,canvas,details,figcaption,figure,
footer,header,hgroup,menu,nav,section,summary{display:block;}
*,:before,:after{box-sizing:border-box;-webkit-text-size-adjust:100%;}

.cf:before,.cf:after{content:"";display:table;}
.cf:after{clear:both;}
.cf{*zoom:1;}

html{font-size:62.5%;}
body{font-size:15px; font-size:1.5rem; font-family: "Noto Sans JP",system-ui,sans-serif;
font-weight: 400; font-style: normal; letter-spacing:0; line-height:1.6; text-align:center; -webkit-text-size-adjust:100%; color:#000; max-height: 100%; box-sizing:content-box; margin:0;}

br.smp{display:block;}
@media only screen and (min-width:740px) {
br.smp{display:none;}
}

#mgcontainer{overflow-x: hidden;}
#mgcontainer img{max-width: 100%; height: auto;}
#mgcontainer a{color:#000;}
.mgfvset {position:relative; width: 100%; aspect-ratio: 375 / 667;}
.mgfvbg {position: absolute; inset: 0; top:0; background-image: url('../img/fv-smp.jpg'); background-size: cover; background-repeat: no-repeat; background-position: top; z-index:1;}
.mgfv-title,.mgfv-logo{position:relative; z-index:2;}
.mgfv-logo{max-width:130px; width:30vw; position:absolute; top:30px; left:20px;}
.mgfvtxt{margin:56px auto 0; line-height:2.2; font-size:12px; text-align:center;}
@media screen and (min-width: 740px) {
.mgfvset {aspect-ratio: 1440 / 905;}
#mgfv .mgfv-title{position:absolute; left:67.778%; top:35.359%; width:20%; height:22.374%; z-index:2; display:block;}
#mgfv .mgfv-title img{width:100%; height:100%; display:block;}
.mgfvbg{background-position:top center; background-image: url('../img/fv-pc.jpg');}
}
.mgfv-title-img{ opacity: 0; transition: opacity 1.2s ease, transform 1.5s ease;}
.mgfv-title-img.mgfv-title-visible { opacity: 1;}

#mgcontent{max-width:1000px; margin:0 auto; padding:0 20px; display:flex; flex-direction:column; gap:160px;}
#mgcontent img{width:100%; height:100%; display:block; object-fit:cover;}
#mgsec01 .mgsec01-01,#mgsec01 .mgsec01-02{aspect-ratio:440/330;}
#mgsec01 .mgsec01-03 img{aspect-ratio:440/586.67; height:auto;}
#mgsec01 .mgsec01-04{aspect-ratio:700/933.33;}
#mgsec02 .mgsec02-01{aspect-ratio:700/933.33;}
#mgsec02 .mgsec02-02{aspect-ratio:580/773.33;}
#mgsec03 .mgsec03-01{aspect-ratio:640/853.33;}
#mgsec03 .mgsec03-03{aspect-ratio:440/586.67;}
#mgsec03 .mgsec03-02 img{aspect-ratio:440/586.67; height:auto;}
#mgsec04 .mgsec04-01{aspect-ratio:640/853.33;}
#mgsec04 .mgsec04-02,#mgsec04 .mgsec04-03{aspect-ratio:520/390;}
#mgsec04 .mgsec04-04{aspect-ratio:560/420;}
#mgsec04 .mgsec04-05{aspect-ratio:700/933.33;}
#mgsec04 .mgsec04-06{aspect-ratio:480/640;}
#mgsec05 .mgsec05-01{aspect-ratio:640/853.33;}
#mgsec05 .mgsec05-02{aspect-ratio:400/533.33;}
#mgsec05 .mgsec05-03{aspect-ratio:480/640;}
#mgsec06 > div{aspect-ratio:360/270;}
#mgfooter .mgftimg{aspect-ratio:640/853.33; width:62.5%; max-width:640px; margin:0 auto 80px;}
#mgfooter .mgftimg img{width:100%; height:100%; display:block; object-fit:cover;}

#mgsec01 .mgsec01-top{display:flex; flex-direction:column; gap:30px;}
#mgsec01 .mgsec01-left{display:flex; flex-direction:column; gap:15px;}
#mgsec01 .mgsec01-04{margin-top:60px;}

#mgsec02{display:flex; flex-direction:column; align-items:center;}
#mgsec02 .mgsec02-02{margin-top:40px;}

#mgsec03 .mgsec03-row{display:flex; justify-content:space-between; align-items:flex-start; gap:20px; margin-top:40px;}
#mgsec03 .mgsec03-02,#mgsec03 .mgsec03-03{width:48%;}

#mgsec04 .mgsec04-02{margin-top:60px;}
#mgsec04 .mgsec04-03{margin:40px 0 0 auto; width:80%;}
#mgsec04 .mgsec04-04{margin:60px auto 0; width:85%;}
#mgsec04 .mgsec04-05{margin-top:100px;}
#mgsec04 .mgsec04-06{margin:60px auto 0; width:40%;}

#mgsec05 .mgsec05-01{padding-top:0;}
#mgsec05 .mgsec05-02{margin:50px 0 0; width:65%;}
#mgsec05 .mgsec05-03{margin:50px auto 0; width:75%;}

#mgsec06{display:flex; flex-direction:column; align-items:center; gap:12px;}
#mgsec06 > div{width:80%;}

@media screen and (min-width: 740px) {
#mgcontent{padding:160px 0 0; gap:160px;}

#mgsec01 .mgsec01-top{flex-direction:row; justify-content:space-between; gap:0;}
#mgsec01 .mgsec01-left{width:44%; gap:2.87%;}
#mgsec01 .mgsec01-03{width:44%; padding-top:41.73%;}
#mgsec01 .mgsec01-04{width:70%; margin:120px auto 0;}

#mgsec02 .mgsec02-01{width:70%;}
#mgsec02 .mgsec02-02{width:58%; margin-top:56px;}

#mgsec03 .mgsec03-01{width:64%; margin:0 auto;}
#mgsec03 .mgsec03-row{padding-top:88px; margin-top:0; gap:0;}
#mgsec03 .mgsec03-02{width:44%; padding-top:240px;}
#mgsec03 .mgsec03-03{width:44%;}

#mgsec04 .mgsec04-01{width:64%; margin:0 auto;}
#mgsec04 .mgsec04-02-03{max-width:900px; margin:0 auto;}
#mgsec04 .mgsec04-02{width:48%; margin:96px 0 0;}
#mgsec04 .mgsec04-03{width:48%; margin:56px 0 0 auto;}
#mgsec04 .mgsec04-04{width:56%; margin:96px auto 0;}
#mgsec04 .mgsec04-05{width:70%; margin:160px auto 0;}
#mgsec04 .mgsec04-06{width:48%; margin:80px auto 0;}

#mgsec05{padding-top:0;}
#mgsec05 .mgsec05-01{width:64%; margin:0 auto; padding-top:0;}
#mgsec05 .mgsec05-02{width:40%; margin:72px 0 0;}
#mgsec05 .mgsec05-03{width:48%; margin:72px auto 0;}

#mgsec06{gap:12px;}
#mgsec06 > div{width:15%;}
}

.mgcredit{margin:0; padding-top:48px; font-family: "Amethysta", serif; font-weight:400; font-size:10px; line-height:1.6;}
.mgcredit .item-buy-card-item{display:flex; gap:0 8px; justify-content: center; flex-wrap:wrap;}
.mgcredit .mitemset{display:flex; gap:0 10px; justify-content:center;}
.mgcredit .coming{width:100%;}
.mgcredit a{color:#000; font-weight:700;}
.mgcredit a:before{content:"["; padding-right:4px;}
.mgcredit a:after{content:"]"; padding-left:4px;}
@media screen and (min-width: 740px) {
.mgcredit{font-size:12px;}
}

#mgfooter{margin:100px 0 50px; font-family: "Amiri", serif; font-weight:700; font-size:10px; line-height:1.6;}
#mgfooter .mgftcredit{margin-bottom:140px;}
#mgfooter .mgftlogo{width:50vw; margin:0 auto 20px; max-width:140px;}
#mgfooter .mgftinfo{margin-bottom:30px; line-height:1.6;}
#mgfooter .mgftinfo a{text-decoration:underline;}
@media screen and (min-width: 740px) {
#mgfooter{margin:200px auto 90px; font-size:12px;}
#mgfooter .mgftcredit{margin-bottom:200px;}
#mgfooter .mgftinfo{margin-bottom:60px;}
#mgfooter .mgftinfo ul{display:flex; gap:0 20px; justify-content:center;}
}

/* ========== SP (<=739px) Figma 6:140 準拠 ========== */
@media screen and (max-width: 739px) {
#mgcontent{padding:80px 0 0; gap:80px;}

#mgfv .mgfvset{aspect-ratio:400/533;}
#mgfv .mgfv-title{position:absolute; left:23.625%; top:53.85%; width:52.725%; height:31.2%; z-index:2;}
#mgfv .mgfv-title img{width:100%; height:100%; display:block;}
.mgfvtxt{margin:40px auto 0; font-size:10px;}

#mgsec01 .mgsec01-top{flex-direction:column; gap:40px; align-items:flex-start;}
#mgsec01 .mgsec01-left{width:75.4%; gap:16px; margin:0;}
#mgsec01 .mgsec01-01,#mgsec01 .mgsec01-02{width:100%;}
#mgsec01 .mgsec01-03{width:85%; margin:0 0 0 auto; padding-top:0;}
#mgsec01 .mgsec01-04{width:100%; margin:48px 0 0;}

#mgsec02 .mgsec02-01{width:100%;}
#mgsec02 .mgsec02-02{width:85%; margin-top:40px;}

#mgsec03 .mgsec03-01{width:100%;}
#mgsec03 .mgsec03-row{flex-direction:column; justify-content:flex-start; align-items:flex-start; padding-top:48px; gap:48px; margin-top:0;}
#mgsec03 .mgsec03-02{width:63.425%; margin:0 0 0 5%; padding-top:0;}
#mgsec03 .mgsec03-03{width:50.25%; margin:0 5% 0 auto;}

#mgsec04 .mgsec04-01{width:100%; margin:0;}
#mgsec04 .mgsec04-02{width:40%; margin:56px 0 0 5%;}
#mgsec04 .mgsec04-03{width:40%; margin:24px 5% 0 auto;}
#mgsec04 .mgsec04-04{width:79.375%; margin:56px 0 0;}
#mgsec04 .mgsec04-05{width:100.75%; margin:96px 0 0;}
#mgsec04 .mgsec04-06{width:65.175%; margin:56px auto 0;}

#mgsec05 .mgsec05-01{width:100%; margin:0; padding-top:0;}
#mgsec05 .mgsec05-02{width:74.875%; margin:61px auto 0;}
#mgsec05 .mgsec05-03{width:92.5%; margin:61px auto 0;}

#mgsec06{gap:5px;}
#mgsec06 > div{width:25%;}

.mgcredit{padding-top:24px;}
}

.fadeInTrigger{opacity: 0;}
.fadeUp{animation-name:fadeInAnime; animation-duration:1s; animation-fill-mode:forwards; opacity:0;}
@keyframes fadeInAnime{
from {opacity: 0; transform: translateY(30px);}
to {opacity: 1; transform: translateY(0);}
}

#bc-free #fixobj {
  opacity: 0;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
#bc-free.slide1 #fixobj, #bc-free.slide2 #fixobj, #bc-free.slide3 #fixobj, #bc-free.slide4 #fixobj, #bc-free.slide5 #fixobj, #bc-free.slide6 #fixobj, #bc-free.slide7 #fixobj, #bc-free.slide8 #fixobj, #bc-free.slide9 #fixobj, #bc-free.slide10 #fixobj {
  opacity: 1;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
#bc-free.slide1 .f1, #bc-free.slide2 .f2, #bc-free.slide3 .f3, #bc-free.slide4 .f4, #bc-free.slide5 .f5, #bc-free.slide6 .f6, #bc-free.slide7 .f7, #bc-free.slide8 .f8, #bc-free.slide9 .f9, #bc-free.slide10 .f10 {
  display: block !important;
}
#bc-free .item-d-none a {
  pointer-events: painted;
}
#bc-free .item-d-none a .buy-text,
#bc-free .item-d-none a .buy-wrap {
  pointer-events: painted;
}
#bc-free #con11 {
  opacity: 0;
}

.item-d-none a {
  pointer-events: none !important;
}

.item-d-none .buy-wrap {
  display: none !important;
}

@media screen and (min-width: 769px) {
.sp-br {
  display: none;
}
}
@media screen and (max-width: 768px) {
  .sp-br {
    display: inline;
  }
}