@charset "UTF-8";
@font-face {
    font-family:'Noto Sans Japanese';
    src: url(/public/fonts/NotoSansJP-Medium.ttf);
}
@font-face {
    font-family:'CrimsonText Roman';
    src: url(/public/fonts/CrimsonText-Roman.ttf);
}
/*******************************************************************************************
変数定義
*******************************************************************************************/
body{
    /*テーマカラー*/
    --themecolor:rgb(255,255,255);
    /*メインフォントカラー*/
    --fontcolor:rgb(38,38,38,1);
    --fontcolor_sub:rgb(129,73,45,1);
    --mask_color:rgb(129,73,45,0.3);
    color:var(--fontcolor);
}
/*******************************************************************************************
共通処理
*******************************************************************************************/
html {
    font-size: 100%;
    /*scroll-behavior:smooth;/*上に戻る挙動をスムーズ化*/
}
body {
    color:var(--fontcolor);
    background-color:var(--themecolor);
    font-family:'CrimsonText Roman','serif','Noto Sans Japanese';
    font-size: 0.9rem;
    line-height: 1.7;
}
/*中身のコンテンツ幅指定の共通クラス*/
.wrapper {
    width:calc(100% - 10%);
    max-width:calc(100% - 10%);
    margin: 0 5%;
    text-align: center;
    position:relative;
}
/*H3レイアウト*/
.title_h3{
    font-size:1.8vw;
    font-weight:bold;
    white-space: nowrap;
    text-shadow:1px 2px 3px gray;
}
/*新着記事に「NEW」を付与*/
.text_icon{
    color:white;
    font-weight:bold;
    background-color:red;
    border-radius:30px;
    padding:3px 10px;
    margin-left:10px;
}
.sns_link{
    color:#00c;
    border-bottom:1px solid #00c;
}
/*スマホ用改行*/
.br_sm{
    display:none;
}
/*ＰＣ用改行*/
.br_pc{
    display:block;
}

