@charset "UTF-8";
#wpadminbar {
    display: none;
}

html {
    margin-top: 0px !important;
}

@media screen and ( max-width: 782px) {
    html {
        margin-top: 0px !important;
    }
}
textarea{
    height: calc( 1.5em * 6 );
    line-height: 1.5;
}

/* 画面幅調整 */
/* 固定ページのみコンテンツ部は最大幅とする */
.page .main {
    padding-left: 0px !important;
    padding-right: 0px !important;
}

.page #content .wrap {
    width: 100%;
}
.page .content ,
.page .content .main,
.page .content .main .entry-content{
    margin-top: 0;
    padding-top: 0;
}

/* サイトカラー */
.color-red {
    color: #cb0700 !important;
}
.color-darkblue {
    color: #002542 !important;
}

/* リンク */
a,
a:link:hover {
    /* アンダーライン無し */
    text-decoration: none;
}


/* テキストボックス */
main .search-edit,
input[type="text"] {
    height: 44px;
}


/* コンボボックス */
.baseForm select,
.baseForm input[type="text"] {
    height: 44px;
}

#select_hour {
    width: 149px;
}


/* 予約iframe */
.reserve-frame {
    width: 100%;
    height: 100%;
}


/*beforeカラー設定１*/
.bf-color01:before {
    background: #c5dfff !important;
}


/* 見出し */
.article h2 {
    position: relative;
    height: 49px;
    padding: 10px;
    font-size: calc(23px + 4 * (100vw - 320px)/680);
    font-weight: 100;
    background-color: transparent;
    color: #002542;
    line-height: 0.7;
    padding-left: 40px; 	/* 三角形の幅に合わせて左側に余白を追加(文字の位置) */
}
/* 左側の直角三角形 */
.article h2:before {
    content: ''; 		/* コンテンツを空に */
    position: absolute;	/* 絶対位置指定 */
    bottom: 6px; 		/* 下端からの図形の位置 */
    left: -11px; 			/* 左端からの図形の位置 */
    border-style: solid;
    border-width: 64px 0 9px 14px; /* 上、右、下、左のボーダー幅 → (上の点の位置,不明,右下の点のx,右下の点のy) */
    border-color: transparent transparent transparent #002542;	/* 図形の色（紺色） */
    z-index: 1; 		/* 文字より手前に表示 */
    transform: rotate(45deg); 	/* 45度回転(角を右下に持ってくる) */
    transform-origin: 0 100%; 	/* 回転の中心点を左下に設定 */
}
.article h2 span {
    border-bottom: 2px solid #c6c6c6;
    width: 100%;
    position: absolute;
    padding-bottom: 10px;
}
.article h2 code {
    border-bottom: 2px solid #c6c6c6;
    width: 100%;
    position: absolute;
    padding-bottom: 10px;
}

.article h3 {
    margin-top: 1.0em;  /* style.css の一括設定を上書き */
    border: none;
    font-size: 2.0em;   /* 文字の大きさ〇倍 */
}

/* 共通 */
/* 見出し h-01 */
.article h2.h-01 {
    border-left: 29px solid #00738C;
    margin-bottom: 3em;
}
.article h2.h-01:before {
}
.article h2.h-01 span:after {
    content: '';
    position: absolute;
    font-size: 100%;
    font-weight: 600;
    left: -21px;
    top: 44px;
    width: 100% !important;
    height: 13px;
    border: none;
    z-index: 2;
}
/* 見出し h-02 */
.article .h-02 h2 {
    margin-top: 0px;
    line-height: 10px;
    padding-left: 17px;
    margin-bottom: 0;
}
.article .h-02 h2 span {
    padding-bottom: 19px;
    padding-left: 26px;
}
.article .h-02 .wp-block-group{
    width: fit-content;
    padding: 0 34px;
}
.article .h-02 h2:before {
}
.article .h-02 p {
    position: relative;
    top: -16px;
    font-size: 132%;
    font-weight: 600;
    border: none;
    line-height: normal;
}
.article .h-02 p:first-letter {
    font-size: 120%;
    /* color: #00738C; */
}

/* トップページ */
/* トップページ */
/* IDがpage-topの要素内にあるh2要素にスタイルを適用 */
.article #page-top h2 {
    border-left: 29px solid #00738C; /* h2要素の左側に29px幅の#00738C色のボーダーを追加 */
    margin-bottom: 3em; /* h2要素の下に3emのマージンを追加 */
}
.article #page-top h2 span {
    border: none; /* span要素のボーダーを削除 */
}
/* IDがpage-topの要素内にあるh2要素の子要素spanの後に擬似要素:afterを追加 */
.article #page-top h2 span:after {
    content: ''; /* 擬似要素の内容を空に設定 */
    position: absolute; /* 擬似要素の位置を絶対位置に設定 */
    font-size: 100%; /* 擬似要素のフォントサイズを親要素と同じに設定 */
    font-weight: 600; /* 擬似要素のフォントウェイトを600に設定 */
    left: -20px; /* 擬似要素の左位置を親要素から-20pxに設定 */
    top: 43px; /* 擬似要素の上位置を親要素から43pxに設定 */
    width: 100% !important; /* 擬似要素の幅を親要素の幅と同じに強制設定 */
    height: 13px; /* 擬似要素の高さを13pxに設定 */
    border: none; /* 擬似要素のボーダーを削除 */
    z-index: 2; /* 擬似要素のz-indexを2に設定し、前面に表示 */
    color: #7d7d7d70; /* 擬似要素のテキストカラーを#7d7d7d70に設定（おそらく透明度を含む） */
}
/* bl02 */
/* IDがpage-topの要素内にあるクラスbl02のh2要素の子要素spanの後に擬似要素:afterを追加 */
.article #page-top .bl02 h2 span:after {
    content: 'Lineup'; /* 擬似要素の内容を'Lineup'に設定 */
}

/* page-top h3 */
h3 {
    text-align: right;  /* テキストを右寄せにする */
}

/* bl03 */
#page-top .bl03 {
    display: grid;
    position: relative;
}
#page-top .bl03 .h-gr{
    text-align: -webkit-right;
    border-bottom: 5px solid #000;
}
.article #page-top .bl03 h2 {
    border-left: 29px solid #ff0000;
    margin-bottom: 1.6em;
    max-width: fit-content;
}
.article #page-top .bl03 h2 span{
    position: inherit;
}
#page-top .bl03 .dahua-logo{
    position: absolute;
    text-align: left;
}
@media screen and (max-width:1280px) {
    #page-top .bl03 .dahua-logo{
    }
    #page-top .bl03 .dahua-logo img{
        width: 70%;
    }
    .article #page-top .bl03 h2 {
        margin-top: 1.8em;
    }
}
@media screen and (max-width:1023px) {
    #page-top .bl03 .dahua-logo{
        position: static;
        text-align: inherit;
    }
    #page-top .bl03 .dahua-logo img{
        width: 60%;
    }
    .article #page-top .bl03 h2 {
        margin-top: 0.8em;
        margin-bottom: 0.3em;
    }
    .article #top-lineup h2 {
        margin-bottom: 0em;
    }
}
#page-top .bl03 .gr02{
    padding-top: 1.4rem;
    padding-bottom: 1.4rem;
}

