@charset "UTF-8";



/*!

Theme Name: Cocoon Child

Description: Cocoon専用の子テーマ

Theme URI: https://wp-cocoon.com/

Author: わいひら

Author URI: https://nelog.jp/

Template: cocoon-master

Version: 1.1.3

*/



/************************************

** 子テーマ用のスタイルを書く

************************************/

/*必要ならばここにコードを書く*/

.sushi-restaurant-list {

max-width: 800px;

margin: 0 auto;

padding: 20px;

}



.sushi-restaurant-item {

background-color: #f9f9f9;

border: 1px solid #ddd;

border-radius: 5px;

padding: 15px;

margin-bottom: 20px;

}



.sushi-restaurant-item h2 {

color: #333;

font-size: 1.2em;

margin-bottom: 10px;

}



.sushi-restaurant-item p {

color: #666;

margin: 5px 0;

}



.table-scroll {

overflow-x: auto;

}

.table_design10 {

border-collapse: collapse;

min-width: 700px;

font-weight: bold;

text-align: center;

}

.table_design10 th, .table_design10 td {

padding: .5em 1em;

border: 2px solid #4d9bc1;

}

.table_design10 th {

background: #4d9bc1;

color: #fff;

border-right: 2px solid #fff;

border-top: 2px solid #4d9bc1;

}

.table_design10 th:last-of-type {

border-right: 2px solid #4d9bc1;

}



/*見出しリセット*/

.article h2::before {

border-top: none;

}

.article h2::after {

border-bottom: none;

}

.article h2{

border: none;

}

.article h3::before {

border-top: none;

}

.article h3::after {

border-bottom: none;

}

.article h3{

border: none;

}

.article h4::before {

border-top: none;

}

.article h4::after {

border-bottom: none;

}

.article h4{

border: none;

}

.article h5::before {

border-top: none;

}

.article h5::after {

border-bottom: none;

}

.article h5{

border: none;

}

.article h6::before {

border-top: none;

}

.article h6::after {

border-bottom: none;

}

.article h6{

border: none;

}

/*見出し*/

/*H2見出し*/

main h2.wp-block-heading {

color: #000;/*文字色（黒）*/

font-size: 20px;/*文字サイズ*/

padding: 20px 30px;/*文字回りの余白（上下 左右）*/

border-top: 2px solid #000;/*上線（太さ 実線 色）*/

border-bottom: 2px solid #000;/*下線（太さ 実線 色）*/

position: relative;

display: block;

}



main h2.wp-block-heading:before,

main h2.wp-block-heading:after {

background: #000;/*左右線の色（黒）*/

content: '';

position: absolute;

top: -10px;

width: 2px;/*左右線の太さ（幅）*/

height: calc(100% + 20px);

}



main h2.wp-block-heading:before {

left: 10px;

}



main h2.wp-block-heading:after {

right: 10px;

}



/*H3見出し*/

main h3.wp-block-heading {

color: #000;/*文字色（黒）*/

font-size: 18px;/*文字サイズ*/

padding: 10px 20px 10px 30px;/*文字回りの余白（上 右 下 左）*/

display: block;

border-bottom: 1px solid #000;/*下線（太さ 実線 色）*/

position: relative;

}



main h3.wp-block-heading:before {

content: "";

display: block;

position: absolute;

bottom: -14px;

left: 10px;

width: 1px;/*左線の太さ（幅）*/

height: 80%;/*左線の高さ*/

background: #000;/*左線の色*/

}



/*H4見出し*/

main h4.wp-block-heading {

color: #000;/*文字色（黒）*/

font-size: 16px;/*文字サイズ*/

padding: 7px 30px;/*文字回りの余白（上下 左右）*/

display: block;

position: relative;

}



main h4.wp-block-heading:before {

color: #000;/*矢印の色（黒）*/

content: "▲";

position: absolute;

font-size: 25px;/*矢印のサイズ*/

left: 0;

top: 0;

transform: rotate(90deg);

}



h1:first-letter {

font-size: 2em;

color: #fa1a09;

}



.header-in {

align-items: center;

display: flex;

flex-direction: row;

justify-content: space-between;

}



