@charset "utf-8";
/*
Theme Name:astra_child
Template:astra
Version: 2.3.1
*/
		/*
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
Twitter: @rich_clark
*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

body {
    line-height:1;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
    display:block;
}

nav ul {
    list-style:none;
}

blockquote, q {
    quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}

a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
	text-decoration: none;
}
	a:visited{
		text-decoration: none;
	}

/* change colours to suit your needs */
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}

/* change colours to suit your needs */
mark {
    background-color:#ff9;
    color:#000;
    font-style:italic;
    font-weight:bold;
}

del {
    text-decoration: line-through;
}

abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}

table {
    border-collapse:collapse;
    border-spacing:0;
}

/* change border colour to suit your needs */
hr {
    display:block;
    height:1px;
    border:0;
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

input, select {
    vertical-align:middle;
}

[type=button]:focus,
[type=button]:hover,
[type=submit]:focus,
[type=submit]:hover,
button:focus,
button:hover {
    background-color: unset;
    color: unset;
    text-decoration: unset;
}
/* リセットCSSここまで */
*, *::before, *::after {
    box-sizing: border-box;
}





/* 全般 */
/* テキストのサイズをrem指定する */
html{
    font-size: 10px;
}
body{
    font-size: 1.6rem;
    font-family: "Noto sans";
}

/* h1で囲われたimgの下余白を削除する。 */
h1 img{vertical-align: bottom;}

/* 全般 */
/*テキスト装飾セット*/
.font_b{
    font-weight: bold;
}

.font_size15b{
    font-size: 1.5em;
}

.font_size08b{
    font-size: 0.8em;
}

.fontsize_20b{
font-size: 2em;
}

.font-size05{
font-size:0.5em;
}

.line_accent {
    background: linear-gradient(transparent 75%, #FDF27D 75%);
    background-repeat: no-repeat;
    background-size: 0% 100%;
    transition: 0.4s;
}

.isAnimate2 {
    background-size: 100% 100% !important;
    transition: 0.4s;
}

.line_red {
    background: linear-gradient(transparent 93%, #FA25258A 93%);
    background-repeat: no-repeat;
    background-size: 0% 100%;
    transition: 0.4s;
}

.top_catch{
    display: inline-block;
    line-height: 0.9;
}

/* 左右上下中央寄せ */
.p_cc{
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
}

.p_cc_pc{
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
}

@media screen and (max-width:767px){
    .p_cc_pc{
    position: static !important;
    transform: none !important;
}
}


.cont_fit{
    width: fit-content !important;
}

/* ポップアップボタン位置調整 */
.jet-popup__close-button{
	position: absolute !important;
	top: -21px !important;
	right: -26px !important;
}

/* 右側へ寄せるデザインまとめ */
/* TOP:事例紹介 */
.yose .elementor-element-1c695ff:not(.zyogai){
    width: calc(100% - (50% - 656px)) ;
}
/* TOP:お知らせ */
.yose .elementor-element-ad082cf:not(.zyogai){
    width: calc(100% - (50% - 656px)) ;
}
/* セキュリティ印刷:よくあるご質問 */
.yose .elementor-element-ffbe73a:not(.zyogai){
    width: calc(100% - (50% - 656px)) ;
}
/* 伝票印刷:よくあるご質問 */
.yose .elementor-element-92fdd1a:not(.zyogai){
    width: calc(100% - (50% - 656px)) ;
}

/* 製本・加工:よくあるご質問 */
.yose .elementor-element-2f7c160:not(.zyogai){
    width: calc(100% - (50% - 656px)) ;
}



@media screen and (max-width:1356px){
    /* TOP:事例紹介 */
        .yose .elementor-element-1c695ff:not(.zyogai){
        width: 100% !important;
}
    /* TOP:お知らせ */
    .yose .elementor-element-ad082cf:not(.zyogai){
    width: 100% !important;
}
    /* セキュリティ印刷:よくあるご質問 */
    .yose .elementor-element-ffbe73a:not(.zyogai){
    width: 100% !important;
}
/* 伝票印刷:よくあるご質問 */
.yose .elementor-element-92fdd1a:not(.zyogai){
    width: 100% !important;
}
/* 製本・加工:よくあるご質問 */
.yose .elementor-element-2f7c160:not(.zyogai){
    width: 100% !important;
}
}


/* MVテキスト幅調整 */
.mv_subtxt_w600{
    width:100%;
    max-width:600px !important;
}

.mv_subtxt_w605{
    max-width: 605px !important;
    width: 100% !important;
}

.mv_subtxt_w960{
    max-width: 960px !important;
    width: 100% !important;
}


/* 画像ホバー拡大セット */
.img_waku_case_s{
    overflow: hidden;
    border-radius: 8px;
    aspect-ratio: 240/160;
}

.img_waku_case_s img{
    aspect-ratio: 240/160;
    object-fit: cover;
    transition: 0.5s;
}

.waku_link:hover .img_waku_case_s img {
    transform: scale(1.1);
}


.img_waku {
    overflow: hidden;
    border-radius: 8px;
}



.img_waku2 {
    overflow: hidden;
}

.img_waku_case_s{
    overflow: hidden;
    border-radius: 8px;
    aspect-ratio: 240/160;
}

.column_img_waku {
    overflow: hidden;
    border-radius: 8px;
    aspect-ratio: 400 /267;
}

.column_img_waku img{
    aspect-ratio: 400 /267;
    object-fit: cover;
    transition: 0.5s;
}

.case_img_waku {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    aspect-ratio: 376 /251;
}

.case_img_waku::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 0%, rgba(28, 28, 28, 0.4) 54%);
}

.case_img_waku img{
    aspect-ratio: 376 /251;
    object-fit: cover;
    transition: 0.5s;
}

.waku_link_bgi{
    transition: 0.5s;
}

.waku_link {
    transition: 0.5s;
    background-size: 100% 100% !important;
}

.waku_link:hover {
    background-size: 110% 110% !important;
}

.img_waku img {
    display: block;
    width: 100%;
    object-fit: cover;
    transition: 0.5s;
}

.img_waku2 img {
    display: block;
    width: 100%;
    object-fit: cover;
    transition: 0.5s;
}

.waku_link_bgi img {
    width: 100%;
    object-fit: cover;
    transition: 0.5s;
}

.waku_link:hover .img_waku img {
    transform: scale(1.1);
}

.waku_link:hover .img_waku2 img {
    transform: scale(1.1);
}

.waku_link:hover .column_img_waku img {
    transform: scale(1.1);
}

.waku_link:hover .case_img_waku img {
    transform: scale(1.1);
}

.waku_link_bgi:hover .img_waku img {
    transform: scale(1.1);
}


.txt_waku h4 {
    transition: 0.5s;
}

.txt_waku p {
    transition: 0.5s;
}

.news_link_txt p,.news_link_txt h4  {
    transition: 0.5s;
}

.news_link_txt2 h4{
    transition: 0.5s;
}

.waku_link:hover .news_link_txt2 h4{
    color:#E50012 !important;
}

.waku_link:hover .news_link_txt p,.waku_link:hover .news_link_txt h4  {
    color:#6F6B5C !important;
}

.waku_link:hover .txt_waku p{
    color:#CC3D40 !important;
}

/* ボタンホバーアイコン調整用 */
.linkico_hover .elementor-button-link svg circle,.linkico_hover .elementor-button-link svg path,.gaibulinkico_hover .elementor-button-link svg path{
    transition: 0.5s;
}

.linkico_hover .elementor-button-link:hover svg circle {
    fill: #ffffff !important;
}

.linkico_hover .elementor-button-link:hover svg path{
    fill: #CC3D40 !important;
}

.linkico_hover02 .elementor-button-link svg path,.linkico_hover02 .elementor-button-link svg{
    transition: 0.5s;
}

.linkico_hover02 .elementor-button-link:hover svg{
    fill: #CC3D40 !important;
}

.linkico_hover02 .elementor-button-link:hover svg path{
    fill: #ffffff !important;
}

.linkico_hover02 .elementor-button svg path,.linkico_hover02 .elementor-button-link svg{
    transition: 0.5s;
}

.linkico_hover02 .elementor-button:hover svg{
    fill: #CC3D40 !important;
}

.linkico_hover02 .elementor-button:hover svg path{
    fill: #ffffff !important;
}

.gaibulinkico_hover .elementor-button:hover svg path{
    fill: #ffffff !important;
}

/* トップへ戻るボタン */
.page-top {
  position: fixed;
  right: 30px;
  bottom: 30px;
  width: 36px;   /* アイコンサイズに合わせて調整 */
  height: 36px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;          /* 非表示中はクリック無効 */
  transition: opacity 0.5s ease !important; /* 0.5秒のフェードイン */
  z-index: 999;
}

.page-top.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.page-top__icon {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transition: opacity 0.5s ease !important; /* ホバー時のフェード */
}

/* ホバー用アイコンは初期状態で透明にして重ねておく */
.page-top__icon--hover {
  opacity: 0;
}

.page-top:hover .page-top__icon--base {
  opacity: 0;
}
.page-top:hover .page-top__icon--hover {
  opacity: 1;
}
/* ここまで トップへ戻るボタン */

.pdf_btn .pdf_ico{
    max-width: 24px;
    margin-bottom:-6px;
}

.pdf_btn .link_txt_pdf {
    font-size:1.6rem;
    font-weight:bold;
    color:#231815;
}

.pdf_btn .pdf_ico{
    max-width: 24px;
    margin-bottom:-6px;
}

.pdf_btn .link_txt_pdf {
    font-size:1.6rem;
    font-weight:bold;
    color:#231815;
    transition: 0.5s;
}

.pdf_btn a:hover {
    background-color: #544C4C;
    border:4px solid #544C4C;

}

.pdf_btn a:hover .link_txt_pdf {
    color:#ffffff;
}

@media screen and (max-width:767px){
    .pdf_btn a {
    padding: 10px 16px;
    border:2px solid #F7F3EE;
}

.pdf_btn .link_txt_pdf {
    font-size:1.4rem;
}

.pdf_btn .pdf_ico{
    max-width: 16px;
    margin-bottom:-6px;
}

.pdf_btn a:hover {;
    border:2px solid #544C4C;

}
}

/* ヘッダー */
/* ===== ヘッダーナビゲーション 共通CSS ===== */

.custom-header-nav {
    display: flex;
    align-items: center;

}

.nav-menu {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap:40px;
    align-items: center;
}

.nav-menu > li {
    position: relative;
}

.nav-menu > li > a {
    display: block;
    line-height: 70px; /* ヘッダーの高さに合わせて調整 */
    text-decoration: none;
    font-size: 1.6rem;
    font-weight: normal;
    white-space: nowrap;
    transition: 0.4s;
    position: relative;
}

/* ===== ホバーライン（中央から左右に広がる） ===== */
.nav-menu > li.has-submenu:not(.menu-contact) > a {
    line-height: 1;
    height: 70px;
    align-items: flex-start;
}

.nav-menu > li.has-submenu:not(.menu-contact) > a .menu-text {
    position: relative;
    display: inline-block;
    line-height: 2;
}

.nav-menu > li.has-submenu:not(.menu-contact) > a .menu-text::before {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 1px;
    max-width: 40px;
    background-color: #E50012;
    transition: 0.4s;
}

.nav-menu > li.has-submenu:not(.menu-contact) > a:hover .menu-text::before {
    width: 40px;
}

/* ===== ドロップダウン（サブメニュー）共通 ===== */

.nav-menu .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    list-style: none;
    margin: 0;
    padding: 8px 0;
    min-width: 200px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    z-index: 9999;
    /* ふわっと表示 */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.4s ease, visibility 0.4s ease, transform 0.4s ease;

    background-color: #ffffff;
    border-radius: 8px;
}