/*******************************************************************************************
header
*******************************************************************************************/
#header {
    position:relative;
    width:100%;
    max-width:100%;
    height:auto;
}
#header #information_area{
    display:block;
    width:100%;
    height:auto;
    font-size:0.75rem;
    text-align:center;
    color:white;
    background-color:#000000;
    padding:10px 0;
}
#header #information_area .information_massage{
    display:block;
    width:100%;
    height:auto;
    position:relative;
}
#header #information_area .information_massage::after{
    content:"";
    width:15px;
    height:15px;
    background-image:url(/public/img/angle-right-solid-white.svg);
    background-repeat:no-repeat;
    background-size:contain;
    background-position:center center;
    position:absolute;
    top:50%;
    right:5%;
    transform:translateY(-50%);
}
#header #header_menu_area{
    display:flex;
}
#header #header_menu_area #header_menu{
    display:flex;
    width:calc(100% - 4%);
    align-items:center;
    margin:10px 2%;
}
#header #header_menu_area #header_menu h1.site-title{
    position: absolute;
    left: -9999px;  /* 画面外に飛ばす */
    width: 1px;
    height: 1px;
    overflow: hidden;
}
#header #header_menu_area #header_menu .site-logo img {
    display: block;
    max-width: 200px;
    height: auto;
}
#header #header_menu_area #header_menu #nav{
    display:flex;
    margin-left:auto;
}
#header #header_menu_area #header_menu #nav ul#nav_menu{
    display:flex;
    justify-content:center;
    align-items:center;
}
#header #header_menu_area #header_menu #nav ul#nav_menu li.nav_menu_item{
    display:flex;
    padding:5px 20px;
    position:relative;
}
#header #header_menu_area #header_menu #nav ul#nav_menu li.nav_menu_item:after{
    content:"";
    width:90%;
    height:1px;
    background-color:var(--fontcolor);
    position:absolute;
    bottom:0;
    left:50%;
    transform:translateX(-50%);
    visibility:hidden;
}
#header #header_menu_area #header_menu #nav ul#nav_menu li.nav_menu_item:hover:after{
    visibility:visible;
}
#header #header_menu_area #header_menu #nav ul#nav_menu li.nav_menu_item ul.sub_menu{
    display:block;
    min-width: 100px;
    color:white;
    background-color:#262626;
    position:absolute;
    top:100%;
    left:50%;
    translate: -50% 0;
    padding:0.5em 1em;
    opacity:0;
    visibility:hidden;
    transition: opacity 0.3s ease-in-out;
    z-index:10;
}
#header #header_menu_area #header_menu #nav ul#nav_menu li.nav_menu_item:hover ul.sub_menu{
    opacity:1;
    visibility:visible;
}
#header #header_menu_area #header_menu #nav ul#nav_menu li.nav_menu_item ul.sub_menu li a{
    display:block;
    padding:0.2em 1em;
}
#header #header_menu_area #header_menu #nav ul#nav_menu li.nav_menu_item ul.sub_menu li a:hover{
    color:#262626;
    background-color:white;
}
/*******************************************************************************************
header.php ハンバーガーメニュー
*******************************************************************************************/
#header .hamburger_btn{
    display:none;
    justify-content:center;
    align-items:center;
    position:relative;
    width:55px;
    margin:0 0 0 auto;
    z-index:100;
}
/*ボタン外側*/
#header .hamburger_btn .header_menu_lines{
    position: relative;/*ボタン内側を基点とする*/
    background:white;
    cursor: pointer;
    width: 40px;
    height:40px;
    border-radius: 5px;
}
/*ボタン内側*/
#header .hamburger_btn .header_menu_lines span{
    display: inline-block;
    transition: all .4s;
    position: absolute;
    left: 5px;
    height: 4px;
    border-radius: 5px;
    background: #333333;
    width: 75%;
}
#header .hamburger_btn .header_menu_lines span:nth-of-type(1) {
    top:10px; 
}
#header .hamburger_btn .header_menu_lines span:nth-of-type(2) {
    top:18px;
}
#header .hamburger_btn .header_menu_lines span:nth-of-type(3) {
    top:26px;
}
#header .hamburger_btn .header_menu_lines.active span:nth-of-type(1) {
    top: 12px;
    left:10px;
    transform: translateY(6px) rotate(-45deg);
    width: 50%;
}
#header .hamburger_btn .header_menu_lines.active span:nth-of-type(2) {
    opacity: 0;
}
#header .hamburger_btn .header_menu_lines.active span:nth-of-type(3){
    top: 24px;
    left: 10px;
    transform: translateY(-6px) rotate(45deg);
    width: 50%;
}
#header .hamburger_btn .header_menu_lines.active span:nth-of-type(3)::after {
    /*content:"Close";MENU文言非表示*/
    transform: translateY(0) rotate(-45deg);
    top:5px;
    left:4px;
}
#header #header_slide_menu_area{
    display:none;/*PC非表示*/
    background-color:white;
    position: fixed;
    top: 0px;
    right: 0px;
    width: 80%;
    height:100%;
    padding:10px;
    transform: translateX(100%); /* ハンバーガーメニューOFF時、右側へスライドさせておく */
    z-index:100;
    transition: 0.4s;
    overflow-y:scroll;/*メニュー縦スクロール許可*/
}
#header #header_slide_menu_area.active{
    transform: translateX(0); /*ハンバーガーメニューON時、左にスライドさせて画面表示する*/
}
#header #header_slide_menu_area ul.header_slide_menu{
    margin:5%;
}
#header #header_slide_menu_area ul.header_slide_menu li{
    margin-bottom:20px;
}
#header #header_slide_menu_area ul.header_slide_menu li a.header_slide_menu_btn.line{
    display:list-item;
    list-style:disc;
    margin-left:1em;
    position:relative;
}
/*
#header #header_slide_menu_area ul.header_slide_menu li a.header_slide_menu_btn.line::before{
    content:"";
    display:block;
    width:3px;
    height:100%;
    background-color:#262626;
    position:absolute;
    top:50%;
    left:0;
    translate:0 -50%;
}*/
/*******************************************************************************************
header.php maskエリア
*******************************************************************************************/
#header #mask_area.active{
    display:block;
}
#header #mask_area{
    display:none;
    width:100%;
    height:100%;
    background-color:rgb(0,0,0,0.3);
    position:fixed;
    top:0;
    left:0;
    right:0;
    z-index:99;
}
/*******************************************************************************************
index.php メインビジュアル
*******************************************************************************************/
.page-index #mainvisual_slide{
    display:block;
    width:100%;
    height:auto;
}
.page-index #mainvisual_slide .inner{
    display:block;
    width:100%;
    height:auto;
    position:relative;
}
.page-index #mainvisual_slide .inner .mask_area{
    display:block;
    width:100%;
    height:100%;
    background-color:rgb(255,255,255,0.3);
    position:absolute;
    top:0;
    left:0;
    right:0;
    z-index:2;
    transition: 0.3s;
    visibility:hidden;
    opacity:0;
    pointer-events: none; 
}
.page-index #mainvisual_slide .inner:hover .mask_area{
    visibility:visible;
    opacity:1;
}
/*******************************************************************************************
infomation
*******************************************************************************************/
.page-index #infomation{
    padding-top:100px;
}
.page-index #infomation .inner{
    display:flex;
    width:100%;
    height:auto;
    justify-content:center;
}
.page-index #infomation .inner .title_area{
    display:flex;
    justify-content:center;
    width:40%;
    height:auto;
}
.page-index #infomation .inner .title_area h2{
    display:block;
    width:fit-content;
    height:auto;
    font-size:1.6rem;
    letter-spacing:0.2rem;
    position:relative;
}
.page-index #infomation .inner .title_area h2 span.h2_ber{
    display:block;
    width:50px;
    height:1px;
    background-color:var(--fontcolor);
    margin-top:10%;
}
.page-index #infomation .inner .content_area{
    display:flex;
    width:60%;
    height:auto;
    text-align:left;
}
.page-index #infomation .inner .content_area #topNewsList {
    display: block;
    width:100%;
    margin: 0;
    padding: 0 5% 0 0;
}
.page-index #infomation .inner .content_area #topNewsList .news-item.-compact {
    display: grid;
    grid-template-columns: 10rem 3.2rem auto 1fr; /* 日付 / NEW / カテゴリ / タイトル */
    align-items: center;
    column-gap: .75rem;
    row-gap: .25rem;
    padding: .6rem 0;
    border-bottom: 1px solid #eee;
}
/* ヘッダー内の直下要素をグリッドにそのまま乗せる */
.page-index #infomation .inner .content_area #topNewsList .news-item.-compact .news-head {
  display: contents; /* 子要素を親グリッドに直接配置（HTMLをいじらずに済む） */
}
/* 各セルの配置（列割当） */
.page-index #infomation .inner .content_area #topNewsList .news-date{ 
    grid-column: 1;
    white-space: nowrap;
}
.page-index #infomation .inner .content_area #topNewsList .badge-new {
    grid-column: 2;
    justify-self: center;
}
.page-index #infomation .inner .content_area #topNewsList .news-cat {
    grid-column: 3;
    white-space: nowrap;
    font-size: .9em;
    text-align:center;
    border:1px solid #262626;
    border-radius:2px;
    padding:0 0.3em;
}
.page-index #infomation .inner .content_area #topNewsList .news-title{ 
    grid-column: 4;
}
/* タイトルははみ出し防止（1行省略） */
.page-index #infomation .inner .content_area #topNewsList .news-title,
.page-index #infomation .inner .content_area #topNewsList .news-title a {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: inherit;
    text-decoration: none;
}
.page-index #infomation .inner .content_area #topNewsList .news-title a:hover,
.page-index #infomation .inner .content_area #topNewsList .news-title a:focus {
    text-decoration: underline;
}
/* NEWバッジ（前回のものを活用） */
.page-index #infomation .inner .content_area #topNewsList .badge-new {
    display: inline-block;
    width: 3em;              /* 固定幅でズレ防止 */
    text-align: center;
    font-size: .78em;
    font-weight: 700;
    color: #fff;
    background: #e60033;
    border-radius: 3px;
}
.page-index #infomation .inner .content_area #topNewsList .badge-new.is-hidden {
    visibility: hidden;
}
/* 余白・行間微調整 */
.page-index #infomation .inner .content_area #topNewsList .news-date {
    color: #666;
}
.page-index #infomation a.btn{
    display: block;
    width: 300px;
    max-width: 100%;
    color: white;
    background-color: var(--fontcolor);
    padding: 10px;
    margin: 60px auto 0 auto;
    position: relative;
}
.page-index #infomation a.btn::after{
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background-color: rgb(255, 255, 255, 0.3);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    visibility: hidden;
    opacity: 0;
    transition: 0.3s;
}
.page-index #infomation a.btn:hover::after{
    visibility:visible;
    opacity:1;
}
/*******************************************************************************************
index.php pickup
*******************************************************************************************/
.page-index #pickup{
    margin-top:200px;
}
.page-index #pickup .inner{
    display:flex;
    width:100%;
    height:auto;
}
.page-index #pickup .inner .img_area{
    display:block;
    width:50%;
    height:700px;
    overflow:hidden;
    position:relative;
}
.page-index #pickup .inner .img_area::after{
    content:"";
    display:block;
    width:100%;
    height:100%;
    background-color:rgb(255,255,255,0.3);
    position:absolute;
    top:0;
    left:0;
    right:0;
    visibility:hidden;
    opacity:0;
    transition:0.3s;
}
.page-index #pickup .inner .img_area:hover::after{
    visibility:visible;
    opacity:1;
}
.page-index #pickup .inner .img_area img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center center;
    transition:1s;
}
.page-index #pickup .inner .img_area:hover img{
    transform:scale(1.1,1.1);
}
.page-index #pickup .inner .text_area{
    display:flex;
    flex-direction:column;
    justify-content:center;
    width:40%;
    height:auto;
    padding:5%;
}
.page-index #pickup .inner .text_area .title{
    display:block;
    text-align:left;
    margin-bottom:5%;
}
.page-index #pickup .inner .text_area .explanation{
    display:block;
    text-align:left;
    font-size:0.8rem;
    margin-bottom:5%;
}
.page-index #pickup .inner .text_area .btn_area{
    display:block;
    width:100%;
    height:auto;
}
.page-index #pickup .inner .text_area .btn_area a.btn{
    display:block;
    width:100%;
    height:auto;
    font-size:0.8rem;
    text-align:center;
    color:white;
    background-color:var(--fontcolor);
    padding:10px;
    transition:0.3s;
}
.page-index #pickup .inner .text_area .btn_area a.btn:hover{
    background-color:rgb(38,38,38,0.4);
}
/*******************************************************************************************
index.php Nweitem
*******************************************************************************************/
.page-index #new-items{
    margin-top:100px;
}
.page-index #new-items .inner h2{
    display: block;
    width: fit-content;
    height: auto;
    font-size: 1.6rem;
    letter-spacing: 0.2rem;
    text-align:center;
    margin:0 auto;
    position: relative;
}
.page-index #new-items .inner h2 span.h2_ber{
    display:block;
    width:50px;
    height:1px;
    background-color:var(--fontcolor);
    margin:10% auto 0 auto;
}
.page-index #new-items .inner .product-list{
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
    margin-top:50px;
}
.page-index #new-items .inner .product-list .product-item{
    display:block;
    width:22%;
    margin-bottom:5%;
}
/*img-area*/
.page-index #new-items .inner .product-list .product-item a.img-area{
    display:block;
    width:100%;
    height:auto;
    position:relative;
    overflow:hidden;
}
.page-index #new-items .inner .product-list .product-item a.img-area img{
    display:block;
    transition:0.3s;
}
.page-index #new-items .inner .product-list .product-item a.img-area::after{
    content:"";
    display:block;
    width:100%;
    height:100%;
    background-color:rgb(255,255,255,0.3);
    position:absolute;
    top:0;
    left:0;
    right:0;
    visibility:hidden;
    opacity:0;
    transition:0.3s;
}
.page-index #new-items .inner .product-list .product-item a.img-area:hover::after{
    visibility:visible;
    opacity:1;
}
.page-index #new-items .inner .product-list .product-item a.img-area:hover img{
    transform:scale(1.1, 1.1);
}
/*text-area*/
.page-index #new-items .inner .product-list .product-item .product-info{
    display:block;
    width:100%;
    padding:0.5em;
}
.page-index #new-items .inner .product-list .product-item .product-info .product-title{
    display:block;
    color:#333333;
    font-size:0.9rem;
    text-align:left;
    margin-bottom:0.5em;
}
.page-index #new-items .inner .product-list .product-item .product-info .product-price{
    display:block;
    color:#333333;
    font-size:0.8rem;
    text-align:left;
    margin-bottom:0.5em;
}
.page-index #new-items .inner .product-list .product-item .product-info .product-date{
    display:block;
    color:#333333;
    font-size:0.8rem;
    line-height:0.8rem;
    text-align:left;
}
.page-index #new-items .inner .product-list .product-item .product-info .product-cat{
    display:block;
    width:fit-content;
    color:white;
    background-color:#333333;
    font-size:0.8rem;
    text-align:left;
    padding:0.2em 0.5em;
    margin-bottom:0.5em;
}
.page-index #new-items .inner .product-list .product-item .product-info .product-cat.cat-leather{
    background-color:#5a3825;
    color:#fff;
    border:1px solid #4b2e2e; 
}
.page-index #new-items .inner .product-list .product-item .product-info .product-cat.cat-wood{
    background-color:#556b2f;
    color:#fff;
    border:1px solid #465626; 
}
.page-index #new-items .inner .product-list .product-item .product-info .product-cat.cat-etc{
    background-color:#e5e7eb;
    color:#111;
    border:1px solid #d1d5db;
}
.page-index #new-items .inner .product-list .product-item .product-info .product-excerpt{
    color:#333333;
    font-size:0.8rem;
    text-align:justify;

    display: -webkit-box;        /* Flexboxみたいな表示を使う */
    -webkit-box-orient: vertical;/* 縦方向に制御 */
    -webkit-line-clamp: 3;       /* 最大3行まで */
    line-clamp: 3;               /* 標準プロパティ（現状ほぼ効かないが警告対策用） */
    overflow: hidden;            /* はみ出した部分を非表示 */
    text-overflow: ellipsis;     /* 「…」を表示 */
    margin-bottom:10px;
}
.page-index #new-items .inner .list_btn{
    display:block;
    width:300px;
    max-width:100%;
    color:white;
    background-color:var(--fontcolor);
    padding:10px;
    margin:0 auto;
    position:relative;
}
.page-index #new-items .inner .list_btn::after{
    content:"";
    display:block;
    width:100%;
    height:100%;
    background-color:rgb(255,255,255,0.3);
    position:absolute;
    top:0;
    left:0;
    right:0;
    visibility:hidden;
    opacity:0;
    transition:0.3s;
}
.page-index #new-items .inner .list_btn:hover::after{
    visibility:visible;
    opacity:1;
}
/*******************************************************************************************
footer トップへ戻るボタン    
*******************************************************************************************/
#footer{
    position:relative;
}
#footer #return_top_btn {
    right: 1rem;
    width:3.5rem;
    height:3.5rem;
    z-index:99;/*ハンバーガーメニュー表示中は後ろに隠す*/
    scroll-behavior:smooth;
}
/*******************************************************************************************
footer
*******************************************************************************************/
#footer #footer_menu{
    margin-top:100px;
}
#footer #footer_menu #footer_menu_area{
    margin-bottom:50px;
}
#footer #footer_menu #footer_menu_area ul#footer_menu_lists{
    display:flex;
    justify-content:center;
    align-items:center;
}
#footer #footer_menu #footer_menu_area ul#footer_menu_lists li.footer_menu_item{
    display:block;
    padding:1% 5%;
}
/*******************************************************************************************
copyright
*******************************************************************************************/
#copyright{
    text-align:center;
    color:white;
    background-color:var(--fontcolor);
}
#copyright .webdesign_area{
    font-size:0.7rem;
    text-decoration:underline;
}
/*******************************************************************************************
about.php
*******************************************************************************************/
.page-about h2 {
    display: block;
    width: fit-content;
    height: auto;
    font-size: 1.6rem;
    letter-spacing: 0.2rem;
    text-align: center;
    margin: 100px auto 50px auto;
    position: relative;
}
.page-about h2 span.h2_ber{
    display: block;
    width: 50px;
    height: 1px;
    background-color: var(--fontcolor);
    margin: 10% auto 0 auto;
}
.page-about .about-lead {
    text-align: center;
    max-width: 780px;
    margin: 16px auto 0;
    line-height: 1.9;
    color: #444;
}
.page-about .about-block {
    padding: 56px 0; /* セクション間の呼吸 */
}
.page-about .about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(20px, 3vw, 40px);
    align-items: center;
}
/* altのときだけ列を入れ替える */
.page-about .about-block.alt .about-media   { grid-column: 2; }
.page-about .about-block.alt .about-content { grid-column: 1; }