.header-in:after {

content: none;

}



.logo-text {

padding: 10px 0;

}



.my-header {

align-items: center;

display: flex;

gap: 10px;

}



.my-header a {

color: #333;

text-decoration: none;

}



.my-box > span {

display: block;

font-size: 12px;

}



.my-box .my-box2 {

font-size: clamp(16px, 2vw, 20px);

font-weight: bold;

}



.my-banner a {

background-color: #333;

border-radius: 15px;

color: #fff;

font-size: clamp(10px, 2vw, 16px);

padding: 10px;

}



@media (width <=1023px) {

.header-in {

flex-direction: column;

}

}



@media (width > 768px) {

a[href*="tel:"] {

pointer-events: none;

}

}

/*

Theme Name: Your Child Theme

Template: parent-theme-directory-name

*/



/* 基本設定 */

:root {

--primary-color: #004d40; /* 濃い緑 */

--accent-color: #ff9800; /* オレンジ */

--background-color: #f5f5f5;

--text-color: #333;

}



body {

font-family: 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', sans-serif;

line-height: 1.6;

color: var(--text-color);

background-color: var(--background-color);

margin: 0;

}



img {

max-width: 100%;

height: auto;

display: block;

}



a {

color: var(--primary-color);

text-decoration: none;

transition: opacity 0.3s;

}



a:hover {

opacity: 0.7;

}



/* ヘッダー */

.site-header {

text-align: center;

padding: 1rem 0;

background-color: #fff;

border-bottom: 1px solid #e0e0e0;

}



.site-header img {

max-width: 150px;

margin: 0 auto;

}



/* ページコンテンツ */

.shop-detail {

max-width: 960px;

margin: 0 auto;

padding: 1rem;

}



.section-title {

font-size: 1.5rem;

color: var(--primary-color);

border-bottom: 2px solid var(--primary-color);

padding-bottom: 0.5rem;

margin-top: 2rem;

margin-bottom: 1.5rem;

}



/* 1. トップセクション */

.shop-header {

position: relative;

color: #fff;

text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5);

}



.shop-visual {

max-height: 300px;

overflow: hidden;

border-radius: 8px;

}



.shop-visual img {

width: 100%;

object-fit: cover;

}



.shop-title-container {

position: absolute;

bottom: 1rem;

left: 1rem;

}



.shop-name {

font-size: 2rem;

margin: 0;

}



.shop-catchphrase {

font-size: 1rem;

margin: 0;

}



/* 2. 店舗紹介セクション */

.shop-gallery {

display: flex;

flex-wrap: wrap;

gap: 1rem;

margin-top: 1.5rem;

}



.shop-gallery img {

width: 100%;

border-radius: 8px;

box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

}



/* 3. 店舗情報セクション */

.info-list {

display: grid;

grid-template-columns: 100px 1fr;

gap: 0.5rem 1rem;

border: 1px solid #ccc;

padding: 1rem;

border-radius: 8px;

background-color: #fff;

}



.info-list dt {

font-weight: bold;

color: var(--primary-color);

}



/* 4. 外部サイトへの導線 */

.shop-links ul {

list-style: none;

padding: 0;

}



.shop-links li a {

display: block;

background-color: var(--primary-color);

color: #fff;

padding: 0.8rem 1rem;

border-radius: 5px;

margin-bottom: 0.5rem;

text-align: center;

}



.shop-links li a:hover {

background-color: #00695c;

}



/* 5. フッターナビゲーション */

.site-footer {

padding: 1rem;

background-color: var(--primary-color);

text-align: center;

}



.page-nav {

display: flex;

justify-content: space-between;

align-items: center;

max-width: 600px;

margin: 0 auto;

}



.page-nav .nav-link {

flex-grow: 1;

color: #fff;

padding: 0.5rem;

border-radius: 5px;

margin: 0 0.5rem;

}



.page-nav .nav-link.all-shops {

background-color: var(--accent-color);

}



/* PC向け調整（ブレークポイント） */