/* サブメニュー表示：ホバー */
.nav-menu > li.has-submenu:hover .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.nav-menu .sub-menu li a {
    display: block;
    padding: 10px 20px;
    text-decoration: none;
    font-size: 1.6rem;
    white-space: nowrap;
    transition: background 0.4s ease, color 0.4s ease;
    color:#231815;
}

.nav-menu .sub-menu li a:hover {
    color:#E50012;
}

/* ===== サブメニューありアイコン（SVG背景画像） ===== */

.nav-menu > li.has-submenu:not(.menu-contact) > a {
    padding-right: 15px;
    display: flex;
    align-items: center;
}

.nav-menu > li.has-submenu:not(.menu-contact) > a::after {
    content: '';
    display: inline-block;
    width: 7px;
    height: 6px;
    margin-left: 8px;
    background-image: url('/wp-content/uploads/2026/06/btn_triwhite_ico.svg');
    background-repeat: no-repeat;
    background-size: 7px 6px;
    background-position: center;
    vertical-align: middle;
}

/* ===== お問い合わせボタン ===== */
.nav-menu > .menu-contact > a  {
    line-height: 1;
    padding:15px 20px 15px 24px;
    background-color: #ffffff;
    border-radius: 1000px;
    border: 4px solid #F7F3EE;
    display: flex;
    align-items: center;
    color:#231815;
    transition: 0.4s;;
}