.page-about .about-media {
    margin: 0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(0,0,0,0.06);
    /* 画像比率を安定化（任意：横長16:10） */
    aspect-ratio: 16 / 10;
    background: #f5f5f5;
}
.page-about .about-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.page-about .about-content h3.about-heading {
    font-size:1rem;
    margin: 0 0 12px;
    padding-left:1em;
    letter-spacing: 0.04em;
    text-align:left;
    position:relative;
}
.page-about .about-content h3.about-heading::before{
    content:"";
    display:block;
    width:5px;
    height:100%;
    background-color:#262626;
    position:absolute;
    top:50%;
    left:0;
    translate: 0 -50%;
}
.page-about .about-content p {
    text-align:justify;
    line-height: 1.9;
    color: #333;
    margin: 0 0 1em;
}
.page-about .list_btn{
    display:block;
    width:300px;
    max-width:100%;
    color:white;
    background-color:var(--fontcolor);
    text-align:center;
    padding:10px;
    margin:0 auto;
    position:relative;
}
.page-about .list_btn::after{
    content:"";
    display:block;
    width:100%;
    height:100%;
    background-color:rgb(255,255,255,0.3);
    position:absolute;
    top:0;
    left:0;
    right:0;
    visibility:hidden;
    opacity:0;
    transition:0.3s;
}
.page-about .list_btn:hover::after{
    visibility:visible;
    opacity:1;
}