@media (min-width: 768px) {

.shop-detail {

padding: 2rem;

}



.shop-name {

font-size: 3rem;

}



.shop-catchphrase {

font-size: 1.2rem;

}



.shop-gallery img {

width: calc(33.333% - 1rem); /* 3列に */

}



.info-list {

grid-template-columns: 120px 1fr;

}

}
/* モバイルファーストのスタイル */
.my-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.my-box {
  text-align: center;
}

.my-box > span {
  display: block;
}

.my-banner {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.my-banner a {
  display: block;
  font-size: 14px;
  padding: 8px 12px;
  white-space: nowrap;
}

/* PC向け調整（ブレークポイント） */
@media (min-width: 1024px) {
  .my-header {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  .my-box {
    text-align: left;
  }

  .my-banner {
    display: flex;
    gap: 10px;
    flex-wrap: nowrap;
  }

  .my-banner a {
    font-size: 16px;
    padding: 10px 15px;
  }
}


/* 親テーマのスタイルを上書きするための調整 */

.single-shop .entry-content {

    padding: 0;

}



/* 基本設定 */

:root {

    --primary-color: #004d40; /* 濃い緑 */

    --accent-color: #ff9800; /* オレンジ */

    --background-color: #f5f5f5;

    --text-color: #333;

}



body {

    font-family: 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', sans-serif;

    line-height: 1.6;

    color: var(--text-color);

    background-color: var(--background-color);

    margin: 0;

}



img {

    max-width: 100%;

    height: auto;

    display: block;

}



a {

    color: var(--primary-color);

    text-decoration: none;

    transition: opacity 0.3s;

}



a:hover {

    opacity: 0.7;

}



/* ページコンテンツ */

.shop-detail {

    max-width: 960px;

    margin: 0 auto;

    padding: 1rem;

}



.section-title {

    font-size: 1.5rem;

    color: var(--primary-color);

    border-bottom: 2px solid var(--primary-color);

    padding-bottom: 0.5rem;

    margin-top: 2rem;

    margin-bottom: 1.5rem;

}



/* 1. トップセクション */

.shop-header {

    position: static;

    color: var(--text-color);

    text-shadow: none;

    text-align: left;

}



.shop-visual-container {

    position: relative;

    max-height: none; /* 高さを自動調整 */

    height: auto; /* 👈ここを修正 */

    overflow: hidden;

    border-radius: 8px;

    margin-bottom: 1.5rem;

}



.shop-visual {

    position: relative;

    width: 100%;

    height: auto; /* 👈ここを修正 */

}



.shop-visual img {

    width: 100%;

    height: 100%; /* 👈ここを修正 */

    object-fit: contain; /* 👈ここを修正 */

    object-position: center center;

}



.shop-title-container {

    position: absolute;

    top: 1rem;

    left: 1rem;

    display: inline-block;

    padding: 0.5rem 1rem;

    color: #fff;

    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5);

    background: none; /* 背景色を削除 */

    backdrop-filter: none; /* ぼかし効果を削除 */

    -webkit-backdrop-filter: none; /* ぼかし効果を削除 */

}



.shop-name {

    font-size: 2rem;

    margin: 0;

}



.shop-catchphrase {

    font-size: 1rem;

    margin: 0;

    color: var(--text-color);

    text-align: left;

}



/* 2. 店舗紹介セクション */

.shop-introduction {

    margin-top: 2rem;

}



.shop-gallery {

    display: flex;

    flex-wrap: wrap;

    gap: 1rem;

    margin-top: 1.5rem;

}



.shop-gallery a {

    width: 100%;

}



.shop-gallery img {

    width: 100%;

    height: 200px;

    object-fit: cover;

    object-position: center center;

    border-radius: 8px;

    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

}



/* 3. 店舗情報セクション */

.shop-info {

    margin-top: 2rem;

}



.info-list {

    display: grid;

    grid-template-columns: minmax(100px, 120px) 1fr;

    gap: 0.5rem 1rem;

    border: 1px solid #ccc;

    padding: 1rem;

    border-radius: 8px;

    background-color: #fff;

}



.info-list dt {

    font-weight: bold;

    color: var(--primary-color);

    grid-column: 1;

}



.info-list dd {

    grid-column: 2;

}



.access-map-btn {

    display: inline-block;

    width: fit-content;

    padding: 0.8rem 2rem;

    background-color: #333;

    color: #fff;

    border-radius: 8px;

    font-weight: bold;

    text-decoration: none;

    transition: background-color 0.3s ease;

    text-align: center;

}



.access-map-btn:hover {

    background-color: #555;

}



.access-map-btn::after {

    content: "▶";

    margin-left: 0.5rem;

}



/* 4. 外部サイトへの導線 */

.shop-links {

    margin-top: 2rem;

}



.shop-links ul {

    list-style: none;

    padding: 0;

}



.shop-links li a {

    display: block;

    background-color: var(--primary-color);

    color: #fff;

    padding: 0.8rem 1rem;

    border-radius: 5px;

    margin-bottom: 0.5rem;

    text-align: center;

}



.shop-links li a:hover {

    background-color: #00695c;

}



/* 5. フッターナビゲーション */

.site-footer {

    padding: 1rem;

    background-color: var(--primary-color);

    text-align: center;

}



.page-nav {

    display: flex;

    justify-content: space-between;

    align-items: center;

    max-width: 600px;

    margin: 0 auto;

}



.page-nav .nav-link {

    flex-grow: 1;

    color: #fff;

    padding: 0.5rem;

    border-radius: 5px;

    margin: 0 0.5rem;

}



.page-nav .nav-link.all-shops {

    background-color: var(--accent-color);

}



/* QRコードセクションのスタイル */

.shop-qrcode {

    text-align: center;

    margin-top: 2rem;

    padding-top: 1rem;

    border-top: 2px solid var(--primary-color);

}



.shop-qrcode h2 {

    text-align: left;

}



/* PC向け調整（ブレークポイント） */

@media (min-width: 768px) {

    .shop-detail {

        padding: 2rem;

    }



    .shop-name {

        font-size: 3rem;

    }



    .shop-catchphrase {

        font-size: 1.2rem;

    }



    .shop-gallery a {

        width: calc(33.333% - 1rem);

    }



    .shop-gallery img {

        height: 250px;

    }



    .info-list {

        grid-template-columns: minmax(120px, 150px) 1fr;

    }

}

/* Shop Archive Grid Layout */

.shop-archive-container {
    max-width: 1200px; /* サイト幅に合わせて調整 */
    margin: 0 auto;
    padding: 20px;
}

.shop-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); /* カラム幅はサイトにより調整 */
    gap: 20px;
    margin-top: 2rem;
}

