@charset "utf-8";
ul{
    list-style: none;
    margin: 0;
    padding: 0;
}

a{
    text-decoration: none;
    color: #000;
}

body{
    overflow-x: hidden;
    font-family: 'M PLUS 1p', sans-serif !important;
}

th{text-align: left;}

#loading {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 99999;
  background: #fff;
  text-align: center;
}
#loading_logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#loading .kvArea {
  width: 20%;
}
#loading .kvArea .img_box {
  text-align: center;
}
#loading .kvArea {
  max-width: 20%;
  height: auto;
}

.img_box {
    width: 60%;
    margin-left: auto;
    margin-right: auto;
}

.img_box img{
    width: 100%;
}

.fadeUp {
  animation-name: fadeUpAnime;
  animation-duration: 1.2s;
  animation-delay: 1.2s;
  animation-fill-mode: forwards;
  opacity: 1;
}
@keyframes fadeUpAnime {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-100px);
  }
}

.slider-arrow prev, .slider-arrow next, .diapolon-spec01-gold-ph, .ph-br, .gassin-ph, .ph-kv-outer img, .diapolon-spec01-sv-ph, .complete-title-ph,
.complete-img-ph, .ph-button-complete, .goldcard01-title-ph,
.goldcard-table-ph, .ph-button-single, .ph-button-sv, #nextBtn, #prevBtn, .accordion-008 summary::-webkit-details-marker, .ph-button-gold, .complete-ph-outer{
    display: none;
}

.header-outer{
    display: flex;
    justify-content: space-between;
}

.header-category ul{
    display: flex;
    gap: 2vw;
}

.header-category{ padding: 2vw 3vw 0 0vw;}
.header-logo{ padding: 1vw 0 0 1vw; }

.header-logo img{ width: 18vw;}

.head_navi{padding:2.8vw 3vw 2vw 0;}

.head_navi ul{
    justify-content: center;
    display: flex;
    gap: 2vw;
}

.head_navi ul li a{
    color: rgb(22, 90, 126);
}

.copylight{
    color: white;
    padding: 5px;
}

