@charset "UTF-8";

/* 変数
----------------------------- */
:root {
    --color1: #432;
    --color2: #0bd;
}


/* 共通部分
----------------------------- */
html {
    font-size: 100%;
}
body {
    font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "BIZ UDPGothic", sans-serif;
    line-height: 1.7;
    color: var(--color1);
}
a {
    text-decoration: none;
}
img {
    max-width: 100%;
}
rt {
    font-size: 0.4em;
}
/* レイアウト */
.wrapper {
    max-width: 1120px;
    margin: auto;
    padding: 0 1.5rem;
}
.align-center {
    text-align: center;
}


/* 見出し */
.font-english {
    font-family: 'Philosopher', sans-serif;
    font-weight: normal;
}
.page-title,
.heading-large,
.heading-medium {
    font-size: 3rem;
    text-align: center;
}
.page-title {
    margin-top: 2rem;
    line-height: 1.4;
}
.heading-large {
    margin-bottom: 1rem;
}

/* ボタン */
.btn {
    display: inline-block;
    font-size: 1.5rem;
    background-color: var(--color2);
    color: #fff;
    border-radius: 8px;
    padding: .75rem 1.5rem;
    transition: .5s;
}
.btn:hover {
    background-color: #0090aa;
}

/* iframe */
iframe {
    width: 100%;
}

/* ヘッダー
---------------------------------- */
.page-header {
    padding-top: .5rem;
}
.logo {
    width: 210px;
}
.main-nav {
    display: flex;
    justify-content: center;
    gap: 2.5rem;
    font-size: 1.5rem;
    list-style: none;
    /* ↓ヘッダーメニューにアイコンを付けた際、
    縮小字に表示領域を越えた際の下部にバーが表示されることを防ぐための折り返し */
    flex-wrap: wrap;
}
.main-nav a {
    color: var(--color1);
}
.main-nav a:hover {
    color: var(--color2);
}
.main-nav li a {
    display: flex;
    align-items: center;
}

.main-nav li a img {
    width: 1em;
}
/* ↓.main-nav li a img:hoverの場合では、
画像のみを指定しているのでホバー時の色の変化は文字と画像で分離してしまう。 */
.main-nav a:hover {
filter: brightness(0) saturate(100%) invert(54%) sepia(55%) saturate(6318%) hue-rotate(161deg) brightness(88%) contrast(101%);
}
/* フッター
---------------------------------- */
.page-footer {
    background-image: url(../images/footer-s.webp);
    background-size: cover;
    background-position: center;
    padding-top: 12rem;
}
.info {
    width: 100%;
    max-width: 544px;
    margin: auto;
    padding: 0 1.5rem;
    border-spacing: 0;
}

.info th, 
.info td {
    border-bottom: 1px solid #c9c2bc;
}
.info th {  
    text-align: left;
    font-weight: normal;
    padding: 1rem;
}
.info td {
    padding: 1rem 0;
}
.copyright {
    background-color: var(--color1);
    text-align: center;
    padding: 2rem 0;
    margin-top: 6rem;
    color: #fff;
}

/* ヘッダーカバー画像
---------------------------------------------- */
.cover {
    background-size: cover;
    background-position: center bottom;
    height: 800px;
}
.sub-cover {
    background-size: cover;
    background-position: center bottom;
    height: 528px;
    margin-bottom: 4rem;
}

/* HOME
--------------------------------- */
.cover-home {
    background-image: url(../images/cover-home-s.webp);
}
.about {
    max-width: 736px;
    padding: 0 1.5rem;
    margin: 3rem auto 0;
}
.about p {
    margin-bottom: 3rem;
}

/* NEWS 
----------------------------------*/
.cover-news {
    background-image: url(../images/cover-news-s.webp);
}
.paw {
    font-size: 2rem;
    position: realitive;
    color: red;
    top: 30px;
    left: 40px;
}
.paw::before {
    font-size: 3rem;
    content: "*";
    position: absolute;
    color: green;
    top: -15px;
    left: 20px;
}
.paw::after {
    font-size: 1.5rem;
    content: "*";
    position: absolute;
    color: blue;
    top: 30px;
    left: 25px;
}

/* ↓疑似要素失敗 */
/* #bef::before {
    content: "" ;
    content: url(images/cloud.png);
    content: "★";
} */

/* 画像透過と文字表示 */
.img-text {
    transition-property: opacity;
    transition-duration: 0.5s;
}
.img-text::before {
    content: "";
}
.img-text:hover {
    opacity: 0.7;
}

