/* ===== SUBPAGES COMMON STYLES ===== */

body {
  font-family: "Roboto Slab", serif;
    background-color: #0b0b0b;
    color: #ffffff;
    line-height:1.9;
    overflow-x: hidden;
}

.seiriken{
text-align: center;
}

.l-column.goods-list .modal .name {
    margin: 1rem 0;
    color: #000;
}

.l-column.goods-list .modal-price{
    font-size: 2.4rem;
    line-height: 1.4;
    text-align: right;
    margin-bottom: 0.8rem;
    color: #000;
}


.event-card-header{
position:relative;
text-align:center;
overflow:hidden;
}

/* 雲ベース */
.event-card-header::before{
content:"";
position:absolute;
top:50%;
transform:translateY(-50%);
width:100%;
height:100%;

background-size:185%;
background-repeat:no-repeat;
background-position:center;

opacity:0.15; /* ← これが重要（薄くする） */
pointer-events:none;
}

/* 左の雲 */
.event-card-header::before{
left:0px;
background-image:url("/images/saiyuki-honda/cloud-1.webp");
}


/* 文字を前面に */
.event-location{
position:relative;
z-index:1;
}





.l-column {
display: flex;
margin-bottom: 4rem;
flex-wrap: wrap;
justify-content: flex-start
}

.summary .news_container .line-container {
    border: solid 1px #772024;
    background: rgb(26 26 26 / 80%);
}

    .summary .news .time {
        grid-column: 1 / 8;
        margin-bottom: 0.8rem;
        color: #c7a86d;
    }

.summary {
    margin: 0 auto 0rem;
}

.summary .news {
    margin-bottom: 0rem;
}

.summary.summary__page {
    margin-top: 10%;
}

.yellow{
   color:#eca929;
}

.visual {
padding-top: 0px;
margin-bottom: 5rem;
}

.container__small {
    width: 100%;
}
.l-column.goods-list .modal .type, .l-column.goods-list .modal .goods-list__info {
    text-align: left;
    color: #fff;
}

.title-logo {
position: absolute;
width: 51%;
margin-top: 3%;
right: 50%;
transform: translateX(50%);
}


.kabegami01::before {
content:"";
display:block;
position:fixed;
top:0;
left:0;
z-index:-1;

width:140%;
height:100%;

background-repeat:no-repeat;
background-position: bottom 84% right 10%;
background-image:url(/images/saiyuki-honda/saiyuki-honda_bg.webp);
background-size:100%;
}


.line-container {
    border: solid 2px #c8a96e;
}

/* ===============================
HEADER
=============================== */


.header{
position:fixed;
top:20px;
right:20px;
z-index:2000;
}

/* ===============================
HAMBURGER BUTTON
=============================== */

.menu-button{
width:45px;
height:45px;

background:#000000b3;
border:2px solid #c7a86d;
border-radius:6px;

display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
gap:6px;

cursor:pointer;

transition:.3s;

z-index:2100;
}

.menu-button:hover{
border-color:#C8A96E;
}

.menu-button span{
width:24px;
height:2px;
background:#C8A96E;
transition:.4s;
}

/* ハンバーガー → × */

.menu-button.active span:nth-child(1){
transform:translateY(8px) rotate(45deg);
}

.menu-button.active span:nth-child(2){
opacity:0;
}

.menu-button.active span:nth-child(3){
transform:translateY(-8px) rotate(-45deg);
}

/* ===============================
MENU BACKGROUND
=============================== */

