@charset "UTF=8";


body {
    width: 100%;
    margin: 0;
    font-family: "dnp-shuei-gothic-gin-std", sans-serif;
    font-weight: 400;
    font-style: normal;
    background-color: #fff;
    -webkit-font-smoothing: antialiased;

}

a {
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
}

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
    display: block;
    position: sticky;
}

h2 {
    font-family: "futura-pt-bold", sans-serif;
    font-weight: 700;
    font-style: italic;
}

.pc {
    display: block;
}
.sp {
    display: none;
}


/* ---------------------------------------------------------------- header ----------------------------------------------------------------- */

.header {
    position: fixed;
    width: 100%;
    z-index: 10;
    top: 0;
    left: 0;
    height: auto;
    opacity: 0;
    transition: 2s 5s ease;
}
.header.loaded {
    opacity: 1;

}

.header-inner {
    width: 100%;
}

.header-inner .header-wrap01 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 95%;
    max-width: 1820px;
    height: 60px;
    margin: 0 auto;
}

.header-wrap01 a {
    width: 20%;
}

.header-wrap01 .header-logo {
    display: block;
    width: 100%;
    max-width: 178px;
    height: auto;
    opacity: 0;
    transition: 0.5s ease 0.1s;
}
.header-wrap01 .header-logo.active {
    opacity: 1;
}


.header-wrap01 .header-wrap ul {
    display: flex;
    margin-left: auto;
    align-items: center;
    width: 100%;
    height: auto;
}

.header-wrap ul a{
    font-size: min(2.0vw , 18px);
    margin-left: 4vw;
    color: #000; 
    opacity: 1;
    transition: 0.2s all;

}
.header-wrap ul a:hover {
    opacity: 0.5;
}

.header-wrap .contact-box {
    position: relative;
    padding: 0.5em 0.5em 0.5em 1.2em;
    color: #fff;
    border: 1px solid #000;
    background-color: #000;

}
.header-wrap .contact-box:hover {
    color: #000;
    background-color: #fff;
    border: 1px solid #000;
    
}

.header-wrap .contact-box::before {
    position: absolute;
    top: 50%;
    left: 14%;
    transform: translate(-50% , -50%);
    display: block;
    content: '';
    width: 1.5em;
    aspect-ratio: 1 / 1;
    font-size: 18px;
    background: url(../image/contact_icon03.webp) no-repeat center / contain;
}
.header-wrap .contact-box:hover::before {
    background: url(../image/contact_icon02.webp) no-repeat center / contain;
}

.hamburger {
    display: none;
}

.contact-box-sp,
.contact-icon-sp {
    display: none;
}




/* ---------------------------------------------------------------- scroll ----------------------------------------------------------------- */



.scroll {
    position: fixed;
    z-index: 3;
    top: 60%;
    right: 3%;
    display: block;
    margin-left: auto;
    opacity: 1;
    transition: 1s ease 0.1s;
}

.scroll.active{
    opacity: 0;
}

.scroll p {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: auto;
    writing-mode: vertical-lr;
    letter-spacing: 0.05em;
    opacity: 0;
    transition: 2s 5s ease;
}

.loaded .scroll p {
    opacity: 1;
}

.scroll p::after {
    position: absolute;
    display: block;
    content: '';
    top: 110%;
    width: 1px;
    height: 5em;
    background-color: #000;
}


/* ---------------------------------------------------------------- top ----------------------------------------------------------------- */


.top {
    position: relative;
    width: 100%;
    height: auto;
}

/* ---------------------------------------------------------------- loading ----------------------------------------------------------------- */

.top-title02 {
    width: 58%;
    height: auto;
    aspect-ratio: 100 / 19;
    margin: 0 auto;
}

.title-wrap {
    position: relative;
    width: 100%;
    height: 100%;
    transform: scale(2) translate(53% , 50%);
    transition: 2s 4s ease;
}

.loaded .title-wrap {
    transform: scale(1) translate(0 , 0);
    z-index: 3;
}


.title-wrap img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
}

.loading02,
.loading03,
.loading04,
.loading05 {
    transform: translate(10% ,-100%);
    opacity: 0;
}
.loading02 {
    transition: 1s ease-in-out;
}
.loading03 {
    transition: 1s 0.4s ease-in-out;
}
.loading04 {
    transition: 1s 0.8s ease-in-out;
}
.loading05 {
    transition: 1s 1.2s ease-in-out;
}

.loaded .loading02,
.loaded .loading03,
.loaded .loading04,
.loaded .loading05 {
    transform: translate(0 , 0);
    opacity: 1;
}

.back-w {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background-color: #fff;
    transition: 3s 5s ease;
}
.loaded .back-w {
    opacity: 0;
}


/* ---------------------------------------------------------------- loadingここまで ----------------------------------------------------------------- */




.top-inner {
    display: flex;
    width: 95%;
    max-width: 1920px;
    height: calc(100% - 20em);
    max-height: 1000px;
    margin: 0 auto 5vw auto;
    padding-top: 20em;
}

.top-inner  .top-wrap01 {
    width: 45%;
    margin-top: -5vw;
}

.top-wrap01  .top-title {
    width: 100%;
    height: auto;
    margin: 0 auto 2vw auto;
    text-align: center;
}

.top-title h1 {
    margin-bottom: 1em;
    font-size: min(1.9vw , 25px);
    opacity: 0;
    transform: translateX(-25%);
    transition: 1s 6s ease-in-out;
}
.loaded .top-title h1 {
    opacity: 1;
    transform: translateX(0);
}

.top-title .top-text {
    width: 100%;
    max-width: 430px;
    height: auto;
    margin: 2.5vw auto;
    text-align: center;
    line-height: 2;
    font-size: min(0.8vw , 18px);
    opacity: 0;
    transition: 1s 7s ease-in-out;
}
.loaded .top-title .top-text {
    opacity: 1;
}


.top-wrap01 .top-textbox {
    display: flex;
    width: 95%;
    height: auto;
    margin: 0 auto;
}

.top-wrap01 .top-textbox-pc {
    display: block;
}
.top-textbox-sp {
    display: none;
}

.top-textbox .top-textbox-inner {
    display: flex;
    justify-content: center;
    width: 100%;
    flex-wrap: wrap;
    gap: 16px;
    margin: 0 auto;
}

.top-textbox-inner img {
    display: flex;
    justify-content: center;
    align-items: center;
    width: calc(25% - 30px);
    min-width: 126px;
    aspect-ratio: 1 / 1;
    border-radius: 50vw;
    text-align: center;
    font-size: clamp(14px, 0.8vw, 16px);
    line-height: 1.7;
    color: #fff; 
    filter: drop-shadow(0 0 10px #dcdcdc);
    opacity: 0;
    transition: 1s 7.5s ease-in-out;
}
.loaded .top-textbox-inner img  {
    opacity: 1;
}

.top-textbox .top-text01,
.top-textbox .top-text02 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: calc(25% - 30px);
    min-width: 126px;
    aspect-ratio: 1 / 1;
    border-radius: 50vw;
    text-align: center;
    font-size: clamp(14px, 0.8vw, 16px);
    line-height: 1.7;
    color: #fff; 
    filter: drop-shadow(0 0 10px #dcdcdc);

}

.top-textbox .top-text01 {
    background-color: #bdbdbe;
}

.top-textbox .top-text02 {
    background-color: #9ea3a4;
}

.top-inner .top-wrap02 {
    width: 50%;
    height: auto;
    margin: 0 auto;
}

.top-wrap02 .annotation {
    display: block ;
    width: 100%;
    height: auto;
    margin: 3em auto 0 auto;
    font-size: min(1.4vw , 12px);
    text-align: center;
    line-height: 1.5;

}

.top-kv-box02 {
    width: 100%;
    margin: 0 auto;
    aspect-ratio: 10 / 6 ;
}

.top-kv-box {
    position: relative;
    width: 100%;
    height: 100%;
}


.top-kv-box  .top-kv-wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    max-height: 100%;
    transition: 1s ease;
}



#s1 {
    transform: scale(0.6) translate(0 , -30%);
    z-index: 1;
    filter: blur(0);
}
 
