@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
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/



/* =========================================================
   ななこの絵本時間
   共通カラー
   ========================================================= */

:root {
    --kids-brown: #51382e;
    --kids-nav-brown: #563d32;
    --kids-text: #6d5b53;
    --kids-muted: #797571;

    --kids-pink: #f3b9c0;
    --kids-pink-bg: #fff1f3;

    --kids-yellow: #edc75d;
    --kids-yellow-bg: #fff8df;

    --kids-green: #9fc991;
    --kids-green-bg: #f0f8ec;

    --kids-blue: #9fd4e8;
    --kids-blue-bg: #eef8fc;

    --kids-purple: #c8b5e3;
    --kids-purple-bg: #f5f0fb;

    --kids-orange: #efb48d;
    --kids-orange-bg: #fff2e9;

    --kids-card-border: #eee5dd;

    --kids-nav-hover: #e6767d;
    --kids-nav-hover-bg: #fff5f5;
}


/* =========================================================
   年齢別UI
   TOPカード・記事上部ナビ共通
   ========================================================= */


/* ---------------------------------------------------------
   年齢ごとの色・アイコン
   TOP・記事上部ナビ・カテゴリーページで共通使用
   --------------------------------------------------------- */

.kids-age-card--0,
.kids-age-nav__links a:nth-child(1),
body.category-age0 {
    --kids-age-color: #ef727e;
    --kids-age-bg: var(--kids-pink-bg);
    --kids-age-icon: "👶";
}

.kids-age-card--1,
.kids-age-nav__links a:nth-child(2),
body.category-age1 {
    --kids-age-color: #e5a51b;
    --kids-age-bg: var(--kids-yellow-bg);
    --kids-age-icon: "😊";
}

.kids-age-card--2,
.kids-age-nav__links a:nth-child(3),
body.category-age2 {
    --kids-age-color: #4c9e4c;
    --kids-age-bg: var(--kids-green-bg);
    --kids-age-icon: "🌱";
}

.kids-age-card--3,
.kids-age-nav__links a:nth-child(4),
body.category-age3 {
    --kids-age-color: #3799c4;
    --kids-age-bg: var(--kids-blue-bg);
    --kids-age-icon: "📖";
}

.kids-age-card--4,
.kids-age-nav__links a:nth-child(5),
body.category-age4 {
    --kids-age-color: #8364b7;
    --kids-age-bg: var(--kids-purple-bg);
    --kids-age-icon: "💜";
}

.kids-age-card--5,
.kids-age-nav__links a:nth-child(6),
body.category-age5 {
    --kids-age-color: #df7f48;
    --kids-age-bg: var(--kids-orange-bg);
    --kids-age-icon: "💡";
}

.kids-age-card--6,
.kids-age-nav__links a:nth-child(7),
body.category-age6 {
    --kids-age-color: #9b7456;
    --kids-age-bg: #f6f0e9;
    --kids-age-icon: "🎒";
}


/* ---------------------------------------------------------
   年齢カードの共通外観
   --------------------------------------------------------- */

.kids-age-card,
.kids-age-nav__links a {
    background: #ffffff;

    border: 1px solid var(--kids-card-border);

    box-shadow:
        0 3px 10px rgba(103, 76, 59, 0.035);

    text-decoration: none !important;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        border-color 0.2s ease;
}


/* ---------------------------------------------------------
   年齢アイコンの共通外観
   --------------------------------------------------------- */

.kids-age-card__icon,
.kids-age-nav__links a::before {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    background: var(--kids-age-bg);

    border-radius: 50%;

    line-height: 1;
}


/* TOPはHTML内の絵文字、
   記事上部ナビはCSSで絵文字を表示 */

.kids-age-nav__links a::before {
    content: var(--kids-age-icon);
}


/* ---------------------------------------------------------
   年齢カラー
   --------------------------------------------------------- */

.kids-age-card__age,
.kids-age-card__arrow,
.kids-age-nav__links a {
    color: var(--kids-age-color);
}


/* ---------------------------------------------------------
   マウス・キーボード操作
   --------------------------------------------------------- */

@media (hover: hover) {

    .kids-age-card:hover,
    .kids-age-nav__links a:hover {
        border-color: #e7d9cf;

        box-shadow:
            0 7px 18px rgba(103, 76, 59, 0.08);
    }

    .kids-age-card:hover {
        transform: translateY(-3px);
    }

    .kids-age-nav__links a:hover {
        transform: translateY(-2px);
    }
}

.kids-age-card:focus-visible,
.kids-age-nav__links a:focus-visible {
    outline: 2px solid var(--kids-brown);
    outline-offset: 3px;
}


/* =========================================================
   年齢別カテゴリーページ
   アーカイブタイトル
   ========================================================= */

body:is(
    .category-age0,
    .category-age1,
    .category-age2,
    .category-age3,
    .category-age4,
    .category-age5,
    .category-age6
)
#archive-title {
    position: relative;

    display: flex;
    align-items: center;

    gap: 0.7rem;

    width: 100%;

    margin: 1rem 0 1.6rem;
    padding: 0 0 0.8rem;

    color: var(--kids-brown) !important;

    background: transparent !important;

    border: 0 !important;
    border-bottom: 1px solid #f1e7df !important;
    border-radius: 0 !important;

    box-shadow: none !important;

    font-weight: 700;
    letter-spacing: 0.035em;
}


/* ---------------------------------------------------------
   年齢アイコン
   TOP・記事上部ナビと共通
   --------------------------------------------------------- */

body:is(
    .category-age0,
    .category-age1,
    .category-age2,
    .category-age3,
    .category-age4,
    .category-age5,
    .category-age6
)
#archive-title
.fa-folder-open {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    width: 44px;
    height: 44px;

    margin: 0;

    color: transparent;

    background: var(--kids-age-bg);

    border-radius: 50%;

    font-size: 0;
}


/* Cocoon標準のフォルダーアイコンを
   年齢ごとの絵文字に変更 */

