/* ===== FONT FACE DEFINITIONS ===== */
@font-face {
    font-family: 'DINOT';
    src: url('../fonts/DINOT_subset.woff2') format('woff2'),
         url('../fonts/DINOT_subset.woff') format('woff'),
         url('../fonts/DINOT_subset.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DINOT';
    src: url('../fonts/DINOT-Bold_subset.woff2') format('woff2'),
         url('../fonts/DINOT-Bold_subset.woff') format('woff'),
         url('../fonts/DINOT-Bold_subset.otf') format('opentype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DINOT';
    src: url('../fonts/DINOT-Medium_subset.woff2') format('woff2'),
         url('../fonts/DINOT-Medium_subset.woff') format('woff'),
         url('../fonts/DINOT-Medium_subset.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DINOT';
    src: url('../fonts/DINOT-Light_subset.woff2') format('woff2'),
         url('../fonts/DINOT-Light_subset.woff') format('woff'),
         url('../fonts/DINOT-Light_subset.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DINOT';
    src: url('../fonts/DINOT-Italic_subset.woff2') format('woff2'),
         url('../fonts/DINOT-Italic_subset.woff') format('woff'),
         url('../fonts/DINOT-Italic_subset.otf') format('opentype');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

/* ===== RESET & BASE STYLES ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    font-family: 'DINOT', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.6;
    color: #333;
    overflow-x: hidden;
    background: #000;
}

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

:root {
    --size-150: clamp(40px, 10.41vw, 150px);
    --size-120: clamp(30px, 8.33vw, 120px);
    --size-110: clamp(30px, 7.63vw, 110px);
    --size-100: clamp(25px, 6.94vw, 100px);
    --size-90: clamp(20px, 6.25vw, 90px);
    --size-80: clamp(20px, 5.55vw, 80px);
    --size-70: clamp(20px, 4.86vw, 70px);
    --size-60: clamp(15px, 4.16vw, 60px);
    --size-50: clamp(15px, 3.47vw, 50px);
    --size-40: clamp(15px, 2.77vw, 40px);
    --size-30: clamp(10px, 2.08vw, 30px);
    --size-20: clamp(5px, 1.42vw, 20px);
}


/* ===== LOADING SCREEN ===== */
.loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #000 0%, #1a1a1a 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    transition: opacity 0.8s ease-out;
}

.loading.hidden {
    opacity: 0;
    pointer-events: none;
}

.loading-content {
    text-align: center;
}

.loading-logo {
    width: 150px;
    height: auto;
    margin-bottom: 30px;
    animation: pulse 2s ease-in-out infinite;
}

.loading-spinner {
    width: 50px;
    height: 50px;
    border: 4px solid rgba(255, 255, 255, 0.2);
    border-top: 4px solid #fff;
    border-radius: 50%;
    animation: spin 1.2s linear infinite;
    margin: 0 auto;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.05); opacity: 0.8; }
}

/* ===== MAIN CONTENT ===== */
.main-content {
    opacity: 0;
    transition: opacity 1s ease-in;
}

.main-content.loaded {
    opacity: 1;
}

/* ===== HERO SECTION ===== */
.hero-section {
    position: relative;
    width: 100vw;
    height: auto;
    overflow: hidden;
    background: #000;
}

.hero-video {
    position: relative;
    width: 100vw;
    height: auto;
    max-width: 100vw;
    z-index: 1;
    opacity: 0.8;
    display: block;
    margin: 0 auto;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* background: linear-gradient(135deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.7) 100%); */
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-content {
    text-align: center;
    color: white;
    animation: fadeInUp 1.5s ease-out;
}

.hero-title {
    width: 70%;
    max-width: 800px;
    height: auto;
    margin: 0 auto 50px;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.5));
}

/*----------------------------------------------------------------------------------------------------

    Scroll Button

------------------------------------------------------------------------------------------------------*/

.scroll-indicator {
    position: fixed;
    left: 1.87vw;
    bottom: 25px;
    z-index: 10;
    animation: bounce 2.5s infinite;
    transition: position 0.2s, left 0.2s, bottom 0.2s;
}

.scroll-indicator.absolute {
    position: absolute;
    left: 1.87vw;
    bottom: 25px;
}