#s1 img {
    width: 100%;
    height: 100%;

}

#s2 {
    transform: scale(0.3) translate(118% , -124%);
    z-index: -1;
    filter: blur(2px);
}

#s2 img {
    width: 100%;
    height: 100%;

}

#s3 {
    transform: scale(0.25) translate(-120% , -192%);
    z-index: -1;
    filter: blur(5px);
}

#s3 img {
    width: 100%;
    height: 100%;

}



.top-kv-img {
    width: 100%;
    aspect-ratio: 100 / 78 ;
    
}

.top-kv-imgbox {
    position: relative;
    width: 100%;
    height: 100%;
}

.top-kv-imgbox img {
    position: absolute;
    width: 100%;
    height: 100%;
}

.top-kv-imgbox img:nth-child(2) {
    transform: translateY(-50%);
    opacity: 0;
    transition: 1s 6s ease;
}

.loaded .top-kv-imgbox img:nth-child(2) {
    transform: translateY(0);
    opacity: 1;
}



.top-wrap02 .top-scroll {
    width: 80%;
    margin: 0 auto;
}

.top-scroll .top-scroll-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 60%;
    min-width: 287px;
    margin: 3em auto 0 auto;
}

.top-scroll-inner img {
    height: 35px;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    cursor: pointer;
}

.top-circle {
    display: flex;
    gap: 1em;
}

.circle,
.circle-a {
    content: '';
    height: 15px;
    height: min(2.7vw , 15px);
    aspect-ratio: 1 / 1;
    border-radius: 5em;
    background-color: #000;
}

.circle.active,
.circle-a.active {
    transform-origin: center ;
    transform: scale(1.5);
}


.circle01 {
    background-color: #a7b7c6;
}

.circle02 {
    background-color: #000;

}

.circle03 {
    background-color: #dcbaa8;

}

.top-text-pc {
    display: block;
}

.top-text-sp {
    display: none;
}

/* ---------------------------------------------------------------- product ----------------------------------------------------------------- */


.product {
    width: 100%;
    height: auto;
}


.product-inner {
    position: relative;
    display: flex;
    width: 100%;
    max-width: 1920px;
    border-radius: 5vw 5vw 0 0;
    margin: 0 auto;
    padding: 8vw 0;
    background-color: #efefef;

}

.back01 {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 1920px;
    height: 20vh;
    z-index: -1;
    background-color: #efefef;
}

.product-inner h2 {
    margin-left: 0.5em;
    writing-mode: vertical-lr;
    font-size: min(10.4vw , 162px);
    font-weight: 800;
    letter-spacing: 0.1em;
    color: #fff;
    opacity: 0;
    filter: blur(15px);
    transition: 1s ease;
}
.product-inner h2.active {
    opacity: 1;
    filter: blur(0);

}

.product-inner .product-wrap {
    width: 80%;
    height: auto;
}

.product-wrap .splide img {
    display: block;
    width: 70%;
    height: auto;
    margin: 0 auto;
}

.product-wrap .splide p {
    width: 70%;
    margin: 2em auto 0 auto;
    font-size: min(1.35vw , 15px);

}

.product-wrap .product-box {
    display: flex;
    align-items: start;
    width: 90%;
    height: auto;
    margin: 5em auto 0 auto;
}


.product-box .product-box-inner01 {
    width: 45%;
    height: auto;
}

.product-box-inner01 .product-box-wrap {
    width: 82%;
    margin-bottom: 5em;
    text-align: center ;
}


.product-title h3 {
    margin-bottom: 1.2em;
    font-size: min(1.9vw, 25px);
}

.product-title img {
    max-width: 360px;
}