body:is(
    .category-age0,
    .category-age1,
    .category-age2,
    .category-age3,
    .category-age4,
    .category-age5,
    .category-age6
)
#archive-title
.fa-folder-open::before {
    content: var(--kids-age-icon);

    color: initial;

    font-family:
        "Apple Color Emoji",
        "Segoe UI Emoji",
        "Noto Color Emoji",
        sans-serif;

    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1;
}


/* ---------------------------------------------------------
   年齢カラーのアクセントライン
   --------------------------------------------------------- */

body:is(
    .category-age0,
    .category-age1,
    .category-age2,
    .category-age3,
    .category-age4,
    .category-age5,
    .category-age6
)
#archive-title::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: -1px;

    width: 92px;
    height: 3px;

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

    border-radius: 999px;

    opacity: 0.7;
}


/* ---------------------------------------------------------
   スマホ
   --------------------------------------------------------- */

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

    body:is(
        .category-age0,
        .category-age1,
        .category-age2,
        .category-age3,
        .category-age4,
        .category-age5,
        .category-age6
    )
    #archive-title {
        gap: 0.55rem;

        margin-bottom: 1.3rem;
        padding-bottom: 0.7rem;

        font-size: 1.15rem;
    }

    body:is(
        .category-age0,
        .category-age1,
        .category-age2,
        .category-age3,
        .category-age4,
        .category-age5,
        .category-age6
    )
    #archive-title
    .fa-folder-open {
        width: 38px;
        height: 38px;
    }

    body:is(
        .category-age0,
        .category-age1,
        .category-age2,
        .category-age3,
        .category-age4,
        .category-age5,
        .category-age6
    )
    #archive-title
    .fa-folder-open::before {
        font-size: 1.08rem;
    }

    body:is(
        .category-age0,
        .category-age1,
        .category-age2,
        .category-age3,
        .category-age4,
        .category-age5,
        .category-age6
    )
    #archive-title::after {
        width: 72px;
    }
}


/* =========================================================
   絵本テーマ別ページ
   アーカイブタイトル
   ========================================================= */


/* ---------------------------------------------------------
   テーマごとの色・アイコン
   --------------------------------------------------------- */

/* 赤ちゃん絵本 */
body.tax-book_theme.term-baby-books {
    --kids-theme-color: #ef727e;
    --kids-theme-bg: var(--kids-pink-bg);
    --kids-theme-icon: "👶";
}


/* ことば・リズム */
body.tax-book_theme.term-words-rhythm {
    --kids-theme-color: #e5a51b;
    --kids-theme-bg: var(--kids-yellow-bg);
    --kids-theme-icon: "🎵";
}


/* 乗り物・しごと */
body.tax-book_theme.term-vehicles-jobs {
    --kids-theme-color: #3799c4;
    --kids-theme-bg: var(--kids-blue-bg);
    --kids-theme-icon: "🚂";
}


/* 知育・あそび */
body.tax-book_theme.term-learning-play {
    --kids-theme-color: #8364b7;
    --kids-theme-bg: var(--kids-purple-bg);
    --kids-theme-icon: "💡";
}


/* 家族・暮らし */
body.tax-book_theme.term-family-life {
    --kids-theme-color: #4c9e4c;
    --kids-theme-bg: var(--kids-green-bg);
    --kids-theme-icon: "🏠";
}


/* こころ・成長 */
body.tax-book_theme.term-heart-growth {
    --kids-theme-color: #df7f48;
    --kids-theme-bg: var(--kids-orange-bg);
    --kids-theme-icon: "🌱";
}


/* =========================================================
   テーマ別ページ
   H1共通デザイン
   ========================================================= */

body.tax-book_theme
#archive-title {
    position: relative;

    display: flex;
    align-items: center;

    gap: 0.7rem;

    width: 100%;

    margin: 1rem 0 1.6rem;
    padding: 0 0 0.8rem;

    color: var(--kids-brown) !important;

    background: transparent !important;

    border: 0 !important;
    border-bottom: 1px solid #f1e7df !important;
    border-radius: 0 !important;

    box-shadow: none !important;

    font-weight: 700;
    letter-spacing: 0.035em;
}


/* ---------------------------------------------------------
   丸いテーマアイコン
   --------------------------------------------------------- */

body.tax-book_theme
#archive-title
.fa-folder-open {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    width: 44px;
    height: 44px;

    margin: 0;

    color: transparent;

    background: var(--kids-theme-bg);

    border-radius: 50%;

    font-size: 0;
}


/* Cocoon標準フォルダーアイコンを絵文字へ変更 */

body.tax-book_theme
#archive-title
.fa-folder-open::before {
    content: var(--kids-theme-icon);

    color: initial;

    font-family:
        "Apple Color Emoji",
        "Segoe UI Emoji",
        "Noto Color Emoji",
        sans-serif;

    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1;
}


/* ---------------------------------------------------------
   テーマカラーのアクセントライン
   --------------------------------------------------------- */

body.tax-book_theme
#archive-title::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: -1px;

    width: 92px;
    height: 3px;

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

    border-radius: 999px;

    opacity: 0.7;
}


/* ---------------------------------------------------------
   スマホ
   --------------------------------------------------------- */

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

    body.tax-book_theme
    #archive-title {
        gap: 0.55rem;

        margin-bottom: 1.3rem;
        padding-bottom: 0.7rem;

        font-size: 1.15rem;
    }


    body.tax-book_theme
    #archive-title
    .fa-folder-open {
        width: 38px;
        height: 38px;
    }


    body.tax-book_theme
    #archive-title
    .fa-folder-open::before {
        font-size: 1.08rem;
    }


    body.tax-book_theme
    #archive-title::after {
        width: 72px;
    }
}


/* =========================================================
   年齢別おすすめナビ
   記事上部ウィジェット用
   ========================================================= */

.kids-age-nav {
    width: 95%;
    max-width: 1050px;

    margin: 1.2rem auto 1.8rem;

    color: var(--kids-text);
    font-family: inherit;
}


/* ---------------------------------------------------------
   見出し
   --------------------------------------------------------- */