.scroll-icon {
    width: 30px;
    height: auto;
    filter: brightness(0) invert(1);
    opacity: 0.8;
    /* max-width: 25px; */
    cursor: pointer;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateX(-50%) translateY(0);
    }
    40% {
        transform: translateX(-50%) translateY(-15px);
    }
    60% {
        transform: translateX(-50%) translateY(-8px);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 768px) {
    .scroll-indicator {
        left: 3.25vw;
        bottom: 3.25vw;
    }
    .scroll-indicator.absolute {
        position: absolute;
        left: 3.25vw;
        bottom: 3.25vw;
    }
    .scroll-icon {
        width: clamp(10px, 3.25vw, 25px);
        max-width: inherit;
    }
}


/* ===== CONTENT SECTIONS ===== */
.content-section {
    padding: 0;
    position: relative;
    overflow: hidden;
    padding-bottom: var(--size-80);
}

.content-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
    background-position: center;
    opacity: 0.05;
    z-index: -1;
}

.section-1 {
    /* background: linear-gradient(135deg, #f8f8f8 0%, #e8e8e8 100%); */
    padding-top: 0;
}

.section-1::before {
    background-image: url('../img/back_ptn-A.png');
}

.section-2 {
    /* background: linear-gradient(135deg, #fff 0%, #f5f5f5 100%); */
    padding-bottom: 17%;
}

.section-2::before {
    background-image: url('../img/back_ptn-B.png');
}

.section-3 {
    /* background: linear-gradient(135deg, #f8f8f8 0%, #e8e8e8 100%); */
}

.section-3::before {
    background-image: url('../img/back_ptn-C.png');
}

.section-4 {
    /* background: linear-gradient(135deg, #fff 0%, #f5f5f5 100%); */
}

.section-4::before {
    background-image: url('../img/back_ptn-D.png');
}

.container {
    padding-left: 5vw;
    padding-right: 5vw;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    max-width: calc(1440px + 10vw);
}

/* 各セクションごとにcontainerのパディングを個別指定したい場合は下記を利用 */
/*
.section-1 .container {
    padding-left: 15px;
    padding-right: 15px;
}
.section-2 .container {
    padding-left: 15px;
    padding-right: 15px;
}
.section-3 .container {
    padding-left: 15px;
    padding-right: 15px;
}
.section-4 .container {
    padding-left: 15px;
    padding-right: 15px;
}
*/

.section-header {
    text-align: center;
    margin-bottom: 60px;
    animation: fadeInUp 1s ease-out;
    margin: 0 0 60px;
    position: relative;
    z-index: 1;
    margin-bottom: clamp(20px, 6.94vw, 100px);
}

.section-3 .section-header {
    margin-bottom: clamp(15px, 4.16vw, 60px);
}

.section-title {
    width: 100%;
    /* max-width: 600px; */
    height: auto;
    margin: 0 auto;
    filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.1));
    transition: transform 0.3s ease;
}

.section-title:hover {
    transform: scale(1.02);
}

.section-content {
    width: 100%;
    animation: fadeInUp 1.2s ease-out;
}

/* ===== IMAGE GRID ===== */
.image-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 30px;
    width: 100%;
}

.grid-image,
.grid-image-bottom {
    opacity: 0;
    transform: scale(0.92);
    transition: opacity 0.8s cubic-bezier(0.23, 1, 0.32, 1), transform 0.8s cubic-bezier(0.23, 1, 0.32, 1);
    will-change: opacity, transform;
}
.grid-image.in-view,
.grid-image-bottom.in-view {
    opacity: 1;
    transform: scale(1);
}
.grid-image.out-view,
.grid-image-bottom.out-view {
    opacity: 0;
    transform: scale(0.92);
}

.grid-image {
    width: 100%;
    height: auto;
    border-radius: clamp(3px, 0.83vw, 12px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.grid-image::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.3) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1;
}

.grid-image:hover,
.grid-image:focus {
    /* hoverアクションを削除 */
}

.section-1 .image-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: clamp(5px, 1.42vw, 20px);
    width: 100%;
    margin-bottom: clamp(15px, 4.16vw, 60px);
}
.section-1 .image-grid img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 12px;
    border-radius: 0;
}
.image-grid-bottom {
    width: 100%;
}
.section-1 .image-grid-bottom {
    margin-bottom: clamp(25px, 7.14vw, 100px);
}
.grid-image-bottom {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 12px;
    aspect-ratio: 4/3;
}
.section-1 .grid-image-bottom {
    border-radius: 0;
}