/*
Organization section
*/
.page-about .about-org { padding: 56px 0; }

.page-about .org-list{
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;     /* PCは2カラム */
    /*gap: clamp(20px, 3vw, 40px);*/
    align-items: start;
    margin-top:50px;
}
.page-about .org-figure{
    margin: 0;
    text-align: center;
}
.page-about .org-figure img{
    width: 100%;
    aspect-ratio: 4 / 3;               /* 画像比率を統一（正方形なら 1/1 に） */
    object-fit: cover;
    border-radius: 12px;
    display: block;
    background: #f5f5f5;
    box-shadow: 0 6px 18px rgba(0,0,0,0.06);
}
.page-about .org-caption{
    margin-top: 12px;
}
.page-about .org-link{
    display: inline-block;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    color: var(--fontcolor, #222);
    padding-left:1em;
    position:relative;
}
.page-about .org-link::before{
    content:"";
    display:block;
    width:1em;
    height:1em;
    background-image:url(/public/img/caret-right-solid-full.svg);
    position:absolute;
    top:50%;
    left:0;
    translate:0 -50%;
}
.page-about .org-link:hover{ opacity: .8; }

/* SPは1カラムに */
@media (max-width: 768px){
  .page-about .org-list{ 
        grid-template-columns: 1fr;
        row-gap: clamp(40px, 6vw, 40px); /* ← 縦方向だけ広げる */
    }
}
/* 画像を少し小さく（PC） */
.page-about .org-figure img{
  width: clamp(220px, 75%, 500px); /* 最小220px、列幅の75%、最大360px */
  margin-inline: auto;             /* 中央寄せ */
}

/* キャプションの幅も画像に近づける（任意） */
.page-about .org-caption{
    text-align:left;
    max-width: clamp(220px, 75%, 500px);
    margin-inline: auto;
}

/* スマホ時はさらに少しだけ絞る（任意） */
@media (max-width: 768px){
  .page-about .org-figure img{
    width: clamp(200px, 85%, 300px);
  }
  .page-about .org-caption{
    max-width: clamp(200px, 85%, 300px);
  }
}
/*******************************************************************************************
contact.php お問い合わせ
*******************************************************************************************/
.page-contact #contact_container #contact_main{
    margin:0 20%;
}
.page-contact #contact_container #contact_main h2{
    display: block;
    width: fit-content;
    height: auto;
    font-size: 1.6rem;
    letter-spacing: 0.2rem;
    text-align:center;
    margin:100px auto 50px auto;
    position: relative;
}
.page-contact #contact_container #contact_main h2 span.h2_ber{
    display:block;
    width:50px;
    height:1px;
    background-color:var(--fontcolor);
    margin:10% auto 0 auto;
}
.page-contact #contact_container #contact_main p.explanation{
    display:inline-block;
    width:fit-content;
    font-size:0.8rem;
    text-align:left;
    margin:0 auto;
}
.page-contact #contact_container #contact_main .ifa_area{
    margin-top:50px;
    margin-bottom:100px;
}
.page-contact #contact_container #contact_main .contact_btn{
    display: block;
    width: 300px;
    max-width: 100%;
    color: white;
    background-color: var(--fontcolor);
    padding: 10px;
    margin: 0 auto;
    position: relative;
}
.page-contact #contact_container #contact_main .contact_btn::after{
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background-color: rgb(255, 255, 255, 0.3);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    visibility: hidden;
    opacity: 0;
    transition: 0.3s;
}
.page-contact #contact_container #contact_main .contact_btn:hover::after{
    visibility:visible;
    opacity:1;
}
/*******************************************************************************************
list.php 商品一覧ページ
*******************************************************************************************/
.page-list h2 {
    display: block;
    width: fit-content;
    height: auto;
    font-size: 1.6rem;
    letter-spacing: 0.2rem;
    text-align: center;
    margin: 100px auto 50px auto;
    position: relative;
}
.page-list h2 span.h2_ber{
    display: block;
    width: 50px;
    height: 1px;
    background-color: var(--fontcolor);
    margin: 10% auto 0 auto;
}
.page-list #productList{
    display:flex;
    width:100%;
    flex-wrap:wrap;
}
.page-list #productList .product-item{
    display:block;
    width:25%;
    padding:1%;
}
/*img-area*/
.page-list #productList .product-item a.img-area{
    display:block;
    width:100%;
    height:auto;
    position:relative;
    overflow:hidden;
}
.page-list #productList .product-item a.img-area img{
    display:block;
    transition:0.3s;
}
.page-list #productList .product-item a.img-area::after{
    content:"";
    display:block;
    width:100%;
    height:100%;
    background-color:rgb(255,255,255,0.3);
    position:absolute;
    top:0;
    left:0;
    right:0;
    visibility:hidden;
    opacity:0;
    transition:0.3s;
}
.page-list #productList .product-item a.img-area:hover::after{
    visibility:visible;
    opacity:1;
}
.page-list #productList .product-item a.img-area:hover img{
    transform:scale(1.1, 1.1);
}
/*text-area*/
.page-list #productList .product-item .product-info{
    display:block;
    width:100%;
    padding:0.5em;
}
.page-list #productList .product-item .product-info .product-title{
    display:block;
    color:#333333;
    font-size:0.9rem;
    text-align:left;
    margin-bottom:0.5em;
}
.page-list #productList .product-item .product-info .product-price{
    display:block;
    color:#333333;
    font-size:0.8rem;
    text-align:left;
}
.page-list #productList .product-item .product-info .product-date{
    display:block;
    color:#333333;
    font-size:0.8rem;
    line-height:0.8rem;
    text-align:left;
}
.page-list #productList .product-item .product-info .product-cat{
    display:block;
    width:fit-content;
    color:white;
    background-color:#333333;
    font-size:0.8rem;
    text-align:left;
    padding:0.2em 0.5em;
    margin-bottom:0.5em;
}
.page-list #productList .product-item .product-info .product-cat.cat-leather{
    background-color:#5a3825;
    color:#fff;
    border:1px solid #4b2e2e; 
}
.page-list #productList .product-item .product-info .product-cat.cat-wood{
    background-color:#556b2f;
    color:#fff;
    border:1px solid #465626; 
}
.page-list #productList .product-item .product-info .product-cat.cat-etc{
    background-color:#e5e7eb;
    color:#111;
    border:1px solid #d1d5db;
}
.page-list #productList .product-item .product-info .product-excerpt{
    color:#333333;
    font-size:0.8rem;
    text-align:justify;

    display: -webkit-box;        /* Flexboxみたいな表示を使う */
    -webkit-box-orient: vertical;/* 縦方向に制御 */
    -webkit-line-clamp: 3;       /* 最大3行まで */
    line-clamp: 3;               /* 標準プロパティ（現状ほぼ効かないが警告対策用） */
    overflow: hidden;            /* はみ出した部分を非表示 */
    text-overflow: ellipsis;     /* 「…」を表示 */
    margin-bottom:10px;
}
/*******************************************************************************************
detail.php 商品情報詳細ページ
*******************************************************************************************/
.page-detail h2 {
    display: block;
    width: fit-content;
    height: auto;
    font-size: 1.6rem;
    letter-spacing: 0.2rem;
    text-align: center;
    margin: 100px auto 50px auto;
    position: relative;
}
.page-detail h2 span.h2_ber{
    display: block;
    width: 50px;
    height: 1px;
    background-color: var(--fontcolor);
    margin: 10% auto 0 auto;
}
.page-detail .product-single{
    display:flex;
    flex-wrap:wrap;
    align-items:flex-start;   /* 伸びないように */
}
.page-detail .product-single .product-header{
    display:block;
    width:100%;
    margin-top:50px;
    padding-bottom:50px;
}
.page-detail .product-single .product-header h1{
    font-size:1.5rem;
}
.page-detail .product-single .product-figure{
    display:block;
    width: min(500px, 50%);   /* 500pxと50%の小さい方 */
    aspect-ratio: 1 / 1;
}
.page-detail .product-single .product-figure .product-figure-main { 
    aspect-ratio: 1/1;
    border:1px solid #ddd;
    overflow:hidden;
}
.page-detail .product-single .product-figure .product-figure-main img {
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:opacity .2s ease; 
}
.page-detail .product-single .product-figure .product-figure-sub.thumbs {
    display:flex;
    width:100%;
    /*flex-wrap:wrap;*/
    gap:8px;
    margin-top:10px;
}
.page-detail .product-single .product-figure .product-figure-sub.thumbs button.thumb {
    border:2px solid transparent;
    padding:0;
    border:1px solid #ddd;
    background:#fff;
    overflow:hidden;
    cursor:pointer;
}
.page-detail .product-single .product-figure .product-figure-sub.thumbs.thumb.is-active {
    border-color:#4087bf;
}
.page-detail .product-single .product-figure .product-figure-sub.thumbs img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.page-detail .product-single .product-information{
    display:block;
    width:40%;
    margin-left:100px;
}
.page-detail .product-single .product-information h3{
    display:block;
    width:100%;
    font-size:1.5rem;
    text-align:left;
    padding-left:0.5em;
    margin-bottom:20px;
    position:relative;
}
.page-detail .product-single .product-information h3:before{
    content:"";
    display:block;
    width:5px;
    height:100%;
    background-color:black;
    position:absolute;
    top:0;
    left:0;
}
.page-detail .product-single .product-information .product-excerpt{
    display:block;
    width:100%;
    text-align:justify;
    margin-bottom:50px;
}
.page-detail .product-single .product-information .product-meta{
    display:block;
    width:100%;
}
.page-detail .product-single .product-information .product-meta .product-meta-tbl{
    display: table;
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;         /* 幅計算を安定させる */
}
.page-detail .product-single .product-information .product-meta .product-meta-tbl tbody{
    display: table-row-group;/*初期値*/
    width:100%;
}
.page-detail .product-single .product-information .product-meta .product-meta-tbl tbody tr{
    display: table-row; /*初期値*/
    width:100%;
}
.page-detail .product-single .product-information .product-meta .product-meta-tbl tbody th{
    display: table-cell;/*初期値*/
    width: 30%;                  /* ラベル列 */
    background: #f8f8f8;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    padding: 8px 12px;
    text-align: left;
}
.page-detail .product-single .product-information .product-meta .product-meta-tbl tbody td{
    display:table-cell;/*初期値*/
    width: 70%;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    padding: 8px 12px;
    text-align: left;
}
.page-detail .product-single .product-information .product-meta .product-meta-tbl tbody td span.zei{
    display:inline-block;
    font-size:0.7rem;
    margin-left:10px;
}
.page-detail .product-single .product-information .product-meta .product-meta-tbl tbody td span.unit{
    display:inline-block;
    font-size:1rem;
    margin-left:10px;
}
/*******************************************************************************************
商品のナビゲーションボタン
*******************************************************************************************/
/* 共通のナビゲーション枠 */
.product-nav {
    display:block;
    width:100%;
    margin: 5em auto 2em auto;
    text-align: center;
}
.product-nav ul {
    display: flex;
    justify-content: center;
    list-style: none;
    margin: 0;
    padding: 0;
}
.product-nav li{
    margin:0 2%;
}
/* 前後リンク共通 */
.product-nav li a,
.product-nav li span {
    display: inline-block;
    padding: 0.6em 1.2em;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #f8f8f8;
    color: #333;
    text-decoration: none;
    font-size: 0.95rem;
    transition: all 0.2s ease;
}
/* ホバー時 */
.product-nav li a:hover {
    background: #4087bf;   /* お好みのブランドカラーに変更可 */
    color: #fff;
    border-color: #4087bf;
}

