/*==御食事処くいしんぼう ホームページ2026 CSS==*/
@charset "UTF-8";

/*==共通部分== */
html {
    font-size: 100%;
    scroll-behavior: smooth;
}
/*==Googleフォント==*/
/*しっぽり明朝*/
.shippori-mincho-regular {
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  font-style: normal;
}
/*禅丸ゴシック*/
.zen-maru-gothic-regular {
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 400;
  font-style: normal;
}

/*==ページ全体の基本スタイルの設定==*/
body{
    /*基本フォント*/
    font-family: "Zen Maru Gothic",sans-serif;
    line-height: 1.8; /*文字の行間の幅:フォントサイズの1.8倍*/
    color: #000;/*文字色:黒(#000)*/
	background-color:#FFF;/*ページ全体の背景色:白(#FFF)*/
    text-align: center;/*ページ全体の文字の揃えを中央揃えにする*/
}

/*==リンク==*/
a{
    text-decoration: none;/*リンクに下線を表示しない*/
}

/*==画像の取り扱い==*/
img {
    /*画面より大きな画像の時は画面のwidth幅を100%の大きさにして表示する*/
    max-width: 100%;/*画像表示の最大値は元画像のサイズ*/
    height: auto;
    padding: 0 0rem;
}

/*==Pタグの上下のスペース==*/
p{
    margin-top: 1.5rem;
    margin-bottom: 2.5rem;
}

/*==インラインフレーム(別のページを埋め込む)==*/
/*本サイトではGoogleMapの埋め込み*/
iframe{
    width: 85%;
}

/*==表示内容の位置を整える==*/
.cover{
    max-width: 800px;/*表示エリア*/
    margin:auto;
    padding: 0 0rem;
}

/*==ページヘッダーの書式==*/
/*ページヘッダの共通設定*/
.header{
    text-align: left;
    background-position: top;
    padding-top: 0rem;/*上の余白*/
}
/*index.htmlのヘッダ設定*/
.index{
    height: 400px;/*画像の高さ*/
    background-image: url(../images/top_main_bunner.jpg);/*背景画像*/
}
/*menu.htmlのヘッダ設定*/
.menu{
    height: 340px;/*画像の高さ*/
    background-image: url(../images/top_menu_bunner.jpg);/*背景画像*/
}

/*==くいしんぼうロゴマークの書式==*/
.logo {
    max-width: 500px;/*このサイズより大きくしない*/
    width: 90%;
    padding: 1rem 1rem;
}

/*==キャッチコピーの書式==*/
.catchcopy{
    font-family: 'Shippori Mincho', sans-serif;/*フォント指定*/
    font-weight: normal;/*文字の太さ*/
    margin-top: 2rem;/*キャッチコピーエリアの上の空白*/
    margin-bottom: 2.5rem;/*キャッチコピーエリアの下の空白*/
    line-height: 1.8;/*行のサイズ*/
    font-size: 1.3rem;/*フォントの大きさ*/
}

/*==項目タイトル==*/
.sub_title{
    font-family: 'Shippori Mincho', sans-serif;/*フォント指定*/
    font-weight: normal;/*文字の太さ*/
    font-size: 2rem;/*文字の大きさ*/
    margin-top: 5rem;/*キャッチコピーエリアの上の空白*/
    margin-bottom: 2rem;/*キャッチコピーエリアの上の空白*/
}

