/* riset css */
    main {
        max-width: none;
    }

    .section-eyecatch {
        max-width: none;
        width: 100%;
    }

    .section-eyecatch p {
        text-align: center;
    }

    .section-itemlist {
        max-width: 1200px;
    }

    h1 {
        width: 100%;
        max-width: none;
    }

    .main-visual {
        position: relative;
        background: url("/images/summercolor/sand-bg.jpg") no-repeat;
        background-size: cover;
        background-attachment: fixed;
        height: 520px;
    }

    .for-watches {
        max-width: 1920px;
        margin: auto;
        height: 100%;
        position: relative;
        width: 80%;
    }

    .top1 {
        position: absolute;
        left: 0%;
        transform: translateX(-50%);

    }

    .top2 {
        position: absolute;
        right: 0%;
        transform: translateX(50%);
    }

    .main-ttl {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        z-index: 1;
    }

    .main-ttl h1 {
        color: #0E4F88;
        font-size: clamp(124px, 95.325px + 3.734vw, 170px);
        font-family: big-caslon-fb, serif;
        font-weight: 700;
        position: relative;
        text-align: center;
        letter-spacing: 0.07em;
        /* filter: drop-shadow(2px 0px 3px #8d8d8d); */
        line-height: 1.15;
    }

    .script {
        font-family: adventures-unlimited, sans-serif;
        font-weight: 400;
        position: absolute;
        bottom: -35px;
        right: -18px;
        font-size: 100px;
        letter-spacing: 0.02em;
        color: #54b2ae;
    }

    .lead-txt {
        text-align: center;
        margin: 100px auto 35px;
    }

    .lead-txt h2 {
        font-size: clamp(56px, 48.519px + 0.974vw, 68px);
        width: 90%;
        font-family: big-caslon-fb, serif;
        color: #1878C4;
        margin: 0 auto 50px;
        letter-spacing: 0.04em;
    }

    .lead-txt p {
        font-size: 24px;
        color: #5eaee6;
        line-height: 2.5;
        width: 90%;
        margin: auto;
    }

    .colors {
        margin-top: 60px;
    }

    .colors-flex {
        display: flex;
        max-width: 1290px;
        margin: 100px auto 200px;
        justify-content: space-between;
        height: 505px;
    }

    .flex-inner {
        display: flex;
        flex-direction: column;
        width: 23%;
    }

    .flex-inner a {
        height: 100%;
    }

    .flex-inner p {
        font-family: big-caslon-fb, serif;
        font-size: 32px;
        letter-spacing: 0.07em;
        margin-top: 15px;
    }

    .flex-inner span {
        display: block;
        margin-top: 5px;
    }

    .color-img {
        content: "";
        width: 100%;
        height: 100%;
        border-radius: 0 20px;
        transition: 0.5s;
    }

    .color-img:hover {
        opacity: 0.5;
    }


    .turquoise .color-img {
        background: url("/images/summercolor/color-t.jpg")no-repeat;
        background-size: cover;
    }

    .green .color-img {
        background: url("/images/summercolor/color-g.jpg")no-repeat;
        background-size: cover;
    }

    .white .color-img {
        background: url("/images/summercolor/color-w.jpg")no-repeat;
        background-size: cover;
    }

    .iceblue .color-img {
        background: url("/images/summercolor/color-i.jpg")no-repeat;
        background-size: cover;
    }


    .turquoise p,
    .turquoise span {
        color: #088291;
    }

    .white p,
    .white span {
        color: darkgray;
    }

    .green p,
    .green span {
        color: #0e5f2a;
    }

    .iceblue p,
    .iceblue span {
        color: #36b6f1;
    }

    .star img {
        text-align: center;
    }

    .collection {
        padding-top: 120px;
        text-align: center;
        margin-bottom: 170px;
        position: relative;
    }

    .custom-shape-divider-bottom-1747467366 {
        position: absolute;
        top: -8px;
        left: 0;
        width: 100%;
        overflow: hidden;
        line-height: 0;
    }

    .custom-shape-divider-bottom-1747467366 svg {
        position: relative;
        display: block;
        width: calc(163% + 1.3px);
        height: 210px;
        transform: rotateX(180deg);
    }

    .custom-shape-divider-bottom-1747467366 .shape-fill {
        fill: #FFFFFF;
    }


    .custom-shape-divider-top-1748066133 {
        position: absolute;
        top: -8px;
        left: 0;
        width: 100%;
        overflow: hidden;
        line-height: 0;
    }

    .custom-shape-divider-top-1748066133 svg {
        position: relative;
        display: block;
        width: calc(163% + 1.3px);
        height: 210px;

    }

    .custom-shape-divider-top-1748066133 .shape-fill {
        fill: #FFFFFF;
    }


    #turquoise {
        background: url("/images/summercolor/turquoise-bg.png")no-repeat;
        background-size: cover;
    }

    #white {
        background: url("/images/summercolor/white-bg.png")no-repeat;
        background-size: cover;
        background-position: center;
    }

    #green {
        background: url("/images/summercolor/green-bg.png")no-repeat;
        background-size: cover;
    }

    #iceblue {
        background: url("/images/summercolor/iceblue-bg.png")no-repeat;
        background-size: cover;
    }



    .collection span {
        display: block;
        color: #00315b;
        margin-top: 10px;
        font-size: 20px;
    }

    .about-color {
        font-size: 24px;
        line-height: 2.5;
        color: #414141;
        font-weight: 500;
        width: 90%;
        margin: 0 auto;
        letter-spacing: 0.05em;

    }

    .color-num {
        font-size: 60px !important;
        color: #4ebce2 !important;
        font-family: big-caslon-fb, serif;
        font-family: campaign-serif, sans-serif;
        margin-bottom: 10px;

    }

    .color-num::after {
        content: "";
        border-bottom: 35px solid #4ebce2;
        width: 0.1rem;
        display: block;
        margin: 10px auto 10px;
    }

    .collection h3 {
        color: #00315b;
        font-size: 82px;
        letter-spacing: 0.08em;
        font-family: big-caslon-fb, serif;
        margin-bottom: 20px;
        padding-top: 180px;
    }

    .item-flex {
        width: 100%;
        max-width: 1200px;
        margin: 100px auto 80px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
    }

    .row-reverse {
        flex-direction: row-reverse;
    }

    .box-left {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        width: 48%;
    }

    .box-inner {
        width: 49%;
        margin-bottom: 25px;
    }

    .item-img {

        overflow: hidden;
        background: #FFF;
    }

    #turquoise .item-img {
        border: 1px solid #005c6b;
    }

    #white .item-img {
        border: 1px solid #c7c0a5;
    }

    #green .item-img {
        border: 1px solid #0c7a0c;
    }

    #iceblue .item-img {
        border: 1px solid #00b2c7;
    }

    .item-img img {
        transition: 0.4s;
    }

    .item-img img:hover {
        transform: scale(1.1);
    }

    .item-txt .name,
    .item-txt .ref,
    .item-txt .price {
        text-align: left;
    }

    .item-txt .name {
        font-weight: 600;
        margin-top: 0.5em;
    }


    #turquoise .item-txt .name,
    #turquoise .item-txt .ref,
    #turquoise .item-txt .price {
        color: #005b6b;
    }

    #white .item-txt .name,
    #white .item-txt .ref,
    #white .item-txt .price {
        color: #827960;
    }

    #green .item-txt .name,
    #green .item-txt .ref,
    #green .item-txt .price {
        color: #055d07;
    }

    #iceblue .item-txt .name,
    #iceblue .item-txt .ref,
    #iceblue .item-txt .price {
        color: #4ba0e4;
    }

    .item-txt .price {
        margin-top: 0.5em;
        font-size: 12px;
        display: none;
    }

    .item-img img {
        width: 100%;
    }

    .box-right {
        width: 47%;
        position: relative;
    }

    .box-right-1 {
        position: absolute;
        top: 12%;
        left: 5%;
        transform: unset;
        background-position: center;
        background-size: 115%;
        width: clamp(250px, 40vw, 400px);
        aspect-ratio: 1 / 1.1;
    }

    #turquoise .box-right-1 {
        background: url("/images/summercolor/turquoise1.jpg")no-repeat;
        background-position: center;
        background-size: 115%;
    }

    #white .box-right-1 {
        background: url("/images/summercolor/white1.jpg")no-repeat;
        background-position: center;
        background-size: 115%;
    }

    #green .box-right-1 {
        background: url("/images/summercolor/green1.jpg")no-repeat;
        background-position: center;
        background-size: 115%;
    }

    #iceblue .box-right-1 {
        background: url("/images/summercolor/iceblue1.jpg")no-repeat;
        background-position: center;
        background-size: 115%;
    }

    .box-right-2 {
        position: absolute;
        bottom: 20%;
        right: 5%;
        transform: unset;
        background-position: center;
        background-size: 115%;
        width: clamp(170px, 35vw, 330px);
        aspect-ratio: 4 / 3;
    }

    #turquoise .box-right-2 {
        background: url("/images/summercolor/turquoise2.jpg")no-repeat;
        background-position: center;
        background-size: 115%;
    }

    #white .box-right-2 {
        background: url("/images/summercolor/white2.jpg")no-repeat;
        background-position: center;
        background-size: 115%;
    }

    #green .box-right-2 {
        background: url("/images/summercolor/green2.jpg")no-repeat;
        background-position: center;
        background-size: 115%;
    }

    #iceblue .box-right-2 {
        background: url("/images/summercolor/iceblue2.jpg")no-repeat;
        background-position: center;
    }


    .color-link {
        margin: 0 auto;
        width: 60vw;
        max-width: 750px;
        border-radius: 5px;
        transition: 0.6s;
    }

    .color-link:hover {
        opacity: 0.8;
    }

    #turquoise .color-link {
        background: linear-gradient(45deg, #088291, #36bebc);
    }

    #white .color-link {
        background: linear-gradient(45deg, #e1cdac, #e6ddcc);
    }

    #green .color-link {
        background: linear-gradient(45deg, #23472f, #359c32);
    }

    #iceblue .color-link {
        background: linear-gradient(45deg, #75b5e3, #8dd8eb);
    }

    .color-link a {
        display: block;
        font-size: 30px;
        letter-spacing: 0.2em;
        font-family: big-caslon-fb, serif;
        color: #fff;
        padding: 40px 0;
        transition: 0.4s;
    }

    .color-link a:hover {
        letter-spacing: 0.4em;
    }

    /* 0～768 */
    @media only screen and (max-width: 768px) {

        /* reset */
        h1 {
            margin-left: 0 !important;
            margin-top: 0% !important;
        }

    }


    /* 0～767 */
    @media only screen and (max-width: 767px) {


        .main-visual {
            height: clamp(260px, 59.107px + 53.571vw, 470px);
            background-attachment: unset;
        }

        .main-ttl h1 {
            margin: 0 !important;
            font-size: clamp(64px, 10.429px + 14.286vw, 120px);
        }

        .script {
            right: 2%;
            font-size: clamp(70px, 41.301px + 7.653vw, 100px);
        }

        .lead-txt {
            margin: 50px auto 35px;
        }

        .lead-txt h2 {
            font-size: clamp(44px, 34.434px + 2.551vw, 54px);
            margin-bottom: 25px;
        }

        .lead-txt p {
            width: 95%;
            margin: auto;
            font-size: clamp(16px, 12.173px + 1.02vw, 20px);
        }

        .star img {
            width: 40px;
        }

        .colors-flex {
            flex-wrap: wrap;
            justify-content: space-between;
            margin: 50px auto 20px;
            width: 90%;
            height: auto;
            max-width: 640px;
        }

        .color-img {
            height: auto;
            padding-top: 169%;
        }

        .flex-inner {
            width: 47%;
            margin-bottom: 30px;
        }

        .flex-inner p {
            font-size: clamp(22px, 12.434px + 2.551vw, 32px);
        }

        .custom-shape-divider-bottom-1747467366 svg,
        .custom-shape-divider-top-1748066133 svg {
            height: 90px;
        }

        .custom-shape-divider-top-1748066133 {
            top: -3px;
        }

        .collection {
            margin-bottom: 80px;
            padding-top: 90px;
        }

        .collection h3 {
            padding-top: 0px;
            font-size: clamp(48px, 15.474px + 8.673vw, 82px);
        }

        .about-color {
            line-height: 2;
            font-size: 16px;
        }

        .row-reverse {
            flex-direction: column;
        }

        .item-flex {
            margin: 50px auto 20px;
            align-items: center;
        }

        .box-left {
            flex-wrap: wrap;
            width: 90%;
            justify-content: space-between;
            max-width: 640px;
        }

        .box-right {
            width: 90%;
            padding-top: 80%;
        }

        .box-right-1 {
            top: 7%;
            left: 9%;
            width: clamp(160px, 26.071px + 35.714vw, 300px);
        }

        .box-right-2 {
            right: 5%;
            bottom: 9%;
            z-index: -1;
            width: clamp(180px, 7.806px + 45.918vw, 360px);
        }

        .color-num {
            font-size: 52px !important;
        }

        .color-link {
            width: 90%;
            max-width: 640px;
        }

        .color-link a {
            font-size: 24px;
            padding: 20px 0;
        }

        #green {
            background: url("/images/summercolor/green-bg.png")no-repeat;
            background-size: cover;
            background-position: center;

        }

    }


    /* ・・・・・・・・・・動き・・・・・・・・・・ */

    .blurTrigger {
        animation-name: blurAnime;
        animation-duration: 1.2s;
        animation-fill-mode: forwards;
        opacity: 0;
    }

    @keyframes blurAnime {
        0% {
            filter: blur(10px);
            transform: scale(1.02);
            opacity: 0;
        }

        100% {
            filter: blur(0);
            transform: scale(1);
            opacity: 1;
        }
    }

    .fadeUpTrigger {
        opacity: 0;
    }

    .fadeUp {
        animation-name: fadeUpAnime;
        animation-duration: 1s;
        animation-fill-mode: forwards;
        opacity: 0;
        animation-delay: 0.3s;
    }

    @keyframes fadeUpAnime {
        0% {
            opacity: 0;
            transform: translateY(50px);
        }

        100% {
            opacity: 1;
            transform: translateY(0px);
        }
    }

    .fadeInTrigger {
        opacity: 0;
    }

    .fadeIn {
        animation-name: fadeInAnime;
        animation-duration: 1.2s;
        animation-fill-mode: forwards;
        animation-delay: 0.5s;
    }

    @keyframes fadeInAnime {
        0% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }

    .fadeLeftTrigger {
        opacity: 0;
    }

    .fadeLeft {
        animation-name: fadeLeftAnime;
        animation-duration: 1s;
        animation-fill-mode: forwards;
        opacity: 0;
        animation-delay: 0.8s;
    }

    @keyframes fadeLeftAnime {
        0% {
            transform: translateX(-50px);
            opacity: 0;
        }

        100% {
            transform: translateX(0);
            opacity: 1;
        }
    }

    .fadeRightTrigger {
        opacity: 0;
    }

    .fadeRight {
        animation-name: fadeRightAnime;
        animation-duration: 1s;
        animation-fill-mode: forwards;
        opacity: 0;
        animation-delay: 0.9s;
    }

    @keyframes fadeRightAnime {
        0% {
            transform: translateX(50px);
            opacity: 0;
        }

        100% {
            transform: translateX(0);
            opacity: 1;
        }
    }