:root {
    --color__font--primary: #141414;
    --color__font--secondary: #737373;
    --color__modal--accent-1: #ff2600;
    --color__modal--accent-2: #b36b4d;
}

body {
    font-family: 'LINE Seed JP', sans-serif;
}

#content {
    container-type: inline-size;
}

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

.l-header__inner,
.l-fixHeader__inner {
    align-items: center !important;
}

/* グローバルメニュー */
.l-header__gnav,
.l-fixHeader__gnav {

    .menu-item {
        height: 1.25em;

        &:not(:last-child) {
            border-right: solid 1px #d9d9d9;
        }

        a {
            padding: 0 0.5em;
        }
    }
}

/*------------------------------------------------------------
home 以外で表示する検索フォーム
------------------------------------------------------------*/

.l-header__search {

    .header__search {
        display: flex;
        align-items: center;
        overflow: hidden;
        border: 1px solid var(--color__font--secondary);
        border-radius: 999px;
        transition: ease 0.3s;
    }
    
    .header__search:hover {
        box-shadow: 0 1px 6px rgb(32 33 36 / 28%);
    }
    
    .header__search::before {
        width: 3em;
        height: 1em;
        background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%20%3Cpath%20d%3D%22M23.7%2020.8%2019%2016.1c-.2-.2-.5-.3-.8-.3h-.8c1.3-1.7%202-3.7%202-6C19.5%204.4%2015.1%200%209.7%200S0%204.4%200%209.7s4.4%209.7%209.7%209.7c2.3%200%204.3-.8%206-2v.8c0%20.3.1.6.3.8l4.7%204.7c.4.4%201.2.4%201.6%200l1.3-1.3c.5-.5.5-1.2.1-1.6zm-14-5.1c-3.3%200-6-2.7-6-6s2.7-6%206-6%206%202.7%206%206-2.6%206-6%206z%22%20fill%3D%22%239aa0a6%22%3E%3C%2Fpath%3E%20%3C%2Fsvg%3E');
        background-position: center;
        background-repeat: no-repeat;
        content: '';
    }
    
    .header__search input {
        width: 100%;
        height: 3em;
        padding: 0.25em 1em 0.25em 0;
        border: none;
        box-sizing: border-box;
        outline: none;
    }

    input[type="search"] {
        background-color: #ffffff;

        &::placeholder {
            color: var(--color__font--secondary);
        }
    }
}



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

/* フッター直前ウィジェット */
.w-beforeFooter {
    background-color: #313131;
    color: #ffffff;
    padding: 2em 0 3em;

    #media_image-3,
    .c-widget.widget_media_image {
        width: 17%;
        min-width: 128px;
    }

    #text-4,
    .c-widget.widget_text {
        margin-top: 1em;
    }

    #nav_menu-3,
    .c-widget.c-listMenu.widget_nav_menu {
        margin-top: 3em;

        ul {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5em 4em;

            a {
                border-bottom: none;
                padding: 0 0.25em;

                &::before {
                    display: none;
                }
            }
            
        }
    }
}

.discreet {
    font-size: 0.75em;
}

/*######################################################################
トップページ / メインコンテンツ
######################################################################*/

.p-mainVisual__textLayer {
    container-type: inline-size;
}

/* メインビジュアル */
.p-mainVisual__slideTitle,
.p-mainVisual__slideText {
    font-weight: 800;
    text-shadow: 2px 5px 10px rgba(0, 0, 0, 0.5);
}

.p-mainVisual__slideTitle {
    font-size: 3cqw;
}

.p-mainVisual__slideText {
    font-size: 2.5cqw;
    margin-bottom: 3%;
}

