/* ===== GLOBAL STYLES ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

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

/* splash画面 */

#splash{
  position: fixed;
  top:0;
  left:0;
  width:100%;
  height: 100%;

  background-image: radial-gradient(circle at 20% 7%, #333333, #000000);

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

  z-index:9999;

 animation: splashFade 2.5s forwards;
}

.splash_item{
width: 80%;
max-width: 1920px;
}


.no1-no2 {
    max-width: 100%;
    display: inline-block;
    font-size: clamp(10px, 4.33vw, 17px);
    margin: 2rem auto;
    text-align: center;
    border: 2px solid #333;
    padding: 1.5rem;
}

.parent {
    text-align: center;
}

.no1-no2-text {
    display: inline-block;
    text-align: left;
    margin: auto;
    padding: 0;
}

.no1-no2-text li {
    margin-bottom: 0.7rem;
}

/* ←ここが今回のメイン */
.yellow-text {
    display: inline-block;
    background-color: #eca929;
    color: #333;
    font-weight: bold;
    padding: 0.2em 0.6em;
    border-radius: 6px;
    margin-right: 0.5em;
}

.no1-no2-text li:last-child {
    margin-bottom: 0;
}

/* ロゴ */

.splash_item img{
    width: 80%;
    max-width: 100%;
    height: auto;
    margin: 0 auto;

  opacity:0;
  animation: logoFade 4.5s forwards;
}
/* フェードアウト */
/* ロゴフェード */

@keyframes logoFade{

  0%{
    opacity:0;
  }

  20%{
    opacity:1;
  }

  80%{
    opacity:1;
  }

  100%{
    opacity:0;
  }

}

/* 背景フェード */

@keyframes splashFade{

  0%,65%{
    opacity:1;
  }

  100%{
    opacity:0;
    visibility:hidden;
  }

}

.yellow{
   color:#eca929;
}

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

.text-small{
font-size:clamp(16px,4.8vw,18px);
}

.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%;
}


.roboto-slab-<uniquifier> {
  font-family: "Roboto Slab", serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}


.visual{
width:100vw;
margin-left:calc(50% - 50vw);
padding-top: 0px;
}

.visual img{
width:100%;
height:auto;
display:block;
}

.container{
max-width:1100px;
margin:0 auto;
padding:20px;
}

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


.header {
position: fixed;
top: 10px;
right: 10px;
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;
}

/* ===== LOCATIONS SECTION ===== */
.event-copy{
text-align:center;
color:#C8A96E;
font-size:clamp(16px,5.33vw,20px);
letter-spacing:3px;
margin:30px 0 10px;
}
.locations {
    max-width: 480px;
    margin: 0 auto;
    padding: 20px;
}

.locations-grid{
display:flex;
flex-wrap:wrap;
justify-content:center;
align-items:flex-start;
}

.location-card {
	width:100%;
    background-color: #282828;
    border: 1px solid #c7a86d;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 15px;
    text-align: center;
    transition: all 0.3s ease;
    transition:.3s;
    animation: slideIn 0.5s ease-out;
    background-size: 70%;
    background-repeat: repeat-y;
    background-image: url(/images/saiyuki-honda/saiyuki-honda_check-w.webp);
    background-position: right;
}

.location-card:hover {
    box-shadow: 0 5px 20px rgba(204, 0, 0, 0.5);
    border-color: #C8A96E;
}


.location-card:hover,
.sns-item:hover{
border-color:#C8A96E;
box-shadow:0 8px 20px rgba(0,0,0,.5);
}


.location-name {
    font-size:clamp(22px,7.46vw,28px);
    font-weight: 900;
    color: #c2272c;
    letter-spacing: 3px;
    margin-bottom: 5px;
}

.location-name-jp {
    font-size:clamp(14px,4.26vw,16px);
    color: #C8A96E;
    margin-bottom: 10px;
}

.location-date {
    font-size: 20px;
    color: #ffffff;
    font-weight: 400;
}

.location-text{
text-align: left;
}

/* アコーディオン */

.location-header{
display:flex;
justify-content:space-between;
align-items:center;
cursor:pointer;
}

.accordion-icon{
width:18px;
height:18px;
border-right:3px solid #C8A96E;
border-bottom:3px solid #C8A96E;
transform:rotate(45deg);
transition:0.3s;
}

.location-card.active .accordion-icon{
transform:rotate(-135deg);
}

.location-detail{
height:0;
overflow:hidden;
transition:height .35s ease;
text-align:left;
}

.location-detail p{
margin-top:10px;
font-size:14px;
color:#ddd;
}