.menu{
position:fixed;
top:0;
left:0;

width:100%;
height:100vh;

background:linear-gradient(#0a0a0a2b, rgba(20, 20, 20, .96));

backdrop-filter: blur(6px);

display:flex;
flex-direction:column;
align-items:center;
justify-content:center;

opacity:0;
visibility:hidden;

transition:.4s;

z-index:2000;
}

.menu.active{
opacity:1;
visibility:visible;
}

/* ===============================
CLOSE BUTTON
=============================== */

.menu-close{
position:absolute;
top:20px;
right:20px;

width: 45px;
height: 45px;

border:2px solid #C8A96E;
border-radius:6px;

display:flex;
align-items:center;
justify-content:center;

cursor:pointer;

transition:.3s;

z-index:2050;
}

.menu-close:hover{
border-color:#C8A96E;
}

.menu-close span{
position:absolute;
width:24px;
height:2px;
background:#C8A96E;
}

.menu-close span:nth-child(1){
transform:rotate(45deg);
}

.menu-close span:nth-child(2){
transform:rotate(-45deg);
}

/* ===============================
MENU LIST
=============================== */

.menu ul{
list-style:none;
text-align:center;
}

.menu li{
margin:28px 0;
opacity:0;
transform:translateY(10px);
}

.menu.active li{
animation:menuFade .6s forwards;
}

.menu.active li:nth-child(1){animation-delay:.1s;}
.menu.active li:nth-child(2){animation-delay:.2s;}
.menu.active li:nth-child(3){animation-delay:.3s;}
.menu.active li:nth-child(4){animation-delay:.4s;}

@keyframes menuFade{
to{
opacity:1;
transform:none;
}
}

.menu a{
text-decoration:none;
font-size:32px;
font-weight:700;
letter-spacing:4px;
color:#fff;
transition:.3s;
}

.menu a:hover{
color:#C8A96E;
}

/* ===============================
SCROLL LOCK
=============================== */

body.menu-open{
overflow:hidden;
}



/* Page Header */
.page-header {
    max-width: 480px;
    margin: 30px auto;
    padding: 0 20px;
    text-align: center;
}

.page-title{
position:relative;
font-size: clamp(28px, 10.3vw, 60px);
font-weight:900;
letter-spacing:6px;
color:#c8a96e;
text-align:center;
padding:22px 20px;
margin: 0 auto 20% auto;
}

.page-title::before,
.page-title::after{

content:"";

position:absolute;

left:0;
width:100%;
height:2px;

background:linear-gradient(
90deg,
transparent,
#666,
#fff,
#666,
transparent
);

}

.page-title::before{
top:0;
}

.page-title::after{
bottom:0;
}

.page-title span{

color:#c2272c;

}




/* Back to Home Button */
.back-home-container {
    max-width: 480px;
    margin: 0 auto;
    padding: 0 20px;
}

.back-home-button {
    display: block;
    background-color: #C8A96E;
    color: #000000;
    text-decoration: none;
    font-size: 18px;
    font-weight: 700;
    padding: 15px 30px;
    border-radius: 10px;
    text-align: center;
    transition: all 0.3s ease;
    border: 2px solid #C8A96E;
    letter-spacing: 2px;
}

.back-home-button:hover {
    background-color: #ffffff;
    border-color: #ffffff;
    transform: scale(1.05);
    box-shadow: 0 5px 20px rgba(200, 169, 110, 0.7);
}

/* ===== INTRODUCTION SECTION ===== */
.introduction {
    max-width: 95%;
    margin: 30px auto;
    padding: 25px 20px;
    border-radius: 10px;
	background-color: rgba(94,94,94,1.00);
}

.intro-text {
font-size:clamp(16px,3.86vw,22px);
    color: #ffffff;
    text-align: justify;
}


/* ===== EVENT INFO PAGE ===== */
.event-details {
    max-width: 480px;
    margin: 30px auto;
    padding: 0 20px;
}

.event-card {
    background-color: #1a1a1a;
    border: 1px solid #c7a86d;
    padding: 20px;
    margin-bottom: 25px;
    animation: fadeIn 0.8s ease-in;
}

.event-card-header {
    text-align: center;
    margin-bottom: 10%;
    padding: 15px;
    border-bottom: 1px solid #c3282d;
}

.event-location {
    font-size: 28px;
    font-weight: 900;
    color: #fff;
    letter-spacing: 4px;
    margin-bottom: 5px;
}

.event-location-jp {
    font-size: 16px;
    color: #C8A96E;
    font-weight: 700;
}

.event-card-body {
    /* padding: 8%; */
    margin-bottom: 10%;
}

.event-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #333333;
}

