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

    body {
        margin: 0;
        padding: 0;
        font-family: "Noto Serif JP", serif;
        font-weight: 600;
        text-align: center;
        font-size: 0.95em;
        letter-spacing: 0.05em;
        line-height: 1.8;
    }

    .pc {
        display: none !important;
    }

    .spc {
        display: none;
    }

    .tab {
        display: none;
    }

    .tab.sp {
        display: inline-block;
    }

    .sp {
        display: inline-block;
    }

    .ssp {
        display: inline-block;
    }

    img {
        display: block;
        margin: auto;
    }

    .wrap {
        width: 95%;
        max-width: 800px;
        margin: auto;
    }

    .wrap2 {
        width: 90%;
        margin: auto;
    }





    h2,
    h3 {
        font-weight: 600;
    }

    .w100 {
        width: 100%;
    }

    .space100 {
        height: 100px;
    }

    h3.title {
        position: relative;
        background-color: #241D19;
        padding: 10px 0;
        margin-bottom: 6vw;
    }

    h3.title::before {
        content: "";
        width: 100%;
        height: 2px;
        background: linear-gradient(to right, #421314, #6F4B26, #B1954F, #EADCBA, #A38358, #8D5429);
        position: absolute;
        top: -8px;
        left: 0;
    }

    h3.title::after {
        content: "";
        width: 100%;
        height: 2px;
        background: linear-gradient(to right, #421314, #6F4B26, #B1954F, #EADCBA, #A38358, #8D5429);
        position: absolute;
        bottom: -8px;
        left: 0;
    }

    a {
        text-decoration: none;
        transition: 0.5s;
    }

    a:hover {
        opacity: 0.7;
    }


    header {
        background-image: url("../img/kv_sp.png");
        background-size: cover;
        background-color: transparent;
        background-blend-mode: overlay;
    }

    header .wrap {
        position: static;
        z-index: 0;
        padding: 50px 0;
        height: calc(100vh - 100px);
    }

    header .kv {
        display: block !important;
        position: static;
        z-index: 0;
        top: 0;
        right: 0;
        height: auto;
        width: 100%;
    }

    header .left {
        width: 100%;
    }

    header .left h2 {
        order: 3;
    }

    header .left p {
        order: 1;
    }

    header .left .spacer {
        order: 2;
        height: 60vh;
    }

    h1 img {
        margin: auto;

    }

    header .flex {
        display: flex;
        flex-direction: column-reverse;
    }


    /*sec01*/

    #sec01 {
        background-image: url("../img/bg_02.jpg");
        background-size: cover;
        color: #fff;
        padding: 100px 0% 50px;
        position: relative;
    }

    #sec01 .asset01 {
        position: absolute;
        width: 100%;
        top: 0;
        left: 0;
        transform: translateY(-50%);
    }

    #sec01 .grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 20px;
        text-align: center;
        margin-bottom: 30px;
    }

    #sec01 h2 {
        margin-bottom: 80px;
        font-size: 5vw;
    }

    #sec01 p {
        margin: 40px 0;
        font-size: 0.9em;
    }

    #sec01 h3.title {
        margin-bottom: 30px;
        font-size: 3.5vw;
    }


    /*sec02*/

    #sec02 {
        background-image: url(../img/bg_03.png);
        background-size: cover;
        color: #fff;
        padding: 20px 0 50px;
    }

    #sec02 a {
        display: inline-block;
        padding: 3px 25px;
        background-color: #fff;
        color: #000;
        font-size: 0.9em;
    }

    #sec02 h3 small {
        font-size: 0.7em;
    }



    /*sec03*/

    #sec03 {
        background-image: url(../img/bg_02.jpg);
        background-size: cover;
        color: #fff;
        padding: 50px 0 50px;
    }

    #sec03 .grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 20px;
        text-align: center;
        align-items: stretch;
    }

    #sec03 h3.title {
        font-size: 3.4vw;
    }

    #sec03 .grid img {
        width: 100%;
    }

    #sec03 .grid01 {
        align-items: center;
        font-size: 0.95em;
    }

    #sec03 .grid .cnt {
        position: relative;
    }

    #sec03 .sp_small {
        font-size: 1em;
    }

    #sec03 .grid .cnt img {
        position: absolute;
        bottom: auto;
        right: 50%;
        top: -5vw;
        transform: translateX(50%);
        width: 80%;
    }

    #sec03 .grid02 {
        width: 90%;
        margin: auto;
        margin-top: 50px;
    }

    #sec03 .grid02 .cnt {
        order: 2;
        padding-top: 45vw;
    }

    #sec03 .grid02 img {
        order: 1;
    }

    /*sec04*/

    #sec04 {
        background-image: url(../img/bg_04.jpg);
        background-size: cover;
        color: #fff;
        padding: 20px 0 100px;
    }

    #sec04 h2 {
        font-size: 5.5vw;
    }

    #sec04 .kv2 {
        margin: 20px 0 50px;
        width: 100%;
    }

    #sec04 .grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 20px 10%;
        text-align: left;
        align-items: stretch;
        width: 90%;
        margin: auto;
    }

    #sec04 .grid .title {
        position: relative;
    }

    #sec04 .grid .title>img {
        position: absolute;
        top: 50%;
        left: 0;
        transform: translate(-40%, -50%);
        width: 15vw;
    }

    #sec04 .grid h3 {
        position: relative;
        padding: 10px;
        border-bottom: #fff double 5px;
        cursor: pointer;
        padding: 10px 0 10px 11vw;
        font-size: 1em;
    }



    #sec04 .grid .cnt {
        height: 0;
        transition: 0.3s;
        overflow: hidden;
    }

    #sec04 .grid .cnt.active {
        height: 100%;
        /* max-height: auto; */
    }



    #sec04 .arrow {
        position: absolute;
        top: 50%;
        right: 10px;
        transform: translateY(-50%);
        width: 15px;
    }

    #sec04 .arrow.active {
        transform: translateY(-50%) rotate(180deg);
    }

    #sec04 .fascinate {
        width: 50%;
        max-width: 160px;
    }

    /*sec05*/

    #sec05 {
        background-image: url(../img/bg_02.jpg);
        background-size: cover;
        color: #fff;
        padding: 50px 0;
    }

    #sec05 .grid {
        display: grid;
        width: 90%;
        grid-template-columns: 1fr 1fr;
        gap: 3vw;
        margin: 30px auto;
    }

    #sec05 .grid img {
        width: 100%;
    }

    /*sec06*/

    #sec06 {
        background-image: url(../img/bg_05.jpg);
        background-size: cover;
        color: #fff;
        padding: 50px 0 100px;
    }

    #sec06 h2 {
        margin-bottom: 30px;
    }

    #sec06 .border_top {
        border-top: #fff 1px solid;
        overflow-x: hidden;
        position: relative;
    }

    #sec06 .border_top .arrow {
        position: absolute;
        top: 50%;
        right: 0;
        transform: translate(0, -50%);
        width: 10px;
        cursor: pointer;
    }

    #sec06 .border_top .arrow.active {
        transform: translate(0, -50%) rotate(180deg);
    }


    #sec06 .border_top .toggle {
        width: 200%;
        display: grid;
        grid-template-columns: 1fr 1fr;
        transition: 0.5s;
    }

    #sec06 .border_top .toggle.active {
        margin-left: -100%;
    }

    #sec06 .border_top .title {
        display: grid;
        width: 95%;
        padding: 20px 0;
        grid-template-columns: 1fr 0.8fr;
        align-items: center;
    }

    #sec06 .border_top .title>img {
        width: 100%;
    }

    #sec06 .border_top .title h3 {
        line-height: 0.8;
        font-size: 1.05em;
    }

    #sec06 .border_top h3>img {
        margin-bottom: 10px;
    }

    #sec06 .border_top .cnt {
        display: flex;
        align-items: left;
        padding: 10px;
        width: calc(100% -20px);
        justify-content: space-between;
    }

    #sec06 .border_top .cnt .flex {
        display: block;
    }

    #sec06 .border_top .cnt .flex img {
        display: inline-block;
        width: auto;
        width:10px;
    }

    #sec06 .border_top .cnt p {
        margin: 0;
        display: block;
        margin: 10px auto;
        width: 100%;
    }

    #sec06 .border_top .cnt img {
        margin: 0;
        margin-left: auto;
        display: inline-block;
        width: 40%;
    }

    #sec06 .border_top .cnt .left {
        width: 100%;
        text-align: left;
        font-size: 0.9em;
    }


    #sec06 h3.small {
        letter-spacing: 0.1rem;
    }

    #sec06 small {
        font-size: 0.8em;
        display: block;
        text-align: left;
    }

    #sec06 h3 small {
        font-size: 0.3em;
        display: inline-block;
    }

    /*sec07*/

    #sec07 {
        background-image: url(../img/bg_02.jpg);
        background-size: cover;
        color: #fff;
        padding: 50px 0 100px;
    }

    #sec07 .gradation {
        margin: 20px 0;
        padding: 20px;
        background: linear-gradient(360deg, #ffffff99, #ffffff22);
        color: #000;
    }

    #sec07 .gradation .grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 5%;
        margin-bottom: 50px;
    }

    #sec07 .gradation .grid p {
        margin: 0;
        color: #fff;
        font-size: 0.75em;
    }

    #sec07 small {
        font-size: 0.6em;
        letter-spacing: 0.1em;
    }

    #sec07 small.block {
        display: block;
        text-align: left;
        font-size: 0.7em;
        letter-spacing: 0.1em;
    }

    /*sec08*/

    #sec08 {
        background-image: url(../img/bg_06.jpg);
        background-size: cover;
        color: #fff;
        padding: 50px 0 100px;
    }

    #sec08 .grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 30px;
        margin-top: 50px;

    }

    /*sec09*/

    #sec09 {
        background-image: url(../img/bg_07.jpg);
        background-size: cover;
        padding: 50px 0 150px;
    }

    #sec09 h2 {
        letter-spacing: 0.1em;
        font-size: 1.3em;
        margin-bottom: 80px;
    }

    #sec09 .allin {
        width: 90%;
        max-width: 800px;
        margin-bottom: 100px;
    }

    #sec09 h3.title {
        background-color: #ffffff !important;
        font-size: 1em;
    }

    #sec09 .grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
        align-items: center;
        text-align: left;
        padding: 0 5%;
        margin-bottom: 50px;
    }

    #sec09 .grid p {
        padding-left: 0%;
        font-size: 0.9em;
        letter-spacing: 0.1em;
    }

    /*sec10*/

    #sec10 {
        background-image: url(../img/bg_08.jpg);
        background-size: cover;
        padding: 100px 0 150px;
    }

    .videos_container {
        width: 90%;
        min-width: auto;
        margin: auto;
        margin-top: 50px;
        position: relative;
    }

    #video-next,
    #video-prev {
        position: absolute;
        opacity: 0.5;
        transition: 0.5s;
        font-size: 30px;
        border: none;
        font-weight: 900;
        color: #fff;
        background-color: transparent;
    }

    #video-next:hover,
    #video-prev:hover {
        opacity: 0.8;
    }

    #video-next {
        top: 50%;
        right: 0;
        transform: translate(0, -50%);
    }

    #video-prev {
        top: 50%;
        left: 0;
        transform: translate(0, -50%);
    }


    .videos iframe {
        width: 100%;
        aspect-ratio: 1.77/1;
    }


    .slick-dots li button:before {
        font-size: 30px;
        /* デフォルトは10pxくらい */
    }


    /*sec11*/

    #sec11 {
        background-image: url(../img/bg_07sp.png);
        background-size: cover;
        padding: 0 0 250px;
    }

    #sec11 h2 {
        text-align: center;
    }



    #sec11 .cnt {
        font-size: 0.9em;
        width: calc(100% - 40px);
        position: relative;
        z-index: 1;
        margin-top: 100px;
        padding: 20px !important;
        margin-bottom: 0;
        background-color: #ffffff55;
    }

    #sec11 .ange {
        display: block;
        position: relative;
        bottom: 0;
        right: 0;
        z-index: 0;
        height: auto;
        width: 100%;
    }

    #sec11 .gradation {
        padding: 50px 0 20px;
        background: linear-gradient(180deg, #ffffff99, #ffffff00);
        margin: 0 0 100px;
        text-align: left;
    }

    #sec11 .wrap>div {
        background-color: #ffffff88;
        padding-top: 50px;
    }

    #sec11 .item_wrap {
        background-color: transparent;
        padding: 20px;
    }

    #sec11 .item_info {
        display: block;
        width: 100%;
    }



    #sec11 .item_info>img {
        width: 150px;
        margin: auto;
        position: relative;
        transform: translateX(25%);
    }


    #sec11 .seduce {
        width: 250px;
        margin: 0;
        margin-left: 10%;
    }


    #sec11 .item_info h3 {
        margin-top: 10px;
    }

    #sec11 .item_info p {
        margin: 20px 0;
    }

    #sec11 .item_info a {
        display: block;
        width: fit-content;
        background-color: #281916;
        color: #fff;
        padding: 15px 80px;
        font-size: 4vw;
        margin: 50px auto;
    }

    #sec11 small {
        display: inline-block;
        font-size: 0.45em;
        letter-spacing: 0.1em;
        line-height: 1.5;
    }


    /*sec12*/

    #sec12 {
        background-image: url(../img/bg_09.jpg);
        background-size: cover;
        padding: 50px 0 150px;
        color: #fff;
        text-align: left;
    }

    #sec12 h2 {
        text-align: center;
        margin-bottom: 50px;
    }

    #sec12 h3 {
        padding-bottom: 10px;
        border-bottom: #fff 2px dotted;
        position: relative;
        cursor: pointer;
        font-size: 3.6vw;
        letter-spacing: 0;
    }

    #sec12 h3 img {
        position: absolute;
        top: 50%;
        right: 0;
        transform: translateY(-50%);
        width: 15px;
    }

    #sec12 .qa {
        width: 95%;
        margin: auto;
        margin-bottom: 40px;
        overflow: hidden;
    }

    #sec12 .qa>p {
        height: 0;
        margin: 0;
        transition: 0.3s;
    }

    #sec12 .qa>p.active {
        height: 200px;
        max-height: fit-content;
        font-size: 0.9em;
        line-height: 1.7;
    }

    /*sec13*/

    #sec13 {
        background-image: url(../img/bg_07.jpg);
        background-size: cover;
        padding: 100px 0;
    }

    #sec13 h2.faq {
        width: fit-content;
        margin: 0 auto 100px;
        position: relative;
    }

    #sec13 h2 img {
        position: absolute;
        top: 50%;
        left: -5%;
        transform: translate(-100%, -50%);
        width: 30vw;
    }

    #sec13 .grid {
        display: grid;
        margin: auto;
        width: 90%;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr 1fr 1fr;
        gap: 50px;
        margin-bottom: 100px;
    }

    #sec13 .grid>div {
        border: 2px solid;
        border-image: linear-gradient(to right, #421314, #6F4B26, #B1954F, #EADCBA, #A38358, #8D5429) 1;
        padding: 5px;
        position: relative;
        display: flex;
        align-items: stretch;
    }

    #sec13 .grid>div>p {
        background-color: #ffffff55;
        margin: 0;
        padding: 20px 10px;
        font-size: 0.9em;
        display: flex;
        align-items: center;
        text-align: left;
        letter-spacing: 0.1em;
        line-height: 1.5;
        width: calc(100% - 20px);
        justify-content: center;
    }

    #sec13 .grid>div .next {
        position: absolute;
        top: auto;
        bottom: -25px;
        right: 50%;
        transform: rotate(90deg) translate(100%, 0);
    }

    #sec13 h2 {
        font-size: 1.15em;
    }

    #sec13 .info {
        text-align: center;
        letter-spacing: 0;
        margin-bottom: 100px;
    }

    #sec13 .info span {
        display: inline-block;
        font-size: 1.5em;
        border-bottom: red 1px solid;
        padding-bottom: 0px;
    }

    #sec13 .info .flex {
        display: block;
        justify-content: space-between;
        align-items: start;
    }

    #sec13 .info .flex p {
        width: 100%;
        padding-top: 0;
        letter-spacing: 0.1em;
    }

    #sec13 .info .flex img {
        width: 100%;
        margin-top: 20px;
    }

    #sec13 .voice{
        font-size: 1.5em;
        letter-spacing: 0.1em
    }

    #sec13 .voice img{
        width: 50px ;
    }

    .insta_container {
        width: 100%;
        min-width: auto;
        margin: 50px auto 0;
        position: relative;
    }


    .insta_next {
        top: 50%;
        right: 12%!important;
        transform: translate(50%, -100%);
    }

    .insta_prev {
        top: 50%;
        left: 12%!important;
        transform: translate(-50%, -100%);
    }


    .insta .slick-slide {
        display: flex;
        height: 300px;
        align-items: center;
    }

    /* .insta スライダー内の画像 */
    .insta .slick-slide img {
        width: 90%;
        height: auto;
        opacity: 0.5;
        transition: 0.5s;
    }

    .insta .slick-center img {
        width: 100%;
        height: auto;
        opacity: 1;
    }

    /* .insta スライダーの左右の余白 */
    .insta .slick-list {
        padding: 0 12% !important;
    }

    /* .insta スライダーのスライド間隔 */
    .insta .slick-track {
        display: flex !important;
    }

}