/* カスタマイズ用CSS */

/* ベース要素 */
body {
    -webkit-print-color-adjust: exact;
  }
.ec-role {
    margin: 0 auto;
    box-sizing: border-box;
    font-size: 14px;
    line-height: 1.6;
    color: #333;
    -webkit-text-sizev-adjust: 100%;
    width: 100%;
    max-width: 930px;
}
@media screen and (min-width: 1024px) {
    .ec-role {
        width: calc(100% - 270px);
        margin-left: 30px;
        margin-right: 0;
    }
}
@media screen and (min-width: 1348px), print{
    .ec-role {
        width: 930px;
        margin-right: 0;
        margin-left: auto;
    }
}
.ec-pageHeader{
    margin-bottom:20px;
}
.ec-pageHeader h1{
    margin-bottom: 30px;
    padding-bottom: 10px;
    border-bottom: 3px solid #9d0000;
    color: #222;
    font-size: 2.2rem;
}
.ec-off1Grid{
    display: block;
    margin-bottom: 2em;
}
.ec-off1Grid a{
    color: #337ab7;
    text-decoration: underline;
}
.ec-off1Grid a:hover{
    color: #9d0000;
    text-decoration: none;
}
@media print{
    .tracking-nav {
        display: none;
    }
}
/* レスポンシブ切り替え */
.pc{
    display: none;
}
@media screen and (min-width: 600px){
    .pc{
        display: block;
    }
    .sp{
        display: none;
    }
}

/* ブレイクポイント変更 */

@media screen and (min-width: 1024px) {
    .content {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin: 0 auto;
        max-width: 100%;
    }
    .content--left {
        display: block;
        width: 240px;
    }
    .content--right-none {
        width: calc(100% - 270px);
        margin-left: 30px;
        margin-right: 0;
    }
    .main-header .category__nav {
        display: none;
    }
    .link-unit {
        overflow: unset;
        margin-bottom: 20px;
    }
    .block-detail__contents {
        width: calc(100% - 420px);
        padding: 40px 30px;
        margin-left: 20px;
    }
}
@media screen and (min-width: 1024px) and (max-width: 1347px)  {
    .content {
        justify-content: center;
    }
    .content--main{
        margin-left: 30px;
        margin-right: 0;
    }
}
@media screen and (max-width: 1240px)  {
    .content {
        padding: 0 15px;
        width: 100%;
        margin: 0;
    }
}
@media screen and (min-width: 1024px) and (max-width: 1220px) {
    .block-detail__item {
        display: block;
    }
    .block-detail__item__count__form {
        margin-top: 10px;
        font-size: 1.6rem;
    }
    .block-detail__boxitem {
        flex-wrap: wrap;
    }
    .block-detail__boxitem__name {
        flex: auto;
    }
}
@media screen and (min-width: 600px) and (max-width: 1023px) {
    .link-unit__inr .button__fixed {
        padding-right: 0;
        padding-left: 0;
        margin-right: 0;
        width: calc((100vw - 60px) / 5);
        max-width: 150px;
    }
    .block-productlist__item {
        width: calc((100% - 80px) / 5);
    }
    .block-productlist__item:nth-child(n+3) {
        margin-top: 0;
    }
    .block-productlist__item:not(:nth-child(2n+1)) {
        margin-left: auto;
    }
    .block-productlist__item:not(:nth-child(5n+1)) {
        margin-left: 20px;
    }
    .block-productlist__item:nth-child(n+6) {
        margin-top: 30px;
    }
    .block-productlist__item:nth-child(2n+3):before {
        content: none;
    }
}
@media screen and (max-width: 300px) {
    .main-header__body .logo img {
        height: 100%;
        max-height: 60px;
    }
    .user-info__text {
        display: flex;
        align-items: center;
    }
    .user-info__name {
        font-size: 1rem;
    }
    .header-full .user-info__benefit__link {
        padding: 3px 5px;
        font-size: 1rem;
    }
    .main-header__body.unlogged {
        padding: 6px;
    }
}


/* ========== レイアウト・表示 ========== */
/* Flexboxを適用 */
.u-flex { display: flex; }
/* 折り返しを許可 */
.u-flex-wrap { flex-wrap: wrap; }
/* 縦並び（縦方向のflex） */
.u-flex-column { flex-direction: column; }
/* 横方向中央寄せ */
.u-jc-center { justify-content: center; }
/* 両端揃え */
.u-jc-between { justify-content: space-between; }
/* 縦方向中央揃え */
.u-ai-center { align-items: center; }
/* インラインブロック表示 */
.u-inline-block { display: inline-block; }

/* ========== ギャップ（Flex/Gridの隙間） ========== */
.u-gap8 { gap: 8px; }
.u-gap16 { gap: 16px; }
.u-gap24 { gap: 24px; }
.u-gap32 { gap: 32px; }
.u-gap40 { gap: 40px; }
.u-gap48 { gap: 48px; }
.u-gap64 { gap: 64px; }
.u-gap80 { gap: 80px; }


/* ========== 余白（マージン・パディング） ========== */
/* 左右中央寄せ（margin auto） */
.u-mx-auto {
    margin-left: auto;
    margin-right: auto;
    width: fit-content;
}

/* 上下余白ユーティリティ */
.mT10{margin-top:10px;}
.mT20{margin-top:20px; }
.mT30{margin-top:30px;}
.mT40{margin-top:40px;}
.mT50{margin-top:50px;}
.mB10{margin-bottom:10px;}
.mB20{margin-bottom:20px;}
.mB30{margin-bottom:30px;}
.mB40{margin-bottom:40px;}
.mB50{margin-bottom:50px;}

.u-mt8 { margin-top: 8px; }
.u-mt16 { margin-top: 16px; }
.u-mt24 { margin-top: 24px; }
.u-mt32 { margin-top: 32px; }
.u-mt40 { margin-top: 40px; }
.u-mt48 { margin-top: 48px; }
.u-mt56 { margin-top: 56px; }
.u-mt64 { margin-top: 64px; }
.u-mt72 { margin-top: 72px; }
.u-mt80 { margin-top: 80px; }
.u-mt88 { margin-top: 88px; }
.u-mt96 { margin-top: 96px; }
.u-mb8 { margin-bottom: 8px; }
.u-mb16 { margin-bottom: 16px; }
.u-mb24 { margin-bottom: 24px; }
.u-mb32 { margin-bottom: 32px; }
.u-mb40 { margin-bottom: 40px; }
.u-mb48 { margin-bottom: 48px; }
.u-mb56 { margin-bottom: 56px; }
.u-mb64 { margin-bottom: 64px; }
.u-mb72 { margin-bottom: 72px; }
.u-mb80 { margin-bottom: 80px; }
.u-mb88 { margin-bottom: 88px; }
.u-mb96 { margin-bottom: 96px; }
.u-pt8 { padding-top: 8px; }
.u-pt16 { padding-top: 16px; }
.u-pt24 { padding-top: 24px; }
.u-pt32 { padding-top: 32px; }
.u-pt40 { padding-top: 40px; }
.u-pt48 { padding-top: 48px; }
.u-pt56 { padding-top: 56px; }
.u-pt64 { padding-top: 64px; }
.u-pt72 { padding-top: 72px; }
.u-pt80 { padding-top: 80px; }
.u-pt88 { padding-top: 88px; }
.u-pt96 { padding-top: 96px; }
.u-pb8 { padding-bottom: 8px; }
.u-pb16 { padding-bottom: 16px; }
.u-pb24 { padding-bottom: 24px; }
.u-pb32 { padding-bottom: 32px; }
.u-pb40 { padding-bottom: 40px; }
.u-pb48 { padding-bottom: 48px; }
.u-pb56 { padding-bottom: 56px; }
.u-pb64 { padding-bottom: 64px; }
.u-pb72 { padding-bottom: 72px; }
.u-pb80 { padding-bottom: 80px; }
.u-pb88 { padding-bottom: 88px; }
.u-pb96 { padding-bottom: 96px; }


.fL{float:left;}
.fR{float:right;}

/* ========== テキスト関連 ========== */
/* テキスト中央寄せ */
.u-text-center { text-align: center; }
/* 太字 */
.u-text-bold { font-weight: bold; }
/* 小さめの文字サイズ */
.u-text-small { 
    font-size: clamp(1rem, 2.5vw, 1.1rem); 
    line-height: clamp(24px, 2.5vw, 32px);
}
/* 大きめの文字サイズ */
.u-text-middle { 
    font-size: clamp(1.25rem, 2vw, 1.4rem); 
    line-height: clamp(24px, 2.5vw, 32px);
}
/* 大きめの文字サイズ */
.u-text-large { 
    font-size: clamp(1.5rem, 2vw, 1.8rem);
    line-height: clamp(24px, 2.5vw, 32px);
}
/* 行間を詰める */
.u-lh-tight { line-height: 1.2; }
/* 行間を広くする */
.u-lh-loose { line-height: 1.8; }


/* 見出しの装飾クラス */
.heading-xl { 
    font-size: clamp(28px, 4vw, 36px);
    line-height: 1.5;
    margin-top: 48px;
    margin-bottom: 24px;
    letter-spacing: 0.03em;
}
.heading-l { 
    font-size: clamp(22px, 3vw, 28px);
    line-height: 1.5;
    margin-top: 48px;
    margin-bottom: 24px;
    letter-spacing: 0.03em;
}
.heading-m {  
    font-size: clamp(18px, 2.2vw, 22px);
    line-height: 1.6;
    margin-top: 32px;
    margin-bottom: 16px;
    letter-spacing: 0.02em;
}

.section-title	セクション用見出し（意味）	LPなどで共通のタイトル装飾枠
.block-title	コンポーネント単位の見出し	例：商品ブロック、ランキング枠など
.title-decor-line	左線付きなどの装飾	border-left / ::beforeで演出可能
.title-border-bottom	下線ありの見出し	border-bottom または box-shadow で演出


/* ========== 幅・高さ ========== */
/* 幅100% */
.u-w100 { width: 100%; }
/* 幅50% */
.u-w50 { width: 50%; }
/* 高さ自動 */
.u-h-auto { height: auto; }
/* 高さ100% */
.u-h-full { height: 100%; }
/* 最大幅320px */
.u-maxw-sm { max-width: 320px; }
/* 最大幅640px */
.u-maxw-md { max-width: 640px; }