.nav-menu > .menu-contact > a:after  {
    content: '';
    display: inline-block;
    width: 7px;
    height: 6px;
    margin-left: 8px;
    background-image: url('/wp-content/uploads/2026/06/btn_tri_ico.svg');
    background-repeat: no-repeat;
    background-size: 7px 6px;
    background-position: center;
    vertical-align: middle;
    transition: 0.4s;
}

.nav-menu > .menu-contact > a:hover  {
    background-color: #E50012;
    border: 4px solid #E50012;
    color:#ffffff !important;
}

.nav-menu > .menu-contact > a:hover:after  {
    background-image: url('/wp-content/uploads/2026/06/btn_triwhite_ico.svg');
}

.nav-menu > li.menu-contact .sub-menu {
    top: calc(100% + 8px); /* ボタンとの隙間を調整 */
}

.nav-menu > li.menu-contact > a::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 16px; /* 隙間の高さ分 */
}

.nav-menu > li:not(.has-submenu):not(.menu-contact) > a:hover {
    color: #E50012;
}

/* ===== ヘッダー スクロール表示・非表示 ===== */

.header_set {
    transition: opacity 0.4s ease, transform 0.4s ease, background-color 0.4s ease;
}

.wht_header {
    background-color: #ffffff !important;
}

.header_set.header-hidden {
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none; /* 非表示中はクリック無効 */
}



/* ===== 色CSS ===== */
.header_set .logo_img{
    transition: 0.4s;
    opacity: 0;
}

.header_set .c_logo{
    position: absolute;
    left: 0;
}


/* 黒ヘッダー */
.blk_header .w_logo{
    opacity: 1;
}

.blk_header .nav-menu > li > a {
    color: #fff;
}

/* ===== お問い合わせボタン ===== */
.blk_header .nav-menu > .menu-contact > a  {
    color:#231815;
}

/* 白ヘッダー用はここに追加 */
.wht_header .c_logo{
    opacity: 1;
}

.wht_header .nav-menu > li > a {
    color: #231815;
}

.wht_header .nav-menu > li.has-submenu:not(.menu-contact) > a::after {
    background-image: url('/wp-content/uploads/2026/06/btn_tri_ico.svg');
}

/* ===== お問い合わせボタン ===== */
.wht_header .nav-menu > .menu-contact > a  {
    color:#E50012;
    border: 1px solid #E50012;
}

.wht_header .nav-menu > .menu-contact > a:hover  {
    color:#ffffff;
}

/* SP版：お問い合わせ */
.sp_contact_btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    max-width: 40px;
    height: 28px;
    background-color: #ffffff;
    border: 2px solid #F7F3EE;
    border-radius: 1000px;
    position: relative;
}

.wht_header .sp_contact_btn {
    border: 2px solid #Ffffff;
    border-radius: 1000px;
    position: relative;
}

.sp_contact_btn img{
    position: absolute;
    opacity: 0;
    width: 15px;
    height: auto;
    transition: 0.5s;
}

.blk_header .sp_contact_btn .blkico {
    opacity: 1;

}

.wht_header .sp_contact_btn .whtico {

    opacity: 1;
}

/* 検索ボックス */

/* ボタンリセット */
.search-toggle-btn {
  background: #231815 !important;
  border: 1px solid #ffffff;
  padding: 11px 24px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 1000px;
  transition: 0.5s;
}