/* bl04 */
#gr-items{
    padding-top: 20px;
    padding-bottom: 46px;
    background-color: #002032;
}
#gr-items .ms-image{
height: 50%;
}
.article #page-top .bl04 h2 span:after {
    content: 'Items';
}

/* bl05 */
.bl05 .h-02{
    margin-bottom: 0px;
}
#gr-news-contents .news-row{
    border-top:1px solid #d7d7d7;
    padding: 16px 2vw;
    margin-bottom: 6px;
}
#gr-news #gr-news-contents .news-row:nth-child(1){
    border-top:none;
}

/* 会社概要 */
#page-company{
}
/* bl01 */
.article #page-company .bl01 h2 span:after {
    content: 'About us';
}
/* bl02 */
.article #page-company .bl02 .article p{
    margin-bottom: 0.8em;
}
/* bl03 */
.article #page-company .bl03 h2{
    border-left: none;
}
.bl03 .row{
    border-bottom: 2px solid #ededed;
}

/* 問合せフォーム */
/* 必須 */
.article #page-contact .required{
    color: #f00;
    font-weight: 300;
    padding-left: 10px;
}
.article #page-contact h2{
    height: 40px;
}
.article #page-contact h2.h-01::after {
    content: 'Contact';
    position: absolute;
    font-size: 100%;
    font-weight: 600;
    left: -20px;
    top: 43px;
    width: 100% !important;
    height: 13px;
    border: none;
    z-index: 2;
    color: #7d7d7d70;
}
.article #page-contact .wpcf7-form-control{
    display: grid;
}
.article #page-contact label {
    font-weight: bold;
}
.article #page-contact .wpcf7-list-item-label{
    font-weight: 100;
}
.article #page-contact .has-spinner.wpcf7-submit{
    margin-top: 5.5rem !important;
    background: #00738C;
    color: #fff;
    width: 40%;
    font-size: x-large;
    margin:  0 auto;
}
@media screen and (max-width:782px) {
    .custom-form-input {
        width: 100%;
    }
}

/* サブページ */
#page-sub .wp-block-image figcaption{
    text-align: center;
    font-size: 1.2rem;
}
@media screen and (max-width:1023px) {
    .article #page-sub .h2-left-bottom-01{
        line-height: 1.0;
    }
    .article #page-sub .product-model{ 
        font-size: 33px;
        line-height: 1.2;
    }
}

/* よくあるご質問 */
#page-faq .res-margin-bottom-l{
    margin: 0px;
}
/* トグルグループ */
#page-faq .bl-toggle{
    margin-bottom: 0;
}

/****************** 固定ページ ******************/
/* 固定ページアピールエリア */

.page-appeal .wp-block-group__inner-container {
    width: 100%;
    background-position: right;
    background-repeat: no-repeat;
    left: inherit;
    height: 640px;
    right: 0;
    background-size: revert;
    display: grid;
    align-items: center;
}

.page-appeal-inner {
    background: #ffffff80;
    color: black;
    border: none;
}

.page-appeal-inner .column-wrap {
    display: flex;
    justify-content: space-between;
    position: relative;
    margin: 0;
    align-items: flex-end;
}
.page-appeal-inner hr.wp-block-separator {
    margin-bottom: 0px;
}
.page-appeal .wp-block-cover__inner-container {
    padding: 0px 0px 20px 1.5vw;
}
.page-appeal-inner .column-left {
    margin-bottom: 0;
}

.page-appeal-inner .column-right {
    padding-bottom: 11px;
}

.page-appeal-inner-left {}

.page-appeal-inner-right {}

/* サービス */
#post-114 .page-appeal-inner {
    background: transparent;
    color: #FFF;
    border: none;
}
/*↑↑↑↑↑↑↑↑↑↑ 固定ページ ↑↑↑↑↑↑↑↑↑↑*/

/* ↓↓↓↓↓↓↓↓↓ ブログページ ↓↓↓↓↓↓↓↓↓↓ */
　

/* ↑↑↑↑↑↑↑↑↑ ブログページ ↑↑↑↑↑↑↑↑↑↑ */

/* フォントファミリー */
@font-face {
    font-family: 'NotoSansJP';
    src: url("/wp-content/themes/cocoon-child-master/fonts/NotoSansJP.woff") format('woff');
    font-style: normal;
}
@font-face {
    font-family: 'Oswald';
    src: url("/wp-content/themes/cocoon-child-master/fonts/oswald-font-wght.woff") format('woff');
}
@font-face {
    font-family: 'zkgnew-regular';
    src: url("/wp-content/themes/cocoon-child-master/fonts/zkgnew-regular.woff") format('woff');
}
@font-face {
    font-family: 'zkgnew-medium';
    src: url("/wp-content/themes/cocoon-child-master/fonts/zkgnew-medium.woff") format('woff');
}
@font-face {
    font-family: 'zkgnew-bold';
    src: url("/wp-content/themes/cocoon-child-master/fonts/zkgnew-bold.woff") format('woff');
}

body {
    font-family: 'zkgnew-medium', 'NotoSansJP', serif;
    /* font-family: '游明朝', 'Yu Mincho', YuMincho, 'Hiragino Mincho Pro', serif; */
}

.ffamily-nsjp {
    font-family: 'NotoSansJP', sans-serif !important;
}
.ffamily-oswald {
    font-family: 'Noto Sans JP', sans-serif;
    font-family: 'Oswald', sans-serif;
}
/* .ffamily1 {
    font-family: "BrownLLWeb";
}

.ff-acme {
    font-family: 'Acme', sans-serif;
} */

.ff-min {
    font-family: '游明朝', 'Yu Mincho', YuMincho, 'Hiragino Mincho Pro', serif;
}


/* フォントカラー */

.fcolor1 {
    color: #00a4b5;
}


/* ボタン */
.button-block .btn{
    /* margin-bottom: 8px !important; */
}
.btn,
.ranking-item-link-buttons a,
.btn-wrap>a,
.wp-block-freeform .btn-wrap>a {
    background-color: #CB0700;
    color: #ffffff !important;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
    transition: background-color 0.1s, box-shadow 0.2s, transform 0.2s;
    font-weight: bold;
    border: 2px solid rgba(203, 7, 0, 0.76);
    font-weight: bold;
    display: inline-block;
    cursor: pointer;
    line-height: normal;
    padding: 16px 76px 14px 16px;
    text-decoration: none;
    text-align: right;
    font-size: 1.3rem;
    position: relative;
    width: 327px;
}