/* 無効状態（spanのとき） */
.product-nav li span[aria-disabled="true"] {
    color: #aaa;
    background: #f0f0f0;
    cursor: not-allowed;
}

/* 一覧へ戻るリンク */
.back-to-list {
    display:block;
    margin:100px auto 50px auto;
    text-align: center;
}

.back-to-list a {
    display: block;
    width: 300px;
    max-width: 100%;
    color: white;
    background-color: var(--fontcolor);
    padding: 10px;
    margin: 0 auto;
    position: relative;
}
.back-to-list a:after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background-color: rgb(255, 255, 255, 0.3);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    visibility: hidden;
    opacity: 0;
    transition: 0.3s;
}
.back-to-list a:hover::after{
    visibility:visible;
    opacity:1;
}
/*******************************************************************************************
お知らせ一覧ページ news.php
*******************************************************************************************/
.page-news-archive #news h2{
    display: block;
    width: fit-content;
    height: auto;
    font-size: 1.6rem;
    letter-spacing: 0.2rem;
    text-align: center;
    margin: 100px auto 50px auto;
    position: relative;
}
.page-news-archive #news h2 span.h2_ber {
    display: block;
    width: 50px;
    height: 1px;
    background-color: var(--fontcolor);
    margin: 10% auto 0 auto;
}
/* リスト全体の余白・区切り */
.page-news-archive #newsList.news-list {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0 0 1.5rem;
}
/* 各お知らせのボックス */
.page-news-archive #newsList .news-item {
    display: grid;
    /* PC：1行目（ヘッダー）は Date / NEW / Cat / Title の4列
        2行目に本文（news-body）をフル幅で配置 */
    grid-template-columns: 10rem 3.2rem 6rem 1fr; /* お好みで調整可 */
    grid-auto-rows: auto;
    row-gap: .5rem;
    column-gap: .75rem;
    padding: .9rem 0;
    border-bottom: 1px solid #eee;
}
/* header 内の直下要素を親グリッドに“そのまま載せる” */
.page-news-archive #newsList .news-item .news-head {
  display: contents; /* HTML構造を変えずにグリッドに参加させる */
}
/* 1行目の4セル配置（PC） */
.page-news-archive #newsList .news-date  {
    grid-column: 1;
    align-self: center;
    white-space: nowrap;
    color: #666;
}
.page-news-archive #newsList .badge-new  { 
    grid-column: 2;
    align-self: center;
    justify-self: center;
}
.page-news-archive #newsList .news-cat   { 
    grid-column: 3; 
    align-self: center; 
    white-space: nowrap; 
    font-size: .9em; 
}
.page-news-archive #newsList .news-title { 
    grid-column: 4; 
    align-self: center;
    text-align:left;
}
/* 本文は2行目で横幅いっぱい（PC） */
.page-news-archive #newsList .news-body {
    grid-column: 4 / 5; /* 4列目だけを指定 */
    line-height: 1.7;
    text-align:left;
    color: #333;
}
/* タイトルのはみ出し防止（1行省略） */
.page-news-archive #newsList .news-title {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* NEWバッジ（固定幅でレイアウト安定） */
.page-news-archive #newsList .badge-new {
    display: inline-block;
    width: 3em;
    text-align: center;
    font-size: .78em;
    font-weight: 700;
    color: #fff;
    background: #e60033;
    border-radius: 3px;
    padding: .15em 0;
}
.page-news-archive #newsList .badge-new.is-hidden {
    visibility: hidden;
}
/* カテゴリの見た目合わせ（トップと同様） */
.page-news-archive #newsList .news-cat {
    border: 1px solid #262626;
    border-radius: 2px;
    padding: 0 .4em;
}
/*******************************************************************************************
slick
*******************************************************************************************/
.slick-prev{
    position:absolute;
    left:0;
    z-index:100;
}
.slick-prev::before {
    content:"";
    display:none;
    width:15px;
    height:15px;
    left: 0;
    border-left: 1.5px solid #fff;
    border-bottom: 1.5px solid #fff;
    -webkit-transform: rotate(45deg);
    transform: translateX(100%) rotate(45deg);
}
.slick-next{
    position:absolute;
    right:0;
    z-index:100;
}
.slick-next::before {
    content:"";
    display:none;
    width:15px;
    height:15px;
    right: 0;
    border-top: 1.5px solid #fff;
    border-right: 1.5px solid #fff;
    -webkit-transform: rotate(45deg);
    transform: translateX(-100%) rotate(45deg);
}
.slick-dots{
    display:none !important;
}
/*******************************************************************************************
ページネーション（共通）
*******************************************************************************************/
:root {
    --pg-accent: #333;  /* アクティブ色・ホバー色 */
    --pg-fg:     #333;      /* 文字色 */
    --pg-bg:     #fff;      /* 背景色 */
    --pg-border: #ddd;      /* 枠線色 */
    --pg-radius: 0;    /* 丸み（pill風） */
    --pg-gap:    6px;       /* ボタン間のすき間 */
    --pg-pad-y:  0.5rem;    /* ボタン上下の余白 */
    --pg-pad-x:  0.75rem;   /* ボタン左右の余白 */
    --pg-fz:     0.95rem;   /* 文字サイズ */
}
/* 件数表示のスタイル（任意） */
#resultCount {
    margin: 16px 0 8px;
    text-align: center;
    font-size: 0.95rem;
    color: #666;
}
/*******************************************************************************************
ページネーション（list.php 商品一覧ページ用）
*******************************************************************************************/
/* ラッパー nav */
#pager.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 12px 0 24px;
}
/* ULをフレックスで横並び＋折り返し */
#pager.pagination ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pg-gap);
    list-style: none;
    margin: 0;
    padding: 0;
}
/* 各LIは特に装飾しない（a/spanをボタン風に） */
#pager.pagination li {
    margin: 0;
    padding: 0;
}
/* ボタンのベース（a と span を同じ見た目に） */
#pager.pagination a,
#pager.pagination span {
    display: inline-block;
    min-width: 2.4rem;              /* 数字ボタンの最小幅 */
    text-align: center;
    font-size: var(--pg-fz);
    line-height: 1;
    text-decoration: none;
    color: var(--pg-fg);
    background: var(--pg-bg);
    border: 1px solid var(--pg-border);
    border-radius: var(--pg-radius);
    padding: var(--pg-pad-y) var(--pg-pad-x);
    transition: border-color .15s, color .15s, background-color .15s, box-shadow .15s;
}
/* ホバー（リンクのみ） */
#pager.pagination a:hover {
    border-color: var(--pg-accent);
    color: var(--pg-accent);
}