/* メインビジュアル内検索ボックス */
.fv__search__content {
    
    .swell-block-fullWide__inner {
        width: 640px;
        max-width: 80%;
    }

    .fv__search {
        padding-right: 18%;
        line-height: 2;
        
        .wp-block-search__input {
            background-color: #ffffff;
            border: solid 1px var(--color__font--secondary);
            border-radius: 0.5em;
            width: 100%;
            flex-grow: unset;
            padding: 0.5em;
        }
        
        .wp-block-search__button {
            text-indent: -9999px;  /* テキストを非表示にする */
            overflow: hidden;
            white-space: nowrap;
            box-shadow: none;
            
            /* 画像ボタンに差し替え */
            background: url('../images/icon_search.webp') no-repeat center center;
            background-size: contain;
            
            width: 18%;
            aspect-ratio: 16 / 11;
            border: none;
            cursor: pointer;
            padding: 0;
            
            position: absolute;
            top: 0;
            right: 0;
            
            /* ホバー時（任意） */
            &:hover {
                opacity: 0.8;
                transition: opacity 0.2s ease;
            }
        }
    }
}

.home {

    h2 {
        font-size: 2.5cqw;
        font-weight: 400;
    }
}

/* おすすめ投稿リスト */
.p-blogParts {

    /* もっと見るボタン */
    .is-style-more_btn {
        
        .btn_text {
            width: 100%;
            box-shadow: none;
            background-color: #f7f7f7;
            padding: 1.25em 1em;
        }
    }
    
    &:has(.parts__recommend-list) {
        margin-bottom: 10%;
    }
}

/* 投稿リストの調整 */
.p-postListWrap,
.archive {

    /* h3 */
    .p-postList__title {
        font-weight: 400;
        margin-bottom: 0.5em;
    }
}


/* 商品詳細一覧 */
.parts__recommend-list {

    ul {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(45%, 1fr));
        gap: 1em;

        @media ( width < 1080px) {
            display: block;
        }

        @media ( width < 960px) {
            display: grid;
        }

        @media ( width < 768px) {
            display: block;
        }
    }

    li {

        a {
            gap: 1em;
            height: 100%;

            &.p-postList__link {
                justify-content: left;
            }
        }
        
        .p-postList__thumb {
            /* width: 30%; */
            width: 25%;
        }

        .p-postList__body {
            width: 65%;
            height: 100%;
            border-bottom: solid 1px var(--color__font--secondary);
            padding-right: 1em;

            p {
                font-size: 0.9em;
                color: var(--color__font--secondary);
            }
        }

        .p-postList__arrow {
            width: 5%;
            position: absolute;
            top: 50%;
            right: 0;
            translate: 0 -50%;
            font-size: 1cqw;
        }
    }
}


/*######################################################################
サイドバー
######################################################################*/

.c-widget__title {
    font-size: 1.5em;
    font-weight: 400;
    margin-bottom: 0.75em;

    &.-side {
        padding: 0;
    }

    &::before,
    &::after {
        display: none;
    }
}

/*--------------- 
★オリジナルウィジェット★　サイドバー/カテゴリー一覧
---------------*/

.widget__sidebar__category-list__item {
    border-bottom: solid 1px var(--color__font--secondary);

    &:first-child {
        border-top: solid 1px var(--color__font--secondary);
    }
}

.widget__sidebar__category-list__link {
    color: var(--color__font--primary);
}

.widget__sidebar__category-list__inner,
.widget__sidebar__category-list__main {
    display: flex;
    align-items: center;
}

.widget__sidebar__category-list__inner {
    justify-content: space-between;
}

.widget__sidebar__category-list__main {
    gap: 0.5em;
}

/* サムネイル画像 */
.widget__sidebar__category-list__thumb__wrap {
    width: 4em;
    aspect-ratio: 1;

    img {
        width: 100%;
        height: 100%;
    }
}

/* テキスト部分 */
.widget__sidebar__category-list__desc {
    color: var(--color__font--secondary);
    font-size: 0.95em;
}

/* 「▶」アイコン */
.widget__sidebar__category-list__icon {
    font-size: 0.8em;
}

/*######################################################################
商品詳細ページ
######################################################################*/

/*--------------- 目次 ---------------*/

.single-product_details {

    .p-toc {

        ul, ol {

            li {
                margin-left: 0em;
                
                &::before {
                    display: none;
                }

                ul, ol {

                    li {
                        margin-left: 2em;
                    }
                }

                .rank-1 {
                    /* color: red; */
                }

                .rank-2 {
                    /* color: blue; */
                }

                .rank-3 {
                    /* color: green; */
                }

                .rank-other {
                    /* color: yellow */
                }
            }
        }
    }
}