.btn::after,
.ranking-item-link-buttons a::after,
.btn-wrap>a::after,
.wp-block-freeform .btn-wrap>a::after {
    font-family: "Font Awesome 5 Free";
    content: "\f101";
    font-size: 112%;
    display: block;
    position: absolute;
    top: calc(50% - 9px);
    right: 12px;
    width: 50px;
}
.btn::before,
.ranking-item-link-buttons a::before,
.btn-wrap>a::before,
.wp-block-freeform .btn-wrap>a::before {
    content: "---";
    font-size: 100%;
    display: block;
    position: absolute;
    top: 16px;
    right: 32px;
    width: 30px;
}

.btn:hover,
.ranking-item-link-buttons a:hover,
.btn-wrap>a:hover {
    opacity: inherit;
    transition: all 0.3s ease-in-out;
    background-color: #CB0700;
    color: #ffffff !important;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.5); /* シャドウを強化 */
    transform: translate(2px, 3px); /* 右に2px、下に3px移動 */
    text-decoration: none;
}


/* サイト名はテキスト使用 */
.logo-image img {
    height: 60px; /* ヘッダーロゴサイズ */
}
.logo-text {
    padding: 20px;
    font-size: 1em;
    margin-top: 4px;
}

.site-name-text {
    font-size: 21px;
    font-weight: bold;
    text-shadow: 1px 1px 6px #000000cc;
    color: aliceblue !important;
}

.logo-menu-button.menu-button {
    background-image: inherit;
}

.mobile-menu-buttons .menu-button>a {
    color: aliceblue !important;
}


/**********************/


/*** アピールエリア ****/

/* Video */
.wp-block-video {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
    top: 0px;
}
.wp-block-video video{
    position: revert;
    overflow: hidden;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* アピールエリアコンテンツ */
.appeal {
    background-image: none;
    position: relative;
    width: 100%;
    height: 900px;
    overflow: hidden;
    /* ヘッダーの下に透過で表示するためヘッダーの高さ分上に移動 */
    /* top: -237px; */
    z-index: 0;
}
@media screen and (min-width:1354px) {
    .appeal {
        height: 1100px;
    }
}
.appeal-content {
    padding: 2rem 0 6rem 0;
    width: 100%;
    display: block;
    position: absolute;
    bottom: 360px;
    left: 0;
    color: #fff;
    z-index: 10;
    line-height: 65px;
    line-height: 5x;

    /* 左寄せ */
    /* margin-left: 0;
    width: 100%;
    font-size: 2.3em;
    padding: 2rem 3rem 0rem 5rem;
    margin-bottom: 0; */
}

/* .appeal {
    //コンテンツ高さ分相殺
    text-align: center;
    height: 600px;
    background-size: cover;
    height: fit-content;
    min-height: 1002px;
    position: relative;
    z-index: 1;
} */
#bl-appeal{
    margin-bottom: 3.8em;
}
#bl-appeal .col-left{
    line-height: 46px;
    font-weight: 600;
    padding-right: 1.4vw;
}
#bl-appeal .appeal-01{
    font-size: 1.5vw;
    margin-bottom: -12px;
    padding-left: 3.2vw;
}
#bl-appeal .appeal-02{
    font-size: 4vw;
    margin-bottom: 0;
}
#bl-appeal .appeal-03{
    font-size: 4vw;
}
#footer .btn,
#bl-appeal .btn{
    position: relative;
    z-index: 100;
    background: #ff0000c2;
    color: #fff !important;
}
#bl-appeal-img{
    background: rgba(255, 255, 255, 0.58);
    display: flow-root;
}
.body #bl-appeal-img .wp-block-image{
    margin-top: -5%;
    margin-bottom: 3%;
}
.body #bl-appeal-img .wp-block-image img{
    padding-right: 1.5rem;
}

.appeal::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background-image: url(/wp-content/uploads/appeal_top1.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    animation: zoom 23s 1;
    animation-fill-mode: forwards;
    position: absolute;
    -webkit-animation: zoom 23s 1;
}

/* ボタンのスタイリング */
.appeal-button {
    position: absolute; /* 親要素に対して絶対位置 */
    bottom: -60px;      /* 下に配置、マージンと合わせて調整 */
    right: -8px;        /* 右にぴったり寄せる */
    background-color: rgba(203, 7, 0, 0.9); /* ボタンの背景色を赤に設定 */
    color: #ffffff !important;    /* ボタンの文字色を白に設定 */
    padding: 17px 12% 18px 3%; /* ボタンの内側の余白 （上右下左） */
    line-height: 1;     /* 行の高さ -> ボタンの細さ調整 */
    border: none;       /* ボタンの境界線を削除 */
    border-radius: 1px; /* ボタンの角を丸くする */
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.3); /* ボタンに影を追加 */
    text-decoration: none; /* テキストの装飾をなしに */
    font-size: 0.58em;  /* テキストサイズを調整 */
    display: inline-block; /* ボタンをインラインブロックとして表示 */
    cursor: pointer;    /* カーソルをポインターに変更 */
    transition: background-color 0.3s, box-shadow 0.3s; /* ホバー時の変化にトランジションを追加 */
}

/* ホバー時のスタイル */
.appeal-button:hover {
    background-color: rgba(203, 7, 0, 1.0); /* ホバー時の背景色を少し濃く */
    box-shadow: 0px 6px 8px rgba(0, 0, 0, 0.4); /* ホバー時に影を強化 */
}


@media screen and (min-width:1354px) {
    .appeal-content {
        padding: 1em 0 3em 0;
    }
    #bl-appeal{
        line-height: 90px;
    }
    #bl-appeal .appeal-02,
    #bl-appeal .appeal-03{
        font-size: 62px;
    }
}
@media screen and (min-width:1023px) and (max-width: 1353px){
    .appeal-content {
        padding: 1em 0 1em 0;
    }
}
@media screen and (max-width:1023px) {
    .appeal-content .appeal-button {
        bottom: -200px;      /* 下に配置、マージンと合わせて調整 */
    }
    .appeal-message {
        margin-top: 200px;
    }
    .appeal-content {
        padding: 2rem 0 2rem 0;
    }
}
/* 1840px以上 */
@media screen and (min-width:1840px) {
    .appeal {
        /* コンテンツ高さ分相殺 */
        /* min-height: 1402px; */
    }
}

