/* 基本css */

*{
    margin: 0;
    padding: 0;
}
/*imgの幅設定解除*/
img {
    max-width: 100%; /* 親要素の幅を超えない */
    height: auto;    /* 縦横比を維持する */
}

body{
    font-family: "Kaisei Decol", serif;
}
ul,ol{
    display: flex;
    list-style: none;
    gap: 30px;
   }

.container {
    width: 100%;
}

.hero-container {
    position: relative;
    width: 100%;
    /* コンテナ全体の高さを三角形の終点に合わせるため、ここでは高さを指定せず中身に合わせます */
}




/* ヘッダー部分は透明にして三角形を貫通させる */
.site-header {
    position: relative;
    z-index: 10;
    background: transparent;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin: 0 20px 0 0;
}

.mv-image-container {
    position: absolute; /* 親要素 .main-visual に対して絶対配置 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0; /* 一番奥に配置 */
}

.mv-photo {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 縦横比を保ったまま領域を埋める（超重要！） */
}

.main-visual {
    width: 100%;
    height: 600px;
    background-size: cover;
    background-position: center;
    position: relative;
}
/* background-image: url('');

/* --- 三角形の共通設定 --- */
.triangle {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    /* 三角形が画像の下まで突き抜けるように高さを設定 */
    height: 100%; 
    pointer-events: none;
}

/* 濃いオリーブの三角形 (▼) */
.olive-tri {
    background: rgba(75, 68, 30, 0.7);
    /* polygon(左上の点, 右上の点, 下中央の頂点) の3点で三角形を作る */
    clip-path: polygon(3% 0, 60% 5%, 23% 98%);
    z-index: 2;
}

/* 薄いベージュの三角形 (▼) */
.light-tri {
    background: rgba(147, 140, 115, 0.5);
    /* 濃い三角形より少し右にずらした3点 */
    clip-path: polygon(0 5%, 60% 30%, 13% 100%);
    z-index: 1;
}

/* 薄いベージュの三角形2 (▼) */
.light-tri2 {
    background: rgba(147, 140, 115, 0.6);
    /* 濃い三角形より右にずらした3点 */
    clip-path: polygon(80% 20%, 120% 25%, 90% 75%);
    z-index: 1;
}
.main-content {
    position: relative;
    z-index: 5;
    color: #fff;
    padding: 80px 0 0 10%;
}

/*メイン3枚の絵*/

.image-gallery {
  display: flex;
  align-items: stretch; /* 垂直方向の中央揃え */
  justify-content: center;
  width: 100%;
  height: 600px;
}

/* 中央の大きな画像（B） */
.main-image {
  flex: 0 0 60%; /* 幅を60%に固定 */
  z-index: 2;
}

/* 左右の画像（AとC） */
.side-image {
  flex: 0 0 20%; /* 幅を20%に設定 */
  opacity: 0.7;   /* 少し暗くして中央を強調（任意） */
}


/* 画像自体の設定 */
.image-gallery img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover; /* 比率を保ちつつ枠を埋める */
}

/* Aは右側、Cは左側を見せるように固定 */
.image-a img {
  object-position: right center;
}
.image-c img {
  object-position: left center;
}

.image-b {
  position: relative; /* 子要素の基準点にする */
}

.overlay-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 真ん中に配置 */
  text-align: center;
  width: 100%;
  z-index: 3; /* 画像より上に表示 */
}



.overlay-text {
  color: white;
  font-size: 24px;
  font-weight: bold;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.5); /* 文字を読みやすくする */
  line-height: 2;
}
/* 3枚のえ終わり */



/*2 menu */
.menu-title {
    text-align: left;
    font-family: "Kaisei Decol", serif;
    font-size: 40px;
    color: #8b8b7a;
    font-weight: bold;
    letter-spacing: 0em;
    unicode-bidi: isolate;
    margin-bottom: 30px;
  
}

.menu-titlec {
    text-align: right;
    font-family: "Kaisei Decol", serif;
    font-size: 40px;
    color: #8b8b7a;
    font-weight: bold;
    letter-spacing: 0em;
    unicode-bidi: isolate;
    margin-bottom: 30px;
  
}


.menu-item {
    display: flex;
    align-items: center;
    max-width: 900px;
    margin: 0 auto 60px;
    padding: 0 20px;
}


.menu-text {
    flex: 1;
    padding: 0 40px;
}

.menu-item.reverse {
    flex-direction: row-reverse;
}

.menu-img {
    flex: 1;
}

.menu-img img {
    width: 410px;
    height: 246px;
    display: block;
}
/* menu 終わり */


/*3 voice*/
.voice-wrap{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    max-width: 900px;
    justify-content: space-between; 
    margin: 0 auto 60px;
    padding: 0 20px;

}

.voice-wrap2{
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    justify-content: space-between; 
}

.voice{
    border: 1px solid #4e440a;
    flex-wrap: wrap;
    background: #d0dfde07;
    width: 230px;
    padding: 10px;
    margin: 10px;
}

.voice-box-wrap{
    display: flex;
    height: 80px;
    padding: 2px;
}

.voice-box-wrap img{
    width: 50px;
    height: 50px;
}
/*Voice終わり*/


/*4 スタッフ欄*/
#sec4{
    background: #d0dfde07;
}