/*------------------------------------------------------------
SWELL目次用 h3（目次には出るが本文では見えない）
------------------------------------------------------------*/
.toc-hidden,
.toc-hidden-headings {
	position: absolute !important;
	left: -9999px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
	white-space: nowrap;
}

/*------------------------------------------------------------
ランキング表（product-details-table）
------------------------------------------------------------*/

/* 横スクロール対応 */
.product-table-scroll {
	overflow-x: auto;
	width: 100%;
}

.product-table-scroll::-webkit-scrollbar {
	height: 1em;
}

.product-table-scroll::-webkit-scrollbar-thumb {
	background-color: #ccc;
	border-radius: 4px;
}

/*--------------- テーブル全体 ---------------*/

.product-details-table {
    width: 100%;
    min-width: 900px;

    th, td {
        border: 1px solid #ccc;
        padding: 0.75em 0.5em;
        text-align: center;
        vertical-align: middle;

        &.numeric-header {
            min-width: 5em;

            &.rank-header {
                min-width: 4em;
            }
        }

        &.text-header {
            min-width: 10em;
        }

        &.image-header {
            min-width: 7em;
        }
        
        &.flexible-header {
            min-width: 10em;
        }
    }

    th {
        /* word-break: auto-phrase; */
        font-size: 0.85em;
    }

    td {
        font-size: 0.8em;
        
        &.image {
            /* width: 8em; */
            
            /*--------------- 画像列 ---------------*/
            img {
                width: 100%;
                /* height: 100%; */
                aspect-ratio: 1;
                object-fit: cover;
                border-radius: 4px;
                cursor: pointer;
                transition: transform 0.2s ease;
            }
        }

        &.rating {
            word-break: keep-all;
        }
    }
}

/*--------------- メーカー名・商品名 ---------------*/

.product-details-table td.maker,
.product-details-table td.product {
	cursor: pointer;
}

.product-details-table td.image img:hover {
	transform: scale(1.05);
}

/*--------------- 評価（星表示）---------------*/

.star-rating-wrap {
	/* display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.3em; */
}
.star-score {
	font-size: 0.9em;
	color: #333;
}
.star-stars {
	position: relative;
	display: inline-block;
	font-size: 1.1em;
	line-height: 1;
	color: #ddd;
}
.star-stars .stars-inner {
	position: absolute;
	top: 0;
	left: 0;
	white-space: nowrap;
	overflow: hidden;
	color: #ff9800;
}

/*--------------- 人気順 ---------------*/

.product-details-table td.ranking {
	color: #555;
	font-weight: 500;
}

/*--------------- ポイント（説明列）---------------*/

.product-details-table td.point {
	text-align: left;
	padding-left: 1em;
	color: #333;
}

/*--------------- クリックできる要素（モーダル連携）---------------*/

.js-modal-trigger {
	cursor: pointer;
}
.js-modal-trigger:hover {
	background: #fff3f3;
}

/*--------------- 管理ボタン非表示（フロント）---------------*/

.table-buttons {
	display: none;
}


/*------------------------------------------------------------
モーダル
------------------------------------------------------------*/

/*--------------- モーダルの基本スタイル ---------------*/

.product-modal__overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 9998;
    display: none;
}

.product-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 900px;
    max-height: 90dvh;
    overflow-y: auto;
    background: #fff;
    padding: 4em 2em 2em;
    z-index: 9999;
    border-radius: 10px;
    display: none;
}

.product-modal__close {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 24px;
    background: none;
    border: none;
    cursor: pointer;
}

.product-modal__footer {
    text-align: center;
}

.product-modal__close--bottom {
    border: 2px solid #0EB03A;
    border-radius: 0.25em;
    color: #0EB03A;
    background-color: unset;
    margin-top: 3em;
    padding: 0.5em 1em;
}

body.modal-open {
    overflow: hidden;
}