.kids-age-nav__heading {
    position: relative;

    display: flex;
    align-items: center;
    gap: 0.5rem;

    margin: 0 0 0.85rem;
    padding: 0 0 0.48rem;
}

.kids-age-nav__icon {
    flex: 0 0 auto;

    width: 1.8rem;
    height: 1.8rem;

    object-fit: contain;
}

.kids-age-nav__title {
    color: var(--kids-brown);

    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.04em;
}

.kids-age-nav__heading::after {
    content: "";

    position: absolute;

    left: 2.25rem;
    bottom: 0;

    width: 145px;
    height: 3px;

    background: var(--kids-pink);

    border-radius: 999px;
}


/* ---------------------------------------------------------
   年齢ボタン一覧
   --------------------------------------------------------- */

.kids-age-nav__links {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));

    gap: 0.55rem;

    padding: 0;

    background: transparent;
    border: 0;
    box-shadow: none;
}


/* ---------------------------------------------------------
   横長の年齢ボタン
   --------------------------------------------------------- */

.kids-age-nav__links a {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 0.45rem;

    min-width: 0;
    min-height: 58px;

    padding: 0.48rem 0.4rem;

    border-radius: 14px;

    font-size: 0.86rem;
    font-weight: 700;
    line-height: 1.2;

    text-align: center;
}


/* TOPより小さな丸アイコン */

.kids-age-nav__links a::before {
    width: 38px;
    height: 38px;

    font-size: 1.05rem;
}


/* テーマカード：リンク化 */

.kids-theme-card {
    color: inherit;
    text-decoration: none !important;

    box-shadow:
        0 3px 10px rgba(103, 76, 59, 0.035);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        border-color 0.2s ease;
}

.kids-theme-card:focus-visible {
    outline: 2px solid var(--kids-brown);
    outline-offset: 3px;
}

/* ---------------------------------------------------------
   スマホ
   --------------------------------------------------------- */

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

    .kids-age-nav {
        width: calc(100% - 24px);

        margin-top: 1rem;
        margin-bottom: 1.5rem;
    }

    .kids-age-nav__heading {
        margin-bottom: 0.75rem;
    }

    .kids-age-nav__icon {
        width: 1.6rem;
        height: 1.6rem;
    }

    .kids-age-nav__title {
        font-size: 0.96rem;
    }

    .kids-age-nav__heading::after {
        left: 2rem;

        width: 125px;
    }


    /* 4列×2段。
       7個目は自然に左側へ配置 */

    .kids-age-nav__links {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;

		gap: 0.45rem;
	}

	.kids-age-nav__links a {
		flex:
			0 0
			calc((100% - 1.35rem) / 4);

		gap: 0.3rem;

		min-width: 0;
		min-height: 50px;

		padding: 0.4rem 0.15rem;

		border-radius: 11px;

		font-size: 0.76rem;
	}
	
    .kids-age-nav__links a::before {
        width: 30px;
        height: 30px;

        font-size: 0.88rem;
    }
}

@media (hover: hover) {

    .kids-theme-card:hover {
        transform: translateY(-2px);

        border-color: #e7d9cf;

        box-shadow:
            0 7px 18px rgba(103, 76, 59, 0.08);
    }
}


/* TOPには専用の年齢カードがあるため、
   ウィジェット側のナビは表示しない */

.home .kids-age-nav {
    display: none;
}


/* =========================================================
   絵本レビュー共通
   Amazon表紙画像
   ========================================================= */

.kids-book-cover-amazon {
    margin: 1.5rem auto 2rem;

    text-align: center;
}

.kids-book-cover-amazon__label {
    margin: 0.4rem 0 0;

    color: #918c87;

    font-size: 0.75rem;
    line-height: 1.5;
    letter-spacing: 0.02em;
}


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


/* ---------------------------------------------------------
   Cocoon標準ヘッダー
   --------------------------------------------------------- */

.header .tagline {
    color: var(--kids-muted);

    font-size: 0.78rem;
    font-weight: 400;
    letter-spacing: 0.08em;
}

.header .site-name-text {
    letter-spacing: 0.05em;
}


/* Cocoon標準の背景色を白に統一 */

#header-container,
#header,
#navi,
#navi .navi-in,
#navi .navi-in > ul,
.hlt-top-menu-wrap {
    background: #ffffff !important;
}

#header-container {
    border-bottom: 1px solid #f1e7df;

    box-shadow:
        0 2px 10px rgba(81, 56, 46, 0.025);
}


/* ---------------------------------------------------------
   PC・タブレット共通
   835px以上
   --------------------------------------------------------- */

@media screen and (min-width: 835px) {

    /* キャッチフレーズのabsolute配置基準 */

    .header-container-in.hlt-top-menu .header {
        position: relative;
    }


    /* サイト名 */

    .header-container-in.hlt-top-menu .site-name-text {
        display: block !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    .header-container-in.hlt-top-menu
    .site-name-text-link {
        position: relative;

        display: flex !important;
        align-items: center;

        color: var(--kids-brown) !important;

        font-weight: 700;
        line-height: 1.2;

        white-space: nowrap;
        text-decoration: none !important;
    }


    /* サイト名横の本アイコン */

    .header-container-in.hlt-top-menu
    .site-name-text-link::before {
        content: "";

        position: absolute;

        left: 0;
        top: 50%;

        background:
            url("https://kids.nanakobooks.com/wp-content/uploads/2025/03/cfa8b3e1fa50b36f2dba85e72feba21e.png")
            center / contain
            no-repeat;
    }


    /* ナビ */

    #navi .navi-in > ul > li {
        background: transparent !important;
    }

    #navi .navi-in > ul > li > a {
        position: relative;

        display: flex;
        align-items: center;
        justify-content: center;

        color: var(--kids-nav-brown) !important;
        background: #ffffff !important;

        font-weight: 600;

        text-decoration: none !important;

        transition:
            color 0.2s ease,
            background-color 0.2s ease;
    }


    /* 現在地にCocoon側の装飾が付いても表示しない */

    #navi .navi-in > ul >
    li:is(.current-menu-item, .current_page_item) > a::after {
        content: none !important;
    }


    /* メニュー説明は使用しない */

    .header-container-in.hlt-top-menu .menu-caption {
        display: none;
    }


    /* ナビアイコン */

    #navi .navi-in > ul > li > a::before {
        display: inline-block;

        color: currentColor;

        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        line-height: 1;
    }

    /* ホーム */
    #navi .navi-in > ul > li:nth-child(1) > a::before {
        content: "\f015";
    }

    /* おすすめ絵本 */
    #navi .navi-in > ul > li:nth-child(2) > a::before {
        content: "\f02d";
    }

    /* テーマで探す */
    #navi .navi-in > ul > li:nth-child(3) > a::before {
        content: "\f1fc";
    }

    /* 年齢別で探す */
    #navi .navi-in > ul > li:nth-child(4) > a::before {
        content: "\f1ae";
    }

    /* このサイトについて */
    #navi .navi-in > ul > li:nth-child(5) > a::before {
        content: "\f05a";
    }
}