.event-info-row:last-of-type {
    border-bottom: none;
    margin-bottom: 15px;
}

.info-label {
    font-size: 14px;
    font-weight: 700;
    color: #C8A96E;
}

.info-value {
    font-size: 14px;
    color: #ffffff;
    text-align: right;
}

.map-button {
    display: block;
    background-color: #00bb27;
    color: #ffffff;
    text-decoration: none;
    font-size: 16px;
    font-weight: 700;
    padding: 12px 20px;
    border-radius: 8px;
    text-align: center;
    margin-top: 15px;
    transition: all 0.3s ease;
    border: 2px solid #00bb27;
    margin: 10% 6%;
}

.map-button:hover {
    background-color: #00bb27;
    border-color: #00bb27;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(204, 0, 0, 0.5);
}

/* ===== PRODUCTS PAGE ===== */
.products {
    max-width: 480px;
    margin: 30px auto;
    padding: 0 20px;
}

.product-card {
    background-color: #1a1a1a;
    border: 2px solid #CC0000;
    border-radius: 10px;
    padding: 25px;
    margin-bottom: 20px;
    text-align: center;
    transition: all 0.3s ease;
    animation: slideIn 0.5s ease-out;
    position: relative;
}

.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(204, 0, 0, 0.4);
    border-color: #C8A96E;
}

.special-product {
    border: 3px solid #C8A96E;
    background: linear-gradient(135deg, #1a1a1a 0%, #2a1a00 100%);
}

.product-icon {
    font-size: 48px;
    margin-bottom: 15px;
}

.product-name {
    font-size: 20px;
    font-weight: 900;
    color: #CC0000;
    margin-bottom: 12px;
    letter-spacing: 2px;
}

.product-description {
    font-size: 14px;
    color: #ffffff;

    margin-bottom: 15px;
}

.product-badge {
    display: inline-block;
    background-color: #CC0000;
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    padding: 5px 15px;
    border-radius: 20px;
    letter-spacing: 1px;
}

.product-badge.limited {
    background-color: #C8A96E;
    color: #000000;
}

/* Notice Box */
.notice-box {
    max-width: 480px;
    margin: 30px auto;
    padding: 20px;
    background-color: #2a1a00;
    border: 2px solid #C8A96E;
    border-radius: 10px;
}

.notice-title {
    font-size: 18px;
    font-weight: 900;
    color: #C8A96E;
    margin-bottom: 15px;
    text-align: center;
}

.notice-list {
    list-style: none;
    padding: 0;
}

.notice-list li {
    font-size: 13px;
    color: #ffffff;

    padding: 8px 0;
    padding-left: 20px;
    position: relative;
}

.notice-list li::before {
    content: "▸";
    color: #C8A96E;
    position: absolute;
    left: 0;
    font-weight: 700;
}

/* ===== CAMPAIGN PAGE ===== */
.campaigns {
    max-width: 480px;
    margin: 30px auto;
    padding: 0 20px;
}

.campaign-card {
    background-color: rgba(26, 26, 26, 0.8);;
    border: solid 1px #772024;
    padding: 20px;
    margin-bottom: 25px;
    animation: fadeIn 0.8s ease-in;
    transition: all 0.3s ease;
}


.special-campaign {
    border: 3px solid #C8A96E;
    background: linear-gradient(135deg, #1a1a1a 0%, #2a1a00 100%);
}

.campaign-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 2px solid #333333;
}

.campaign-icon {
    font-size: 36px;
    min-width: 50px;
    text-align: center;
}

.campaign-name {
    font-size: 20px;
    font-weight: 900;
    color: #CC0000;
    letter-spacing: 1px;
}

.campaign-body {
    padding: 15px 0;
}

.campaign-description {
    font-size: 14px;
    color: #ffffff;

    margin-bottom: 20px;
}

.campaign-details {
    background-color: #0a0a0a;
    border-radius: 8px;
    padding: 15px;
}

.detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #333333;
}