/* ========== 表示制御 ========== */
/* 非表示（display: none） */
.u-hidden { display: none; }
/* 視覚的には非表示、スクリーンリーダーでは読み上げ（アクセシビリティ対応） */
.u-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ========== 装飾系 ========== */
/* 標準の角丸 */
.u-radius { border-radius: 4px; }
/* 小さめの角丸 */
.u-radius-sm { border-radius: 2px; }
/* 丸形（全体を丸くする） */
.u-radius-full { border-radius: 9999px; }
/* 標準のシャドウ */
.u-shadow {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
/* シャドウなし */
.u-shadow-none {
  box-shadow: none;
}
/* 英字を大文字に変換 */
.u-uppercase { text-transform: uppercase; }
/* 改行させない */
.u-nowrap { white-space: nowrap; }

/* 文字色 */
.colorRd{
    color: #9d0000;
}
.red_b{
    color: #9d0000;
    font-weight: bold;
}
.txt_defo{
    font-size: 14px;
    margin-top: 0;
}
.txt_emp{
    font-size: 16px;
    font-weight: bold;
}
/* ボタン類 */
.block-history__order__btns .block-history__order__btn .primary-button{
    border-width: 2px;
    background: #f3f3f3;
    color: #337ab7;
}
.btn_box{
    margin: 60px 0;
    text-align: center;
}
.btn_box .copy{
    margin-bottom: 20px;
    font-size: 22px;
    font-weight: bold;
}
a.btn_basis{
    display: inline-block;
    padding: 10px 20px;
    background-color: #9d0000;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
}
a.btn_basis:hover{
    opacity: 0.7;
    text-decoration: none;
}
a.btn_large{
    display: block;
    padding: 16px 34px;
    font-size: 18px;
}
.btn_register{
    margin: 0 auto 20px;
}
@media screen and (min-width: 600px), print{
    .btn_register{
        width: 50%;
    }
    .btn_box .copy{
        font-size: 26px;
    }
}
.linkbtn a{
    text-decoration: none;
}
.linkbtn:hover{
    opacity: 0.7;
}
.grd_btn a{
    background: linear-gradient(to bottom, #f1f1f1 0%, #e8e8e8 100%);
    border: 1px solid #b2b2b2;
    display: inline-block;
    padding: 10px 15px;
    text-decoration: none;
    border-radius: 4px;
    color: #000;
    font-size: 15px;
    text-align: center;
}
/* 商品一覧_ページャーCSS打消し */
.block-productlist__operation {
    position: relative;
}

/* 商品リストカード */
.product-comment,
.product-list__desc{
    color: #888888;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    line-height: 1.4;
    font-size: 1.1rem;
    margin-top: 8px;
}
.max-line_2 {
    height: 3.2em;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
}
.block-productlist__item .product-list__desc {
    -webkit-line-clamp: 2;
}

/* パンクズリスト*/
.breadcrumbs{
    margin-bottom:10px;
    font-size: 13px;
}
.breadcrumbs > li{
    display:inline;
}
.breadcrumbs > li a{
    color:#337ab7;
    text-decoration: underline;
}
.breadcrumbs > li a:hover{
    text-decoration: none;
}

/* ヘッダー・フッター修正*/
.header-lite__wrap{
    display: flex;
    align-items: center;
    width: 100%;
    margin: auto;
}
.hamburgernav__title {
    padding-top: 5px;
    padding-bottom: 5px;
    background: #888;
    color: #fff;
    font-size: 1.2rem;
    font-weight: bold;
    text-align: center;
}
@media screen and (min-width: 1024px){
    .main-header__sub__text {
        font-size: 1.2rem;
    }
    .main-header__sub__text span{
        background: white;
        color: #9d0000;
        font-weight: bold;
        padding: 1px 4px;
        margin-right: 4px;
    }
    .header-lite__wrap{
        width: 1200px;
    }
}
  
/* 商品詳細 */
.block-detail__thumb {
    margin-bottom:1em;
}
.block-detail__temp-link{
    margin-top: 15px;
}
.block-detail__temp-link .primary-button{
    width: 100%;
    font-size: 1em;
    box-sizing: border-box;
    background: #ff8d25;
    color: white;
    padding: 15px 20px;
}
.block-detail__temp-link .base{
    background: #c2c2c2;
    color: #ffffff;
}
.block-detail__temp-link .base:hover{
    opacity: 1;
    cursor: default;
}
.primary-button .icon-template{
    color: white;
    padding-right: 10px;
    font-size: 2rem;
}
.block-detail__main__item{
    display:none;
    border:1px solid rgba(255,255,255,0);
}
.slick-initialized .block-detail__main__item{
    display: block;
    border:1px solid #ccc;
}
.product_sub-detail{
    border-bottom: 1px solid #dedede;
    font-size: 19px;
    font-weight: bold;
    padding: 5px 0;
    margin-bottom: 15px;
}
.block-detail__news{
    background-color: #ffeded;
    padding: 15px 20px;
}
.block-detail__edit:last-of-type {
    margin-bottom: 60px;
}
/* 商品詳細 うちわQ&A・目安納期・注意点・ジャパンカラー */
.item_content_link {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 20px 0;
}
.item_content_link br{
    display: none;
}
.item_content_link li {
    width: 48.5%;
    margin-bottom:13px;
}
.item_content_link li img {
    width: 100%;
    vertical-align: bottom;
}
.item_content_link li a{
    display: block;
}
.item_content_link li a:hover{
    opacity: 0.7;
}
.inquiry-form_block{
    display: flex;
    flex-direction: column;
    background: #fefdcd;
    border: 1px solid #dedede;
    margin: 1em 0;
    padding: 20px 1em;
}
.inquiry-form_block p{
    padding:0 0 10px 0;
}
.inquiry-form_block img{
    max-width: 100%;
    vertical-align: bottom;
}
.inquiry-form_block a{
    display: block;
}
.inquiry-form_block a:hover{
    opacity: 0.7;
}
@media screen and (min-width: 1024px){
    .inquiry-form_block{
        flex-direction: row;
        align-items: center;
    }
    .inquiry-form_block p{
        width: calc(100% - 400px);
        padding:0 2em 0 0;
    }
    .inquiry-form_block img{
        width:400px;
    }
}

/* 商品詳細 うちわオプション */
.original_size_03 .temp_box {
    display: inline-block;
    vertical-align: top;
    width: 100%;
    margin-bottom: 10px;
    line-height: normal;
}
.original_size_03 .temp_box .temp_img {
    float: left;
    width: 200px;
    margin: 0 15px 15px 0;
}
.original_size_03 .temp_box .temp_img img {
    width: 100%;
}
.original_size_03 .temp_box .temp_download {
    float: right;
    width: calc(100% - 215px);
}
.original_size_03 .temp_box .temp_download dl.option {
    display: inline-block;
    width: 100%;
    margin-bottom: 10px;
}
.original_size_03 .temp_box .temp_download dl.option dt {
    display: inline-block;
    background: #ffe52f;
    margin: 0 5px 5px 0;
    padding: 3px 6px;
    font-size: 14px;
    font-weight: bold;
    line-height: normal;
}
.original_size_03 .temp_box .temp_download dl.option dd {
    display: inline-block;
    font-weight: bold;
    font-size: 14px;
}
.original_size_03 .temp_box .temp_download dl.option dd red {
    color: #EE3333;
}
.accbox label {
    position: relative;
    font-size: 14px;
    padding: 10px 35px 10px 15px;
    border: 1px solid #afafaf;
    background: whitesmoke;
    font-weight: bold;
}
.accbox label:before {
    content: "";
    position: absolute;
    top: -5px;
    bottom: 0;
    right: 15px;
    margin: auto;
    padding: 0;
    width: 10px;
    height: 10px;
    border-top: 2px solid #888;
    border-right: 2px solid #888;
    transform: rotate(135deg);
}
.accbox .accshow {
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transition: 0.8s;
    margin-bottom: 2%;
    font-size: 13px;
}
.item-content-group .numbering_list {
    margin-top: 10px;
    font-weight: bold;
}
.accbox .accshow p {
    margin: 15px 10px;
}
/* 商品詳細 テンプレート */
.design_temp_link{
    margin-top: 10px;
}
.design_temp_link a:hover{
    opacity: 0.8;
}
.block-template__download__item:nth-child(n+2) {
    margin-top: 0;
}
.block-template__download .subhead {
    margin: 20px 0 10px 0;
}
/* Sランク商品　選ばれるポイント */
.marker_yellow{
    display: inline;
    background: linear-gradient(transparent 50%, rgba(255, 252, 107, .69) 50%);
    font-size: 22px;
    font-weight: bold;
    padding: 0 20px;
}
.item_point_box{
    border: solid 1px #ccc;
    padding: 15px;
    margin: 30px 0;
}
.item_point_box ol{
    list-style: none;
    text-align: left;
    margin: 20px;
}
.item_point_box ol li{
    position: relative;
    font-size: 18px; 
    font-weight: bold;
    padding: 8px 30px;
}
.item_point_box ol li::before{
    content: "◎";
    position: absolute;
    color: #57bb6c;
    font-size: 24px;
    font-weight: bold;
    left: 0px;
    top: 3px;
}
.item_memo_box{
    background: #ffeaec;
    border-radius: 8px;
    text-align: center;
    font-size: 16px;
    padding: 15px;
}

/* 会社概要 */
table.company {
    border-style: solid none none solid;
    border-width: 1px;
    border-color: #dadada;
    margin-top: 10px;
    width: 100%;
    line-height: 1.7;
}
table.company tr th {
    border-style: none solid solid none;
    border-width: 1px;
    border-color: #dadada;
    padding: 10px 15px 9px;
    font-size: 14px;
    background-color: #f3f3f3;
    font-weight: bold;
    width: 25%;
}
table.company tr td {
    border-style: none solid solid none;
    border-width: 1px;
    border-color: #dadada;
    padding: 10px 15px 9px;
    font-size: 14px;
}
  
  /* ガイド_ベース*/
  .guide_frame{
      margin-bottom: 60px;
  }
  .guide_frame *{
      line-height: 1.8;
  }
  .guide_frame .ec-off1Grid p{
      margin-bottom: 1em;
      font-size: 14px;
  }
  .guide_frame .ec-off1Grid p:last-child{
      margin-bottom: 0;
  }
  .guide_frame .ec-off1Grid p img{
      display: block;
      margin: 0 auto;
  }
  .guide_frame h2{
      margin: 50px 0 15px;
      padding: 10px 15px;
      background: #414141;
      color: white;
      font-size: 20px;
      font-weight: bold;
  }
  .guide_frame h3{
      margin: 40px 0 15px;
      padding: 5px 10px;
      font-size: 18px;
      font-weight: bold;
      border: 1px solid #cccccc;
      background: #f8f8f8;
  }
  .guide_frame h4{
      margin: 20px 0 15px;
      padding: 3px 0;
      border-bottom: 1px solid #9d0000;
      font-size: 16px;
  }
  .guide_frame .clum2 {
      display: -ms-flexbox;
      display: flex;
      -ms-flex-direction: column;
      flex-direction: column;
  }
  .guide_frame .clum2 .block {
      width: 100%;
      padding: 2% 0;
  }
  .guide_frame .clum2 .block img{
      display: block;
      margin: 0 auto;
  }
  .guide_frame .clum2 .block .boxnum{
      display: -ms-flexbox;
      display: flex;
      -ms-flex-direction: row;
      flex-direction: row;
      margin-bottom: 15px;
  }
  .guide_frame .clum2 .block .boxnum dt{
      width: 25px;
      height: 25px;
      background: #e71e18;
      text-align: center;
      align-items: flex-end;
      line-height: 1.8;
      color: white;
      font-weight: bold;
      border-radius: 4px;
  }
  .guide_frame .clum2 .block .boxnum dd{
      width: calc(100% - 25px);
      padding-left:10px;
  }
  @media screen and (min-width: 600px), print{
      .guide_frame .clum2 {
          -ms-flex-direction: row;
          flex-direction: row;
      }
      .guide_frame .clum2 .block {
          width: 50%;
          padding: 2% 0;
      }
  }
  .guide_frame .notes {
      font-size: 12px;
  }
  .guide_frame .notes.aside {
      color: #999;
  }
  img.cap{
    border: 1px solid #ccc;
    box-sizing: content-box;
  }
  /* ガイド_注意点 */
  .guide-note {
      display: -ms-flexbox;
      display: flex;
      align-items: flex-start;
      flex-wrap: wrap;
      margin-bottom:1em;
  }
  .guide-note dt {
      display: block;
      width: 90px;
      color: #fff;
      font-size: 14px;
      font-weight: bold;
      background-color: #9d0000;
      text-align: center;
      padding: 3px 0;
      margin-bottom: 7px;
  }
  .guide-note dd {
      width: calc(100% - 90px);
      padding: 3px 10px 2px;
      display: table-cell;
      vertical-align: middle;
  }
  /* ガイド_目次 */
  .guide-list-hgroup {
      margin: 20px 0;
      padding: 15px;
      background-color: #f6f6f6;
      border: solid 4px #e6e6e6;
  }
  .guide-list-hgroup ul {
      padding: 0% 1%;
  }
  .guide-list-hgroup ul li {
      margin-bottom: 0.5em;
  }
  .guide-list-hgroup ul li:last-child {
      margin-bottom: 0;
  }
  .guide-list-hgroup ul li a {
      position: relative;
      display: inline-block;
      padding: 0 0 0 16px;
      vertical-align: middle;
      text-decoration: underline;
      color: #337ab7;
      font-weight: bold;
  }
  .guide-list-hgroup ul li a:before {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      margin: auto;
      content: "";
      vertical-align: middle;
      left: 0;
      width: 5px;
      height: 5px;
      border-top: 2px solid #9d0000;
      border-right: 2px solid #9d0000;
      -webkit-transform: rotate(45deg);
      transform: rotate(45deg);
  }
  .guide-list-hgroup ul li a:hover {
      color:#9d0000;
      text-decoration: none;
  }
  .guide-list-hgroup .title {
      margin-bottom: 0;
      padding: 5px 0 5px 10px;
      font-size: 18px;
      font-weight: bold;
      border:none;
  }
  
  @media screen and (min-width: 600px), print{
      .guide-list-hgroup .pct20{
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
            -ms-flex-wrap: wrap;
            flex-wrap: wrap;
      }
      .guide-list-hgroup .pct20 li{
          width:20%;
      }
  }
  .guide-experienced-group {
      margin: 1em;
  }
  .guide-experienced-group p {
      word-break: break-all;
      word-wrap: break-word;
      margin-bottom: 1em;
  }
  .guide-experienced-group img{
      display: block;
      margin: auto;
  }
  .guide-experienced-table {
      border-style: solid none none solid;
      border-width: 1px;
      border-color: #dadada;
      margin: 1.5em 0;
      width: 100%;
  }
  .guide-experienced-table th {
      border-style: none solid solid none;
      border-width: 1px;
      border-color: #dadada;
      padding: 10px 15px 9px;
      background-color: #f3f3f3;
      font-weight: bold;
      width: 30%;
  }
  .guide-experienced-table td {
      border-style: none solid solid none;
      border-width: 1px;
      border-color: #dadada;
      padding: 10px 15px 9px;
  }
  .subGuidList{
      margin: 1em 0;
  }
  .subGuidList li{
      margin-bottom: 0.5em;
  }
  .subGuidList li a{
      position: relative;
      display: inline-block;
      padding: 0 0 0 16px;
      vertical-align: middle;
      font-size: 14px;
      font-weight: bold;
      text-decoration: underline;
      color: #414141;
  }
  .subGuidList li a:before{
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      margin: auto;
      content: "";
      vertical-align: middle;
      left: 0;
      width: 5px;
      height: 5px;
      border-top: 2px solid #9d0000;
      border-right: 2px solid #9d0000;
      -webkit-transform: rotate(45deg);
      transform: rotate(45deg);
  }
  @media screen and (min-width: 600px), print{
      .flex-list-group{
            display:-webkit-box;
            display:-ms-flexbox;
            display:flex;
      }
      .flex-list-group ul{
            flex: 1;
      }
  }
  /* ガイド_注文の流れ */
  .orderFlowWrap .orderFlowDl{
      display: -ms-flexbox;
      display: flex;
      flex-direction: row;
  }
  .orderFlowWrap .orderFlowDl dt {
      width: 100px;
      font-weight: bold;
      position: relative;
      background: #9d0000;
      padding: 20px 10px 0;
      margin-bottom: 15px;
      text-align: center;
      color: #fff;
  }
  .orderFlowWrap .orderFlowDl dt:after {
      content: "";
      position: absolute;
      width: 0;
      height: 0;
      bottom: -15px;
      left: 0;
      border-style: solid;
      border-color: #9d0000 transparent transparent transparent;
      border-width: 15px 50px 0 50px;
      z-index: 1;
  }
  .orderFlowWrap .orderFlowDl dd {
      width: calc(100% - 100px);
      padding: 1em 1em 2em;
  }
  @media screen and (min-width: 600px), print{
      .orderFlowWrap .orderFlowDl dt {
          width: 140px;
      }
      .orderFlowWrap .orderFlowDl dt:after {
          border-width: 15px 70px 0 70px;
      }
      .orderFlowWrap .orderFlowDl dd {
          width: calc(100% - 140px);
          padding: 1em 1em 2em 2em;
      }
  }
  .box_nagare {
      margin:10px 0;
  }
  .box_nagare .item {
      position: relative;
      border: 3px solid #dedede;
      margin: 0 0 20px;
      padding: 10px;
  }
  .box_nagare .step {
      border-bottom: 1px solid #999;
      margin-bottom: 5px;
      padding-bottom: 5px;
      text-align: center;
      font-size: 18px;
      font-weight: bold;
  }
  .box_nagare .icon {
      margin: 10px 0;
  }
  .box_nagare .icon img {
      display: block;
      max-width: 100%;
      margin: auto;
  }
  .box_nagare .comment{
      font-size: 13px;
      line-height: 1.4;
  }
  @media screen and (min-width: 600px), print{
      .box_nagare{
          display: -ms-flexbox;
          display: flex;
          justify-content: space-around;
          margin: 0 -10px;
      }
      .box_nagare .item {
          flex: 1 1 0%;
          margin: 10px;
      }
  }
  /* ガイド_サービス一覧 */
  .service_list{
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      justify-content: space-between;
      margin: 30px 0;
  }
  .service_item{
      display: -ms-flexbox;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      width: 100%;
      margin-bottom: 30px;
      padding: 15px;
      border: 1px solid #ccc;
  }
  .service_item .ttl{
      width: calc(100% - 70px);
      text-align: center;
      font-size: 20px;
      font-weight: bold;
      line-height: 1.4;
  }
  .service_item .icon{
      width: 70px;
      margin: 0 auto;
  }
  .service_item .icon img{
      height: 70px;
      width: 70px;
      display: block;
  }
  .service_item .copy{
      margin: 10px 0;
      font-size: 13px;
      line-height: 1.6;
  }
  .service_item .linkbtn{
      display: block;
      margin: auto auto 0;
      max-width: 100%;
      width: 100%;
  }
  .service_item .linkbtn a{
      background: #9d0000;
      border: 1px solid #9d0000;
      color: white;
      display: block;
      text-align: center;
      padding: 5px;
      font-weight: bold;
  }
  @media screen and (min-width: 600px){
      .service_item {
          width: 48%;
      }
  }
  @media screen and (min-width: 1000px), print{
      .service_item {
          width: 31.333%;
      }
  }
  /* ガイド_チェックマーク目次 */
  .guide-index-checklist {
      border: solid 10px #e7e7e7;
      margin-top: 25px;
      margin-bottom: 25px;
      padding: 15px 20px 20px;
  }
  .guide-index-checklist .list_ttl {
      font-size: 18px;
      font-weight: bold;
      color: #cc0004;
      border-bottom: 1px dotted #ccc;
  }
  .guide-index-checklist .checklist_wrap {
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  }
  .guide-index-checklist .checklist {
      width: 100%;
  }
  .guide-index-checklist .checklist > li{
      position: relative;
      padding: 4px 0px 4px 2em;
      margin: 0px;
  }
  .guide-index-checklist .checklist > li:before,
  .guide-index-checklist .checklist > li:after{
      position: absolute;
      top: 50%;
      height: 1em;
      content: "";
  }
  .guide-index-checklist .checklist > li:before {
      left: 0px;
      transform: translateY(-50%);
      width: 1em;
      border: 1px solid #cccccc;
  }
  .guide-index-checklist .checklist > li:after {
      left: 0.6em;
      transform: translateY(-75%) rotate(45deg);
      width: 0.4em;
      border-bottom: 2px solid #9d0000;
      border-right: 2px solid #9d0000;
  }
  .guide-index-checklist .checklist > li a{
      color: #337ab7;
      text-decoration: underline;
  }
  .guide-index-checklist .checklist > li a:hover{
      color: #9d0000;
      text-decoration: none;
  }
  @media screen and (min-width: 600px), print{
      .guide-index-checklist .checklist{
          width:50%;
      }
  }
  .guide-index-menu{
      margin:1em 0;
  }
  .guide-index-menu .menu_box{
      display: -ms-flexbox;
      display: flex;
      flex-direction: column;
      border-bottom: dotted 1px #ccc;
      padding: 20px 0;
  }
  .guide-index-menu .box_left{
      display: -ms-flexbox;
      display: flex;
      align-items: center;
  }
  .guide-index-menu .pic{
      width:60px;
  }
  .guide-index-menu .text{
      width:calc(100% - 60px);
      padding-left: 15px;
  }
  .guide-index-menu .text .ttl{
      font-size: 18px;
      font-weight: bold;
      margin-bottom: 5px;
  }
  .guide-index-menu .linkbtn{
      margin-top: 10px;
  }
  .guide-index-menu .linkbtn a{
      display: block;
      margin: 0 auto;
      padding: 15px 5px;
      background: #9d0000;
      text-align: center;
      color: #fff;
      font-size: 14px;
      font-weight: bold;
  }
  @media screen and (min-width: 600px), print{
      .guide-index-menu .menu_box{
          flex-direction: row;
          align-items: center;
      }
      .guide-index-menu .box_left{
          width:calc(100% - 200px);
      }
      .guide-index-menu .linkbtn{
          width:200px;
          margin: 0;
      }
  }
  /* ガイド_チェックリスト表 */
  table.chkListTbl{
      width: 100%;
  }
  table.chkListTbl th,
  table.chkListTbl td{
      vertical-align: middle;
      line-height: 1.4;
      word-break: break-all;
  }
  table.chkListTbl th {
      border: 1px solid #dadada;
      padding: 5px 10px;
      text-align: center;
      font-weight: normal;
      vertical-align: middle;
  }
  table.chkListTbl th.type {
      width: 10%;
  }
  table.chkListTbl th.item {
      width: 80%;
  }
  table.chkListTbl th.chk {
      width: 10%;
  }
  table.chkListTbl th .req {
      display: block;
      padding: 3px;
      color: #fff;
      font-weight: bold;
      background-color: #9d0000;
  }
  table.chkListTbl th .self {
      display: block;
      padding: 3px;
      color: #fff;
      font-weight: bold;
      background-color: #a7a7a7;
  }
  table.chkListTbl td {
      border: 1px solid #dadada;
      padding: 10px;
  }
  table.chkListTbl img{
      vertical-align: bottom;
  }
  .guide_frame table.chkListTbl a {
      color: #337ab7;
      font-weight: bold;
      text-decoration: underline;
  }
  .guide_frame table.chkListTbl a:hover {
      color: #9d0000;
      font-weight: bold;
      text-decoration: none;
  }
  /* ガイド_アプリ別注文意見出し*/
  .guide-read-notes {
      display: -ms-flexbox;
      display: flex;
      align-items: center;
      border: solid 1px #9d0000;
      margin-bottom: 20px;
      padding: 20px;
      border-radius: 10px;
      box-shadow: 3px 3px #9d0000;
  }
  .guide-read-notes .icon {
      width: 60px;
  }
  .guide-read-notes .icon img{
      vertical-align: bottom;
  }
  .guide-read-notes .text {
      width: calc(100% - 60px);
      padding-left: 15px;
  }
  /* ガイド_注意点チェックポイント*/
  .guide-check-point {
      margin: 20px 0;
  }
  .guide-check-point .check-point,
  .guide-check-point .check-point2 {
      margin-bottom:10px;
  }
  .guide-check-point .check-point dt,
  .guide-check-point .check-point2 dt {
      float: left;
      display: block;
      width: 90px;
      color: #fff;
      font-size: 12px;
      font-weight: bold;
      background-color: #9d0000;
      text-align: center;
      padding: 2px 0;
  }
  .guide-check-point .check-point dd,
  .guide-check-point .check-point2 dd {
      padding-left: 100px;
  }
  .guide-check-point .check-point2 dd span {
    color: #9d0000;
    font-weight: bold;
}
  .guide-check-point a {
      font-weight: bold;
      color: #337ab7;
      text-decoration: underline;
  }
  .guide-check-point a:hover{
      color: #9d0000;
      text-decoration: none;
  }
  .guide-indispensable{
      margin: 40px 0;
      padding: 20px 25px 5px;
      background-color: #ffece5;
  }
  .guide-indispensable .guide-check-point {
      padding: 10px;
      font-size: 14px;
      background: #fff;
  }
  .exltemp_box {
      width: 100%;
      border: 3px solid #39a200;
      padding: 15px 15px 15px;
      font-weight: bold;
      display: inline-block;
  }
  .exltemp_box dt {
      font-size: 17px;
      line-height: 150%;
  }
  /* ガイド_画像付き説明フレックスボックス*/
  .flex_box{
      display: -ms-flexbox;
      display: flex;
      -ms-flex-direction: column;
      flex-direction: column;
      justify-content: space-between;
      padding: 0;
  }
  .flex_box li{
      display:block;
      margin: 1em auto;
  }
  .flex_box li img{
      display:block;
      margin: 0 auto 1em;
  }
  @media only screen and (min-width: 600px){
      .flex_box{
          -ms-flex-direction: row;
          flex-direction: row;
          -ms-flex-wrap: wrap;
          flex-wrap: wrap;
      }
      .flex_box li{
          flex:1 1 0%;
      }
      .flex_box.col_2 li{
          width: 50%;
      }
      .flex_box.col_3 li{
          width: 32%;
      }
  }
  .guide-explanation{
      border: solid 20px #fce5e2;
      margin: 20px 0;
      padding: 20px;
  }
  @media only screen and (min-width: 600px){
      .guide-explanation{
          border-width: 28px;
      }
  }
  .guide-explanation h2,
  .guide-explanation h3{
      margin-top: 0;
  }
  .guide-explanation hr{
      margin: 2em 0;
  }
  .guide-explanation p{
      margin-bottom: 1em ;
  }
  .guide-explanation img{
      display:block;
      margin: 1em auto;
  }
  .guide_frame .step {
      position: relative;
      margin: 2em 0 1em;
      padding-left: 40px;
      line-height: 1.6;
  }
  .guide_frame .step:before {
      position: absolute;
      color: white;
      background: #9d0000;
      width: 30px;
      text-align: center;
      height: 30px;
      top: 51%;
      left: 0;
      transform: translateY(-50%);
      font-weight: bold;
      line-height: 30px;
  }
  .step.step1:before {
      content: "1";
  }
  .step.step2:before {
      content: "2";
  }
  .step.step3:before {
      content: "3";
  }
  .step.step4:before {
      content: "4";
  }
  .step.step5:before {
      content: "5";
  }
  .step.step6:before {
      content: "6";
  }
  .step.step7:before {
      content: "7";
  }
  .step.step8:before {
      content: "8";
  }
  /* 初心者用 完全データ作成ガイド*/
  .guide-character {
    background-position: 0 0;
    background-repeat: no-repeat;
    margin-top: 20px;
    padding-left: 80px;
    min-height: 54px;
    height: auto !important;
    height: 54px;
    position: relative;
  }
  .guide-character .inner {
      display: block;
      border: 1px solid #ccc;
      border-radius: 5px;
      padding: 17px 20px;
      position: relative;
      word-break: break-all;
      vertical-align: top;
      line-height: 1.6;
  }
  .guide-character .inner:before {
      content: "";
      position: absolute;
      top: 1.7em;
      left: -10px;
      border-right: 11px solid #ffffff;
      border-top: 7px solid transparent;
      border-bottom: 7px solid transparent;
      z-index: 2;
  }
  .guide-character .inner:after {
      content: "";
      position: absolute;
      top: 1.7em;
      left: -11px;
      border-right: 11px solid #ccc;
      border-top: 7px solid transparent;
      border-bottom: 7px solid transparent;
  }
  .guide-character.guide-character0301 .inner,
  .guide-character.guide-character0401 .inner{
      background-color: #fffac6;
  }
  .guide-character.guide-character0301 .inner:before,
  .guide-character.guide-character0401 .inner:before{
      border-right-color: #fffac6;
  }
  .guide-character.guide-character0501 .inner{
      background-color: #00acdd;
  }
  .guide-character.guide-character0501 .inner:before{
      border-right-color: #00acdd;
  }
  .guide-character0101, .guide-character0102, .guide-character0103, .guide-character0104, .guide-character0105 {
      color: #eb6d94;
  }
  .guide-character0201, .guide-character0202, .guide-character0203, .guide-character0204, .guide-character0205 {
      color: #11b8d6;
  }
  .guide-character0301, .guide-character0401 {
      color: #ea5414;
  }
  .guide-character0101 {
      background-image: url(/html/user_data/assets/img/guide/beginners/character/character_0101.gif);
  }
  .guide-character0102 {
      background-image: url(/html/user_data/assets/img/guide/beginners/character/character_0102.gif);
  }
  .guide-character0103 {
      background-image: url(/html/user_data/assets/img/guide/beginners/character/character_0103.gif);
  }
  .guide-character0104 {
      background-image: url(/html/user_data/assets/img/guide/beginners/character/character_0104.gif);
  }
  .guide-character0105 {
      background-image: url(/html/user_data/assets/img/guide/beginners/character/character_0105.gif);
  }
  .guide-character0201 {
      background-image: url(/html/user_data/assets/img/guide/beginners/character/character_0201.gif);
  }
  .guide-character0202 {
      background-image: url(/html/user_data/assets/img/guide/beginners/character/character_0202.gif);
  }
  .guide-character0203 {
      background-image: url(/html/user_data/assets/img/guide/beginners/character/character_0203.gif);
  }
  .guide-character0204 {
      background-image: url(/html/user_data/assets/img/guide/beginners/character/character_0204.gif);
  }
  .guide-character0205 {
      background-image: url(/html/user_data/assets/img/guide/beginners/character/character_0205.gif);
  }
  .guide-character0301 {
      background-image: url(/html/user_data/assets/img/guide/beginners/character/character_0301.gif);
  }
  .guide-character0401 {
      background-image: url(/html/user_data/assets/img/guide/beginners/character/character_0401.gif);
  }
  .guide-character0501 {
      background-image: url(/html/user_data/assets/img/guide/beginners/character/character_0501.gif);
      min-height: 86px;
      height: auto !important;
      height: 86px;
      color: #fff;
  }
  .guide-character050 .inner {
    background-color: #00acdd;
  }
  .guide-character050 img.boxarrow {
    background: url(../../image/guide/character_arrow_blue.gif) no-repeat 0 0;
  }
  
  .guide-character img.boxarrow {
      background: url(../../image/guide/character_arrow_white.gif) no-repeat 0 0;
      width: 15px;
      height: 10px;
      display: block;
      position: absolute;
      top: 23px;
      left: -13px;
  }
  .guide-section{
      margin: 2em 0;
  }
  .guide-section img{
      display: block;
      margin: 0 auto;
  }
  /* 印刷方法の特性*/
  .printing_method_warp{
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
      width: 100%;
  }
  .printing_method_warp li{
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: horizontal;
      -webkit-box-direction: column;
      -ms-flex-direction: column;
      flex-direction: column;
      margin-bottom: 1em;
  }
  .printing_method_warp li *{
      font-size: 13px;
      line-height: 1.5;
  }
  @media only screen and (min-width: 600px){
      .printing_method_warp li{
          width:33.333%;
          padding:0 10px;
      }
  }
  /* デザインテンプレート */
  .block-templatelist{
      font-size:1.4rem;
  }
  .block-templatelist *{
      transition: all 0.1s;
  }
  .templatelist_wrap{
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      margin: 0 -1.5%;
  }
  .template_box{
      width: 100%;
      margin: 0px 1.5% 50px;
      width: 47%;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      -ms-flex-direction: column;
      flex-direction: column;
  }
  .template_box .tmb_box{
      margin-bottom: 5px;
      padding: 15px;
      background: #f7f7f7;
  }
  .template_box .tmb_box img{
      vertical-align: bottom
  }
  .template_box .txt_box{
          display: -ms-flexbox;
      display: flex;
      -ms-flex-direction: column;
      flex-direction: column;
      flex-grow: 1;
  }
  .block-templatelist .temp_name{
      font-weight: bold;
      margin-bottom: 8px;
      font-size: 13px;
  }
  .block-templatelist .temp_dlbtn{
      display: block;
      width: 100%;
      margin-top: auto;
  }
  .block-templatelist .temp_dlbtn a{
      background: #9d0000;
      color: white;
      text-align: center;
      padding: 8px;
      font-weight: bold;
      font-size: 12px;
      border-radius: 4px;
      margin: 0 auto;
      display: block;
  }
  .block-templatelist .temp_dlbtn a:hover{
      opacity: 0.7;
  }
  .kiyaku_box{
      margin: 25px 0;
      padding: 15px;
      border: 1px solid #9d0000;
  }
  .kiyaku_box dt{
      font-weight: bold;
      font-size: 1.6rem;
      margin-bottom: 1rem;
      text-align: center;
      color: #9d0000;
  }
  @media screen and (min-width: 900px){
      .template_box {
          width: 22%;
      }
  }
  .temp-dl-list_wrap{
      font-size: 14px;
      line-height: 1.4;
      color: #525263;
  }
  .temp_dlbox {
      width: 100%;
      border: 1px solid #ccc;
      margin-bottom: 25px;
      font-size: 13px;
  }
  .temp_dlbox h3 {
      background: #f7f7f7;
      padding: 10px;
      font-size: 14px;
      font-weight: bold;
  }
  .temp_dlbox h3 .new {
      background: #9d0000;
      margin-left: 10px;
      padding: 0 7px;
      color: white;
      border-radius: 3px;
      font-size: 13px;
  }
  .temp_dlbox .temp_wrap {
      display: -ms-flexbox;
      display: flex;
      -ms-flex-direction: column;
      flex-direction: column;
  }
  .temp_dlbox .temp_wrap {
      display: -ms-flexbox;
      display: flex;
      -ms-flex-direction: column;
      flex-direction: column;
      padding: 20px;
  }
  .temp_dlbox .temp_wrap .temp_img{
      width: 100%;
      text-align: center;
  }
  .temp_dlbox .temp_wrap .temp_img img{
      width: 100%;
      vertical-align: bottom;
  }
  .temp_dlbox .temp_wrap .temp_info{
      width: 100%;
  }
  .temp_info .temp_dlbtn {
      display: block;
      width: 100%;
      margin-top: 15px;
  }
  .temp_dlbox a:link:hover {
      opacity: 0.7;
  }
  .temp_info .temp_dlbtn a {
      position: relative;
      display: block;
      background: #9d0000;
      color: white;
      margin: 0 auto;
      padding: 9px;
      text-align: center;
      font-weight: bold;
      font-size: 14px;
      border-radius: 4px;
  }
  .temp_info .temp_dlbtn a:after {
      position: absolute;
      content: '';
      top: 0;
      bottom: 0;
      margin: auto;
      right: 15px;
      width: 1.5em;
      height: 1.5em;
      background-image: url(/html/user_data/assets/img/common/icon_dlbtn.svg);
      background-repeat: no-repeat;
  }
  .temp_info .cal_all_image {
      display: -ms-flexbox;
      display: flex;
      -ms-flex-direction: row;
      flex-direction: row;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between;
      margin-top: 10px;
  }
  .temp_info .cal_all_image li {
      width: 48%;
  }
  .temp_info .cal_all_image li a {
      display: block;
      text-align: center;
      padding: 4px 0;
      border: 1px solid #ccc;
      border-radius: 50px;
      font-size: 11px;
      color: #333;
  }
  @media only screen and (min-width: 600px){
      .temp-dl-list_wrap{
             display: -ms-flexbox;
              display: flex; 
                -ms-flex-wrap: wrap;
              flex-wrap: wrap;
      }
      .temp_dlbox{
          width: 31.3%;
          margin: 1% 1% 50px;
      }
  }
  .temp_flexbox{
      display: flex;
      justify-content: space-around;
      margin: 20px 0;
  }
  .temp_flexbox img{
      max-width: 33%;
  }
  
  /* twitterタイムライン */
  .timeline_ttl {
      padding: 8px;
      text-align: center;
      background: #1da1f2;
      color: white;
      line-height: normal;
      border-radius: 7px 7px 0 0;
      font-size: 13px;
  }
  .timeline_wrap {
      border: 1px solid #46b8ed;
      border-radius: 0 0 7px 7px;
      overflow: hidden;
  }
  
  /* アコーディオンボックス */
  .accordion {
      margin: 3em auto;
  }
  .accordion .toggle {
      display: none;
  }
  .accordion .option {
      position: relative;
      margin-bottom: 5px;
  }
  .accordion .acd_title,
  .accordion .acd_content {
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
      transform: translateZ(0);
  }
  .accordion .acd_title {
      border: none;
      padding: 14px 15px;
      display: block;
      color: #333;
      margin: 0;
      background: #eeeeee;
      font-size: 18px;
      font-weight: bold;
  }
  .accordion .acd_title::after,
  .accordion .acd_title::before {
      content: "";
      position: absolute;
      right: 1.25em;
      top: 1.25em;
      width: 2px;
      height: 0.75em;
      background-color: #9d0000;
      transition: all 0.3s;
  }
  .accordion .acd_title::after {
      transform: rotate(90deg);
  }
  .accordion .acd_content {
      border: 2px solid #eee;
      border-top: none;
      display: block;
      height: 0;
      opacity: 0;
      padding: 0 10px;
      visibility: hidden;
  }
  .accordion .acd_content p {
      margin-bottom: 1em;
      line-height: 1.6;
  }
  .accordion .acd_content img {
      transition: 0;
  }
  .toggle:checked + .acd_title + .acd_content {
      height: auto;
      opacity: 1;
      padding: 1.5em;
      visibility: visible;
      border: 5px solid #eee;
      border-top: none;
      margin-bottom: 2em;
  }
  .toggle:checked + .acd_title::before {
      transform: rotate(90deg) !important;
  }
  
  /* ガイド_外部リンク集*/
  .tbl_sitelink {
      display: block;
      width: 100%;
      margin: 2em 0;
      padding: 0 20px;
      background: #f8f8f8;
      border-radius: 10px;
  }
  .tbl_sitelink li {
      display: -ms-flexbox;
      display: flex;
      -ms-flex-direction: column;
      flex-direction: column;
      padding: 1.5em 0;
      border-bottom: 1px solid #cccccc;
  }
  .tbl_sitelink li:last-child{
      border-bottom: none;
  }
  .tbl_sitelink .srv_img img{
      vertical-align: bottom;
      width: 100%;
  }
  .tbl_sitelink .srv_txt{
      padding: 1em 0 0 0;
      vertical-align: middle;
  }
  .tbl_sitelink .srv_txt span{
      display: block;
      margin:0;
  }
  .tbl_sitelink .srv_ttl{
      font-size: 1.6rem;
      font-weight: bold;
  }
  @media only screen and (min-width: 600px){
      .tbl_sitelink li {
          -ms-flex-direction: row;
          flex-direction: row;
      }
      .tbl_sitelink .srv_img{
          width: 250px;
      }
      .tbl_sitelink .srv_txt{
          width: calc(100% - 250px);
          padding: 0 0 0 1em;
      }
  }
  
  /* 注文手続き_活用方法*/
  @media (min-width: 1024px){
      .form-item__input--flex-wide {
          align-items: start;
      }
      .form-item__input--flex-wide > * {
          margin-right: 3%;
          width: 30.3333%;
      }
  }
  
/* カテゴリページ*/
.main_v{
    margin-bottom: 40px;
}
.main_v img{
    vertical-align: bottom;
}
#cate_select {
    margin-bottom: 20px;
}
#cate_select dt{
    font-weight: bold;
    font-size: 20px;
    color: #555;
    display: block;
    margin-bottom: 10px;
}
#cate_select ul{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 40px;
    margin-top: -10px;
}
#cate_select li{
    margin-top: 10px;
    margin-right: 10px;
}
#cate_select li a{
    font-size: 1.2rem;
    font-weight: bold;
    line-height: 1;
    padding: 8px 38px 8px 20px;
    border: 1px solid #a5a5a5;
    border-radius: 16px;
    color: #222222;
    position: relative;
    display: block;
    transition: opacity 0.3s;
}
#cate_select li a:after{
    content: "";
    display: block;
    width: 5px;
    height: 5px;
    border-right: 1px solid #9c9c9c;
    border-bottom: 1px solid #9c9c9c;
    transform: rotate(45deg) translateX(-1px);
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    right: 18px;
}
#cate_select li a:hover{
    opacity:0.6;
}
#cate_select .select_shape{
    justify-content: flex-start;
    gap: 1%;
}
#cate_select .select_shape li{
    width: 85px;
}
#cate_select .select_shape a{
    padding: 8px;
    text-align: center;
}
#cate_select .select_shape a:after{
    display: none;
}
#cate_select .select_maker{
    justify-content: flex-start;
    gap: 0.5%;
}
#cate_select .select_maker li{
    width: 18%;
    position: relative;
    overflow: hidden;
}
#cate_select .select_maker a{
    padding: 5px 15px;
    text-align: center;
}
#cate_select .select_maker img{
    width: 100%;
    transition: all 0.2s;
}
#cate_select .select_maker .mask {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
}
#cate_select .select_maker li:hover .mask{
    opacity: 1;
}
#cate_select .select_maker a:after{
    display: none;
}
#cate_select .select_maker a:hover{
    opacity: 1;
    text-decoration: none;
    background: #f4f4f4;
    color: #bf0000;
}
#cate_select .select_maker a:hover img{
    background: none;
    opacity: 0;
}
#cate_select .select_maker a:hover .caption{
    color: #bf0000;
}
.category_subhead{
    margin-bottom: 30px;
    padding-bottom: 10px;
    border-bottom: 3px solid #9d0000;
    color: #222;
    font-size: 2.2rem;
}
.category_subhead .other a {
    font-size: 14px;
    font-weight: normal;
    padding-left: 15px;
    color: #0066c0;
}
.category_item_list{
    margin-top: -100px;
    padding-top: 125px;
    padding-bottom: 90px;
}
.category_item_list ul{
    display: flex;
    justify-content: flex-start;
    align-items: stretch;
    flex-wrap: wrap;
}
.category_item_list li{
    position: relative;
    transition: opacity 0.3s;
}
.category_item_list li:hover {
    opacity:0.6;
}
.category_item_list li .block-items__item__img img{
    border:1px solid #ddd;
}
.category_item_list li .block-items__item__name{
    text-decoration: none;
}
.category_item_list li .item_name {
    display: block;
    line-height: 1.4;
    margin-top: 10px;
    font-size: 13px;
    word-break: break-all;
    text-decoration: underline;
}
.category_item_list li .tanka {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: nowrap;
    margin-top: 10px;
    font-size: 1rem;
    color: #888888;
}
.category_item_list li .tanka red {
    font-weight: bold;
    color: #ff0000;
    font-size: 1.4rem;
}
.category_item_list li .tanka red:before {
    content: "@";
}
.category_item_list a{
    text-decoration: none;
    color: #333;
}
.category_item_list .print{
    margin-top:10px;
}
.category_item_list .print span{
    display: inline-flex;
    justify-content: flex-start;
    align-items: center;
    line-height: 1.3;
    padding: 2px 5px;
    margin-right: 5px;
    margin-bottom: 3px;
    font-size: 1rem;
    position: relative;
    color: #9d0000;
    background: #fff;
    border: 1px solid #eee;
}
.category_item_list .print span:before{
    content: "";
    position: absolute;
    width: 8px;
    height: 8px;
    top: 3px;
    left: 6px;
}
.category_item_list .print span.fc{
    display: inline-flex;
    justify-content: flex-start;
    padding-left:18px;
    align-items: center;
    line-height: 1.3;
}
.category_item_list .print span.fc:before{
    background: no-repeat url(../img/common/ico_sm_cmyk.svg);
    background-size: contain;
}
.category_item_list .print span.oc{
    display: inline-flex;
    justify-content: flex-start;
    padding-left:18px;
    align-items: center;
    line-height: 1.3;
}
.category_item_list .print span.oc:before{
    background: no-repeat url(../img/common/ico_sm_mono.svg);
    background-size: contain;
}
.new_allitem_btn{
    margin:40px 0;
}
.new_allitem_btn a{
    padding: 30px 20px 30px;
    text-align: center;
    font-size: 24px;
    font-weight: bold;
    border-radius: 5px;
    color: white;
    display: block;
    background: #9d0000;
    transition: opacity 0.3s
}
.new_allitem_btn a:hover{
    opacity: 0.6;
}
.subhead_txt {
    margin-bottom: 1em;
    line-height: 1.6;
    font-size: 15px;
}
@media (min-width: 600px){
    .category_item_list ul>li{
        width: calc((100% - 65px) / 5);
    }
    .category_item_list ul>li:not(:nth-child(5n+1)) {
        margin-left: 15px;
    }
    .category_item_list ul>li:nth-child(n+6) {
        margin-top: 30px;
    }
}
@media (max-width: 599px){
    .category_item_list{
    padding-bottom: 80px;
}
    .category_item_list ul>li{
        width: calc((100% - 20px) / 2);
    }
    .category_item_list ul>li:not(:nth-child(2n+1)) {
        margin-left: 20px;
    }
    .category_item_list ul>li:nth-child(n+6) {
        margin-top: 40px;
    }
    .category_item_list ul>li:nth-child(n+3) {
        margin-top: 40px;
    }
    .category_item_list ul>li:nth-child(2n+3) {
        position: relative;
    }
    .category_item_list ul>li:nth-child(2n+3):before {
        content: "";
        display: block;
        width: calc(200% + 20px);
        height: 1px;
        background: #ccc;
        position: absolute;
        bottom: calc(100% + 20px);
        left: 0;
    }
}
@media (max-width: 599px){
    #cate_select ul{
        justify-content: space-between;
    }
    #cate_select li{
        width: calc((100% - 10px) / 2);
        margin: 10px 0 0;
    }
    .wet-tissue_menu{
        margin-bottom: 20px;
    }
    .wet-tissue_menu ul{
        display: flex;
        flex-wrap: wrap;
    }
    .wet-tissue_menu li{
        width: 47%;
        margin: 10px 10px 0 0;
    }
}
@media (min-width: 600px){
    .wet-tissue_menu{
        margin-bottom: 20px;
    }
    .wet-tissue_menu ul{
        display: flex;
    }
    .wet-tissue_menu li{
        width: 33%;
        margin: 10px 10px 10px 0;
    }
    .wet-tissue_menu li:last-child{
        margin-right: 0;
    }
}
    
  /* デザつくリンク_旧サイト移行用 */
  .design_link{
    margin: 20px 0 40px;
    background: #fefdcd;
    border: 1px solid #cccccc;
    border-radius: 5px;
    overflow: hidden;
  }
  .design_link br{
      display:none;
  }
  .design_link a{
      display: block;
  }
  .design_link img{
      vertical-align: bottom;
      margin-bottom: 15px;
  }
  .design_link .d_btn{
      margin-bottom: 15px;
      padding: 0 20px;
  }
  .design_link .d_btn a{
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 20px;
      width: -webkit-fit-content;
      width: -moz-fit-content;
      width: fit-content;
      height: auto;
      padding: 10px 30px;
      font-size: 1.2rem;
      font-weight: bold;
      text-decoration: none;
      transition: all 0.2s ease;
      border: 1px solid #ccc;
      background: none;
      color: #222;
      background: white;
      position: relative;
      padding-right: 20px;
      padding-left: 40px;
      width: 100%;
      box-sizing: border-box;
  }
  .design_link .d_btn a:before{
      content: "";
      position: absolute;
      top: 14px;
      left: 15px;
      width: 12px;
      height: 12px;
      background: url(/html/template/default/assets/img/icon_external.svg) no-repeat 0 0/contain;
  }
  .design_link .d_btn a:after{
      content: "";
      position: absolute;
      top: 8px;
      left: 18px;
      width: 12px;
      height: 12px;
      background: no-repeat 0 0/contain;
      background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20px 10px"><path fill="%23222" d="M3.214,7.857,6.429,4.643,5.357,3.571,3.929,5V0H2.5V5L1.071,3.571,0,4.643Z" /></svg>');
      transform: rotate(-125deg);
      transition: all 0.2s ease;
  }
  .design_link .d_btn a[target*=_blank]:hover::after {
      top: 6px;
      left: 20px;
  }
  
  /* デザツク用ブロック_修正版 */
  .button-band:hover,
  .button-band__text:hover,
  .button-band__type:hover{
      opacity: 1;
      cursor: initial;
  }
  .block-design{
      display: -ms-flexbox;
      display: flex;
      -ms-flex-direction: row;
      flex-direction: row;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      background: #f7f7f7;
      border: 1px solid #ddd;
      border-radius: 10px;
      overflow: hidden;
      margin: 20px 0;
  }
  .block-design br{
      display: none;
  }
  .block-design__title{
      width: 100%;
      background-repeat: no-repeat;
      background-size: cover;
      display: -ms-flexbox;
      display: flex;
      align-items: center;
      justify-content: center;
      background: url(/html/user_data/common/image/guide/d_tsuku/block-dztk__background.jpg) ;
      padding:0 15px;
  }
  .block-design__inner{
      width: 100%;
      padding:15px;
  }
  .block-design .block-design__comment{
      text-align: center;
      font-size: 13px;
      color:#555;
  }
  .block-design .block-design__comment br{
      display:none;
  }
  .block-design .button-band{
      margin-top: 10px;
      padding: 7px 10px;
      background: #fff;
      border-radius: 5px;
      flex-wrap: nowrap;
  }
  .block-design .button-band:before {
      display: none;
  }
  .block-design .button-band__text{
      width: calc(100% - 120px);
      line-height: 1.3;
      font-size: 1.3rem;
  }
  .block-design .button{
      width: 110px;
      color: #ef840e;
      background: #ffffff;
  }
  .block-design__link {
      margin-top: 15px;
      text-align: center;
  }
  .block-design__link a{
      color: #333;
      text-decoration: none;
      font-weight: bold;
      font-size: 16px;
      transition: all 0.2s ease;
  }
  .block-design__link a:before{
      display: inline-block;
      content: '?';
      line-height: 22px;
      height: 20px;
      width: 20px;
      text-align: center;
      font-weight: bold;
      font-size: 1.5rem;
      border-radius: 50%;
      background-color: #ff8d25;
      color: #fff;
      vertical-align: middle;
      margin-right: 8px;
      margin-top: -2px;
  }
  .block-design__link a:hover{
      color: #ff8d25;
  }
  .block-detail__images .block-design {
      -ms-flex-direction: column;
      flex-direction: column;
  }
  @media (min-width: 768px){
      .block-design__title {
          width:50%;
      }
      .block-design__inner {
          width:50% ;
      }
      .block-detail__images .block-design__title,
      .block-detail__images .block-design__inner{
          width:100%;
      }
      .block-detail__images .block-design {
          -ms-flex-direction: column;
          flex-direction: column;
      }
      .block-design .button-band__text{
          font-size:1.4rem;
      }
      .block-design .block-design__comment br{
          display:initial;
      }
  }

