@charset "UTF-8";

/* =========================================
   Message Section - 私たちの想い
   ========================================= */

/* Container */
.message {
    position: relative;
    width: 100%;
    height: 50.4rem;
    background-image: url('../images/bg-message-pc.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
}

/* Inner container for content positioning */
.message__inner {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
}

/* Background decorative text "Message" */
.message__bg-text {
    position: absolute;
    top: 5rem;
    left: 6rem;
    font-family: var(--font-decorative);
    font-size: 16.4rem;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0;
    color: #F7E3E7;
    z-index: 0;
    pointer-events: none;
    user-select: none;
}

/* Content wrapper */
.message__content {
    position: relative;
    padding-top: 13.3rem;
    padding-left: 10.8rem;
    max-width: 80rem;
    z-index: 1;
}

/* Section title "私たちの想い" */
.message__title {
    font-family: var(--font-base);
    font-size: 4.8rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0;
    color: var(--c-text-main);
    margin-bottom: 4.7rem;
}

/* Body text */
.message__body {
    font-family: var(--font-base);
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 2.5;
    letter-spacing: 0;
    color: var(--c-text-main);
    max-width: 69rem;
    margin-bottom: 3rem; /* 本文と署名の間の余白 50px */
}

/* Signature */
.message__sign {
    font-family: var(--font-base);
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0.1em;
    color: var(--c-text-main);
    text-align: right;
    max-width: 69rem;
}


/* =========================================
   Gallery Slider - Message Area
   ========================================= */

.gallery-slider--message {
    width: 100%;
    background-color: var(--c-bg-gray);
    padding-top: 4.8rem;
    padding-bottom: 8rem;
    overflow: hidden;
}

.gallery-slider--message .gallery-slider__track {
    display: flex;
    gap: 2rem;
    animation: slider-scroll-message-reverse 30s linear infinite;
}

.gallery-slider--message .gallery-slider__item {
    flex-shrink: 0;
    width: 33.2rem;
    height: 19.9rem;
    border-radius: 1.5rem;
    overflow: hidden;
}

.gallery-slider--message .gallery-slider__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Reverse scroll animation for message slider (左から右へ) */
@keyframes slider-scroll-message-reverse {
    0% {
        transform: translateX(calc(-33.2rem * 7 - 2rem * 7));
    }
    100% {
        transform: translateX(0);
    }
}


/* =========================================
   SP Version (max-width: 768px)
   ========================================= */

@media (max-width: 766px) {
    /* Message Section */
    .message {
        height: auto;
        min-height: 54rem;
        background-image: url('../images/bg-message-sp.JPG');
        background-position: top center;
        background-size: cover;
        background-position: center 1rem;
    }
    
    /* Background decorative text "Message" - SP */
    .message__bg-text {
        top: 1rem;
        left: 1.5rem;
        font-size: 7.7rem;
    }
    
    /* Content wrapper - SP */
    .message__content {
        padding-top: 2.5rem;
        padding-left: 2rem;
        padding-right: 2rem;
        padding-bottom: 2.5rem;
        max-width: 100%;
    }
    
    /* Section title - SP */
    .message__title {
        font-size: 2.8rem;
        margin-bottom: 2.3rem;
    }
    
    /* Body text - SP */
    .message__body {
        font-size: 1.6rem;
        line-height: 1.7;
        max-width: 100%;
        margin-bottom: 2rem;
    }
    
    /* Hide PC line breaks on SP */
    .message__body br {
        display: none;
    }
    
    /* Signature - SP */
    .message__sign {
        font-size: 1.4rem;
        letter-spacing: 0.1em;
        max-width: 100%;
        margin-top: -1rem;
    }
    
    /* Gallery Slider - Message Area SP */
    .gallery-slider--message {
        background-color: var(--c-text-white);
        padding-top: 2.5rem;
        padding-bottom: 5.8rem;
    }
    
    .gallery-slider--message .gallery-slider__item {
        width: 15.6rem;
        height: 9.4rem;
        border-radius: 0.8rem;
    }
    
    .gallery-slider--message .gallery-slider__track {
        gap: 1rem;
        animation: slider-scroll-message-reverse-sp 20s linear infinite;
    }
    
    /* Reverse scroll animation for SP (左から右へ) */
    @keyframes slider-scroll-message-reverse-sp {
        0% {
            transform: translateX(calc(-15.6rem * 7 - 1rem * 7));
        }
        100% {
            transform: translateX(0);
        }
    }
}

/* =========================================
   Message Section Adjustments (414px or less)
   ========================================= */
@media (max-width: 415px) {
    .message {
        /* 高さを大きくする (元の51remから大幅に拡大) */
        min-height: 55rem; 
        
        /* 背景画像を下に下げる (上端から6remの位置にずらす) */
        background-position: center 6rem;
    }
}

@media (max-width: 321px) {
    .message {
        /* 高さを大きくする (元の51remから大幅に拡大) */
        min-height: 62rem; 
        
        /* 背景画像を下に下げる (上端から6remの位置にずらす) */
        background-position: center 6rem;
    }
}

/* =========================================
   Tablet Adjustments (767px - 818px)
   ========================================= */
@media screen and (min-width: 767px) and (max-width: 818px) {
    /* Message Section */
    .message {
        height: auto;
        min-height: 74rem;
        background-image: url('../images/bg-message-tb1.jpg') !important;
        background-position: top center;
        background-size: cover;
        background-position: center 23rem;
		padding-top:2rem;
    }
    /* Background decorative text "Message" - SP */
    .message__bg-text {
        top: 1rem;
        left: 1.5rem;
        font-size: 7.7rem;
    }
    
    /* Content wrapper - SP */
    .message__content {
        padding-top: 2.5rem;
        padding-left: 2rem;
        padding-right: 2rem;
        padding-bottom: 2.5rem;
        max-width: 100%;
    }
	
    .message__title,
    .message__body,
    .message__sign {
        text-shadow: 0 0 10px rgba(255,255,255,0.9), 0 0 20px rgba(255,255,255,0.8), 0 0 30px rgba(255,255,255,0.6) !important;
    }
	
   .message__title {
        margin-top: 2rem;   
        margin-bottom: 2rem;
	    font-size: 2.8rem;
   }	
}

/* =========================================
   Tablet Adjustments (819px - 1024px) - プランA
   ========================================= */
@media screen and (min-width: 819px) and (max-width: 1024px) {
    .message {
        /* linear-gradientを使って、画像の上に半透明の白を重ねる（0.6 が白の濃さです） */
        background-image: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url('../images/bg-message-tb2.jpg') !important;
        background-position: left center !important; 
    }
    .message__bg-text {
        left: 2rem !important;
    }
    .message__content {
        padding-left: 3rem !important; 
    }
    
    /* フィルターのおかげで文字が見やすくなるため、影は消します（スッキリします） */
.message__title,
    .message__body,
    .message__sign {
        text-shadow: 0 0 10px rgba(255,255,255,0.9), 0 0 20px rgba(255,255,255,0.8), 0 0 30px rgba(255,255,255,0.6) !important;
    }
}