.detail-row:last-child {
    border-bottom: none;
}

.detail-label {
    font-size: 13px;
    font-weight: 700;
    color: #C8A96E;
}

.detail-value {
    font-size: 13px;
    color: #ffffff;
    text-align: right;
    font-weight: 700;
}


/* ===== FOOTER ===== */
.footer {
    max-width: 100%;
    margin: 0px auto 0;
    padding: 10px 20px;
    text-align: center;
    background-color: #0a0a0a;
    border-top: 1px solid #C8A96E;
}

.footer p {
font-size:clamp(9px,2.6vw,10px);
    color: #C8A96E;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 480px) {

    .page-title {
        letter-spacing: 5px;
    }
    
    .event-location {
        font-size: 24px;
    }
    
    .product-name,
    .campaign-name {
        font-size: 18px;
    }
    
    .campaign-header {
        flex-direction: column;
        text-align: center;
    }
}

.l-column.gap-column .col-3 {
    background-color: #282828cf;
}

.l-column.goods-list .col-3 .goods-list__info {

    color: #fff;
}

.l-column.goods-list .goods-list__inner {
    box-shadow: 2px 2px 0px 0px #ff00004f;
}

.type__text-blue {
    display: inline-block;
    padding: 0.1rem 0.6rem;
    margin: 0 0.8rem 0.8rem 0;
    font-size: 1.1rem;
    border: solid 1px #6ab0ff;
    color: #6ab0ff;
}

.l-column.goods-list .type__text {
    border: solid 1px #ffb800;
    color: #ffb800;
}

.navigation {
    /*max-width: 480px;*/
    margin: 6rem auto;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.nav-button {
    background:linear-gradient(180deg, #1e1e1e, #000000);
    color: #ffffff;
    text-decoration: none;
    font-size:clamp(16px,5.33vw,20px);
    font-weight: 700;
    padding: 18px 30px;
    border-radius: 50px;
    text-align: center;
    transition: all 0.3s ease;
    border:1px solid #c8a96e;
    letter-spacing: 2px;
    display: block;
}

.info-btn{
position:relative;
padding-left:60px; /* アイコン分の余白 */
margin-bottom: 20%;
}

.info-btn::before{
content:"";
position:absolute;
left:27px;
top:50%;
transform:translateY(-50%);

width: 40px;
height: 40px;

background-image:url("/images/saiyuki-honda/temple.svg");
background-size:contain;
background-repeat:no-repeat;
background-position:center;
}

.nav-button:hover {
    background-color: #ff0000;
    border-color: #C8A96E;
transform:scale(1.05);
box-shadow:0 6px 20px rgba(183,55,55,.6);
}

.inner {
margin: 0 auto 0rem;
}

/* ===============================
PC LAYOUT
=============================== */

@media (min-width:768px){

/* 共通幅 */
.summary.summary__page {
margin-top: 4%;
}
.products{
max-width:1100px;
margin:80px auto;
padding:0 20px;
}
.title-logo {
position: absolute;
right: 7.5%;
width: 26.5%;
margin-top: 1.3%;
transform:none;
}
.introduction {
max-width: 70%;
}
.kabegami01::before{
top:50%;
left:50%;
width:100vh;
height:100vw;
transform:translate(-50%,-50%) rotate(-90deg);
transform-origin:center;
background-position:center;
background-size:cover;
}
.event-card-header::before {
    left: 0px;
}

.event-card-header::before {
    top: 26%;
    width: 100%;
    height: 173%;
    background-size: 120%;
}

}