/* ズーム */
@keyframes zoom {
0% { transform: scale(1); -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1);}
100% {
transform: scale(1.2);
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-ms-transform: scale(1.2);
-o-transform: scale(1.2);
}
}


.appeal-top {
    text-align: right;
}

.appeal-top span {
    background-color: rgb(0 0 0 / 82%);
    padding: 37px;
}

.appeal-middle {
    margin-top: 100px;
    margin-bottom: 16rem;
}

.appeal-middle span {
    text-align: right;
}

.appeal-bottom {
    text-align: right;
    margin-right: -20px;
}

.appeal-bottom span {
    padding: 24px;
    color: #fff9;
}


/* ヘッダー */

header .wrap {
    width: 100%;
    margin: 0 auto;
}

#header {
    background: transparent !important;
    box-shadow: none !important;
}
.header .header-in {
    /* ヘッダー高さ */
    min-height: 86px !important;
}

.header-container {
    height: 0 !important;
    background-color: transparent;
}


/* ヘッダーブロック */
.header-block {
    width: 100%;
    height: 43px;
    top: 0px;
    right: 0px;
    background-color: transparent;
}
#header-block-innner {
    display: flex;
    right: 0px;
    position: absolute;
}

/* #header-tel div {
    width: 289px;
    color: white;
    height: 43px;
    display: flex;
    background-color: transparent;
    margin-top: -6px;
}
#header-tel div font{
    font-size: 29px;
    top: -3px;
    position: absolute;
    color:white;
}

#header-tel img {
    height: 37px;
    margin: 8px 8px 0px 8px;
} */

/* ヘッダーコンタクト */
#header-contact div {
    width: 245px;
    height: 43px;
    display: flex;
    background-color: transparent;
    color: white;
    margin-top: -6px;
}
#header-contact div font{
    font-size: 25px;
    top: 1px;
    position: absolute;
    color: white;
}

#header-contact img {
    height: 37px;
    margin: 8px 8px 0px 8px;
}


/* マウスオーバー(hover.cssオーバーライド) */
a .hvr-shutter-out-vertical:before {
    background: #006ca0 !important;
}

/* ロゴ */

.logo-image {
    z-index: 2;
    width: fit-content;
    bottom: -8px;
    position: absolute;
}

/* メニュー */

.navi-in>ul {
    padding: 4px;
    margin: 0;
    /* margin-top: -6px; */
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    text-align: center;
}
.navi-in a {
    padding: 0px 28px;
}
.navi .item-label {
    font-size: 24px;
    line-height: 27px;
}
.navi .item-description.sub-caption{
    font-size: 22px !important;
}

.home .header-container-in.hlt-center-logo-top-menu{
    /* トップページのみヘッダー位置調整 */
    top: 53px;
    position: relative;
}

/* ヘッダーの高さ調整の影響によりコンテンツ高さ設定 */


/* ↓ */

.content {
    /* margin-top: 106px; */
    display: flex;
    margin-bottom: 8em;
}

.appeal .appeal-in {
    position: absolute;
    height: 100%;
}


/* ナビメニュー幅(かぶり防止) */

#navi {
    width: 78%;
    /* background-color: #fff; */
    position: absolute;
    margin: auto;
    left: inherit;
    height: 52px;
    top: 40px;   /* 上からの位置 */
    z-index: 1;
}

/* トップブロック１ */
.top-01 .mg-right-wrap {
    text-align: right;
    position: relative;
    top: 0px;
    color: rgb(0, 37, 66);
}
.top-01 .mg-right-wrap p {
    margin-right: 0px;
    margin-bottom: 6px;
}
.top-01 .mg-right-wrap p:nth-child(2) {
    margin-right: 140px;
}
.top-01 .mg-right-wrap p:nth-child(3) {
    margin-right: 70px;
}
.top-01 .container{
    height: 640px;
}
.top-01 .bg-image {
    position: absolute;
    width: 81vw;
    height: auto;
    min-height: 100%;
    z-index: -1;
    background-image: url(/wp-content/uploads/background_circle.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left bottom;
}
@media screen and (max-width: 1023px) {
    .top-01 .container{
        height: 480px;
    }
}
@media screen and (max-width: 600px) {
    .top-01 .mg-right-wrap p:nth-child(2) {
        margin-right: 50px;
    }
    .top-01 .mg-right-wrap p:nth-child(3) {
        margin-right: 25px;
    } 
}

/* トップブロック３(実績) */
.article .top-03 .h-02 h2 {
    font-size: calc(28px + 4*(100vw - 320px) / 680);
    padding-left: 0px;
}
.article .top-03 h2:before {
    display: none;
}
.article .top-03 .h-02 h2 span {
    padding-left: 10px;
    border: 0px;
    color: dimgray;
}
.article .top-03 .h-02 h2 span::after {
    content: "";
    display: inline-block;
    width: 179px;
    top: 29px;
    left: 0px;
    position: absolute;
    /* border-bottom: 3px solid rgb(185 185 185); */
}
.article .top-03 .h-02 .wp-block-group {
    padding: 0 12px;
}
.article .top-03 .metaslider li {
    border-radius: 22px;
    -webkit-border-radius: 22px;
    -moz-border-radius: 22px;
    -ms-border-radius: 22px;
    -o-border-radius: 22px;
}
body .article .top-03 .metaslider .flexslider .slides img, 
body .article .top-03 .metaslider .nivoSlider img{
    padding:31px 16px 10px 16px;
}
body .article .top-03 .metaslider.ms-theme-clarity .flexslider .caption-wrap .caption {
    padding: 10px 10px 16px 10px;
    border:none;
}
.article .top-03 .metaslider.ms-theme-clarity .flexslider .caption-wrap{
    background: transparent;
    border:none;
}
/* .article .top-03 .metaslider .slides ul li a {
    display: contents;
} */
.article .top-03 .metaslider ul.slides li a {
    display: contents;
}


/* トップページのみ */
body.home #navi {
    /* ヘッダーの背景を伸ばす */
    /* height: 1600px; */
}

#navi-in {
    width: 94%;
    background-color: inherit;
    position: absolute;
    margin: auto;
    right: inherit;
    right: -219px;
    display: contents;
}
.cl-slim .navi-in > ul li{
    display: contents;
}

.navi-in a:hover {
    background-color: transparent !important;
}
.body .top-b01 .wp-block-cover{
    margin-bottom: 0;
}

/* メニュー項目装飾 */
.menu-item a {
    display: inline-block;
    transition: .5s
}


/* マウスオーバー時 */

.menu-item:hover a {
    transform: rotateX(360deg);
}


/* .menu-item::after {
    position: absolute;
    left: 0;
    content: '';
    width: 100%;
    height: 2px;
    background: #2ca9e1;
    bottom: -6px;
    /*アンダーラインが現れ始める位置（aタグの下辺からの高さ）*/