/* 記事部分 */
.post {
    margin-bottom: 3rem;
}
.post-title {
    font-weight: normal;
    margin-bottom: 1.25rem;
}
.post-info {
    display: flex;
    gap: 1rem;
    margin-bottom: 2rem;
}
.post-cat {
    display: flex;
    gap: .5rem;
    list-style: none;
}
.post-cat a {
    color: var(--color1);
    background-color: #faf7f0;
    border-radius: 8px;
    font-size: .875rem;
    padding: .5rem .75rem;
}
.post-date {
    font-size: .875rem;
}
.post-thumbnail {
    border-radius: 16px;
    margin-bottom: 1.5rem;
    width: 100%;
    /* ↓youtube動画の埋め込みのサイズに倣ったサイズ */
    aspect-ratio: 16/9;
    /* width: 450px;
    height: 300px; ←余白ができるので× */
    object-fit: cover;
    object-position: center;
    /* ↓余白を無くす */
    display: block;
}
.post p {
    margin-bottom: 1.5rem;
    line-height: 2;
}



/* サイドバー */
.side-menu {
    list-style: none;
    text-align: center;
    margin-bottom: 4rem;
}
.side-menu li {
    border-bottom: 1px solid #c9c2bc;
}
.side-menu a {
    color: var(--color1);
    display: block;
    padding: 1rem;
}
.side-menu a:hover {
    color: var(--color2);
}

/* MENU
--------------------------------- */
.cover-menu {
    background-image: url(../images/cover-menu-s.webp);
}
.grid {
    display: grid;
    gap: 2rem 1.5rem;
    grid-template-columns: repeat(2, 1fr);
    text-align: center;
}
.item img {
    aspect-ratio: 1/1;
    object-fit: cover;
    border-radius: 16px;
}
.item p {
    font-size: .875rem;
}
/* .grid select::picker(select) {
  border-color: #cf256d;
  border-radius: 8px;
  margin: 8px 0;
  box-shadow: 4px 4px #ff67b3;
  transition: scale 0.2s;
}
.grid select::picker(select):hover {
  scale: 1.05;
} */

/* CONTACT
--------------------------------- */
.cover-contact {
    background-image: url(../images/cover-contact-s.webp);
}

/* HIRING
--------------------------------- */
.cover-hiring {
background-image: url(../images/cover-hiring-s.webp);
}
label, .cbt {
    display: block;
    width: auto;
    padding-top: 8px;
    padding-bottom: 4px;
}   
input[type="text"], #email, #message {
    border: #e3ac7c solid 1.5px;
    border-radius: 8px;
    padding: 6px;
}
input[type="text"], #email {
    width: 18em;   
}
input[type="checkbox"] {
    margin: 0 .5rem 0 1rem;
}
input[type="submit"], input[type="button"]{
    border-radius: 8px;
    padding: 2px 5px;
    cursor: pointer;
    transition: .3s;
}
input[type="submit"]:hover{
    background-color: #ffe6ad;
}
input[type="submit"]{
    background-color: #ff983d;
}
input[type="button"]{
    background-color:   #85a2ff;
}
input[type="button"]:hover {
    background-color:   #c5d3ff;
}
#message {
    height: 6rem;
    width: 22rem;
}
.hiringh2 {
    margin-bottom: 2rem;
}



/* 店舗情報 */
.location {
    margin-bottom: 3.5rem;
}
.location-info {
    margin-bottom: 2rem;
}
.location-info .info {
    padding: 0;
}

/* お問い合わせ */
.email {
    max-width: 916px;
    background-color: #faf7f0;
    border-radius: 48px;
    padding: 1.5rem 2.5rem 2.5rem;
    margin: 0 auto 2rem;
}
.email p {
    margin: 1rem 0 2rem;
}

/* SNS */
.sns-item {
    margin-bottom: 2rem;
}
.sns-item .heading-medium {
    margin-bottom: .5rem;
}
.sns-youtube {
    aspect-ratio: 16/9;
}
.sns-youtube iframe {
    height: 100%;
}

/* アニメーション */
.fuwafuwa {
  width: 4.5rem;
  height: 3rem;
  margin: 30px .5rem;
}
.fuwafuwa2 {
  width: 4rem;
  height: 4rem;
  margin: 10px .5rem;
}
.fuwafuwa, .fuwafuwa2 {
  animation: fuwafuwa 3s ease-in-out infinite alternate;
  display: inline-block;
  transition: 1.5s ease-in-out;
}
@keyframes fuwafuwa {
  0% {
    transform:translate(0, 0) rotate(-7deg);
  }
  50% {
    transform:translate(0, -7px) rotate(0deg);
  }
  100% {
    transform:translate(0, 0) rotate(7deg);
  }
}

/* PHP
--------------------------------- */
/* .php_h {
    margin-bottom: 6rem;
    background-color: rgb(255, 253, 247);
} */
.php_b {
    margin-top: 3rem;
    margin-left: 2rem;
    background-color: rgb(255, 253, 247);
}
.divform {
    margin-left: 8rem;
}
/* .php_b div {
    padding-top: 3rem;
    padding-left: 3rem;
    width: 800px;
    background-color: rgb(253, 244, 218);
} */
.caution {
    color: white;
    background-color: #000000;
}
.blue {
    color: blue;
}
.my_name {
    color:red;
}
.ipt {
    background-color: rgb(255, 255, 255);
    border-bottom: 2px solid;
}
.test {
    background-color: aqua;
}
.fm {
    margin-top: 2px;
}