/* ---------------------------------------------------------
   PC
   1024px以上
   --------------------------------------------------------- */

@media screen and (min-width: 1024px) {

    .header-container-in.hlt-top-menu {
        display: flex !important;
        align-items: center;

        width: calc(100% - 40px);
        max-width: 1240px;
        min-height: 86px;

        margin: 0 auto;
        padding: 0;
    }


    /* 左側：サイト名 */

    .header-container-in.hlt-top-menu .header {
        flex: 0 0 340px;

        width: 340px;
        height: 86px;

        margin: 0;
        padding: 0 !important;
    }

    .header-container-in.hlt-top-menu .header-in {
        height: 86px !important;
        min-height: 86px !important;

        margin: 0;
        padding: 0 !important;
    }

    .header-container-in.hlt-top-menu .logo,
    .header-container-in.hlt-top-menu .logo-header,
    .header-container-in.hlt-top-menu .logo-text {
        position: relative;

        display: flex !important;
        align-items: center;

        width: 100%;
        height: 86px !important;

        margin: 0 !important;
        padding: 0 !important;

        text-align: left;
    }

    .header-container-in.hlt-top-menu
    .site-name-text-link {
        min-height: 60px;

        margin: 0;
        padding: 0.1rem 0 1.15rem 66px;

        font-size: 1.42rem;
        letter-spacing: 0.055em;
    }

    .header-container-in.hlt-top-menu
    .site-name-text-link::before {
        width: 55px;
        height: 48px;

        transform: translateY(-55%);
    }


    /* キャッチフレーズ */

    .header-container-in.hlt-top-menu .tagline {
        position: absolute;

        display: block !important;

        left: 66px;
        bottom: 14px;

        width: auto;

        margin: 0 !important;
        padding: 0 !important;

        font-size: 0.68rem;
        line-height: 1.2;

        text-align: left;
        white-space: nowrap;
    }


    /* 右側：ナビ */

	.header-container-in.hlt-top-menu .navi {
		flex: 1 1 auto;

		width: auto;
		min-width: 0;

		margin: 0;
		padding: 0;
	}

	.header-container-in.hlt-top-menu .navi-in {
		width: 100%;
		max-width: none;
	}

	.header-container-in.hlt-top-menu
	.navi-in > ul {
		display: grid !important;
		grid-template-columns:
			repeat(5, minmax(0, 1fr));

		align-items: center;

		gap: 0.12rem;

		width: 100%;

		margin: 0;
		padding: 0;
	}

	.header-container-in.hlt-top-menu
	.navi-in > ul > li {
		width: auto;
		min-width: 0;
	}

	.header-container-in.hlt-top-menu
	.navi-in > ul > li > a {
		gap: 0.4rem;

		width: 100%;
		min-height: 60px;

		padding: 0 0.45rem;

		border-radius: 12px;

		font-size: 0.78rem;
		line-height: 1.3;

		white-space: nowrap;
	}

	.header-container-in.hlt-top-menu
	.navi-in > ul > li > a::before {
		font-size: 1rem;
	}
}


/* ---------------------------------------------------------
   スマホ横・タブレット
   835px ～ 1023px
   --------------------------------------------------------- */

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

    /* 上段：サイト名、下段：ナビの2段表示 */

    .header-container-in.hlt-top-menu {
        display: block !important;

        width: 100%;

        margin: 0;
        padding: 0;
    }

    .header-container-in.hlt-top-menu .header,
    .header-container-in.hlt-top-menu .header-in {
        display: block !important;

        width: 100%;
        height: 78px !important;
        min-height: 78px !important;

        margin: 0;
        padding: 0 !important;
    }

    .header-container-in.hlt-top-menu .logo,
    .header-container-in.hlt-top-menu .logo-header,
    .header-container-in.hlt-top-menu .logo-text {
        position: relative;

        display: flex !important;
        align-items: center;
        justify-content: center;

        width: 100%;
        height: 78px !important;

        margin: 0 !important;
        padding: 0 !important;

        text-align: center;
    }

    .header-container-in.hlt-top-menu .site-name-text {
        visibility: visible !important;

        width: auto !important;
        height: auto !important;

        opacity: 1 !important;
    }

    .header-container-in.hlt-top-menu
    .site-name-text-link {
        display: inline-flex !important;

        min-height: 58px;

        margin: 0;
        padding: 0 0 1.05rem 53px;

        font-size: 1.23rem !important;
        letter-spacing: 0.05em;

        visibility: visible !important;
        opacity: 1 !important;
    }

    .header-container-in.hlt-top-menu
    .site-name-text-link::before {
        width: 43px;
        height: 39px;

        transform: translateY(-57%);
    }


    /* キャッチフレーズ */

    .header-container-in.hlt-top-menu .tagline {
        position: absolute;

        display: block !important;

        left: 50%;
        bottom: 8px;

        width: auto;

        margin: 0 !important;
        padding: 0 !important;

        font-size: 0.62rem !important;

        white-space: nowrap;

        transform: translateX(-50%);
    }


    /* 下段：ナビ */

    .header-container-in.hlt-top-menu .navi {
        width: 100%;

        margin: 0;
        padding: 0 12px;

        border-top: 1px solid #f5ece6;
        border-bottom: 1px solid #f1e7df;
    }

    #navi .navi-in > ul {
        display: grid !important;
        grid-template-columns: repeat(5, minmax(0, 1fr));

        gap: 4px;

        width: 100%;
        max-width: 900px;

        margin: 0 auto;
        padding: 5px 0;
    }

    #navi .navi-in > ul > li {
        width: auto !important;
    }

    #navi .navi-in > ul > li > a {
        gap: 0.35rem;

        min-height: 52px;

        padding: 0 0.35rem;

        border-radius: 10px;

        font-size: 0.72rem;
        line-height: 1.3;

        white-space: nowrap;
    }

    #navi .navi-in > ul > li > a::before {
        font-size: 0.95rem;
    }
}