/* opacity: 0;
visibility: hidden;
transition: 0.3s;

} */

.menu-item:hover::after {
    visibility: visible;
    bottom: -3px;
    opacity: 1;
}

/* メニューボタン高さ */

.cl-slim .navi-in>ul li {
    height: 28px;
    line-height: 28px;
    width: auto;
    padding: 0 24px 0 24px;
}


/* ナビメニュー文字 */
.navi-in a {
    position: relative;
    display: inline-block;
    text-decoration: none;
}
/* PCレイアウトスクロール時固定ヘッダー */
.fixed-header {
    background-color: #ffffffe8;
    height: 64px !important;
}
.fixed-header nav {
    height: inherit !important;
    background-color: transparent !important;
    top: 10px !important;
    background-color: transparent;
}

.fixed-header .header-block {
    display: none !important;
}

.fixed-header #header-container-in {
    width: 100% !important;
}

.fixed-header .header-in {
    min-height: 40px !important;
}
.fixed-header .logo-image{
    padding: 6px 0px 0px 23px !important;
}
.fixed-header .navi-in>ul {
    margin-top: 15px;
}
.fixed-header .logo-image {
    position: initial;
}
/*********************************************/
/* ナビメニュー文字色調整 */
/*********************************************/
/* .fixed-header .navi-in a {
    color: #000 !important;
}
.home .navi-in a {
    color: #fff !important;
}
.home .fixed-header .navi-in a {
    color: #000 !important;
} */


/* ナビメニュー文字サイズ */

/* .caption-wrap .item-label {
    font-size: 1.3em !important;
} */
/* メニュー説明 */
.navi .item-description.sub-caption
 {
    display: none;
    /* font-weight: 700;
    font-size: 2em !important;
    line-height: 29px;
    top: 0px;
    position: relative; */
}
.navi .item-description.sub-caption:hover{
    display: block;
    position: absolute;
    background-color: #fff; /* ポップアップの背景色 */
    padding: 10px; /* ポップアップ内の余白 */
    border: 1px solid #ccc; /* ポップアップの枠線 */
    z-index: 1000; /* ポップアップが他の要素より前面に表示されるように */
    white-space: nowrap; /* テキストが折り返されないようにする */
    top: 100%; /* メニュー項目の下に表示されるように */
    left: 0;
}

/* アイコンメニュー */
#header-link-block {
    top: 9px;
    left: 113px;
    font-size: large;
    font-weight: bold;
    color: aliceblue;
    position: relative;
    text-shadow: 1px 1px 3px #0000007d;
}

#header-search-box-block {
    display: none;
}

.rich_font {
    font-family: Yu Gothic Medium, 游ゴシック Medium, YuGothic, 游ゴシック体, ヒラギノ角ゴ Pro W3, メイリオ, sans-serif;
    font-size: x-large;
}

/* モバイルメニューロゴ */

.logo-menu-button img {
    max-height: 38px;
}

/* フッター */
#footer {
    /* position: absolute; */
    width: 100%;
    /* height: 300px; */
    background-image: url("/wp-content/uploads/footer-bg.jpg");
    background-repeat: no-repeat;
    /* background-position: 50% 30%; */
    background-size: cover;
    padding: 0;
}
#footer .wrap {
    width: 100%;
}
.footer-center {
    width: 100%;
}
#footer .footer-left,
#footer .footer-right{
    width: 0;
    padding: 10px 0px;
}

/* アピールブロック */
#bl-appeal{

}

/* フッターコンタクトブロック */
#footer-contact .col-left p{
    font-size: 4vw;
    line-height: 48px;
}
#footer-contact h2 {
    border-left: 29px solid #00738C;
    padding-left: 10px;
    margin-bottom: 0.5em;
}
#footer-contact h3 {
    border-bottom: 1px solid #fff;
}
#footer-contact .overfont {
    top: -35px;
    position: relative;
}
#footer-contact .tel {
    font-size: 2.2vw;
    font-family: monospace;
    line-height: 38px;
}

/* --- particles-js --- */
#page-top #top-lineup canvas {
    display: block;
    height: 1400px !important;
}
@media screen and (max-width: 1023px) {
    #particles-js {
        margin-top: -100px !important;
    }
}

/* #particles-js-body {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    background-image: url("/images/logo_l.png");
    background-repeat: no-repeat;
    background-size: 34%;
    background-position: 50% 30%;
} */


/* メイン部透過 */

.main,
.sidebar,
.footer {
    background-color: inherit;
}


/* --- particles-js --- */


/* ワイドブロック配色分け */

.wide-block:before {
    background: #eaeaeab8;
    height: 340px;
}

.hwide-block:before {
    background: #eaeaeab8;
    height: 340px;
}


/*ヘッダーワイドブロック*/

.hwide-block {
    position: relative;
    margin-top: -77px;
    height: 480px;
    padding: 1px 0px 1px 0px;
}

.hwide-block:before {
    content: "";
    display: block;
    background: #f7f7f7;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100.1vw;
    height: 100%;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: -1;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
}


/* ヘッダー内小ブロック */

.heder-s-block {
    position: absolute;
    top: 363px;
    right: 25px;
    padding: 1rem 2rem 1rem 2rem;
    background-color: #f7f7f75a;
    font-size: 1.6rem;
}

.copyright {
    font-size: larger;
}


/* パンくずリスト */

.entry-categories .cat-link {
    background-color: #fff !important;
}


/* カバー画像縦横比固定用 */
.image-size-fix {
    padding:0 0 calc(668/1920*100%) !important;
    min-height: 0 !important;
  }
.image-size-fix .wp-block-cover__inner-container{
    position: absolute;
    padding: 0;
    top: 40%;
}

/***********************************************
各ページ共通
***********************************************/
/* 各ページヘッダー */
#page-header{
    margin-top: 3%;
}
#page-header .wp-block-cover__inner-container{
    position: absolute;
    top: 48%;
}
#page-header .wp-block-cover__inner-container h1{
    margin-bottom: 22px;
    padding-left: 28px;
    font-weight: 500;
    color: #fff;
}
#page-header .wp-block-cover__inner-container .line{
    width: 74%;
}
#page-header .wp-block-cover__inner-container .line .sub-title{
    top: -2px;
    position: relative;
    font-weight: 600;
    color: #fff;
}
@media screen and (min-width: 1920px) {
    #page-header .wp-block-cover__inner-container .line .sub-title {
        line-height: 42px;
        font-size: 1.8rem;
    }
}

@media screen and (min-width:700px) and (max-width: 1023px){
    #page-header{
        margin-top: 0%;
    }
    #page-header .wp-block-cover__inner-container h1{
        margin-bottom: 4px;
    }
    #page-header .wp-block-cover__inner-container {
        top: 37%;
    }
}

