/*
Theme Name: Nanas Koubou
Theme URI: 
Author: Nana's工房
Author URI: 
Description: 
Requires at least: 6.0
Tested up to: 6.4.3
Requires PHP: 5.7
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: nanaskoubou
Tags: 
*/

/*****************************
ブロックの登録スタイル
******************************/

/* core/button 横幅統一 */
.is-style-unified-width a {
    width: 300px;
}

/*****************************
ヘッダー
******************************/

/* ロゴとメニューが２行になる場合の行間隔を詰める */
.hy-header-menu {
    row-gap: 10px;
}

/* モバイルメニューを開いた際のパディング */
.wp-block-navigation__responsive-container.is-menu-open {
    padding: 20px;
}

/* サブメニュー */
.wp-block-navigation__submenu-container {
    font-size: var(--wp--preset--font-size--x-small);
    /* padding: 0 20px!important; */
    white-space: nowrap;
}
@media screen and (max-width: 599px) { /* メニューブロックのブレークポイント */
    .wp-block-navigation__submenu-container {
        font-size: var(--wp--preset--font-size--small);
        padding: 0 30px!important;
    }
    .wp-block-navigation__submenu-container ul {
        gap: 20px;
    }
}

/* カバーの高さ設定 */
.hy-header-cover {
    min-height: clamp(200px, 30vw, 300px);
}

/*****************************
フッター
******************************/

.hy-footer-caution {
    background-color: rgba(0, 0, 0, 0.5);
}

.hy-page-footer {
    margin-top: 0;
}

@media screen and (max-width: 599px) { /* メニューブロックのブレークポイント */
    .wp-block-navigation {
        --navigation-layout-direction: column;
    }
}

/*****************************
各ページ
******************************/

/* 画面幅別の表示・非表示 */
.hy-only-m,
.hy-only-m img {
    display: none;
    margin: 0;
}

@media screen and (max-width: 599px) { /* メニューブロックのブレークポイント */
    .hy-only-pc,
    .hy-only-pc img {
        display: none;
    }
    .hy-only-m,
    .hy-only-m img {
        display: block;
    }
}

/* 「横並び」ブロック用 */
/* モバイルでは縦並びに変更 */
/* （画像が小さい場合カラムブロックでは並べにくいため「横並び」使用」） */
@media screen and (max-width: 599px) { /* メニューブロックのブレークポイント */
    .hy-flex-responsive {
        flex-direction: column;
    }
}

/* カラムブロック用 */
/* 縦並び時に前後位置を入れ替えたい時に */
@media screen and (max-width: 781px) { /* カラムブロックのブレークポイント */
    .hy-cols-reverse {
        flex-direction: column-reverse;
    }
}

/* H2見出し */
.hy-h2 {
    border-bottom: 5px solid var(--wp--preset--color--contrast);
    padding-bottom: 5px;
    position: relative;
    width: 100%;
}
.hy-h2::after {
    background-color: var(--wp--preset--color--accent);
    content: '';
    height: 5px;
    left: 0;
    position: absolute;
    top: 100%;
    width: clamp(30px, 10vw, 70px);
}

/*****************************
トップページ
******************************/

/* モバイルで背景なしにするためCSSで指定 */
.hy-top-header {
    background-color: var(--wp--preset--color--contrast);
}
@media screen and (max-width: 599px) { /* メニューブロックのブレークポイント */
    body.home main {
        position: relative;
    }
    .hy-top-header {
        background: none;
        position: absolute;
        right: 44px;
        top: 0;
        z-index: 1000;
    }
    /* モバイルのみメニューを左揃えに */
    .hy-top-header .wp-block-navigation.items-justified-center {
        --navigation-layout-justification-setting: left;
        --navigation-layout-justify: left;
    }
}

.hy-hero {
    height: clamp(400px, 100vw, 800px);
}

.hy-hero-logo {
    width: clamp(200px, 40vw, 400px);
}

/* 商品紹介 */
.hy-top-cols-products figure {
    margin-top: var(--wp--preset--spacing--40);
}

/*****************************
Nana's工房について
******************************/

.hy-about-table tr td:first-of-type {
    font-weight: 700;
    padding-right: 5px;
    vertical-align: top;
    width: 100px;
    white-space: nowrap;
}

/*****************************
商品一覧
******************************/

.hy-grid-group > div > .wp-block-buttons {
    margin-top: 0;
}

@media screen and (min-width: 600px) {  /* メニューブロックのブレークポイント */
    .hy-grid-group {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--wp--preset--spacing--50);
    }
    .hy-grid-group > div {
        display: flex; /* ボタンを下揃えにするため */
        flex-direction: column;
        margin-top: 0;
        width: 100%;
    }
    .hy-grid-group > div > .wp-block-buttons {
        margin-top: auto;
    }
}
@media screen and (min-width: 782px) { /* カラムブロックのブレークポイント */
    .hy-grid-group {
        grid-template-columns: repeat(3, 1fr);
    }
}