.section-2 .image-grid,
.section-4 .image-grid {
    display: block;
    /* flex-wrap: wrap; */
    /* gap:20px; */
    margin-bottom: var(--size-70);
}
.image-grid .image-row {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(5px, 1.42vw, 20px);
    /* aspect-ratio: 1440/380; */
    margin-bottom: clamp(5px, 1.42vw, 20px);
}
.image-row img {
    flex:1;
}
.image-row-1 img:nth-of-type(1) {
    flex-grow: 51;
    aspect-ratio: 51 / 38;
}
.image-row-1 img:nth-of-type(2) {
    flex-grow: 38;
    aspect-ratio: 38 / 38;
}
.image-row-1 img:nth-of-type(3) {
    flex-grow: 51;
    aspect-ratio: 51 / 38;
}
.image-row-2 img:nth-of-type(1) {
    flex-grow: 38;
    aspect-ratio: 38 / 38;
}
.image-row-2 img:nth-of-type(2) {
    flex-grow: 40;
    aspect-ratio: 40 / 38;
}
.image-row-2 img:nth-of-type(3) {
    flex-grow: 62;
    aspect-ratio: 62 / 38;
}


.section-4 .image-row-1 img:nth-of-type(1) {
    flex-grow: 51;
    aspect-ratio: 51 / 38;
}
.section-4 .image-row-1 img:nth-of-type(2) {
    flex-grow: 38;
    aspect-ratio: 38 / 38;
}
.section-4 .image-row-1 img:nth-of-type(3) {
    flex-grow: 51;
    aspect-ratio: 51 / 38;
}
.section-4 .image-row-2 img:nth-of-type(1) {
    flex-grow: 40;
    aspect-ratio: 40 / 38;
}
.section-4 .image-row-2 img:nth-of-type(2) {
    flex-grow: 62;
    aspect-ratio: 62 / 38;
}
.section-4 .image-row-2 img:nth-of-type(3) {
    flex-grow: 38;
    aspect-ratio: 38 / 38;
}




/* ===== FOOTER SECTION ===== */
.footer-section {
    background: #FFF;
    padding: var(--size-40) 0;
    position: relative;
    overflow: hidden;
    border-bottom: var(--size-50) solid #000;
}
/*
.footer-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('../img/back_ptn-A.png');
    background-size: cover;
    background-position: center;
    opacity: 0.1;
    z-index: 0;
}
*/
.footer-content {
    display: flex;
    flex-direction: column;
    /* gap: 30px; */
    align-items: center;
    position: relative;
    z-index: 1;
    color: #000;
}

.footer-image {
    width: 100%;
    max-width: 900px;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease;
}

.footer-logo {
    width: 30%;
    max-width: 230px;
    height: auto;
}

.footer-name {
    font-weight: bold;
    font-size: clamp(12px, 2.08vw, 30px);
    line-height: 1;
}
.footer-open {
    font-weight: 500;
    font-size: clamp(10px, 1.42vw, 20px);
}
.footer-address {
    font-size: clamp(9px, 1.18vw, 17px);
}

/* ===== RESPONSIVE DESIGN ===== */
@media (min-width: 768px) {
    .hero-title {
        width: 55%;
        max-width: 900px;
    }
    
    .image-grid {
        grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
        gap: 40px;
    }
    
    .footer-content {
        /* flex-direction: row; */
        justify-content: center;
        /* gap: 50px; */
    }
    
    .footer-image {
        width: 45%;
        max-width: 600px;
    }
}

@media (min-width: 1024px) {
    .container {
        /* padding: 0 80px; */
    }
    
    .hero-title {
        width: 45%;
        max-width: 1100px;
    }
    
    .image-grid {
        grid-template-columns: repeat(auto-fit, minmax(550px, 1fr));
        gap: 50px;
    }
    
    .footer-image {
        width: 40%;
        max-width: 700px;
    }
}

@media (min-width: 1440px) {
    .hero-title {
        width: 35%;
        max-width: 1300px;
    }
    
    .image-grid {
        grid-template-columns: repeat(auto-fit, minmax(650px, 1fr));
        gap: 60px;
    }
}