.search-toggle-btn:hover {
  opacity: 0.8;
}

.search-toggle-btn svg{
    color:#ffffff;
}

/* 通常時：虫眼鏡を表示、×を非表示 */
.search-toggle-btn .icon-search {
  display: block;
}
.search-toggle-btn .icon-close {
  display: none;
}

/* アクティブ時：虫眼鏡を非表示、×を表示 */
.search-toggle-btn.is-active .icon-search {
  display: none;
}
.search-toggle-btn.is-active .icon-close {
  display: block;
}

/* 検索コンテナ */
.search_container {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.search_container.is-open {
  max-height: 200px;
}

@media screen and (max-width:1024px){
.search-toggle-btn {
        display: flex;
        width: 100%;
        max-width: 40px;
        height: 28px;
        border: none;
        justify-content: center;
        align-items: center;
        border-radius: 100px;
        padding: 0;
    }

.search-toggle-btn img{
    min-width: 15px;
            width: 15px;
}
}

/*トップページ*/
/*MV*/
/* ============================================================
   SPLIT SLIDER — CSS（中央縦線対策版）
   Code Snippets の CSS 欄に貼り付けてください
   ============================================================ */

/* ─── 共通 ─────────────────────────────────────────────── */
.ss-wrap {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.ss-inner {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  overflow: hidden;
}

.ss-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.30);
  z-index: 3;
  pointer-events: none;
}

.ss-slide {
  overflow: hidden;
}

.ss-slide img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.ss-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  background: rgba(255, 255, 255, 0.8);
  width: 0%;
  z-index: 20;
  pointer-events: none;
}

/* ─── PC版 ──────────────────────────────────────────────── */
.ss-pc {
  padding-top: 63.89%;
}

.ss-pc .ss-inner {
  flex-direction: row;
}

.ss-pc .ss-panel {
  position: relative;
  /* 50.15%にして左右を0.15%ずつオーバーラップ → 中央の隙間を埋める */
  width: 50.15%;
  height: 100%;
  overflow: hidden;
  flex-shrink: 0;
}

/* 右パネルを左に0.15%引き寄せてオーバーラップさせる */
.ss-pc .ss-right {
  transform: scaleY(-1);
  margin-left: -0.3%;
}

.ss-pc .ss-right .ss-slide img {
  transform: scaleY(-1);
}

/* ─── SP版 ──────────────────────────────────────────────── */
.ss-sp {
  padding-top: 170.67%;
}

.ss-sp .ss-inner {
  flex-direction: column;
}

.ss-sp .ss-panel {
  position: relative;
  width: 100%;
  /* 50.15%にして上下を0.15%ずつオーバーラップ */
  height: 50.15%;
  overflow: hidden;
  flex-shrink: 0;
}

/* 下パネルを上に0.15%引き寄せてオーバーラップ */
.ss-sp .ss-bottom {
  transform: scaleX(-1);
  margin-top: -0.3%;
}

.ss-sp .ss-bottom .ss-slide img {
  transform: scaleX(-1);
}

/*リンクホバー*/
/* ========================================
   ホバーカードリンク（ぬるっと強化版）
======================================== */

/* カード全体 ＝ 背景画像エリア */
.hover-card-link {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  text-decoration: none;

  /* 高さは用途に合わせて調整 */
  aspect-ratio: 640/ 270;

  background-size: cover;
  background-position: center;

  transition:
    box-shadow 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform  0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.hover-card-link:hover {
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
  transform: translateY(-3px);
}

/* 背景画像ズーム用擬似要素 */
.hover-card-link::before {
  content: '';
  position: absolute;
  inset: 0;
  background: inherit;
  background-size: cover;
  background-position: center;
  transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  z-index: 0;
}

.hover-card-link:hover::before {
  transform: scale(1.06);
}

/* ========================================
   グラデーション層（固定・動かない）
======================================== */

.hover-card__gradient {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
  height: 55%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0) 100%);
  pointer-events: none;
}

/* ========================================
   テキスト層（底辺30px固定）
======================================== */

.hover-card__footer {
  position: absolute;
  bottom: 30px;
  left: 18px;
  right: 18px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ========================================
   見出し（常に表示）
======================================== */

.hover-card__title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  color: #ffffff;
}

/* ========================================
   概要テキスト（ぬるっとフェードイン）
======================================== */