.product-box .product-box-wrap02{
    width: 80%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.product-box-wrap02 .product-img01 {
    width: 100%;
    max-width: 360px;
    height: auto;
}

.product-box-wrap02 .product-img02 {
    width: 50%;
    max-width: 180px;
    margin-top: 3em;
}

.product-box-inner02 {
    width: 55%;
}

.product-box-inner02 p {
    margin-bottom: 1em;
    font-size: min(2.2vw , 20px);
}

.product-box-inner02 .product-title2::before {
    content: '';
    width: 2em;
    padding-left: 0.3em;
    margin-right: 0.5em;
    background-color: #bfc0c2;
}

.product-box-inner02 .product-price-text {
    font-size: min(1.4vw , 15px);
    display: inline-block;
}

.product-box-inner02 th,
.product-box-inner02 td{
    padding: 1em;
}

.product-box-inner02 th {
    width: 5em;
    border-right: 1px solid #000;
    border-bottom: 1px solid #000;
    font-size: min(1.5vw , 15px );
    text-align: center;
}

.product-box-inner02 td {
    border-bottom: 1px solid #000;
    font-size: min(1.5vw , 15px);
    line-height: 1.7;
    
}

.product-box-inner02 td span {
    display: inline-block;
}

.product-box-inner02 .last th,
.product-box-inner02 .last td {
    border-bottom: 0;
}

.product-box-inner02 .table {
    width: 90%;
    margin: 0 auto;
}



.product-price {
    margin-top: 6vw;
}

.product-price .annotation {
    width: 90%;
    margin: 1.5em auto 0 auto;
    font-size: min(1.4vw , 15px);


}



.product-box-inner01-sp {
    display: none;
}




/* ---------------------------------------------------------------- feature ----------------------------------------------------------------- */



.feature {
    width: 100%;
    height: auto;
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
    overflow:hidden
}

.feature-inner {
    position: relative;
    width: 100%;
    max-width: 1920px;
    height: auto;
    background-color: #fff;
    margin: 0 auto;
    padding: 8vw 0;
    overflow: hidden;
    border-radius: 5vw 5vw 0 0;
    box-shadow: 0 -5px 5px 1px rgba(0 , 0 , 0 , 0.1); 
}

.back03 {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 1920px;
    height: 20vh;
    z-index: -1;
    background-color: #fff;
    box-shadow: 0 -5px 5px 1px rgba(0 , 0 , 0 , 0.1); 
}

.feature-inner .feature-wrap {
    width: 95%;
    max-width: 1200px;
    margin: 0 auto;
}

.feature-wrap .feature-title {
    display: flex; 
    width: 100%;
    height: auto;
    margin: 0 auto 15em auto;

}

.feature-title  h2 {
    writing-mode: vertical-lr;
    font-size: min(10.4vw , 130px);
    font-weight: 800;
    letter-spacing: 0.05em;
    color: #efefef;
    opacity: 0;
    filter: blur(15px);
    transition: 1s ease-in-out;
}

.feature-title  h2.active {
    filter: blur(0);
    opacity: 1;
}


.feature-title img {
    width: 80%;
    max-width: 1000px;
    height: 44vw;
    max-height: 540px;
    object-fit: cover;
    margin: 0 auto;
}

.feature-box01 .feature_textbox p span {
    display: none;
}


.feature-wrap .feature-box01 {
    display: flex;
    align-items: center;
    width: 100%;
    height: auto;
    margin-bottom: 10em;
}


.feature-box01 img {
    width: 55% ;
    height: auto;
    transform: translateY(30%);
    opacity: 0;
    transition: 0.5s 0.2s  ease-in-out;
}

.feature-box01.active img  {
    transform: translateY(0);
    opacity: 1;
}

.feature-box01 .feature_textbox {
    position: relative;
    margin-right: auto;
    width: 35%;
    height: 280px;
}

.feature-box .feature_textbox {
    opacity: 0;
    filter: blur(10px);
    transition: 1s ease;
}


.feature-box.active .feature_textbox {
    opacity: 1;
    filter: blur(0);
}

.feature-box01 .feature_textbox::before {
    position: absolute;
    top: -2%;
    right: 12%;
    transform: translate(-50% , -50%);
    z-index: -1;
    content: '';
    height: 10vw;
    width: auto;
    max-width: 114px;
    aspect-ratio: 1 / 1;
    background: url(../image/feature_01.webp) no-repeat center / contain;
}


.feature_textbox .feature_catchphrase {
    margin-bottom: 2em;
    font-size: min(2.3vw , 25px);
    font-family: "dnp-shuei-gothic-gin-std", sans-serif;
    font-style: normal;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 0.02em;
    color: #6e7747;
}

.feature_textbox .feature_detail {
    font-size: min(1.8vw , 16px);
    letter-spacing: 0.05em;
    line-height: 2;
    color: #6e7747;
}


.feature-wrap .feature-box02 {
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    margin-bottom: 15em;
}


.feature-box02 img {
    width: 55%;
    margin-right: auto;
    transform: translateX(-30%);
    opacity: 0;
    transition: 0.5s  0.2s ease-in-out;

}

.feature-box02.active img {
    transform: translateX(0);
    opacity: 1;
}


.feature-box02 .feature_textbox {
    position: relative;
    width: 40%;
    height: 150px;
}

.feature-box02 .feature_textbox p span {
    display: inline-block;
    content: '';
    width:  2vw;
    max-width: 140px;
    height: 1em;
    font-size: 25px;
}

.feature-box02 .feature_textbox::before {
    position: absolute;
    top: -14%;
    left: 6%;
    transform: translate(-50% , -50%);
    z-index: -1;
    content: '';
    height: 10vw;
    width: auto;
    max-width: 140px;
    aspect-ratio: 1 / 1;
    background:  url(../image/feature_02.webp) no-repeat center / contain;
}



.feature-wrap .feature-box03 {
    width: 100%;
    height: auto;
    margin-bottom: 15em ;
}


.feature-box03 .feature_textbox {
    position: relative;
    width: 100%;
    height: 170px;
    text-align: left;
}

.feature-box03 .feature_textbox::before {
    position: absolute;
    top: -1%;
    left: 22%;
    transform: translate(-50% , -50%);
    z-index: -1;
    content: '';
    height: 10vw;
    width: auto;
    max-width: 135px;
    aspect-ratio: 1 / 1;
    background:  url(../image/feature_03.webp) no-repeat center / contain;
}


.feature-box03 .feature-03imgbox {
    display: flex;
    width: 80%;
    margin: 5vw auto 0 auto;
}


.feature-03imgbox .feature-img-cut {
    display: inline-block;
    width: 30%;
    height: auto;
    margin: 0 auto;
    transform: translateX(100%) rotate(-20deg);
    opacity: 0;

}
.feature-03imgbox .feature-img-cut:nth-child(1) {
    transition: 0.5s 0.2s ease;
}
.feature-03imgbox .feature-img-cut:nth-child(2) {
    transition: 0.5s 0.7s ease;
}
.feature-03imgbox .feature-img-cut:nth-child(3) {
    transition: 0.5s 1.2s ease;
}

.feature-box03.active .feature-03imgbox .feature-img-cut {
    transform: translateX(0) rotate(-20deg);
    opacity: 1;

}

.feature-03imgbox img {
    display: block;
    width: 100%;
    margin: 0 auto;
}



.feature-wrap .feature-box04 {
    display: flex;
    align-items: center;
    width: 100%;
    height: auto;
    margin-bottom: 14em;

}

.feature-box04 .feature_textbox {
    position: relative;
    width: 38%;
    height: 220px;
    margin-left: 3em;
}
.feature-box04 .feature_textbox::before {
    position: absolute;
    top: -10%;
    left: 6%;
    transform: translate(-50% , -50%);
    z-index: -1;
    content: '';
    height: 10vw;
    width: auto;
    max-width: 140px;
    aspect-ratio: 1 / 1;
    background:  url(../image/feature_04.webp) no-repeat center / contain;
}


.feature_04_imgbox {
    width: 40%;
    aspect-ratio: 100 / 76;
    margin: 0 auto;
}

.feature_04_img {
    position: relative;
    width: 100%;
    height: 100%;
}

.feature_04_img img {
    position: absolute;
    width: 100%;
    height: auto;
}

.feature_04_img img:nth-child(2) {
    transform: translateY(-50%);
    opacity: 0;
    transition: 0.5s 0.5s ease-in-out;
} 
.active .feature_04_img img:nth-child(2) {
    transform: translateY(0);
    opacity: 1;

}

.feature-wrap .feature-box05 {
    display: block;
    align-items: center;
    width: 100%;
    height: auto;
}

.feature-box05 .feature_textbox {
    position: relative;
    width: 60%;
    min-width: 600px;
    height: 220px;
    margin-right: auto;
    

}
.feature-box05 .feature_textbox::before{
    position: absolute;
    top: -4%;
    left: 45%;
    transform: translate(-50% , -50%);
    z-index: -1;
    content: '';
    height: 10vw;
    width: auto;
    max-width: 140px;
    aspect-ratio: 1 / 1;
    background:  url(../image/feature_05.webp) no-repeat center / contain;
}

.feature-box05 .feature-05imgbox {
    display: flex;
    margin: 0 auto;
    width: 100%;
    justify-content: space-around;
}

.feature-05imgbox-wrap {
    width: 30%;
    aspect-ratio: 10 / 7;
}

.feature-05imgbox-wrap2 {
    position: relative;
    width: 100%;
    height: 100%;

}

.feature-05imgbox-wrap2 img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
}



.feature-05imgbox-wrap2 img:nth-child(2) {
    transform: translateY(-50%);
    opacity: 0;
    transition: 0.5s 0.2s ease-in-out;
}


.active .feature-05imgbox-wrap2 img:nth-child(2) {
    transform: translateX(0);
    opacity: 1;
}




/* ---------------------------------------------------------------- simulator ----------------------------------------------------------------- */

.simulator {
    width: 100%;
    height: auto;

}

.simulator-inner {
    position: relative;
    width: 100%;
    max-width: 1920px;
    height: auto;
    overflow: hidden;
    margin: 0 auto;
    padding: 5em 0;
    border-radius: 5vw 5vw 0 0;
    background-color: #efefef;

}

.back02 {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 1920px;
    height: 20vh;
    z-index: -1;
    background-color: #efefef;
}

.simulator-inner h2 {
    width: 90%;
    max-width: 1600px;
    margin: 0 auto;
    font-size: 100px;
    font-weight: 800;
    color: #fff;
    opacity: 0;
    filter: blur(15px);
    transition: 1s ease-in-out;
}

.simulator-inner h2.active {
    filter:  blur(0);
    opacity: 1;
}

.simulator-inner .simulator-text {
    width: 90%;
    max-width: 1600px;
    margin: 1em auto;
}

.simulator-inner .simulator-text p {
    font-size: clamp(15px , 1.8vw , 18px);
    line-height: 1.7;
    margin: 0 auto;

}

.simulator-arrow img {
    display: block;
}

.simulator-arrow .simulator-arrow02 {
    margin-left: auto;
}

.simulator-inner .simulator-wrap01 {
    display: flex;
    width: 100%;
    height: auto;
    margin: 0 auto;

    
}

.simulator-wrap02 .simulator-box {
    width: 90%;
    display: flex;
    margin: 0 auto;
    padding: 5em 0 2.5em 0;
}





.simulator-inner .simulator-wrap02 {
    width: 95%;
    max-width: 1600px;
    margin: 0 auto;
    background-color: #fff;
    border-radius: 30px;
    filter: drop-shadow(0 0 15px #dcdcdc);

}



.simulator-wrap03 .simulator-box {
    display: flex;
    align-items: center;
    width: 93%;
    margin: 0 auto;
    padding: 5em 0;
}


.simulator-text-det p {
    margin: 1em auto;
    font-size: min(1.5vw , 15px);
    letter-spacing: 0.1em;
    line-height: 1.5;
    text-align: center;
}



.simulator-box .simulator-imgbox {
    width: 53%;
    height: auto;
    
}

/* ---------------------------------------------------------------- simulator calender ----------------------------------------------------------------- */



.simulator-imgbox .simulator-titile {
    width: 100%;
    height: auto;
    aspect-ratio: 25 / 4;
    min-height: 100px;
}

.simulator-titile-wrap {
    position: relative;
    width: 100%;
    height: 100%;
}

.simulator-titile-wrap .simulator-titile01 {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
}
.simulator-titile-wrap .simulator-titile01.active {
    display: block;
}


.simulator-imgbox .simulator-calendar {
    width: 100%;
    height: auto;
    aspect-ratio: 10 / 7;
    overflow: hidden;
    filter: drop-shadow(0 0 15px #dcdcdc);
    transform: translateZ(0);
}

.simulator-calendar-wrap {
    position: relative;
    width: 100%;
    height: 100%;
}

.simulator-calendar-wrap img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
}

.simulator-calendar-wrap #s1-a,#s2-a,#s3-a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    aspect-ratio: 10 / 7;
    transition: 1s  ease 0.1s;
}