/* フォーカス可視（キーボード操作向け） */
#pager.pagination a:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--pg-accent) 40%, transparent);
    outline-offset: 2px;
}
/* 現在ページ（JSが <span aria-current="page"> を出力） */
#pager.pagination [aria-current="page"] {
    background: var(--pg-accent);
    color: #fff;
    border-color: var(--pg-accent);
    cursor: default;
}
/* 非活性（「最初」「前へ」など押せないときは <span aria-disabled="true">） */
#pager.pagination [aria-disabled="true"] {
    opacity: 0.45;
    cursor: default;
}
/* 省略記号（…）を置く想定があれば見た目を少し控えめに */
#pager.pagination .ellipsis span {
    border: none;
    background: transparent;
    padding: var(--pg-pad-y) calc(var(--pg-pad-x) * 0.6);
    color: #999;
}
/*******************************************************************************************
ページネーション（news-archive.php お知らせ一覧ページ用）
*******************************************************************************************/
/* ラッパー nav */
#newsPager.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 12px 0 24px;
}
/* ULをフレックスで横並び＋折り返し */
#newsPager.pagination ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pg-gap);
    list-style: none;
    margin: 0;
    padding: 0;
}
/* 各LIは特に装飾しない（a/spanをボタン風に） */
#newsPager.pagination li {
    margin: 0;
    padding: 0;
}
/* ボタンのベース（a と span を同じ見た目に） */
#newsPager.pagination a,
#newsPager.pagination span {
    display: inline-block;
    min-width: 2.4rem;              /* 数字ボタンの最小幅 */
    text-align: center;
    font-size: var(--pg-fz);
    line-height: 1;
    text-decoration: none;
    color: var(--pg-fg);
    background: var(--pg-bg);
    border: 1px solid var(--pg-border);
    border-radius: var(--pg-radius);
    padding: var(--pg-pad-y) var(--pg-pad-x);
    transition: border-color .15s, color .15s, background-color .15s, box-shadow .15s;
}
/* ホバー（リンクのみ） */
#newsPager.pagination a:hover {
    border-color: var(--pg-accent);
    color: var(--pg-accent);
}