/* ===== ACCESSIBILITY ===== */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    .scroll-indicator {
        animation: none;
    }
    
    .grid-image:hover {
        transform: none;
    }
}

/* ===== PRINT STYLES ===== */
@media print {
    .loading,
    .hero-video,
    .scroll-indicator {
        display: none !important;
    }
    
    .hero-section {
        height: auto;
        min-height: 300px;
    }
    
    .hero-overlay {
        background: #000;
    }
    
    .content-section::before {
        display: none;
    }
}

.section-content-header-outer {
    position: relative;
    margin: 0;
    padding: 0;
    max-width: 100%;
    padding-left: calc(10vw);
}
@media (min-width: 1440px) {
    .section-content-header-outer {
        padding-left: calc((100% - 1440px) / 2 + 5vw);
    }
}
.section-content-header {
    position: relative;
    width: auto;
    height: auto;
    overflow: visible;
    /* padding-bottom: 46.43%; */ /* 1400x650のアスペクト比 */
    /* margin: 0 -5vw 50px; */
    /* aspect-ratio: 28/13; */
    /* margin-left: 25%; */
    /* padding-left: 12.5vw; */
    margin-bottom: 50px;
    /* top: 0; */
    /* width: 100vw; */
    margin-bottom: clamp(15px, 4.28vw, 60px);
}
.section-content-header img {
    width: 100%;
    height: auto;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 20;
    transition: transform 0.7s cubic-bezier(0.77,0,0.175,1), opacity 0.7s;
    transform: translateX(100%);
    opacity: 0;
    pointer-events: none;
}
.section-content-image {
    padding-bottom: 46.43%;
    position: relative;
}
.section-content-header.in-view img {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
}
.section-content-header.out-view img {
    transform: translateX(100%);
    opacity: 0;
    pointer-events: none;
}