.hover-card__desc {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(10px);

    transition:
        max-height 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        opacity    0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.05s,
        transform  0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.05s;

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

.hover-card__desc p{
    font-size: 1.6rem;
    line-height: 1.6;
    color: #ffffff;
    max-width:400px;
    width:90%;
}

.hover-card__desc img{
    max-width: 40px;
    width: 10%;
}

.hover-card-link:hover .hover-card__desc {
  max-height: 300px;
  opacity: 1;
  transform: translateY(0);
}


/* ========================================
   画像を指定する
======================================== */
.top_solution_list01{
    background-image: url('/wp-content/uploads/2026/05/solution01.jpg');
}

.top_solution_list02{
    background-image: url('/wp-content/uploads/2026/06/solution02.jpg');
}

.top_solution_list03{
    background-image: url('/wp-content/uploads/2026/05/solution03.jpg');
}

.top_solution_list04{
    background-image: url('/wp-content/uploads/2026/06/solution04-1.jpg');
}

@media screen and (max-width:1024px){
    .hover-card-link {
  /* 高さは用途に合わせて調整 */
  aspect-ratio: 640/ 370;

}

.hover-card__desc p {
    font-size: 1.4rem;
}
}

/* ============================================================
   事例紹介スライダー CSS
   追加CSS または 外部CSSファイルに貼り付けてください
   ============================================================ */

/* ----------------------------------------------------------
   ★ 表示枚数の設定（ここを変更するだけでOK）
   PC      : --cs-slides-per-view: 4.8
   タブレット: --cs-slides-per-view-tablet: 2.8
   スマホ   : --cs-slides-per-view-sp: 1.8
   ---------------------------------------------------------- */
:root {
    --cs-slides-per-view:        4.8;  /* ★ PC表示枚数 */
    --cs-slides-per-view-tablet: 2.8;  /* ★ タブレット表示枚数 */
    --cs-slides-per-view-sp:     1.8;  /* ★ スマホ表示枚数 */
    --cs-slide-gap:              24px; /* ★ スライド間のギャップ */
    --cs-slide-gap-sp:           12px; /* ★ スマホ時のギャップ */
    --cs-arrow-size:             48px; /* ★ 矢印ボタンのサイズ */
}

/* ----------------------------------------------------------
   ラッパー
   ---------------------------------------------------------- */
.cs-slider-wrapper {
    position: relative;
    width: 100%;
    text-decoration: none !important;
}

/* ----------------------------------------------------------
   スライダー外枠（はみ出し非表示）
   ---------------------------------------------------------- */
.cs-slider-track-outer {
    overflow: hidden;
    width: 100%;
}

/* ----------------------------------------------------------
   スライドトラック（横並び）
   ---------------------------------------------------------- */
.cs-slider-track {
    display: flex;
    gap: var(--cs-slide-gap);
    transition: transform 0.4s ease;
    will-change: transform;
    /* JS側で transform: translateX() を制御 */
}

/* ----------------------------------------------------------
   個別スライド
   ---------------------------------------------------------- */
.cs-slide {
    flex: 0 0 calc(
        (100% - var(--cs-slide-gap) * (var(--cs-slides-per-view) - 1))
        / var(--cs-slides-per-view)
    );
    min-width: 0;
}

/* ----------------------------------------------------------
   記事カード（全体リンク）
   ---------------------------------------------------------- */
.cs-card {
    display: flex;
    overflow: hidden;
    flex-direction: column;
    gap: 16px;
}

/* ----------------------------------------------------------
   アイキャッチ画像エリア
   ---------------------------------------------------------- */
.cs-card__thumb {
    overflow: hidden;
    aspect-ratio: 240 / 160;        /* ★ 画像のアスペクト比 */
    border-radius: 8px;
    background-color: #ffffff;
}

.cs-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease; /* ★ ホバー拡大のアニメーション速度 */
}

/* ホバー時にアイキャッチを拡大 */
.cs-card:hover .cs-card__img {
    transform: scale(1.06);       /* ★ 拡大率（1.0 = 等倍） */
}

/* 画像なし時のプレースホルダー */
.cs-card__img--noimg {
    background: #ddd;
}

/* ----------------------------------------------------------
   テキスト情報エリア
   ---------------------------------------------------------- */