#s1-a {
    transform: translate(0 , 0);
    
}
#s2-a {
    transform: translate(101% , 0);
    
}

@keyframes slide {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }

}

#s3-a {
    transform: translate(-101% , 0);

}

.anime{
    animation: slide2 0.1s ease-in forwards;
}

@keyframes slide2 {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }


}

.calendar-img01 {
    display: none;
}

.calendar-img01.active {
    display: block;
}

.calendar-img02 {
    display: none;
}

.calendar-img02.active {
    display: block;
}



.simulator-box #target01.active {
    display: none;

}
.simulator-box #target02{
    display: none;

}

.simulator-box #target02.active{
    display: block;

}

.simulator-titile {
    width: 100%;
    margin-bottom: 2em;

}

.simulator-imgbox h3{
    margin-bottom: 1.2em;
    font-size: 22px;
    font-size: min(2.3vw , 22px);
    font-weight: 600;
    letter-spacing: 0.1em;
}

.simulator-imgbox p {
    margin: 1em 0;
    font-size: 15px;
    font-size: min(1.5vw , 15px);
    letter-spacing: 0.1em;
    line-height: 1.5;
}



.simulator-box .simulator-textbox {
    width: 40%; 
    height: auto;
    margin: auto 0 auto auto;
    text-align: center;

}

.simulator-textbox .simulator-button {
    width: 100%;
    height: auto;
}

.simulator-button .simulator-button-category {
    display: flex;
    align-items: center;
    width: 100%;
    height: auto;
    padding: 1em 0;
    border-bottom: 0.25px solid #a3a4a6;

}


.simulator-button-category .category-title {
    width: 20%;
    font-size: min(1.69vw , 15px);
}

.simulator-imgbox .simulator-scroll {
    width: 80%;
    margin: 0 auto;
}

.simulator-scroll .simulator-scroll-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 60%;
    min-width: 287px;
    margin: 3em auto 0 auto;
}

.simulator-scroll-inner img {
    width: 10%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    cursor: pointer;
}

.simulator-circle {
    display: flex;
    gap: 1em;
}


.simulator-button-category .button {
    display: flex;
    width: 70%;
    max-width: 300px;
    flex-wrap: wrap;
    gap: 1.2em;
    margin: 0 auto;
}

.simulator-button-category .button p{
    padding: 0.5em 2.5em;
    border-radius: 50vw;
    text-align: center;
    font-size: min(1.4vw , 15px);
    font-weight: 400;
    background-color: #f5f5f5;
    filter: drop-shadow(2px 3px 0 #dcdcdc);
}

.simulator-button-category .button-gap p{
    padding: 0.5em 1.95em;

}

.simulator-button-category .button-gap #gothic-b,
.simulator-button-category .button-gap #gothic-l {
    padding: 1em;
}


.simulator-button-category .button-gap #mincho,
.simulator-button-category .button-gap #cursive {
    padding: 1em 2em;
}

.button button {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    padding: 1em 2.5em;
    border-radius: 50vw;
    text-align: center;
    font-size: min(1.4vw, 15px);
    font-weight: 400;
    background-color: #f5f5f5;
    color: #000;
    filter: drop-shadow(2px 3px 0 #dcdcdc);
    transition: 0.2s ease all;
}
.button button.active {
    background-color: #b4b4b7;
    filter: drop-shadow(0 0 0 #dcdcdc);
    box-shadow: inset 2px 3px 5px rgba(0 , 0 , 0 , 0.3);
    color: #fff;
}

button:hover {
    cursor: pointer;
    background-color: #b4b4b7;
    filter: drop-shadow(0 0 0 #dcdcdc);
    box-shadow: inset 2px 3px 5px rgba(0 , 0 , 0 , 0.3);
    color: #fff;

}
.simulator-textbox .simulator-button .popup  {
    display: flex;
    align-items: center;
    padding: 1em 1.6em;
}
.simulator-textbox .button .popup span {
    display: inline-block;
    width: 1em;
    aspect-ratio: 1 / 1;
    background: url(../image/simulator_icon.webp) no-repeat center / contain;
}

.button .popup:hover span {
    background: url(../image/simulator_icon_hover.webp) no-repeat center / contain;
}

.simulator-inner .simulator-contact {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 4vw auto 8vw auto;
    text-align: center;
    width: 30%;
    max-width: 300px;
    min-width: 173px;
    border: 1px solid #000;
    padding: 2em 0.5em 2em 1em;
    color: #000;
    font-size: 19px;
    text-align: center;
}
.simulator-inner .simulator-contact::before {
    display: inline-block;
    content: '';
    width: 1.2em;
    aspect-ratio: 1 / 1;
    padding-right: 1.5em;
    background: url(../image/contact_icon02.webp) no-repeat center / contain;
}
.simulator-contact::after {
    display: inline-block;
    content: '';
    width: 1em;
    aspect-ratio: 1 / 1;
    padding-left: 1.5em;
    background: url(../image/simulator_arrow_black.webp) no-repeat center / contain;
}

.simulator-inner .simulator-contact:hover {
    background-color: #b4b4b7;
    color: #fff;
    border: 1px solid #b4b4b7;
}
.simulator-inner .simulator-contact:hover:before {
    background: url(../image/contact_icon03.webp) no-repeat center / contain;
}

.simulator-inner .simulator-contact:hover::after {
    background: url(../image/simulator_arrow_white2.webp) no-repeat center / contain;
}



.simulator-box .target02 {
    display: none;
}

.simulator-box .target02.active {
    display: block;
}

.simulator-box .target01.active {
    display: none;
}


#s4 {
    position: absolute;
    top: 50%;
    left: 80%;
    background-color: orange;
    transform: translateY(-50%) scale(0.7);
    transition: 1s all;

}


#s5 {
    position: absolute;
    top: 50%;
    left: 100%;
    background-color: pink;
    transform: translateY(-50%) scale(0.7);
    transition: 1s all;

}


#s6 {
    position: absolute;
    top: 50%;
    left: 80%;
    background-color: #fff;
    transform: translateY(-50%) scale(0.7);
    transition: 1s all;

}

.toggle_input {
    display: none;
}

.simulator-textbox-sp {
    display: none;
}



/* ---------------------------------------------------------------- modal-window ----------------------------------------------------------------- */


.overlay {
    display: none;
    position: absolute;
    top: 0;
    height: 170vh;
    width: 100%;
    z-index: 3;
    background-color: rgba(0 , 0 , 0 , 0.2);
}

.overlay.active {
    display: block;
}

.simulator-inner .modal-window {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50% , -50%);
    z-index: 4;
    width: 90%;
    margin: 0 auto;
    border-radius: 20px;
    background-color: #fff;
    filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.2));
}

.modal-window .modal-window-inner {
    position: relative;
    width: 80%;
    height: auto;
    margin: 0 auto;
    padding: 7vw 0;
}


.modal-window-inner h3 {
    display: block;
    width: 22%;
    min-width: 228px;
    margin: 0 auto 2em auto;
    padding-bottom: 0.5em;
    border-bottom: solid 1.5px #000;
    font-size: 20px;
    font-weight: 600;
    text-align: center;
    letter-spacing: 0.1em;

}

.modal-window-inner #target03 {
    position: absolute;
    top: 6%;
    right: -8%;
    display: flex;
    content: '';
    justify-content: center;
    align-items: center;
    width: 4vw;
    max-width: 15px;
    min-width: 10px;
    aspect-ratio: 1 / 1;
    padding: 0.5em;
    border-radius: 50px;
    background-color: #808080;
    background-size: 0.5em;
}


.modal-window-inner .modal-window-img.active{ 
    display: flex;
    width: 100%;
    height: auto;
    aspect-ratio: 100 / 32;
    margin: 0 auto;
}