/* ---------------------------------------------------------
   ナビのホバー
   --------------------------------------------------------- */

@media screen and (min-width: 835px) and (hover: hover) {

    #navi .navi-in > ul > li > a:hover {
        color: var(--kids-nav-hover) !important;
        background: var(--kids-nav-hover-bg) !important;
    }
}


/* =========================================================
   TOPページ
   基本レイアウト
   ========================================================= */

.home .content-in {
    display: block;

    max-width: 1360px;

    margin: 0 auto;
}

.home .main {
    width: 100%;
    max-width: none;

    margin: 0;
    padding: 0;

    background: transparent;
    border: 0;
}

.home .sidebar {
    display: none;
}


/* Cocoonの固定ページタイトルはTOPでは非表示 */

.home .entry-title {
    display: none;
}

.home .article,
.home .entry-content {
    margin: 0;
}


/* =========================================================
   TOP：ヒーロー
   ========================================================= */

.kids-home-hero {
    position: relative;

    display: grid;
    grid-template-columns:
        minmax(330px, 0.78fr)
        minmax(520px, 1.22fr);

    align-items: center;

    width: calc(100% - 32px);
    max-width: 1320px;
    min-height: 350px;

    margin: 0 auto 2.4rem;
    padding: 1.6rem 2.8rem 0;

    color: var(--kids-text);

    background:
        radial-gradient(
            circle at 5% 24%,
            rgba(218, 239, 247, 0.72) 0 46px,
            transparent 47px
        ),
        radial-gradient(
            circle at 15% 82%,
            rgba(255, 224, 225, 0.62) 0 76px,
            transparent 77px
        ),
        radial-gradient(
            circle at 66% 0%,
            rgba(255, 239, 191, 0.55) 0 72px,
            transparent 73px
        ),
        linear-gradient(
            108deg,
            #fffdfa 0%,
            #fffaf2 48%,
            #f8fcf6 100%
        );

    border: 1px solid #f1e8df;
    border-radius: 24px;

    overflow: hidden;
}


/* ---------------------------------------------------------
   背景の小さな飾り
   --------------------------------------------------------- */

.kids-home-hero::before {
    content: "★";

    position: absolute;

    top: 27%;
    left: 3.2%;

    color: #f0afa7;

    font-size: 1rem;

    opacity: 0.8;
}

.kids-home-hero::after {
    content: "✦   ●   ✦";

    position: absolute;

    top: 10%;
    left: 34%;

    color: #ecc75c;

    font-size: 0.7rem;
    letter-spacing: 0.8rem;

    opacity: 0.65;
}


/* ---------------------------------------------------------
   左側：文章
   --------------------------------------------------------- */

.kids-home-hero__copy {
    position: relative;
    z-index: 2;

    padding: 2rem 0 3rem;
}

.kids-home-hero__title {
    margin: 0 0 1.25rem !important;
    padding: 0 !important;

    color: var(--kids-brown) !important;
    background: transparent !important;
    border: 0 !important;

    font-size: clamp(2rem, 3vw, 2.9rem);
    font-weight: 700;
    line-height: 1.48;
    letter-spacing: 0.07em;
}

.kids-home-hero__text {
    max-width: 480px;

    margin: 0;

    color: #66554e;

    font-size: 0.93rem;
    line-height: 2;
}


/* ---------------------------------------------------------
   右側：イラスト
   --------------------------------------------------------- */

.kids-home-hero__visual {
    position: relative;
    z-index: 1;

    align-self: end;

    min-width: 0;

    line-height: 0;
}

.kids-home-hero__visual img {
    display: block;

    width: 100%;
    max-width: 730px;
    height: auto;

    margin: 0 0 0 auto;
}


/* =========================================================
   TOP：各セクション共通
   ========================================================= */

.kids-home-age,
.kids-home-themes,
.kids-home-picks,
.kids-home-latest {
    width: calc(100% - 32px);
    max-width: 1240px;

    margin-left: auto;
    margin-right: auto;
}


/* WordPressグループのコンテンツ幅制限を解除 */

.home .kids-home-picks > *,
.home .kids-home-latest > * {
    max-width: none !important;
}


/* =========================================================
   TOP：セクション見出し
   ========================================================= */

.kids-home-heading {
    position: relative;

    display: flex;
    align-items: center;
    gap: 0.55rem;

    margin: 0 0 1rem;
    padding: 0 0 0.48rem;
}

.kids-home-heading__icon {
    flex: 0 0 auto;

    font-size: 1.35rem;
    line-height: 1;
}


/* Cocoon標準のH2装飾を解除 */

.home
.article
.entry-content
.kids-home-heading h2 {
    margin: 0 !important;
    padding: 0 !important;

    color: var(--kids-brown) !important;
    background: transparent !important;

    border: 0 !important;
    box-shadow: none !important;

    font-size: 1.25rem !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    letter-spacing: 0.04em;
}

.home
.article
.entry-content
.kids-home-heading h2::before,

.home
.article
.entry-content
.kids-home-heading h2::after {
    content: none !important;
}


/* 見出し下のパステルライン */