.cs-card__body {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* カテゴリーラベル */
.cs-card__cats {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.cs-card__cat {
    display: inline-block;
    font-size: 1.2rem;              /* ★ カテゴリー文字サイズ */
    padding: 2px 6px;
    border-radius: 4px;
    background: #7B7272;          /* ★ カテゴリーラベル背景色 */
    color: #ffffff               /* ★ カテゴリーラベル文字色 */
}

/* タイトル */
.cs-card__title {
    margin: 0;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.5;
    color: #ffffff;
}

/* ----------------------------------------------------------
   矢印ナビゲーション
   ---------------------------------------------------------- */

   .cs-arrow {
    background: none !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    -webkit-appearance: none;
    appearance: none;
}

.cs-arrow:hover,
.cs-arrow:focus,
.cs-arrow:active {
    background: none !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

.cs-arrow--prev{
    left:3%
}

.cs-arrow--next{
    right:3%
}

.cs-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--cs-arrow-size);
    height: var(--cs-arrow-size);
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    transition: opacity 0.2s ease;
    position: absolute;
    top: 40%;
    transform: translateY(-50%);
    z-index:1;
}

.cs-arrow:hover {
    opacity: 0.7;
}

/* 端まで到達時に矢印を薄く */
.cs-arrow.is-disabled {
    opacity: 0.3;
    pointer-events: none;
}

.cs-arrow__img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* ----------------------------------------------------------
   レスポンシブ：タブレット（1024px以下）
   ★ ブレークポイントを変更する場合はmax-widthの値を修正
   ---------------------------------------------------------- */
@media (max-width: 1024px) {
    .cs-slide {
        flex: 0 0 calc(
            (100% - var(--cs-slide-gap) * (var(--cs-slides-per-view-tablet) - 1))
            / var(--cs-slides-per-view-tablet)
        );
    }
}

/* ----------------------------------------------------------
   レスポンシブ：スマホ（767px以下）
   ★ ブレークポイントを変更する場合はmax-widthの値を修正
   ---------------------------------------------------------- */
@media (max-width: 767px) {
    .cs-slider-track {
        gap: var(--cs-slide-gap-sp);
    }
    .cs-slide {
        flex: 0 0 calc(
            (100% - var(--cs-slide-gap-sp) * (var(--cs-slides-per-view-sp) - 1))
            / var(--cs-slides-per-view-sp)
        );
    }
}

/*太陽技法堂の強み*/
.p_ct_mv{
    position: absolute;
}

.p_ct_mv_catch{
    position: absolute;
    bottom:0;
}

@media screen and (max-width:767px){
    .p_ct_mv,.p_ct_mv_catch{
    position: static;
}
}

/*コラム一覧*/
/*一番上のカードを大きくする*/
.column_grid .jet-listing-grid__items .jet-listing-grid__item:first-child {
    max-width: 100% !important;
    flex: 0 0 100% !important;
}

/*コラムカテゴリー*/
.tax-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.tax-list__item {
    border-bottom: 1px solid #e7e7e7;
}

.tax-list__parent {
    background-color: #7B7272;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px;
}

.tax-list__link {
    display: block;
    color: #ffffff;
    font-weight: bold;
    line-height: 1;
    flex: 1;
    transition: 0.5s;
}

.tax-list__link:hover {
    color: #E50012;
}

.tax-list__toggle {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tax-list__icon {
    width: 20px;
    height: 20px;
    transition: transform 0.3s;
}

.tax-list__toggle[aria-expanded="true"] .tax-list__icon {
    transform: rotate(-180deg);
}

.tax-list__children {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
    background: #f7f3ee;
}

.tax-list__children.is-open {
    display: block;
}

.tax-list__child-item .tax-list__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px;
    color: #231815;
    font-weight: normal;
    font-size: 1.6rem;
    border-bottom:1px solid #ABABAB;
    transition: 0.4s;
}

.tax-list__child-item .tax-list__link:hover {
    color: #E50012;
}

.tax-list__child-item:last-child .tax-list__link{
    border-bottom: none !important;
}

.tax-list__child-icon {
    width: 10px;
    height: 9px;
    flex-shrink: 0;
}

.tax-list__toggle,
.tax-list__toggle:hover,
.tax-list__toggle:focus,
.tax-list__toggle:active,
.tax-list__toggle:focus-visible {
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    color: inherit !important;
    padding: 0 !important;
    margin: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    transition: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

/*コラムタグ一覧*/

.tag-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tag-list__item {
    display: flex;
}

.tag-list__link::before {
    content: '#';
    padding-right:3px;
}

.tag-list__link {
    display: block;
    padding: 2px 12px;
    text-decoration: none;
    color: #7B7272;
    border: 1px solid #7B7272;
    border-radius: 100px;
    transition: 0.5s;
    font-size:1.2rem;
    line-height:1.6;
}

.tag-list__link:hover {
    color: #ffffff;
    background-color: #7B7272;
}

/* 検索ボックス */
.column-search-form {
    display: flex;
    align-items: center;
    padding: 12px 26px 12px 16px;
    border: 1px solid #544C4C;
}

.column-search-form input[type="text"] {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size:1.6rem;
}

.column-search-form button img {
    display: block;
}

/* プレースホルダーの文字色（未入力時） */
.column-search-form input[type="text"]::placeholder {
    color: #ABABAB;
}

/* 入力文字の色 */
.column-search-form input[type="text"] {
    color: #231815;
}

/*コラム詳細*/
.column_info a{
    transition: 0.5s;
}

.entry-content h2{
    font-size:2.6rem;
    font-weight:bold;
    color:#544C4C;
    line-height:1.6;
    margin-bottom:48px;
}

.entry-content h2:before{
    content: '';
    display: inline-block;
    width: 16px;
    height: 2px;
    margin-right: 10px;
    margin-bottom:0.2em;
    background-image: url('/wp-content/uploads/2026/05/midashi.svg');
    background-repeat: no-repeat;
    background-size: 16px 2px;
    background-position: center;
    vertical-align: middle;
}

.entry-content h3{
    font-size:2rem;
    font-weight:bold;
    color:#E50012;
    line-height:1.6;
    margin-bottom:8px;
}

.entry-content h4{
    font-size:1.6rem;
    font-weight:bold;
    line-height:1.6;
    margin-bottom:8px;
}

.entry-content p{
    padding-bottom:40px;
}

.entry-content p:last-of-type {
    padding-bottom: 0;
}

.entry-content img{
    width:100%;
}

.entry-content ul{
    margin-left:1.1em;
    display: flex;
    flex-direction: column;
    gap:10px;
    margin-bottom: 40px;
}

.entry-content ul li{
    list-style-type: square;
    font-weight:bold;
}

@media screen and (max-width:767px){
    .entry-content h3{
    font-size:1.6rem;
    margin-bottom:24px;
}

.entry-content h3:before{
    width: 8px;
    height: 2px;
    margin-right: 10px;
    background-size: 8px 2px;
}

.entry-content h4{
    font-size:1.4rem;
}

.entry-content h5{
    font-size:1.4rem;
}

.entry-content p{
    padding-bottom:20px;
}
.entry-content ul{
    gap:5px;
    margin-bottom: 20px;
}

}

/* 目次 */
.toc_set a{
    color:#231815;
    font-size:1.6rem;
    transition: 0.5s;
    display: flex;
    align-items: flex-start;
    gap:4px;
    font-family: "noto sans jp";
}

.toc__number {
    flex-shrink: 0;
}

.toc_set a .toc__text {
    text-decoration: underline;
    text-decoration-color: #231815;
    text-underline-offset: 4px;
    transition: 0.5s;
}

.toc_set a:hover .toc__text {
    text-decoration-color: #E50012;
}

.toc_set a:hover{
    color:#E50012;
}

.toc__list--h3{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap:10px;
}

.toc__item--h3:not(:last-child) {
    padding-bottom:30px;
}

.toc__item--h3{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap:10px;
}

.toc__item--h3 a{
    font-weight:bold;
}

.toc__list--h4{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap:8px;
}

.toc__item--h4{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap:10px;
}

.toc__item--h4{
    padding-left: 1.2em;
}

.toc__item--h4 a{
    font-weight:normal;
}

.toc__list--h5{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap:4px;
}

.toc__item--h5{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap:10px;
}

.toc__item--h5{
    padding-left: 1.8em
}

.toc__item--h5 a{
    font-weight:normal;
    font-size: 1.4rem;
}


/*よくあるご質問*/

.faq_set details{
    border-bottom:1px solid #ABABAB !important;
}

.faq_set .e-n-accordion-item-title-text{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 16px;
}

.faq_set .e-n-accordion-item-title-text span{
    display: block;
    line-height: 1;
    font-size:1.6em;
    color:#E50012;
    padding-bottom: 2px;
}

.e-opened,.e-closed{
    width:40px !important;
}

.e-opened svg,.e-closed svg{
    width:100%;
}

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

.e-opened,.e-closed{
    width:20px !important;
}

.e-opened svg,.e-closed svg{
    width:100%;
}
}

/* お問い合わせフォーム */
.e-form__buttons{
    max-width: 222px !important;
    margin: 0 auto;
}

.none_text{
    visibility: hidden;
}

.req,.any{
    display: inline-block;
    padding: 4px;
    border-radius: 4px;
    margin-left:8px;
    color:#ffffff;
    line-height:1;
    font-size: 0.8em;
}

.req{
    background-color: #E50012;
}

.any{
    background-color: #544C4C;
}

.cont_attention{
    display: flex;
    flex-direction: column;
    gap:12px;
}

.cont_attention h4{
    font-weight: bold;
    font-size: 1.6rem;
}

.cont_attention p{
    font-size: 1.6rem;
    line-height:2.4;
    text-align: justify;
}

.cont_attention a,.b_attention a{
    color:#E50012 !important;
    border-bottom: 1px solid;
    transition: 0.5s;

}

.cont_attention span{
    font-size:0.9em;

}

.cont_attention a:hover,.b_attention a:hover{
    opacity: 0.8;

}

@media screen and (max-width:767px){
.cont_attention p{
    font-size: 1.4rem;
    line-height:2;
}
}

/* ボタンアイコン調整 */
.form .elementor-button-icon svg{
    width:24px;
}
.form .elementor-button-icon svg circle{
    stroke:#EDBFA4 !important;
    fill: #948888 !important
}

.form .elementor-button:hover .elementor-button-icon svg path{
    fill:#ffffff !important;
}

.form .elementor-button:hover .elementor-button-icon svg circle{
    stroke:#ffffff !important;
    fill: #E50012 !important
}

.form .elementor-button:hover .elementor-button-icon svg path{
    fill:#ffffff !important;
}


/* Email確認フィールド：エラー時の赤枠 */
.email-confirm-error input#form-field-email_confirm {
    border-color: #e74c3c !important;
}

