/* リセットCSS & 基本設定 */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif; color: #333; line-height: 1.6; }
img { max-width: 100%; vertical-align: bottom; }
ul { list-style: none; }
a { text-decoration: none; color: inherit; transition: 0.3s; }
.container { max-width: 90%; margin: 0 auto; padding: 0 20px; }
.center { text-align: center; }

/* ヘッダー */
header { padding: 10px 0; border-bottom: 1px solid #eee; }
.header-inner { display: flex; justify-content: space-between; align-items: center; }
.logo img { height: 50px; }
.header-inner:after{
    display: none;
}

/* ナビ全体の整列 */
nav ul {
    display: flex;
    align-items: center; /* 縦方向の中央揃え */
    gap: 20px;
}

/* インスタアイコン固有のスタイル */
.nav-instagram a {
    font-size: 1.5rem; /* アイコンを少し大きく */
    color: #E1306C;    /* インスタグラムに近いピンク、またはサイトのアクセント色に */
    transition: transform 0.3s ease;
    display: flex;
    align-items: center;
}

.nav-instagram a:hover {
    transform: scale(1.2); /* ホバー時に少し大きくする演出 */
    opacity: 0.8;
}

/* --- PC設定（デフォルト） --- */
.hamburger {
    display: none; /* PCでは隠す */
}

.sp{
    display: none;
}

/* --- スマホ設定（768px以下） --- */
@media (max-width: 768px) {

    .pc{
        display: none;
    }

    .sp{
        display: block;
    }

    /* ボタンのスタイル */
    .hamburger {
        display: block;
        position: fixed;
        top: 20px;
        right: 20px;
        width: 30px;
        height: 24px;
        z-index: 100;
        cursor: pointer;
    }

    .hamburger span {
        display: block;
        position: absolute;
        width: 100%;
        height: 2px;
        background-color: #333;
        transition: all 0.4s;
    }

    .hamburger span:nth-child(1) { top: 0; }
    .hamburger span:nth-child(2) { top: 11px; }
    .hamburger span:nth-child(3) { bottom: 0; }

    /* ボタンがアクティブな時（×印に変化） */
    .hamburger.active span:nth-child(1) { transform: translateY(11px) rotate(-45deg); }
    .hamburger.active span:nth-child(2) { opacity: 0; }
    .hamburger.active span:nth-child(3) { transform: translateY(-11px) rotate(45deg); }

    /* メニューのスタイル（初期状態は右に隠す） */
    .nav-menu {
        position: fixed;
        top: 0;
        right: -100%; /* 画面の外へ */
        width: 100%;
        height: 100vh;
        background-color: rgba(255, 255, 255, 0.95);
        z-index: 90;
        transition: all 0.4s;
        padding-top: 100px;
    }

    .nav-menu.active {
        right: 0; /* 画面内に表示 */
    }

    .nav-menu ul {
        flex-direction: column; /* 縦並び */
        align-items: center;
        gap: 30px;
    }

    .nav-menu ul li a {
        font-size: 1.2rem;
    }

    .container{
        max-width: 100%;
    }
}

/* スマホ時の調整 */
@media (max-width: 768px) {
    .nav-instagram a {
        font-size: 1.3rem;
    }
}

/* メインビジュアル */
/* メインビジュアル全体の高さを調整 */
.m-visual {
    position: relative;
    width: 100%;
    overflow: hidden;
    background-color: #eee;
    margin-bottom: 120px;
}

/* スライダーとその中身も親の高さ（85vh）に合わせる */
.mv-slider, 
.mv-slider .slick-list, 
.mv-slider .slick-track, 
.item {
    height: 100%;
}

/* 画像の表示設定 */
.item img {
    width: 100%;
    height: 100%;
    object-fit: cover;     /* 縦横比を保ったまま枠を埋める */
    object-position: center; /* 画像の中央を基準にトリミング */
}

/* ロゴバッジの位置微調整（高さが変わるので再確認） */
.mv-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    text-align: center;
    width: 100%;
}

.mv-badge img {
    width: 280px; /* 高さに合わせて少し大きくするとバランスが良いです */
    height: auto;
}

@media (max-width: 768px) {
    .mv-badge img{
        width:150px;
    }
}



/* slickの余計な余白を消す（必要に応じて） */
.slick-slide {
    line-height: 0;
}