/*==項目タイトルの文字の両脇にアイコンを表示する==*/
.icon_insert{
    display: inline-flex;/*図を文字と同じように扱い、文字と横並びにする*/
    align-items: center; /* 文字と図形の縦方向の真ん中を揃える(上下方向の中央揃え) */
    gap: 15px; /* 文字と図形の間のすき間 */
}
.icon_insert::before {/* 文字の前の図形 */
  content: "";
  width: 20px;         /* 図形の横幅 */
  height: 20px;        /* 図形の縦幅 */
  background-image: url("../images/icon_red.gif");/*表示する図形の居場所*/
  background-size: contain;/*指定した表示エリアのサイズに合わせて拡大縮小する*/
  background-repeat: no-repeat;/*画像は繰り返さず1つだけ表示*/
}
.icon_insert::after {/* 文字の後ろの図形 */
  content: "";
  width: 20px;         /* 図形の横幅 */
  height: 20px;        /* 図形の縦幅 */
  background-image: url("../images/icon_red.gif");/*表示する図形の居場所*/
  background-size: contain;/*指定した表示エリアのサイズに合わせて拡大縮小する*/
  background-repeat: no-repeat;/*画像は繰り返さず1つだけ表示*/
}

/*==営業案内の表の書式==*/
.info_data {
    width: 100%;
    max-width: 540px;/*表の最大幅*/
    margin: auto;
    padding: 0 1rem;
    border-spacing: 0;
}
.info_data th,
.info_data td {
    border-bottom: 1px solid #c9c2bc;/*行間の線の色*/
}
.info_data th {
    width: 30%;

    text-align: left;/*文字の左寄せ*/
    font-weight: normal;
    padding: 1.5rem 0.7rem;/*上下 左右のスペース*/
}
.info_data td {
    text-align: left;
    font-weight: normal;
    padding: 1.5rem 0rem;/*上下 左右のスペース*/
}

/*==リンクボタン==*/
.btn {/*ボタンの基本的な書式*/
    display: inline-block;
    font-size: 1.3rem;/*ボタンに表示される文字の大きさ*/
    background-color: #000066;/*ボタンの色*/
    color: #fff;/*文字の色*/
    border-radius: 8px;/*ボタンの四角の丸み*/
    padding: 0.8rem 2.0rem;/*文字周りの肉付け*/
    transition: 0.5s;/*hoverkの動作にかかる時間*/
    margin: 4rem 0;/*ボタンの上下と左右のマージン*/
}
.btn:hover {/*ボタンにカーソルを重ねたとき*/
    background-color: #0bd;/*ボタンの色*/
}

/*==電話番号の表示==*/
.telnumber{
    display: inline-flex;
    background-color: #e3eeef;/*背景の色*/
    border-radius: 0px;/*ボタンの四角の丸み*/
    font-size: 2.3rem;/*文字の大きさ*/
    padding: 0.6rem 2.5rem;/*文字周りの肉付け*/
}
/*==電話番号の前にアイコンを表示する==*/
.telicon_insert{
    display: inline-flex;/*図を文字同じように扱い、文字と横並びにする*/
    align-items:center; /* 文字と図形の縦方向の真ん中を揃える(上下方向の中央揃え) */
    gap: 8px; /* 文字と図形の間のすき間 */
}
.telicon_insert::before {/* 文字の前の図形 */
  content: "";
  width: 25px;         /* 図形の横幅 */
  height: 25px;        /* 図形の縦幅 */
  background-image: url("../images/icon_tel_on.png");/*表示する図形の居場所*/
  background-size: contain;/*指定した表示エリアのサイズに合わせて拡大縮小する*/
  background-repeat: no-repeat;
}

/*==ページナビゲーション(今の居場所)の表示==*/
.navigation{
    display:flex;/*子要素を横並びにする*/
    justify-content: left;/*左寄せ*/
    gap: 0.5rem;/*アイテム同士の間隔*/
    font-size: 1rem;/*文字のサイズ*/
    padding-left: 0.5rem;
}
.navigation a{
    text-decoration: underline;/*リンクに下線を表示する*/
}

/*==メニューの表の書式==*/
.menu_data {
    width: 100%;
    max-width: 540px;/*表の最大幅*/
    margin: auto;
    padding: 0 0.5rem;/*表の空白 上下 左右*/
    border-collapse: collapse; /* 枠線の隙間をなくしてスッキリさせる */
}
.menu_data th,
.menu_data td {
    font-weight: normal;
    padding-top: 0.6rem;      /* 上の余白 */
    padding-bottom: 0.6rem;   /* 下の余白 */
}
.menu_data th{
    text-align: left;
    padding-left: 2rem;
}
.menu_data td {
    width: 30%;
    padding-right: 2rem;
    text-align: right;
}