@media screen and (max-width: 699px) {
    #page-header{
        margin-top: 0%;
    }
    #page-header .wp-block-cover__inner-container h1{
        margin-bottom: 4px;
    }
    #page-header .wp-block-cover__inner-container {
        top: 27%;
    }
}

/***********************************************
ページ別CSS
***********************************************/
/* トップページ */
#page-top .bl01 {
    background-image: url(/wp-content/uploads/top-bl01-01.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 900px;
    padding-top: 16vw;
    padding-bottom: 16vw;
}
@media screen and (max-width: 1200px) {
    #page-top .bl01 {
        min-height: 450px;
        padding-top: 16vw;
        padding-bottom: 16vw;       
    }
}

#page-top .bl01 .inner:nth-child(1) p {
    background-color: #d1d1d157;
    padding: 100px 20px 30px 20px;
    font-weight: 500;
    color: #4e4e4e;
}
#page-top .bl01 .inner:nth-child(2) p {
    background-color: #d1d1d157;
    padding: 0px 20px 100px 20px;
    font-weight: 300;
    color: #4e4e4e;
}
/***** スライダー *****/
/* キャプション位置 */
#page-top .metaslider .caption-wrap {
    top: 0;
    white-space: pre-line;
    bottom:inherit;
    background: transparent;
    color: #4c4c4c;
    opacity: 0.7;
    margin: 0;
    display: block;
    width: 100%;
    line-height: 1.4em;
}

/* ダウンロードページ */
#page-library .w3eden .card h3 {

}
.w3eden .btn::before, 
.w3eden .btn::after {
    content: "";
}
.w3eden .btn-primary {
    color: #fff !important;
    background-color: #007e8f;
    border-color: #3b8070;
}
.w3eden .btn-primary:hover {
    background-color: #3b8070;
    border-color: #3b8070;
}
#page-library .wp-block-button__link:hover {
    background-color: #3b8070 !important;
    border-color: #3b8070;
}

/* 製品情報 */
#page-items .bl01 .wp-block-column .wp-block-image{
    border: 1px solid;
}
#page-items .bl01 .wp-block-column .wp-block-image .wp-element-caption{
    border-top: 1px solid #000;
    background: gray;
    text-align: center;
}
#page-items .bl01 .wp-block-column .wp-block-image .wp-element-caption a{
    color: #fff;
    line-height: 2rem;
    font-size: x-large;
}
#page-items .bl01 .wp-block-column .wp-block-image img{
    margin: 0 auto;
}
.article #page-items .bl01 h2{
    background: #00738C;
    color: #fff;
}
.article #page-items .bl01 h2 code{
    border: none;
    padding-top: 5px;
}
@media screen and (max-width: 600px) {
    .article #page-items .bl01 h2 code {
        font-size: 18px;
        padding-top: 9px;
        margin-left: -18px;
    }
}


/***********************************************
記事
***********************************************/
/* 記事のみH1表示 */
.type-post h1 {
    display: block;
    padding-left: 18px;
    border-left: 8px #00192a solid;
    border-bottom: 0px #000 solid;
    background-color: transparent;
    font-family: 'Acme';
    font-style: normal;
    font-weight: 400;
    font-size: 1.8rem;
    line-height: 30px;
}

.article header {
    box-shadow: inherit;
}


/* サイドバー */
.sidebar h2,
.sidebar h3 {
    background-color: #00192a;
    color: aliceblue !important;
}

/* トグル */
.toggle-button{
    background-color: #00738C;
    color: #fff;
    border: 2px solid #757575;
    text-align: left;
}
.toggle-button::before {
    color: #fff;
}
.toggle-checkbox:checked ~ .toggle-content {
    border: 2px solid #dcdcdc;
}

/************************************
** Responsive design
************************************/
/* メインメニュー */
@media screen and (min-width: 1601px) and (max-width:1700px) {
    .navi-in a {
        padding: 0px 16px;
    }
    .navi .item-label {
        font-size: 23px;
        line-height: 27px;
    }
    .navi .item-description.sub-caption{
        font-size: 22px !important;
    }
}
@media screen and (min-width: 1601px) {
    /* PC固定ヘッダー */
    .fixed-header .navi .item-label{
        font-size: 20px;
    }
    .fixed-header .navi .item-description.sub-caption{
        font-size: 16px !important;
        line-height: 14px;
    }
}
@media screen and (min-width: 1281px) and (max-width: 1600px) {
    .navi-in > ul li {
        width: 144px !important;
    }
    .navi-in a {
        padding: 0px 8px;
    }
    .navi .item-label {
        font-size: 20px;
    }
    .navi .item-description.sub-caption{
        font-size: 16px !important;
        line-height: 14px;
    }
}
@media screen and (max-width: 1280px) {
    .navi-in > ul li {
        width: 126px !important;
    }
    .navi-in a {
        padding: 0px 6px;
    }
    .navi-in > ul .menu-item-has-description > a > .caption-wrap {
        display: inline-grid;
        padding-right: 20px;
    }
    .navi .item-label {
        font-size: 20px;
    }
    .navi .item-description.sub-caption{
        font-size: 16px !important;
        line-height: 14px;
    }
}

/* @media screen and (min-width:1023px) and (max-width: 1353px){

}

@media screen and (min-width: 1481px) {
    .navi-in > ul li {
        width: 146px !important;
    }
    .navi-in a {
        padding: 0px 26px;
        font-size: 1.2em !important;
    }
} */

/*the following 1180px*/
@media screen and (max-width: 1280px) {
    /* ボタン */
    .btn{
        width:inherit;
    }
}
/*the following 1023px*/
@media screen and (max-width: 1023px) {
    .content {
        margin-top: 37px;
    }
    /* ロゴ */
    img.site-logo-image {
        visibility: inherit !important;
    }
    /* スライド */
    .metaslider {
        margin-bottom: 0px;
        margin-top: 43px;
    }
    .metaslider .caption-wrap {
        /* スライド内文字 */
        /* top: 60px !important;
        left: 20px !important;
        background: transparent !important;
        color: white !important;
        opacity: 0.94 !important;
        margin: 0 !important;
        display: block !important;
        width: 100% !important;
        line-height: 1.4em !important;
        text-shadow: 1px 1px 6px #000000cc;
        color: aliceblue;
        border-radius: 4px; */
    }
    .mblt-header-mobile-buttons {
        margin-top: 0px;
    }
    .mobile-header-menu-buttons {
        position: fixed;
        background: #fff !important;
    }
    /* ヘッダーボタン */
    .logo-menu-button.menu-button {
        background-size: inherit;
        background-position: left;
        background-repeat: no-repeat;
        left: -7px;
    }
    .mobile-menu-buttons {
        text-shadow: 1px 1px 3px #000000cc;
        min-height: 42px;
        color: #fff;
    }
    .rich_font {
        font-size: small;
    }
    .page-appeal-inner .column-right {
        padding-bottom: 4px;
    }
    /* ワイドブロック配色分け */
    .wide-block:before {
        background: #eaeaeab8;
        height: 340px;
    }
    .hwide-block:before {
        width: 294.1vw !important;
    }
    .search-menu-icon {
        display: none !important;
    }

}