.location-card.active{
border-color:#C8A96E;
box-shadow:0 0 15px rgba(200,169,110,0.5);
}


/* ===== NAVIGATION BUTTONS ===== */
.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;
}

.entry{
	background: linear-gradient(180deg, #850000, #230000);
}
.info-btn{
position:relative;
padding-left:60px; /* アイコン分の余白 */
}

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

width: 40px;
height: 40px;

background-image:url("/images/saiyuki-honda/gun.webp");
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);
}

/* ===== LOCATIONS SECTION ===== */
.goods-lineup {
    max-width: 480px;
    margin: 0 auto;
    padding: 20px;
}


/* ===============================
NEWS
=============================== */

.news{
position:relative;
padding: 20px;
}

.section-title{
font-size:clamp(28px,13.3vw,60px);
font-weight:900;
color:#c8a96e;
text-align:left;
margin-bottom:5rem;
letter-spacing:5px;
border-bottom: 2px solid; /* 太さだけ指定 */
border-image: linear-gradient(90deg, rgb(255, 255, 255), rgb(102, 102, 102), transparent) 1;
padding-bottom:10px;
}

/* スクロールエリア */

.news-list{
max-height:320px;
overflow-y:auto;
padding-right:6px;

overscroll-behavior:contain;
-webkit-overflow-scrolling:touch;
position:relative;
padding: 10px;
}

/* 下のグラデーション（スクロールヒント） 

.news-list::after{
content:"";
position:sticky;
bottom:0;
left:0;
width:100%;
height:40px;
background:linear-gradient(rgba(27,27,27,0), #000000);
pointer-events:none;
display:block;
}*/

/* NEWSアイテム */

.news-item{
background-color: rgb(40 40 40 / 80%);
border: 1px solid #772024;
border-radius: 6px;
padding:15px;
margin-bottom:12px;
transition:.3s;
}

.news-item:hover{
background:#111;
border-color:#C8A96E;
}

/* リンク */

.news-item a{
display:flex;
align-items:flex-start;
gap:10px;
text-decoration:none;
color:#fff;
flex-wrap:wrap;
position:relative;
padding-right:20px; /* 矢印スペース */

}

/* NEWバッジ */

.news-badge{
background:#CC0000;
color:#fff;
font-size:clamp(10px,3.2vw,12px);
font-weight:700;
padding:3px 8px;
border-radius:3px;
}

.news-badge{
width:48px;
height:20px;
display:flex;
align-items:center;
justify-content:center;
flex-shrink:0;
}

.news-badge:empty{
background:none;
}

/* 日付 */

.news-date{
color:#C8A96E;
font-size:clamp(12px,3.73vw,14px);
font-weight:700;
}

/* 本文 */

.news-text{
font-size:clamp(12px,3.73vw,14px);
flex-basis:100%;
}


.news-item a::after{
content:"";
position:absolute;
right:10px;
top:50%;
transform:translateY(-50%);

width:8px;
height:8px;

border-top:2px solid #C8A96E;
border-right:2px solid #C8A96E;

transform:translateY(-50%) rotate(45deg);
}


/* ===== INTRODUCTION SECTION ===== */
.introduction {
    /*max-width: 480px;*/
    margin: 30px auto;
    padding: 25px 20px;
    border-radius: 10px;
}

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

/* ===== SNS SECTION ===== */
.sns {
max-width: 100%;

border-radius: 10px;
padding: 20px;
}

.sns-info{
display:flex;
flex-direction:column;
flex:1;
}

.sns-item a{
display:flex;
align-items:center;
gap:12px;
text-decoration:none;
color:inherit;
width:100%;
}

.small{
font-size:clamp(11px,3.2vw,12px);
color:#ccc;
margin-top:2px;
}

.sns-title {
font-size:clamp(18px,5.86vw,22px);
    font-weight: 900;
    color: #ffffff;
    text-align: center;
    margin-bottom: 20px;
    letter-spacing: 2px;
    background-color: #2a2a2a;
    padding: 15px;
    border-radius: 5px;
}

.sns-list{
display:flex;
flex-direction:column;
gap:7px;
}

.sns-item {
    display:block;
    padding:12px;
    background-color:#1a1a1a;
    border-radius:5px;
    transition:.3s;
    border:1px solid #333;
}

.sns-item:hover {
    background-color: #2a2a2a;
    border-color: #CC0000;
    transform: translateX(5px);
}

.sns-icon{
width:40px;
min-width:40px;
height:40px;
display:flex;
align-items:center;
justify-content:center;
flex-shrink:0;
}

.x-icon {
    color: #ffffff;
}

.sns-icon img{
width:22px;
height:22px;
display:block;
}