p .p_s {
    font-size: 0.5em;
}
.capt_php {
    font-size: 1.5rem;
}

/* kensaku.php
---------------------------*/
#bcbtn {
    text-align: right;
    padding-top: 3rem;
}
#bcbtn #bc {
    align-items: right;
    margin-right: 5rem;
}
.hl {
    font: blue;
    border-bottom: 2px black;
}


/* 罫線を引く */
table, th, td{
    border: 1px solid black;
}

/* テーブル全体を中央に配置 */
table {
    margin: 0 auto; 
    width: 100%;
    max-width: 800px;  /* 好きな最大幅に調整 */
    border-collapse: collapse;
}

form {
    margin: 0 auto;
    width: 100%;
    /* text-align: center; */
}

/* セルの中央揃え */
th, td {
    text-align: center;
    padding: 8px;
}

thead {
    background-color: rgb(200, 200, 255);
}

/* 偶数行に柔らかい背景色 */
tbody tr:nth-child(even) {
    background-color: #f7f7ff;
}

caption {
    font-size: 3rem;
    background-color: #ffe2b6;
    padding: 3rem auto;
    margin: 1rem auto;
}

.kyotyo {
    border-bottom: 4px, thick, rgb(244, 133, 43);
}

.inf {
    margin: 2rem;

    }
.inf p {
    text-align: center;
}
.bc {
    align-items: center;
}


/* デスクトップ版
--------------------------------- */
@media (min-width: 800px) {
    /* 見出し */
    .page-title {
        font-size: 5rem;
    }
    .heading-large {
        font-size: 4rem;
    }
    .post-title {
        font-size: 2rem;
    }

    /* ヘッダー */
    .page-header {
        display: flex;
        justify-content: space-between;
        padding-top: 1.5rem;
        }
    .main-nav {
        font-size: 2rem;
    }

    /* ヘッダーカバー画像 */
    .sub-cover {
        height: 400px;
        margin-bottom: 6rem;
    }

    /* HOME */
    .cover-home {
        background-image: url(../images/cover-home-l.webp);
    }
    .about {
        margin: 4rem auto 0;
    }

    /* NEWS */  
    .cover-news {
        background-image: url(../images/cover-news-l.webp);
    }
    .news-contents {
        display: flex;
        justify-content: space-between;
    }
    /* ↓.p245~p.247おまけ、(widthの値、.ad、order) */
    .post {
        /* width: 70%; */
        width: 60%;
        order: 2;
    }
    .sidebar {
        width: 22%;
        order: 3;
        /* ↓指定位置に来たら固定（top:0=上部余白無し) */
        position: sticky;
        top: 0;
        align-self: flex-start;
    }
    .ad {
        order: 1;
    }
    /* ↑ここまで */
    .sidebar .heading-medium {
        line-height: 1;
        margin-bottom: 1rem;
    }
    
    /* MENU */
    .cover-menu {
        background-image: url(../images/cover-menu-l.webp);
    }
    .grid {
        gap: 3rem 2rem;
        grid-template-columns: repeat(3, 1fr);
    }
    .item img {
    margin-bottom: .5ren;
    }
    .item p {
    font-size: 1rem;
    }
    .item-big {
        grid-column: 2/4;
        grid-row: 1/3;
    }
    .item-big img {
        height: 94.5%;
        width: 100%;
    }
    /* ↓おまけ */
    /* .item-big2 {
        grid-column: 2/4;
        grid-row: 3/5;
    }
    .item-big2 img {
        height: 94.5%;
        width: 100%;
    } */
    /* ↑ */

    /* CONTACT */
    .cover-contact {
        background-image: url(../images/cover-contact-l.webp);
    }
    .location {
        display: flex;
        gap: 2rem;
    }
    .location-info {
        width: 32%;
    }
    .location-info .info th {
        padding-left: 2rem;

    }
    .location-map {
        width: 64%;
    }
    .email {
        margin-bottom: 4rem;
    }
    .sns {
        display: flex;
        align-items: flex-start;
        gap: 2rem;
        margin-bottom: 0;
    }
    .sns-item {
        flex: 1;
    }

    /* HIRING */
    .cover-hiring {
        background-image: url(../images/cover-hiring-l.webp);
    }
    /* フッター */
    .page-footer {
        background-image: url(../images/footer-l.webp);
        padding-top: 12rem;
    }
    .info th {
        padding-left: 2.5rem;
    }
}



    /* おまけ */
/* タブレット版（仮） */
/* @media (min-width: 700px) {
    body {
        background-color: aquamarine;
    }
} */
/* デスクトップ版（仮） */
/* @media (min-width: 800px) {
    body {
        background-color: bisque;
    }
} */