.modal-window-inner .modal-window-img {
    display: none;
}


.modal-window-img-box  {
    width: 100%;
    height: 100%;
    margin-bottom: 4em; 

}

.modal-window-img-box .modal-window-img-wrap {
    position: relative;
    width: 90%;
    height: 100%;
    margin: 0 auto;
}

.modal-window-img-wrap img{
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    border: 0.5px solid #000;
}

.modal-window-img-wrap img.active {
    display: block;
}

.modal-window-img-box p {
    margin-top: 1em;
    font-size: 15px;
    text-align: center;
}

.modal-window-inner .modal-window-text {
    display: flex;
    width: 80%;
    margin: 0 auto;
}

.modal-window-text .modal-window-text-wrap {
    display: flex;
    width: 90%;
    height: auto;
    flex-wrap: wrap;
    gap: 1em;
}

.modal-window-text .cover {
    width: 2.5em;
    height: 1em;
    margin-left: 20px;

}

.modal-window-text p {
    width: 2.5em;
    height: auto;
    margin: 0 auto;
    padding: 0.5em 1em;
    border-radius: 50vw;
    text-align: center;
    font-size: min(1.4vw , 15px);
    font-weight: 400;
    background-color: #f5f5f5;
    filter: drop-shadow(2px 3px 0 #dcdcdc);
}

.modal-window-text p.active {
    color: #fff;
    background-color: #b4b4b7;
    box-shadow: inset 2px 3px 5px rgba(0 , 0 , 0 , 0.3);
    filter: drop-shadow(0 0 0 #dcdcdc);

}

.modal-window-text p:hover {
    cursor: pointer;
    color: #fff;
    background-color: #b4b4b7;
    box-shadow: inset 2px 3px 5px rgba(0 , 0 , 0 , 0.3);
    filter: drop-shadow(0 0 0 #dcdcdc);
}

.modal-window.active {
    display: block;
}

#month-select {
    display: none;
}

/* ---------------------------------------------------------------- original ----------------------------------------------------------------- */


.original {
    width: 100%;
    height: auto;
}

.original-inner {
    width: 100%;
    max-width: 1920px;
    height: auto;
    margin: 0 auto;
    padding: 10em 0;
    overflow: hidden;
    border-radius: 50px 50px 0 0;
    background-color: #fff;
    filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.2));

}

.original-inner h2 {
    width: 95%;
    max-width: 1920px;
    height: auto;
    margin: 0 auto;
    font-size: 120px;
    letter-spacing: 0.02em;
    color: #efefef;
    filter: blur(15px);
    opacity: 0;
    transition: 1s ease-in-out;
}

.original-inner h2.active {
    filter: blur(0);
    opacity: 1;
}

.original-text {
    width: 95%;
    margin: 0 auto;
    padding: 2em 0;
}

.original-text p {
    font-size: min(1.9vw , 18px);
    line-height: 2;

}

.original-text .click {
    margin-top: 1em;
    font-size: min(1.5vw , 15px);
    color: #808080;
}

.original-inner .original-imgbox {
    display: flex;
}

.original-inner .original_slideshow {
    display: flex;
    animation: infinity-scroll-left 40s infinite linear 0.5s both;

}

@keyframes infinity-scroll-left {
    from {
        transform: translateX(0);
      }
        to {
        transform: translateX(-100%);
      }
}

.original-imgbox ul {
    width: auto;
    height: 300px;
    z-index: 1;
    background-color: #eee;
}

.original-imgbox ul:hover {
    z-index: 10;
}

.original-imgbox ul li {
    width: 100%;
    height: 100%;
    transform: scale(1);
    z-index: 1;
    transition: 0.3s  ease-out;
}
.original-imgbox ul li:hover {
    transform: scale(1.05);
    z-index: 10;    

}

.original-imgbox ul li img {
    width: auto;
    height: 100%;
    object-fit: cover;

}


.original-inner .contact {
    width: 90%;
    max-width: 1920px;
    height: auto;
    margin: 0 auto;
}

.contact .contact-inner {
    position: relative;
    width: 100%;
    max-width: 1920px;
    height: auto;
    overflow: hidden;
    margin: 0 auto;
    padding: 5em 0;
}


.contact-inner .contact-logo {
    width: 34%;
    max-width: 342px;
    height: auto;
    margin: 12em auto;
}

.contact-logo h3 {
    font-size: 18px;
    margin-bottom: 2em;
    text-align: center;
}

.contact-logo img {
    width: 100%;
    height: auto;
}


.contact-inner .contact-wrap {
    width: 45%;
    max-width: 496px;
    margin: 0 auto;
    padding: 1em 2em;
    text-align: center;
    background-color: #6e7747;
}

.contact-wrap .contact-tell {
    text-align: center;
    font-size: 30px;
    font-weight: 600;
    color: #fff ;

}

.contact-wrap .contact-tell::before {
    display: inline-block;
    content: '';
    width: 0.7em;
    aspect-ratio: 1 / 1;
    padding-right: 0.6em;
    background: url(../image/contact_tell.webp) no-repeat center / contain;
}


.contact-wrap .contact-deta {
    color: #fff;
    font-size: min(1.9vw , 20px);
}
.contact-wrap .contact-deta::before {
    display: block;
    content: '';
    width: 18em;
    height: 1px;
    margin: 0.5em auto;
    background-color: #fff;
}


.contact-inner .contact02 {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 4vw auto 2vw auto;
    text-align: center;
    width: 45%;
    max-width: 496px;
    min-width: 173px;
    border: 1px solid #000;
    padding: 2em 1.5em 2em 1.5em;
    color: #000;
    font-size: 19px;
    text-align: center;
}


.contact-inner .contact02::before {
    display: inline-block;
    content: '';
    width: 1.2em;
    aspect-ratio: 1 / 1;
    padding-right: 1.5em;
    background: url(../image/contact_icon02.webp) no-repeat center / contain;
}
.contact02::after {
    display: inline-block;
    content: '';
    width: 1em;
    aspect-ratio: 1 / 1;
    padding-left: 1.5em;
    background: url(../image/simulator_arrow_black.webp) no-repeat center / contain;
}

.contact-inner .contact02:hover {
    background-color: #b4b4b7;
    color: #fff;
    border: 1px solid #b4b4b7;
}
.contact-inner .contact02:hover:before {
    background: url(../image/contact_icon03.webp) no-repeat center / contain;
}

.contact-inner .contact02:hover::after {
    background: url(../image/simulator_arrow_white2.webp) no-repeat center / contain;
}



/* ---------------------------------------------------------------- footer ----------------------------------------------------------------- */

.footer {
    width: 100%;
    text-align: center;
    background-color: #808080;
}

.footer .footer-inner {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 1200px;
    height: 64px;
    margin: 0 auto;
}

.footer-inner p {
    width: 50%;
    height: auto;
    font-size: min(1.5vw , 16px);
    letter-spacing: 0.1em;
    line-height: 1.5;
    color: #fff;
}

.footer-inner img {
    width: 25%;
    height: auto;
    max-width: 230px;
}


.lb-nav a.lb-prev,
.lb-nav a.lb-next{
  opacity: 1;
}

.lb-data .lb-caption {
    font-size: min(3.3vw , 16px);
    margin-top: 1em;
    line-height: 1.5;
}






/* ---------------------------------------------------------------- メディアクエリ 1908px ----------------------------------------------------------------- */


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

    .modal-window-inner .modal-window-text {
        max-width: 610px;

    }

}

/* ---------------------------------------------------------------- メディアクエリ 1500px ----------------------------------------------------------------- */


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

    .top-title  .top-text {
        font-size: 12px;

    }

}


/* ---------------------------------------------------------------- メディアクエリ 1100px ----------------------------------------------------------------- */


@media screen and (max-width:1100px)  {
    .simulator-inner .simulator-wrap02 {
        width: 100%;
        border-radius: 0;
    
    }



}