/* フォーカス可視（キーボード操作向け） */
#newsPager.pagination a:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--pg-accent) 40%, transparent);
    outline-offset: 2px;
}
/* 現在ページ（JSが <span aria-current="page"> を出力） */
#newsPager.pagination [aria-current="page"] {
    background: var(--pg-accent);
    color: #fff;
    border-color: var(--pg-accent);
    cursor: default;
}
/* 非活性（「最初」「前へ」など押せないときは <span aria-disabled="true">） */
#newsPager.pagination [aria-disabled="true"] {
    opacity: 0.45;
    cursor: default;
}
/* 省略記号（…）を置く想定があれば見た目を少し控えめに */
#newsPager.pagination .ellipsis span {
    border: none;
    background: transparent;
    padding: var(--pg-pad-y) calc(var(--pg-pad-x) * 0.6);
    color: #999;
}
/*******************************************************************************************
カテゴリーボタン
*******************************************************************************************/
:root{
    --fl-accent: #333;; /* アクティブ/ホバー色（ブランド色に変更OK） */
    --fl-fg:     #333;    /* 文字色 */
    --fl-bg:     #fff;    /* 背景色 */
    --fl-bd:     #ddd;    /* 枠線色 */
    --fl-radius: 0px;  /* pill形の丸み */
    --fl-pad-y:  .45rem;
    --fl-pad-x:  .9rem;
    --fl-gap:    .5rem;
    --fl-fz:     .95rem;
}
.filters{
    display:flex;
    flex-wrap:wrap;
    gap:var(--fl-gap);
    align-items:center;
    margin:0 0 1rem;
}
.filter-btn{
    appearance:none;
    border:1px solid var(--fl-bd);
    background:var(--fl-bg);
    color:var(--fl-fg);
    border-radius:var(--fl-radius);
    padding:var(--fl-pad-y) var(--fl-pad-x);
    font-size:var(--fl-fz);
    line-height:1;
    cursor:pointer;
    transition:color .15s, border-color .15s, background-color .15s, box-shadow .15s;
}
.filter-btn:hover{
    border-color:var(--fl-accent);
    color:var(--fl-accent);
}
.filter-btn:focus-visible{
    outline:3px solid color-mix(in srgb, var(--fl-accent) 40%, transparent);
    outline-offset:2px;
}
.filter-btn.is-active{
    background:var(--fl-accent);
    border-color:var(--fl-accent);
    color:#fff;
}
/*******************************************************************************************
Media Queries
*******************************************************************************************/
@media only screen and (min-width: 1930px) {

}
/* Smaller than standard 1200 */
@media only screen and (max-width: 1199px) {

}
/* Smaller than standard 980 */
@media only screen and (max-width: 991px) {

}
@media only screen and (max-width: 1024px) {

}
@media only screen and (max-width: 780px) {

}
/* Tablet Landscape */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {

}

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

}

/* All Mobile Sizes */
@media only screen and (max-width: 767px) {

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

}