.section-content-title {
    width: auto;
    padding-left: 5vw;
    box-sizing: border-box;
    position: relative;
    z-index: 100;
    margin: 0 0px 40px;
    margin-bottom: clamp(12px, 2.85vw, 40px);
}
.section-content-title-outer {
    width: auto;
    /* padding-right: 80px; */
    box-sizing: border-box;
    margin: 0 auto;
}
.section-content-title-outer .inner {
    width: 100%;
    transition: transform 0.9s cubic-bezier(0.77,0,0.175,1), opacity 0.9s;
    transform: translateX(100%);
    opacity: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.section-content-title-outer .inner.in-view {
    transform: translateX(0);
    opacity: 1;
}
.section-content-title-outer .inner.out-view {
    transform: translateX(100%);
    opacity: 0;
}
.section-content-title-outer .inner img {
    width: 100%;
    height: auto;
    display: block;
}

/*----------------------------------------------------------------------------------------------------

    Intro Message

------------------------------------------------------------------------------------------------------*/

.intro-message {
    width: 100vw;
    text-align: center;
    margin: 40px 0 100px 0;
    color: #666666;
    margin-top: var(--size-50);
    margin-bottom: var(--size-100);
}
.intro-message p {
    line-height: 0;
}
.intro-message em {
    font-size: clamp(7px, 1.45vw, 22px);
    font-style: italic;
    color: #666666;
    letter-spacing: 0.02em;
    font-weight: 400;
}

@media (max-width: 768px) {
    .intro-message {
        margin-top: clamp(5px, 2.65vw, 20px);
        margin-bottom: clamp(20px, 5.2vw, 40px);
        padding: 0 1vw;
    }
    .intro-message em {
        font-size: clamp(7px ,1.7vw,13px);
        line-height: 1.5;
    }
}

/*----------------------------------------------------------------------------------------------------

    Background Contents

------------------------------------------------------------------------------------------------------*/

.bg-contents {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
}

.bg-pattern-1,
.bg-pattern-2,
.bg-pattern-3,
.bg-pattern-4 {
    position: absolute;
    left: 0;
    width: 100%;
    background-size: var(--size-70);
    background-position: top center;
    background-repeat: repeat;
    transition: transform 0.1s ease-out;
}

.bg-pattern-1 {
    top: 0;
    background-image: url('../img/back_ptn-A.png');
    z-index: 4;
    background-size: 145px;
}

.bg-pattern-2 {
    top: 0;
    background-image: url('../img/back_ptn-C.png');
    z-index: 3;
}

.bg-pattern-3 {
    top: 0;
    background-image: url('../img/back_ptn-A.png');
    z-index: 2;
    background-size: 145px;
}

.bg-pattern-4 {
    top: 0;
    background-image: url('../img/back_ptn-C.png');
    z-index: 1;
}

@media (max-width: 768px) {
.bg-pattern-1 {
    background-size: clamp(40px, 10.06vw, 145px);
}
.bg-pattern-2 {
    background-size: var(--size-70);
}
.bg-pattern-3 {
    background-size: clamp(40px, 10.06vw, 145px);
}
.bg-pattern-4 {
    background-size: 70px;
    background-size: var(--size-70);
}
}



/* ===== GOOGLE MAP RESPONSIVE ===== */
.gmap {
    width: 100%;
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.gmap iframe {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border: none;
    border-radius: 8px;
}

/* 1440:600の比率（2.4:1）を維持 */
.gmap::before {
    content: '';
    display: block;
    width: 100%;
    padding-top: 41.67%; /* 600/1440 = 0.4167 = 41.67% */
}

/* 古いブラウザ対応（aspect-ratio未対応） */
@supports not (aspect-ratio: 2.4 / 1) {
    .gmap {
        aspect-ratio: 2.4 / 1;
    }
}

/* モバイル対応 */
@media (max-width: 768px) {
    .gmap {
        /* margin: 0 -15px; */
        border-radius: 0;
    }
    
    .gmap iframe {
        border-radius: 0;
    }
}

.section-1 .gmap-content {
    margin-bottom: clamp(20px, 6.25vw, 90px);
}
.youtube-content-inner-title {
    text-align: center;
    margin-bottom: clamp(15px, 3.47vw, 50px);
}
.youtube-content-inner-title img {
    width: 85%;
    margin: 0 auto;
}

/* ===== YOUTUBE RESPONSIVE ===== */
.youtube-content-inner-video {
    width: 100%;
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.youtube-content-inner-video iframe {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border: none;
    border-radius: 8px;
}

/* 1440:810の比率（16:9）を維持 */
.youtube-content-inner-video::before {
    content: '';
    display: block;
    width: 100%;
    padding-top: 56.25%; /* 810/1440 = 0.5625 = 56.25% */
}

/* 古いブラウザ対応（aspect-ratio未対応） */
@supports not (aspect-ratio: 16 / 9) {
    .youtube-content-inner-video {
        aspect-ratio: 16 / 9;
    }
}

/* モバイル対応 */
@media (max-width: 768px) {
    .youtube-content-inner-video {
        /* margin: 0 -15px; */
        border-radius: 0;
    }
    
    .youtube-content-inner-video iframe {
        border-radius: 0;
    }
}


/*----------------------------------------------------------------------------------------------------

    Buttons

------------------------------------------------------------------------------------------------------*/

.btn-field {
    margin-top: clamp(25px, 6.94vw, 100px);
    margin-bottom: clamp(25px, 6.94vw, 100px);
}
.btn-field .btn-field-inner {
    text-align: center;
    padding: 0 5vw;
}
.btn-mrhn {
    transition: all 0.3s;
}
.btn-mrhn.btn-maruhan,
.btn-mrhn.btn-metokyo,
.btn-mrhn.btn-ninja {
    max-width: 630px;
    display: inline-block;
    aspect-ratio: 630 / 210;
    display: flex;
    text-decoration: none;
    margin: 0 auto;
    border-radius: clamp(5px, 1.38vw, 20px);
    overflow: hidden;
}
.btn-mrhn.btn-maruhan .btn-left-logo {
    flex: 1;
    background-color: #FFF;
}
.btn-mrhn.btn-maruhan .btn-left-logo img {
    width: 100%;
}
.btn-mrhn.btn-maruhan .btn-text,
.btn-mrhn.btn-metokyo .btn-text,
.btn-mrhn.btn-ninja .btn-text {
    flex: 2;
    background-color: #ff0000;
    display: flex;
    align-items: center;
    position: relative;
}
.btn-mrhn.btn-maruhan .btn-text .btn-text-inner,
.btn-mrhn.btn-metokyo .btn-text .btn-text-inner,
.btn-mrhn.btn-ninja .btn-text .btn-text-inner {
    position: relative;
    color: #FFF;
    text-align: left;
    width: 100%;
    padding: 0 clamp(8px, 2.08vw, 30px);
}
.btn-mrhn.btn-maruhan .btn-text .btn-text-inner .text-1, 
.btn-mrhn.btn-metokyo .btn-text .btn-text-inner .text-1,
.btn-mrhn.btn-ninja .btn-text .btn-text-inner .text-1 {
    font-size: clamp(28px, 3.47vw, 50px);
    font-weight: bold;
    line-height: 1.3;
    letter-spacing: 0.03em;
}
.btn-mrhn.btn-maruhan .btn-text .btn-text-inner .text-2,
.btn-mrhn.btn-metokyo .btn-text .btn-text-inner .text-2,
.btn-mrhn.btn-ninja .btn-text .btn-text-inner .text-2 {
    font-size: 33px;
    font-size: clamp(18px, 2.29vw, 33px);
    line-height: 1;
    letter-spacing: 0.1em;
    /* letter-spacing: 0.05em; */
}
.btn-mrhn.btn-maruhan .btn-text .btn-arrow,
.btn-mrhn.btn-metokyo .btn-text .btn-arrow, 
.btn-mrhn.btn-ninja .btn-text .btn-arrow {
    position: absolute;
    width: 0;
    height: 0;
    border-left: clamp(6px, 1.04vw, 15px) solid transparent;   /* 左辺 */
    border-right: clamp(6px, 1.04vw, 15px) solid transparent;  /* 右辺 */
    border-bottom: clamp(8px, 1.73vw, 25px) solid #FFF;    /* 底辺の色、86.6 ≒ 50 * √3 */
    transform: rotate(90deg);
    right: 5%;
}
.btn-mrhn:hover {
    opacity: 0.8;
}
.btn-mrhn .btn-arrow {
    /* 既存のスタイルはそのまま */
    /*animation: arrow-tonton 2.2s cubic-bezier(0.4,0,0.2,1) infinite;*/
    animation: bounce2 2.2s cubic-bezier(0.4,0,0.2,1) infinite;
}
.btn-mrhn.btn-maruhan {
    width: clamp(160px, 43.75vw, 630px);
}

@keyframes bounce2 {
    0%, 20%, 50%, 80%, 100% {
        transform: translateX(0) rotate(90deg); opacity: 1;
    }
    40% {
        transform: translateX(50%) rotate(90deg);
        opacity: 1;
    }
    60% {
        transform: translateX(50%) rotate(90deg);
        opacity: 1;
    }
}
@keyframes arrow-tonton {
    0%   { transform: translateX(0) rotate(90deg); opacity: 1; }
    10%  { transform: translateX(30px) rotate(90deg); opacity: 1; }
    20%  { transform: translateX(0) rotate(90deg); opacity: 1; }
    30%  { transform: translateX(30px) rotate(90deg); opacity: 1; }
    40%  { transform: translateX(0) rotate(90deg); opacity: 1; }
    70%  { transform: translateX(0) rotate(90deg); opacity: 1; }
    100% { transform: translateX(0) rotate(90deg); opacity: 1; }
}

.btn-mrhn.btn-metokyo {
    max-width: 430px;
    aspect-ratio: 430/210;
    margin: 0;
    /* display: inline-block; */
    /* align-items: center; */
    /* float: right; */
}
.btn-mrhn.btn-metokyo .btn-text {
    background: #000;
}
.btn-mrhn.btn-metokyo .btn-text .btn-text-inner {
    color: #ffff00;
}
.btn-mrhn.btn-metokyo .btn-text .btn-arrow {
    /* border-bottom: 25px solid #ffff00; */    /* 底辺の色、86.6 ≒ 50 * √3 */
    border-bottom-color: #FFFF00;
}

.btn-mrhn.btn-ninja {
    max-width: 530px;
    aspect-ratio: 530/210;
    margin: 0;
    /* display: inline-block; */
    /* align-items: center; */
    /* float: right; */
}
.btn-mrhn.btn-ninja .btn-text {
    background: #000;
}
.btn-mrhn.btn-ninja .btn-text .btn-text-inner {
    color: #ff124a;
}
.btn-mrhn.btn-ninja .btn-text .btn-arrow {
    /* border-bottom: 25px solid #ff124a; */    /* 底辺の色、86.6 ≒ 50 * √3 */
    border-bottom-color: #ff124a;
}

@media (max-width: 768px) {
.btn-mrhn.btn-maruhan,
.btn-mrhn.btn-metokyo,
.btn-mrhn.btn-ninja {
    max-width: 630px;
    width: clamp(160px, 43.75vw, 630px);
    border-radius: clamp(5px, 1.38vw, 20px);
}
.btn-mrhn.btn-maruhan .btn-text .btn-text-inner,
.btn-mrhn.btn-metokyo .btn-text .btn-text-inner,
.btn-mrhn.btn-ninja .btn-text .btn-text-inner {
    padding: 0 clamp(8px, 2.08vw, 30px);
}
.btn-mrhn.btn-maruhan .btn-text .btn-text-inner .text-1, 
.btn-mrhn.btn-metokyo .btn-text .btn-text-inner .text-1,
.btn-mrhn.btn-ninja .btn-text .btn-text-inner .text-1 {
    font-size: clamp(10px, 3.47vw, 50px);
}
.btn-mrhn.btn-maruhan .btn-text .btn-text-inner .text-2,
.btn-mrhn.btn-metokyo .btn-text .btn-text-inner .text-2,
.btn-mrhn.btn-ninja .btn-text .btn-text-inner .text-2 {
    font-size: clamp(8px, 2.29vw, 33px);
}
.btn-mrhn.btn-metokyo,
.btn-mrhn.btn-ninja {
    width: auto;
    border-radius: clamp(5px, 1.38vw, 20px);
}
.btn-mrhn.btn-metokyo {
    font-size: clamp(12px, 3.47vw, 50px);
}
.btn-mrhn.btn-metokyo .btn-text .btn-text-inner .text-1 {
    letter-spacing: 0;
    font-weight: 500;
}
.btn-mrhn.btn-ninja .btn-text .btn-text-inner .text-2 {
    font-size: clamp(6px, 1.82vw, 14px);
}
}

.btn-mrhn.btn-ninja .btn-text .btn-text-inner .text-2 {
    font-size: clamp(6px, 1.82vw, 33px);
}

/*----------------------------------------------------------------------------------------------------

    Section 1

------------------------------------------------------------------------------------------------------*/

.section-1 .contents-field-first,
.section-1 .contents-field-second {
    position: relative;
}
.section-1 .contents-field-first .contents-bg-outer,
.section-1 .contents-field-second .contents-bg-outer {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    height: 135%;
    width: 100%;
    background: #CCC;
    transform: skewY(-20deg);
    top: 14%;
    overflow: hidden;
}
.section-1 .contents-field-first .contents-bg-outer:before,
.section-1 .contents-field-second .contents-bg-outer:before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    height: 200%;
    width: 200%;
    transform: skewY(20deg);
    background-image: url(../img/back_ptn-B.png);
    background-size: var(--size-70);
    background-position: top center;
}
.section-1 .contents-field-second .contents-bg-outer {
    top: 0;
    left: 0;
    height: 80%;
    width: 100%;
    transform: skewY(-20deg);
    top: -5%;
}
.section-1 .contents-field-second .contents-bg-outer:before {
    transform: skewY(20deg);
}

@media (min-width: 1440px) {
    .section-1 .contents-field-first .contents-bg-outer {
        top: 17%;
        height: 128%;
    }
}

@media (max-width: 768px) {
    .section-1 .contents-field-first .contents-bg-outer {
        top: 14%;
        height: 135%;
    }
    .section-1 .contents-field-first .contents-bg-outer:before {
        background-size: var(--size-70);
    }
}

/*----------------------------------------------------------------------------------------------------

    Section 2

------------------------------------------------------------------------------------------------------*/

.section-2 .contents-field-first,
.section-2 .contents-field-second {
    position: relative;
}
.section-2 .contents-field-first .contents-bg-outer,
.section-2 .contents-field-second .contents-bg-outer {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    height: 125%;
    width: 100%;
    background: #CCC;
    transform: skewY(-20deg);
    top: 19%;
    overflow: hidden;
}
.section-2 .contents-field-first .contents-bg-outer:before,
.section-2 .contents-field-second .contents-bg-outer:before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    height: 200%;
    width: 200%;
    transform: skewY(20deg);
    /* background-image: url(../img/back_ptn-B.png); */
    background-size: 70px;
    background-position: top center;
    background-color: #ffff00;
}
.section-2 .contents-field-second .contents-bg-outer {
    top: 0;
    left: 0;
    height: 145%;
    width: 100%;
    transform: skewY(-5deg);
    top: -32%;
}
.section-1 .contents-field-second .contents-bg-outer:before {
    transform: skewY(20deg);
}

.shinjuku-message {
    width: 100vw;
    text-align: center;
    margin: var(--size-150) 0 var(--size-70) 0;
    color: #FFFFFF;
}
.shinjuku-message em {
    font-size: clamp(10px, 2.63vw, 38px);
    font-style: normal;
    color: #FFF;
    letter-spacing: 0.02em;
    font-weight: 500;
}

@media (max-width: 768px) {
    .section-2 .contents-field-second .contents-bg-outer {
        height: 147%;
        width: 100%;
        top: -32%;
    }
}


/*----------------------------------------------------------------------------------------------------

    Section 4

------------------------------------------------------------------------------------------------------*/

.section-4 .contents-field-first,
.section-4 .contents-field-second {
    position: relative;
}
.section-4 .contents-field-first .contents-bg-outer,
.section-4 .contents-field-second .contents-bg-outer {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    height: 125%;
    width: 100%;
    background: #CCC;
    transform: skewY(-20deg);
    top: 19%;
    overflow: hidden;
}
.section-4 .contents-field-first .contents-bg-outer:before,
.section-4 .contents-field-second .contents-bg-outer:before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    height: 200%;
    width: 200%;
    transform: skewY(0deg);
    background-image: url(../img/back_ptn-D.png);
    background-size: var(--size-120) var(--size-120);
    background-position: top center;
}
.section-4 .contents-field-second .contents-bg-outer {
    top: 0;
    left: 0;
    height: 145%;
    width: 100%;
    transform: skewY(-5deg);
    top: -32%;
}