.email-confirm-error-msg {
    color: #e74c3c;
    font-size: 13px;
    margin-top: 4px;
    display: none;
}

.email-confirm-error .email-confirm-error-msg {
    display: block;
}

.email-confirm-error input#form-field-email_confirm {
    border-color: #e74c3c !important;
}

.email-confirm-error-msg {
    color: #e74c3c;
    font-size: 13px;
    margin-top: 4px;
    display: none;
}

.email-confirm-error .email-confirm-error-msg {
    display: block;
}

/* 必須フィールドのエラー表示 */
.field-has-error .elementor-field {
    border-color: #e74c3c !important;
}

.field-error-msg {
    color: #e74c3c;
    font-size: 13px;
    margin-top: 4px;
    min-height: 0;
}

.form .elementor-field-type-acceptance .field-error-msg{
    margin: 0 auto;
}

/* 送信ボタン：初期は半透明 */
.elementor-form .elementor-button {
    opacity: 0.4;
}

/* 全項目が正しく入力されたら濃く表示 */
.elementor-form .elementor-button.is-form-valid {
    opacity: 1;
}


.elementor-field-type-cf_turnstile .elementor-field{
    background-color: #F7F3EE !important;
}

.form .elementor-field-type-cf_turnstile{
	justify-content: center;
}

/* ===== カスタムチェックボックス（選択肢用のみ） ===== */
.form .elementor-field-type-checkbox .elementor-field-subgroup label{
    font-weight: normal !important;
}
.form .elementor-field-type-checkbox .elementor-field-subgroup{
    gap:12px;
}

.form .elementor-field-type-checkbox .elementor-field-option {
    position: relative;
    display: inline-flex;
    align-items: center;
}

/* 元のinputは見えなくするが、クリック判定とフォーカスは残す */
.form .elementor-field-type-checkbox .elementor-field-option input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 18px;
    height: 18px;
    margin: 0;
    cursor: pointer;
    z-index: 2;
}

/* 独自の四角（チェックボックス本体） */
.form .elementor-field-type-checkbox .elementor-field-option label {
    position: relative;
    padding-left: 34px;
    cursor: pointer;
    line-height: 1.1;
    display: inline-block;
}

.form .elementor-field-type-checkbox .elementor-field-option label::before {
    content: "";
    position: absolute;
    left: 0;
    top: 45%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    background-color: #FFFFFF;
    border-radius: 4px;
}

/* チェックマーク（チェックが入った時だけ表示） */
.form .elementor-field-type-checkbox .elementor-field-option input[type="checkbox"]:checked + label::before {
    background-color: #E50012; /* チェック時の背景色 */
    border-color: #555555;
}

