@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;
}


/* リンク */

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: #585858;
    line-height: 0.7;
    border-left: 20px solid #00738C;
}

.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 h2:before {
    position: absolute;
    bottom: 29px;
    left: -56px;
    width: 100%;
    height: 3px !important;
}

.article h3 {
    border: none;
}

/* 共通 */
/* 見出し 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;
    border-bottom: 2px solid #cecccc;
}

.article .h-02 .wp-block-group {
    width: fit-content;
    padding: 0 34px;
}

.article .h-02 h2:before {}

.article .h-02 p {
    position: relative;
    top: -3px;
    font-size: 135%;
    font-weight: 600;
    border: none;
    line-height: normal;
}

.article .h-02 p:first-letter {
    font-size: 120%;
    /* color: #00738C; */
}

/* トップページ */
.article #page-top h2 {
    border-left: 29px solid #00738C;
    margin-bottom: 3em;
}

.article #page-top h2 span {
    border: none;
}

.article #page-top h2 span:after {
    content: '';
    position: absolute;
    font-size: 100%;
    font-weight: 600;
    left: -20px;
    top: 43px;
    width: 100% !important;
    height: 13px;
    border: none;
    z-index: 2;
    color: #7d7d7d70;
}

/* bl02 */
.article #page-top .bl02 h2 span:after {
    content: 'Lineup';
}

/* 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 */
.article #page-top .bl05 h2 span:after {
    content: 'News';
}

#gr-news-contents .news-list {
    border-bottom: 1px solid;
    padding: 20px 0px;
}

/* 会社概要 */
#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;
}

/* サブページ */
#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 .column-left {
    margin-bottom: 0;
}

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

.page-appeal-inner-left {}

.page-appeal-inner-right {}


/*↑↑↑↑↑↑↑↑↑↑ 固定ページ ↑↑↑↑↑↑↑↑↑↑*/

/* フォントファミリー */
@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 {
    color: #111111 !important;
    background-color: #bdbdbdb5;
    font-weight: bold;
    border: 2px solid #292929;
    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;
    color: #fff !important;
    background: #000;
    text-decoration: none;
}


/* サイト名はテキスト使用 */
.logo-image img {
    height: 180px;
}

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

    /* メニュー重なり防止 */
    .logo-image {
        bottom: 34px !important;
    }

    .logo-image img {
        height: 112px;
    }

    .navi-in>ul .menu-item-has-description>a>.caption-wrap {
        padding-right: 10px !important;
    }

    .navi .item-label {
        font-size: 18px !important;
    }
}

.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: bl ock;
    position: absolute;
    bottom: 0;
    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;
}

@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-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 {
    box-shadow: none;
}

.header .header-in {
    min-height: 237px !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: -13px;
    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 6px;
}

.navi .item-label {
    font-size: 24px;
    line-height: 27px;
}

.navi .item-description.sub-caption {
    font-size: 22px !important;
}

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


/* ↓ */

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

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


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

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


/* トップページのみ */

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

.body .top-b01 .wp-block-cover {
    margin-bottom: 0;
}

#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;
}


/* メニュー項目装飾 */

.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: 85px !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: 16px 0px 0px 23px !important;
}

.fixed-header .navi-in>ul {
    margin-top: 10px;
}

.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;
} */
/* メニュー説明 */

.sub-caption {
    font-weight: 700;
    font-size: 2em !important;
    line-height: 29px;
    top: 0px;
    position: relative;
}


/* アイコンメニュー */
#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: 3vw;
    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 #2ca9e1 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;
    text-align: right;
    margin-right: 20px;
    top: -62px;
    position: relative;
    height: 0px;
}

#search-2 {
    display: ruby;
}

/* サイドバー */
.sidebar h2,
.sidebar h3 {
    background-color: #2ca9e1;
    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 5px;
    }

    .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: 1660px) {
    .navi-in>ul li {
        width: 144px !important;
    }

    .navi-in a {
        padding: 0px 5px;
    }

    .navi .item-label {
        font-size: 20px;
    }

    .navi .item-description.sub-caption {
        font-size: 16px !important;
        line-height: 14px;
    }
}

@media screen and (max-width: 1450px) {
    .navi-in>ul li {
        width: 126px !important;
    }

    .navi-in a {
        padding: 0px 0px;
    }

    .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;
        font-size: 6vw;
        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;
    }

    .article h2:before {
        content: none;
    }

    .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;
    }
}

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

.is-layout-constrained> :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
    max-width: inherit;
}

.mg-width-wrap-l {
    max-width: 1200px;
    display: block;
    /* (通常divなどはデフォルトでblockですが念のため) */
    width: 90% !important;
    /* ★子要素の幅を明示的に指定 (必須) */
    margin-left: auto !important;
    /* 左マージンを自動調整 */
    margin-right: auto !important;
    /* 右マージンを自動調整 */
}

#search-2 {
    display: ruby;
}

.article header {
    box-shadow: inherit;
    text-align: right;
    margin-right: 20px;
    top: -62px;
    position: relative;
    height: 0px;
}

.home .article header {
    top: 9px;
    height: 109px;
}

@media screen and (max-width: 1023px) {
    .article header {
        margin: 9px;
        top: -14px;
        height: 47px;
    }

    .home .article header {
        top: -40px;
        height: 27px;
    }

    main .search-box {
        max-width: 300px;
    }
}

.article h2 span {
    border-bottom: none;
}

:root :where(.is-layout-constrained)> :last-child {
    margin-block-start: 24px;
}