.kv-container{
    background-image: url(https://gigaplus.makeshop.jp/kinchara/diapolon/assets/images/pc/pc-kvbg.png);
    background-size: contain;
    background-repeat: repeat;
    height: auto;
}

.pc-kv-outer{
    display: flex;
    justify-content: center;

}

.pc-kv-outer img{
    max-width: 1279px;
    width: clamp(767px, 100%, 1279px);
}

.main-bg{
    background-image: url(https://gigaplus.makeshop.jp/kinchara/diapolon/assets/images/pc/bg.jpg);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    height: auto;
    min-height: 100vh;
}

.gassin-pc img{
    width: 279px;
    position: absolute;
    z-index: 1;
    left:-130px;
    top:50px;
}

.subtitle-container{
    max-width: 1279px;
    width: 983px;
    height: 650px;
    width: min(983px, 90%);
    margin-left: auto;
    margin-right: auto;
    position: relative;

}

.subtitle-outer{
    width: 983px;
    position: relative;
    z-index: 2;
    display: flex;
    gap: 2.3vw;
    top:180px;
}

.subtitle-text-inner{
    width: 490px;
    width: min( 490px, 40vw);
}

.subtitle-text-inner span{
    font-size: 28px;
    font-family: "M PLUS 1p";
    font-weight: 900;
    color: #fdaa04;
    -webkit-text-stroke: 3.5px #000;
    paint-order: stroke;
    letter-spacing: 0.1em; 
}

.subtitle-text-inner p{
    padding-top: 15px;
    font-size: 20px;
    font-family: "M PLUS 1p";
    font-weight: 500;
    color: white;
    letter-spacing: 0.05em;
}

.subtitle-img img{
    width: 448px;
    max-width: 448px;
}

.introduction-container{
    max-width: 1279px;
    margin-left: auto;
    margin-right: auto;
}

.figure-title{
    width: 900px;
    min-width: min(900px, 90%);
    margin-left: auto;
    margin-right: auto;
}

.figure-title span{
    position: relative;
    display: inline-block;
    font-weight: 900;
    font-family: 'M PLUS 1p', sans-serif !important;
    font-size: 30px;
    color: white;
    -webkit-text-stroke: 6px #000;
    paint-order: stroke;
    letter-spacing: 0.4em;
    z-index: 2;
    padding-left: 20px;
}

.figure-title span::after{
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    height: 11px;
    background-color: #DB0032;
    width: 900px; 
    min-width: min(976px, 90%);
    z-index: -1; 
}

.gold-small-outer{
    position: relative;
    height: 1100px;
}

.sv-outer{
    position: relative;
    height: 900px;
}

.gold-small-title, .sv-title{
    width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.gold-small-title img, .sv-title img{
    max-width: 1279px;
    width: 730px;
    padding-top: clamp(0px, 3vw, 38px);
}

.gold-table-outer, .sv-table-outer{
    width: 354px;
    height: 270px;
    margin: 100px 0 115px 42px;
}

.gold-table-outer td, .sv-table-outer td{
    width: 250px;
    padding-left: 5px;
    color: #FFF;
    font-family: "M PLUS 1p";
}

.gold-table-outer th, .sv-table-outer th{
    width: 104px;
    padding-left: 5px;
    color: #FFF;
    font-family: "M PLUS 1p";
}

.gold-table-outer, .gold-table-outer td, .gold-table-outer th, .sv-table-outer, .sv-table-outer td, .sv-table-outer th{
    border-collapse: collapse;
    border: 1px solid #FFF;
}

.gold-small-group, .sv-group{
    display: flex;
    width: 1020px;
    height: 480px;
    position: absolute;
    top: 111px;
    left: 53%;
    transform: translateX(-50%);
}

.gold-diapolon-img01, .sv-diapolon-img01{
    width: 300px;
    height: 300px;
    margin: 85px 0 100px 0;
}

.diapolon-spec01-gold{
    width: 400px;
    position: absolute;
    left: 622px;
}

.diapolon-spec01-sv{
    width: 500px;
    position: absolute;
    left: 517px;
}

.image-gallery-wrapper{
    position: absolute;
    width: 100%;
    left: 0;
    top: 510px;
    z-index: 5;
}

.image-gallery{
    display: flex;
    gap: 45px;
    justify-content: center;
    height: 300px;
}

.zoom-target{
    width: 100px;
    height: 100px;
    cursor: pointer;
    transition: transform 0.3s ease, z-index 0s;
    object-fit: cover;
    position: relative;
    z-index: 1;
}

.zoom-target.is-expanded{
    transform: scale(3);
    z-index: 10;
}

.gold-small-text-outer{
    position: absolute;
    top: 780px;
    width: 1000px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #3589C0;
    padding: 25px 0px 25px 90px;
    outline: 11px dotted #92D7D7;
    outline-offset: -6px;
}

.gold-small-text-outer span{
    font-weight: 900;
    font-size: 30px;
    color: white;
    -webkit-text-stroke: 6px #000;
    paint-order: stroke;
}

.gold-small-text-outer p{
    font-family: "M PLUS 1p";
    letter-spacing: 0.15em;
    line-height: 1.7em;
}

.pc-button-gold{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 1030px;
}

.pc-button-gold img, .pc-button-sv img, .pc-button-complete img{
    width: 229px;
}

.pc-button-sv{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top:818px;
}

.present-container{
    margin-top: 100px;
    position: relative;
    width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.present-bg1{
    position: absolute;
    left: 580px;
    top: -100px;
}

.present-bg2{
    position: absolute;
    top:100px;
    left: -220px;
}

.present-bg1 img{
    width: 550px;
    transform: rotate(10deg);
    
}

.present-bg2 img{
    width: 350px;
}

.present-title, .goldcard-title, .question-title{
    width: 900px;
    min-width: min(900px, 90%);
    margin-left: auto;
    margin-right: auto;
}

.present-title span, .goldcard-title span, .question-title span{
    position: relative;
    font-family: 'M PLUS 1p', sans-serif !important;
    display: inline-block;
    font-weight: 900;
    font-size: 30px;
    color: white;
    -webkit-text-stroke: 6px #000;
    paint-order: stroke;
    letter-spacing: 0.4em;
    z-index: 2;
    padding-left: 20px;
}

.present-title span::after, .goldcard-title span::after, .question-title span::after{
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    height: 11px;
    background-color: #DB0032;
    width: 900px; 
    min-width: min(976px, 90%);
    z-index: -1; 
}

.present-text-outer{
    width: 840px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    gap: 20px;
    position: relative;
    margin-top: -80px;
}

.present-title-img{
    width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.present-title-img img{
    width: 470px;
    margin-top: 10px;
}

.present-text-outer p{
    width: 470px;
    letter-spacing: 0.08em;
    font-family: "M PLUS 1p";
    color: #FFF;
    margin: 100px 0 80px 0;
}

.present-text-outer img{
    width: 350px;
}
/*純金カード*/
#goldcard-title{
    padding-top: clamp(0px, 6vw, 77px);
}

.complete-outer{
    max-width: 1317px;
    margin-left: auto;
    margin-right: auto;
}

.complete-title{
    width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.complete-title-pc{
    width: 890px;
    padding-top: clamp(0px, 2vw, 26px);
}

.complete-img{
    width: 96%;
    max-width: 1317px;
    padding-top: clamp(0px, 5vw, 64px);
}

.complete-img-pc{
    width: 100%;
}

.pc-button-complete{
    width: 229px;
    margin-left: auto;
    margin-right: auto;
}

.complete-price{
    width: 400px;
    margin-left: auto;
    margin-right: auto;
}

.complete-price p{
    display: inline-block;
    font-family: "M PLUS 1p";
    font-weight: 900;
    font-size: 25px;
    color: white;
    -webkit-text-stroke: 6px #000;
    paint-order: stroke;
    letter-spacing: 0.1em;
    padding-left: 20px;
}

.pc-button-complete{
    padding-top: clamp(0px, 2vw, 26px);
}

.goldcard-single-container{
    position: relative;
    height: 900px;
    width: 1250px;
    margin-left: auto;
    margin-right: auto;
}

.goldcard-single-title{
    position: absolute;
    top: 140px;
    left: 25px;
}

.goldcard-single-title p{
    display: inline-block;
    font-family: "M PLUS 1p";
    font-weight: 900;
    font-size: 28px;
    color: white;
    -webkit-text-stroke: 6px #000;
    paint-order: stroke;
    letter-spacing: 0.3em;
    transform: rotate(-8deg);
    border-bottom: 5px solid #000;
}

.goldcard-single-outer{
    width: 1032px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    gap: clamp(0px, 2vw, 26px);
    padding-top: 210px;
}

.goldcard01-title-pc,
.goldcard-img01 {
    display: block;
}

.goldcard01-title-pc{
    width: 311px;
}

.goldcard-text01{
    align-items: center;
    text-align: center;
}

.goldcard-text01 p{
    font-family: "M PLUS 1p";
    font-size: 25px;
    font-weight: 800;
}

.goldcard-text01 p span{
    font-size: 18px;
}

.goldcard-img01{
    width: 355px;
    margin: clamp(0px, 3vw, 38px) 0 0 0;
    margin-bottom: 43px;
}

.goldcard-img02{
    width: 196px;
    margin-top: clamp(0px, 1vw, 13px);
}

.pc-button-single img{
    width: 229px;
}

#price01{
    padding: clamp(0px, 3vw, 38px) 0 clamp(0px, 1.5vw, 19px) 0;
}

#price02, #price03{
    padding: clamp(0px, 1.5vw, 19px) 0 clamp(0px, 1.5vw, 19px) 0;
}

.goldcard-img01, .goldcard-img02{
    box-shadow: 0 0 20px 10px rgba(255, 255, 255, 0.3);
}

.goldcard-table-outer{
    width: 1100px;
    max-width: 1140px;
    margin-left: auto;
    margin-right: auto;
}

.goldcard-table-pc{
    width: 100%;
}
/*よくあるご質問*/
.question-container{
    width: 1000px;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

#question-title{
    padding: clamp(0px, 3vw, 38px) 0 clamp(0px, 2vw, 26px) 0;
}

.accordion-008 {
    max-width: 1000px;
    margin-bottom: 10px;
    border-radius: 5px;
    box-shadow: 0 7px 15px -5px rgb(0 0 0 / 5%);
    background-color: #ECAE27;
}

.accordion-008 summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    padding: clamp(0px, 1em, 16px) clamp(0px, 2em, 32px);
    color: #333333;
    font-weight: 600;
    cursor: pointer;
}

.accordion-008 summary::before,
.accordion-008 summary::after {
    width: 3px;
    height: clamp(0px, .9em, 14px);
    border-radius: 5px;
    background-color: #333333b3;
    content: '';
}

.accordion-008 summary::before {
    position: absolute;
    right: 2em;
    rotate: 90deg;
}

.accordion-008 summary::after {
    transition: rotate .3s;
}

.accordion-008[open] summary::after {
    rotate: 90deg;
}

.accordion-008 p {
    transform: translateY(-10px);
    opacity: 0;
    margin: 0;
    padding: clamp(0px, .3em, 5px) clamp(0px, 2em, 32px) clamp(0px, 1.5em, 24px);
    color: #333333;
    transition: transform .5s, opacity .5s;
}

.accordion-008[open] p {
    transform: none;
    opacity: 1;
}

.contact-container{
    display: flex;
    width: 741px;
    margin-left: auto;
    margin-right: auto;
    gap: clamp(0px, 1vw, 13px);
    padding: clamp(0px, 2vw, 26px) 0 clamp(0px, 2vw, 26px) 0;

}

.contact-container p{
    font-family: "M PLUS 1p";
    font-weight: 500;
    padding: clamp(0px, 1vw, 13px) 0 clamp(0px, 1vw, 13px) 0;
}

.contact-button img{
    width: 261px;
}

.footer{
    width: 100%;
    text-align: center;
    padding: clamp(0px, 2vw, 26px) 0 clamp(0px, 2vw, 26px) 0;
}
.footer-logo{width: clamp(0px, 16vw, 205px);}
.footer-nav{ display: flex; gap: clamp(0px, 2.5vw, 32px); justify-content: center;}
.copyright{ font-size: clamp(0px, 1.05vw, 13.5px); padding-top: clamp(0px, 1vw, 13px);}

@media screen and (min-width: 768px) and (max-width: 1200px){
    .gassin-pc img {
        width: 25vw; 
        max-width: 279px;
        position: absolute;
        z-index: 1;
        left: -11.6vw;
        top: 4.5vw;
        height: auto;
    }
     .subtitle-container {
        width: 90%; 
        max-width: 983px;
        height: auto;
        min-height: 58vw; 
        margin-left: auto;
        margin-right: auto;
        padding-bottom: 5vw;
    }

    .subtitle-outer {
        width: 100%;
        display: flex;
        align-items: center;
        gap: 3%;
        top: 16vw; 
    }

    .subtitle-text-inner {
        width: 50%;
    }

    .subtitle-text-inner span {
        font-size: clamp(20px, 2.5vw, 28px);
        -webkit-text-stroke: 2.5px #000;
        letter-spacing: 0.1em;
    }

    .subtitle-text-inner p {
        padding-top: 1.5vw;
        font-size: clamp(15px, 1.8vw, 20px);
        line-height: 1.5;
    }

    .subtitle-img {
        width: 45%;
    }

    .subtitle-img img {
        width: 100%; 
        max-width: 448px;
        height: auto;
    }
}

@media screen and (min-width: 768px) and (max-width: 1118px) {
    .main-bg{
        background-size: 100% 100%;
        background-repeat: no-repeat;
        height: auto;
        min-height: 100vh;
    }

    .figure-title, .present-title, .goldcard-title, .question-title {
        width: 80.5vw;
        min-width: 0;
        margin-top: 2vw;
    }

    .figure-title span, .present-title span, .goldcard-title span, .question-title span {
        font-size: 2.7vw;
        letter-spacing: 0.4em;
        padding-left: 1.8vw;
        -webkit-text-stroke: 0.5vw #000; 
    }

    .figure-title span::after ,.present-title span::after, .goldcard-title span::after,
    .question-title span::after{
        width: 80.5vw;
        min-width: 0;
        height: 1vw;
        bottom: 0;
    }

    .gold-small-outer {
        width: 100%;
        overflow: hidden;
        height: 98.3vw; 
    }

    .gold-small-title {
        width: 70%;
    }
    .gold-small-title img {
        width: 100%;
        height: auto;
    }

    .gold-small-group {
        width: 91.2vw;
        height: 42.9vw;
        top: 10vw;
    }

    .gold-diapolon-img01 {
        width: 26.8vw; 
        height: 26.8vw;
        margin: 7.6vw 0;
    }

    .gold-table-outer {
        width: 31.6vw; 
        height: 24.1vw; 
        margin: 8.9vw 0 10.2vw 3.7vw;
        font-size: 1.2vw; 
    }
    .gold-table-outer th, .gold-table-outer td {
        width: auto;
        padding: 0.5vw;
    }

    .diapolon-spec01-gold {
        width: 35.7vw;
        left: 55.6vw; 
    }

    .image-gallery-wrapper {
        top: 43vw;
        height: auto;
    }

    .image-gallery-container {
        position: relative;
        overflow: visible;
    }

    .image-gallery {
        position: absolute; 
        left: 50%;
        width: 100% !important; 
        max-width: 1000px;
        transform: translateX(-50%) !important; 
        display: flex;
        justify-content: center;
        gap: 2vw;
        padding: 0;
        height: auto;
        z-index: 5;
    }

    .image-gallery .zoom-target:first-child,
    .image-gallery .zoom-target:last-child {
        display: none !important;
    }

    .zoom-target {
        width: 8.9vw !important; 
        height: 8.9vw !important;
        position: relative;
        flex-shrink: 0;
    }

    .gold-small-text-outer {
        top: 69.7vw;
        width: 89.4vw;
        padding: 2.2vw 0 2.2vw 8vw;
        outline-width: 1vw;
        outline-offset: -0.5vw;
    }
    .gold-small-text-outer p {
        font-size: 1.4vw;
        line-height: 1.7em;
    }
    .gold-small-text-outer span {
        font-size: 2.6vw;
        -webkit-text-stroke: 0.4vw #000;
    }

    .pc-button-gold {
        top: 92.1vw;
    }
    .pc-button-gold img {
        width: 20.4vw;
    }

    .sv-outer {
        width: 100%;
        overflow: hidden;
        height: 85vw;
    }

    .sv-title {
        width: 70%;
    }
    .sv-title img {
        width: 100%;
        height: auto;
    }

    .sv-group {
        width: 91.2vw;
        height: 42.9vw;
        top: 10vw;
        position: absolute;
        left: 53%;
        transform: translateX(-50%);
        display: flex;
    }

    .sv-diapolon-img01 {
        width: 26.8vw;
        height: 26.8vw;
        margin: 7.6vw 0;
    }

    .sv-table-outer {
        width: 31.6vw;
        height: 24.1vw;
        margin: 8.9vw 0 10.2vw 3.7vw;
        font-size: 1.2vw;
    }
    .sv-table-outer th, .sv-table-outer td {
        width: auto;
        padding: 0.5vw;
    }

    .diapolon-spec01-sv {
        width: 44.7vw;
        left: 46.2vw;
        position: absolute;
    }

    .pc-button-sv {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: 72vw;
    }
    .pc-button-sv img {
        width: 20.4vw;
    }

    .present-container {
        width: 80.5vw;
        margin-top: 2vw;
    }

    .present-bg1 {
        overflow-x: hidden;
        left: 51.8vw;
        top: -8.9vw;
    }
    .present-bg1 img {
        width: 49.2vw;
    }

    .present-bg2 {
        top: 10vw;
        left: -19.6vw;
    }
    .present-bg2 img {
        width: 30vw;
    }

    .present-title-img {
        width: 100%; 
        max-width: 900px; 
        margin-left: auto;
        margin-right: auto;
        text-align: left; 
    }

    .present-title-img img {
        width: 52.2%; 
        min-width: 350px;
        height: auto;
        margin-top: 10px;
    }

    .present-title-img {
        width: 100%;
        max-width: 900px;
        margin-left: auto;
        margin-right: auto;
    }

    .present-title-img img {
        width: 52.2%;
        height: auto;
        margin-top: 10px;
    }

    .present-text-outer {
        width: 100%; 
        max-width: 840px;
        margin-left: auto;
        margin-right: auto;
        display: flex;
        gap: 2.3%;
        position: relative;
        margin-top: -7vw; 
    }

    .present-text-outer p {
        width: 56%;
        margin: 8vw 0 6vw 0;
        font-size: clamp(14px, 1.5vw, 16px);
        line-height: 1.6;
    }

    .present-text-outer img {
        width: 41.6%;
        height: auto;
        align-self: center;
    }

    .complete-title {
        width: 90%; 
        max-width: 900px;
        margin-left: auto;
        margin-right: auto;
    }

    .complete-title-pc {
        width: 90%; 
        height: auto;
        padding-top: clamp(0px, 2vw, 26px);
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

    .complete-img {
        width: 95%;
        max-width: 1317px;
        margin-left: auto;
        margin-right: auto;
        padding-top: clamp(0px, 5vw, 64px);
    }

    .complete-img-pc {
        width: 100%;
        height: auto;
        display: block;
    }

    .complete-price {
        width: 100%; 
        max-width: 400px;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }

    .complete-price p {
        display: inline-block;
        font-size: clamp(18px, 2.5vw, 25px);
        -webkit-text-stroke: 5px #000;
        letter-spacing: 0.1em;
        padding-left: 0;
    }

    .pc-button-complete {
        width: 25%;
        min-width: 180px;
        margin-left: auto;
        margin-right: auto;
        padding-top: clamp(0px, 2vw, 26px);
    }

    .pc-button-complete img {
        width: 100%;
        height: auto;
    }

    .goldcard-single-container {
        width: 100%;
        max-width: 1250px;
        height: auto;
        padding-bottom: 5vw;
    }

    .goldcard-single-title {
        top: 8vw;
        left: 5vw;
    }

    .goldcard-single-title p {
        font-size: clamp(18px, 2.5vw, 28px);
        -webkit-text-stroke: 3px #000;
        letter-spacing: 0.2em;
    }

    .goldcard-single-outer {
        width: 95%;
        max-width: 1032px;
        padding-top: 18vw;
        display: flex;
        justify-content: center;
        gap: 2vw;
    }

    .goldcard-text01 {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .goldcard01-title-pc {
        width: 100%;
        height: auto;
    }

    .goldcard-img01 {
        width: 90%; 
        max-width: 355px;
        margin-bottom: 8vw;
    }

    .goldcard-img02 {
        width: 60%;
        max-width: 196px;
    }

    .goldcard-text01 p {
        font-size: clamp(16px, 2.2vw, 25px);
        white-space: nowrap;
    }

    .goldcard-text01 p span {
        font-size: clamp(12px, 1.6vw, 18px);
    }

    .pc-button-single img {
        width: 80%;
        max-width: 229px;
        height: auto;
    }

    .goldcard-table-outer {
        width: 90%;
        max-width: 1140px;
        margin-top: 4vw;
    }

    .question-container {
        width: 90%;
        max-width: 1000px;
        margin-left: auto;
        margin-right: auto;
    }

    .accordion-008 {
        width: 100%;
        max-width: 1000px;
    }

    .accordion-008 summary {
        font-size: clamp(14px, 1.8vw, 18px);
    }

    .accordion-008 p {
        font-size: clamp(13px, 1.6vw, 16px);
        line-height: 1.6;
    }

    /* --- お問い合わせセクション --- */
    .contact-container {
        width: 90%;
        max-width: 741px;
        margin-left: auto;
        margin-right: auto;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 3vw;
    }

    .contact-container p {
        width: 100%;
        font-size: clamp(13px, 1.6vw, 16px);
        padding: 0;
    }

    .contact-button {
        width: 35%; 
    }

    .contact-button img {
        width: 100%;
        max-width: 261px;
        height: auto;
    }
}

@media screen and (max-width: 767px){
    #loading .kvArea {
        width: 40%;
        max-width: 40%;
        height: auto;
    }
    
    .img_box {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    }
    
    .img_box img{
    width: 100%;
    }

    .pc-kv-outer img{display: none;}
    .ph-kv-outer img{
        display: block;
        width: 95%;
        margin-left: auto;
        margin-right: auto;
    }
    
    .kv-container{
        background-image: url(https://gigaplus.makeshop.jp/kinchara/diapolon/assets/images/ph/ph-kvbg.jpg);
        background-size: contain;
    }

    .gassin-pc{display: none;}
    .gassin-ph{
        display: block;
        position: absolute;
        top: 4vw;
        left: 2vw;

    }
    .gassin-ph img{
        width: 32vw;
        height: auto;
    }

    .main-bg{
        background-image: url(https://gigaplus.makeshop.jp/kinchara/diapolon/assets/images/ph/bg.jpg);
        overflow-x: hidden;
    }

    .subtitle-container {
        width: 95%;
        max-width: none;
        height: auto;
        padding-bottom: 40px;
    }

    .subtitle-outer {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
        top: calc(126 / 744 * 100vw);
        height: auto;
    }

    .subtitle-text-inner {
        width: 90%;
        max-width: 100%;
    }

    .subtitle-text-inner span {
        width: 100%;
        font-family: 'M PLUS 1p', sans-serif !important;
        display: block;
        margin-left: 17vw;
        font-size: 4.3vw;
        -webkit-text-stroke: 1.5px #000;
    }

    .subtitle-text-inner p {
        font-size: 4vw;
        font-family: 'M PLUS 1p', sans-serif !important;
        padding-top: 10px;
    }
    
    .subtitle-img {
        width: 90%;
        margin: 0 auto;
    }

    .subtitle-img img {
        display: block;
        width: 100%;
        height: auto;
    }

    .figure-title, .present-title {
    width: 95%; 
    padding-top: 50px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}

.figure-title span, .present-title span {
    position: relative; 
    display: inline-block;
    font-weight: 900;
    font-size: 30px;
    color: white;
    -webkit-text-stroke: 6px #000;
    paint-order: stroke;
    letter-spacing: 0.4em;
    z-index: 2;
    padding-left: 20px;
}

.figure-title span::after, .present-title span::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    height: 11px;
    background-color: #DB0032;
    width: 378%; 
    min-width: 0;
    z-index: -1; 
}

.gold-small-outer {
        height: auto;
        padding: 20px 0 40px;
    }

    .gold-small-title, .sv-title {
        width: 100%;
        text-align: center;
    }
    .gold-small-title img, .sv-title img {
        width: 95%;
        height: auto;
        display: block;
        margin: 0 auto;
    }

    .gold-small-group, .sv-group {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-end;
        width: 95%;
        max-width: 400px;
        margin: 20px auto 0 auto;
        position: relative;
        left: auto;
        transform: none;
        height: auto;
        top: 0px;
    }

    .gold-diapolon-img01, .sv-diapolon-img01 {
        width: 100%; 
        max-width: 300px;
        height: auto;
        display: block;
        margin: 0 auto 15px auto;
    }

    .gold-table-outer, .sv-table-outer {
        width: 75%;
        height: 20%;
        margin: 0;
        z-index: 1;
        border-collapse: collapse;
        font-size: 14px;
        margin-bottom: 60px;
    }

    .diapolon-spec01-gold-ph, .diapolon-spec01-sv-ph {
        display: block;
        width: 42%;
        height: auto;
        margin-left: -17%;
        position: relative;
        z-index: 2;
        pointer-events: none;
    }

    .diapolon-spec01-sv-ph{
        bottom: -1.85vw;

    }

    .diapolon-spec01-gold-ph{
        bottom: 25px;
    }

    .ph-br{
        display: block;
    }

    .gold-table-outer th, 
    .gold-table-outer td,
    .sv-table-outer th,
    .sv-table-outer td {
        padding: 5px 2px;
        word-break: break-all;
    }

    .gold-table-outer th, .sv-table-outer th{
        width: 84px;
    }

    .gold-table-outer td span, .sv-table-outer td span{
        font-size: 10px;
    }

    .image-gallery-wrapper {
        position: relative;
        width: 50%;
        margin: 0 auto;
        top: 0;
    }

    .image-gallery-container {
        width: 100%;
        max-width: 300px;
        margin-left: auto;
        margin-right: auto;
        overflow: hidden;
    }

    .image-gallery {
        display: flex;
        width: 700%;
        padding: 0;
        gap: 0;
        transition: transform 0.5s ease-in-out;
    }

    .zoom-target {
        width: 14.285%;
        height: auto;
        aspect-ratio: 1 / 1;
        object-fit: contain;
        top: 0;
    }

    .slider-arrow {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background: rgba(255, 255, 255, 0.7);
        border: none;
        border-radius: 50%;
        width: 40px;
        height: 40px;
        z-index: 10;
        cursor: pointer;
    }

    #prevBtn { 
        display: block;
        left: -50px; 
    }

    #nextBtn { 
        display: block;
        right: -50px; 
    }
    
    .gold-small-text-outer {
        position: static;
        transform: none;
        width: 90%;
        margin: 40px auto;
        padding: 20px 15px;
        background-color: #3589C0;
        outline: 10px dotted #92D7D7;
        outline-offset: -5px;
        box-sizing: border-box;
    }

    .gold-small-text-outer span {
        font-size: 24px;
        -webkit-text-stroke: 4px #000;
    }

    .gold-small-text-outer p {
        font-size: 18px;
        letter-spacing: 0.05em;
        line-height: 1.8em;
        color: #000;
        word-break: break-all;
    }

    .sv-outer{
        height: auto;
        padding-bottom: 5vw;
    }

    .ph-button-gold, .ph-button-sv, .ph-button-complete, .ph-button-single{
        display: block;
        width: 95%;
        margin-left: auto;
        margin-right: auto;
        padding-top: 8px;
    }

    .ph-button-gold img, .ph-button-sv img, .ph-button-complete img, .ph-button-single img{
        width: 100%;
    }

    #ph-button-complete img{
       margin-top: 15px;
    }

    .present-container{
        width: 95%;
    }

    .present-title {
    width: 95%; 
    padding-top: 20px;
    margin-left: auto;
    margin-right: auto;
    position: relative; 
    }

    .present-title span {
    position: relative; 
    display: inline-block;
    font-weight: 900;
    font-size: 30px;
    color: white;
    -webkit-text-stroke: 6px #000;
    paint-order: stroke;
    letter-spacing: 0.25em;
    z-index: 2;
    padding-left: 5px;
    }
    
    .present-title span::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    height: 11px;
    background-color: #DB0032;
    width: 110%; 
    min-width: 0; 
    z-index: -1; 
    }

    .present-title-img {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    }

    .present-title-img img{
        width: 100%;
    }

    .present-text-outer {
        display: flex;
        flex-direction: column-reverse;
        align-items: center;
        width: 95%;
        margin: 0 auto;
    }

    .present-text-outer p {
        width: 100%;
        font-size: 15px;
        line-height: 1.5;
        margin: 0;
        text-align: left;
        letter-spacing: 0.05em;
    }

    .present-text-outer img {
        width: 80%;
        max-width: 250px;
        height: auto;
    }

    .present-bg1, .present-bg2, .complete-title-pc, .complete-img-pc,
    .pc-button-complete, .goldcard01-title-pc, .pc-button-single, .goldcard-table-pc,
    .pc-button-gold, .pc-button-sv, .pc-br, .diapolon-spec01-gold,.diapolon-spec01-sv{
        display: none;
    }

    .goldcard-title {
    width: 95%; 
    padding-top: 20px;
    margin-left: auto;
    margin-right: auto;
    position: relative; 
    }

    .goldcard-title span {
    position: relative; 
    display: inline-block;
    font-weight: 900;
    font-size: 30px;
    color: white;
    -webkit-text-stroke: 6px #000;
    paint-order: stroke;
    letter-spacing: 0.25em;
    z-index: 2;
    padding-left: 5px;
    }
    
    .goldcard-title span::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    height: 11px;
    background-color: #DB0032;
    width: 177%; 
    min-width: 0; 
    z-index: -1; 
    }

    .goldcard-container{
        width: 95%;
        margin-left: auto;
        margin-right: auto;
    }

    .complete-outer{
        width: 95%;
    }

    .complete-title{
        width: 85%;
        margin-left: auto;
        margin-right: auto;
    }

    .complete-title-ph{
        display: block;
        width: 100%;
        margin-top: 20px;
    }

    .complete-img{
        width: 90%;
        margin-left: auto;
        margin-right: auto;
    }

    .complete-img-ph{
        display: block;
        width: 100%;
    }

    .complete-ph-outer{
        display: block;
        width: 100%;
    }

    .point-wrapper{
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    .point-wrapper img{
        width: 100%;
        margin-left: -15px;
    }

    .point-wrapper p{
        font-family: "M PLUS 1p";
        color: #FFF;
        font-size: 16px;
        padding-bottom: 15px;
    }

    .complete-price p{
        font-size: 22px;
    }

    .goldcard-single-container {
        width: 100%;
        height: auto;
        padding: 40px 0;
    }

    .goldcard-single-title {
        position: relative;
        top: 0;
        left: 0;
        width: 80%;
        margin: 30px auto 10px auto;
        text-align: center;
    }

    .goldcard-single-title p {
        transform: rotate(0deg);
        font-size: 7vw;
        -webkit-text-stroke: 6px #000;
        display: block;
        border-bottom: 5px solid #000;
        letter-spacing: 1vw;
        line-height: 1;
    }

    .goldcard-single-outer {
        flex-direction: column;
        align-items: center;
        width: 100%;
        padding-top: 20px;
        gap: 60px;
    }

    .goldcard-text01 {
        width: 90%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .goldcard01-title-ph {
        display: block;
        width: 85%;
        max-width: 311px;
    }

    .goldcard-img01 {
        width: 90%;
        max-width: 355px;
        margin: 20px 0;
    }

    .goldcard-img02 {
        width: 60%;
        max-width: 196px;
        margin: 15px 0;
    }

    .goldcard-text01 p {
        font-size: 22px;
        padding: 10px 0 !important;
    }

    .pc-button-single img {
        width: 200px;
    }

    #price01, #price02, #price03 {
        padding: 10px 0 !important;
    }

    .goldcard-table-outer{
        width: 96%;
        margin-left: auto;
        margin-right: auto;
    }

    .goldcard-table-ph{
        display: block;
        width: 100%;
    }

    .question-container{
        width: 95%;
    }

    .question-title {
    width: 95%; 
    padding-top: 20px;
    margin-left: auto;
    margin-right: auto;
    position: relative; 
    }

    .question-title span {
    position: relative; 
    display: inline-block;
    font-weight: 900;
    font-size: 30px;
    color: white;
    -webkit-text-stroke: 6px #000;
    paint-order: stroke;
    letter-spacing: 0.15em;
    z-index: 2;
    padding-left: 5px;
    }
    
    .question-title span::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    height: 11px;
    background-color: #DB0032;
    width: 135%; 
    min-width: 0; 
    z-index: -1; 
    }

    .accordion-008 summary{
        padding: 16px 38px 16px 16px;
    }

    .accordion-008 summary::before{
        right: 1em;
    }

    .accordion-008 summary::after{
        margin-right: -1.35em;
    }

    .contact-container{
        width: 90%;
        flex-direction: column;
        }

    .contact-button{
        width: 80%;
        margin-left: auto;
        margin-right: auto;
    }

    .contact-button img{
        width: 100%;
        margin: 10px 0 auto;
    }

    .footer{ width: 80%; margin-left: auto; margin-right: auto;}
    .footer-logo{ width: 45vw;}
    .footer-nav{ flex-direction: column;}
    .footer-nav a{ font-size: 4vw; text-align: left;}
    .copyright{ font-size: 3vw; padding-top: 4vw;}
}