/* ワイドブロック左イメージ */

div[class*="wide-img-"] {
    height: 280px;
    overflow: hidden;
}

div[class*="wide-img-"] .wp-block-column p {
    height: 320px;
}

.wide-img-left-text p {
    margin-left: 0em;
    margin-right: 1em;
}

.wide-img-right-text p {
    margin-left: 1em;
    margin-right: 0em;
}


/* .wide-img-left img {
    display: block;
    object-fit: cover;
    width: 50.1vw;
    height: 320px;
    position: absolute;
    left: 50%;
    transform: translateX(-101%);
} */

.wide-img-left img {
    display: block;
    object-fit: cover;
    width: 49.4vw;
    height: 348px;
    position: absolute;
    left: 50%;
    transform: translateX(-103.6%);
}

.wide-img-right img {
    display: block;
    object-fit: cover;
    width: 49.4vw;
    height: 348px;
    position: absolute;
    left: 50%;
    transform: translateX(2.8%);
}

.my-h4-right {
    margin-bottom: 4.2rem !important;
}

.full-img {}

.full-img .aligncenter {
    display: block;
}

.full-img img {
    width: 100%;
}


/* 予約インナーボタンブロック */

.inner-btn {
    display: contents;
}

.inner-btn .btn {
    width: 160px;
}

.inner-btn-text {
    display: block;
    padding-left: 6px;
    padding-top: 8px;
}


/* 非表示メニュー→非表示 */

#menu-item-62,
#menu-item-27 {
    display: none;
}


/*the following 1180px*/

@media screen and (max-width: 1180px) {
    .navi-in>ul li {
        width: 146px;
    }
}


/*the following 1023px*/

@media screen and (max-width: 1023px) {
    .menu-drawer a {
        background: #506170ab !important;
        color: #ffffff !important;
    }
    .menu-drawer a:hover {
        background-color: #000000b0 !important;
    }
    .navi-in>ul li {
        width: 126px;
    }
    .flexslider .slides img {
        /* スライド設定の高さに従う */
        width: auto !important;
    }
    .order2 {
        order: inherit !important;
    }

    /* PCヘッダー非表示 */
    .header-container{
        background-color: transparent;
        display: none;
    }
    /* 左右wideイメージ */
    div[class*="wide-img-"] img {
        height: 280px;
    }
    .appeal {
        height: inherit;
        min-height: 780px;
    }
    .appeal-middle {
        margin-top: 100px;
        margin-bottom: 11rem;
    }
    .appeal-content {
        margin-left: initial;
        padding-left: 1.6em 0 0 0;
    }
}

/*the following 782px*/

@media screen and (max-width: 782px) {
    /* ヘッダー画像 */
    .appeal {
        height: inherit;
        min-height: 770px;
    }
    .appeal-content {
        padding: 0.4em 0 0.4em 0;
        font-size: 25px;
    }
    /* アピール小テキスト */
    #bl-appeal .appeal-01 {
        font-size: 20px;
    }
    #bl-appeal .appeal-02,
    #bl-appeal .appeal-03 {
        font-size: 130%;
    }
    /* .appeal-top span {
        padding: 24px;
        font-size: 20px;
    }
    .appeal-bottom span {
        padding: 18px;
        font-size: 18px;
    }
    .appeal-bottom {
        margin-right: 23px;
    } */
    /* 大フォント調整 */
    .top-font-l {
        font-size: 12px !important;
    }
    .top-font-ll {
        font-size: 16px !important;
    }
    .top-font-lll {
        font-size: 20px !important;
    }
    .sp-br-none br{
        display: none;
    }
    /* 見出し h2 */
    .article h2 span:after {
        width: 24%;
    }
}

/*the following 600px*/
@media screen and (max-width: 600px) {
    .wide-img-left img {
        width: 80%;
        height: 280px;
        left: 16%;
        transform: translateX(0%);
    }
    .wide-img-right img {
        width: 80%;
        height: 280px;
        left: 4%;
        transform: translateX(0%);
    }
    .wide-img-right-text,
    .wide-img-left-text {
        height: auto !important;
    }
    .my-h4,
    .article h4 {
        font-size: 1.8rem;
    }
    .wide-img-right {
        margin-bottom: 22px !important;
    }
    .footer-bottom {
        margin-top: -20px !important;
    }
    .copyright {
        font-size: larger;
    }
    .appeal {
        height: inherit;
        min-height: 770px;
    }
    /* wide 左右ブロック */
    .top-5-1, .top-5-2 {
        /* 画面幅いっぱい */
        width: 100% !important;
    }
}

/*600px 以上*/

@media screen and (min-width: 600px) {
    /* 600px 以上は左寄せ */
    .creator .aligncenter {
        display: block;
    }
}

/*--------------------------------------
  tab
--------------------------------------*/
/* タブ切り替えボタンが大きく全体に表示されるver.
.tab-wrap{
    margin-bottom: 40px;
}
.tab-group{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-items: flex-end;
}
.tab{
    flex-grow: 1;
    background: #002542; // タブのカラー
    border-radius: 10px 10px 0 0;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-size: 13px;
    font-weight: bold;
    margin: 0 5px;
    padding: 14px 0 12px;
    text-align: center;
    transition: 1s;
    vertical-align: bottom;
}
*/
/* tabボタンが右寄せで小さく表示されるver */
.tab-wrap {
    margin-bottom: 40px;
}
.tab-group {
    display: flex;
    justify-content: flex-end; /* 右寄せに変更 */
    flex-wrap: wrap;
    align-items: flex-end;
}
.tab {
    background: #002542; /* タブのカラー */
    border-radius: 10px 10px 0 0;
    color: #fff;
    cursor: pointer;
    font-size: 13px;
    font-weight: bold;
    margin: 0 5px;
    padding: 8px 30px; /* パディングを調整 */
    text-align: center;
    transition: 1s;
}

.panel-group{
    min-height:100px;
    border:solid 1px #002542;
    border-top: 8px solid #C8E4FF;
    padding: 10px;
}
.panel{
    display:none;
}
.tab.is-active{
    color:#FFF;
    transition: 1s;
    opacity: 0.6;
    padding-bottom: 20px;
}
.panel.is-show{
    display:block;
}