/* サイドナビ修正 */
.sidenav__list .list-item__text {
    font-size:12px;
}
.sidenav__list .list-item__text p{
    font-size:11px;
    color:#555;
}
.sidenav__banner img {
    vertical-align: bottom;
}
.sidenav__banner a {
    display:block;
}
.list-item .tag {
    padding-left: 5px;
}
.sidevav_more-link{
    margin-top:10px;
}
.sidevav_more-link a{
    display: flex;
    align-items: center;
    border: 1px solid #bf0000;
    justify-content: center;
    padding: 10px;
    font-size: 1.4rem;
    font-weight: bold;
    color: #222;
}
.sidevav_more-link a:hover{
    opacity: 0.7;
}
.sidevav_more-link img{
    margin-right:10px;
}

/* マイページ_会員情報編集 */
.form-rule__bottom {
    white-space: normal;
}
.block_withdraw p{
    margin-top: 1em;
    font-size: 1.4rem;
}
.form_withdraw__btn{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    margin-top: 40px;
}
.form_withdraw__btn a{
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    width: 100%;
    max-width: 260px;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    padding-top: 15px;
    padding-bottom: 15px;
    font-size: 1.6rem;
    font-weight: bold;
    text-decoration: none;
    transition: all 0.2s ease;
    border: 1px solid #9d0000;
    background: #9d0000;
    color: #fff;
}
.form_withdraw__btn a:hover {
    opacity: 0.5;
    cursor: pointer;
    transition: all 0.2s ease;
}
@media (min-width: 1024px){
    .block_withdraw {
        max-width: 870px;
        margin-left: auto;
        margin-right: auto;
        padding-bottom: 100px;
    }
}
@media (max-width: 1023px){
    .block_withdraw {
        padding-bottom: 85px;
    }
}

/* アコーディオンボックス */
.accbox {
    padding: 0;
    max-width: 100%;
}
.accbox label {
    position: relative;
    font-size: 14px;
    padding: 10px 35px 10px 15px;
    border: 1px solid #afafaf;
    background: whitesmoke;
    font-weight: bold;
}
.accbox label:before {
    content: "";
    position: absolute;
    top: -5px;
    bottom: 0;
    right: 15px;
    margin: auto;
    padding: 0;
    width: 10px;
    height: 10px;
    border-top: 2px solid #888;
    border-right: 2px solid #888;
    transform: rotate(135deg);
}
.accbox label:before:hover {
    color: #bf0000;
}
.accbox input {
    display: none;
}
.accbox .accshow {
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transition: 0.8s;
    margin-bottom: 2%;
    font-size: 13px;
}
.cssacc:checked + label:before {
    transform: rotate(-45deg);
    top: 0;
}
.cssacc:checked + label + .accshow {
    height: auto;
    padding: 2%;
    background: #ffffff;
    border: 1px solid #ccc;
    opacity: 1;
}
.accbox .accshow p {
    margin: 15px 10px;
}
  