.staff-box-wrap{
    display: flex;
    max-width: 1000px;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 0 auto 60px;
    padding: 0 20px;

}
.staff-box{
    background: #bab7a7;
    width: 30%;
    border-radius: 15px;
}
.staff-box h3{
 font-size: 1.2em;
 padding: 10px;
 color: "7e6b5a";
 text-align: center;
}
.insta-box-wrap{
   display: flex;
   padding: 15px;
   justify-content: space-between;
}
.insta-logo{
  width: 70%;
 text-align: center;
 height: 150px;
}

.box img{
    width: 100%;
    border-radius: 50%;
     text-align: center;
}

.staffcome-box{
    background: #e9f4f4;
    height: auto;
    padding: 15px;
    border-radius: 15px; 
    margin: 0 20px 20px 20px;
}


.staffcome p{
    background: #e9f4f400;
    border-radius: 15px;  
}


/*スタッフ欄終わり*/





/* セクション共通 */
.section-title {
    text-align: center;
    font-family: "Kaisei Decol", serif;
    font-size: 50px;
    color: #8f8236;
    font-weight: bold;
    margin: 80px 0 40px;
    font-weight: normal;
    letter-spacing: 0.2em;
    unicode-bidi: isolate;
}

/* footer */
footer{    
    padding: 60px 5px;
    text-align: center;
}

.foot-nav ul{
    display: flex;
    justify-content: center;
    padding: 20px;
}

#pagetop{
    position: right;
    bottom: 30px;
    right: 50px;
}
#pagetop img{
    width: 50px;
}

/*求人*/
.instagram-embed-container {
    display: flex;
    justify-content: center;
    padding: 40px 0;
    width: 100%;
}



/*地図*/
.info {
    max-width: 600px;
    justify-content: center;
    margin: 0 auto 60px;
    padding: 0 20px;
}

table td, table th {
  padding: 10px;
}


.shop-info{
    border: #4e440a;
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto 60px;
    padding: 0 20px;
}

.pagetop
    {
    position: fixed;
    bottom: 16px;
    right: 16px;
    }
 
.pagetop a
    {
    display: block;
    text-decoration: none;
    }
 
.pagetop:hover
{
    opacity: 0.70 ;
}



/* 画面幅が768px以下の時の設定 */

@media (max-width: 768px) {
/* 基本css */
*{
    margin: 0;
    padding: 0;
}

/* 1. 左右の画像（椅子と机）を完全に消す */
    .image-a, .image-c {
        display: none !important;
    }

    /* 2. 真ん中の画像（zentai.png）を画面いっぱいに広げる */
    .image-b {
        width: 100% !important;
        height: 100% !important;
    }

    .image-b img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover; /* 縦横比を保ちつつ枠を埋める */
        object-position: center; /* 画像の真ん中を見せる */
    }

    /* 3. 親要素のコンテナも調整 */
 /* ギャラリー全体の横幅制限と余白をリセット */
    .image-gallery {
        display: block !important;
        width: 100% !important;  /* 画面いっぱいに広げる */
        margin: 0 !important;    /* 外側の余白を消す */
        padding: 0 !important;   /* 内側の余白を消す */
        overflow: hidden;        /* はみ出しを許さない */
    }

    /* 中央画像のコンテナ自体の幅を100%にする */
    .main-image, .image-b {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* 画像自体の表示設定 */
    .image-b img {
        display: block;          /* 下に謎の隙間ができるのを防ぐ */
        width: 100vw !important; /* 画面の横幅(viewport width)いっぱいに強制 */
        height: 400px;           /* メインビジュアルの高さに合わせる */
        object-fit: cover;       /* 縦横比を保って埋める */
    }

    .mv-image-container {
        width: 100%;
        height: 100%;
    }

    /* 三角形を1つにする場合：片方を消す */
    .light-tri {
        display: none; /* 薄い方の三角形を非表示にする */
    }

    .olive-tri {
        /* 1つになった三角形を、スマホの画面に合わせたバランスに調整 */
        clip-path: polygon(0 5%, 70% 0, 50% 80%);   /* 下の頂点を100%から50%くらいに引き上げ、右幅も狭くする */
        background: rgba(75, 68, 30, 0.7);
    }



    .main-content {
        padding: 40px 0 0 5%; /* 文字位置を調整 */
    }

    .menu-item{
    position: relative;;
    width: 100%;
    flex-direction: column;
    }
    .menu-item.reverse{
    width: 100%;
    flex-direction: column;
    }

    /*voice*/
    .voice-wrap, .voice-wrap2 {
        display: flex;
        flex-direction: column; /* 中身を上から下へ並べる */
        align-items: center;    /* 中身を中央に寄せる */
        width: 100%;
        padding: 0;
    }

    /* 2. 各コメントカードの横幅を固定から可変（90%）へ */
    .voice{
        width: 60% !important; /* 画面に対して適切なサイズに */
        max-width: 400px;      /* 大きくなりすぎない制限 */
        margin: 10px auto;     /* 上下10px、左右autoで中央配置 */
    }

    /*staff*/
    .staff-box-wrap{
        display: flex;
        flex-direction: column; /* 中身を上から下へ並べる */
        align-items: center;    /* 中身を中央に寄せる */
    }

    .staff-box{
        width: 80%;
        margin: 10px 0;
        }


.instagram-media {
    margin: 0 auto !important;
    min-width: auto !important;
    max-width: 90% !important; /* スマホ画面の90%に収める */
}


.map-container {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 の比率を保つ魔法の数字 */
    margin-bottom: 20px;
}

.map-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
}


}