/*==メニュー写真をグリッドの中に入れて並べる==*/
.grid {
    display: grid;
    gap: 1rem 1.2rem;/*行間、列間*/
    grid-template-columns: repeat(2, 1fr);
    text-align: center;
    padding: 0 20px;/*領域全体の左右にマージン*/
}
.menu_img img{/*グリッド内に入れる画像*/
    aspect-ratio: 8/5;/*アスペクト比*/
    object-fit: cover;
    border-radius: 10px;/*画像の角の丸み*/
    margin-top: 1.5rem;/*画像の上のマージン*/
}
.menu_img p{/*グリッド内の画像の下に表示する文字*/
    font-size: 0.8rem;/*メニュー名を小さめに表示*/
    margin-top: 0;
    margin-bottom: 1.3rem;
}

/*==文字の左寄せ==*/
.left{
    padding-left: 2rem;
    text-align: left;
}

/*==項目のイメージ画像(バナー)の設定==*/
.bunner img{
    max-width: 93%;
    height: auto;
    aspect-ratio: 8/5;/*アスペクト比*/
    object-fit: cover;
    border-radius: 10px;/*画像の角の丸み*/
}

/*==ページフッター==*/
.page-footer {
    background-size: cover;/*フッター部分は画面いっぱいに広げる*/
    background-position: center;
    padding-top: 1rem;
}

/*==コピーライト==*/
.copyright {
    background-color: rgb(00, 00, 66);
    text-align: center;
    padding: 2rem 0;
    margin-top: 2rem;
    color: #fff;
}

/*==ページトップへ戻るリンクボタン==*/
.return_pagetop {/*〇を描く*/
    height: 50px;
    width: 50px;
    position: fixed;
    right: 30px;
    bottom: 30px;
    background: #fff;
    border: solid 2px #000;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
}
.return_pagetop__arrow {/*〇の中に↑を描く*/
    height: 12px;
    width: 12px;
    border-top: 4px solid #000;
    border-right: 4px solid #000;
    transform: translateY(20%) rotate(-45deg);
}

/*メディアクエリ*/
.pc-only {
    display: none;/*モバイルではPC用改行を隠す*/
}
.sp-only {
    display: inline;/*モバイル用改行を表示*/
}

/*==パソコンで表示した時の書式==*/
@media (min-width: 750px) {/*表示サイズがこのpxを超えたら*/
    
    /*基準の文字の大きさを変える*/
    html {
        font-size: 110%;
    }

    /* キャッチコピーの文字の大きさを変える */
    .catchcopy {
        font-size: 1.6rem;
    }

    /*営業案内の表(線)を少し横に長くする*/
    .info_data {
        max-width: 650px;
    }
    .info_data th {
        padding: 1.5rem 1.5rem;/*上下 左右のスペース*/
    }


    .telnumber{
        padding: 0.6rem 13rem;/*文字周りの肉付け*/
    }
    /*パソコンの画面の時は電話をかける機能はOFF*/
    a[href*="tel:"] {
        pointer-events: none;
        cursor: default;
        text-decoration: none;
    }
    .telicon_insert::before {/* 文字の前の図 */
        display: none;/*電話マークを消す*/
    }

    /*コピーライトの帯を太くする*/
    .copyright {
        padding: 3rem 0;
    }

    /*左寄せの文字の位置を調整する*/
    .left{
        padding-left: 8.5rem;
        text-align: left;
    }

    /*改行位置のコントロール*/
    .pc-only {
        display: inline;/*PC用改行を表示*/
    }
    .sp-only {
        display: none;/*モバイル用改行を隠す*/
    }


}