.shop-grid-item {
    position: relative;
    overflow: hidden;
    border-radius: 8px; /* 角丸はお好みで */
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}

.shop-grid-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0,0,0,0.2);
}

.shop-grid-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

/* 正方形タイルを作るためのスタイル */
.shop-grid-image {
    width: 100%;
    aspect-ratio: 1 / 1; /* 正方形にする */
    background-size: cover;
    background-position: center;
    position: relative;
}

/* オーバーレイとテキスト */
.shop-grid-content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%);
    padding: 20px 15px;
    box-sizing: border-box;
    display: flex;
    align-items: flex-end;
}

.shop-grid-title {
    color: #fff;
    margin: 0;
    font-size: 1.25rem;
    font-weight: bold;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
    line-height: 1.3;
}

/* レスポンシブ調整（スマホなど） */
@media (max-width: 600px) {
    .shop-grid {
        grid-template-columns: repeat(2, 1fr); /* スマホで2列にする場合 */
        gap: 10px;
    }
    
    .shop-grid-title {
        font-size: 1rem;
    }
}

/************************************

** レスポンシブデザイン用のメディアクエリ

************************************/

/*1023px以下*/

@media screen and (max-width: 1023px){

/*必要ならばここにコードを書く*/

}



/*834px以下*/

@media screen and (max-width: 834px){

/*必要ならばここにコードを書く*/

}



/*480px以下*/

@media screen and (max-width: 480px){

/*必要ならばここにコードを書く*/

}

.front-top-page #main .entry-title{

display: none;

}