.accbox .accshow_first {
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transition: 0.8s;
    margin-bottom: 2vh;
}
.cssacc:checked + label + .accshow_first {
    height: auto;
    padding: 2vh;
    background: #ffffff;
    opacity: 1;
}
.accbox.price label {
    border-radius: 0;
    font-size: 1.4em;
    padding: 1.5%;
}
.accbox.price .accshow .ac-small {
    font-size: 14px;
    color: #777;
}
.accbox.price .accshow .ac-small a {
    color: #0066c0;
}
.accbox.price .accshow .ac-small a:hover {
    color: orange;
    text-decoration: none;
}
.accbox.price h3.ac_in_ttl {
    border-bottom: 1px dashed #797878;
    padding: 1vh 1vh 0.5vh;
    font-size: 1.3em;
    color: #484848;
    font-weight: bold;
    display: block;
}
.accbox.price red {
    color: #EE3333;
}
.accbox.price .cssacc:checked + label + .accshow {
    border-radius: 0;
}
.accbox.price .accbox_opt {
    padding: 0;
    max-width: 100%;
}
.accbox_opt label {
    display: inline-block;
    padding: 1% 2%;
    font-size: 1.1em;
    cursor: pointer;
    transition: all 0.5s;
    border: solid 1px #a1a1a1;
    background: -webkit-gradient(linear, left top, left bottom, from(#f8f8f8), to(#e5e5e5));
    border-radius: 4px;
    color: #000;
}
.accbox_opt label:before {
    content: '▶';
    padding-right: 15px;
}
.accbox_opt label:hover {
    background: linear-gradient(to bottom, #e1e3eb 0%, #d3d7dc 100%);
} 
.accbox_opt input {
    display: none;
}
.accbox_opt .accshow {
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transition: 0.8s;
}
.accbox_opt .accshow p {
    margin: 15px 10px;
}
/* PRESS記事コーナー修正 */
.column-list{
    align-items: stretch;
}
.column-list > li{
    border: 1px solid #ccc;
    margin-bottom: 1.5em;
}
.column-list__item {
    border: none;
    margin: 0;
    width: 100%;
}
@media (min-width: 768px){
    .column-list > li{
        width:230px;
    }
}

/* カタログ請求注意点 */
.notice_wrap{
    border: 1px solid #cccccc;
    padding: 17px;
    margin: 20px 0;
}
.notice_wrap h5{
    font-size:16px;
    margin-bottom: 5px;
}
.notice_wrap p{
    line-height: 1.6;
    font-size:13px;
}

/* カテゴリページ_商品一覧タグ切替エリア */
.block-productlist#list-area{
    margin-top: -100px;
    padding-top: 130px;
    padding-bottom: 30px;
}
.list-cat__item a {
    position: relative;
    border-radius: 50px;
    padding: 8px 30px 8px 12px;
    display: flex;
    align-items: center;
    font-size: 1.2rem;
    color: #333;
    transition: background-color 0.3s, color 0.3s;
}
.list-cat__item a:after {
    content: "";
    display: block;
    width: 5px;
    height: 5px;
    border-right: 1px solid #9d0000;
    border-bottom: 1px solid #9d0000;
    transform: rotate(45deg) translateX(-1px);
    position: absolute;
    top: -1px;
    bottom: 0;
    margin: auto;
    right: 12px;
}
.list-cat__item a:hover {
    color: #ffffff;
    background-color: #9d0000;
    border: 1px solid #9d0000;
    opacity: 1;
}
.list-cat__item.is-current a:after{
    border-color: #fff;
}
.list-cat__item a:hover:after{
    border-color: #fff;
}
.block-tag__sort{
    background: #eeeeee;
    padding: 15px;
    margin-top: 15px;
    border-radius: 5px;
}
.block-tag__title{
    font-size: 1.7rem;
    font-weight: bold;
}
.block-tag__title .icon{
    vertical-align: middle;
    color: #9d0000;
    margin-right: 5px;
}
.block-tag__sort .list-cat{
    margin-bottom: 5px;
}
.block-tag__sort .list-cat__item {
    margin-right: 5px;
    margin-top: 10px;
}
@media (max-width: 767px){
    .block-tag__sort .list-cat{
        justify-content: space-between;
        align-items: start;
    }
    .block-tag__sort .list-cat__item {
        margin-right: 0;
        width: 48%;
    }
    .block-tag__sort .list-cat__item a{
        border-radius: 5px;
        line-height: 1.2;
    }
}

/* 会員登録フォーム_特典バナー */
.banner_benefits{
    display:flex;
    justify-content: space-between;
    flex-direction: column;
}
.banner_benefits img{
    vertical-align: bottom;
    max-width: 100%;
    margin-bottom: 1em;
}
@media screen and (min-width: 1024px) and (max-width: 1347px) {
    .banner_benefits {
        margin-top: 0;
        padding-top: 70px;
    }
}
@media (min-width: 768px){
    .banner_benefits{
        flex-direction: row;
    }
    .banner_benefits img{
        margin-bottom: 0;
        max-width: 50%;
    }
    .banner_benefits img:last-child{
        margin-left:20px;
    }
}

/* 商品詳細_カート・見積ボタン改修 */
.block-detail__order .primary-button__priority {
    background: #eb4d41;
    border: 1px solid #eb4d41;
    padding: 23px 0;
    font-size: 1.8rem;
}
.block-detail__estimate{
    margin: 15px 0 10px!important;
    width: 100%;
}
.primary-button__estimate{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    height: auto;
    padding-top: 15px;
    padding-bottom: 15px;
    font-weight: bold;
    text-decoration: none;
    transition: all 0.2s ease;
    border: none;
    color: #fff;
    background: #35b787;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    font-size: 1.4rem;
}
.primary-button__estimate:hover {
    opacity: 0.5;
    background-color: #35b787;
}
.primary-button__estimate .icon{
    padding-right: 15px;
    font-size:2.2rem;
}
.buttons_col-2 {
    justify-content: space-between;
}
.buttons_col-2 .block-detail__button:nth-child(n+3){
    display: none;
}
.buttons_col-2 .block-detail__button {
    width: calc((100% - 15px) / 2);
}
.buttons_col-2 .button-icon {
    flex-direction: row;
    width: 100%;
    height: 65px;
}
.buttons_col-2 .button-icon__text {
    margin: 0 0 0 10px;
    font-size: 1.2rem;
}
.buttons_col-2 .hidden-pc{
    display:none!important;
}
.buttons_col-2 .hidden-sp{
    display:block!important;
}
.buttons_col-4 .block-detail__button {
    width: calc((100% - 30px) / 4);
}
.buttons_col-4 .button-icon {
    width: 100%;
}
.buttons_col-4 .button-icon .icon {
    font-size: 2.5rem;
}
.buttons_col-4 .button-icon__text {
    font-size: 1.05rem;
}
.icon-cart,.icon-estimate,.icon-contact,.icon-large-lot,.icon-campaign{
    margin-right: 20px;
    width: 27px;
    height: 27px;
    background-position: center;
    background-repeat: no-repeat;
}
.primary-button .icon-balloon{
    margin-right: 20px;
    font-size: 2rem;
}
.icon-cart{
    background-image: url(/html/user_data/assets/img/common/icon_cart.svg);
}
.icon-estimate{
    background-image: url(/html/user_data/assets/img/common/icon_estimate.svg);
}
.icon-contact{
    background-image: url(/html/user_data/assets/img/common/icon_contact.svg);
}
.icon-large-lot{
    background-image: url(/html/user_data/assets/img/common/icon_large-lot.svg);
}
.icon-campaign{
    background-image: url(/html/user_data/assets/img/common/icon_campaign.svg);
}
@media (max-width: 1023px){
    .buttons_col-4  {
        width: 315px;
        margin: 15px auto 10px;
    }
    .buttons_col-4 .block-detail__button {
        width: calc((100% - 15px) / 4);
    }
}
.caption--blue{
    color: #0287dd;
    font-size: 1.2rem;
}
.caption--black{
    color: #222;
    font-size: 1.2rem;
}

.block-detail__sample {
    text-align: left;
}
.block-detail__sample__in {
    padding-left: 15px;
    padding-right: 15px;
}
.block-detail__sample__in:after {
    left: 3em;
    right: inherit;
}

/* カテゴリ_カレンダー */
.calen_select{
    padding-bottom:30px
}
.seletc_ttl {
    color: #bf0000;
    font-size: 1.7rem;
    font-weight: bold;
}
.calen_select ul {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}
.calen_select ul > li {
    width: 100%;
    border: 1px solid #ccc;
    position: relative;
    border-radius: 5px;
    background: -webkit-gradient(linear, left top, left bottom, from(#fbfbfb), to(#e9e9e9));
}
.calen_select ul > li:after {
    content: "";
    position: absolute;
    top: 50%;
    right: 7px;
    width: 5px;
    height: 5px;
    transform: rotate(-45deg) translate(0, -50%);
    border-bottom: 2px solid #bbb;
    border-right: 2px solid #bbb;
}
.calen_select a {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px 20px 10px 10px;
    width: 100%;
    height: 100%;
    transition: all 0.3s ease;
    color: #222;
    box-sizing: border-box;
}
.calen_select a:hover {
    opacity: 0.7;
}
.calen_select .select_l {
    width: 50px;
}
.calen_select .select_l img {
    width: 100%;
    border: 1px solid #999;
    border-radius: 5px;
    vertical-align: bottom;
}
.calen_select .select_r {
    width: calc(100% - 60px);
    display: block;
}
.calen_select .select_r .item_name {
    display: block;
    padding-bottom: 5px;
    color: #0a63c0;
    line-height: 1.4;
    font-size: 1.3rem;
    font-weight: bold;
}
.calen_select .select_r .item_txt {
    color: #555;
    line-height: 1.5;
    font-size: 1.1rem;
}
.calen_select .select_btn{
    display: none;
}
@media screen and (min-width: 768px) {
    .calen_select ul {
        gap: 10px;
    }
    .calen_select ul > li {
        max-width: calc((100% - 20px) / 3);
    }
    .calen_select ul > li:after {
        content: none;
    }
    .calen_select a {
        padding: 12px;
    }
    .calen_select .select_l {
        width: 75px;
    }
    .calen_select .select_r {
        width: calc(100% - 85px);
    }
    .calen_select .select_r .item_name {
        font-size: 1.45rem;
    }
        .calen_select .select_r .item_txt {
        font-size: 1.2rem;
    }
    .calen_select ul:has(> :nth-child(8)) li { 
        width:  calc((100% - 30px) / 4);
        flex-grow: unset;
     }
    .calen_select ul:has(> :nth-child(8)) li .item_name{ 
        font-size: 1.4rem;
    }
    .calen_select ul:has(> :nth-child(8)) li .item_txt{ 
        font-size: 1.1rem;
    }
    .calen_select .select_btn{
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        width: 200px;
        max-width: 100%;
        margin: 0 auto;
        padding: 2px;
        background: #ffffff;
        color: #004fa3;
        border-radius: 50px;
        text-align: center;
        font-size: 1.3rem;
        font-weight: bold;
    }
    .calen_select .select_btn:before{
        content: "";
        position: absolute;
        right: 10px;
        top: 11px;
        width: 10px;
        height: 2px;
        background: #004fa3;
    }
    .calen_select .select_btn:after{
        content: "";
        position: absolute;
        right: 10px;
        top: 8px;
        width: 6px;
        height: 6px;
        border-top: 2px solid #004fa3;
        border-right: 2px solid #004fa3;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
    }
}

/* 価格表 */
.message-comment{
    margin-bottom: 15px;
}

/*  */
.item_link_btn{
    position: relative;
    display: block;
    background: #ebebeb;
    border: solid 1px #ccc;
    border-radius: 5px;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    padding: 10px;
    margin-bottom: 15px;
}
.item_link_btn:after{
    content: '';
    width: 8px;
    height: 8px;
    border-top: solid 3px #551a8b;
    border-right: solid 3px #551a8b;
    position: absolute;
    right: 3%;
    top: 16px;
    transform: rotate(45deg);
}
.item_link_btn:hover{
    background: #ff8d25;
    color: #fff;
}
.item_link_btn:hover:after{
    border-top: solid 3px #fff;
    border-right: solid 3px #fff;
}

/* TOP_カテゴリ・特集バナーリスト */
.category-list{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap:10px;
    padding-bottom: 20px;
}
.category-list__item{
    width: calc((100% - 10px) / 2);
}
.category-list__item a{
    display: block;
}
.category-list__item img{
    width:100%;
    vertical-align: bottom;
}
.category-list__item:hover{
    opacity: 0.7;
}
@media (min-width: 768px){
    .category-list__item{
        width: calc((100% - 20px) / 3);
    }  
}

/* フッター_サポートセンター写真 */
.contact__text{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.contact__image{
    width:100px;
}
.contact__image img{
    width:100%;
    height: fit-content;
}
.contact__heading{
    width: calc(100% - 110px);
    margin-left: 10px;
    margin-right: 0;
}
.contact__heading .sub {
    font-size: 1.3rem;
    text-align: left;
}
.contact__heading .title {
    font-size: 2.1rem;
    font-weight: bold;
}
.contact__lead{
    font-size: 1.2rem;
    text-align: left;
}
@media screen and (min-width: 1348px){
    .contact__heading .sub {
        font-size: 1.5rem;
    }
    .contact__heading .title {
        font-size: 2.5rem;
        font-weight: bold;
    }
    .contact__lead{
        font-size: 1.3rem;
    }
    .contact__lead br{
        display:none;
    }
}

/* TOP_見出し修正(SEO施策) */
.product-list__name {
    font-weight: normal;
}

/* お届け先注意文 */
.sample-caution{
    background-color: #fefdcd;
    padding:10px;
}
.caution-comment{
    font-size:18px;
    font-weight: bold;
    text-align: center;
}
.icon-caution{
    display: inline-block;
    width: 25px;
    height: 25px;
    background-image: url(/html/user_data/assets/img/guide/dezatuku/caution_mark.png);
    background-size: 25px;
    background-position: inherit;
    background-repeat: no-repeat;
    vertical-align: middle;
    margin-right: 5px;
}

/* レイアウト_flex縦並び */
.main-footer__sub {
    flex-direction: column;
}

/* 下部インフォメーション（支払方法・送料等） */
.main-footer__information{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    font-size: 13px;
    margin-top: 50px;
    margin-bottom: 50px;
    padding-top: 50px;
    border-top: 1px solid #ccc;
}
.main-footer__information .info-title{
    font-weight: bold;
    font-size: 1.4em;
    border-left: 7px solid #9d0000;
    padding-left: 7px;
    line-height: 1.2;
    margin-bottom: 10px;
    margin-top: 40px;
}
.main-footer__information .info-title:first-child{
    margin-top: 0;
}
.main-footer__information .info-subtitle{
    font-weight: bold;
    font-size: 1.2em;
    margin-top: 20px;
    margin-bottom: 5px;
}
.main-footer__information .info-subtitle:first-child{
    margin-top: 0;
}
.main-footer__information .info-subtitle span{
    font-size: 0.8em;
    vertical-align: middle;
    color: #555;
}
.main-footer__information .info-link a{
    text-decoration: underline;
    color: #004e98;
}
.main-footer__information .info-link a:hover{
    text-decoration: none;
}
.main-footer__information img{
    vertical-align: bottom;
}
@media screen and (min-width: 1024px){
    .information__left{
        width: 30%;
    }
    .information__center{
        width: 35%;
    }
    .information__right{
        width: 23%;
    }
}
@media screen and (max-width: 1024px){
    .information__center,
    .information__right{
        margin-top: 40px;
    }
}

/* 商品詳細_納期カレンダーボタン */
.unker-button_calendar{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 230px;
    max-width: 100%;
    background: #6bcc00;
    color: #fff;
    margin: 5px auto 0;
    padding: 6px;
    border-radius: 50px;
    font-weight: bold;
}
.unker-button_calendar:hover{
    opacity: 0.5;
    cursor: pointer;
    transition: all 0.2s ease;
}
.unker-button_calendar .icon-calendar{
    margin-right:7px;
    font-size:1.7rem;
}

/* フリーエリア修正 */
.block-detail__edit .block-items__list{
    font-size: 1rem;
}

/* Sランク商品_下部サムネエリア */
.srank_thumb_wrap{
    display:flex;
    flex-direction: column;
    flex-wrap:wrap;
    justify-content: center;
    align-items: center;
    gap:20px;
}
.srank_thumb_wrap img{
    width: 500px;
    max-width: 100%;
    vertical-align: bottom;
}
@media (min-width: 768px){
    .srank_thumb_wrap{
        flex-direction: row;
        justify-content: space-between;
    }
    .srank_thumb_wrap img{
        width: calc((100% - 20px) / 2);
    }
}
/* カテゴリ_リード文章 */
.category_main_title {
    font-size: 2.5em;
}
.category_explanation {
    font-size: 1.4em;
    line-height: 1.7;
}
.category_explanation a{
    text-decoration: underline;
    color: #004e98;
}
.category_explanation a:hover{
    text-decoration: none;
}
@media (min-width: 768px){
    .category_explanation{
        font-size:1.5rem;
    }
}
/* 商品詳細_納期カレンダーボタン */
.block-price__table .cell_campaign{
    background-color: #fffd74;
}
/* TOP_商品・特集一覧ボタン（大） */
.button__more{
    margin-top: 20px;
    margin-bottom:50px; 
}
.button__more a{
    box-sizing: border-box;
    position: relative;
    width: 350px;
    max-width: 100%;
    margin: auto;
    padding: 15px 40px;
    border: #ccc solid 1px;
    border-radius: 5px;
    display: block;
    text-align: center;
    color: #9d0000;
    font-size: 1.6rem;
    font-weight: bold;
}
.button__more a:after{
    content: "";
    position: absolute;
    top: 46%;
    right: 15px;
    width: 7px;
    height: 7px;
    border-bottom: 2px solid;
    border-right: 2px solid;
    border-color: #939393;
    transform: rotate(-45deg) translate(0, -50%);
}
@media (min-width: 1024px){
    .button__more{
        margin-top:0;
    }
}
/* 商品詳細ページ_改修 */
.block-detail__head-icon{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    margin-top: -15px;
    margin-bottom: -15px;
}
.block-detail__head-icon .block-detail__button {
    width: auto;
}
.button-simple{
    background: #fff;
    border-radius: 100px;
    font-size: 2.2rem;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.button-simple .simple-icon_copy{
    width: 25px;
    height: 25px;
    background: url(/html/user_data/assets/img/common/icon_link-copy.svg) no-repeat;
}
.button-simple .simple-icon_heart{
    width: 25px;
    height: 25px;
    background: url(/html/user_data/assets/img/common/icon_bookmark-off.svg) no-repeat;
}
.block-detail__button--selected .button-simple .simple-icon_heart{
    background: url(/html/user_data/assets/img/common/icon_bookmark-on.svg) no-repeat;
}
.block-detail__head-wrap{
    display: flex;
    flex-wrap:nowrap;
    justify-content: space-between;
}

/* カート画面_改修 */
.block-speech__wrap{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
}
.block-speech__balloon{
    display: block;
    width: calc(100% - 70px);
    margin-right: 20px;
    border: 1px solid #ccc;
    border-radius: 10px;
    padding: 15px;
    position: relative;
    word-break: break-all;
    line-height: 1.6;
}
.block-speech__balloon:before{
    content: "";
    position: absolute;
    top: 45%;
    right: -10px;
    border-left: 11px solid #ffffff;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    z-index: 2;
}
.block-speech__balloon:after{
    content: "";
    position: absolute;
    top: 45%;
    right: -11px;
    border-left: 11px solid #ccc;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
}
.block-speech__comment{
    font-size: 1.25rem;
}
.block-speech__image{
    width: 50px;
}
.block-draft {
    border: none;
}
.block-cart {
    margin-top: 40px;
}
.block-caption__box{
    border:1px solid #ccc;
    padding:20px;
}
.block-caption__title{ 
    position: relative;
    margin-bottom: 5px;
    padding-left:3rem;
    font-size: 1.8rem;
    font-weight: bold;
}
.block-caption__title::before {
    content: "";
    position: absolute;
    top: 45%;
    left: 0;
    width: 20px;
    height: 20px;
    transform: translateY(-50%);
    background: url(/html/template/default/assets/img/icon_alert.svg) no-repeat 0 0/contain;
}
.block-caption__list{ 
    line-height: 1.4;
    padding-left: 1.5em;
}
.block-caption__list li{ 
    list-style: disc;
}
.block-caption__list li::marker{ 
    color:#bf0000;
    font-size: 20px;
}
.block-cart__draft{
    display: none;
}
@media (min-width: 1024px){
    .block-cart__right__head {
        align-items: flex-start;
        flex-direction: column;
    }
    .block-speech__balloon{
        width: calc(100% - 100px);
        padding: 20px;
    }
    .block-speech__comment{
        font-size: 1.5rem;
    }
    .block-speech__image{
        width: 80px;
    }
}

/* 注文手続き画面_改修 */
.block-cart:first-child{
    border-bottom: 1px solid #ccc;
    border-top: none;
}
@media (min-width: 1024px) {
    .form-vertical .form-block{
        display: block;
    }
    .form-vertical .form-item__input {
        margin-top: 15px;
    }
    .form-vertical .form-info__input {
        margin-top:15px;
    }
    .form-vertical .form-item__name {
        width: auto;
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }
    .form-vertical .form-item__name .tag--required {
        margin-left: 10px;
        margin-bottom: 0;
    }
    .form-item__name {
        flex-wrap: wrap;
    }
    .form-item__sub-name{
        font-size:1.3rem;
    }
}

/* 遅延お知らせ */
.delivery-information {
    margin: 25px 0;
    padding: 15px 20px;
    line-height: 1.8;
    border: 1px solid #ccc;
    background: #f9f9f9;
    border-radius: 5px;
    font-size: 1.4rem;
}

/* 商品ページ_在庫数確認表 */
.block-zaiko__title{
    font-size: 1.7rem;
    margin-bottom: 5px;
}
.block-zaiko__list{
    width: 500px;
    max-width: 100%;
}
.block-zaiko__table{
    width: 100%;
    table-layout: fixed;
}
.block-zaiko__table th,
.block-zaiko__table td{
    vertical-align: middle;
    text-align: center;
    border: 1px solid #ccc;
    padding: 5px;
    font-size: 1.2rem;
}
.block-zaiko__top{
    color: #ffffff;
    background-color: #666666;
    font-weight: 600;
}
.block-zaiko__subttl{
    font-weight: 600;
    background-color: #f7f7f7;
}
.block-zaiko__type-head{
    color: #ffffff;
    background-color: #ff8d25;
    font-weight: 600;
    width: 160px;
}
.block-zaiko__type{
    background-color: #fff1e4;
    font-weight: 600;
}
.block-zaiko__count{
    width: calc((100% - 160px) / 2);
}

/* TOP_キャンペーン情報コーナー */
.campaign-list__wrap{
    overflow-x: scroll;
}
.campaign-list{
    display: flex;
    width: max-content;
    gap: 15px;
}
.campaign-list__item{
    width: 180px;
    margin-bottom: 10px;
}
.campaign-list__item a{
    display: block;
    color:#222;
}
.campaign-list__item img{
    width:100%;
    vertical-align: bottom;
    border: 1px solid #ddd;
}
.campaign-list__item a:hover{
    opacity: 0.7;
}
.campaign-list__limit{
    display: block;
    background: #000;
    margin: 5px 0;
    padding: 3px 10px;
    color: #fff;
    text-align: center;
    font-size: 1.3rem;
}
.campaign-list__comment{
    display: block;
    margin-top: 5px;
    font-size: 1.3rem;
    line-height: 1.4;
}
@media (min-width: 1024px){
    .campaign-list__wrap{
        overflow-x: unset;
    }
    .campaign-list{
        width: 100%;
        justify-content: space-between;
    }
    .campaign-list__item{
        width: calc(100% / 4);
    } 
    
}

/* TOP_主力商品紹介コーナー */
.thumbnail-detail__wrap {
    margin-bottom: 10px;
    background: #f9f9f9;
    position: relative;
}
.thumbnail-detail__wrap a {
    transition: all 0.2s;
}
.thumbnail-detail__wrap a:hover{
    opacity: 0.7;
}
.thumbnail-detail__title{
    color:#9d0000;
    font-size:1.6rem;
    font-weight: bold;
    padding-bottom:10px;
}
.thumbnail-detail__image img{
    vertical-align: bottom;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.thumbnail-detail__text{
    padding: 15px;
}
.thumbnail-detail__comment{
    font-size:1.4rem;
}
.thumbnail-detail__leading{
    margin: 10px auto 0;
    border-radius: 5px;
    text-align: center;
}
.thumbnail-detail__leading a{
    position: relative;
    color: #222;
    padding: 7px 30px 7px 50px;
    font-size: 1.4rem;
    display: inline-block;
    font-weight: bold;
    border: 1px solid #dddddd;
    border-radius: 50px;
    max-width: 100%;
    background: #fff;
}
.thumbnail-detail__leading a:before,
.thumbnail-detail__leading a:after{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 15px;
    margin: auto;
    content: "";
    vertical-align: middle;
}
.thumbnail-detail__leading a:before{
    width: 16px;
    height: 16px;
    background: #e84269;
    border-radius: 50%;
}
.thumbnail-detail__leading a:after{
    left: 21px;
    box-sizing: border-box;
    width: 5px;
    height: 5px;
    border: 4px solid transparent;
    border-left: 5px solid #fff;
}
.thumbnail-detail__tag{
    position: absolute;
    width: 85px;
    height: 85px;
    top: -3px;
    left: -3px;
    background-repeat: no-repeat;
    filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.2));
}
.thumbnail-detail__tag.tag_ichioshi {
    background-image: url(/html/user_data/assets/img/common/slider-tag_ichioshi.svg);
}
.thumbnail-detail__tag.tag_no1{
    background-image: url(/html/user_data/assets/img/common/slider-tag_no1.svg);
}
@media screen and (min-width: 768px){
    .thumbnail-detail__wrap{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
    }
    .thumbnail-detail__title{
        font-size:1.8rem;
    }
    .thumbnail-detail__image{
        width: 360px;
    }
    .thumbnail-detail__text{
        width: calc(100% - 360px);
        padding: 15px 20px;
    }
}

/* カテゴリナビ(PC)_2カラム */
.sidenav__item{
    margin-bottom: 30px;
    border: none;
}
.sidenav__title{
    background: #717171;
    font-size: 1.4rem;
    font-weight: bold;
}
.sidenav__list_pc .list-item {
    display: flex;
    align-items: center;
    position: relative;
    padding:10px 0;
    border-bottom: 1px solid #ddd;
    color:#222;
}
.sidenav__list_pc .list-item::before {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    width: 5px;
    height: 5px;
    transform: rotate(-45deg) translate(0, -50%);
    border-bottom: 2px solid #bbb;
    border-right: 2px solid #bbb;
}
.sidenav__list_pc .list-item:hover {
    background: none;
}
.sidenav__list_pc .list-item:hover .list-item__text{
    color:#bf0000;
    transition: all 0.2s ease;
}
.sidenav__list_pc .list-item img {
    margin-right: 10px;
}
.sidenav__list_pc .list-item__text {
    font-size: 1.25rem;
    font-weight: bold;
    width: 170px;
    margin-right: 10px;
}
.sidenav__list_pc .list-item .tag {
    position: absolute;
    top: 50%;
    right: 20px;
    margin: 0;
    transform: translate(0, -50%);
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
}
.sidenav__list_pc .list-item:hover img{
    opacity: 0.5;
    transition: all 0.2s ease;
}
.sidenav__list_pc .list-item__text p {
    font-weight: normal;
}
.sidevav_more-link{
    margin-top:10px;
}
.sidevav_more-link a{
    display: flex;
    align-items: center;
    border: 1px solid #bf0000;
    justify-content: center;
    padding: 10px;
    font-size: 1.4rem;
    font-weight: bold;
    color: #222;
}
.sidevav_more-link a:hover{
    opacity: 0.7;
}
.sidevav_more-link img{
    margin-right:10px;
}

/* 商品詳細ページ　商品画像コーナー */
.detail-contents {
text-align: center;
}
.detail-contents img:hover {
	opacity: 0.5 ;
}
@media only screen and (min-width: 600px) {
.detail {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
    margin-top: 50px;
}
.detail-contents {
    width: calc(50% - 9px);
}
}

/* カテゴリ_タイプ別紹介コーナー */
.category-contents{
    display: flex;
    flex-wrap: wrap;
    gap:10px;
    padding-bottom: 50px;
}
.category-contents__item{
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 5px;
    overflow: hidden;
}

.category-contents__item a,
.category-contents__item > div{
    display: flex;
    flex-direction: column;
    color: #222;
    height: 100%;
    padding:10px;
    box-sizing: border-box;
    transition: all 0.2s;
}
.category-contents__item a:has(.category-contents__title) {
    flex-direction: column-reverse;
    justify-content: flex-end;
    gap:10px;
}
.category-contents__item a:hover{
    opacity: 0.7;
}
.category-contents__item a:hover .category-contents__title{
    color:#bf0000;
}
.category-contents__item .contents_text{
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60px;
    padding: 0;
    height: 100%;
    font-size: 1.4rem;
}
.category-contents__title{
    position: relative;
    width: 100%;
    margin-bottom: 5px;
    text-align: center;
    line-height: 1.4;
    font-size:1.4rem;
    font-weight: bold;
}
.category-contents__flexbox .flexbox_text {
    text-align: center;
    margin-top: 5px;
    line-height: 1.6;
    font-size: 1.4rem;
}
.flexbox_text_re{
    text-align: center;
    margin-top: 5px;
    line-height: 1.6;
    font-size: 1.1rem;
}
.category-contents__floatbox{
    display: block;
    padding:0 5px;
}
.category-contents__floatbox img{
    float:right;
    margin:0 0 10px 15px;
}
.category-contents__floatbox .floatbox_text{
    line-height: 1.6;
    font-size: 1.3rem;
}
.category-contents__hover{
    display: flex;
    position: relative;
    align-items: center;
    opacity: 1;
    height: 100%;
    min-height: 75px;
}
.category-contents__hover img{
    vertical-align: bottom;
    width: 100%;
    transition: all 0.2s;
}
.category-contents__hover .hover_text{
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
    font-size: 1.4rem;
    font-weight: bold;
}
.category-contents__hover:hover .hover_text{
    opacity: 1;
    background: #fff;
}
@media screen and (min-width: 768px) {
    .category-contents__item.col--3 {
        width: calc((100% - 30px) / 3);
        padding: 0;
    }
    .category-contents{
        gap:15px;
    }
    .category-contents__item.col-l{
        width: calc((100% - 15px) / 2);
    }
    .category-contents__item.col-m{
        width: calc((100% - 45px) / 4);
        padding:0;
    }
    .category-contents__item.col-s{
        width: calc((100% - 75px) / 6);
    }
    .category-contents__item.col-ss{
        width: calc((100% - 105px) / 8);
    }
    .category-contents__item.col-ss .category-contents__flexbox{
        flex-direction: column;
    }
    .category-contents__item.col-ss .category-contents__flexbox .flexbox_text {
        width: 100%;
        text-align: center;
    }
    .category-contents__floatbox{
        padding:10px 15px;
    }
    .category-contents__item.col-ss:nth-child(8n){
        margin-right:0;
    }
    .category-contents__item a,
    .category-contents__item > div{
        display: block;
        padding: 0;
    }
    .cate-contents__flexbox{
        display: flex;
    }
    .category-contents__flexbox{
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .category-contents__title{
        padding: 10px;
        background: #f4f4f4;
        text-align: left;
        font-size: 1.5rem;
        font-weight: bold;
    }
    .category-contents a .category-contents__title:after{
        content: "";
        position: absolute;
        top: 50%;
        right: 7px;
        width: 5px;
        height: 5px;
        transform: rotate(-45deg) translate(0, -50%);
        border-bottom: 2px solid;
        border-right: 2px solid;
        border-color:#bbb;
    }
    .category-contents a:hover .category-contents__title:after{
        border-color:#bf0000;
    }
    .category-contents__flexbox{
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 8px;
    }
    .category-contents__flexbox img{
        width: 65px;
        height: max-content;
    }
    .category-contents__flexbox .flexbox_text {
        display: block;
        width: calc(100% - 75px);
        margin:0;
        text-align: start;
        font-size: 1.3rem;
    }
    .category-contents__title + .category-contents__flexbox{
        flex-direction: column;
        gap:10px;
    }
    .category-contents__title + .category-contents__flexbox img {
        width:100px;
    }
    .category-contents__title + .category-contents__flexbox .flexbox_text {
        width:100%;
    }
    .category-contents__hover{
        padding: 10px;
    }
}
@media screen and (max-width: 767px) {
    .category-contents__item.col-l{
        width: 100%;
    }
    .category-contents__item.col-l:nth-child(2n){
        margin-right:0;
    }
    .category-contents__item.col-l .category-contents__title {
        font-size: 1.6rem;
        margin-bottom:10px;
    }
    .category-contents__item.col-2,
    .category-contents__item.col-m,
    .category-contents__item.col--3,
    .category-contents__item.col-s,
    .category-contents__item.col-ss{
        width: calc((100% - 20px) / 3);
    }
    .category-contents__flexbox img{
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
}
/* カテゴリ_タブ選択 */
@media screen and (max-width: 767px){
    .category-tab_wrap .tab-list {
        display: flex;
        justify-content: space-between;
        gap: 3px;
        padding: 0 5px;
    }
    .category-tab_wrap .tab-list-item {
        position: relative;
        text-align: center;
        background-color: #e8e8e8;
        padding: 15px 5px;
        width: 100%;
        line-height: 1.4;
        font-size: 14px;
        font-weight: bold;
        border-radius: 5px 5px 0 0;
    }
    .category-tab_wrap .tab-list-item:hover {
        color:#9d0000;
        cursor: pointer;
    }
    .category-tab_wrap .tab-list-item.active {
        background-color: #9d0000;
        color: #fff;
    }
    .category-tab_wrap .tab-list-item.active:after{
        content: "";
        position: absolute;
        z-index: 1;
        left: 40%;
        bottom: -8px;
        border-top: 9px solid #9d0000;
        border-left: 8px solid transparent;
        border-right: 8px solid transparent;
        border-bottom: 0;
    }
    .category-tab_wrap{
        margin-bottom: 50px;
    }
    .category-tab_wrap .tab-contents{
        background: #f7f7f7;
        padding: 25px 10px 20px;
    }
    .category-tab_wrap .tab-contents-item {
        display: none;
    }
    .category-tab_wrap .tab-contents-item.show {
        display: block;
    }
    .category-tab_wrap .tab-contents-item .category-contents{
        padding-bottom:0;
    }
}

/* ボトム_制作事例*/
.example-list__inr {
    display: flex;
    flex-wrap: wrap;
    padding-bottom: 40px;
}
.example-list__inr li {
    letter-spacing: normal;
    border-bottom: 1px solid #ccc;
    margin-bottom: 0;
    padding: 1.5% 0;
    vertical-align: top;
}
.example-list__inr li a {
    color: #000;
    position: relative;
    padding: 5% 5% 0;
}
.rankList li a, .example-list__inr li a {
    display: block;
}
.new {
    background: #ff654a;
    padding: 3px 5px;
    font-size: 1.2em;
    color: #fff;
    position: absolute;
    z-index: 1;
    left: 5%;
    top: 3%;
    border-radius: 4px;
}
.example-list__inr li img {
    max-width: 90%;
    max-height: 90%;
    display: block;
    margin: auto;
}
.example-list__inr li .wc_news {
    display: block;
    width: 100%;
    bottom: 0;
    padding-top: 5%;
}
.example-list__inr li .wc_news .wc_company {
    font-size: 13px;
    font-weight: bold;
    line-height: 16px;
    display: block;
}
.example-list__inr li .wc_news .wc_item {
    font-size: 11px;
    padding-top: 5px;
    line-height: 1.4;
    color: #575757;
}
.rankList li a:hover, .example-list__inr li a:hover {
    opacity: 0.7;
}
.content__lead {
    margin-top: 0;
    text-align: left;
    font-size: 1.4rem;
}
.staff-reaction{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    padding: 30px 20px;
    gap: 20px;
    background: #f7f7f7;
    margin-top:30px;
    margin-bottom: 60px;
    border-radius: 10px;
}
.staff-reaction__box{
    padding: 10px;
    position: relative;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 1px 5px rgb(0 0 0 / 20%);
}
.staff-reaction__inr{
    border: 1px dashed #ccc;
    padding: 16px;
    border-radius: 5px;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.staff-reaction__heading{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 5px;
    margin-bottom: 10px;
    border-bottom: 1px solid #ddd;
}
.staff-reaction__heading img{
    width: 75px;
    margin-top: -35px;
    height: max-content;
}
.staff-reaction__caption{
    font-size: 1.6rem;
    line-height: 1.4;
    font-weight: bold;
}
.staff-reaction__comment{
    font-size: 1.3rem;
}
.staff-reaction__comment red{
    font-weight: bold;
    color:#d90000;
}
.sub_title{
    margin-bottom: 20px;
    font-size: 2rem;
    text-align: center;
    color: #9d0000;
}
@media screen and (max-width: 767px){
    .example-list{
        overflow-x: scroll;
    }
    .example-list__inr{
        width: max-content;
    }
    .example-list__inr li {
        width: 150px;
    }
    .example-list__inr li .wc_news {
        height: 80px;
    }
}
@media screen and (min-width: 768px){
    .example-list__inr li {
        width: 20%;
    }
    .example-list__inr li .wc_news {
        height: 90px;
    }
    .staff-reaction{
        margin-top:0;
    }
    .staff-reaction__box{
        width: calc((100% - 40px) / 3);
    }
}

/* ボトム_素材別メリット*/
.category-merit{
    padding-bottom:50px;
}
.category-merit__grid{
    display: grid;
    grid-template-rows: auto 1fr;
    grid-template-columns: 100px 1fr;
    gap: 0 15px;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px dashed #ccc;
}
.category-merit__title{
    grid-row: 1 / 2;
    grid-column: 2 / 3;
    margin-bottom:10px;
    font-size: 1.6rem;
    color: #9d0000;
}
.category-merit__grid img{
    grid-row: 1 / 3;
    grid-column: 1 / 2;
    vertical-align: bottom;
}
.category-merit__note{
    grid-row: 2 / 3;
    grid-column: 2 / 3;
    font-size: 1.3rem;
}
@media screen and (min-width: 768px) {
    .category-merit__grid{
        grid-template-columns: 150px 1fr;
        gap: 0 10px;
    }
    .category-merit__title{
        font-size: 1.8rem;
    }
    .category-merit__note{
        font-size: 1.5rem;
    }
}

/* カテゴリ_PRESS記事リンク */
.category-contents__press {
    border:1px solid #ccc;
    width: 100%;
}
.category-contents__press a{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 10px;
    height: 100%;
    box-sizing: border-box;
}
.category-contents__press a:hover{
    opacity: 0.7;
}
.category-contents__press img{
    width: 180px;
    height: max-content;
    vertical-align: bottom;
}
.category-contents__press .column-list__wrap{
    width: calc(100% - 180px);
    padding: 0 0 0 15px;
}

@media screen and (min-width: 768px) {
    .category-contents__press:only-child {
        width: 100%!important;
    }
    .category-contents__press:only-child a{
        flex-direction: row!important;
    }
    .category-contents__press:only-child img{
        width: 180px!important;
    }
    .category-contents__press:only-child .column-list__wrap {
        width: calc(100% - 180px)!important;
    }
    .category-contents__press:first-child:nth-last-child(2n),
    .category-contents__press:first-child:nth-last-child(2n) ~ * {
        width: calc((100% - 15px) / 2);
    }
    .category-contents__press:first-child:nth-last-child(2n+1),
    .category-contents__press:first-child:nth-last-child(2n+1) ~ * {
        width: calc((100% - 30px) / 3);
    }
    .category-contents__press:first-child:nth-last-child(2n+1) a,
    .category-contents__press:first-child:nth-last-child(2n+1) ~ * a{
        flex-direction: column;
        padding:0;
    }
    .category-contents__press:first-child:nth-last-child(2n+1) img,
    .category-contents__press:first-child:nth-last-child(2n+1) ~ * img{
        width: 100%;
    }
    .category-contents__press:first-child:nth-last-child(2n+1) .column-list__wrap,
    .category-contents__press:first-child:nth-last-child(2n+1) ~ * .column-list__wrap{
        width: 100%;
        padding:10px;
    }
}


/* 新規カテゴリページ */
.contents_text {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60px;
    padding: 10px;
    height: 100%;
    font-size: 1.4rem;
    position: relative;
}
.difference-point_box {
    margin-top: 50px;
    margin-bottom: 70px;
    }
    
.difference-point {
    padding: 10px;
    margin-bottom: 20px;
    }
.difference-point_img {
    width: 100%;
    }
    
.difference-point_text {
    font-size: 1.6em;
    margin-left: 20px;
    }
    
.difference-point_text {
    font-size: 1.6em;
    }

.green-product_content {
    text-align: center;
}
.green-product_text {
    font-size: 1.6em;
    }

.green-product_content_01 {
    width: 50%;
    margin: 20px auto 20px;
}
.green-product_content_02 {
    width: 50%;
    margin: 20px auto 20px;
}
.green-product_btn {
    box-sizing: border-box;
    position: relative;
    width: 350px;
    max-width: 100%;
    margin: 20px auto;;
    padding: 15px 40px;
    border: #ccc solid 1px;
    border-radius: 5px;
    display: block;
    text-align: center;
    color: #9d0000;
    font-size: 1.6rem;
    font-weight: bold;
}
    
.green-product_btn:after {
    content: "";
    position: absolute;
    top: 46%;
    right: 15px;
    width: 7px;
    height: 7px;
    border-bottom: 2px solid;
    border-right: 2px solid;
    border-color: #939393;
    transform: rotate(-45deg) translate(0, -50%);
}

h3.category_title {
font-size: 1.6rem;
font-weight: bold;
border-left: 6px solid #9d0000;
padding-left: 10px;
margin: 40px 0 20px;
    }
h3.category_title_exercise {
    font-size: 1.6rem;
    font-weight: bold;
    border-left: 6px solid #9d0000;
    padding-left: 10px;
    margin: 0 0 20px;
}
.trivia {
    margin-bottom: 50px;
}
.staff-reaction__content {
    padding: 8px;
    position: relative;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 1px 5px rgb(0 0 0 / 20%);
    background-color: #fffde6;
}
.staff-reaction__item {
    border: 1.5px dashed #c33636;
    padding: 15px;
    border-radius: 5px;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.staff-reaction__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 5px;
    margin-bottom: 10px;
    border-bottom: 1px solid #c33636;
}
.flex_banner-list{
    display: flex;
    flex-direction: column;
    gap:15px;
}
.flex_banner-list a{
    display: block;
    transition: all 0.2s;
}
.flex_banner-list a:hover{
    opacity: 0.7;
}
.flex_banner-list img{
    width:100%;
    vertical-align: bottom;
}
.category-header_back{
    display: flex;
    align-items: center;
    margin-bottom: 30px;
    padding: 15px 35px 15px 15px;
    border-left: 7px solid #9d0000;
    background-color: #fafafa;
    background-repeat: no-repeat;
    background-position-y: center;
    background-position-x: right;
    background-size: cover;
}
.category-header_title{
    line-height: 1.3;
    max-width: 740px;
    font-size: clamp(1.5rem, 2vw, 2.6rem);
    font-weight: bold;
    text-shadow: 0 0 3px #fafafa, 0 0 3px #fafafa, 0 0 3px #fafafa, 0 0 3px #fafafa, 0 0 3px #fafafa, 0 0 3px #fafafa, 0 0 3px #fafafa, 0 0 3px #fafafa, 0 0 3px #fafafa, 0 0 3px #fafafa, 0 0 3px #fafafa, 0 0 3px #fafafa, 0 0 3px #fafafa, 0 0 3px #fafafa, 0 0 3px #fafafa, 0 0 3px #fafafa;
}
@media screen and (min-width: 768px) {
    .category-contents__flexbox {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 8px;
        }
    .cate-contents__flexbox{
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 8px;
    }
    .staff-reaction__content {
        width: calc((100% - 40px) / 3);
        }
    .difference-point {
        display: flex;
        justify-content: space-between;
        width: 100%;
        }   
    .difference-point_img {
        width: 40%;
        height: 100%;
        }  
    .difference-point_text {
        width: 60%;
        }  
    .guide_frame .clum2 .block {
        padding: 0;
        }   
    .green-product_content {
        display: flex;
        width: 100%;
        margin-top: 30px;
        align-items: center;
        }
    .green-product_content_01 {
        flex-grow: 1;
        width: 100px;
        padding: 20px;
    }
    .green-product_content_02 {
        flex-grow: 1;
        width: 100px;
        padding: 20px;
    }
    .green-product_content_03 {
        flex-grow: 2;
    }
    .green-product_btn {
        margin: auto;
    }
    .flex_banner-list{
        flex-direction: row;
        gap:15px;
    }
    .head_anchor .contents_text {
        font-weight: bold;
    }
    .head_anchor .contents_text::after {
        content: '';
        width: 6px;
        height: 6px;
        border: 0;
        border-top: solid 2px #bbb;
        border-right: solid 2px #bbb;
        position: absolute;
        top: 50%;
        right: 15px;
        margin-top: -5px;
        transform: rotate(135deg);
    }
    .category-header_back{
        height: 100px;
    }
}

/* TOP_おすすめ特集（タブ切替） */
.trend-tab__wrap{
    margin-top: 15px;
}
.trend-tab__wrap .tab-list {
    display: flex;
    justify-content: space-between;
    gap: 5px;
    padding: 0 5px;
}
.trend-tab__wrap .tab-list-item {
    position: relative;
    text-align: center;
    background-color: #e8e8e8;
    padding: 15px 5px;
    width: 100%;
    line-height: 1.4;
    font-size: 1.8rem;
    font-weight: bold;
    border-radius: 5px 5px 0 0;
}
.trend-tab__wrap .tab-list-item span{
    display: none;
}
.trend-tab__wrap .tab-list-item:hover {
    color:#9d0000;
    cursor: pointer;
}
.trend-tab__wrap .tab-list-item.active {
    background-color: #9d0000;
    color: #fff;
}
.trend-tab__wrap .tab-list-item.active:after{
    content: "";
    position: absolute;
    z-index: 1;
    left: 40%;
    bottom: -8px;
    border-top: 9px solid #9d0000;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 0;
}
.trend-tab__wrap .tab-contents{
    background: #f7f7f7;
    padding: 20px 10px;
}
.trend-tab__wrap .tab-contents-item {
    display: none;
}
.trend-tab__wrap .tab-contents-item.show {
    display: block;
    padding-bottom: 10px;
}
.trend-tab__wrap .button__more{
    margin: 0;
}
.trend-tab__wrap .button__more a{
    background: #fff;
}
@media screen and (min-width: 768px){
    .trend-tab__wrap .tab-contents{
        padding: 20px 20px 30px;
    }
    .trend-tab__wrap .tab-list-item span{
        display: inline-block;
        font-size:1.2rem;
        font-weight: normal;
    }
}
/*クリアファイル リサイクルマーク*/
@media screen and (min-width: 768px){
    .pc__recycle{
        display: flex;
    }
    .pc__recycle img{
        width: 60px;
    }
    .pc__design {
        padding: 0.6rem 0rem 0.6rem 0.4rem;
        border-left: 5px solid #898989;
        background: #f4f4f4;
        margin-top: 1.2rem;
        margin-bottom: 50px;
    }
}

/* 配信メッセージ */
.notification_info .mail-button{
    display: inline-block;
    justify-content: center;
    align-items: center;
    position: relative;
    border-radius: 5px;
    height: auto;
    padding: 10px 30px 10px 70px;
    font-size: 1.6rem;
    font-weight: bold;
    text-decoration: none;
    background: #9d0000;
    color: #fff;
    transition: all 0.2s ease;
    box-sizing: border-box;
}
.notification_info .mail-button:before{
    position: absolute;
    content: "";
    width: 20px;
    height: 14px;
    top: 50%;
    left: 25px;
    transform: translateY(-50%);
    background: no-repeat 0 0/contain;
    background-image: url(/html/template/default/assets/img/ico_mail_w.svg);
}

/* カテゴリ_人気ランキング（ver.20230427） */
.product-list__ranking {
    width: 130px;
}
.product-list__ranking .ranking__rank {
    z-index: 1;
}
.product-list__ranking .ranking__rank:before {
    font-size: 2.2rem;
    font-weight: bold;
}
.product-list__ranking:first-of-type .ranking__rank {
    color: #dbb20b;
}
.product-list__ranking:first-of-type .ranking__rank:before {
    content: "1";
}
.product-list__ranking:nth-of-type(2) .ranking__rank {
    color: #4d7099;
}
.product-list__ranking:nth-of-type(2) .ranking__rank:before {
    content: "2";
}
.product-list__ranking:nth-of-type(3) .ranking__rank {
    color: #cc5229;
}
.product-list__ranking:nth-of-type(3) .ranking__rank:before {
    content: "3";
}
.product-list__ranking:nth-of-type(4) .ranking__rank:before {
    content: "4";
}
.product-list__ranking:nth-of-type(5) .ranking__rank:before {
    content: "5";
}
.category-ranking__wrap{
    margin-bottom: 30px;
    padding: 10px;
    border-radius: 5px;
    border: 2px solid #ccc;
}
.category-ranking__title {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    text-align: center;
    font-size: 2rem;
    margin-bottom: 10px;
}
.icon-crown{
    display: inline-block;
    width: 25px;
    height: 25px;
    margin: 0 5px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position-y: bottom;
    background-image:url(/html/user_data/assets/img/common/icon_crown.svg); 
}
.category-ranking__wrap .block-items__item__img {
    padding-top: 0;
}
.category-ranking__wrap .ranking__rank {
    position: initial;
    background: none;
    padding: 0;
    display: block;
    width: auto;
    height: auto;
    text-align: center;
    line-height: 1.2;
    background-image: url(/html/user_data/assets/img/common/icon_rank-back.webp);
    background-repeat: no-repeat;
    background-size: 50px;
    background-position-x: center;
    background-position-y: 2px;
}
.category-ranking__wrap .product-list__ranking:first-of-type .ranking__rank {
    background-image: url(/html/user_data/assets/img/common/icon_rank-back_gold.webp);
}
.category-ranking__wrap .product-list__ranking:nth-of-type(2) .ranking__rank {
    background-image: url(/html/user_data/assets/img/common/icon_rank-back_silver.webp);
}
.category-ranking__wrap .product-list__ranking:nth-of-type(3) .ranking__rank {
    background-image: url(/html/user_data/assets/img/common/icon_rank-back_bronze.webp);
}
.category-ranking__wrap .block-items__item__link{
    display: flex;
    flex-direction: column;
    transition: all 0.2s;
}
.category-ranking__wrap .block-items__item__link:hover{
    opacity: 0.7;
}
.category-ranking__wrap .block-items__item__img img  {
    position: relative;
    height: auto;
}
.category-ranking__wrap .product-list__ranking{
    margin: 0;
    background: #fff;
    padding: 5px 10px 10px;
    border-right: 1px solid #ddd;
}
.category-ranking__wrap .product-list__ranking:last-child{
    border-right: none;
}
.category-ranking__wrap .product-list__inr{
    justify-content: space-around;
    align-items: stretch;
}
.category-ranking__wrap .product-list__name {
    color: #222;
    height: 2.8em;
    line-height: 1.4;
    font-size: 1.2rem;
    font-weight: bold;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}
.category-ranking__wrap .product-list__lot {
    font-size: 1rem;
}
.category-ranking__wrap .product-comment{
    font-size: 1.1rem;
    color: #888888;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    margin-top: auto;
}
.category-ranking__wrap .product-comment *{
    font-size: 1.1rem;
    color: #888888;
    font-weight: normal;
    text-decoration: none;
}
.category-ranking__wrap .product-comment a a,
.category-ranking__wrap .product-comment a + a,
.category-ranking__wrap .product-comment div,
.category-ranking__wrap .product-comment ul,
.category-ranking__wrap .product-comment img{
    display: none;
}
@media screen and (min-width: 768px){
    .category-ranking__wrap{
        padding: 15px;
    }
    .category-ranking__wrap .product-list__inr{
        flex-wrap: nowrap;
        overflow: hidden;
        width: 100%;
    }
    .category-ranking__wrap .product-list__ranking{
        min-width: calc((100% - 20px) / 5);
        width: 100%;
        max-width: 400px;
    }
    .category-ranking__wrap .product-comment{
        font-size: 1.2rem;
    }
}

/* シーン別おすすめノベルティ */
.by-scene_wrap{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    background: #d7f3b9;
    align-items: stretch;
}
.by-scene_wrap img{
    vertical-align: bottom;
}
.by-scene_left{
    width: 100%;
    display: flex;
    flex-direction: column;
    padding:15px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: right -15px top 8px;
    background-image: url(/html/user_data/assets/img/item/by-scene_bg-dandy.webp);
}
.by-scene_left__comment {
    position: relative;
    background: rgba(255,255,255,0.9);
    border-radius: 10px;
    margin: 10px 0;
    padding: 10px 15px;
    font-size: calc(100% + 100vw * 1 / 600);
}
.by-scene_left__comment:after{
    content: "";
    position: absolute;
    border-bottom: 28px solid rgba(255,255,255,0.9);
    border-left: 20px solid transparent;
    width: 0;
    height: 0;
    right: 60px;
    bottom: 100%;
}
.by-scene_list{
    width: 100%;
    display: flex;
    gap: 10px;
    padding: 10px;
}
.by-scene_list > li{
    width: calc((100% - 10px) / 2);
    margin-top: 55px;
    padding-bottom: 10px;
    position: relative;
    background: #fff;
    box-shadow: 1px 1px 3px rgba(0,0,0,0.2);
}
.by-scene_item__baloon{
    position: absolute;
    top: -60px;
    padding: 5px;
    background: rgba(255,255,255,0.7);
    border-radius: 5px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}
.by-scene_item__baloon:after{
    content: "";
    position: absolute;
    z-index: 1;
    left: 46%;
    bottom: -9px;
    border-top: 9px solid rgba(255,255,255,0.7);
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
}
.by-scene_item__baloon span{
    font-size: calc(100% + 100vw * 1 / 800);
    line-height: 1.4;
}
.by-scene_item__img{
    padding: 10px;
}
.by-scene_item__name{
    padding: 5px 10px 7px;
    color: #222;
    line-height: 1.4;
    font-size: 1.2rem;
}
.by-scene_list a{
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: all 0.2s;
}
.by-scene_list a:hover{
    opacity: 0.7;
}
.by-scene_item__btn{
    position: relative;
    width: 87%;
    margin-top: auto;
    margin-left: auto;
    margin-right: auto;
    padding: 4px;
    text-align: center;
    background: #c70000;
    background: linear-gradient(#e63735,#9b0705);
    border: 1px solid #bd0000;
    box-shadow: 0px 1px 1px rgba(0,0,0,0.8);
    color: #fff;
    border-radius: 3px;
    letter-spacing: -0.5px;
    font-size: calc(100% + 100vw * 1 / 400);
    font-weight: bold;
}
.by-scene_item__btn:after{
    content: "";
    position: absolute;
    top: 45%;
    right: 3px;
    width: 4px;
    height: 4px;
    border-bottom: 1px solid;
    border-right: 1px solid;
    border-color: #fff;
    transform: rotate(-45deg) translate(0, -50%);
}
.by-scene_left__link{
    margin-top: auto;
}
.by-scene_left__link a{
    display: block;
    position: relative;
    width: 75%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 5px;
    padding: 10px 20px 10px 10px;
    text-align: center;
    background: #c70000;
    background: linear-gradient(#e63735,#9b0705);
    border: 1px solid #bd0000;
    box-shadow: 0px 1px 2px rgba(0,0,0,0.5);
    color: #fff;
    border-radius: 5px;
    font-size: calc(100% + 100vw * 1 / 400);
    font-weight: bold;
    transition: all 0.2s;
}
.by-scene_left__link a:hover{
    opacity: 0.7;
}
.by-scene_left__link a:after{
    content: "";
    position: absolute;
    top: 45%;
    right: 10px;
    width: 6px;
    height: 6px;
    border-bottom: 2px solid;
    border-right: 2px solid;
    border-color: #fff;
    transform: rotate(-45deg) translate(0, -50%);
}
.by-scene_item__link .block-items__item__price {
    flex-wrap: wrap;
    margin: 0;
    padding: 0 10px 5px;
}
@media screen and (min-width: 768px){
    .by-scene_wrap{
        flex-direction: row;
        flex-wrap: nowrap;
    }
    .by-scene_left{
        width: 39%;
    }
    .by-scene_list{
        width: 61%;
        padding: 15px 15px 15px 0;
        gap:10px
    }
    .by-scene_list > li{
        width: calc((100% - 10px) / 2);
    }
    .by-scene_item__name{
        font-size: 1.3rem;
    }
    .by-scene_item__btn:after{
        right: 5px;
        width: 6px;
        height: 6px;
        border-bottom: 2px solid;
        border-right: 2px solid;
    }
}

/* 説明用ボタン＋モーダルウインドウ内レイアウト */
.question{
    display: inline-block;
    cursor: pointer;
}
.question:before{
    display: flex;
    align-items: center;
    justify-content: center;
    content: '?';
    height: 18px;
    width: 18px;
    font-weight: bold;
    font-size: 1.4rem;
    line-height: 1;
    border-radius: 50%;
    background-color: #9d0000;
    color: #fff;
    transition: all 0.3s;
}
.question:hover:before{
    background-color: #ff8d25;
}
.modal-title{
    display: flex;
    gap: 10px;
    border-bottom: 1px solid #ccc;
    margin-bottom: 15px;
    padding-bottom: 5px;
    align-items: center;
    color: #9d0000;
    font-size: 1.8rem;
}
.modal-title img{
    vertical-align: bottom;
}

/* ヘッダー_幅100% */
.header-nav__badge {
    right: 0;
}
.search .form{
    display: flex;
    align-items: center;
}
@media screen and (min-width: 1348px){
    .header-full{
        width: 100%;
    }
    .is-fixed .main-header__body .search {
        display: none;
    }
    .main-header__body .search__form {
        width: calc(100vw - 1130px);
    }
}
@media screen and (min-width: 1024px){
    .header-nav li a {
        width: 55px;;
        font-size: 1.1rem;
    }
    .header-nav li img {
        width: 35px;
        height: 35px;
    }
    .main-header .search-sp.is-fixed {
        display: none;
    }
}
/* ヘッダー_レスポンシブ挙動打ち消し */
.main-header .category__list .sidenav__list {
    max-height: calc(100vh - 265px);
}
@media screen and (min-width: 1024px) {
    .main-header .search-sp {
        padding-top: 15px;
        padding-bottom: 15px;
    }
    .main-header__sub .wrap-left{
        width: calc(100% - 450px);
        justify-content: flex-start;
    }
    .main-header__body .body-fixed .search {
        display: flex !important;
        flex-direction: column;
        width: calc(100% - 140px);
    }
    .main-header__body .body-fixed .search__copy {
        position: relative;
        margin-bottom: 5px;
        color: #9d0000;
        font-size: 1.4rem;
        font-weight: bold;
        z-index: 1;
    }
    .main-header__body .body-fixed .search__copy::before {
        position: absolute;
        content: "";
        width: 280px;
        height: 6px;
        bottom: 3px;
        background: #fff135;
        z-index: -1;
    }
    .main-header__body .body-fixed .search__form {
        padding-top: 8px;
        padding-bottom: 8px;
        padding-right: 15px;
        padding-left: 15px;
        border: 1px solid #888;
        border-right: none;
        border-radius: 5px 0 0 5px;
        font-size: 1.2rem;
    }
    .main-header__body .body-fixed .search__button {
        width: 60px;
        height: 32px;
        margin-left: -3px;
        background: url(/html/template/default/assets/img/ico_search.svg) no-repeat 50% 50%;
        background-color: #bf0000;
        border: none;
        border-radius: 0 5px 5px 0;
        vertical-align: top;
    }
    .main-header__body .body-fixed .search__detail {
        border-radius: 5px;
        width: -webkit-fit-content;
        width: -moz-fit-content;
        width: fit-content;
        height: auto;
        padding-top: 5px;
        padding-right: 10px;
        padding-bottom: 5px;
        padding-left: 10px;
        margin-left: 5px;
        font-size: 1.2rem;
        font-weight: bold;
        text-decoration: none;
        transition: all 0.2s ease;
        border: 1px solid #aaa;
        background: #eee;
        color: #222;
        vertical-align: middle;
        width: 80px;
        word-break: keep-all;
    }
}
/* ヘッダー_スクロール変形 */
@media screen and (min-width: 1024px){
    .header-full.body-fixed {
        position: fixed;
        z-index: 200;
        width: 100%;
        background: #fff;
        height: 55px;
        padding: 10px;
        border-bottom: 1px solid #ccc;
        top: 0;
        left: 0;
    }
    .header-full.body-fixed .wrap-left{
        width: calc(100% - 580px);
    }
    .header-full.body-fixed .wrap-right{
        width: 550px;
    }
    .header-full.body-fixed .search__copy,
    .header-full.body-fixed .user-info__name,
    .header-full.body-fixed .header-nav li p,
    .header-full.body-fixed .tooltip-wrap {
        display: none;
    }
    .header-full.body-fixed .header-nav li {
        margin-right: 10px;
    }
    .header-full.body-fixed .header-nav li a {
        width: auto;
        height: auto; 
    }
    .header-full.body-fixed .header-nav__sub {
        font-size: 1.1rem;
    }
    .header-full.body-fixed .header-nav__sub li:first-child {
        margin: 0;
    }
    .header-full.body-fixed .header-logo{
        margin-right:20px; 
        width: 120px
    }
    .header-full.body-fixed .header-logo .logo{
        margin-right:0; 
    }
    .header-full.body-fixed .search__form {
        width: calc(100vw - 650px);
    }
    .header-logo__image.headerLogoScroll.-before {
      display : none;
    }
    .header-logo__image.-after {
      display : none;
    }
    .header-logo__image.headerLogoScroll.-after {
      display : block;
    }
}
@media screen and (max-width: 1023px){
    .header-full.body-fixed{
        position: auto;
    }
    .header-logo__image.-after {
      display : none;
    }
}
/* ヘッダー_ボタン変更 */
.user-info__name{
    max-width: fit-content;
    font-size: 1.25rem;
}
.header-full .user-info__benefit__link {
    display: flex;
    align-items: center;
    position: relative;
    padding: 8px 17px;
    background: #bf0000;
    color: #fff;
    border-radius: 50px;
    text-decoration: none;
    font-weight: bold;
    transition: all 0.2s;
}
.header-full .user-info__benefit__link span{
    word-break: keep-all;
}
.header-full .user-info__benefit__link:before {
    margin-right: 5px;
    content: "";
    width: 19px;
    height: 19px;
    background: no-repeat 0 0/contain;
    background-image: url(/html/user_data/assets/img/common/ico_register.svg);
}
.header-full .user-info__benefit__link:hover {
    opacity: 0.7;
}
.header-full:not(.body-fixed) .header-nav__sub li {
    padding: 5px 10px;
    border:1px solid #aaa;
    border-radius: 5px;
}
@media screen and (max-width: 500px){
    .header-full .wrap-left {
        max-width: calc(100% - 160px);
    }
    .header-full .user-info__benefit__link {
        padding: 4px 10px;
        font-size:1.3rem;
    }
    .header-full .user-info__benefit__link:before {
        margin-right: 3px;
        width: 13px;
        height: 13px;
    }
}
/* ヘッダー_SPサイズ_カテゴリ一覧変更 */
.search-sp{
    display: flex;
    justify-content: space-between;
    gap: 20px;
}
.main-header .search-sp__form {
    font-size: 1.2rem;
    padding: 10px 5px;
    width: calc(100vw - 160px);
}
.sp__detail {
    font-size:1.3rem;
}
.main-header .search-sp__detail {
    font-size:1.3rem;
    flex-shrink: 0;
}
.category.is-fixed{
    margin-top:0!important; 
    z-index: 300;
}
.category .category__nav {
    margin-top:0!important; 
}
.search-sp .search-sp__category {
    display: none;
}
.search-sp.is-fixed .search-sp__category {
    display: block;
    flex-shrink: 0;
    background: none;
}
.search-sp__category button{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    font-size: 0.9rem;
    font-weight: bold;
    color: #9d0000;
}
.main-header .category__item a {
    line-height: 1.3;
    font-size: 0.9rem;
}
.main-header .search-sp__button {
    width: 60px;
    background: url(/html/template/default/assets/img/ico_search.svg) no-repeat 50% 50%;
    background-color: #bf0000;;
}
@media (max-width: 767px){ 
    .main-header .category__list .sidenav__list {
        max-height: calc(100vh - 183px);
    }
}

/* 商品詳細_各アンカーボタン */
.anchor-button_calendar{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 230px;
    max-width: 100%;
    background: #6bcc00;
    color: #fff;
    margin: 5px auto 0;
    padding: 6px;
    border-radius: 50px;
    font-weight: bold;
}
.anchor-button_calendar:hover{
    opacity: 0.5;
    cursor: pointer;
    transition: all 0.2s ease;
}
.anchor-button_calendar .icon-calendar{
    margin-right:7px;
    font-size:1.7rem;
}
.anchor_review a{
    display: flex;
    align-items: center;
    gap: 5px;
    width: max-content;
    padding: 7px 7px;
    border: 1px solid #ccc;
    border-radius: 5px;
    color: #222;
    background: #fff;
    font-size: 1.2rem;
}
.anchor_review a:hover{
    opacity: 0.7;
}
.anchor_review .icon-review:before{
    font-size: 1.7rem;
    color:#ff8d25;
}
@media (min-width: 768px){ 
    .anchor_review a{
        gap: 7px;
        padding: 7px 15px;
        font-size: 1.3rem;
    }
}

/* フッター_よくある質問 */
.wid_footer{
    width: 1200px;
    margin-top: 30px;
    padding: 30px;
    background-color: #fff;
}
.q_and_a {
    margin-bottom: 5px;
    border-bottom: 2px solid #eee;
}
.q_and_a summary {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.8em 1.5em 0.8em 2.3em;
    color: #222;
    cursor: pointer;
    line-height: 1.4;
    font-size: 1.4rem;
    font-weight: 600;
}
.q_and_a summary::before,
.q_and_a p::before {
    position: absolute;
    left: 0em;
    font-size: 1.3em;
    font-weight: 600;
}
.q_and_a summary::before {
    content: "Q";
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    width: 25px;
    height: 25px;
    border-radius: 15px;
    background-color: #9d010f;
    color: #fff;
    line-height: 1.4;
    font-size: 1.6rem;
    font-weight: bold;
}
.q_and_a summary::after {
    position: absolute;
    transform: translateY(-25%) rotate(45deg);
    width: 7px;
    height: 7px;
    right: 2px;
    margin-left: 10px;
    border-bottom: 3px solid #222;
    border-right: 3px solid #222;
    content: '';
    transition: transform .5s;
}
.q_and_a[open] summary::after {
    transform: rotate(225deg);
}
.q_and_a p {
    position: relative;
    transform: translateY(-10px);
    margin: 0;
    padding: 0.8em 1.5em 0.8em 2.3em;
    color: #333;
    transition: transform .5s, opacity .5s;
    list-style: 1.4;
    font-size: 1.4rem;
}
.q_and_a p::before {
    content: "A";
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    width: 25px;
    height: 25px;
    background-color: #aaa;
    color: #fff;
    border-radius: 15px;
    line-height: 1.4;
    font-size: 1.6rem;
    font-weight: bold;
}
@media screen and (min-width: 1024px){
    .q_and_a summary,.q_and_a p{
        list-style: 1.5;
        font-size: 1.5rem;
    }
}

/* カテゴリ_迷ったらコレ！のコーナー */
.category_recommend_list{
    display: flex;
    flex-wrap: wrap;
    background: #f1f1f1;
    border: 2px solid #222;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom:50px;
}
.category_recommend_list > li{
    width: 100%;
}
.category_recommend_list > li:nth-child(n+2){
    border-top: solid 1px #222;
}
.category_recommend_list > li a{
    display: flex;
    flex-wrap: wrap;
    gap:10px;
    padding: 20px 10px;
    color:#222;
    transition:all 0.2s;
}
.category_recommend_list > li a:hover{
    opacity: 0.7;
}
.category_recommend_list > li img{
    width: 100%;
    vertical-align: bottom;
}
.left-box{
    width: 43%;
}
.right-box{
    width: calc(57% - 10px);
    display: flex;
    flex-direction: column;
}
.icon-list{
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    margin-top: 10px;
}
.icon-list span{
    display: flex;
    justify-content: center;
    align-items: center;
    width: calc((100% - 5px) / 2);
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 3px;
    padding: 5px 1px;
    text-align: center;
    color: #555;
    line-height: 1.4;
    font-size: 1rem;
    font-weight: bold;
    word-break: keep-all;
    box-sizing: border-box;
}
.icon-list br{
    display: none;
}
.icon-list .color-popular{
    color:#fff;
    background: #e11b1b;
}
.icon-list .color-bestprice{
    color:#cd0000;
    background: #fff81d;
}
.icon-list .color-new{
    color:#fff;
    background: #3981d1;
}
.icon-list .color-standard{
    color:#fff;
    background: #28b06e;
}
.category_recommend_list > li .block-items__item__tags{
    display: flex;
    justify-content: end;
    margin: auto 0 7px;
}
.category_recommend_list > li .block-items__item__tag{
    font-size: 1.1rem;
    color: #222;
    padding: 5px 10px 5px 21px;
    align-items: center;
    line-height: 1;
    border: 1px solid #ccc;
    margin: 0;
}
.category_recommend_list > li .block-items__item__tag:before {
    width: 13px;
    height: 11px;
    left: 8px;
}
.item-comment{
    background: #fcff30;
    color: #222;
    border-radius: 50px;
    margin-bottom: 10px;
    padding: 6px;
    text-align: center;
    line-height: 1.4;
    font-size: 1.3rem;
    font-weight: bold;
}
.item-name{
    line-height: 1.4;
    font-size: 1.4rem;
    font-weight: bold;
}
.item-price{
    color: #ff0000;
    text-align: right;
    line-height: 1;
    font-size: 2rem;
    font-weight: bold;
}
.item-price span{
    line-height: 1;
    font-size: 2.2rem;
}
.item-lot{
    color:#555;
    text-align: right;
    font-size: 1.3rem;
}
.link-btn{
    position: relative;
    background: #555;
    color: #fff;
    text-align: center;
    margin-top: 5px;
    padding: 5px;
    border-radius: 5px;
    font-size: 1.3rem;
    font-weight: bold;
}
.link-btn:after{
    content: "";
    position: absolute;
    top: 50%;
    right: 7px;
    width: 5px;
    height: 5px;
    transform: rotate(-45deg) translate(0, -50%);
    border-bottom: 2px solid #fff;
    border-right: 2px solid #fff;
}
.category_recommend_catch{
    position: relative;
    text-align: center;
    line-height: 1.4;
    font-size: 2.6rem;
    font-weight: bold;
    padding-bottom: 10px;
}
.category_recommend_catch:before,
.category_recommend_catch:after{
    position: absolute;
    top: 0.8rem;
    height: 5.8rem;
    content: '';
}
.category_recommend_catch:before{
    border-left: solid 3px;
    left: 20px;
    transform: rotate(-30deg);
}
.category_recommend_catch:after{
    border-right: solid 3px;
    right: 20px;
    transform: rotate(30deg);
}
.category_recommend_catch span{
    padding:0 5px;
    font-size: 2rem;
}
.category_recommend_catch .catch_red{
    color:#d72323;
}
.category_recommend_catch .catch_blue{
    color:#0060d7;
}
.category_recommend_catch .catch_green{
    color:#0aa326;
}
.category_recommend_catch .catch_yellow{
    color:#ffa000;
}
.category_recommend_list > li.last-anchor{
    width: 100%;
}
.category_recommend_list > li.last-anchor span{
    position: relative;
    margin: auto;
    padding: 15px 60px 15px 30px;
    color: #4572c9;
    border: 1px solid #ccc;
    background: #ffffff;
    border-radius: 5px;
    font-size: 1.8rem;
    font-weight: bold;
}
.category_recommend_list > li.last-anchor span:after{
    position: absolute;
    transform: translateY(-25%) rotate(45deg);
    width: 10px;
    height: 10px;
    top: 38%;
    right: 20px;
    margin-left: 10px;
    border-bottom: 3px solid #222;
    border-right: 3px solid #222;
    content: '';
}
@media screen and (min-width: 768px){
    .category_recommend_list > li{
        width: calc(100% / 2);
        border-right: solid 1px #222;
    }
    .category_recommend_list > li:nth-child(n+2){
        border-top: none;
    }
    .category_recommend_list > li:nth-child(2n){
        border-right: none;
    }
    .category_recommend_list > li:nth-child(n+3){
        border-top: solid 1px #222;
    }
    .category_recommend_list > li a{
        gap:15px;
        padding: 25px 17px
    }
    .left-box{
        width: 200px;
    }
    .right-box{
        width: calc(100% - 215px);
    }
    .icon-list span{
        width: calc((100% - 15px) / 4);
        padding: 7px 3px;
        font-size:1.15rem;
    }
    .icon-list br{
        display: block;
    }
    .item-comment{
        font-size: 1.4rem;
    }
    .item-name{
        font-size: 1.6rem;
    }
    .item-price span{
        font-size: 3.3rem;
    }
    .item-lot{
        font-size: 1.4rem;
    }
    .link-btn{
        margin-top:10px;
        padding: 7px;
        font-size: 1.4rem;
    }
    .category_recommend_catch{
        width: 85%;
        margin: auto;
        font-size:3.8rem;
    }
    .category_recommend_catch:before, .category_recommend_catch:after {
        height: 3.8rem;
    }
    .category_recommend_catch br{
        display: none;
    }
    .category_recommend_list > li.last-anchor{
        width: 100%;
        border-right:none;
    }
    .category_recommend_list > li.last-anchor span{
        font-size: 2rem;
    }
}

/* flex-item */
.flex-block{
    display: flex;
    flex-direction: column;
    gap:10px;
}
.flex-block h2,.flex-block h3{
    font-size:1.8rem;
}
.flex-block img{
    max-width: 100%;
    height: fit-content;
    vertical-align: bottom;
}
.flex-block a{
    display: block;
    transition: all 0.2s;
}
.flex-block a:hover{
    opacity: 0.7;
}
@media screen and (min-width: 768px){
    .flex-block{
        flex-direction: row;
        gap:20px;
    }
}
.category-tab_wrap .tab-list-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.category-tab_wrap .title{
    margin-bottom: 20px;
}
.category-tab_wrap .seletc_ttl{
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 5px;
    color: #222;
}
.category_explanation .orange{
    color: #ff8d25;
}
.merit-demerit_list{
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}
.merit-demerit_list dl{
    width: 100%;
    border-radius: 10px;
    padding: 20px;
    position: relative;
}
.merit-demerit_list dl:before {
    position: absolute;
    top: 55%;
    right: 5px;
    transform: translateY(-50%);
    color: #fff;
    opacity: 0.8;
    line-height: 1;
    font-size: 18vh;
    font-weight: bold;
}
.merit-demerit_list dt{
    position: relative;
    text-align: center;
    margin: 0 auto 10px;
    font-size: 1.4rem;
    font-weight: bold;
    color: #fff;
    background: #414141;
    display: table;
    padding: 2px 25px;
    border-radius: 50px;
}
.merit-demerit_list dd{
    position: relative;
    padding-top:5px;
    display: list-item;
    list-style: disc inside;
    font-size:1.4rem;
}
.merit_bg{
    background: #e1fbff;
}
.merit_bg:before{
    content: "〇";
}
.merit_bg dt{
    background: #23c5d5;
}
.demerit_bg{
    background: #e9e9ff;
}
.demerit_bg dt{
    background: #9073eb;
}
.demerit_bg:before{
    content: "×";
}

.icon_glass {
    display: inline-block;
    position: relative;
    width: 1em;
    height: 1em;
    color: #9d0000;
    font-size: 2.2rem;
}
.icon_glass::before {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 0.7em;
    height: 0.7em;
    box-sizing: border-box;
    border: 0.15em solid currentColor;
    border-radius: 50%;
    background-color: #fff;
    content: "";
    z-index: 1;
}
.icon_glass::after {
    position: absolute;
    top: 0px;
    left: 50%;
    z-index: 0;
    transform: rotate(-45deg);
    width: 0.15em;
    height: 1em;
    box-sizing: border-box;
    background-color: currentColor;
    content: "";
}
.flex_img-box{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap:2rem;
}
.flex_img-box img{
    height:fit-content;
    vertical-align: bottom;
}
.flex_img-title{
    font-size:2.3rem;
}
.flex_img-title span{
    padding-right: 5px;
    font-size:3rem;
}
.subhed-title{
    margin-bottom: 15px;
    font-size: 2.2rem;
    padding-left: 0.5em;
    padding-bottom: 5px;
    border-left: 8px solid;
    border-bottom: 1px solid;
}
.theme_red{
    border-color: #d72323;
}
.theme_red .flex_img-title span{
    color: #d72323;
}
.theme_red .subhed-title{
    border-color: #d72323;
}
.theme_blue{
    border-color: #0060d7;
}
.theme_blue .flex_img-title span{
    color: #0060d7;
}
.theme_blue .subhed-title{
    border-color: #0060d7;
}
/*カテゴリh2　改修*/
@media screen and (max-width: 767px){
    .category-ranking__title{
        flex-direction: column;
        font-size: 1.7rem;
    }
    .category-ranking__wrap .category-ranking__title .pc{
        display: block;
    }
    .category-ranking__title .icon-crown{
        display: none;
    }
}

/*TOP_おすすめ商品スライダー*/
.product-swiper__wrap{
    position: relative;
    padding: 0 40px;
}
.product-swiper-container{
    overflow: hidden;
}
.product-list .swiper-slide {
    width: 174px;
    max-width: calc((100% - 60px) / 5);
}
.product-swiper-prev,
.product-swiper-next{
    position: absolute;
    width: 30px;
    height: 35px;
    cursor: pointer;
    border-radius: 5px;
    top: 40%;
    border: 1px solid #ddd;
    box-shadow: 0 0 5px rgba(0,0,0,0.05);
}
.product-swiper-prev:after, .product-swiper-next:after {
    content: "";
    position: absolute;
    top: 46%;
    right: 8px;
    width: 7px;
    height: 7px;
    border-bottom: 2px solid;
    border-right: 2px solid;
    border-color: #939393;
    transform: rotate(-45deg) translate(0, -50%);
}
.product-swiper-prev{
    left:0;
}
.product-swiper-prev:after{
    top: 25%;
    right: 10px;
    transform: rotate(135deg) translate(0, -50%);
}
.product-swiper-next{
    right:0;
}
.product-swiper-prev:hover,
.product-swiper-next:hover{
    background: #f9f9f9;
}
.product-swiper-pagination{
    width:auto;
    font-size: 1.4rem;
}
.swiper-pagination-current{
    font-size:1.8rem;
    font-weight: bold;
}
@media (max-width: 768px) {
    .product-swiper__wrap{
        padding: 0;
    }
    .product-list .swiper-slide {
    width: 120px;
    max-width: 100%;
}
    .product-swiper-prev,
    .product-swiper-next,
    .product-swiper-pagination{
        display: none;
    }
}

/*TOPページ改修_20240318*/
@media screen and (min-width: 600px){
    .content-front .heading-unit__text {
        flex-wrap: wrap;
    }
}

/* 注文フロー修正 */
.flow-order__list {
    align-items: normal;
}
@media (min-width: 1024px){
    .flow-order {
        position: relative;
        margin: 15px 0 20px;
    }
}
@media (max-width: 1023px){
    .flow-order__item {
        height: auto;
        padding: 10px 5px;
        line-height: 1.2;
        text-align: center;
    }
}

/* 検索バー・詳細検索改修 */
.search-detail__taglist {
    gap: 5px 10px;
}
.search-detail__tagitem {
    margin: 0;
    padding:0;
}
.search-tag {
    display: block;
    padding: 7px 9px;
    line-height: 1;
}
.search-tag:hover{
    background-color: #eee;
}
@media screen and (min-width: 600px){
    .search-detail__form {
        max-width: 1000px;
    }
}
/* よく検索されるワード */
.search__keywords{
    display: flex;
    flex-direction: column;
    gap:5px;
}
.search__keywords_title{
    flex:none;
    color: #555;
    line-height: 1;
    font-size: 1.05rem;
    font-weight: bold;
}
.search__keywords_scroll{
    overflow-x: scroll;
}
.search__keywords_list{
    display: flex;
    gap: 5px;
    width: max-content;
}
.search__keywords_list a{
    display: block;
    padding: 5px 10px 5px 20px;
    border-radius: 50px;
    color: #fff;
    line-height: 1;
    font-size: 1.05rem;
    transition: all 0.2s;
    position: relative;
    background: #3ebbc1;
}
.search__keywords_list a:before {
    position: absolute;
    top: 5px;
    left: 6px;
    width: 0.7em;
    height: 0.7em;
    box-sizing: border-box;
    border: 0.15em solid #fff;
    border-radius: 50%;
    background-color: #1bbdc5;
    content: '';
    z-index: 1;
    color: #ffffff;
}
.search__keywords_list a:after {
    position: absolute;
    top: 5px;
    left: 11px;
    transform: rotate(-45deg);
    width: 0.15em;
    height: 1em;
    box-sizing: border-box;
    background-color: #ffffff;
    content: '';
}
.search__keywords_list a:hover{
    opacity: 0.7;
}
.body-fixed .search__keywords{
    display: none;
} 
.search-sp + .search__keywords{
    margin: 0 0 15px;  
    padding:0 15px;
}
.wrap-left .search__copy{
    line-height: 1;
    color: #fff;
    font-size: 1.3rem;
    font-weight: bold;
    margin-right: 20px;
    flex-shrink: 1;
    word-break: keep-all;
}
.wrap-left .search__copy span{
    color: #9d0000;
    background: #fff;
    padding: 0 5px;
    margin-right: 5px;
    font-size: 1.4rem;
    font-weight: bold;
}
.main-header__sub__text {
    line-height: 1.3;
    font-size: 1.1rem;
}
.main-header__body .search__button {
    background-color: #bf0000!important;
}
.main-header .search-sp__detail {
    margin: 0 10px 0 0;
}
@media screen and (min-width: 500px){
    .search__keywords{
        flex-direction: row;
        align-items: center;
        gap:8px;
        margin-top: 10px;
    }
    .search__keywords_scroll{
        overflow-x: hidden;
    }
}
@media screen and (min-width: 1024px){
    .search__keywords{
        gap:15px;
    }
    .header-full.body-fixed .search__form {
        width: calc(100vw - 650px);
    }
    .main-header__body .body-fixed .search__detail {
        border-radius: 5px;
        width: -webkit-fit-content;
        width: -moz-fit-content;
        width: fit-content;
        height: auto;
        padding-top: 5px;
        padding-right: 10px;
        padding-bottom: 5px;
        padding-left: 10px;
        margin-left: 5px;
        font-size: 1.2rem;
        font-weight: bold;
        text-decoration: none;
        transition: all 0.2s ease;
        border: 1px solid #aaa;
        background: #eee;
        color: #222;
        vertical-align: middle;
        width: 80px;
        word-break: keep-all;
    }
}
@media screen and (min-width: 1348px){
    .main-header__body .search___detail {
        border-radius: 5px;
        width: -webkit-fit-content;
        width: -moz-fit-content;
        width: fit-content;
        height: auto;
        padding-top: 5px;
        padding-right: 10px;
        padding-bottom: 5px;
        padding-left: 10px;
        margin-left: 5px;
        font-size: 1.2rem;
        font-weight: bold;
        text-decoration: none;
        transition: all 0.2s ease;
        border: 1px solid #aaa;
        background: #eee;
        color: #222;
        vertical-align: middle;
        word-break: keep-all;
    }
    .search-detail.header_fixed{
        height: calc(100vh - 55px);
    }
    .header_fixed .search-detail__form {
        height: calc(100vh - 170px);
    }
    .header_fixed .search-detail__close {
        top: 75px;
    }
    .main-header__body .search__form {
        width: calc(100vw - 1130px);
    }
    .main-header__body .search__form {
        padding-top: 11px;
        padding-bottom: 11px;
        border-radius: 0;
        border-left: none;
    }
    .main-header__body .search__button {
        width: 55px;
        height: 38px;
        background-size: 25px;
    }
    .main-header__body .search___detail {
        position: relative;
        height: 38px;
        margin: 0;
        padding: 8px 30px 8px 15px;
        border-radius: 5px 0 0 5px;
        line-height: 1;
        font-size: 1.3rem;
    }
    .main-header__body .search___detail:after {
        position: absolute;
        transform: translateY(-25%) rotate(45deg);
        width: 6px;
        height: 6px;
        top: 40%;
        right: 10px;
        margin-left: 10px;
        border-bottom: 2px solid #222;
        border-right: 2px solid #222;
        content: '';
        transition: transform .5s;
    }
    .main-header__body .body-fixed .search___detail {
        width: auto;
        height: 32px;
        padding: 5px 30px 5px 10px;
        border-radius: 5px 0 0 5px;
    }
    .main-header__body .body-fixed .search__form {
        border-radius: 0;
        border-left: none;
    }
    .search__keywords{
        gap:8px;
    }
    .search-sp + .search__keywords{
        display: none;  
    }
    .search___detail:hover{
        opacity: 0.7;
    }
}

/* おすすめ商品スライダー(Slick版) */
.product_5{
    padding:0 20px 30px;
}
.product_5 .slick-slide {
    margin: 0;
}
.product_5 .slick-track{
    display: flex;
    gap:10px;
}
.product_5 .slick-list{
    overflow: hidden;
}
.product_5 .slick-slide a {
    display: flex;
    flex-direction: column;
}
.product_5 .slick-slide img {
    width: 100%;
    height: auto;
    margin-bottom:5px;
}
.product_5 .slick-prev,
.product_5 .slick-next {
    z-index: 1;
    border: 1px solid #ccc;
    border-radius: 5px;
    width: 25px;
}
.product_5 .slick-prev{
    left: -10px;
}
.product_5 .slick-next {
    right: -10px;
}
.product_5 .slick-prev:before,
.product_5 .slick-next:before {
    border-color: #9d0000;
}
.product_5 .slick-prev:before {
    left: 13px;
}
.product_5 .slick-next:before {
    left: 8px;
}
.product_5 .slick-slide {
    transition: all 0.3s;
    opacity: .2;
}
.product_5 .slick-active {
    opacity: 1;
}
.product_5 .slick-current {
    opacity: 1;
}
.product_5 .thumb {
    margin: 20px 0 0;
}
.product_5 .thumb .slick-slide {
    cursor: pointer;
}
.product_5 .thumb .slick-slide:hover {
    opacity: .7;
}
.product_5 .slick-slide:not(.slick-active) {
    opacity: 1;
    -webkit-filter:opacity(1);
}
@media screen and (min-width: 768px){
    .product_5{
        padding:0 15px 30px;
    }
}

/* 商品ランキングTOP5(タブ付き) */
.ranking-tabs{
    display: flex;
    padding: 0px 5px;
    gap: 3px;
    height: 40px;
}
.tab-button{
    width: calc(100% / 5);
    display: flex;
    justify-content: center;
    align-items: center;
    height: 40px;
    margin-top: auto;
    padding: 5px;
    background: #555;
    color: #fff;
    border-radius: 5px 5px 0 0;
    line-height: 1.2;
    font-size: 1.2rem;
    font-weight: bold;
}
.tab-button:hover,
.tab-button.active{
    background: #bf0000;
    color: #fff;
    height: 40px;
    opacity: 1;
}
.tab-panel{
    display: none;
}
.ranking-content h2{
    display: flex;
    justify-content: center;
    padding-bottom: 10px;
    font-size: 1.5rem;
}
.ranking-content h2:before{
    content:'';
    display: inline-block;
    width: 25px;
    height: 25px;
    margin: 0 5px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position-y: bottom;
    background-image: url(/html/user_data/assets/img/common/icon_crown.svg);
}
.ranking-content{
    padding: 16px 0;
    border-radius: 4px;
    border: 2px solid #ccc;
}
.ranking-list_inr{
    overflow-x: scroll;
}
.ranking-list_inr ul{
    display: flex;
    flex-wrap: wrap;
    width: max-content;
    background: #fff;
}
.ranking-list_inr li{
    width:120px;
    border-right: 1px solid #ddd;
}
.ranking-list_inr li:last-child{
    border-right: none;
}
.ranking-list_inr .product-image {
    position: relative;
    margin-bottom: 5px;
}
.ranking-list_inr img{
    vertical-align: bottom;
}
.ranking-list_inr a{
    display:flex;
    padding: 8px 12px 16px;
    height: 100%;
    transition: all 0.2s;
    box-sizing: border-box;
    flex-direction: column;
    transition: all 0.2s;
}
.ranking-list_inr a:hover{
    opacity: 0.7;
}
.ranking-list_inr .product-list__name{
    height: 2.8em;
    line-height: 1.4;
    margin-bottom: 5px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #222;
    font-size: 1.3rem;
    font-weight: bold;
}
.ranking-list_inr .ranking_num{
    position: initial;
    background: none;
    margin-bottom: 5px;
    padding: 0;
    display: block;
    width: auto;
    height: auto;
    text-align: center;
    color:#555;
    line-height: 1.2;
    background-repeat: no-repeat;
    background-size: 50px;
    background-position-x: center;
    background-position-y: 2px;
    font-size: 1.3rem;
}
.ranking-list_inr li .ranking_num:before{
    font-size: 2rem;
    font-weight: bold;
}
.ranking-list_inr li:nth-of-type(1) .ranking_num:before{
    content: "1";
}
.ranking-list_inr li:nth-of-type(2) .ranking_num:before{
    content: "2";
}
.ranking-list_inr li:nth-of-type(3) .ranking_num:before{
    content: "3";
}
.ranking-list_inr li:nth-of-type(4) .ranking_num:before{
    content: "4";
}
.ranking-list_inr li:nth-of-type(5) .ranking_num:before{
    content: "5";
}
.ranking-list_inr li:nth-of-type(6) .ranking_num:before{
    content: "6";
}
.ranking-list_inr li:nth-of-type(7) .ranking_num:before{
    content: "7";
}
.ranking-list_inr li:nth-of-type(8) .ranking_num:before{
    content: "8";
}
.ranking-list_inr li:nth-of-type(9) .ranking_num:before{
    content: "9";
}
.ranking-list_inr li:nth-of-type(10) .ranking_num:before{
    content: "10";
}
.ranking-list_inr li:nth-of-type(1) .ranking_num{
    background-image: url(/html/user_data/assets/img/common/icon_rank-back_gold.webp);
    color: #dbb20b;
}
.ranking-list_inr li:nth-of-type(2) .ranking_num{
    background-image: url(/html/user_data/assets/img/common/icon_rank-back_silver.webp);
    color: #4d7099;
}
.ranking-list_inr li:nth-of-type(3) .ranking_num{
    background-image: url(/html/user_data/assets/img/common/icon_rank-back_bronze.webp);
    color: #cc5229;
}
.ranking-list_inr li:nth-of-type(4) .ranking_num,
.ranking-list_inr li:nth-of-type(5) .ranking_num{
    background-image: url(/html/user_data/assets/img/common/icon_rank-back.webp);
}
.ranking-list_inr .product-list__lot {
    font-size: 1rem;
}
.ranking-list_inr .product-list__desc{
    font-size: 1rem;
}
@media screen and (min-width: 768px){
    .ranking-tabs{
        gap: 5px;
    }
    .tab-button{
        height: 35px;
        font-size: 1.4rem;
    }
    .ranking-content h2{
        font-size: 2rem;
    }
    .ranking-content h2 br{
        display: none;
    }
    .ranking-list_inr{
        overflow-x: auto;
    }
    .ranking-list_inr ul{
        width: 100%;
    }
    .ranking-list_inr li{
        width: calc(100% / 5);
    }
    .ranking-list_inr li:nth-of-type(5){
        border-right: none;
    }
    .ranking-list_inr li:nth-child(n+6){
        border-top: 1px solid #ddd;
    }
    .ranking-list_inr .product-list__lot {
        font-size: 1.1rem;
    }
    .ranking-list_inr .product-list__desc{
        font-size: 1.1rem;
    }
}

/* カテゴリ_人気商品紹介コーナー */
.popula-list__inr{
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    padding-bottom: 50px;
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
    gap:15px
}
.popula-list__inr li{
    width: 136px;
    margin: 0 !important;
}
@media screen and (min-width: 1024px) {
    .popula-list__inr{
        width: 100%;
        flex-wrap: wrap;
        gap:20px
    }
    .popula-list__inr li{
        width: 170px;
        max-width: calc((100% - 80px) / 5);
    }   
}

/* ヘッダー全改修_20240502 */
.main-header__body2{
    display: block;
    position: relative;
    z-index: 10;
    border-bottom: 1px solid #ccc;
}
.main-header__inner{
    display: flex;
    justify-content: space-between;
    gap: 1vw;
    padding: 10px 0 5px;
    align-items: center;
    position: relative;
    width: 1200px;
    max-width: 100%;
    margin: auto;
    background-color: #fff;
    z-index: 2;
    transform: translateZ(0);
}
.main-header__inner .header-logo{
    width: 16vw;
    max-width: 190px;
    min-width: 150px;
}
.main-header__inner .header-logo a{
    display: block;
}
.main-header__inner .header-logo img{
    width: 100%;
    vertical-align: bottom;
}
.header-search{
    display: flex;
    flex-wrap: wrap;
    gap: 10px 20px;
    width: calc(100% - 700px);
}
.header-search_form{
    display: flex;
    align-items: center;
    width: 100%;
}
.header-search .search___detail{
    position: relative;
    width: 95px;
    border-radius: 5px 0 0 5px;
    padding: 10px 30px 10px 10px;
    line-height: 1;
    text-decoration: none;
    transition: all 0.2s ease;
    border: 1px solid #aaa;
    background: #eee;
    color: #222;
    vertical-align: middle;
    word-break: keep-all;
    font-size: 1.2rem;
    font-weight: bold;
}
.header-search .search___detail:after{
    content: '';
    position: absolute;
    transform: translateY(-25%) rotate(45deg);
    width: 6px;
    height: 6px;
    top: 40%;
    right: 10px;
    margin-left: 10px;
    border-bottom: 2px solid #222;
    border-right: 2px solid #222;
    transition: transform .5s;
}
.header-search .search__form{
    margin: 0 -3px;
    padding: 10px;
    width: -webkit-fill-available;
    border: 1px solid #888;
    border-right: none;
    border-left: none;
    border-radius: 0;
    font-size: 1.2rem;
}
.header-search .search__button {
    width: 75px;
    height: 36px;
    background: #bf0000 url(/html/template/default/assets/img/ico_search.svg) no-repeat 50% 50%;
    border: none;
    border-radius: 0 5px 5px 0;
    vertical-align: top;
}
.header-search .category-btn{
    display: flex;
    align-items: center;
    gap: 10px;
    width: 120px;
    position: relative;
    padding: 10px;
    border: 1px solid #9d0000;
    color: #9d0000;
    line-height: 1;
    font-size: 1.4rem;
    font-weight: bold;
    cursor: pointer;
}
.header-search .category-btn:hover{
    opacity: 0.7;
}
.header-search .category-btn:before{
    content: "";
    top: 9px;
    left: 15px;
    width: 14px;
    height: 14px;
    background: url(/html/user_data/assets/img/common/ico_grid.svg) no-repeat 0 0 / contain;
}
.header-search .category-btn:after{
    transform: translateY(-25%) rotate(45deg);
    width: 6px;
    height: 6px;
    border-bottom: 2px solid #9d0000;
    border-right: 2px solid #9d0000;
    content: '';
    transition: transform .5s;
}
.header-search .search__keywords{
    width: 100%;
    margin: 0;
}
.header-search_form .form{ 
    display: flex;
    width: -webkit-fill-available;
}
.header-search_category{
    display: none;
    position: relative;
}
.header-menu{
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
.header-menu_user{
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex-shrink: 0;
}
.header-menu_nav{
    display: flex;
}
.header-menu_nav li{
    width: calc(100% / 5);
}
.header-menu_nav li a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
    position: relative;
    width: 55px;
    color: #222;
    gap: 5px;
}
.header-menu_nav li a:hover {
    opacity: 0.7;
}
.header-menu_nav li span {
    font-size: 1.05rem;
}
.header-menu_nav li .header-nav__badge{
    font-size: 1rem;
}
.header-menu_flow{
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    gap: 7px;
}
.header-menu_flow li{
    display: flex;
    flex-direction: column;
}
.header-menu_flow a{
    display: flex;
    align-items: center;
    gap: 5px;
    color: #222;
    border: 1px solid #aaa;
    padding: 5px;
    border-radius: 3px;
}
.header-menu_flow span{
    font-size:1.05rem;
}
.main-header__inner .user-info__name {
    margin: auto;
    font-size: 1.1rem;
}
.main-header__inner .user-info__benefit a{
    display: flex;
    align-items: center;
    position: relative;
    text-decoration: none;
    padding: 8px 15px;
    color: #fff;
    background: #ff5e00;
    border-radius: 50px;
    font-weight: bold;
}
.main-header__inner .user-info__benefit a:hover{
    opacity: 0.7;
}
.main-header__inner .user-info__benefit a:before{
    margin-right: 4px;
    content: "";
    width: 16px;
    height: 16px;
    background: no-repeat 0 0/contain;
    background-image: url(/html/user_data/assets/img/common/ico_register.svg);
}
.main-header__body2.fixed {
    position: fixed;
    z-index: 102;
    width: 100%;
    height: 86px;
    top: 0;
    left: 0;
    background: #fff;
    animation: slideDown 0.3s; /* アニメーションを適用 */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
@keyframes slideDown {
    from {
        transform: translateY(-100%);
    }
    to {
        transform: translateY(0);
    }
}
.main-header__body2.fixed .header-logo {
    width: 120px;
    max-width: 100%;
    min-width: auto;
}
.main-header__body2.fixed .js-header.-before{
    display: none;
}
.main-header__body2.fixed .js-header.-after{
    display: block;
}
.main-header__body2.fixed .header-search {

    width: calc(100% - 570px);
}
.main-header__body2.fixed .search__keywords,
.main-header__body2.fixed .user-info__text,
.main-header__body2.fixed .header-menu_nav li span {
    display: none;
}
.main-header__body2.fixed .header-menu_nav li a {
    width: auto;
}
.main-header__body2.fixed .header-menu_flow {
    gap: 5px;
}
.main-header__body2.fixed .header-menu_flow a{
    border: none;
    padding: 0;
}
.main-header__inner.header-sp{
    display: none;
}
.main-header__body2.fixed .header-menu_nav {
    gap: 5px;
}
.main-header__body2.fixed .header-menu_nav li img{
    width: 33px;
    height: 33px;
}
@media screen and (max-width: 1023px) {
    .header-search{
        display: none;
    }
    .main-header__inner {
        height: auto;
        padding:10px 10px 5px;
    }
    .main-header__inner.header-sp{
        display: block;
        margin-top: 10px;
        padding:15px;
        border-top:2px solid #9d0000;
    }
    .main-header__inner.header-sp .header-search {
        display: flex;
        width: 100%;
    }
    .header-search_category{
        display: block;
    }
    .main-header__body2{
        height: auto;
    }
    .main-header__inner.header-pc{
        padding-bottom:30px;
    }
    .header-menu_nav li span,
    .main-header__inner .user-info__name {
        display: none;
    }
    .header-menu_nav li a {
        width: 50px;
    }
    .main-header__inner .header-menu_flow {
        gap: 5px;
    }
    .main-header__inner .header-menu_flow a{
        border: none;
        padding: 0;
    }
    .main-header__inner .header-logo {
        width: 120px;
        max-width: 100%;
        min-width: auto;
    }
    .main-header__inner .js-header.-before{
        display: none;
    }
    .main-header__inner .js-header.-after{
        display: block;
    }
    .main-header__body2.fixed .main-header__inner.header-sp {
        margin-top: 0;
        border-top: none;
    }
    .main-header__body2 .user-info__coupon {
        left: 0;
        right:0;
    }
    .main-header__body2.unlogged .main-header__inner.header-pc{
        padding-bottom: 5px;
    }
    .header-search_form {
        width: calc(100% - 140px);
    }
    .main-header__body2.fixed .header-pc{
        display: none;
    }
    .main-header__body2.fixed {
        height: 101px;
        position: relative;
    }
}
@media screen and (max-width: 767px) {
    .main-header__body2.fixed {
        height: auto;
    }
    .header-menu_nav,
    .header-menu_flow {
        display: none;
    }
    .main-header__inner.header-sp .header-search {
        gap:10px;
    }
    .header-search .search__form {
        font-size: 1.1rem;
    }
    .header-search .search___detail {
        width: 90px;
        font-size: 1.05rem;
        padding: 5px 15px 5px 6px;
    }
    .header-search .search___detail:after {
        width: 4px;
        height: 4px;
        right: 5px;
        border-width: 1px;
    }
    .header-search_form {
        width: calc(100% - 90px);
    }
    .header-search .category-btn {
        width: 80px;
        padding: 10px 5px;
        font-size: 1.1rem;
        line-height: 1.2;
    }
    .header-search .category-btn:before {
        width: 13px;
        height: 13px;
    }
    .header-search .category-btn:after {
        content: none;
    }
}

/* カテゴリ一覧アコーディオン */
.header-search_category .acc_wrap {
    display: none;
}
.header-search_category .acc_wrap.active {
    display: block;
    position: absolute;
    top:45px;
    right: -385px;
    width: 900px;
    background: #e5e5e5;
    padding: 20px;
    z-index: 2;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.3);
}
.header-search_category .acc_wrap ul{
    display: flex;
    flex-wrap: wrap;
    gap: 1px;
}
.header-search_category .acc_wrap li{
    width: calc((100% - 2px) / 3);
}
.header-search_category .acc_wrap a{
    display: flex;
    align-items: center;
    gap: 5px;
    position: relative;
    padding: 8px 20px 8px 7px;
    background: #fff;
    height: 100%;
    box-sizing: border-box;
}
.header-search_category .acc_wrap a span{
    color: #222;
    font-size: 1.2rem;
    font-weight: bold;
}
.header-search_category .acc_wrap a:after{
    content: "";
    position: absolute;
    top: 50%;
    right: 7px;
    width: 5px;
    height: 5px;
    transform: rotate(-45deg) translate(0, -50%);
    border-bottom: 2px solid;
    border-right: 2px solid;
    border-color: #bbb;
}
.header-search_category .acc_wrap a:hover{
    background: #f5f5f5;
}
.header-search_category .acc_wrap a:hover span{
    color:#9d0000;
}
.header-search_category .acc_wrap a:hover:after{
    border-color: #9d0000;
}
@media screen and (max-width: 1347px) {
    .header-search_category .acc_wrap.active {
        right: 0;
        width: 94vw;
    }
}
@media screen and (max-width: 767px) {
    .header-search_category .acc_wrap.active {
        position: fixed;
        width: auto;
        height: calc(100vh - 183px);
        overflow-y: scroll;
        top: 58px;
        right: 0;
        padding: 15px 15px 75px;
        box-shadow: none;
    }
    .header-search_category .acc_wrap li{
        width: calc((100% - 1px) / 2);
    }
    .header-search_category .acc_wrap a{
        padding: 6px 20px 6px 7px;
    }
    .header-search_category .acc_wrap a span{
        font-size:1rem;
    }
    .main-header__body2.fixed .header-search_category .acc_wrap.active {
        height: calc(100vh - 127px);
        top: 67px;
    }
}

/* グロナビ */
.header-gnav__inner{
    display: flex;
    justify-content: space-between;
    width: 1200px;
    max-width: 100%;
    margin: auto;
}
.gnav_left{
    display: flex;
}
.gnav_left > li {
    position: relative;
}
.gnav_left > li:hover .nav-acc_wrap {
    display: block;
}
.gnav_left > li > a,
.gnav_left > li > span{
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 100%;
    padding: 15px;
    color: #222;
    box-sizing: border-box;
    text-align: center;
    line-height: 1;
    font-size: 1.3rem;
    font-weight: bold;
    transition: all 0.2s;
    cursor: pointer;
}
.gnav_left > li > a:before,
.gnav_left > li > span:before{
    position: absolute;
    left: 0;
    content: '';
    width: 100%;
    height: 2px;
    background: #bf0000;
    bottom: -1px; 
    transform: scale(0, 1);     
    transform-origin: left top; 
    transition: transform 0.3s; 
}
.gnav_left > li > a:after,
.gnav_left > li > span:after{
    content: '';
    transform: translateY(-25%) rotate(45deg);
    width: 6px;
    height: 6px;
    margin-left: 10px;
    border-bottom: 2px solid #222;
    border-right: 2px solid #222;
    transition: transform .5s;
}
.gnav_left > li > a:hover,
.gnav_left > li > span:hover{
    background: #f5f5f5;
    color:#bf0000;
}
.gnav_left > li > a:hover:before,
.gnav_left > li > span:hover:before{
    transform: scale(1, 1);   
}
.gnav_left > li > a:hover:after,
.gnav_left > li > span:hover:after{
    border-color: rgb(191 0 0);
}
.gnav_left > li img,
.gnav_left > li img{
    width: 25px;
    height:25px;
    object-fit:contain;
}
.gnav_right{
    display: flex;
    align-items: center;
    gap:10px;
}
.gnav_right .tel{
    display: flex;
    align-items: center;
    gap: 10px;
}
.gnav_right .tel a{
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    padding-left: 35px;
    color: #bf0000;
    font-size: 2.2rem;
    font-weight: bold;
}
.gnav_right .tel a:before{
    position: absolute;
    content: "";
    width: 20px;
    height: 20px;
    top: 6px;
    left: 10px;
    background: no-repeat 0 0 / contain;
    background-image: url(/html/template/default/assets/img/ico_call_r.svg);
}
.gnav_right .tel span{
    line-height: 1.2;
    font-size: 1.1rem;
}
.gnav_right .mail a{
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    border-radius: 5px;
    width: auto;
    height: 32px;
    margin-bottom: 3px;
    padding: 10px 30px 10px 40px;
    box-sizing: border-box;
    background: #bf0000;
    color: #fff;
    line-height: 1;
    font-size: 1.3rem;
    font-weight: bold;
    transition: all 0.2s ease;
}
.gnav_right .mail a:hover{
    opacity: 0.7;
}
.gnav_right .mail a:before{
    position: absolute;
    content: "";
    width: 20px;
    height: 20px;
    top: 8px;
    left: 10px;
    background: no-repeat 0 0 / contain;
    background-image: url(/html/template/default/assets/img/ico_mail_w.svg);
}
.gnav_right .mail a:after{
    content: "";
    position: absolute;
    top: 46%;
    right: 7px;
    width: 5px;
    height: 5px;
    transform: rotate(-45deg) translate(0, -50%);
    border-bottom: 2px solid;
    border-right: 2px solid;
    border-color: #fff;
}
.nav-acc_wrap {
    display: none;
    position: absolute;
    background-color: #f5f5f5;
    box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.3);
    top: 44px;
    z-index: 2;
    width: 100%;
    padding: 10px 0;
    border-radius: 0 5px 5px 5px;
    opacity: 0; /* 初期状態で非表示 */
    transition: opacity 0.3s ease; /* フェードインするアニメーション */
}
.gnav_left > li:hover .nav-acc_wrap {
    display: block;
    width: max-content;
    opacity: 1; /* ホバー時に表示 */
}
.nav-acc_wrap > ul {
    display: flex;
    flex-direction: column;
}
.nav-acc_wrap > ul > li a,
.nav-acc_wrap > ul > li span{
    display: flex;
    align-items: center;
    gap:10px;
    padding: 11px 18px;
    color: #222;
    line-height: 1;
    font-size: 1.3rem;
    font-weight: bold;
    transition: all 0.2s;
}
.nav-acc_wrap > ul > li a:hover{
    color:#bf0000;
}
.category-list,
.category-link {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding: 0;
}
.category-link > div {
    display: none;
}
.category-link > .active {
    display: block;
}
.gnav_left > li:hover .acc_catgory{
    width: 1100px;
    max-width: 94vw;
    height: auto;
    padding:20px;
}
.acc_catgory ul{
    flex-direction: row;
    flex-wrap:wrap;
        gap: 7px 10px;
}
.acc_catgory li{
    width: calc((100% - 30px) / 4);
}
.nav-acc_wrap.acc_catgory li span{
    padding:0;
    font-size:1.2rem;
}
.nav-acc_wrap.acc_catgory li a{
    position: relative;
    height: 100%;
    box-sizing: border-box;
    padding: 12px 15px 12px 10px;
    background: #fff;
    border-radius: 3px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}
.nav-acc_wrap.acc_catgory li a:after{
    content: "";
    position: absolute;
    top: 50%;
    right: 5px;
    width: 5px;
    height: 5px;
    transform: rotate(-45deg) translate(0, -50%);
    border-bottom: 2px solid #bbb;
    border-right: 2px solid #bbb;
}
.nav-acc_wrap.acc_catgory li a:hover span{
    color:#bf0000;
}
.nav-acc_wrap.acc_catgory li a:hover:after{
    border-color:#bf0000;
}
.main-header__body2.fixed .header-gnav__wrap{
    padding-bottom: 2px;
}
.main-header__body2.fixed .gnav_left > li > a,
.main-header__body2.fixed .gnav_left > li > span {
    padding: 10px;
    font-size: 1.2rem;
}
.main-header__body2.fixed .gnav_right .tel a{
    font-size: 1.9rem;
}
.main-header__body2.fixed .gnav_right .tel a:before{
    width: 17px;
    height: 17px;
    top: 6px;
}
.main-header__body2.fixed .gnav_right .tel span {
    font-size: 1.05rem;
}
.main-header__body2.fixed .gnav_right .mail a{
    height: 25px;
    padding: 10px 20px 10px 35px;
    font-size: 1.2rem;
}
.main-header__body2.fixed .gnav_right .mail a:before{
    width: 17px;
    height: 17px;
    top: 7px;
}
.main-header__body2.fixed .nav-acc_wrap {
    top: 33px;
}
@media screen and (max-width: 1347px){
    .header-gnav__wrap {
        padding: 0 10px;
    }
    .gnav_left > li > a, .gnav_left > li > span {
        padding: 15px 7px;
        font-size: 1.3rem;
    }
    .gnav_right .tel a {
        font-size: 1.8rem;
    }
    .gnav_right .tel a:before {
        width: 20px;
        height: 20px;
        top: 2px;
        left: 10px;
    }
    .gnav_right .tel span {
        font-size: 1rem;
    }
    .gnav_right .mail a {
        height: 30px;
        padding: 10px 20px 10px 35px;
        font-size: 1.3rem;
    }
    .gnav_right .mail a:before {
        width: 18px;
        height: 18px;
        top: 9px;
        left: 7px;
    }
}
@media screen and (max-width: 1023px){
    .gnav_right{
        display:none;
    }
}
@media screen and (max-width: 767px){
    .header-gnav__wrap{
        display:none;
    }
}

/* 業種別人気ノベルティ紹介 */

.by-industry_wraper1 {
    display: flex;
    justify-content: center;
    margin-bottom: 45px;
    gap: 15px;
}

.heading_caption h2 {
    text-align: center;
    font-size: 30px;
    margin-bottom: 25px;
    margin-top: 20px;
    border-bottom: 3px double #bf0000;
    display: flex;
    justify-content: center;
    align-items: center;
}

.heading_caption h2::before {
    content: '';
    background: url("/html/user_data/assets/img/item/by-industry/icon.webp");
    background-size: contain;
    background-repeat: no-repeat;
    width: 31px;
    height: 50px;
    display: inline-block;
    margin-right: 7px;
    margin-bottom: 9px;
}

.heading_caption p {
    text-align: center;
    font-size: 15px;
    margin-bottom: 10px;
}

.by-industry_wraper1 .insert_name {
    border: 1px solid #000000;
    width: 400px;
    margin: 10px auto 10px;
}

.by-industry_wraper1 .insert_name h3 {
    position: relative;
    text-align: center;
    font-size: 15px;
    margin: 10px auto 25px;
    background: #f9eaeb;
    padding: 1em;
    border-radius: 10px;
    width: 80%;
}

.by-industry_wraper1 .insert_name h3::before,
.by-industry_wraper1 .insert_name h3::after {
    position: absolute;
    right: 30px;
    height: 0;
    width: 0;
    border: solid transparent;
    content: "";
    transform: scale(-1, 1);
}

.by-industry_wraper1 .insert_name h3::before {
    top: 100%;
    margin-left: -10px;
    border-color: transparent;
    border-top-color: #f9eaeb;
    border-right-color: #f9eaeb;
    border-width: 10px;
    transform: scale(-1, 1);
}

.by-industry_wraper1 .insert_name h3::after {
    top: 99%;
    margin-left: -7px;
    border-color: transparent;
    border-top-color: #f9eaeb;
    border-right-color: #f9eaeb;
    border-width: 7px;
    transform: scale(-1, 1);
}

.by-industry_wraper1 .insert_name img {
    display: block;
    width: 230px;
    margin: 0 auto;
    object-fit: contain;
}

.by-industry_wraper1 .insert_name p {
    position: relative;
    text-align: center;
    width: 90%;
    margin: 25px auto 20px;
    padding: 15px 0;
    font-size: 15px;
}

.by-industry_wraper1 .insert_name p::before,
.by-industry_wraper1 .insert_name p::after {
    content: '';
    width: 25px;
    height: 25px;
    position: absolute;
}

.by-industry_wraper1 .insert_name p::before {
    border-left: solid 1px #000000;
    border-top: solid 1px #000000;
    top: 0;
    left: 0;
}

.by-industry_wraper1 .insert_name p::after {
    border-right: solid 1px #000000;
    border-bottom: solid 1px #000000;
    bottom: 0;
    right: 0;
}

.by-industry_wraper1 .insert_name p span {
    background: linear-gradient(transparent 60%,#fff135 60%);
}

.recommendation {
    border: 1px solid #000000;
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 96px;
    padding: 10px;
}

.recommendation_goods {
    width: 260px;
    margin: 20px auto 20px;
    display: flex;
    flex-direction: column;
}

.recommendation_goods img {
    width: 200px;
    height: 200px;
    margin: auto;
    object-fit: contain;
}

.recommendation_goods h3 {
    margin: 0px auto 10px;
    font-size: 15px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.recommendation_goods p {
    position: relative;
    background: #ffffff;
    border: solid 1px #f3dadc;
    font-size: 14px;
    padding: 10px 19px;
    margin: 20px auto 20px;
    flex-grow: 1;
}

.recommendation_goods p::after {
    position: absolute;
    content: '';
    left: -1px;
    top: -1px;
    border-style: solid;
    border-width: 0 0 20px 20px;
    border-color: #fff #fff #f3dadc;
}

.recommendation_goods a {
    position: relative;
    border: 1px solid #bf0000;
    background-color: #bf0000;
    color: #ffffff;
    font-size: 15px;
    padding: 10px 15px;
    width: 80%;
    margin: auto;
    border-radius: 10px;
    text-align: center;
}

.recommendation_goods a::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 10px;
    width: 5px;
    height: 5px;
    border-bottom: 1px solid #ffffff;
    border-right: 1px solid #ffffff;
    transform: rotate(-45deg) translate(0, -50%);
}

.recommendation a:hover {
    opacity: 0.7;
}

@media screen and (max-width:767px) {
.heading_caption h2 {
    font-size: 20px;
    text-align: center;
    margin-bottom: 11px;
}

.heading_caption p {
    text-align: left;
    max-width: 100%;
    font-size: 15px;
    margin-bottom: 10px;
}

.heading_caption p br {
    display: none;
}

.by-industry_wraper1 {
    display: flex;  
    flex-flow: column;
    justify-content: center;
    margin-bottom: 23px;
}

.by-industry_wraper1 .insert_name {
    border: 1px solid #000000;
    max-width: 100%;
}

.by-industry_wraper1 .insert_name h3 {
    position: relative;
    text-align: center;
    font-size: 15px;
    margin: 10px auto 25px;
    padding: 1em;
    border-radius: 10px;
    width: 90%;
}

.recommendation {
    border: 1px solid #000000;
    display: flex;
    flex-flow: column;
    justify-content: center;
    gap: 30px;
    margin-bottom: 60px;
}

.recommendation_goods {
    width: 400px;
    max-width: 100%;
    display: flex;
    flex-direction: column;
}

.recommendation_goods p br {
    display: none;
}
}

/* 数量検索機能の非表示 */
.search_count_off{
    display: none;
}

/* 商品仕様選択エリア改修 */
.buttons_col-3 .block-detail__button {
    width: calc((100% - 20px) / 3);
}
.buttons_col-3 .button-icon .icon {
    font-size: 2.8rem;
}
.buttons_col-3 .button-icon {
    flex-wrap: nowrap;
    width: 100%;
    height: 100%;
    padding: 10px 0;
}
.buttons_col-3 .button-icon__text {
    margin-top: 5px;
    text-align: center;
    line-height: 1.2;
    font-size: 1.2rem;
}
.block-detail__contact .primary-button {
    justify-content: start;
    box-sizing: border-box;
    padding: 15px 1vw 15px 1.5vw;
    font-size: 1.6rem;
}
.block-detail__contact .primary-button {
    justify-content: start;
    box-sizing: border-box;
    padding: 15px 1vw 15px 1.5vw;
    font-size: 1.6rem;
}
@media (max-width: 1023px){
    .buttons_col-3 .button-icon__text {
        font-size: 1.1rem;
    }
    .block-detail__contact .primary-button {
        padding-left: 4.5vw;
        font-size: 1.4rem;
    }
}

/* アンカーリンクのズレ調整 */
#top_cate,
#top_rank,
#top_camp,
#top_season,
#top_scene,
#top_feature,
#top_press,
#top_what{
    margin-top:-100px;
    padding-top:100px;
}
#order_block,
#price_block,
#spec_block,
#printing_block,
#temp_block,
#calendar_block,
#review_block,
#relation_block{
    margin-top:-100px;
    padding-top:110px;
    padding-bottom: 30px;
}

/* 商品ページ_総額表示エリア改修 */
.block-detail__ttl{
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #222;
    font-size: 1.5rem;
    font-weight: bold;
    text-align: center;
}
.block-detail__baloon{
    position: relative;
    margin: 10px 0 -15px 6px;
    border: 1px solid #717171;
    border-radius: 5px;
    line-height: 1.4;
    padding: 7px;
    font-size: 1.25rem;
    font-weight: bold;
}
.block-detail__baloon:before{
    content: "";
    position: absolute;
    bottom: -18px;
    right: 28px;
    width: 0;
    height: 0px;
    border-top: 18px solid #717171;
    border-left: 0 solid transparent;
    border-right: 17px solid transparent;
    transform-origin: left top;
}
.block-detail__baloon:after{
    content: "";
    position: absolute;
    bottom: -16px;
    right: 29px;
    width: 0;
    height: 0;
    border-top: 16px solid #fff;
    border-left: 0 solid transparent;
    border-right: 15px solid transparent;
    transform-origin: left top;
}
.block-detail__baloon red{
    color:#f37400
}
.block-detail__baloon br{
    display: none;
}
@media (min-width: 1024px){
    .block-detail__baloon {
        margin: 10px 0 0 6px;
        padding: 6px 10px;
    }
    .block-detail__baloon br{
        display: block;
    }
}

/* 商品詳細ページ_商品画像改修 */
.block-detail__contents {
    background: none;
    padding: 0;
}
.block-detail__contents form{
    background-color: #f3f3f3;
    padding: 30px 15px;
}
.block-detail__tags{
    position: relative;
    z-index: 1;
}
.black_image-caption{
    font-size:1.2rem;
    display: block;
    margin: 8px 0 -8px;
}
@media (min-width: 1024px) {
    .block-detail__images {
        width: 470px;
    }
    .block-detail__contents {
        width: calc(100% - 490px);
        padding: 35px 25px;
    }
    .block-detail__main {
        height: 472px;
    }
    .block-detail__main__item img {
        height: 470px;
    }
    .block-detail__thumb__item {
        height: 86px;
    }
    .block-detail__contents {
        background: none;
        margin-top: -100px;
        padding: 100px 0 0 0;
        font-size: 1.3rem;
    }
    .block-detail__contents form{
        padding: 35px 25px;
    }
    .form-control {
        font-size: 1.3rem;
    }
    .block-detail__box {
        padding: 15px;
    }
    .block-detail__item__inside__form {
        width: 105px;
        min-width: 105px;
    }
    .block-detail__item__name {
        width: 37%;
        min-width: 145px;
    }
    .black_image-caption{
        margin: -8px 0 8px;
    }
}


/* 商品詳細ページ_テンプレート情報改修 */
.block-template .sub-button__link {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    height: auto;
    padding: 5px 30px 5px 20px;
    transition: all 0.2s ease;
    border: 1px solid #ff8d25;
    background: #ff8d25;
    position: relative;
    white-space: nowrap;
    cursor: pointer;
    color: #fff;
    text-decoration: none;
    font-size: 1.2rem;
    font-weight: bold;
}
.block-template .sub-button__link:after {
    content: "";
    position: absolute;
    top: 45%;
    right: 7px;
    width: 6px;
    height: 6px;
    transform: rotate(-45deg) translate(0, -50%);
    border-bottom: 2px solid;
    border-right: 2px solid;
    border-color: #fff;
}

/* 商品一覧_サイズ改修 */
.block-productlist__wrap .block-items__item__img img,
.new-item-block .block-items__item__img img{
    border:1px solid #ddd;
}
.block-productlist__wrap .block-items__item__name,
.new-item-block .block-items__item__name {
    font-size: 1.4rem;
    font-weight: bold;
    line-height: 1.4;
    text-decoration: none;
}
.block-productlist__wrap .block-items__item__price--unit,
.new-item-block .block-items__item__price--unit {
    font-size: 1.6rem;
}
@media (min-width: 600px) {
    .block-productlist__item {
        width: calc((100% - 45px) / 4);
    }
    .block-productlist__item:not(:nth-child(5n+1)) {
        margin-left: 0;
    }
    .block-productlist__item:not(:nth-child(4n+1)) {
        margin-left: 15px;
    }
    .block-productlist__item:nth-child(n+5) {
        margin-top: 30px;
    }
}

/* マイページ_注文状況一覧修正 */
@media (max-width: 1023px) {
    .block-history__heading__number {
        position: static;
        justify-content: flex-start;
    }
}

/* コンテンツパーツの配置変更 */
@media screen and (min-width: 1024px) {
    .content--right {
        display: block;
        width: 240px;
    }
    .content {
        flex-direction: row-reverse;
    }
}

/* バナー_ボトム固定 */
.fixed-banner__bottom{
    margin: auto;
    width: fit-content;
    position: fixed;
    bottom: 70px;
    left: 10px;
    right: 10px;
    z-index: 1;
    box-shadow: 0 0 3px rgba(0,0,0,0.5);
}

.fixed-banner__bottom img{
    vertical-align: bottom;
}

.fixed-banner__bottom a{
    transition: all 0.2s;
}

.fixed-banner__bottom a:hover{
    opacity: 0.7;
}

.fixed-banner__bottom .close-btn {
    position: absolute;
    top: -12px;
    right: -12px;
    width: 24px;
    height: 24px;
    background: #ffffff;
    border-radius: 50px;
    color: #222;
    font-size: 15px;
    cursor: pointer;
    z-index: 2;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
}

@media screen and (min-width: 1023px) {
    .fixed-banner__bottom{
        bottom: 15px;
        left:calc(240px + 10px);
    }
}

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

}

/* レビューブロック修正 */
.block-review__item__content {
    font-size: 1.6rem;
}
.block-review__item__title {
    font-size: 1.8rem;
}
.block-review__item__reply__text {
    font-size: 1.3rem;
}



/* 申込フォーム＋特集ページへの導線 */
:root{
    --yellow:#ffe013; /* 左ブロック */
    --orange:#f4a000; /* 中ブロック */
    --pink:#f5aeb0; /* 右ブロック */
    --text:#1a1a1a;
    --accent-red:#ff2a2a;
    --accent-blue:#1c66ff;
}

/* レイアウト全体 */
.campaign-banner{
    display:flex;
    align-items:stretch;
    gap:5px;
    width:100%;
    max-width:960px;
    margin: 10px auto;
    overflow:hidden;
}

.campaign-banner > *{
    position:relative;
    display:flex; 
}

/* 左：黄色（矩形） */
.cb-left{
    flex: 1 1 20%;
    display: flex;
    justify-content: center;
    background:var(--yellow);
    padding: 15px min(3vw,28px);
    align-items:center;
}

/* 中：オレンジ（右向き矢じり＋白い抜き） */
.cb-middle{
    flex: 1 1 44%;
    display: flex;
    justify-content: center;
    color:var(--text);
    background:var(--orange);
    padding: 15px min(3vw,28px);
    align-items:center;
    clip-path: polygon(0 0, 95.6% 0, 100% 50%, 95.6% 100%, 0 100%);
    isolation:isolate; /* ::before/::after の重なり制御 */
}

/* 右：ピンク（六角形→矢印） */
.cb-right{
    flex: 0 0 26%;
    background:var(--pink);
    padding: 14px min(3vw,26px);
    margin-left: -2.1%;
    align-items:center;
    justify-content:center;
    text-align:center;
    clip-path:polygon(0 0, 88% 0, 100% 50%, 88% 100%, 0 100%, 8% 50%);
}

/* テキスト系 */
.cb-left p,
.cb-middle p{
    margin:0;
    line-height: 1.3;
    color:var(--text);
    font-size: clamp(14px, 1.6vw, 18px);
    font-weight:700;
}

.em-red{
    color:var(--accent-red);
    font-weight:700;
}

.em-blue{
    color:var(--accent-blue);
    font-weight:700;
    text-decoration:underline;
}

.cb-right .right-label{
    margin:0;
    line-height:1.3;
    color:#222;
    font-size: clamp(14px, 1.65vw, 18px);
    font-weight:700;
}

/* 中央・右ブロック全体をリンクに */
.cb-middle span,
.cb-right span {
    color:#0066c0;
}

.cb-middle a,
.cb-right a{
    position:absolute;
    inset:0;
    color:inherit;
    text-decoration:none;
}

.cb-middle a:focus-visible
.cb-right a:focus-visible{
    outline:3px solid #333;
    outline-offset:3px;
    border-radius:6px; 
}

/* クリック時の軽い押し込み効果 */
.cb-middle:hover,
.cb-right:hover{
    opacity: 0.7;
}

.cb-middle:active,
.cb-right:active{
    transform:translateY(1px);
}

/* モバイル */
@media (max-width: 640px){
    .campaign-banner br{ 
        display: none; 
    }
    .cb-left,
    .cb-middle,
    .cb-right{ 
        min-height:unset; padding:16px 14px; 
    }
}

.block-detail__campaign .primary-button{
    width: 100%;
    border-width: 2px;
    border-color: #ff5e00;
    color: #ff5e00;
}

/* 商品リンクカード_価格表記改修 */
.block-items__item__link{
    display: flex;
    flex-direction: column;
    height: 100%;
}

.price-info {
    margin-top: auto;
    padding-top: 8px;
}

.product-list__low{
    color: #555;
    font-size: 1.1em;
}

.price-info__value {
    margin-left: 0;
}

.product-list__unitprice,
.price-info__value--unit,
.block-items__item__price--unit {
    font-family: Roboto, Hiragino Sans, Hiragino Kaku Gothic ProN, Meiryo, Arial, sans-serif;
    font-size: 1.5rem;
}

.product-list__unitprice,
.price-info__value--unit,{
    margin-left: 4px;
}

.price-info__row .price-info__value--unit{
    font-size: 1.9rem;
}

.product-list__unitprice span,
.price-info__value--unit span,
.block-items__item__price--unit span{
    font-family: "Lucida Grande", "メイリオ", "Meiryo", "ＭＳ ゴシック", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", sans-serif;
    font-size:1.1rem;
    font-weight: normal;
    color:#222;
}

.price-info__row {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: baseline;
    line-height: 1.2;
    width: 100%;
}

/* ==========================================================================
  Category Menu CSS (Header / Side / Footer / Mobile)
  - 統合版（安定版1本）
  - side吹き出し三角：content:"" !important で強制生成（他CSSに負けない）
  - SP外側アコーディオン：spCatBody[hidden] を display:block !important でUAの display:none を上書き
============================================================================ */

/* =========================================================
  共通：カテゴリグリッド
========================================================= */
.catGrid{
  --cols: 4;
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  gap: 8px;
  align-items: start;
}

/* ヘッダー：4列 */
.catMenu--header{ --cols: 4; }

/* サイド：縦並び */
.catMenu--side{
  --cols: 1;
  position: relative;
  gap: 0;
  overflow: visible;
}

/* フッター */
.catMenu--footer{ --cols: 1; }

@media (max-width: 1023px){
  .catMenu--header{ --cols: 2; }
}
@media (max-width: 767px){
  .catMenu--header{ --cols: 2; }
  .catMenu--footer{ --cols: 1; }
}

/* 既存運用のスクロール制御（必要なら残す） */
@media (max-height: 899px){
  .gnav_left > li:hover .acc_catgory{
    height: 75vh;
    overflow-y: scroll;
  }
}

/* =========================================================
  親カテゴリ（共通）
========================================================= */
.catBtn{
  width: 100%;
  height: 44px;
  padding: 0 32px 0 8px;
  border: 1px solid #ccc;
  border-radius: 8px;
  background: #fff;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;

  cursor: pointer;
  font: inherit;

  text-decoration: none;
  color: inherit;

  position: relative;
  overflow: visible;
  box-sizing: border-box;
}

.catBtn__left{
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.catBtn__img{
  width: 20px;
  height: 20px;
  object-fit: contain;
  flex: 0 0 auto;
  transition: opacity .15s ease;
}

.catBtn__label{
  font-weight: 700;
  font-size: clamp(1.1rem, 1vw, 1.3rem);
}

.catBtn__labelLink{
  text-decoration: none;
  color: inherit;
  display: inline-block;
  min-width: 0;
  text-align: left;
  line-height: 1.4;
}
.catBtn__labelLink:hover,
.catBtn__labelLink:focus-visible{
  text-decoration: underline;
  color: #bf0000;
  outline: none;
}

/* 右側アイコン（headerのベース） */
.catBtn__icon{
  position: absolute;
  width: 18px;
  height: 18px;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 999px;
  flex: 0 0 auto;
}

/* リンク型：くの字 */
.catBtn__icon--chev::before{
  content:"";
  position:absolute;
  top: 50%;
  left: 50%;
  width: 7px;
  height: 7px;
  border-right: 2px solid #bbb;
  border-bottom: 2px solid #bbb;
  transform: translate(-60%, -50%) rotate(-45deg);
  transition: transform .18s ease, border-color .18s ease;
}

/* 展開型：＋（丸） */
.catBtn__icon--pm{
  border: 1px solid #d33;
  transition: background-color .18s ease, border-color .18s ease;
}
.catBtn__icon--pm::before,
.catBtn__icon--pm::after{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width: 10px;
  height: 2px;
  background: #d33;
  transform: translate(-50%, -50%);
  transition: background-color .18s ease, opacity .18s ease;
}
.catBtn__icon--pm::after{ transform: translate(-50%, -50%) rotate(90deg); }
.catBtn.is-open .catBtn__icon--pm::after{ opacity: 0; }

/* =========================================================
  子カテゴリ（共通）
========================================================= */
.childLink__wrap{
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.childLink__text{
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.childLink__img{
  display: none;
  transition: opacity .15s ease;
}

.childPanel{
  grid-column: 1 / -1;
  border-radius: 8px;
  background: #e6e6e6;
  padding: 18px 22px;
  position: relative;
  box-shadow: 0 0 8px rgba(0,0,0,.1) inset;
}
.childPanel__inner{
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  gap: 12px;
  align-items: center;
}
.childLink{
  display: flex;
  align-items: center;
  gap: 10px;

  font-size: clamp(1.05rem, 1vw, 1.2rem);
  font-weight: 800;
  text-decoration: none;
  color: #111;

  line-height: 1.2;
  white-space: nowrap;
}
.childLink::before{
  content: "›";
  font-size: 22px;
  font-weight: 900;
}

/* 親/子：hover画像半透明（header + side） */
.catMenu--header .catBtn:hover .catBtn__img,
.catMenu--header .catBtn:focus-visible .catBtn__img,
.catMenu--side   .catBtn:hover .catBtn__img,
.catMenu--side   .catBtn:focus-visible .catBtn__img{
  opacity: 0.7;
}
.catMenu--header .childLink:hover .childLink__img,
.catMenu--header .childLink:focus-visible .childLink__img,
.catMenu--side   .childLink:hover .childLink__img,
.catMenu--side   .childLink:focus-visible .childLink__img{
  opacity: 0.7;
}

/* =========================================================
  HEADER（click）
========================================================= */
.catMenu--header .catBtn--link:hover .catBtn__label,
.catMenu--header .catBtn--link:focus-visible .catBtn__label,
.catMenu--header .catBtn--acc:hover  .catBtn__label,
.catMenu--header .catBtn--acc:focus-visible .catBtn__label{
  color: #bf0000;
}
.catMenu--header .childLink:hover,
.catMenu--header .childLink:focus-visible{
  color: #bf0000;
  outline: none;
}
.catMenu--header .catBtn--link:hover .catBtn__icon--chev::before,
.catMenu--header .catBtn--link:focus-visible .catBtn__icon--chev::before{
  transform: translate(-45%, -50%) rotate(-45deg);
  border-color: #bf0000;
}
.catMenu--header .catBtn--acc:hover .catBtn__icon--pm,
.catMenu--header .catBtn--acc:focus-visible .catBtn__icon--pm{
  background: #bf0000;
  border-color: #bf0000;
}
.catMenu--header .catBtn--acc:hover .catBtn__icon--pm::before,
.catMenu--header .catBtn--acc:hover .catBtn__icon--pm::after,
.catMenu--header .catBtn--acc:focus-visible .catBtn__icon--pm::before,
.catMenu--header .catBtn--acc:focus-visible .catBtn__icon--pm::after{
  background: #fff;
}
.catMenu--header .catBtn--acc.is-open .catBtn__icon--pm{
  background: #bf0000;
  border-color: #bf0000;
}
.catMenu--header .catBtn--acc.is-open .catBtn__icon--pm::before{ background:#fff; }

/* header：子カテゴリ画像表示／›削除 */
.catMenu--header .childLink__img{
  display: block;
  width: 28px;
  height: 28px;
  object-fit: contain;
  flex: 0 0 auto;
}
.catMenu--header .childLink::before{ content: none; }
.catMenu--header .childLink__text{
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

/* header：展開型の親テキストリンクは無効化 */
.catMenu--header .catBtn--acc .catBtn__labelLink{
  pointer-events: none;
  text-decoration: none;
  color: inherit;
}

/* header：親→子パネル三角 */
.catGrid[data-mode="click"] .catBtn.is-open{
  position: relative;
  overflow: visible;
}
.catGrid[data-mode="click"] .catBtn.is-open::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-10px;
  transform: translateX(-50%);
  width:0; height:0;
  border-left:10px solid transparent;
  border-right:10px solid transparent;
  border-top:10px solid #bf0000;
  z-index: 5;
  pointer-events:none;
}
.catGrid[data-mode="click"] .catBtn.is-open::before{
  content:"";
  position:absolute;
  left:50%;
  bottom:-11px;
  transform: translateX(-50%);
  width:0; height:0;
  border-left:11px solid transparent;
  border-right:11px solid transparent;
  border-top:11px solid #ccc;
  z-index: 4;
  pointer-events:none;
}

/* =========================================================
  SIDE（hover）
========================================================= */
.catMenu--side .catBtn{
  height: auto;
  padding: 10px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  border-bottom: 1px solid #e6e6e6;
}
.catMenu--side .catBtn__img{ width: 28px; height: 28px; }
.catMenu--side .catBtn__label{
  font-size: 1.25rem;
  font-weight: 700;
  color: #111;
}
.catMenu--side .catBtn--link:hover,
.catMenu--side .catBtn--acc:hover{ background: #efefef; }
.catMenu--side .catBtn--link:hover .catBtn__label,
.catMenu--side .catBtn--link:focus-visible .catBtn__label,
.catMenu--side .catBtn--acc:hover  .catBtn__label,
.catMenu--side .catBtn--acc:focus-visible .catBtn__label{
  color: #bf0000;
}
.catMenu--side .catBtn--acc{ position: relative; overflow: visible; }

/* side：右端アイコン（borderで統一） */
.catMenu--side .catBtn__icon{
  right: 0;
  width: 16px;
  height: 16px;
  border: 0;
  border-radius: 0;
}
.catMenu--side .catBtn--link .catBtn__icon::before{
  content:"";
  position:absolute;
  inset: 0;
  margin: auto;
  width: 5px;
  height: 5px;
  border-right: 2px solid #bbb;
  border-bottom: 2px solid #bbb;
  transform: rotate(-45deg);
}
.catMenu--side .catBtn--acc .catBtn__icon::before{
  content:"";
  position:absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 2px;
  background: #bf0000;
  transform: translate(-50%, -50%);
}
.catMenu--side .catBtn--acc .catBtn__icon::after{
  content:"";
  position:absolute;
  left: 50%;
  top: 50%;
  width: 2px;
  height: 12px;
  background: #bf0000;
  transform: translate(-50%, -50%);
}
.catMenu--side .catBtn--acc.is-open .catBtn__icon::after{ opacity: 0; }
.catMenu--side .catBtn--link:hover .catBtn__icon::before{ border-color:#bf0000; }

/* side：子カテゴリパネル（右隣） */
.catMenu--side .childPanel{
  position: absolute;
  top: 0;
  left: calc(100% - 16px);
  width: min(760px, 72vw);
  background: #fff;
  border-radius: 10px;
  padding: 18px 18px 16px;
  box-shadow: 0 12px 24px rgba(0,0,0,.18);
  z-index: 10;
  grid-column: auto;
  margin-top: 0;
  overflow: visible;
  --anchor-y: 22px;

  opacity: 0;
  transform: translateX(-10px);
  transition: opacity .18s ease, transform .18s ease;
  will-change: opacity, transform;
}
.catMenu--side .childPanel:not([hidden]){
  opacity: 1;
  transform: translateX(0);
}

/* ✅ side：吹き出し三角（強制生成） */
.catGrid[data-mode="hover"] .childPanel::before{
  content:"" !important;
  position:absolute;
  left:-16px;
  top: var(--anchor-y);
  transform: translateY(-50%);
  width:0; height:0;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  border-right: 16px solid #d8d8d8;
  pointer-events:none;
  z-index: 20;
}
.catGrid[data-mode="hover"] .childPanel::after{
  content:"" !important;
  position:absolute;
  left:-15px;
  top: var(--anchor-y);
  transform: translateY(-50%);
  width:0; height:0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 15px solid #fff;
  pointer-events:none;
  z-index: 21;
}

/* side：中身 */
.catMenu--side .childPanel__inner{
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  align-items: start;
}
.catMenu--side .childLink.is-head{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid #e6e6e6;
  font-size: 1.5rem;
  font-weight: 800;
  text-decoration: none;
  color: #337ab7;
}
.catMenu--side .childGrid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 26px;
  row-gap: 4px;
}
.catMenu--side .childLink__img{
  display: block;
  width: 28px;
  height: 28px;
  object-fit: cover;
  flex: 0 0 auto;
}
.catMenu--side .childLink::before{ content: none; }
.catMenu--side .childLink.is-head::after,
.catMenu--side .childLink.is-item::after{
  content:"";
  width: 8px;
  height: 8px;
  border-right: 2px solid #a9a9a9;
  border-bottom: 2px solid #a9a9a9;
  transform: rotate(-45deg);
  flex: 0 0 auto;
}
.catMenu--side .childLink.is-item{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid #ededed;
  font-size: 1.25rem;
  font-weight: 700;
  color: #111;
  text-decoration: none;
}
.catMenu--side .childLink.is-item .childLink__wrap{
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1 1 auto;
}
.catMenu--side .childLink.is-item .childLink__text{ white-space: nowrap; }
.catMenu--side .childLink:hover,
.catMenu--side .childLink:focus-visible{
  color: #bf0000;
  outline: none;
}
.catMenu--side .childLink:hover::after,
.catMenu--side .childLink:focus-visible::after{
  border-color: #bf0000;
}
.catMenu--side .childLink br{ display: none; }

/* side：被せ部分が親クリックを阻害しない */
.catMenu--side .childPanel{ pointer-events: none; }
.catMenu--side .childPanel__inner,
.catMenu--side .childGrid{ pointer-events: auto; }

/* =========================================================
  GUARD：side(hover) の吹き出し三角が他CSSに潰されるのを防ぐ
  - content:none を上書きして「生成」を保証
  - overflow:hidden を上書きして「はみ出し」を許可
  ※ side(hover)のchildPanelだけに限定
========================================================= */
.catGrid[data-mode="hover"] .childPanel{
  overflow: visible !important;
}

.catGrid[data-mode="hover"] .childPanel::before,
.catGrid[data-mode="hover"] .childPanel::after{
  content: "" !important;
  position: absolute !important;
  z-index: 999999 !important;
}

/* =========================================================
  FOOTER（JS生成）
========================================================= */
.catMenu--footer .footerCats{
  column-count: 4;
  column-gap: 36px;
  max-height: 2000px;
  margin-top: 8px;
}
.catMenu--footer .footerCats__section{
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  margin: 0 0 22px;
}
.footerCats__titleLink{
  display: block;
  font-weight: 800;
  color: #c00;
  font-size: 1.5rem;
  margin-bottom: 10px;
  text-decoration: none;
}
.catMenu--footer .footerCats__titleLink:hover,
.catMenu--footer .footerCats__titleLink:focus-visible{
  text-decoration: underline;
  outline: none;
}
.footerCats__list{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}
.footerCats__list a{
  color: #111;
  text-decoration: none;
  font-weight: 400;
  font-size: 1.25rem;
  white-space: normal;
  line-height: 1.4;
}
.footerCats__list a:hover,
.footerCats__list a:focus-visible{
  text-decoration: underline;
  outline: none;
}
@media (max-width: 767px){
    .catMenu--footer .footerCats{
        column-count: 1;
        max-height: none;
    }
}

/* =========================================================
  SPメニュー：外側アコーディオン（商品カテゴリ / 特集 / メーカー）
========================================================= */
.spAccList{ margin: 0; padding: 0; }

.spCatWrap{
  margin: 0;
  padding: 0;
  border-top: 1px solid #e6e6e6;
}
.spCatToggle{
  position: relative;
  width: 100%;
  margin: 0;
  padding: 16px 46px 16px 12px;
  background: transparent;
  border: 0;

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

  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1.3;

  cursor: pointer;
}
.spCatToggle[aria-expanded="true"]{ color: #bf0000; }

.spCatToggle__icon{
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
}
.spCatToggle__icon::before{
  content:"";
  position:absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 2px;
  background: #bf0000;
  transform: translate(-50%, -50%);
}
.spCatToggle__icon::after{
  content:"";
  position:absolute;
  left: 50%;
  top: 50%;
  width: 2px;
  height: 14px;
  background: #bf0000;
  transform: translate(-50%, -50%);
  transition: opacity .15s ease;
}
.spCatToggle[aria-expanded="true"] .spCatToggle__icon::after{ opacity: 0; }

/* spCatBody：paddingは0（余白原因を排除） */
.spCatBody{
  padding: 0;
  margin: 0;

  display: block;
  max-height: 0;
  overflow: hidden;

  opacity: 0;
  transform: translateY(-4px);
  transition: max-height .28s ease, opacity .18s ease, transform .18s ease;
  will-change: max-height, opacity, transform;
}
/* ✅ hidden属性（UAのdisplay:none）を上書きしてアニメを殺さない */
.spCatBody[hidden]{ display: block !important; }

.spCatWrap.is-open .spCatBody{
  opacity: 1;
  transform: translateY(0);
  max-height: none;
}

/* 特集/メーカーのシンプルリンク一覧（任意） */
.spLinkList{
  list-style: none;
  margin: 0;
  padding: 6px 12px 12px;
  display: grid;
  gap: 10px;
}
.spLinkList a{
  text-decoration: none;
  color: #111;
  font-weight: 700;
  font-size: 1.2rem;
}
.spLinkList a:hover,
.spLinkList a:focus-visible{
  color: #bf0000;
  outline: none;
}

/* =========================================================
  SP（mobile）：親直下アコーディオン（右出し無効化）
========================================================= */
.catGrid[data-mode="mobile"] .childPanel{
  position: static !important;
  inset: auto !important;
  width: auto !important;
  z-index: auto !important;

  display: block !important;
  grid-column: 1 / -1;

  background: #f7f7f7;
  border-radius: 8px;
  box-shadow: none;

  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-4px);
  transition: max-height .26s ease, opacity .18s ease, transform .18s ease;
  will-change: max-height, opacity, transform;

  padding: 0 12px;
  margin: 0;
}
.catGrid[data-mode="mobile"] .childPanel.is-open{
  opacity: 1;
  transform: translateY(0);
  max-height: var(--sp-child-h, 520px);
  padding: 10px 12px 12px;
  margin: 0 0 8px 0;
}
.catGrid[data-mode="mobile"] .childPanel::before,
.catGrid[data-mode="mobile"] .childPanel::after{
  content: none !important;
}
.catGrid[data-mode="mobile"] .childPanel__inner{
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  align-items: start;
}
.catGrid[data-mode="mobile"] .childGrid{ display: contents; }

/* mobile：誤タップ防止（padding/border） */
.catGrid[data-mode="mobile"] .childLink{
  padding: 10px 0;
  line-height: 1.35;
  white-space: normal;
}
.catGrid[data-mode="mobile"] .childPanel__inner > .childLink{
  border-top: 1px solid #e6e6e6;
}
.catGrid[data-mode="mobile"] .childPanel__inner > .childLink:first-child{ border-top: 0; }
.catGrid[data-mode="mobile"] .childLink__wrap{
  width: 100%;
  justify-content: flex-start;
  gap: 12px;
}
.catGrid[data-mode="mobile"] .childLink__img{
  width: 28px;
  height: 28px;
  border-radius: 6px;
  object-fit: cover;
  flex: 0 0 auto;
}
.catGrid[data-mode="mobile"] .childLink::after{ margin-left: auto; }

/* =========================================================
  SP（mobile）：微調整
========================================================= */

/* 親カテゴリ：padding 四方10px */
.catGrid[data-mode="mobile"] .catBtn{
  padding: 10px !important;
}

/* 親カテゴリ：右端アイコン位置を右から10px内側へ */
.catGrid[data-mode="mobile"] .catBtn__icon{
  right: 10px !important;
}

/* 子カテゴリ：内部のgapを0に */
.catGrid[data-mode="mobile"] .childPanel__inner{
  gap: 0 !important;
}

/* 子カテゴリ：右端に「>」矢印（borderで生成） */
.catGrid[data-mode="mobile"] .childLink{
  width: 100%;
  justify-content: space-between;
}

.catGrid[data-mode="mobile"] .childLink::after{
  content: "";
    width: 5px;
    height: 5px;
  border-right: 2px solid #bbb;
  border-bottom: 2px solid #bbb;
  transform: rotate(-45deg);
  flex: 0 0 auto;
}

.spCatBody .sidenav__list_pc .list-item{
    padding:10px;
}
.spCatBody .sidenav__list_pc  .list-item::before {
    right: 10px;
}

.spCatBody .sidenav__list_pc .list-item__text {
    width: 100%;
}

.hamburgernav__user-info .header-nav__sub li a {
    font-size: 1.2rem;
}


.category-section {
    max-width: 1000px;
    margin: 20px auto;
}

/* ヘッダー: 一文のデザイン */
.category-header-row {
    display: flex;
    align-items: center;
    border-bottom: 2px solid #eee;
    padding-bottom: 12px;
    margin-bottom: 20px;
    gap: 12px;
}
.category-suffix {
    font-weight: bold;
    font-size: 16px;
}

/* グリッドレイアウト */
.category-grid-layout {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* PCは4列 */
    gap: 10px;
    margin-bottom: 40px;
}

/* カードスタイル */
.category-card-item {
    display: flex;
    align-items: center;
    padding: 8px;
    background: #fff;
    border: 1px solid #ddd;
    text-decoration: none;
    color: inherit;
    transition: background-color 0.2s;
    border-radius: 5px;
}

.category-card-item:hover {
    border: 1px solid #9d0000;
}

/* 画像ボックス */
.img-box {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    margin-right: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.img-box img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* テキスト */
.name {
    flex-grow: 1;
    font-size: 14px;
    font-weight: bold;
    line-height: 1.3;
}

/* 矢印 */
.arrow {
    width: 5px;
    height: 5px;
    border-top: 2px solid #ccc;
    border-right: 2px solid #ccc;
    transform: rotate(45deg);
    margin-left: 5px;
}

.arrow :hover {
    border-top: 2px solid #9d0000;
    border-right: 2px solid #9d0000;
}

/* --- スマホ・タブレット対応 --- */
@media (max-width: 768px) {
    .category-grid-layout {
        grid-template-columns: repeat(2, 1fr); /* スマホは2列 */
    }
    
    .category-header-row {
        gap: 8px;
    }

    .category-badge {
        padding: 2px 15px; /* スマホでは少し幅を狭く */
        font-size: 14px;
    }

    .category-suffix {
        font-size: 14px;
    }
}