.kids-home-heading::after {
    content: "";

    position: absolute;

    left: 2rem;
    bottom: 0;

    width: 165px;
    height: 3px;

    border-radius: 999px;
}

.kids-home-heading--pink::after {
    background: var(--kids-pink);
}

.kids-home-heading--blue::after {
    background: var(--kids-blue);
}

.kids-home-heading--yellow::after {
    background: var(--kids-yellow);
}

.kids-home-heading--green::after {
    background: var(--kids-green);
}


/* =========================================================
   TOP：年齢別おすすめ
   ========================================================= */

.kids-home-age {
    margin-top: 0;
    margin-bottom: 2.3rem;
}

.kids-age-cards {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));

    gap: 0.75rem;
}


/* ---------------------------------------------------------
   TOP用の大きな年齢カード
   --------------------------------------------------------- */

.kids-age-card {
    position: relative;

    display: flex;
    flex-direction: column;
    align-items: center;

    min-width: 0;
    min-height: 160px;

    padding: 0.85rem 0.5rem 0.8rem;

    border-radius: 15px;

    text-align: center;
}

.kids-age-card__icon {
    width: 60px;
    height: 60px;

    margin-bottom: 0.55rem;

    font-size: 1.6rem;
}

.kids-age-card__age {
    display: block;

    margin-bottom: 0.3rem;

    font-size: 0.95rem;
    font-weight: 700;
}

.kids-age-card__text {
    display: block;

    color: #695b54;

    font-size: 0.7rem;
    line-height: 1.55;
}

.kids-age-card__arrow {
    position: absolute;

    right: 0.62rem;
    bottom: 0.38rem;

    font-size: 1.25rem;
}


/* =========================================================
   TOP：テーマから絵本を探す
   ========================================================= */

.kids-home-themes {
    margin-top: 0;
    margin-bottom: 2.3rem;
}

.kids-theme-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));

    gap: 0.7rem;
}

.kids-theme-card {
    display: grid;
    grid-template-columns:
        42px
        minmax(0, 1fr)
        auto;

    align-items: center;
    gap: 0.55rem;

    min-width: 0;
    min-height: 58px;

    padding: 0.55rem 0.68rem;

    background: #ffffff;

    border: 1px solid var(--kids-card-border);
    border-radius: 999px;
}

.kids-theme-card__emoji {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    border-radius: 50%;

    font-size: 1.13rem;
}

.kids-theme-card__name {
    min-width: 0;

    color: #59483f;

    font-size: 0.76rem;
    font-weight: 600;
    line-height: 1.4;
}

.kids-theme-card__arrow {
    color: #df8052;

    font-size: 1.1rem;
}


/* ---------------------------------------------------------
   テーマごとの色
   --------------------------------------------------------- */

.kids-theme-card--pink .kids-theme-card__emoji {
    background: var(--kids-pink-bg);
}

.kids-theme-card--yellow .kids-theme-card__emoji {
    background: var(--kids-yellow-bg);
}

.kids-theme-card--blue .kids-theme-card__emoji {
    background: var(--kids-blue-bg);
}

.kids-theme-card--purple .kids-theme-card__emoji {
    background: var(--kids-purple-bg);
}

.kids-theme-card--green .kids-theme-card__emoji {
    background: var(--kids-green-bg);
}

.kids-theme-card--orange .kids-theme-card__emoji {
    background: var(--kids-orange-bg);
}


/* =========================================================
   TOP：おすすめ・最新
   共通カード
   ========================================================= */

.home .kids-recommended-book,
.home .kids-latest-book {
    min-width: 0;

    background: #ffffff;

    border: 1px solid var(--kids-card-border);
    border-radius: 12px;

    box-shadow:
        0 3px 10px rgba(103, 76, 59, 0.04);

    text-align: left;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


/* ---------------------------------------------------------
   共通タイトル
   --------------------------------------------------------- */

.home
.article
.entry-content
h3.kids-recommended-book__title,

.home
.article
.entry-content
h3.kids-latest-book__title {
    margin: 0 !important;
    padding: 0 !important;

    color: var(--kids-brown) !important;
    background: transparent !important;

    border: 0 !important;
    box-shadow: none !important;

    font-weight: 700 !important;
}

.home
.article
.entry-content
h3.kids-recommended-book__title::before,

.home
.article
.entry-content
h3.kids-recommended-book__title::after,

.home
.article
.entry-content
h3.kids-latest-book__title::before,

.home
.article
.entry-content
h3.kids-latest-book__title::after {
    content: none !important;
}

.home
.article
.entry-content
h3.kids-recommended-book__title a,

.home
.article
.entry-content
h3.kids-latest-book__title a {
    color: var(--kids-brown) !important;

    text-decoration: none !important;
}


/* ---------------------------------------------------------
   共通Amazon表紙
   --------------------------------------------------------- */

.home
.kids-recommended-book__cover
.kids-book-cover-amazon,

.home
.kids-latest-book__cover
.kids-book-cover-amazon {
    width: 100%;

    margin: 0;
}

.home
.kids-recommended-book__cover
.kids-book-cover-amazon > a,

.home
.kids-latest-book__cover
.kids-book-cover-amazon > a {
    display: block;

    line-height: 0;
}

.home
.kids-recommended-book__cover
.kids-book-cover-amazon a > img,

.home
.kids-latest-book__cover
.kids-book-cover-amazon a > img {
    display: block;

    width: auto;
    height: auto;

    margin: 0 auto;
}


/* Amazon案内文
   「画像をクリックしてAmazonで見る」 */

.home
.kids-recommended-book__cover
.kids-book-cover-amazon__label,

.home
.kids-latest-book__cover
.kids-book-cover-amazon__label {
    display: block;

    margin: 0 !important;
    padding: 0.25rem 0 0 !important;

    color: #a29b95;

    font-size: 0.58rem;
    font-weight: 400;
    line-height: 1.4;

    text-align: center;
}


/* もしもの1px計測画像をレイアウトから外す */

.home
.kids-recommended-book__cover
.kids-book-cover-amazon > img[width="1"][height="1"],

.home
.kids-latest-book__cover
.kids-book-cover-amazon > img[width="1"][height="1"] {
    position: absolute;

    width: 1px !important;
    height: 1px !important;

    margin: 0 !important;
    padding: 0 !important;
}


/* ---------------------------------------------------------
   カードホバー
   --------------------------------------------------------- */

@media (hover: hover) {

    .home .kids-recommended-book:hover,
    .home .kids-latest-book:hover {
        transform: translateY(-2px);

        box-shadow:
            0 7px 18px rgba(103, 76, 59, 0.07);
    }
}


/* =========================================================
   TOP：おすすめ絵本
   ========================================================= */

.kids-home-picks {
    margin-top: 0 !important;
    margin-bottom: 2.4rem !important;

    padding: 0 !important;
}

.home .kids-recommended-books {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));

    gap: 0.72rem;

    width: 100%;

    margin: 0;
}

