@charset "UTF-8";

/* =============================== Reset & Base =============================== */
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:"ヒラギノ角ゴ Pro W3",Meiryo,sans-serif;color:#333;background:#fff;line-height:1.6;}
a{text-decoration:none;}
img,a img{border:0;display:block;max-width:100%;}

/* =============================== Navigation =============================== */
#navigation{position:fixed;top:0;left:0;width:100%;background:rgba(0,0,0,0.4);backdrop-filter:blur(6px);z-index:1000;display:flex;justify-content:center;align-items:center;padding:12px 0;}
#navigation ul{display:flex;gap:30px;list-style:none;}
#navigation li a{font-weight:600;font-size:18px;color:#fff;transition:color .3s ease;}
#navigation li a:hover{color:#ffae42;text-shadow:0 0 4px rgba(0,0,0,0.6);}
.nav-toggle{display:none;font-size:28px;cursor:pointer;position:absolute;left:20px;}

/* =============================== Section Common =============================== */
.section{text-align:center;position:relative;overflow:hidden;}
.section .section-bg{position:relative;width:100%;height:100%;overflow:hidden;}
.section .section-bg img{width:100%;height:100%;object-fit:cover;filter:brightness(75%);}
.section h1{font-size:48px;font-family:'Crimson Text',serif;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,0.6);display:inline-block;padding-bottom:8px;}
.section h1 span{display:block;font-size:45px;color:#444444;margin-top:6px;border:none;}
.section .section-content{position:relative;z-index:3;background:#fff;padding:10px 20px 20px;border-radius:8px;}
/* 英語部分にのみ下線を付ける */
.section h1 .en {
  display:inline-block;
  border-bottom:2px dotted #444444;
  padding-bottom:6px;
}

/* 日本語部分はそのまま */
.section h1 .ja {
  display:block;
  font-size:20px;
  color:#444444;
  margin-top:6px;
  border:none;
}

/* =============================== Home Section =============================== */
#home{background:url("../images/bg_home.jpg") center/cover no-repeat fixed;color:#fff;height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-shadow:0 2px 4px rgba(0,0,0,0.6);}
#home h1 img{width:500px;height:auto;margin:0 auto;}

/* =============================== Access Section =============================== */
#access .section-bg img{object-position:top;width:100%;height:auto;}
.shop-info{max-width:600px;margin:0 auto 40px;padding: 0px 20px;text-align:left;border-top:1px dotted #bbb;border-bottom:1px dotted #bbb;background:none;box-shadow:none;border-radius:0;}
.shop-info p{margin:10px 0;padding:8px 0;border-bottom:1px dotted #ddd;font-size:16px;color:#333;display:flex;align-items:flex-start;}
.shop-info p:last-child{border-bottom:none;}
.shop-info p strong{color:#555;font-weight:700;min-width:120px;display:inline-block;letter-spacing:0.5px;}
.shop-info p span{flex:1;color:#444;}
.map-container{max-width:800px;margin:0 auto;border:1px solid #ddd;box-shadow:0 2px 8px rgba(0,0,0,0.1);}

/* =============================== Purchase Section =============================== */
#purchase .section-bg img{object-position:top;width:100%;height:auto;}
#purchase .nagare_txt img{width:800px;max-width:95%;margin:auto;display:block;}

/* =============================== Shop Section =============================== */
#shop .section-bg img{object-position:top;width:100%;height:auto;}
#shop .txt{background:rgba(0,0,0,0.6);max-width:600px;margin:0 auto;padding:20px;border-radius:8px;color:#fff;}
#shop p{font-size:18px;}

/* =============================== Footer =============================== */
footer{background:#111;color:#ccc;text-align:center;padding:30px 0;font-size:14px;}

/* =============================== Responsive =============================== */

/* スマホ（〜768px） */
@media (max-width:768px){

  #navigation ul{display:none;flex-direction:column;gap:15px;background:rgba(0,0,0,0.9);position:absolute;top:50px;left:0;width:100%;padding:20px 0;text-align:center;}
  #navigation ul.open{display:flex;}
  #navigation li a{color:#fff;font-size:20px;font-weight:600;text-shadow:0 0 6px rgba(0,0,0,0.4);}
  #navigation li a:hover{color:#ffae42;}
  .nav-toggle{display:block;color:#fff;font-size:35px;}

  .section h1{font-size:28px;}
  .shop-info p{max-width:90%;padding:15px;font-size: 13px;}
  .map-container{max-width:90%;}
  #purchase .nagare_txt img,#shop .txt{max-width:90%;}
}

/* iPad（768px〜1024px） */
@media (min-width:769px) and (max-width:1024px){

  #navigation ul{gap:20px;}
  #navigation li a{font-size:17px;}
  .section h1{font-size:36px;}
  .shop-info{max-width:80%;padding:0px 20px;font-size:16px;}
  .map-container{max-width:85%;}
  #purchase .nagare_txt img{width:80%;margin:20px auto;}
  #shop .txt{max-width:80%;font-size:17px;}
}

/* =============================== Section Title Responsive =============================== */

/* PCデフォルト */
.section h1 .en{font-size:48px;}
.section h1 .ja{font-size:20px;}

/* タブレット（iPadなど） */
@media (max-width:1024px){
  .section h1 .en{font-size:40px;}
  .section h1 .ja{font-size:18px;}
}

/* スマホ（〜768px） */
@media (max-width:768px){
  .section h1 .en{font-size:32px;}
  .section h1 .ja{font-size:16px;}
}

/* 小さいスマホ（〜480px） */
@media (max-width:480px){
  .section h1 .en{font-size:26px;}
  .section h1 .ja{font-size:14px;}
}

/* =============================== Home Text Responsive =============================== */

/* PCデフォルト */
#home p{font-size:18px;line-height:1.8;}

/* タブレット（iPadなど） */
@media (max-width:1024px){
  #home p{font-size:16px;line-height:1.7;}
}

/* スマホ（〜768px） */
@media (max-width:768px){
  #home p{font-size:14px;line-height:1.6;}
}

/* 小さいスマホ（〜480px） */
@media (max-width:480px){
  #home p{font-size:13px;line-height:1.6;}
}