.section-4 .btn-field {
    margin-top: clamp(95px, 24.30vw, 350px);
}
.section-4 .btn-mrhn.btn-maruhan {
    max-width: 430px;
    aspect-ratio: 430 / 210;
    width: clamp(110px, 29.8vw, 430px);
}

@media (max-width: 768px) {
    .section-4 .contents-field-second .contents-bg-outer {
        height: 150%;
        top: -34%;
    }
    .section-4 .btn-mrhn.btn-maruhan {
        /*width: clamp(110px, 29.8vw, 430px);*/
    }
}




.content-inner-title {
    display: flex;
    gap: var(--size-60);
    align-items: center;
    margin-bottom: var(--size-100);
    box-sizing: border-box;
}
.section-4 .content-inner-title {
    gap: var(--size-110);
}
.content-inner-title > div {
    flex: 1;
}
.content-inner-title .content-inner-title-left {
    /* flex-grow: 95; */
    /* flex: 2; */
    flex: 0 1 70%;
}
.section-4 .content-inner-title .content-inner-title-left {
    /* flex-grow: 80; */
    /* flex: 2; */
    flex: 0 1 63%;
}
.content-inner-title .content-inner-title-left img {
    width: 100%;
}

.content-inner-title .content-inner-title-right {
    /* flex-grow: 43; */
    /* flex: 30%; */
    /* text-align: right; */
    flex: 0 1 30%;
}
.section-4 .content-inner-title .content-inner-title-right {
    /* flex-grow: 53; */
    /* flex: 1; */
    /* text-align: right; */
    flex: 0 1 37%;
}





/* ===== PHOTO SLIDER ===== */
.photo-slider {
    width: 100%;
    overflow: hidden;
    position: relative;
    margin-bottom: clamp(5px, 1.42vw, 20px);
}
.photo-slider .photo-slider-inner {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    aspect-ratio: 1600 / 315;
    will-change: transform;
    transition: none;
    gap: clamp(5px, 1.42vw, 20px);
}
.photo-slider .photo-slider-item {
    flex: 0 0 auto;
    width: auto;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.photo-slider .photo-slider-item img {
    height: 100%;
    width: auto;
    object-fit: contain;
    display: block;
}

.section-4 .photo-slider {
    margin-bottom: var(--size-80);
}
.section-4 .photo-slider .photo-slider-inner {
    aspect-ratio: 1600 / 530;
}