/* ---------------------------------------------------------------- メディアクエリ 768px ----------------------------------------------------------------- */


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

    .pc {
        display: none;
    }
    .sp {
        display: block;
    }


    /* ---------------------------------------------------------------- header ----------------------------------------------------------------- */
    
    .header-inner {
        background-color: rgba(255, 255, 255, 0.7);
    }


    .header-wrap01 a {
        width: 30%;
        transition: 2s 5s ease;
    }

    .header-wrap01 .header-wrap {
        position: absolute;
        top: 0;
        right: 0;
        width: 100%;
        padding: 3em 0 3em 1.5em;
        background-color: rgba(255, 255, 255, 0.8);
    }

    .header-wrap01 .header-wrap ul {
        display: block;
        width: 100%;
        z-index: 15;
    }

    .header-wrap ul a{
        display: block;
        width: 40%;
        min-width: 220px;
        margin: 0 auto;
        padding: 1em 0;
        border-bottom: 1px solid #000;
        text-align: center;
        font-size: 18px;
    }

    #target01 {
        padding-right: 0;
        transform: translateY(-400px);
        transition: ease 0.5s;
    }
    #target01.active {
        transform: translateY(0);
    }

    .header-wrap .contact-box {
        width: 50%;
        padding: 1em 0;
        border: 0 ;
        max-width: 176px;
        min-width: 100px;
        color: #000;
        background-color: transparent;

        
    }

    .header-wrap .contact-box::before {
        width: 1.2em;
        left: 10%;
        background: url(../image/contact_icon02.webp) no-repeat center / contain;
    }

    .header-wrap .contact-box:hover {
        border-top: 0;
        border-left: 0;
        border-right: 0;
        border: 0;
        color: #000;
        background-color: transparent;
    }
    
    .hamburger {
        display: block;
    }

    .header-wrap02 {
        width: auto;
        z-index: 20;
        cursor: pointer;
    }
    
    .header-wrap02 span {
        display: block;
        width: 30px;
        margin-left: 1em;
        border-top: 1px solid #000;
        transition: 0.5s ease;

    }
    .header-wrap02 span:nth-of-type(1){
        padding-bottom: 0.5em;
    }
    .header-wrap02 span:nth-of-type(2){
        padding-bottom: 0.5em ;
    }

    .hamburger.active span:nth-of-type(1) {
        transition: 0.5s ease;
        transform: translate(-2px ,15px) rotate(45deg);
    }

    .hamburger.active span:nth-of-type(2) {
        border-top: 0;
    }

    .hamburger.active span:nth-of-type(3) {
        transform: rotate(-45deg);
        transition: 0.5s ease;

    }

    .header-inner .contact-icon-sp {
        content: '';
        display: block;
        width: 2em;
        aspect-ratio: 1 / 1;
        margin-left: auto;
        background: url(../image/contact_icon.webp) no-repeat center / contain;
    }


    .contact-box-sp.active {
        transform: translateX(0);
    }


    /* ---------------------------------------------------------------- scroll ----------------------------------------------------------------- */

    .scroll {
        display: none;
    }

    /* ---------------------------------------------------------------- top ----------------------------------------------------------------- */

    .top {
        height: calc(100% - 3em);
    }

    /* ---------------------------------------------------------------- loading ----------------------------------------------------------------- */


    .title-wrap {
        transform: scale(1.5);
    }

    .loading02 {
        transition: 1.5s ease-in-out;
    }
    .loading03 {
        transition: 1.5s 0.5s ease-in-out;
    }
    .loading04 {
        transition: 1.5s 1s ease-in-out;
    }
    .loading05 {
        transition: 1.5s 1.5s ease-in-out;
    }


    /* ---------------------------------------------------------------- loadingここまで ----------------------------------------------------------------- */


    .top-inner {
        flex-direction: column;
        height: auto;
        max-height: none;
        padding-top: 3em;
        padding-bottom: 3em;
    }

    .top-inner  .top-wrap01 {
        width: 100%;
        margin: 20vw 0;
    }


    .top-inner h1 {
        font-size: min(3.3vw , 20px);

    }

    .top-textbox .top-text {
        width: 100%;
        height: auto;
        font-size: min(3.3vw , 15px);
        text-align: center;
        line-height: 2;
    }
    .top-wrap01 .top-textbox {
        display: flex;
        width: 95%;
        height: auto;
        margin: 0 auto;
    }

    .top-wrap01 .top-textbox-pc {
        display: none;
    }
    .top-textbox-sp {
        display: block;
        width: 100%;
        margin-top: 20vw;
    }

    .top-textbox .top-textbox-inner {
        width: 80%;
        display: block;
        margin: 6vw auto 0 auto;
    }

    .top-textbox .top-text01,
    .top-textbox .top-text02 {
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: 0;
        max-width: 300px;
        min-width: 100px;
        margin: 0 auto 1em auto;
        padding: 0.5em 0;
        border-radius: 20px;
        font-size: clamp(12px, 0.8vw, 16px);
        opacity: 0;
        filter: drop-shadow(0 0 0 #dcdcdc);
        transition: 1s ease;

    }

    .top-textbox .top-text01.active,
    .top-textbox .top-text02.active {
        opacity: 1;
    }

    .top-inner .top-wrap02 {
        width: 85%;
    }

    .top-wrap02 .annotation {
        font-size: min(3.3vw , 12px);
    }

    .top-wrap02 .top_kv_01 {
        display: block;
        width: 65%;
        min-width: 150px;
        margin: 0 auto;
    }

    .top-scroll .top-scroll-inner {
        display: flex;
        width: 100%;
        min-width: 150px;
    }
    

    .top-text-pc {
        display: none;
    }
    
    .top-text-sp {
        display: block;
        opacity: 0;
        transition: 1s ease;
    }

    .top-text-sp.active {
        opacity: 1;
    }

    .circle, .circle-a {
        height: 15px;
    }

    .circle.active, .circle-a.active {
        transform: scale(1.5);
    }



    /* ---------------------------------------------------------------- product ----------------------------------------------------------------- */


    .product-inner {
        display: block;
        overflow: hidden;
        padding: 15vw 0;
        z-index: -1;
    }

    .product-inner h2 {
        position: absolute;
        top: 4%;
        right: 1%;
        z-index: -1;
        margin-left: 0;
        font-size: 22vw;
        letter-spacing: 0;
        writing-mode: horizontal-tb;
        color: rgba(255, 255, 255, 0.5);
    }

    .product-inner .product-wrap {
        width: 90%;
        margin: 5vw auto;
    }

    .product-wrap .splide img {
        width: 100%;
    }

    .product-wrap .splide p {
        width: 100%;
        font-size: min(3.3vw , 15px);
        line-height: 1.7;
    }

    .product-wrap .product-box {
        display: block;
        width: 100%;
        margin-top: 5em;
        margin: 10vw auto 0 auto;
    }

    .product-box .product-title {
        display: none;
    }

    .product-inner .product-box-inner01-sp {
        display: block;
        width: 100%;
        height: auto;
    }

    .product-box-inner01-sp .product-box-wrap-sp {
        display: block;
        width: 100%;
        margin: 8vw 0;
    }

    .product-box-inner01-sp  .product-title-sp {
        width: 90%;
        max-width: 430px;
        height: auto;
        margin: 0 auto 5vw auto;
        text-align: center;
    }
    .product-title-sp h3 {
        font-size: 15px;
        margin-bottom: 1em;
    }

    .product-title-sp img {
        max-width: 200px;
    }

    .product-box-inner01-sp .product-text-sp {
        width: 100%;
        text-align: center;
        line-height: 2;
        font-size: min(3.3vw , 15px);
    }


    .product-box .product-box-inner01 {
        width: 100%;
    }
    
    .product-box .product-box-wrap02 {
        width: 100%;
        flex-direction: row;
        justify-content: space-around;
    }

    .product-box-wrap02 .product-img01 {
        width: 55%;
        height: auto;
    }

    .product-box-wrap02 .product-img02 {
        width: 30%;
        height: auto;
        margin-top: 0;
    }
    
    .product-box .product-box-inner02 {
        width: 100%;
        margin-left: auto;
        margin-top: 8vw;
    }

    .product-box .product-box-inner02 img {
        width: 100%;
    }


    .product-price {
        margin-top: 3em;
    }

    .product-box-inner02 .table {
        width: 100%;
    }
    
    .product-box-inner02 p {
        font-size: min(4.1vw , 20px);
    }

    .product-box-inner02 .product-price-text {
        font-size: min(3.0vw , 15px);
    }
    
    .product-box-inner02 th,
    .product-box-inner02 td{
        padding: 1em;
    }
    
    
    .product-box-inner02 th {
        width: 5em;
        font-size: min(3.0vw , 15px );
        text-align: center;
    }
    
    .product-box-inner02 td {
        border-bottom: 1px solid #000;
        font-size: min(3.3vw , 15px);
        line-height: 1.7;
    }

    .product-box-inner02 .last td {
        font-size: min(3.0vw , 15px);
    }

    .product-price .annotation {
        width: 100%;
        font-size: 11px;
        line-height: 1.5;
    }

    /* ---------------------------------------------------------------- feature ----------------------------------------------------------------- */

    .feature-inner {
        display: flex;
        flex-direction: column;
        padding: 15vw 0;
    }

    .feature-inner .feature-wrap {
        display: flex;
        flex-direction: column;
        width: 90%;
    }

    .feature-wrap .feature-title {
        position: relative;
        display: block; 
        margin: 0 auto 5em auto;

    }

    .feature-title  h2 {
        position: absolute;
        top: -5.5%;
        left: 0;
        margin-left: 0;
        writing-mode: horizontal-tb;
        font-size: 23vw;
        letter-spacing: 0;
        mix-blend-mode: hard-light;
    }

    .feature-title img {
        width: 100%;
        height: auto;
        object-fit: contain;
        margin: 0 auto 8vw auto;
    }


    .feature-wrap .feature-box01 {
        display: block;
        margin-bottom: 30vw;
    }

    .feature-box01 img {
        width: 100% ;
    }

    .feature-box01 .feature_textbox {
        width: 100%;
        height: auto;
        margin: 0 auto 10vw auto;
    }
    .feature-box01 .feature_textbox::before {
        top: 24%;
        left: 16%;
        transform: translate(-50% , -50%);
        height: 40vw;
        max-width: 250px;
        opacity: 0.8;
    }


    .feature_textbox .feature_catchphrase {
        margin-bottom: 1.5em;
        font-size: min(5vw , 20px);
        text-align: center;
    }

    .feature_textbox .feature_detail {
        margin-bottom: 10vw;
        font-size: min(3.3vw , 15px);
        letter-spacing: 0.05em;
        text-align: center;
    }

    .feature-wrap .feature-box02 {
        flex-direction: column-reverse;
        margin-bottom: 40vw;
    }


    .feature-box02 .feature-02imgbox {
        display: block;
        width: 100%;
        margin: 0 auto;

    }

    .feature-box02 img {
        width: 100%;
        margin-left: 0;
    }


    .feature-box02 .feature_textbox {
        position: relative;
        width: 100%;
        height: auto;
    }

    .feature-box01 .feature_textbox p span,
    .feature-box02 .feature_textbox p span {
        display: none;
    }


    .feature-box02 .feature_textbox::before {
        top: -2%;
        left: 86%;
        width: auto;
        height: 45vw;
        max-width: 250px;
        opacity: 0.8;
    }

    .feature-wrap .feature-box03 {
        margin-bottom: 40vw;
    }

    .feature-box03 .feature_textbox {
        height: auto;
        margin-left: auto;
    }

    .feature-box03 .feature_textbox::before {
        top: 8%;
        left: 16%;
        height: 45vw;
        max-width: 250px;
        opacity: 0.8;
        z-index: -1;
    }

    .feature-box03 .feature-03imgbox {
        display: block;
        width: 100%;
        margin: 0 auto;

    }

    .feature-03imgbox .feature-img-cut {
        display: block;
        width: 50%;
        height: 30%;
        margin: 0;
        transform: translateX(100%) rotate(0) ;

    }

    .feature-box03.active .feature-03imgbox .feature-img-cut {
        transform: translateX(0) rotate(0);
    }

    .feature-03imgbox .feature-img-cut:nth-child(1){
        margin-left: auto;
    }

    .feature-03imgbox .feature-img-cut:nth-child(2){
        margin: 0 auto;
    }

    .feature-03imgbox .feature-img-cut:nth-child(3){
        margin-right: auto;
    }

    .feature-03imgbox img {
        display: block;
        width: 100%;
        margin: 0 auto;

    }

    .feature-wrap .feature-box04 {
        flex-direction: column-reverse;
        margin-bottom: 30vw;
    }

    .feature-box04 .feature_textbox {
        width: 100%;
        height: auto;
        margin-left: 0;
    }
    .feature-box04 .feature_textbox::before {
        top: 25%;
        left: 86%;
        max-width: 250px;
        height: 45vw;
        opacity: 0.8;
    }

    .feature_04_imgbox {
        width: 75%;
    }


    .feature-wrap .feature-box05 {
        margin-bottom: 30vw;
    }

    .feature-box05 .feature_textbox {
        width: 100%;
        min-width: auto;
        height: auto;
        margin-bottom: 10vw;

    }
    .feature-box05 .feature_textbox::before{
        top: 16%;
        left: 16%;
        height: 45vw;
        max-width: 250px;
        opacity: 0.8;
    }

    .feature-05imgbox-wrap {
        width: 33%;
    }


/* ---------------------------------------------------------------- simulator ----------------------------------------------------------------- */


    .simulator-inner {
        padding: 40vw 0;
    }


    .simulator-arrow img {
        display: block;
    }

    .simulator-arrow .simulator-arrow02 {
        margin-left: auto;
    }

    .simulator-wrap02 .simulator-box {
        display: block;
        padding: 5em 0;
    }

    .simulator-inner h2 {
        position: absolute;
        top: 1.5%;
        left: 2.5%;
        z-index: 3;
        width: 100%;
        max-width: 1600px;
        margin-bottom: 7vw;
        margin: 0;
        font-size: 17vw;

    }
    .simulator-inner .simulator-inner {
        display: block;
    }


    .simulator-textbox-sp {
        display: block;
    }


    .simulator-textbox-sp p {
        font-size: min(3.3vw , 15px);
        letter-spacing: 0.1em;
        line-height: 1.5;
    }

    .simulator-box .simulator-imgbox {
        width: 100%;
        height: auto;
        margin-bottom: 9vw;
        
    }

    .simulator-box .simulator-imgbox .simulator-calendar {
        position: relative;
        width: 100%;
    }


    .simulator-imgbox  .button-sp{
        display: block;
        width: 48%;
        max-width: 200px;
        margin-left: auto;
        margin-bottom: 1em;
        padding: 0.5em;
        color: #fff;
        background-color: #808080;

    }

    .simulator-titile {
        width: 100%;
        margin-bottom: 1em;
    }

    .simulator-imgbox h3{
        font-size: min(4.1vw , 20px);
        text-align: center;
    }

    .simulator-imgbox p {
        margin: 1em auto 0 auto;
        font-size: min(3.3vw , 15px);
        text-align: left;
    }

    .simulator-box .simulator-textbox {
        width: 100%; 
    }

    .simulator-button .simulator-button-category {
        max-width: 360px;
        margin: 0 auto;
        padding: 0;
        border-bottom: 0;
        color: #000;
    }

    .simulator-button .simulator-button-toggle {
        display: flex;
        justify-content: space-between;
        width: 45%;
    }

    .simulator-button .category01 {
        display: flex;
        margin-bottom: 0.5em;
    }

    .simulator-button-category .category-title {
        width: 20%;
        font-size: min(3.3vw, 15px);
    }

    .simulator-imgbox .simulator-titile {
        min-height: 120px;
        aspect-ratio: 5 / 1;
    }

    .simulator-scroll .simulator-scroll-inner {
        min-width: 200px;
        margin: 5vw auto 0 auto;
    }

    .simulator-scroll-inner img {
        width: 12%;
    }

    .simulator-circle {
        display: flex;
        gap: 1em;
    }


    .simulator-button-category .button {
        gap: 5px;
        justify-content: space-between;
    }


    .calendar-img02 {
        display: none;
    }

    .calendar-img02.active {
        display: block;
    }

    .simulator-button-category .button-gap #gothic-b-sp,
    .simulator-button-category .button-gap #gothic-l-sp,
    .simulator-button-category .button-gap #mincho-sp,
    .simulator-button-category .button-gap #cursive-sp { 
        width: 45%;
        padding: 1em;
        
    }



    .button button{
        width: 100%;
        text-align: center;
        font-size: min(3.3vw , 15px);
        transition: 0.1s ease all;
        filter: drop-shadow(2px 3px 0 #dcdcdc);
        }

    .button button:hover {
        cursor: pointer;
        background-color: #b4b4b7;
        filter: drop-shadow(0 0 0 #dcdcdc);
        box-shadow: inset 2px 3px 5px rgba(0 , 0 , 0 , 0.3);
        color: #fff;
    
    }   


    .simulator-textbox-sp .simulator-button .popup {
        display: flex;
        align-items: center;
        color: #000;
    }
    .simulator-textbox-sp .simulator-button .popup:hover {
        color: #fff;
    }

    .simulator-textbox-sp .button .popup::after {
        content: '';
        display: inline-block;
        width: 1em;
        aspect-ratio: 1 / 1;
        background: url(../image/simulator_icon.webp) no-repeat center / contain;
    }
    
    .simulator-textbox-sp .button:hover .popup::after {
        background: url(../image/simulator_icon_hover.webp) no-repeat center / contain;
    }

    
    .simulator-imgbox .button-sp p::after {
        content: '';
        display: inline-block;
        width: 1em;
        aspect-ratio: 1 / 1;
        background: url(../image/simulator_arrow_white.webp) no-repeat center / contain;
    }

    .button-pc,
    .pc {
        display: none;
    }

    .simulator-toggle {
        display: flex;
        justify-content: space-between;
        width: 100%;
        max-width: 360px;
        margin: 1em auto 0 auto;
    }

    .button {
        position: relative;
    }

    .toggle_input {
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 5;
        width: 100%;
        height: 100%;
        cursor: pointer;
        opacity: 0;
        background-color: #6e7747;
    }
    
    .toggle_label {
        -webkit-tap-highlight-color: transparent;
        position: relative;
        display: flex;
        align-items: center;
        width: 5em;
        height: 30px;
        border-radius: 40px;
        box-sizing: border-box;
        background-color: #f5f5f5;
        box-shadow: inset 3px 3px 8px rgba(0 , 0 , 0 , 0.2);
    }
    
    .toggle_label::before {
        position: absolute;
        left: 8%;
        top: 10%;
        content: '';
        width: 25px;
        height: 25px;
        border-radius: 100%;
        background-color: #fff;
        filter: drop-shadow(2px 3px 5% #dcdcdc);
        transition: 0.2s ease all;
    }
    
    .toggle_input:checked + .toggle_label::before {
        transform: translateX(2.8em);
        transition: 0.2s ease all;
    }
    
    .toggle_label::after {
        position: absolute;
        right: 12%;
        content: 'あり';
        font-size: min(3.3vw, 15px);
    }
    
    .toggle_input:checked + .toggle_label::after {
        left: 12%;
        content: 'なし';
        right: auto;
        color: #fff;
    }
    
    .toggle_input:checked + .toggle_label {
        background-color: #b3b4b6;
    }
    

    .simulator-inner .simulator-contact {
        margin:  8vw auto;

    }
    .simulator-inner .simulator-contact {
        padding: 1em 0.5em 1em 1em;
        font-size: 15px;
    }

    .simulator-contact::after {
        display: inline-block;
        content: '';
        width: 1em;
        aspect-ratio: 1 / 1;
        padding-left: 1.5em;
        background: url(../image/simulator_arrow_black.webp) no-repeat center / contain;
    }

    .modal-window-inner .modal-window-img.active {
        display: block;
        margin-bottom: 0;
        aspect-ratio: 4 / 3;
    }
    .modal-window-inner .modal-window-img {
        display: none;
    }

    .modal-window-img .modal-window-img-wrap{
        width: 100%;
    }

    .modal-window-img img {
        margin-bottom: 0;
    }

    .modal-window-inner h3 {
        width: 60%;
        min-width: 145px;
        font-size: min(3.3vw , 20px);
    }
    .modal-window-img p {
        font-size: min(3.3vw , 15px);
        margin-top: 0;
    }

    .modal-window-inner .modal-window-text {
        display: none;
    }

    select {
        -webkit-appearance: none;
        appearance: none;
        background: url(../image/modal_icon.webp) no-repeat right 10px center / contain;
        background-size: 1em auto;

    }

    #month-select {
        display: block;
        width: 95%;
        margin: 0 auto 5vw auto;
        padding: 0.5em 0;
        text-align: center;
        color: #fff;
        background-color: #808080;
    }
    
    .simulator-inner .simulator-text{
        width: 90%;
        margin: 5vw auto;
    }

    .simulator-inner .simulator-text p {
        font-size: min(3.3vw , 18px);
        text-align: left;

    }

    .simulator-inner .simulator-text-det {
        width: 90%;
        margin: 5vw auto;

    }

    .simulator-inner .simulator-text-det p {
        font-size: min(3.3vw , 15px);

    }

    .modal-window-inner #target03 {
        top: 2%;
        width: 2vw;
    }

    .original-inner {
        position: relative;
    }
    
    .original-inner h2 {
        position: absolute;
        top: 5.5%;
        left: 2.5%;
        opacity: 0.5;
        width: 95%;
        max-width: 1920px;
        font-size: 20vw;
        letter-spacing: 0;
    }

    .original-inner {
        padding: 50vw 0;
    }

    .original-text p {
        font-size: clamp(12px , 2.2vw , 18px);
    }

    .original-text .click {
        font-size: 12px;
    }
    

    .original-imgbox ul {
        width: auto;
        height: 30vw;
        z-index: 1;
        background-color: #fff;
    }
    
    .original-imgbox ul li img {
        height: 100%;
    }

    .original-inner .original_slideshow {
        display: flex;
        animation: infinity-scroll-left 30s infinite linear 0.5s both;
    }

    .contact .contact-logo {
        width: 100%;
        max-width: 342px;
        margin: 38vw auto;
    }
    .contact-logo h3 {
        margin-bottom: 2em;
        font-size: min(3.3vw , 18px);
        text-align: center;
    }
    
    .contact-logo img {
        display: block;
        max-width: 200px;
        margin: 0 auto;
    }
    
    
    .contact .contact-wrap {
        width: 85%;
        max-width: 320px;
        margin: 0 auto;
        padding: 1em 4vw;
    }

    .contact-inner .contact02 {
        width: 85%;
        max-width: 320px;
        margin: 4vw auto;
        padding: 1.5em 4vw;
        font-size: min(4.1vw , 18px );
    }
    
    .contact-wrap .contact-tell {
        font-size: min(5.5vw , 30px);
    }
    
    .contact-wrap .contact-tell::before {
        display: inline-block;
        content: '';
        width: 0.7em;
        aspect-ratio: 1 / 1;
        padding-right: 0.6em;
        background: url(../image/contact_tell.webp) no-repeat center / contain;
    }
    
    
    .contact-wrap .contact-deta {
        font-size: min(3.3vw , 20px);
    }

    .contact-wrap .contact-deta::before {
        width: 40vw;
        min-width: 190px;
    }
    
    .contact-mail {
        font-size: min(3.3vw , 20px);
    }


    .footer .footer-inner {
        flex-direction: column-reverse;
    }

        
    .footer-inner p {
        width: 95%;
        margin-bottom: 0.5em;
        font-size: min(2.7vw , 12px);
        letter-spacing: 0.05em;
    }

    .footer-inner img {
        width: 40%;

    }



}



/* ---------------------------------------------------------------- メディアクエリ 675px ----------------------------------------------------------------- */


@media screen and (max-width:675px)  {
    
    .pc02 {
        display: none;
    }

}






/* ---------------------------------------------------------------- メディアクエリ 445px ----------------------------------------------------------------- */


@media screen and (max-width:445px)  {
    .sp {
        display: block;
    }
    .original-text p {
        font-size: 12px;
    }

}