.ftool-wrapper .col--02--Y {width: auto; max-width: 100vw; margin: 0 auto;}
.ftool-wrapper > .article {padding-bottom: 60px;}
.ftool-wrapper .ref-item .price.discount{color:#fff;}
.ftool-wrapper #pcon001 .ref-item .price.discount{color:#000;}
.ftool-wrapper .detail .col--02--Y{width: auto; max-width: 100vw;}

body{overflow-x: hidden; margin: 0; padding: 0;}
main .l-inner{padding:0!important; width:100%!important; margin:0;}
main .l-inner .l-separator{width:982px!important; margin:0 auto;}
#mgcontainer img{max-width: 100%; height: auto; vertical-align: top;}
#mgcontainer .smp{display:block;}
#mgcontainer .smp-se{display:block;}
#mgcontainer .pc{display:none;}

@media only screen and (min-width:340px) {
#mgcontainer .smp-se{display:none;}
}

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

#mgcontainer{position:relative; overflow:hidden; width: 100%; margin: 0; padding: 0;  }
#mgcontainer .cf:before,.cf:after{content:"";display:table;}
#mgcontainer .cf:after{clear:both;}
#mgcontainer .cf{*zoom:1;}


.mgblock{max-width:982px; margin:0 auto;}
.mgblock2{max-width:1440px; margin:0 auto;}
.mgpos{position:relative;}
.img50{width:50%;}
.img60{width:60%;}
.img70{width:70%;}
.img80{width:80%;}
.img90{width:90%;}
.img100{width:100%;}

.mgcredit{color: #000; letter-spacing:0;   display: flex;
  justify-content: center; margin: 0 auto;
  text-align: center;}
.mgcredit ul{font-family: "neue-haas-grotesk-text", sans-serif; font-weight: 400; font-style: normal; font-size:clamp(0.425rem, 0.23rem + 1vw, 0.6rem); letter-spacing:0;  display: flex; flex-wrap: wrap; 
  justify-content: space-between;  margin-top: 3vw; padding: 0 2vw; gap: 5px;}

#modal .mgcredit ul{padding: 0;}

.mgcredit ul li{font-size: 11px; list-style: none; text-align: center;  width: calc(50% - 5px); position: relative; line-height: 2;}


.mgcredit .items { display: flex; text-align: left;}

.buy-text{padding-left: 2px; margin-left: 5px;}
.mgcredit ul li a{font-size:clamp(0.425rem, 0.23rem + 1vw, 0.6rem); font-family: "neue-haas-grotesk-text", sans-serif;  font-style: normal;line-height:3; color:#000; text-decoration:none; border:0.1px solid #000; border-radius: 50px; padding: 0 5px;}
.mgcredit ul li a .buy-wrap{margin-left:2px; font-size:clamp(0.425rem, 0.23rem + 1vw, 0.6rem); font-family: "neue-haas-grotesk-text", sans-serif; font-weight: 500; font-style: normal;line-height:1; text-decoration:none; border:1px solid #fff; padding:0 5px; border-radius:50px; }
.mgcredit .attention {
  display: block;
  text-align: left;
  font-size: 0.9em;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-style: normal;
  line-height: 0.8;
  margin-top: 2px;
  margin-left: 0;
}

#modal .mgcredit ul li{width: 100%;}

@media only screen and (min-width:740px) {
.mgcredit ul{margin-top: 30px;}
.mgcredit ul li{font-size: 12px; }
}
@media only screen and (min-width:900px) {
.mgcredit ul li{font-size: 14px; }
}


#mgfv{position: relative; width: 100%;}
#mgfv .fvimage{width: 100%;}
#mgfv .fvtitle{top: 0; width: 94%; margin: 3vw auto;}
#mgfv .fvlogo{bottom: 0vw; width: 22.4%; left: 3vw; position:absolute;}

@media only screen and (min-width:740px) {
#mgfv .fvimage{width: 73%; margin: 0 0 0 9%;}
#mgfv .fvtitle{top: 33vw; width: 39.7%; right: 11vw; position:absolute;}
#mgfv .fvlogo{top: 59.5vw; width: 14vw; left: 9%; position:absolute;}
}

.gallery{width: 100%; margin-top: 16vw;}
.mgimg img{width: 100%; height: auto; cursor: pointer;}
.mgsec{margin-top: 5vw;}


.mgsectxt img{width: 100%;}

.item0101{width: 59.7vw;}
.item0102{width: 66vw; margin: -70vw 0 0 auto;}


.mgsec02{position: relative; margin: 16vw 4vw 0 4vw;}

.item0201{width: 78vw; margin: 0 2vw 0 auto;}
.item0202{width: 42vw; margin: 0 0 0 0;}
.item0203{width: 50vw; margin: -43vw 2vw 0 auto;}

.mgsec03{margin: 16vw 0 0 0; position: relative;}

.mgsec04{margin: 16vw 0 0 0; position: relative;}

.item0401{width: 64vw; margin: 0 auto 0 auto; z-index: 2; position: relative;}
.item0402{width: 58vw; margin: -8vw auto 0 9vw; z-index: 1; position: relative;}

.mgsec05{margin: 16vw 0 0 0; position: relative;}
.title01{width: 33.5vw; margin: 0 13vw 0 auto; z-index: 3; position: relative;}
.mgsec05 .mgcredit ul li{width: 100%;}

.item0501{width: 73vw; margin: -10vw auto 0 0; z-index: 2; position: relative;}
.item0502{width: 52vw; margin: -55vw -13vw 0 auto; z-index: 1; position: relative; }

.mgsec06{margin: 16vw 0 0 0; position: relative;}
.mgsec06 .flexbox{display: flex; gap: 1vw;}

.mgsec07{margin: 16vw 0 0 0; position: relative;}
.title02{width: 54vw; margin: 0 6vw 0 auto; z-index: 3; position: relative;}
.item0701{width: 82vw; margin: -10vw auto 0 auto; z-index: 2; position: relative;}


.mgsec08{margin-top: 16vw; position: relative;}
.item0801{width: 53vw; margin: 0 auto 0 0; position: relative;}
.item0802{width: 76vw; margin: -25vw 0 0 auto; z-index: 1; position: relative; }
.mgsec09{margin: 16vw 0 0 0; position: relative;}
.title03{width: 100%; margin: 0 6vw 0 auto; z-index: 3; position: relative;}
.item0901{width: 70vw; margin: -4.5vw auto 0 auto; z-index: 2; position: relative;}


.mgsec10{margin: 16vw 0 0 0; position: relative;}
.item1001{width: 79vw; margin: 8vw 0 0 4vw; position: relative;}

.item1002{width: 68vw; margin: 8vw 2vw 0 auto; position: relative;}
.title04{width: 88vw; margin-top: -5vw; position: relative; z-index: 2;}


@media only screen and (min-width:740px) {
.item0101{width: 33vw; margin-left: 19vw;}
.item0102{width: 36.5vw; margin: -47vw 19vw 0 auto;}


.mgsec02{position: relative; margin: 16vw 0 0 0;}

.item0201{width: 57.2vw; margin: 0 19vw 0 auto;}
.item0202{width: 30vw; margin: 0 0 0 18.5vw;}
.item0203{width: 33vw; margin: -30.7vw 19vw 0 auto;}
.mgsec02 .mgcredit{width: 30vw; position: absolute; bottom: 0vw; left: 18vw;}
.mgsec02 .mgcredit ul li{width: 100%; text-align: left;}
.mgsec02 .mgcredit ul{text-align: left; padding: 0; gap: 0;}

.mgsec03{margin: 16vw 0 0 0; position: relative;}
.item0301{width: 47.3vw; margin: 0 auto;}
.mgsec03 .mgcredit{width: 47.3vw; padding: 0;}

.mgsec04{margin: 16vw 0 0 0; position: relative;}

.item0401{width: 43vw; margin: 0 12.2vw 0 auto; z-index: 2; position: relative;}
.item0402{width: 37vw; margin: -51vw auto 0 9.3vw; z-index: 1; position: relative;}

.mgsec05{margin: 16vw 0 0 0; position: relative;}
.title01{width: 19.3vw; margin: 0 28vw 0 auto; z-index: 3; position: relative;}

.item0501{width: 44vw; margin: -17vw auto 0 9.3vw; z-index: 2; position: relative;}
.item0502{width: 36vw; margin: -43vw 12.2vw 0 auto; z-index: 1; position: relative; }

.mgsec06{margin: 16vw 0 0 0; position: relative;}
.mgsec06 .flexbox{display: flex;  width: 63.5vw; margin: 0 auto; gap: 3vw;}
.mgsec06 .sp{display: none;}

.mgsec07{margin: 16vw 0 0 0; position: relative;}
.title02{width: 28.5vw; margin: 0 21vw 0 auto; z-index: 3; position: relative;}
.item0701{width: 43.2vw; margin: -11.5vw auto 0 16.3vw; z-index: 2; position: relative;}


.mgsec08{margin-top: 16vw; position: relative;}
.item0801{width: 34vw; margin: 0 auto 0 9.8vw; position: relative;}
.item0802{width: 44vw; margin: -45vw 15.7vw 0 auto; z-index: 1; position: relative; }

.mgsec09{margin: 16vw 0 0 0; position: relative;}
.title03{width: 62vw; margin: 0 auto 0 auto; z-index: 3; position: relative;}
.item0901{width: 44.5vw; margin: -2.5vw auto 0 auto; z-index: 2; position: relative;}


.mgsec10{margin: 16vw 0 0 0; position: relative;}
.item1001{width: 41.7vw; margin: 8vw 0 0 4vw; position: relative;}
.mgsec10 .mgcredit{position: absolute; top: 13vw; left: 60vw;}
.mgsec10 .mgcredit ul li{width: 100%; padding: 0; text-align: left;}

.item1002{width: 36vw; margin: 8vw 21.5vw 0 auto; position: relative;}
.title04{width: 46.3vw; margin: -3vw 0 0 28vw; position: relative; z-index: 2;}


}


  /* ===== モーダル ===== */
  .modal {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(255, 255, 255, 0.9);
    z-index: 1000;
    justify-content: center;
    align-items: center;
  }

  /* 中身スクロール可能 */
  .modal-inner {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    box-sizing: border-box;
    padding: 40px 0; /* 下に余白 */
  }

  .modal-section {
width: 80%;
    margin: 0 auto 0 auto;
    max-width: 800px;
    padding: 60px 0;
  }

  .modal-section:last-child {
    border-bottom: none;
  }

  .modal-section img {
    width: 100%;
    margin-bottom: 10px;
  }

  .modal-section h2 {
    margin: 10px 0 5px;
    font-size: 22px;
  }

  .modal-section p {
    color: #333;
    line-height: 1.6;
  }

  /* 閉じるボタン：常に右下固定 */
  .modal-close {
    position: fixed;
    bottom: 20px;
    right: 20px;
background: none;
    color: #000;
    border: none;
    font-size: 52px;
    cursor: pointer;
    z-index: 1100;
    display: flex;
    justify-content: center;
    align-items: center;
  }


@media only screen and (min-width:740px) {
  .modal-inner {
    height: 100%;
    overflow-y: auto;
    box-sizing: border-box;
    padding: 40px 0;
  }
.modal-section{display: flex; max-width: 800px; margin: 0 auto;}
.modal-section img{width: 50%;}
.modal-section .mgcredit{width: 40%; margin:0 0 0 10%; display: block;}
.modal-section .mgcredit ul{display: block; margin-top: 0;}
}


#mgfooter{margin: 25% 0; font-family: "neue-haas-grotesk-text", sans-serif; font-weight: 400; font-style: normal; font-size:12px; text-align:center; line-height:1.6; color: #000;}
#mgfooter img{width: 100%;}
#mgfooter .c_logo{max-width:196px; margin:40px auto;}
#mgfooter .c_sns{margin-bottom:28px;}
#mgfooter a{color: #000; text-decoration: none; line-height: 1.5;}
#mgfooter .mgfooterinfo{display:block; margin:60px auto 0; padding-top:60px; border-top:1px solid #000; width:80%; max-width:1000px;}
#mgfooter .mgfooterinfo p{fotn-size:12px;}
#mgfooter .mgfooterinfo .mgtitle{font-size:20px;}
#mgfooter .mgfooterinfo .mgtitle span{display:block; font-size:14px;}
@media only screen and (min-width:740px) {
#mgfooter{margin: 20% auto 18% auto;}
}

.ftool-wrapper .line_up_two .price{font-size: 9px;}
.ftool-wrapper .ref-item .brand{font-size:7px;}
.ftool-wrapper .ref-item .name{font-size:10px; margin-bottom: 5px; line-height: 1.5; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; max-height: 4em;}

.ftool-wrapper .line_up_two{float:none; width:100%; padding-right:10px; box-sizing:border-box;}
.item_reference_b--tpl-Y{display: flex;}
.single .item_reference_b--tpl-Y{display: block;}

.ftool-wrapper .ref-item{margin: 0!important; margin-top:10px!important; marin-bottom:0;}
.ftool-wrapper .ref-item .thumb{width: 40px;}
.ftool-wrapper .ref-item .brand, .ftool-wrapper .ref-item .name, .ftool-wrapper .ref-item .price {
margin-left: 45px;}


@media only screen and (min-width:740px) {
.ftool-wrapper .ref-item .thumb{width: 53px;}
.ftool-wrapper .ref-item .brand, .ftool-wrapper .ref-item .name, .ftool-wrapper .ref-item .price {
margin-left: 58px;}
.thumbnail-item{ width: 7%; margin-bottom: 15px;}
.itemtitle{padding-top: 0; font-size: 50px;  }
.single ul li.line_up_two{width: 50%;}
.single .item_reference_b--tpl-Y{display: flex;}
.ftool-wrapper .col--02 > div, .ftool-wrapper .col--02--C > div, .ftool-wrapper .col--02--Y > div, .ftool-wrapper .col--02--C--02 > div > img, .ftool-wrapper .col--02--C--03 > div > img, .ftool-wrapper .col--02--C--04 > div > img, .ftool-wrapper .col--02--C--02 > div > a > img, .ftool-wrapper .col--02--C--03 > div > a > img, .ftool-wrapper .col--02--C--04 > div > a > img{margin-bottom:0;}

.ftool-wrapper .col--02--C{width: 100%;}
.ftool-wrapper .line_up_two .price{font-size: 11px;}
.ftool-wrapper .ref-item .brand{font-size:14px;}
.ftool-wrapper .ref-item .name{font-size:11px; }
}




.fadeInTrigger,
.fadeInTriggerb,
.fadeIn2Trigger,
.fadeIn3Trigger {
  opacity: 0;
  transform: translateY(40px); /* 下から少し上がる */
  transition: all 0.8s ease-out;
  will-change: opacity, transform;
}

.fadeIn {
  opacity: 1;
  transform: scale(1);
}

.fadeInb {
  opacity: 1;
  transform: scale(1);
  transition-delay: 0.3s;
}

.fadeIn2 {
  opacity: 1;
  transform: scale(1);
  transition-duration: 1s;
}

.fadeIn3 {
  opacity: 1;
  transform: scale(1);
  transition-duration: 1.2s;
}