.mv-badge {
    text-align: center;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

/* セクションタイトル */
.section-title { text-align: center; font-size: 40px; margin: 60px 0 40px; letter-spacing: 0.1em; font-weight: bold;}
.section-title span { display: block; font-size: 16px; margin-top: 10px; font-weight: normal; }
.section-title.white { color: white; }

@media (max-width: 768px) {
    .section-title{
        font-size: 35px;
    }
}

/* 特徴セクション (ABOUT) */
.feature-row { display: flex; align-items: center; gap: 40px; margin-bottom: 60px; }
.feature-row.reverse { flex-direction: row-reverse; }
.feature-text, .feature-img { flex: 1; }
.feature-text h3 { 
    font-size: 24px; 
    margin-bottom: 20px; 
    border-bottom: solid 3px #edccb2;
    position: relative;
    padding-bottom: 8px;
    font-weight: bold;
}
.feature-text h3:after {
      position: absolute;
      content: " ";
      display: block;
      border-bottom: solid 3px #ed7312;
      bottom: -3px;
      width: 30%;
    }
.feature-text p { margin-bottom: 25px; }

@media (max-width: 768px) {
    .feature-text{
        text-align: center;
    }
    .feature-text h3,.feature-text p{
        text-align: left;
    }
    .feature-text h3{
        font-size: 20px;
    }
}

/* ボタン */
.btn {
    display: inline-block;
    padding: 10px 40px;
    background: #8BC34A;
    color: #fff;
    font-size: 14px;
    border-radius: 4px;
}
.btn:hover { opacity: 0.7; }

/**/
.about{
    margin-bottom: 120px;
}

/* メッセージ背景 */
.message-section {
    background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url('../images/top/message-bg.jpg') center/cover fixed;
    padding: 100px 20px;
    text-align: center;
    margin-bottom: 120px;
}
.message-box { color: white; max-width: 800px; margin: 0 auto; }

@media (max-width: 768px) {
    .message-box .section-title{
        margin-top: 0;
    }
}

/* ニュース */
.news{
    margin-bottom: 120px;
}
.news-list { border-top: 1px solid #eee; margin-bottom: 30px; }
.news-list li { border-bottom: 1px solid #eee; padding: 15px 10px; display: flex; gap: 20px; }
.news-list .date { font-weight: bold; color: #888; }

/* ショップ */
.shop { padding: 60px 0; background: #fafafa; }
.shop-info-card {
    background: rgba(255, 255, 255, 0.9);
    padding: 40px;
    margin-right: 50px;
    max-width: 400px;
}
.shop-info-card h3 { margin-bottom: 15px; border-bottom: 2px solid #8BC34A; display: inline-block; }

.shop-info-card a{
    margin-top: 15px;
}

/* 親要素を確実にFlexboxにする */
/* 親要素の調整 */
.shop-flex-container {
    display: flex;
    gap: 30px;
    align-items: stretch;
}

/* 地図の比率を大きくする */
.shop-map {
    flex: 6;               /* 数字を大きくするとその分広くなります */
    min-height: 450px;     /* 横幅に合わせて高さも少し出すとバランスが良いです */
}

/* 店舗情報の比率を小さくする */
.shop-info-card {
    flex: 4;               /* 地図との合計比率で幅が決まります */
    min-width: 300px;      /* 情報が潰れないよう最小幅を確保 */
}

@media (max-width: 768px) {
    .shop-info-card{
        order: 1;
        padding: 15px;
    }
    .shop-map{
        order: 2;
    }
}

/* レスポンシブ設定（画面が狭くなったら縦並びへ） */
@media (max-width: 1024px) {
    .shop-map {
        flex: 6;
    }
}

@media (max-width: 768px) {
    .shop-flex-container {
        flex-direction: column;
    }
    .shop-map {
        height: 300px;
        flex: none; /* 縦並びの時は比率指定を解除 */
    }
}

/* フッター */
footer { text-align: center; padding: 40px 0; font-size: 12px; color: #888; }

/* レスポンシブ */
@media (max-width: 768px) {
    .header-inner { flex-direction: column; gap: 15px; }
    .feature-row, .feature-row.reverse { flex-direction: column; }
    .m-visual {}
    .shop-content { justify-content: center; }
    .shop-info-card { margin-right: 0; }
}


/*フェード*/
.effect-fade {
  opacity : 0;
  transform : translate(0, 45px);
  transition : all 1200ms;
}

.effect-fade.effect-scroll {
  opacity : 1;
  transform : translate(0, 0);
}

.effect-fade-left{
  opacity : 0;
  transform : translateX(-90px);
  transition : all 1200ms;
}

.effect-fade-left.effect-scroll-left {
  opacity : 1;
  transform : translate(0, 0);
}

.effect-fade-right{
  opacity : 0;
  transform : translateX(90px);
  transition : all 1200ms;
}

.effect-fade-right.effect-scroll-right {
  opacity : 1;
  transform : translate(0, 0);
}

/**/
.common_block01 .bg span picture{
    width: 100%;
}

.main_title .inner .h_title{
    padding-top: 0;
}

.main_title .inner .h_title .h01::before,.main_title .inner .h_title .h01 span::before,.main_title .inner .h_title .h01 span::after{
    display: none;
}

.main_title .inner .h_title{
    height: 40px;
}

.main_title .inner{
    padding-top: 50px;
}

.main_title .photo{
    margin-bottom: 80px;
}

.main_title .inner .h_title .h01{
    font-size: 3.2rem;
}

.main_title .inner .h_title .h01,.main_title .inner .h_title .h02,.effect.move .title05 span,.title02 .t01{
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}

.menu_block01 .text{
    text-align: center;
    margin-bottom: 60px;
}

.menu_list .name{
    font-size: 1.2rem;
}

.title04 .t01{
    font-size: 2.4rem;
}

.woocommerce ul.products li a .woocommerce-loop-product__title{
        font-size: 1.2rem !important;
        font-weight: bold;
}

.woocommerce ul.products li .price .woocommerce-Price-amount{
        font-size: 1rem !important;
        font-weight: normal;
}

.shop_list{
    margin-bottom: 60px;
}

.about_block02{
    margin-bottom: 80px;
}

.menu_list{
    border-bottom: 1px solid #333;
    padding-bottom: 10px;
}

@media screen and (max-width: 897px) {
    .main_title .inner .h_title .h01 {
        font-size: 2.3rem;
    }
    .title04 .t01{
        font-size: 1.8rem;
    }
    .menu_list .name {
        font-size: 1rem;
    }
    .woocommerce ul.products[class*=columns-] li.product, .woocommerce-page ul.products[class*=columns-] li.product{
        float: none;
        width: 100%;
    }
}