/* Mobile Portrait Size */
/*@media only screen and (max-width: 479px) {*/
@media only screen and (max-width: 768px) {
    /*スマホ用改行*/
    .br_sm{
        display:block;
    }
    /*ＰＣ用改行*/
    .br_pc{
        display:none;
    }
    .wrapper {
        width:90%;
        max-width:90%;
        margin: 0 20px;
    }
    /*header*/
    #header #header_menu_area #header_menu #nav{
        display:none;
    }
    #header .hamburger_btn{
        display:flex;
    }
    #header #header_slide_menu_area{
        display:block;
    }
    /*maivisual*/
    #mainvisual_slide .wrapper{
        width:100%;
        max-width:100%;
        margin:0;
    }
    /*information*/
    .page-index #infomation .inner{
        flex-direction:column;
    }
    .page-index #infomation .inner .title_area{
        width:100%;
    }
    .page-index #infomation .inner .title_area h2 span.h2_ber{
        margin:10% auto 0 auto;
    }
    .page-index #infomation .inner .content_area{
        width:100%;
        margin-top:70px;
    }
    .page-index #infomation .inner .content_area #topNewsList .news-item.-compact {
        grid-template-columns: 8.2rem 3rem 1fr; /* 日付 / NEW / タイトル */
    }
    /* お知らせヘッダー部分をグリッド化 */
    .page-index #infomation .inner .content_area #topNewsList .news-item .news-head {
        display: grid;
        grid-template-columns: auto auto auto; /* 日付・NEW・カテゴリの3カラム */
        grid-template-rows: auto auto;         /* 1行目・2行目 */
        gap: 0.25rem 0.5rem;                   /* 行・列の隙間 */
        align-items: center;
    }
    /* 1行目に並べたい要素（date, badge, cat） */
    .page-index #infomation .inner .content_area #topNewsList .news-item .news-head .news-date {
        grid-row: 1;
        grid-column: 1;
        text-align:left;
    }
    .page-index #infomation .inner .content_area #topNewsList .news-item .news-head .badge-new {
        grid-row: 1;
        grid-column: 2;
    }
    .page-index #infomation .inner .content_area #topNewsList .news-item .news-head .news-cat {
        grid-row: 1;
        grid-column: 3;
    }
    /* タイトルは2行目で横いっぱい */
    .page-index #infomation .inner .content_area #topNewsList .news-item .news-head .news-title {
        grid-row: 2;
        grid-column: 1 / -1; /* 1列目から最後の列まで広げる */
    }
    .page-index #infomation .inner .content_area #topNewsList .news-cat {
        grid-column: 1 / -1;  /* 2段目に回す（全幅） */
        order: 2;             /* タイトルの下に来るよう視覚順調整 */
        font-size: .85em;
        opacity: .9;
    }
    .page-index #infomation .inner .content_area #topNewsList .news-title {
        grid-column: 3;
    }
    .page-index #infomation a.btn{
        margin: 5% auto 0 auto;
    }
    /*pickup*/
    .page-index #pickup{
        margin-top:100px;
    }
    .page-index #pickup .inner{
        flex-direction:column;
    }
    .page-index #pickup .inner .img_area{
        width:100%;
    }
    .page-index #pickup .inner .text_area{
        width:100%;
    }
    /*newitem*/
    .page-index #new-items .inner .product-list .product-item{
        display:block;
        width:48%;
        margin-bottom:10%;
    }
    .page-index #new-items .inner .product-list .product-item .product-info p.product-title{
        display: -webkit-box;
        font-size: 0.95rem;      /* お好みで */
        line-height: 1.4;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;   /* ← 2行でカット */
        overflow: hidden;
        /* Firefoxなど非対応ブラウザ向けの見た目安定策（2行ぶんの高さを確保） */
        min-height: calc(1.4em * 2);
    }
    /*contact*/
    .page-contact #contact_container #contact_main{
        margin:0;
    }
    /*footer*/
    #footer #footer_menu #footer_menu_area ul#footer_menu_lists{
        flex-direction:column;
        flex-wrap:wrap;
    }
    #footer #footer_menu #footer_menu_area ul#footer_menu_lists li.footer_menu_item{
        display:block;
        width:33%;
        padding:2% 0;
    }
    /*about*/
    .page-about .about-grid{ 
        grid-template-columns: 1fr;
    }
    /*
    altブロックだけ順番を固定：画像を先、テキストを後
    */
    .page-about .about-block.alt .about-media {
        grid-column: 1;
        grid-row: 1;   /* 画像を1段目 */
    }
    .page-about .about-block.alt .about-content { 
        grid-column: 1;
        grid-row: 2;   /* テキストを2段目 */
    }
    /*list.php 商品一覧*/
    :root{
        --fl-pad-y:.4rem;
        --fl-pad-x:.7rem;
        --fl-fz:.9rem;
        --fl-gap:.4rem;
    }
    /*ページネーション用*/
    :root {
        --pg-gap:   4px;
        --pg-pad-y: 0.45rem;
        --pg-pad-x: 0.6rem;
        --pg-fz:    0.9rem;
    }
    #resultCount {
        font-size: 0.9rem; 
    }
    /*newitem*/
    .page-list #productList {
        justify-content:space-between;
    }
    .page-list #productList .product-item{
        display:block;
        width:48%;
        margin-bottom:10%;
    }
    /*detail.php*/
    .page-detail .product-single .product-figure {
        width:100%;
    }
    .page-detail .product-single .product-information {
        width:100%;
        margin-top:50px;
        margin-left:0;
    }
    /*news-archive.php*/
    .page-news-archive #newsList .news-item {
        /* スマホは 1行目（date / new / cat）、2行目（title）、3行目（body） */
        grid-template-columns: auto auto auto;  /* 日付 / NEW / カテゴリ */
        grid-auto-rows: auto;
        row-gap: .35rem;
        column-gap: .5rem;
        padding: .8rem 0;
    }
    /* 1行目の配置（スマホ） */
    .page-news-archive #newsList .news-date  { 
        grid-row: 1; 
        grid-column: 1;
        text-align:left;
    }
    .page-news-archive #newsList .badge-new  { 
        grid-row: 1; 
        grid-column: 2; 
        justify-self: start; 
    }
    .page-news-archive #newsList .news-cat   { 
        grid-row: 1; 
        grid-column: 3; 
    }
    /* 2行目：タイトルは横いっぱい */
    .page-news-archive #newsList .news-title { 
        grid-row: 2;
        grid-column: 1 / -1; 
        white-space: normal; 
    }
    /* 3行目：本文は横いっぱい */
    .page-news-archive #newsList .news-body  { 
        grid-row: 3; 
        grid-column: 1 / -1; 
    }
    /* 視認性向上の微調整 */
    .page-news-archive #newsList .news-title { 
        font-size: 1.05rem; 
        line-height: 1.5; 
    }
    .page-news-archive #newsList .news-cat   {
        font-size: .85rem;
    }

}
@media only screen and (max-width: 320px) {

}
/* Center menu vertically */
@media screen and (min-width: 1025px) {
	
}