.form .elementor-field-type-checkbox .elementor-field-option label::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 40%;
    transform: translateY(-50%) rotate(45deg);
    width: 5px;
    height: 10px;
    border: solid #ffffff;
    border-width: 0 2px 2px 0;
    opacity: 0;
    transition: opacity 0.15s ease;
}

/* チェック時にチェックマークを表示 */
.form .elementor-field-type-checkbox .elementor-field-option input[type="checkbox"]:checked + label::after {
    opacity: 1;
}

/* キーボード操作時のフォーカスリング（アクセシビリティ用） */
.form .elementor-field-type-checkbox .elementor-field-option input[type="checkbox"]:focus-visible + label::before {
    outline: 2px solid #999999;
    outline-offset: 2px;
}

/* ===== カスタムチェックボックス（利用規約同意用） ===== */
.form .elementor-field-type-acceptance label{
    font-weight: normal !important;
}
.form .elementor-field-type-acceptance .elementor-field-subgroup{
    gap:12px;
}
.form .elementor-field-type-acceptance .elementor-field-option {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
/* 元のinputは見えなくするが、クリック判定とフォーカスは残す */
.form .elementor-field-type-acceptance .elementor-field-option input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 18px;
    height: 18px;
    margin: 0;
    cursor: pointer;
    z-index: 2;
}
/* 独自の四角（チェックボックス本体） */
.form .elementor-field-type-acceptance .elementor-field-option label {
    position: relative;
    padding-left: 34px;
    cursor: pointer;
    line-height: 1.1;
    display: inline-block;
}
.form .elementor-field-type-acceptance .elementor-field-option label::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    background-color: #FFFFFF;
    border: 1px solid #CCCCCC;
    border-radius: 0;
}
/* チェックマーク（チェックが入った時だけ表示） */
.form .elementor-field-type-acceptance .elementor-field-option input[type="checkbox"]:checked + label::before {
    background-color: #E50012;
}
.form .elementor-field-type-acceptance .elementor-field-option label::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 45%;
    transform: translateY(-50%) rotate(45deg);
    width: 5px;
    height: 10px;
    border: solid #ffffff;
    border-width: 0 2px 2px 0;
    opacity: 0;
    transition: opacity 0.15s ease;
}
/* チェック時にチェックマークを表示 */
.form .elementor-field-type-acceptance .elementor-field-option input[type="checkbox"]:checked + label::after {
    opacity: 1;
}
/* キーボード操作時のフォーカスリング（アクセシビリティ用） */
.form .elementor-field-type-acceptance .elementor-field-option input[type="checkbox"]:focus-visible + label::before {
    outline: 2px solid #999999;
    outline-offset: 2px;
}

.form .elementor-form-fields-wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}

@media screen and (max-width:767px){
.form .elementor-field-group {
    padding-right: calc(15px / 2) !important;
    padding-left: calc(15px / 2) !important;
    margin-bottom: 30px !important;
}

.form .elementor-field-group > label {
    padding-bottom: 10px !important;
}
}

.elementor-form .elementor-button .elementor-form-spinner {
    position: absolute;
    left: 50%;
    top: 100%;
    transform: translate(-50%, 8px);
}

.elementor-form .elementor-button .elementor-button-content-wrapper {
    position: relative;
}



/*便利なCSS*/
/* ブラウザ幅により、表示非表示を切り替えるCSS：クラス名一覧
◆パソコンのみ表示する
pconly
◆タブレットのみ表示する
tbonly
◆スマホのみ表示する
sponly
◆パソコン～タブレットのみ表示する
pctbonly
◆タブレット～スマホのみ表示する
tbsponly
◆パソコン・スマホのみ表示する
pcsponly
 */
/* パソコン幅 */
    /* パソコンのみ表示する */
    .npconly{
        display: none !important;
    }
    .pconly{
        display: block !important;
    }
    /* タブレットのみ表示する */
    .tbonly{
        display: none !important;
    }
    /* スマホのみ表示する */
    .sponly{
        display: none !important;
    }
    /* パソコン～タブレットのみ表示する */
    .pctbonly{
        display: block !important;
    }
    /* タブレット～スマホのみ表示する */
    .tbsponly{
        display: none !important;
    }
    /* パソコン・スマホのみ表示する */
    .pcsponly{
        display: block !important;
    }
    @media screen and (max-width:1024px){
        .npconly{
            display: block !important;
        }
    }
/* タブレット幅 */

@media screen and (max-width:1024px){
    /* パソコンのみ表示する */
    .pconly{
        display: none !important;
    }
    /* タブレットのみ表示する */
    .tbonly{
        display: block !important;
    }
    /* タブレット～スマホのみ表示する */
    .tbsponly{
        display: block !important;
    }
    /* パソコン・スマホのみ表示する */
    .pcsponly{
        display: none !important;
    }
}
/* スマホ幅 */
@media screen and (max-width:767px){
    /* タブレットのみ表示する */
    .tbonly{
        display: none !important;
    }
    /* スマホのみ表示する */
    .sponly{
        display: block !important;
    }
    /* パソコン～タブレットのみ表示する */
    .pctbonly{
        display: none !important;
    }
    /* パソコン・スマホのみ表示する */
    .pcsponly{
        display: block !important;
    }
}

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

    .kirikae_pc{display: none !important;}
    .kirikae_sp{display: block !important;}

    .search-toggle-btn {
        display: flex;
        width: 100%;
        max-width: 40px;
        height: 28px;
        border: none;
        justify-content: center;
        align-items: center;
        border-radius: 100px;
        padding: 0;
    }

.search-toggle-btn img{
    min-width: 15px;
            width: 15px;}
}