.home .kids-recommended-book {
    display: flex;
    flex-direction: column;

    padding: 0.62rem 0.6rem 0.7rem;
}


/* ---------------------------------------------------------
   おすすめタグ
   --------------------------------------------------------- */

.home
.kids-recommended-book
.kids-pick-card__label {
    align-self: flex-start;

    max-width: 100%;

    margin: 0 0 0.48rem;
    padding: 0.18rem 0.55rem;

    overflow: hidden;

    color: #76665e;

    border-radius: 999px;

    font-size: 0.61rem;
    font-weight: 600;
    line-height: 1.3;

    white-space: nowrap;
    text-overflow: ellipsis;
}

.home .kids-recommended-book:nth-child(1)
.kids-pick-card__label {
    background: #f7d2d8;
}

.home .kids-recommended-book:nth-child(2)
.kids-pick-card__label {
    background: #eee5fa;
}

.home .kids-recommended-book:nth-child(3)
.kids-pick-card__label {
    background: #cae9f4;
}

.home .kids-recommended-book:nth-child(4)
.kids-pick-card__label {
    background: #f7d2bc;
}

.home .kids-recommended-book:nth-child(5)
.kids-pick-card__label {
    background: #d8eccc;
}

.home .kids-recommended-book:nth-child(6)
.kids-pick-card__label {
    background: #f6e4c5;
}


/* ---------------------------------------------------------
   表紙・タイトル・紹介文
   --------------------------------------------------------- */

.home .kids-recommended-book__cover {
    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 144px;

    margin: 0 0 0.45rem;

    text-align: center;
}

.home
.kids-recommended-book__cover
.kids-book-cover-amazon a > img {
    max-width: 104px;
    max-height: 136px;
}

.home
.article
.entry-content
h3.kids-recommended-book__title {
    font-size: 0.82rem !important;
    line-height: 1.5 !important;
}

.home .kids-recommended-book__text {
    margin: 0.3rem 0 0.6rem;

    color: #74655e;

    font-size: 0.67rem;
    line-height: 1.55;
}


/* ---------------------------------------------------------
   「レビューを読む」
   --------------------------------------------------------- */

.home .kids-recommended-book__review-link {
    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 31px;

    margin-top: auto;
    padding: 0.3rem 0.25rem;

    color: #64805f !important;
    background: #e8f4df;

    border: 1px solid #d4e7c9;
    border-radius: 999px;

    font-size: 0.64rem;
    font-weight: 700;

    text-align: center;
    text-decoration: none !important;

    transition:
        color 0.2s ease,
        background-color 0.2s ease,
        transform 0.2s ease;
}

.home .kids-recommended-book__review-link:hover {
    color: #587153 !important;
    background: #dff0d5;

    transform: translateY(-1px);
}


/* =========================================================
   TOP：最近紹介・更新した絵本
   ========================================================= */

.kids-home-latest {
    margin-top: 0 !important;
    margin-bottom: 3rem !important;

    padding: 0 !important;
}

.home .kids-latest-books {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 0.85rem;

    width: 100%;

    margin: 0;
}

.home .kids-latest-book {
    display: grid;
    grid-template-columns:
        82px
        minmax(0, 1fr);

    align-items: center;

    gap: 0.72rem;

    padding: 0.65rem;
}

.home .kids-latest-book__cover {
    display: flex;
    align-items: center;
    justify-content: center;

    margin: 0;
}

.home
.kids-latest-book__cover
.kids-book-cover-amazon a > img {
    max-width: 74px;
    max-height: 96px;
}

.home
.article
.entry-content
h3.kids-latest-book__title {
    font-size: 0.8rem !important;
    line-height: 1.55 !important;
}


/* =========================================================
   TOP：タブレット・スマホ横
   1023px以下
   ========================================================= */

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

    /* -----------------------------------------------------
       ヒーロー
       --------------------------------------------------------- */

    .kids-home-hero {
        grid-template-columns:
            minmax(0, 0.82fr)
            minmax(0, 1.18fr);

        min-height: 275px;

        padding: 1.1rem 1.4rem 0 1.7rem;
    }

    .kids-home-hero__copy {
        padding: 1rem 0 1.8rem;
    }

    .kids-home-hero__title {
        margin-bottom: 0.85rem !important;

        font-size: clamp(1.65rem, 3vw, 2rem);
        line-height: 1.45;
        letter-spacing: 0.05em;
    }

    .kids-home-hero__text {
        max-width: 340px;

        font-size: 0.82rem;
        line-height: 1.8;
    }

    .kids-home-hero__text br {
        display: none;
    }

    .kids-home-hero__visual {
        align-self: end;

        margin-left: -1rem;
    }

    .kids-home-hero__visual img {
        width: 125%;
        max-width: none;

        margin: 0 0 0 -8%;
    }


    /* -----------------------------------------------------
       年齢別：4列
       --------------------------------------------------------- */

    .kids-age-cards {
        grid-template-columns:
            repeat(4, minmax(0, 1fr));
    }


    /* -----------------------------------------------------
       テーマ：3列
       --------------------------------------------------------- */

    .kids-theme-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }


    /* -----------------------------------------------------
       おすすめ：3列
       --------------------------------------------------------- */

    .home .kids-recommended-books {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

    .home .kids-recommended-book__cover {
        min-height: 170px;
    }

    .home
    .kids-recommended-book__cover
    .kids-book-cover-amazon a > img {
        max-width: 120px;
        max-height: 160px;
    }
}