@media screen and (max-width:480px) { 
.tab{
    /* padding: 10px 0 7px; タブボタン大きいver*/
	padding: 5px 8px; /* モバイルでのパディング調整 */
}
.tab.is-active{
    padding-bottom: 15px;
}
}


/* blog用 実績カードのスタイル */
/* カードコンテナ */
.card-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

/* カード */
.card {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin: 15px;
    width: calc(33% - 30px); /* 3列配置 */
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    flex-direction: column; /* 縦方向に要素を配置 */
    height: 400px; /* カードの固定高さ */
}

/* カード画像 */
.card img {
    width: 100%; /* 幅100% */
    height: auto; /* 高さを自動調整 */
    display: block; /* ブロック要素として表示 */
    max-height: 150px; /* 画像の最大高さ */
    object-fit: cover; /* 画像の切り取り方 */
}

/* カードコンテンツ */
.card-content {
    padding: 15px; /* パディング */
    display: flex; /* Flexboxを使用 */
    flex-direction: column; /* 縦方向に要素を配置 */
    flex-grow: 1; /* 残りのスペースを使用 */
    justify-content: space-between; /* 上下にスペースを分ける */
}

/* カードタイトル */
.card-title {
    font-size: 1.25em; /* フォントサイズ */
    margin-bottom: 10px; /* 下のマージン */
    font-weight: bold; /* 太字 */
    color: #002542; /* テキスト色 */
    text-align: left;
}
/* カード本文 */
.entry-card-snippet{
    text-align: left;
}
.card-excerpt {
    color: #002542; /* テキスト色 */
    margin-bottom: 10px; /* 下のマージン */
    font-size: 0.875em; /* フォントサイズを小さく */
    overflow: hidden; /* 残りのスペースを使用 */
    text-overflow: ellipsis; /* テキストが溢れた場合の処理 */
    display: -webkit-box; /* ボックスモデルを使用 */
    -webkit-line-clamp: 3; /* 最大行数を指定 */
    -webkit-box-orient: vertical; /* ボックスの方向を縦に */
}
/* もっと見るボタン */
.card-read-more {
    background-color: #002542; /* 背景色 */
    color: white; /* テキスト色 */
    padding: 5px 10px; /* パディング */
    text-align: center; /* 中央揃え */
    border-radius: 5px; /* 角丸 */
    text-decoration: none; /* 下線なし */
    display: inline-block; /* インラインブロック */
    align-self: flex-end; /* 右寄せ */
    font-size: 0.80em; /* フォントサイズをさらに小さく */
    margin-top: auto; /* 自動マージントップ（下寄せ） */
}
.card-read-more:hover {
    background-color: #005177; /* ホバー時の背景色 */
}
/* 実績用 blogカード ここまで */


/*製品情報型番*/
.product-model{ 
	font-size:40px; color:#24433E; line-height: 2.5;  font-weight: 900;
}










/* ここから試し カード */
/* Card Slider CSS */
.slider-container {
    position: relative;
    width: 80%;
    overflow: hidden;
    margin: 0 auto;
}

.slider {
    display: flex;
    transition: transform 0.3s ease-in-out;
}

.card {
    flex: 0 0 30%; /* カードサイズを調整 */
    box-sizing: border-box;
    padding: 10px;
}

.card-image img {
    width: 100%;
    height: auto;
    display: block;
}

.card-content {
    background-color: white;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 10px;
    text-align: center;
}

.card-content h3 {
    margin: 0;
    font-size: 1em;
}

.slider-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 10px;
    cursor: pointer;
    z-index: 1;
}

.slider-button.prev {
    left: 0;
}

.slider-button.next {
    right: 0;
}

.pagination {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

.dot {
    height: 10px;
    width: 10px;
    margin: 0 5px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.3s ease-in-out;
}

.dot.active {
    background-color: #717171;
}



/* ここから カテゴリトップ */
/* カテゴリセクションのスタイル */
.category-section {
    margin-bottom: 50px; /* カテゴリ間の間隔 */
}

.category-section h2 {
    font-size: 24px;
    margin-bottom: 20px;
}

/* 記事の横並びとレイアウト */
.post-list-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px; /* 記事間の間隔 */
    list-style: none;
    padding: 0;
    justify-content: flex-start; /* 左詰めで表示 */
}

.post-item {
    flex: 1 1 calc(30% - 20px); /* 1行に3記事を表示 */
    box-sizing: border-box;
    max-width: 30%; /* 最大30%の幅に制限 */
}

.post-item a {
    display: block;
    text-decoration: none;
    color: inherit;
}

.thumbnail-wrap {
    width: 100%;
    overflow: hidden;
}

.thumbnail-image {
    width: 100%;
    height: auto;
    aspect-ratio: 3/2;
    object-fit: cover;
}

.post-item h6 {
    margin: 10px 0 5px;
    font-size: 16px;
}

.post-item time {
    font-size: 14px;
    color: #666;
}

/* 「もっと見る」リンク */
.more-link {
    display: inline-block;
    margin-top: 20px;
    font-weight: bold;
    color: #0073aa;
    text-decoration: none;
    text-align: right; /* 右寄せの基準を追加 */
    width: 100%; /* リンクをコンテナ全体に配置して、右端で配置されるように */
}

.more-link:hover {
    text-decoration: underline;
}

/* レスポンシブ対応: タブレット */
@media (max-width: 1024px) {
    .post-item {
        flex: 1 1 calc(48% - 20px); /* タブレットでは1行に2記事 */
        max-width: 48%;
    }
}

/* レスポンシブ対応: スマートフォン */
@media (max-width: 768px) {
    .post-item {
        flex: 1 1 100%; /* スマートフォンでは1行に1記事 */
        max-width: 100%;
    }
}

/********************/
/* 記事のみ */
/********************/
/* トップ見出し */
.single-post .type-post h1 {
    display: block;
    background-color: transparent;
    font-weight: 600;
    font-size: 2rem;
    line-height: 46px;
    border-left: none;
    padding-left: 0;
}

.single-post .article h2:before {
    content: none;
}

.single-post .article h2 {
    position: relative;
    padding: 0;
    font-size: calc(19px + 4*(100vw - 320px) / 680);
    font-weight: 600;
    background-color: transparent;
    color: #002542;
    padding-left: 0;
    border-left: 0;
    margin-bottom: 24px;
    word-break: break-word; /* 長い単語を適切に改行 */
    overflow-wrap: break-word; /* 長い単語が幅を超える場合の処理 */
}

.article h2 span {
    border-bottom: none;
    padding-bottom: 10px;
    padding-left: 11px;
    border-left: 9px solid #b2b2b2;
    padding: 10px;
    line-height: 34px;
}