/* 表示されるモーダル部分 */
.product-details__modal {
    display: none;

    /*--------------- 順位、メーカー名、商品名 ---------------*/

    .modal__rank__maker__name {
        display: flex;
        gap: 1em;
    }

    /* 順位 */
    .item-detail__rank {
        background: red;
        color: #ffffff;
        height: fit-content;
        padding: 0.5em 1em;
        border-radius: 4px;
        flex: 0 0 content;
        font-size: 1.25em;

        &.rank-1 {
            background: linear-gradient(45deg, #DAAF08 0%, #DAAF08 45%, #FEE9A0 70%, #DAAF08 85%, #DAAF08 90% 100%);
        }

        &.rank-2 {
            background: linear-gradient(45deg, #757575 0%, #9E9E9E 45%, #E8E8E8 70%, #9E9E9E 85%, #757575 90% 100%);
        }

        &.rank-3 {
            background: linear-gradient(45deg, #a57e65 0%, #a57e65 45%, #f3cfb8 70%, #a57e65 85%, #a57e65 90% 100%);
        }
    }

    /* メーカー名 */
    .item-detail__maker {
        color: var(--color__font--secondary);
        font-size: 0.9em;
    }

    /* 商品名 */
    .item-detail__name {
        font-size: 1.25em;
        font-weight: 700;
    }

    /*--------------- 評価 ---------------*/
    
    .modal__rating {
        background-color: #ffe7e7;
        color: var(--color__modal--accent-1);
        padding: 0.5em 1em;
        margin-top: 1em;
    }
    
    /* 評価 */
    .item-detail__rating {
        font-size: 1.25em;
    }

    /* 評価詳細 */
    .item-detail__evaluation {
        font-size: 0.8em;
        display: flex;
        flex-wrap: wrap;
        gap: 0 2em;
    }

    /* 評価詳細/項目名 */
    .evaluation__item-name {
        color: var(--color__modal--accent-2);
    }

    /*--------------- 商品画像、価格、CTA ---------------*/

    .modal__image__price__cta {
        display: flex;
        flex-wrap: wrap;
        gap: 2em;
        margin-top: 1em;

        section {
            flex: 1;
        }
    }

    /* 商品画像 */
    .item-detail__image {

        img {
            /* height: 100%; */ 
            object-fit: cover;
        }
    }

    /* 商品画像スライダー */
    .splide__modal__image {

        .splide__list {
            align-items: flex-start;
        }
    }
    
    /* 価格 */
    .item-detail__price {
        color: var(--color__modal--accent-1);
        font-size: 1.25em;
        margin-bottom: 1em;
    }

    .item-detail__price-label {
        color: var(--color__modal--accent-2);
        display: block;
    }

    /* CTA */
    .cta {
        margin-top: 2em;

        a {
            display: block;
            padding: 1em;
            text-align: center;
            border-radius: 4px;
            width: 90%;
            margin-inline: auto;
            margin-bottom: 0.75em;
            box-shadow: 0.25em 0.25em 0.25em rgba(0,0,0,0.1);
    		transition: opacity 0.3s;

            &.cta__btn:hover {
                opacity: 0.8;
            }
        }
    }

    /*--------------- 任意項目 ---------------*/

    .item-detail__optional {
        margin-top: 2em;
    }
    
    .optional__list {
        display: flex;
        flex-wrap: wrap;
        gap: 2em 0;
    }

    .optional__item {
        flex: 50%;
        display: flex;
        border-bottom: 2px solid #FFF3E6;
        
        * {
            padding: 0.5em 1em;
        }

        .optional__item--title {
            flex-shrink: 0;
            width: 8em;
            background-color: #FFF3E6;
        }

        .optional__item--content {
            flex: 1;
        }
    }

    .optional__item--description,
    .item-detail__price--description {
        color: #9F9F9F;
        margin-top: 1em;
    }
    
    /*--------------- 料金 ---------------*/

    .item-detail__price-details {
        margin-top: 2em;
    }

    .item-detail__price--title {
        font-size: 1.25em;
        font-weight: 700;
    }

    .price-details__list {
        margin-top: 1em;
    }

    /* 料金アコーディオン */
    .js-accordion__btn {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		padding: 0.5em 1em;
		background: #f8f8f8;
		border: 1px solid #ccc;
		border-radius: 4px;
		cursor: pointer;
		font-weight: 600;
		margin-top: 0.5em;
	}

	.js-accordion__content {
		display: none;
		padding: 0.75em 1em;
		border: 1px solid #ddd;
		border-top: none;
	}

	.js-accordion.is-open .js-accordion__content {
		display: block;
	}

	.js-accordion.is-open .accordion__icon {
		transform: rotate(45deg);
	}
    .price-details__group {
        border: 1px solid #e0e0e0;
        border-radius: 6px;
        margin-bottom: 1em;
        overflow: hidden;
    }
    
    .price-details__group-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        margin: 0;
        padding: 0.75em 1em;
        background: #f8f8f8;
        cursor: pointer;
        font-weight: 600;
        border: none;
        outline: none;
        transition: background 0.3s;
    }
    
    .price-details__group-header:hover {
        background: #f0f0f0;
    }
    
    .accordion__icon {
        font-weight: 700;
        font-size: 1.2em;
        transition: transform 0.3s;
    }
    
    .price-details__group-content {
        display: none;
        padding: 1em;
        background: #fff;
        border-top: 1px solid #e0e0e0;
    }
    
    /* 開いたときのスタイル */
    .price-details__group.is-open .price-details__group-content {
        display: block;
    }
    .price-details__group.is-open .accordion__icon {
        transform: rotate(45deg); /* ＋を×っぽく */
    }

    /*--------------- 商品説明 ---------------*/

    .item-detail__description {
        margin-top: 2em;

        h2 {
            font-size: 1.25em;
        }

        h2, h3, h4 {
            margin: 1em 0;
        }
    }
}

/*######################################################################
アーカイブ、カテゴリーページ
######################################################################*/

/*------------------------------------------------------------
すべてのおすすめ人気ランキング一覧ページ
------------------------------------------------------------*/

.archive {

    h1 {
        font-size: 3cqw;
        font-weight: 400;
        margin-bottom: 2em;
    }

    .parts__recommend-list {

        .p-postList__meta {
            display: none;
        }
    }
}

/*------------------------------------------------------------
カテゴリーページ全体
------------------------------------------------------------*/

.category {

    .p-postList__arrow {
        display: none;
    }
}

/*######################################################################
コラムTOPページ
######################################################################*/

.column-top {
    h1 {
        display: none;
    }

    .post_content {
        margin-top: 0;
    }

    h2 {
        border-bottom: solid 1px var(--color__font--secondary);
        padding-bottom: 0.75em;
    }
}


.column-splide {

    li {
        aspect-ratio: 4 / 3;
        max-width: 800px;
    }

    img {
        width: 100%;
        height: 100%;
    }

    .splide__list {
        align-items: flex-start;
    }

    /* ページネーション / 矢印 */
    
    .splide__arrows {
        width: 480px;
        max-width: 100%;
        height: 3em;
        margin-inline: auto;
        padding: 0 1em;
        position: relative;
    }
    
    .splide__arrow {
        top: 50%;
    }
}

/*######################################################################
お問い合わせページ
######################################################################*/

.wpcf7 {

    p {
        margin-bottom: 2em;
    }

    .wpcf7-form-control {
        width: 100%;
    }

    .required {
        color: red;
    }
}

/*######################################################################
responsive
######################################################################*/

@media ( width < 960px) {

    /*--------------- ヘッダー ---------------*/
    
    .l-header__search {
        display: none;
    }
}

@media ( width < 768px) {
    
    /*--------------- メインビジュアル ---------------*/

    .p-mainVisual__slideTitle {
        font-size: 4cqw;
    }

    .p-mainVisual__slideText {
        font-size: 3cqw;
    }

    .wp-block-search__input {
        font-size: 2cqw;
    }

    /*--------------- .home ---------------*/

    .home {

        h2 {
            font-size: 2.5cqw;
        }
    }

    /*--------------- 商品詳細ページ ---------------*/

    .product__details__name {
        font-size: 5cqw;
    }

    .product__details__rating {
        font-size: 4cqw;
    }

    /* モーダル */
    .product-details__modal {

        .modal__image__price__cta {
            display: block;
        }

        .item-detail__price-cta {
            margin-top: 2em;
        }
    }
}