.ather-icon1 img{
width:20px;
height:20px;
object-fit:contain;
}

.ig-icon {
    color: #E1306C;
}

.tt-icon {
    color: #00f2ea;
}

.sns-text{
font-size:clamp(14px,4vw,15px);
font-weight:600;
}

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

.sns-list{
width:100%;
}

.sns-item{
width:100%;
}

.sns-item img{
width:22px;
height:22px;
}

.sns_x::before {
    content: "";
    position: absolute;
    width: 5%;
    height: 3rem;
    top: 0;
    bottom: 0;
    right: -8%;
    margin: auto 0;
    background: url(/asset/images/x-logo1.svg) no-repeat;
    background-size: 100%;
    /* background-color: #fff; */
}

.sns_list li a {
    display: block;
    border-bottom: dotted 1px #4e4e4e;
    height: 100%;
    max-heisght: 8rem;
}

.inner_sns {
    width: 100%;
    padding: 0px;
    margin: 0 auto;
}


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

@media (min-width:768px){

/* 共通幅 */
.splash_item img {
    margin: 0 15% 0 auto;
}


.locations,
.navigation,
.news,
.introduction,
.sns,
.goods-lineup{
max-width:1100px;
margin:100px auto;
padding:0 20px;
}


.introduction{
margin: 0% auto;
}

.title-logo {
position: absolute;
right: 7.5%;
width: 26.5%;
margin-top: 1.3%;
transform:none;
}
	
.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;

}


/* ===============================
LOCATIONS
=============================== */

.locations-grid{
display:flex;
flex-wrap:wrap;
gap:24px;
justify-content:center;
}
/* 4番目と5番目を中央寄せ */
.locations-grid .location-card:nth-child(4){
grid-column:1 / 2;
}

.locations-grid .location-card:nth-child(5){
grid-column:2 / 3;
}

.location-card{
margin:0;
padding:24px;
text-align:left;
width:calc(33.333% - 16px);
}


.location-detail{
max-height:0;
overflow:hidden;
transition:max-height .4s ease;
}

.location-card.active .location-detail{
max-height:300px; /* 適当に大きめ */
}

/* ===============================
NAVIGATION
=============================== */

.navigation{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:20px;
}

.nav-button{
padding:22px 10px;
font-size:18px;
}


/* ===============================
NEWS
=============================== */
.news-list{
max-height: 325px;
max-width: 75%;
margin: 5rem auto;
}

.news-item a::after{
content:"";
margin-left:auto;

width:8px;
height:8px;

border-top:2px solid #C8A96E;
border-right:2px solid #C8A96E;

transform:rotate(45deg);

}

.news-item a{
display:flex;
align-items:center;
gap:12px;
flex-wrap:nowrap;
}

.news-date,
.news-badge{
flex-shrink:0;
}

.news-text{
margin:0;
white-space:nowrap;
}

/* PCスクロールバー */

.news-list::-webkit-scrollbar{
width:6px;
}

.news-list::-webkit-scrollbar-track{
background:#111;
}

.news-list::-webkit-scrollbar-thumb{
background:#B73737;
border-radius:10px;
}

.news-list::-webkit-scrollbar-thumb:hover{
background:#C8A96E;
}

/* ===============================
INTRO
=============================== */

.introduction{
padding:40px;
}

.intro-text{
font-size:22px;
text-align: center;
}


}



/* ===== 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;
}

/* ===== ANIMATIONS ===== */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

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

/* ===== RESPONSIVE ===== */
@media (max-width: 480px) {
    .saiyuki-logo {
        font-size: 60px;
    }
    
    .main-title {
        font-size: 20px;
    }
    
    .location-name {
        font-size: 24px;
    }
    
    .nav-button {
        font-size: 18px;
        padding: 15px 25px;
    }
}


/* アコーディオン */

.location-header{
display:flex;
justify-content:space-between;
align-items:center;
cursor:pointer;
}

.accordion-icon{
width:18px;
height:18px;
border-right:3px solid #C8A96E;
border-bottom:3px solid #C8A96E;
transform:rotate(45deg);
transition:0.3s;
}

.location-card.active .accordion-icon{
transform:rotate(-135deg);
}

.location-detail{
height:0;
overflow:hidden;
transition:height .35s ease;
text-align:left;
}

.location-detail p{
margin-top:10px;
font-size:14px;
color:#ddd;
}

.location-card.active{
border-color:#C8A96E;
box-shadow:0 0 15px rgba(200,169,110,0.5);
}

section{
margin-bottom: 3rem;
}

.gradation {
width: 100%;
height: 7rem;
  background-image: linear-gradient(#000000 18%, transparent);
}