/* =========================================================
   TOP：スマホ
   600px以下
   ========================================================= */

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

    /* -----------------------------------------------------
       全体
       --------------------------------------------------------- */

    .home .content-in {
        width: 100%;
    }

    .kids-home-age,
    .kids-home-themes,
    .kids-home-picks,
    .kids-home-latest {
        width: calc(100% - 24px);
    }


    /* -----------------------------------------------------
       ヒーロー
       --------------------------------------------------------- */

    .kids-home-hero {
        display: flex;
        flex-direction: column;

        width: calc(100% - 16px);
        min-height: 0;

        margin-bottom: 1.8rem;

        padding: 1.7rem 1.05rem 0;

        border-radius: 20px;
    }

    .kids-home-hero__copy {
        width: 100%;

        padding: 0;

        text-align: left;
    }

    .kids-home-hero__title {
        margin-bottom: 0.9rem !important;

        font-size: 1.75rem;
        line-height: 1.45;
        letter-spacing: 0.05em;
    }

    .kids-home-hero__text {
        font-size: 0.84rem;
        line-height: 1.85;
    }

    .kids-home-hero__text br {
        display: none;
    }

    .kids-home-hero__visual {
        width: 100%;

        margin-top: 0.5rem;
    }

    .kids-home-hero__visual img {
        width: 112%;
        max-width: none;

        margin-left: -6%;
    }


    /* -----------------------------------------------------
       セクション見出し
       --------------------------------------------------------- */

    .kids-home-heading {
        margin-bottom: 0.85rem;
    }

    .kids-home-heading__icon {
        font-size: 1.18rem;
    }

    .home
    .article
    .entry-content
    .kids-home-heading h2 {
        font-size: 1.08rem !important;
    }

    .kids-home-heading::after {
        left: 1.75rem;

        width: 135px;
    }


    /* -----------------------------------------------------
       年齢別：横スクロール
       --------------------------------------------------------- */

    .kids-age-cards {
        display: flex;

        gap: 0.65rem;

        width: calc(100% + 12px);

        padding: 0.1rem 12px 0.7rem 0;

        overflow-x: auto;

        scroll-snap-type: x proximity;
        scrollbar-width: none;

        -webkit-overflow-scrolling: touch;
    }

    .kids-age-cards::-webkit-scrollbar {
        display: none;
    }

    .kids-age-card {
        flex: 0 0 145px;

        min-height: 154px;

        scroll-snap-align: start;
    }

    .kids-age-card__icon {
        width: 56px;
        height: 56px;
    }


    /* -----------------------------------------------------
       テーマ：2列
       --------------------------------------------------------- */

    .kids-theme-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 0.55rem;
    }

    .kids-theme-card {
        grid-template-columns:
            35px
            minmax(0, 1fr)
            auto;

        gap: 0.42rem;

        min-height: 55px;

        padding: 0.48rem 0.55rem;

        border-radius: 12px;
    }

    .kids-theme-card__emoji {
        width: 35px;
        height: 35px;

        font-size: 1rem;
    }

    .kids-theme-card__name {
        font-size: 0.72rem;
    }


    /* -----------------------------------------------------
       おすすめ：2列
       --------------------------------------------------------- */

    .home .kids-recommended-books {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 0.62rem;
    }

    .home .kids-recommended-book {
        padding: 0.55rem 0.52rem 0.62rem;
    }

    .home .kids-recommended-book__cover {
        min-height: 132px;
    }

    .home
    .kids-recommended-book__cover
    .kids-book-cover-amazon a > img {
        max-width: 88px;
        max-height: 124px;
    }

    .home
    .kids-recommended-book
    .kids-pick-card__label {
        font-size: 0.59rem;
    }

    .home
    .article
    .entry-content
    h3.kids-recommended-book__title {
        font-size: 0.78rem !important;
    }

    .home .kids-recommended-book__text {
        font-size: 0.64rem;
    }

    .home .kids-recommended-book__review-link {
        min-height: 34px;

        font-size: 0.64rem;
    }


    /* -----------------------------------------------------
       最近紹介・更新：1列
       --------------------------------------------------------- */

    .home .kids-latest-books {
        grid-template-columns: 1fr;

        gap: 0.6rem;
    }

    .home .kids-latest-book {
        grid-template-columns:
            76px
            minmax(0, 1fr);
    }

    .home
    .kids-latest-book__cover
    .kids-book-cover-amazon a > img {
        max-width: 68px;
        max-height: 88px;
    }

    .home
    .article
    .entry-content
    h3.kids-latest-book__title {
        font-size: 0.78rem !important;
    }
}


/* =========================================================
   TOP：小さいスマホ
   380px以下
   ========================================================= */

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

    .kids-home-hero__title {
        font-size: 1.55rem;
    }

    .kids-theme-card__name {
        font-size: 0.68rem;
    }

    .home .kids-recommended-books {
        gap: 0.5rem;
    }
}


/* =========================================================
   絵本レビュー共通
   NANAKO吹き出し
   ========================================================= */

.speech-wrap.sb-id-1 {
    /* 枠・三角の外側＝サイトキーカラー */
    --cocoon-custom-border-color:
        var(--wp--preset--color--key-color);
}


/* 吹き出し本体は背景なし */

.speech-wrap.sb-id-1 .speech-balloon {
    background-color: transparent !important;
}


/* 三角の内側だけ白で抜く */

.speech-wrap.sb-id-1 .speech-balloon::after {
    border-right-color: var(--cocoon-white-color) !important;
}


/* NANAKOアイコンの枠なし */

.speech-wrap.sb-id-1 .speech-icon img {
    border-color: var(--wp--preset--color--key-color) !important;
}









/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}