/*
Theme Name: main
Theme URI: 
Description: 
Author: ailylab
Author URI: 
Version: 1.0.0
*/

img[src=""] {
    display: block;
    position: relative;
    width: 100%;
    padding-bottom: 70%;
    border: 1px solid #eee;
}
img[src=""]:after {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    font-size: 24px;
    white-space: nowrap;
    content: "※画像準備中※";
}

/****************************************
1.Setting
*****************************************/
:root {
    --main-color: #0A58A9;
    --red-color: #EC2121;
}
html, body, div, span, a, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, address, em, img, dl, dt, dd, ol, ul, li, form, label, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figcaption, figure, footer, header, menu, nav, section, time, video {
    margin: 0px;
    padding: 0px;
    border: none;
    outline: none;
    box-sizing: border-box;
}

body {
    color: #000;
    font-size: 18px;
    font-weight: bold;
    font-family: "Noto Sans JP", "游ゴシック", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
    overflow-x: hidden;
    letter-spacing: 0.01em;
}

h1, h2, h3, h4, h5, h6 {
    line-height: 1.5;
    letter-spacing: 0.01em;
}

a {
    color: var(--main-color);
}

a:hover {
    color: #359ddd;
}

a[href="#none"] {
    color: #000;
    text-decoration: none;
    pointer-events: none;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0px auto;
    -webkit-backface-visibility: hidden; 
    -ms-transform: translateZ(0); /* IE 9 */
    -webkit-transform: translateZ(0); /* Chrome, Safari, Opera */
    transform: translateZ(0);
}

/* Chromeで縮小したアイコン画像がぼやける現象への対策 */
img[src$=".png"],
img[src$=".gif"] {
    -webkit-backface-visibility: hidden;
}

p {
    line-height: 1.5;
}

p.paragraph:nth-of-type(n + 2) {
    margin: 1.5em 0px 0px;
}

figcaption {
    padding: 0.5em;
    text-align: center;
}

a:hover > figure > img {
    opacity: 0.8;
}

table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

table th,
table td {
    padding: 10px;
    border-bottom: 1px solid #dedede;
}

table th:nth-of-type(n + 2),
table td:nth-of-type(n + 2) {
    border-left: 1px solid #dedede;
}

table th {
    background-color: #edf8ff;
}

@media screen and (max-width: 767.98px) {
    .tbl_wrapper {
        overflow-x: scroll;
    }
    .tbl_wrapper > table {
        width: 767px;
    }
}

address {
    font-style: normal;
}

.video_wrapper video {
    width: 100%;
}

ol.list,
ul.list {
    margin: 0px 0px 0px 1.5em;
}

p + ol.list,
p + ul.list {
    margin: 0.5em 0px 0px 1.5em;
}

ol.list + p,
ul.list + p {
    margin: 0.5em 0px 0px;
}

ol.list > li + li,
ul.list > li + li {
    margin: 1em 0px 0px;
}

ol.list > li > ul,
ul.list > li > ul {
    margin: 1em 0px 0px 1.5em;
}

ol.list > li > .box,
ul.list > li > .box {
    margin: 1em 0px 0px;
}

dl.list {
    border: 1px solid #dedede;
    border-top: none;
}

dl.list > dt,
dl.list > dd {
    padding: 1em;
    margin: 0px;
    border-top: 1px solid #dedede;
}

dl.list > dt {
    background-color: #ecf8fe;
    color: #231815;
    font-weight: bold;
}

.cf:after {
    display: block;
    clear: both;
    content: "";
}

.bw > span,
h1 > span,
h2 > span,
h3 > span,
h4 > span,
h5 > span,
h6 > span,
figcaption > span {
    display: inline-block;
}

@media screen and (max-width: 991px) {
    .pc {
        display: none !important;
    }
}
@media screen and (max-width: 767.98px) {
    .tb {
        display: none !important;
    }
}
@media screen and (min-width: 768px) {
    .mb {
        display: none !important;
    }
}

.center {
    text-align: center;
}

@media screen and (min-width: 768px) {
    .pc_center {
        text-align: center;
    }
}

.right {
    text-align: right;
}

.em {
    font-size: 16px;
    font-weight: bold;
}

.if_wrapper {
    position: relative;
    padding-bottom: 56.25%;
}
.if_wrapper iframe {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}

.form_step {
    display: flex;
    justify-content: center;
    align-items: center;
    list-style: none;
}

.form_step > li {
    display: block;
    position: relative;
    padding: 1em;
    width: 22%;
    border: 1px solid currentColor;
    font-size: 1.5vw;
    font-weight: bold;
    text-align: center;
    color: #3388dd;
}
.form_step > li:nth-of-type(n + 2) {
    margin: 0px 0px 0px 4%;
}
.form_step > li:nth-of-type(n + 2)::before {
    position: absolute;
    top: 50%;
    left: -1.5em;
    width: 0.5em;
    height: 0.5em;
    border-top: 2px solid #3388dd;
    border-left: 2px solid #3388dd;
    transform: translateY(-50%) rotate(135deg);
    content: "";
}

.form_step > li.form_step_now{
    color: #fff;
    background-color: #3388dd;
}

@media print, (min-width: 992px) {
    .form_step > li {
        font-size: 18px;
    }
}

.pagination {
    display: flex;
    justify-content: center;
    margin: 60px 0px 0px;
}

.pagination > a,
.pagination > span {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 2em;
    height: 2em;
    margin: 30px 0.5em 0px;
    border: 1px solid var(--main-color);
    font-weight: bold;
}

.pagination > a:link,
.pagination > a:visited,
.pagination > a:active,
.pagination > a:hover {
    color: #034aa6;
    text-decoration: none;
}
.pagination > .prev,
.pagination > .next {
    border: 1px solid transparent;
    background-color: transparent;
}
.pagination > .prev:before,
.pagination > .next:before {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0.5em;
    height: 0.5em;
    border-right: 2px solid currentColor;
    border-top: 2px solid currentColor;
    content: "";
}
.pagination > .prev:before {
    transform: translateX(-50%) translateY(-50%) rotate(225deg);
}
.pagination > .next:before {
    transform: translateX(-50%) translateY(-50%) rotate(45deg);
}

.pagination > .current {
    background-color: var(--main-color);
    color: #fff;
}
.btn_link{
    margin: auto;
    display: block;
    width: fit-content;
}
.link_prev,
.link_next {
    position: relative;
    padding: 0px 1em;
}

.link_prev {
    float: left;
}
.link_next {
    float: right;
}

.link_prev:before,
.link_next:after {
    position: absolute;
    top: 50%;
    width: 0.5em;
    height: 0.5em;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    content: "";
}
.link_prev:before {
    left: 0px;
    transform: translateY(-50%) rotate(225deg);
}
.link_next:after {
    right: 0px;
    transform: translateY(-50%) rotate(45deg);
}

.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    padding: 1em 0px;
    list-style: none;
}
.breadcrumb > li {
    position: relative;
    font-size: 14px;
}
.breadcrumb > li:nth-of-type(n + 2) {
    padding: 0px 0px 0px 2.5em;
}
.breadcrumb > li:nth-of-type(n + 2):before {
    position: absolute;
    top: 50%;
    left: 1em;
    width: 0.5em;
    height: 0.5em;
    transform: translateY(-50%) rotate(45deg);
    border-right: 2px solid #dedede;
    border-top: 2px solid #dedede;
    content: "";
}

.list_slash {
    list-style: none;
}

.list_slash > li {
    display: inline-block;
    position: relative;
}
.list_slash > li:not(:last-child)::after {
    margin: 0px 0.5em;
    content: "/";
}

/****************************************
2. Layout 
*****************************************/
.mt1em {
    margin-top: 1em;
}

.mt30 {
    margin-top: 30px;
}

.section {
    padding: 30px 0px 30px 0px;
}

div[class="col"],
div[class^="col-"] {
    margin-top: 30px;
}

.row.no_mt {
    margin-top: -30px;
}

.container {
    width: 100%;
    padding: 0px 16px;
}
@media print, (min-width: 992px) {
    .container {
        margin-left: auto;
        margin-right: auto;
    }
}
@media (min-width: 576px) {
    .container {
        max-width: 100%;
    }
}
@media (min-width: 768px) {
    .container {
        max-width: 100%;
    }
}
@media (min-width: 992px) {
    .container {
        max-width: 100%;
    }
}
@media (min-width: 1100px) {
    .container {
        max-width: 100%;
    }
}
@media (min-width: 1200px) {
    .container {
        max-width: 1230px;
    }
}

.container_s {
    padding: 0px 15px;
    width: 100%;
    margin: auto;
}
/*@media print, (min-width: 992px) {
    .container_s {
        margin-left: auto;
        margin-right: auto;
        width: 80%;
    }
}*/
@media (min-width: 900px) {
    .container_s {
        max-width: 930px;
    }
}

@media print, (min-width: 768px) {
    .col2 {
        display: flex;
        padding: 0px 0px 60px;
    }
    .col2_main {
        order: 2;
        width: 75%;
    }
    .col2_side {
        order: 1;
        margin: 0px 20px 0px 0px;
        width: calc(25% - 20px);
    }
}

@media screen and (max-width: 767.98px) {
    .col2_side {
        margin: 30px 0px 0px;
    }
}


/*-------------------*/
/* 共通               */
/*-------------------*/
.heading-subtitle{
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 0;
}
@media screen and (max-width: 550px) {
    .heading-subtitle{
        margin-bottom: 10px;
    }

}

.heading-title{
    font-size:clamp(24px, 24 / 375 * 100vw ,32px);
    font-weight: bold;
    text-align: center;
    margin-bottom: 1em;
}
.heading-title-middle{
    font-size:clamp(20px, 20 / 375 * 100vw ,24px);
    font-weight: bold;
    text-align: center;
    margin-bottom: 1em;
}

.section-common{
    padding: 80px 0 80px;
}
@media screen and (max-width: 650px) {
    .section-common{
        padding: 50px 0 50px;
    }
}
.bg-gray{
    background-color: #EEEEEE;
}
.red{
    color: var(--red-color);
}
.blue{
    color: var(--main-color);
}
.white{
    color: #fff;
}
.yellow{
    color:#FFDE37
}
.liststyle-none{
    list-style: none;
    padding-left: 0;
}
.border-flame{
    border: 4px solid var(--main-color);
    padding: 24px 16px;
    margin: auto;
}
.label-blue{
    background-color: var(--main-color);
    color: #fff;
    padding: 2px 10px;
    width: fit-content;
}
span.break{
    display: inline-block;
}
.sp-only{
    display: none;
}
/*-------------------*/
/* ファーストビュー    */
/*-------------------*/
.section-mainvisual{
    padding: 0 20px;
    position: relative;
    margin-top: 0;
    overflow-x: hidden;
}

.section-mainvisual::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
    100deg,
    #C2C2C2 0%,
    #F2F2F2 23%,
    #BCBCBC 44%,
    #EFEFEF 77%,
    #797979 100%  );
    background-repeat: no-repeat;
    background-size: cover;
    z-index: -1;
}
.section-mainvisual:before{
    content: "";
    background-image: url('./images/top/fv-image.png');
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    top: -36px;
    left: 0;
    aspect-ratio: 2208/916;
    min-width: 1104px;
    max-width: 1300px;
    width: 76%;
    height: auto;
}
.section-mainvisual-container{
    display: flex;
    justify-content: space-between;
    position: relative;
    z-index: 2;
    max-width: 1284px;
    margin: auto;
}
.fv-main{
    width: 60%;
    max-width: 650px;
    padding-top: 70px;
}
.fv-form{
    width: 40%;
    max-width: 490px;
    margin-top: 16px;
    overflow-y: auto;
    height: 670px;
    border-radius: 5px;
}
.fv-label-wrap{
    display: flex;
    gap: 6px;
    width: fit-content;
    margin: 12px auto;
}
.fv-label{
    font-size: 16px;
    font-size:clamp(13px, 13 / 1200 * 100vw ,16px);
    font-weight: bold;
    color: #fff;
    background-color: #000;
    height: 35px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.num{
    font-size: 150%;
    margin-left: 2px;
    margin-top: 3px;
}
.mark{
    font-size: 18px;
    font-size:clamp(14px, 14 / 1200 * 100vw ,18px);
}
.small{
    font-size: 13px;
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
}
.fv-product-inner{
    display: flex;
    gap: 18px;
}
.fv-main .parts-example-wrap{
    max-width: 508px;
    padding: 8px 3px 0;
}
.fv-main .parts-example-wrap-title{
    font-size:clamp(15px, 15 / 1200 * 100vw ,18px);
    padding: 4px 1.2em;
    margin: 4px auto 0;
}
.fv-main .parts-example-name{
    font-size:clamp(15px, 15 / 1200 * 100vw ,18px);
    padding: 5px 5px;
}
.fv-btn-download{
    display: none;
}
@media screen and (max-width: 1200px) {
    .section-mainvisual {
        margin-top: -10px;
    }
    .fv-product-inner {
        gap: 0;
        width: 80%;
        margin: auto;
    }

}
@media screen and (max-width: 991px) {/*メインビジュアルをSPへ*/
    .section-mainvisual-container{
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .fv-main{
        width: 100%;
    }
    .fv-form{
        display: none;
    }
    .fv-btn-download{
        display: flex;
        margin: 10px auto 36px;
        background-color: #EC2121;
        color: #fff;
        font-size: 16px;
        font-weight: bold;
        text-decoration: none;
        max-width: 340px;
        width: 100%;
        height: 58px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 5px;
        transition: 0.3s;
    }
    .fv-btn-download:hover {
        color: #fff;
            background-color:  #cc1a1a;
    }
    .fv-btn-download::before {
        content: "";
        background-image: url('data:image/svg+xml,%3Csvg%20width%3D%2228%22%20height%3D%2228%22%20viewBox%3D%220%200%2028%2028%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M18.375%2015.1667C18.375%2014.9346%2018.2828%2014.7121%2018.1187%2014.548C17.9546%2014.3839%2017.7321%2014.2917%2017.5%2014.2917H10.5C10.2679%2014.2917%2010.0454%2014.3839%209.88128%2014.548C9.71719%2014.7121%209.625%2014.9346%209.625%2015.1667C9.625%2015.3988%209.71719%2015.6213%209.88128%2015.7854C10.0454%2015.9495%2010.2679%2016.0417%2010.5%2016.0417H17.5C17.7321%2016.0417%2017.9546%2015.9495%2018.1187%2015.7854C18.2828%2015.6213%2018.375%2015.3988%2018.375%2015.1667ZM18.375%2019.8334C18.375%2019.6013%2018.2828%2019.3787%2018.1187%2019.2146C17.9546%2019.0505%2017.7321%2018.9584%2017.5%2018.9584H10.5C10.2679%2018.9584%2010.0454%2019.0505%209.88128%2019.2146C9.71719%2019.3787%209.625%2019.6013%209.625%2019.8334C9.625%2020.0654%209.71719%2020.288%209.88128%2020.4521C10.0454%2020.6162%2010.2679%2020.7084%2010.5%2020.7084H17.5C17.7321%2020.7084%2017.9546%2020.6162%2018.1187%2020.4521C18.2828%2020.288%2018.375%2020.0654%2018.375%2019.8334Z%22%20fill%3D%22white%22%2F%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M8.16671%202.625C7.3158%202.625%206.49975%202.96302%205.89807%203.5647C5.29639%204.16638%204.95837%204.98243%204.95837%205.83333V22.1667C4.95837%2023.0176%205.29639%2023.8336%205.89807%2024.4353C6.49975%2025.037%207.3158%2025.375%208.16671%2025.375H19.8334C20.6843%2025.375%2021.5003%2025.037%2022.102%2024.4353C22.7037%2023.8336%2023.0417%2023.0176%2023.0417%2022.1667V9.296C23.0417%208.8515%2022.897%208.41983%2022.6287%208.06517L19.131%203.43583C18.9407%203.18397%2018.6946%202.97967%2018.412%202.83898C18.1294%202.69829%2017.8181%202.62504%2017.5024%202.625H8.16671ZM6.70837%205.83333C6.70837%205.02833%207.36171%204.375%208.16671%204.375H16.625V9.50483C16.625%209.98783%2017.017%2010.3798%2017.5%2010.3798H21.2917V22.1667C21.2917%2022.9717%2020.6384%2023.625%2019.8334%2023.625H8.16671C7.36171%2023.625%206.70837%2022.9717%206.70837%2022.1667V5.83333Z%22%20fill%3D%22white%22%2F%3E%0A%3C%2Fsvg%3E');
        display: inline-block;
        margin: 0px 0.5em 0px 0px;
        width: 28px;
        height: 28px;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    }
    .fv-product-inner {
        width: 80%;
        margin-left: 30px;
    }
}
@media screen and (max-width: 767px) {
    .section-mainvisual {
        margin-top: 60px;
    }
    .fv-product-inner .product-box2 {
        margin-top: 0;
    }
    .fv-product-inner {
        width: 95%;
        margin: auto;
    }
    .fv-product-inner .product-box1 .product-name {
        bottom: 33%;
        font-size:clamp(9px, 9 / 375 * 100vw ,13px);
    }
    .fv-product-inner .product-box2 .product-name {
        bottom: 34%;
        left: 50%;
        font-size:clamp(9px, 9 / 375 * 100vw ,13px);
    }
    .fv-main .parts-example-name{
        font-size:clamp(13px, 13 / 450 * 100vw ,15px);
        padding: 5px 5px;
    }

}
@media screen and (max-width: 580px) {
    .section-mainvisual:before {
        background-image: url(./images/top/fv-image-sp.png);
        top: -36px;
        aspect-ratio: 750 / 677;
        width: 100%;
        min-width: 0;
        height: auto;
    }

    .fv-label-wrap {
        flex-wrap: wrap;
        width: 310px;
        justify-content: center;
    }
    .main-copy{
        width: 95%;
    }
    .sub-copy{
        width: 95%;
    }
    .fv-label{
        font-size: 12px;
    }
    .fv-product-inner .product-box1 {
        width: 54%;
    }
    .fv-product-inner .product-box2 {
        width: 44%;
    }
}

/*----------------------*/
/* メインビジュアル  FV2   */
/*----------------------*/
.section-mainvisual-fv2{
    overflow: hidden;
}
.section-mainvisual-fv2:before{
    background-image: url('./images/top/fv2/fv2-image.png');
    width: 100%;
    max-width: unset;
}
.section-mainvisual-fv2::after{
    background-image: url('./images/top/fv2/fv2-water.png');
    bottom: 0;
    width: 86%;
    max-width: 1300px;
    background-size: contain;
    height: auto;
    aspect-ratio: 2451 / 1028;
    z-index: 1;
}

.section-mainvisual-fv2 .fv-main {
    max-width: 780px;
}
.section-mainvisual-fv2 .fv-text {
    margin-top: -100px;
}
.section-mainvisual-fv2 .fv-product-inner {
    gap: 0;
}
.section-mainvisual-fv2 .product-box1 .product-name {
    bottom: 32%;
    font-size:clamp(10px, 10 / 375 * 100vw ,13px);
    background-color: #0072E4;
    border-radius: 100px;
}
.section-mainvisual-fv2 .product-box2 .product-name {
    left: 64%;
    bottom: 32%;
    font-size:clamp(10px, 10 / 375 * 100vw ,13px);
    background-color: #0072E4;
    border-radius: 100px;
}
.section-mainvisual-fv2 .fv-label{
    color: #000;
    background-color: #FFDE37;
}
.section-mainvisual-fv2 .fv-label .num {
    color: var(--main-color);
}
.section-mainvisual-fv2 .fv-main .parts-example-wrap {
    max-width: 598px;
}
.section-mainvisual-fv2 .parts-example-wrap,
.section-mainvisual-fv2 .fv-main .parts-example-name,
.section-mainvisual-fv2 .fv-main .parts-example-wrap-title{
    background: var(--main-color);
}
.section-mainvisual-fv2 .fv-main .parts-example-wrap-title{
    font-size: 12px;
    min-width: 168px;
    text-align: center;
}
.section-mainvisual-fv2 .parts-example-wrap{
    margin: -16px auto 32px;
}
@media screen and (min-width: 1800px) {
    .section-mainvisual-fv2::after{
        left: 7vw;
    }
}
@media screen and (max-width: 1200px) {
    .section-mainvisual-fv2 .section-mainvisual-container{
        gap: 30px;
    }
    .section-mainvisual-fv2 .fv-text {
        width: 80%;
        margin: -70px auto 0;
    }
}

@media screen and (max-width: 991px) {
    .section-mainvisual-fv2 .fv-main {
        padding-top: 40px;
    }
    .section-mainvisual-fv2::after{
        width: 120%;
        max-width: 1300px;
    }
    .section-mainvisual-fv2 .product-box2 .product-name    {
        left: 56%;
    }
}
@media screen and (max-width: 580px) {
    .section-mainvisual-fv2 .fv-text {
        width: 90%;
        margin: -50px auto 0;
    }
    .section-mainvisual-fv2 .sub-copy {
        width: 85%;
    }
    .section-mainvisual-fv2 .product-box2 .product-name    {
        left: 46%;
    }
}
@media screen and (max-width: 450px) {
    .section-mainvisual-fv2 .fv-text {
        margin: -30px auto 0;
    }
}

/*-------------------*/
/* ショートMOVIE      */
/*-------------------*/
.section-movie{
    padding: 58px 0 85px;
    background-color: #202020;
    background-image: url(./images/top/movie-bg.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.movie-subtitle{
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    color: #fff;
    margin-bottom: 0;
}
.movie-title{
    font-size: 40px;
    font-weight: bold;
    text-align: center;
    color: #fff;
    margin-bottom: 40px;
}
.movie-video {
    max-width: 700px;
    width: 100%;
    margin: auto;
}
.movie-video video {
    width: 100%;
    height: auto;
}


/*-------------------------*/
/* 部品洗浄機のよくあるお悩み  */
/*-------------------------*/
.section-worries{
    position: relative;
    z-index: 1;
}
.section-worries::after{
    content: "";
    clip-path: polygon(0 0, 50% 100%, 100% 0);
    position: absolute;
    bottom: -34px;
    left: 50%;
    transform: translateX(-50%);
    width: 170px;
    height: 47px;
    background-color: #EEEEEE;
}
.worries-wrap{
    overflow-y: hidden;
    max-width: 100%;
    margin: auto;
}
.worries-title{
    font-size: 32px;
}
.worries-wrap .box{
    margin-top: 0;
}
.worries-wrap .title{
    font-size:clamp(20px, 20 / 1024 * 100vw ,24px);
    font-weight: bold;
    text-align: center;
    padding: 14px 10px;
    color: #fff;
    background-color: #596572;
}
.worries-wrap ul{
    background-color: #fff;
    padding: 16px;
    height: 100%;
    min-height: 162px;
}

.worries-wrap li{
    font-weight: bold;
    margin-bottom: 10px;
    position: relative;
    padding-left: 32px;
}
.worries-wrap li::before{
    content: "";
    background-image: url('data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M9.00004%2020.4199L2.79004%2014.2099L5.62004%2011.3799L9.00004%2014.7699L18.88%204.87988L21.71%207.70988L9.00004%2020.4199Z%22%20fill%3D%22%230A58A9%22%2F%3E%0A%3C%2Fsvg%3E');
    width: 24px;
    height: 24px;
    background-size: contain;
    display: inline-block;
    vertical-align: middle;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);    
}
@media screen and (max-width: 1024px) {
    .worries-wrap .box{
        padding-left: 5px;
        padding-right: 5px;
    }
}
@media screen and (max-width: 767px) {
    .worries-wrap{
        row-gap: 24px;
        max-width: 500px;
        margin: auto;
    }
    .worries-wrap ul{
        height: auto;
        min-height: 0;
    }
    .section-movie {
        background-size: 150%;
        background-position: center 150%;
    }
}
@media screen and (max-width: 580px) {
    .section-movie {
        background-size: 200%;
        background-position: center 150%;
    }
}
/*-------------------------*/
/* そんなときは…  */
/*-------------------------*/
.section-worries-next{
    position: relative;
    background-color: #427EBD;
    padding: 40px 0 67px;
    z-index: 0;
    overflow-x: hidden;

}
.section-worries-next::before{
    content: "";
    background-image: url('./images/top/lineup-bg.png');
    background-repeat: no-repeat;
    background-size: 100%;
    width: 100%;
    height: auto;
    aspect-ratio: 1530/789;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 0;
    opacity: 0.56;
}
.worries-next-subtitle{
    font-size:clamp(24px, 24 / 767 * 100vw ,32px);
    font-weight: bold;
    text-align: center;
    margin-bottom: 0;
    color: #fff;
}
.worries-next-title{
    font-size: 34px;
    font-weight: bold;
    text-align: center;
    margin-top: 0.5em;
    margin-bottom: 60px;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 10px;
    color: #fff;
}
.worries-next-title-inner{
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
}
.worries-next-title .vortenryu{
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size:60px;
    font-weight: bold;
    line-height: 1.2;
}
.worries-next-title .jp{
    font-size: 43%;
}
.worries-next-wrap{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 30px;
}
.worries-next-wrap .inner {
    display: flex;
    justify-content: center;
    gap: 20px;
}
.worries-next-wrap .inner2,
.worries-next-wrap .inner3{
    width: 50%;
}
.worries-next-wrap .inner2{
    justify-content: flex-end;
}
.worries-next-wrap .inner3{
    gap: 50px;
}

.product-box {
    position: relative;
}
.product-name {
    position: absolute;
    bottom: 20%;
    left: 0;
    background-color: #000;
    color: #fff;
    padding: 0 10px;
    font-size:clamp(11px, 11 / 767 * 100vw ,16px);
    white-space: nowrap;
}
.worries-next-wrap .inner1 .product-name {
    font-size:clamp(11px, 11 / 767 * 100vw ,18px);
}
.product-box2 .product-name{
    left: 60%;
}
.product-box3 .product-name{
    left: -50px;
    bottom: 18%;
}

.product-box4 {
    padding-right: 30px;
}
.product-box4 .product-name{
    left: 64%;
    bottom: 24%;
}

.product-box5 {
    padding-left: 80px;
}
.product-box5 .product-name{
    bottom: 58%;
    left: -10px;
}
.product-box6 .product-name{
    left: 30%;
}
@media screen and (max-width: 1040px) {
    .worries-next-wrap {
        max-width: 80%;
        margin: auto;
    }
}
@media screen and (max-width: 767px) {
    .section-worries-next {
        padding: 60px 0 60px;
    }
    .worries-next-title{
        flex-direction: column;
        align-items: center;
        gap: 0;
    }
    .worries-next-title .vortenryu{
        font-size:clamp(38px, 38 / 420 * 100vw ,50px);
    }
    .worries-next-title{
        font-size: 32px;
    }
    .worries-next-wrap .inner2, .worries-next-wrap .inner3 {
        width: 100%;
    }
    .section-worries-next::before {
        background-image: url(./images/top/lineup-bg-sp.png);
        aspect-ratio: 750 / 1258;
        height: 85%;
    }
    .product-name,
    .worries-next-wrap .inner1 .product-name  {
        font-size:clamp(11px, 11 / 550 * 100vw ,16px);
    }
    .product-box1 .product-name{
        bottom: 38%;
    }
    .product-box2 .product-name {
        bottom: 27%;
        left: -10%;
    }
    .product-box3 .product-name {
        left: -60px;
        bottom: 28%;
    }
    .product-box4 .product-name {
        left: -16%;
        bottom: 15%;
    }
    .product-box5 .product-name {
        bottom: 34%;
        left: -60px;
    }
    .product-box6 .product-name {
        left: 39%;
        bottom: 28%;
    }
    .worries-next-wrap .inner2 {
        justify-content: center;
        padding-left: 20px;
        gap: 50px;
    }
    .worries-next-wrap .inner3{
        justify-content: space-evenly;
    }
    .product-box{
        width: 50%;
    }
    .worries-next-wrap .inner3 .product-box{
        width: 40%;
    }
    .product-box2 {
        margin-top: 70px;
    }
    .product-box3 {
        margin-top: -70px;
    }
    .product-box4 {
        padding-right: 0;
    }
    .product-box5 {
        padding-left: 0;
        margin-top: -30px;
    }
    .product-box.product-box1 img{
        min-width: 183px;
    }
    .product-box.product-box2 img{
        min-width: 150px;
    }
    .product-box.product-box3 img{
        min-width: 125px;
    }
    .product-box.product-box4 img{
        min-width: 123px;
    }
}
@media screen and (max-width: 500px) {
    .worries-next-wrap .inner3 .product-box{
        width: 30%;
    }
    .product-box.product-box5 img{
        min-width: 86px;
    }
    .product-box.product-box6 img{
        min-width: 103px;
    }
    .product-box2 {
        margin-top: 40px;
    }
    .product-box5 {
        margin-top: -40px;
    }
    .product-box3 .product-name {
        left: -30px;
        bottom: 32%;
    }
    .product-box5 .product-name {
        bottom: 31%;
        left: -40px;
    }

}
/*-------------------------*/
/* 現場がラクになる3つのポイント  */
/*-------------------------*/
.section-point{
    padding: 60px 0 60px;
    z-index: 0;
}

.point-subtitle{
    font-size:clamp(20px, 20 / 375 * 100vw ,24px);
    font-weight: bold;
    text-align: center;
    background-color: #D3E1F0;
    width: fit-content;
    margin: 0 auto 0;
    padding: 0 16px;
}
.point-title{
    font-size: 32px;
    font-weight: bold;
    text-align: center;
    line-height:1.2;
}
.point-title .blue{
    font-size: 118%;
    font-weight: bold;
    letter-spacing: 0.01em;
}
.point-title .num{
    font-size: 175%;
}
.point-link{
    margin: 40px auto 90px;
}
.point-link a{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-decoration: none;
    aspect-ratio: 276/252;
    width: 100%;
    height: auto;
    min-width: 110px;
    background-color: var(--main-color);
    color: #fff;
    border-radius: 100%;
/*    padding: 40px 0 48px;*/
    transition: 0.3s;
}
.point-link a:hover{
    background-color: #054b96;
    box-shadow: 2px 3px 16px rgba(0, 0, 0, 0.4);
}
.point-link .title{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size:clamp(24px, 24 / 767 * 100vw ,36px);
    font-weight: bold;
    margin-top: 10px;
}
.point-link .title3{
    margin-top: 0;
}
.point-link .num{
    font-family: "Anton", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 31px;
    font-size:clamp(24px, 24 / 767 * 100vw ,31px);
    margin-top: 14%;
}
.point-link .sub{
    font-size: 60%;
    line-height: 1;
    margin-top: 10px;
}
.point-link li a::after{
    content: "";
    clip-path: polygon(0 0, 50% 100%, 100% 0);
    aspect-ratio: 34/22;
    width: 34px;
    height: auto;
    background-color: #fff;
    position: absolute;
    bottom: 14%;
}
.point-num{
    font-family: "Anton", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size:clamp(24px, 24 / 375 * 100vw ,32px);
    color: var(--main-color);
    text-align: center;
}
@media screen and (max-width: 991px) {
    .point-link{
        width: 100%;
        margin: 40px auto 90px;
    }
    .point-link li{
        padding-left: 8px;
        padding-right: 8px;
    }
    .point-link li a::after{
        width: 28px;
    }
}
@media screen and (max-width: 767px) {
    .point-link {
        margin: 40px auto 32px;
    }
    .point-link .num{
        font-size:clamp(15px, 15 / 450 * 100vw ,24px);
    }
    .point-link .title{
        font-size:clamp(16px, 16 / 450 * 100vw ,24px);
    }
    .point-link li a::after{
        width: max(10px,12%);
    }
}
@media screen and (max-width: 560px) {
    .point-title .sp-only{
        display: block;
    }
}
@media screen and (max-width: 500px) {
    .point-subtitle{
        padding: 0 5px;
    }
    .point-title {
        line-height: 1.0;
        margin-top: 16px;
    }
    .point-link li{
        padding-left: 4px;
        padding-right: 4px;
    }
    .point-link .sub{
        font-size: 80%;
    }
    .point-link .title {
        margin-top: 6px;
    }
    .point-link .title3 {
        margin-top: -8px;
    }
    .point-link li a::after {
        width: max(10px, 9%);
    }

}
/*ポイントの白枠内*/
.point-content {
    background-color: #fff;
    padding: 24px;
    margin-bottom: 56px;
}
.point-content .heading-title{
    margin-bottom: 24px;
}
hr.blue {
  border: none;
  height: 2px;
  background: var(--main-color);
  margin-bottom: 24px;
}
.point-content .text{
    margin-bottom: 1em;
    font-weight: bold;
}
.point-content-wrap .box{
    margin-top: 0;
}
.point-content-wrap .point-img{
    width: 100%;
    height: auto;
}
.check-box{
    margin-bottom: 24px;
}
.check-box span{
    color: var(--main-color);
    background-color: #F5F5F5;
    font-weight: bold;
    margin-right: 16px;
    padding: 5px 10px 5px 40px;
    position: relative;
    display: inline-block;
}
.check-box span::before{
    content: "";
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    background-image: url('data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M9.00004%2020.4199L2.79004%2014.2099L5.62004%2011.3799L9.00004%2014.7699L18.88%204.87988L21.71%207.70988L9.00004%2020.4199Z%22%20fill%3D%22%230A58A9%22%2F%3E%0A%3C%2Fsvg%3E');
    background-size: contain;
}
@media screen and (max-width: 767px) {
    .point-content{
        padding: 24px 16px;
    }
    .check-box span{
        display: block;
        width: fit-content;
        margin-bottom: 16px;
    }
}

/*アローフロー*/
.process-container {
  display: flex;
  gap: 0;
  font-weight: bold;
}
.step {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  writing-mode: vertical-rl;
  text-orientation: upright;
  height: 102px;
  width: 55px;
  background-color: var(--main-color);
  color: var(--main-color);
  clip-path: polygon(0% 0%, calc(100% - 20px) 0%, 100% 50%, calc(100% - 20px) 100%, 0% 100%);
  padding-right: 8px;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.25em;
}
.step::before {
  content: "";
  position: absolute;
  inset: 2px;
  background-color: #D9D9D9;
  z-index: -1;
  clip-path: inherit;
}
.step.wash {
  color: #ffffff;
}
.step.wash::before {
  background-color: var(--main-color);
}

.point-content .label-blue{
    display: inline-block;
}
.point-content .kome{
    font-size: 16px;
    font-weight: bold;
    margin-left: 10px;
}
.point-content .list-box{
    margin: 24px 0;
    font-size: 16px;
    font-weight: bold;
    padding-left: 24px;
}
.cleaning-speed-img{
    margin-top: 14px;
}
.point-content .border-flame-inner{
    padding-left: 0;
}
.point-content .border-flame-img{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-right: 0;
}
.point-content .img-box{
    margin: 0 auto 0;
}
.wrap-before-after{
    background-color: #F0F7FD;
    padding: 16px 36px;
    margin-bottom: 32px;
    align-items: center;
}
.before-img,
.after-img{
    border: solid 3px var(--main-color);
    border-bottom: none;
    width: 100%;
}
.after-img{
    border: solid 4px var(--main-color);
}
.box-before .inner{
    padding-right: 50px;
    position: relative;
}
.box-before .inner::after{
    width: 28px;
    height: 37px;
    background-color: var(--main-color);
    position: absolute;
    top: 50%;
    right: -10px;
    transform: translateY(-50%);
    clip-path: polygon(0 0, 0% 100%, 100% 50%);
    content: "";
}
.box-before{
    padding-left: 0;
}
.box-after {
    padding-right: 0;
}
.box-before .label-blue,
.box-after .label-blue{
    width: 100%;
    text-align: center;
}
.box-before .label-blue{
    font-size:clamp(14px, 14 / 375 * 100vw ,18px);
}
.box-after .label-blue{
    font-size:clamp(16px, 16 / 375 * 100vw ,23px);
}
.wrap-for-sp{
    display: flex;
    flex-direction: column;
    gap: 24px;
}
@media screen and (max-width: 991px) {
    .step{
        width: 50px;
        font-size: 16px
    }
    .cleaning-speed-img{
        width: 90%;
    }
}
@media screen and (max-width: 767px) {
    .wrap-for-sp{
        flex-direction: column-reverse;
    }
    .point-content .border-flame-inner{
        padding: 0;
    }
    .point-content .border-flame-img {
        align-items: flex-start;
        padding: 0;
    }
    .cleaning-speed-img{
        width: 50%;
        max-width: 260px;
    }
    .point-content .border-flame{
        gap: 24px;
        width: 100%;
    }
    .step {
        width: 9.0%;
        font-size:clamp(14px, 14 / 450 * 100vw ,16px);
    }
    .process-container {
        justify-content: center;
    }
    .wrap-before-after {
        gap: 40px;
        align-items: center;
    }
    .box-before,.box-after{
        padding: 0;
    }
    .box-before .inner {
        padding-right: 0;
        width: 90%;
        margin: auto;
    }
    .box-before .inner::after {
        width: 28px;
        height: 21px;
        top: unset;
        bottom: -30px;
        left: 50%;
        transform: translateX(-50%);
        clip-path: polygon(0 0, 50% 100%, 100% 0);

    }
}
@media screen and (max-width: 550px) {
    .step {
        width: 9.2%;
        clip-path: polygon(0% 0%, calc(100% - 10px) 0%, 100% 50%, calc(100% - 10px) 100%, 0% 100%);
    }
    .point-content .label-blue {
        display: block;
        width: 100%;
        text-align: center;
    }
    .point-content .list-box {
        margin: 20px 0;
    }
}
@media screen and (max-width: 450px) {
    .step {
        padding-right: 5px;
        clip-path: polygon(0% 0%, calc(100% - 8px) 0%, 100% 50%, calc(100% - 8px) 100%, 0% 100%);
    }
    .point-content3 .heading-title{
        letter-spacing: 0;
    }
}

/*下向き大きな矢印*/
.big-arrow {
    font-size:clamp(24px, 24 / 500 * 100vw ,32px);
    font-weight: bold;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 13px;
    background-image: url('data:image/svg+xml,%3Csvg%20width%3D%22454%22%20height%3D%22158%22%20viewBox%3D%220%200%20454%20158%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M426.898%2066.5H453.797L226.898%20158L0%2066.5H25.8984V0H426.898V66.5Z%22%20fill%3D%22%23F5F5F5%22%2F%3E%0A%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-size: contain;

    background-color: #fff;
    width: 453px;
    height: auto;
    aspect-ratio: 453/158;
    margin: 32px auto 0;
}
.big-arrow .subtitle{
    font-size: 62.5%;
}
@media screen and (max-width: 767px) {
    .big-arrow {
        width: 80%;
        min-width: 320px;
    }
    .big-arrow .subtitle{
        font-size: 75%;
    }

}
@media screen and (max-width: 550px) {
    .big-arrow {
        width: 88%;
    }
}


.label-blue-big{
    font-size:clamp(24px, 24 / 767 * 100vw ,32px);
    font-weight: bold;
    background-color: var(--main-color);
    color: #fff;
    padding: 34px 10px 24px;
    width: 100%;
    text-align: center;
    margin-top: -20px;
}
.wrap-point3-movie{
    background-color: #F0F7FD;
    padding: 32px 37px;
}
.box-leaf{
    position: relative;
    font-size:clamp(14px, 14 / 550 * 100vw ,24px);
    font-weight: bold;
    padding: 10px 50px;
    border: solid 3px var(--main-color);
    width: fit-content;
    text-align: center;
    margin: auto;
    z-index: 1;
    background-color: #fff;
}
.box-leaf::before,
.box-leaf::after{
    content: "";
    position: absolute;
    width: 17px;
    height: 41px;
    top: 6px;
    background-image: url('./images/top/leaf.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.box-leaf::before{
    left: 20px;
}
.box-leaf::after{
    right: 20px;
    transform: rotateY(180deg);
}
@media screen and (max-width: 767px) {
    .box-leaf{
        margin-top: 32px;
        padding: 10px 50px 12px;
    }
    .wrap-point3-movie {
        padding: 32px 16px;
    }
}
@media screen and (max-width: 550px) {
    .box-leaf{
        padding: 10px 50px 10px;
    }
    .box-leaf .sp-only{
        display: block;
    }
    .box-leaf::before,
    .box-leaf::after{
        width: 20px;
        height: 49px;
    }
    .wrap-point3-movie .pc-only{
        display: none;
    }
    .wrap-point3-movie .sp-only{
        display: block;
    }

}
/*-------------------------*/
/* 20年以上の実績。          */
/*-------------------------*/
.section-parts-example{
    background-color: #F4FAFF;
}
.section-parts-example .text{
    font-weight: bold;
    width: fit-content;
    margin: auto;
}
.parts-example-wrap-title{
    color: #fff;
    background: #464646;
    background: linear-gradient(to bottom right, #000000 0%, #464646 100%);
    font-size:clamp(20px, 20 / 767 * 100vw ,24px);
    padding: 5px 1.6em;
    border-radius: 5px;
    width: fit-content;
    margin: 34px auto 0;
    position: relative;
    z-index: 1;
}
.parts-example-wrap{
    background: #464646;
    background: linear-gradient(to bottom right, #000000 0%, #464646 100%);
    padding: 15px 10px 0;
    margin: -22px auto 32px;
}
.parts-example-wrap .box{
    padding: 0 5px;
}
.parts-example-img{
    width: 100%;
    height: auto;
}
.parts-example-name{
    font-size:clamp(20px, 20 / 767 * 100vw ,24px);
    font-weight: bold;
    text-align: center;
    padding: 25px 1em;
    color: #fff;
    background: #464646;
    background: linear-gradient(to bottom right, #000000 0%, #464646 100%);
}

.table-parts-detail{
    border: solid 3px  var(--main-color);
}
.table-parts-detail td, 
.table-parts-detail th {
	border: 1px solid #D4DFE9;
	border-collapse: collapse;
}
.table-parts-detail td, 
.table-parts-detail th {
	padding: 9px 10px 10px 24px;
	width: 30px;
	height: 25px;
}
.table-parts-detail th {
    font-size:clamp(20px, 20 / 767 * 100vw ,24px);
    font-weight: bold;
    background-color: var(--main-color);
    color: #fff;
}
.table-parts-detail tr:nth-child(2) td {
    font-size:clamp(16px, 16 / 767 * 100vw ,24px);
    font-weight: bold;
    background-color: #D4DFE9;
    color: var(--main-color);
    text-align: center;
	border: 1px solid #fff;
    padding: 8px 10px 10px;
}
.table-parts-detail tr:not(:nth-child(2)) td {
    font-size:clamp(16px, 16 / 767 * 100vw ,20px);
    font-weight: bold;
    padding: 12px 4px 12px 24px;
}
.table-parts-detail tr:not(:nth-child(2)) td:first-child {
    color: var(--main-color);
}
.parts-detail-wrap .box:first-child {
    padding-right: 12px;
}
.parts-detail-wrap .box:last-child {
    padding-left: 12px;
}
@media screen and (max-width: 767px) {
    .parts-example-wrap-title{
        font-size: clamp(14px, 14 / 550 * 100vw, 20px);
    }
    .parts-example-name {
        font-size: clamp(13px, 13 / 550 * 100vw, 20px);
        padding: 10px 0;
    }
    .parts-example-wrap {
        padding: 10px 4px 0;
    }
    .parts-detail-wrap{
        gap: 24px;
    }
    .parts-detail-wrap .box:first-child {
        padding-right: 15px;
    }
    .parts-detail-wrap .box:last-child {
        padding-left: 15px;
    }
}

@media screen and (max-width: 550px) {
    .parts-example-wrap .box {
        padding: 0 3px;
    }
    .parts-example-wrap {
        padding: 6px 3px 0;
        margin: -16px auto 32px;
    }
    .table-parts-detail tr:not(:nth-child(2)) td {
        padding: 12px 4px 12px 16px;
    }
}

/*-------------------------*/
/* 導入企業様の声           */
/*-------------------------*/
.section-voice{
    position: relative;
    background: linear-gradient( #F4FAFF 0%, #8FC6F4 100%);
}
.section-voice::before{
    content: "";
    background-image: url('./images/top/voice-bg.png');
    background-size: cover;
    background-position: top;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
}
.parts-example-title{
    position: relative;
    z-index: 2;
}
.voice-content{
    background-color: #fff;
    padding: 24px;
    margin-bottom: 32px;
    position: relative;
    z-index: 2;
}
.voice-wrap{
    align-items: flex-start;
}
.voice-wrap .box{
    position: relative;
}
.voice-wrap .box-img{
    margin-top: 80px;
}
.voice-img{
    position: relative;
    z-index: 0;
    transform: none;
}
.case-num{
    position: absolute;
    top: -24px;
    left: 5px;
    width: 71px;
    height: 71px;
    background-color: var(--main-color);
    color: #fff;
    font-size: 23px;
    font-weight: bold;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    border-radius: 50%;
    z-index: 1;
    line-height: 1;
}
.case-num .case{
    font-size: 13px;
    font-weight: bold;
    text-transform: uppercase;
}
.case-num .case{
    font-size: 56%;
    font-weight: bold;
}
.case-num .num{
    margin-top: -4px;
}
.voice-wrap .heading-title-middle{
    text-align: left;
}
.voice-wrap .heading-title-middle .industry{
    margin-left: 20px;
}
.voice-wrap .title{
    font-size: 18px;
    color: #fff;
    min-width: 85px;
    height: 113px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.voice-wrap .issue .title{
    background-color: #434343;
}
.voice-wrap .result .title{
    background-color: var(--main-color);
}
.voice-wrap .issue,
.voice-wrap .result{
    display: flex;
}
.voice-wrap .issue{
    margin-bottom: 27px;
    position: relative;
    background-color: #434343;
}

.voice-wrap .result{
    background-color: var(--main-color);
}
.voice-wrap .issue::after{
    content: "";
    position: absolute;
    bottom: -25px;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 20px;
    background-color: var(--main-color);
    clip-path: polygon(0 0, 50% 100%, 100% 0);

}
.voice-wrap .issue .text,
.voice-wrap .result .text{
    width: 100%;
    padding: 16px;
    font-weight: bold;
    font-size:clamp(16px, 16 / 1000 * 100vw ,18px);
}
.voice-wrap .issue .text{
    background-color: #EAEAEA;
}
.voice-wrap .result .text{
    background-color: #F0F7FD;
}

.voice-wrap .flame{
    font-size: 18px;
    font-weight: bold;
    border: solid 3px  var(--main-color);
    padding: 24px;
    margin-top: 16px;
    border-radius: 5px;
}
.voice-wrap .flame p:first-child{
    margin-bottom: 0.8em;
}
.voice-wrap .flame .label{
    margin-right: 10px;
}
.bx-pager-link.active{
    background: var(--main-color) !important;
}
.bx-pager-link{
    background: #7d7d7d !important;
}


@media screen and (max-width: 767px) {
    .section-voice{
        padding-bottom: 84px;
    }
    .voice-content {
        padding: 24px 16px;
        margin-top: 12px;
        margin-bottom: 32px;
        max-width: 420px;
    }
    .voice-wrap {
        gap: 16px;
    }
    .voice-wrap .heading-title-middle {
        margin-bottom: 8px;
    }
    .voice-wrap .issue,
    .voice-wrap .result {
        flex-direction: column;
    }
    .voice-wrap .issue .title,
    .voice-wrap .result .title{
        font-size:clamp(16px, 16 / 375 * 100vw ,18px);
        height: auto;
        padding: 4px;
    }
    .voice-wrap .issue {
        margin-bottom: 40px;
    }
    .voice-wrap .issue::after {
        bottom: -30px;
    }
    .voice-wrap .flame .label ,
    .voice-wrap .flame .text{
        margin: auto;
        display: block;
        text-align: center;
    }
    .bx-viewport {
        overflow: visible;
    }
    .voice-wrap .box-img{
        margin-top: 0;
    }
    .voice-img {
        max-width: 80% !important;
    }
    .voice-wrap  .heading-title-middle{
        font-size:clamp(18px, 18 / 375 * 100vw ,20px);
    }
}
@media screen and (max-width: 550px) {
    .voice-content {
        max-width: 315px;
    }
    .case-num {
        top: -32px;
        left: 0px;
    }
}



/*-------------------------*/
/* 導入の流れ           */
/*-------------------------*/
.section-flow{
    background-color: var(--main-color);
    color: #fff;
}
.wrap-step .box{
    background-color: #fff;
    color: var(--main-color);
    max-width: 1062px;
    margin-bottom: 18px;
    padding: 16px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 32px;
    position: relative;
}

.wrap-step .box:not(:last-child)::after{
    content: "";
    position: absolute;
    bottom: -18px;
    left: 100px;
    width: 43px;
    height: 25px;
    clip-path: polygon(0 0, 50% 100%, 100% 0);
    background-color: #fff;
    z-index: 0;
}
.wrap-step .label-blue{
    font-size: 18px;
    font-weight: bold;
    text-transform: uppercase;
    height: fit-content;
    padding: 1px 8px;
}
.wrap-step .title{
    font-size:clamp(18px, 18 / 950 * 100vw ,24px);
    font-weight: bold;
    min-width: 286px;
}
.wrap-step .text{
    font-size:clamp(16px, 16 / 950 * 100vw ,18px);
    font-weight: bold;
    color: #000;
}
.wrap-step .period{
    font-size: 18px;
    font-weight: bold;
}
.section-flow .kome{
    text-align: center;
    margin-top: 32px;
}
/*タイムライン*/
.wrap-step-outer{
    position: relative;
}
.timeline {
    width: 70px;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    top: 0;
    right: 30px;
    height: 62%;
}
.timeline2{
    top: 66%;
    height: 35%;
}
.timeline__circle {
  width: 19px;
  height: 19px;
  background: #fff;
  border-radius: 50%;
}

.timeline__line {
  width: 2px;
  flex-grow: 1;
  background: #fff;
  margin: 0;
}

.timeline__arrow {
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 8px solid #fff;
}

.timeline__label {
  margin-top: 3px;
  font-size:clamp(14px, 14 / 1000 * 100vw ,18px);
  font-weight: bold;
  color: #fff;
  white-space: nowrap;
}
@media screen and (max-width: 1220px) {
    .wrap-step .title {
        min-width: 200px;
    }
    .timeline {
        right: 15px;
        width: 56px;
    }
    .wrap-step .box{
        width: 90%;
        gap: 12px;
    }
}

@media screen and (max-width: 1000px) {
    .wrap-step .title {
        min-width: 160px;
    }
}
@media screen and (max-width: 767px) {
    .timeline__label {
        font-size:clamp(14px, 14 / 500 * 100vw ,18px);
    }
    .wrap-step .title{
        font-size:24px;
        width: 100%;
    }
    .wrap-step .text{
        font-size:18px;
    }
    .wrap-step .box{
        flex-wrap: wrap;
        width: 78%;
        margin-left: auto;
        gap: 6px;
    }
    .wrap-step-outer .inner{
        width: 100%;
    }
    .wrap-step-outer {
        max-width: 600px;
    }
    .timeline {
        left: 3%;
        top: 5px;
        height: 62.5%;
    }
    .timeline2 {
        top: 65.5%;
        height: 34.5%;
    }
    .section-flow .kome p{
        margin-bottom: 0.5em;
        text-align: left;
    }
}
@media screen and (max-width: 500px) {
    .timeline {
        left: 2%;
        height: 62%;
    }
    .timeline2 {
        top: 64.0%;
        height: 36%;
    }
}

/*-------------------------*/
/* 購入後のアフターサポート    */
/*-------------------------*/
.section-support{
    background-color: #FAF6E7;
}

.section-support .heading-title-middle{
    font-size:clamp(14px, 14 / 767 * 100vw ,18px);
    color: var(--main-color);
    margin-bottom: 10px;
}
.section-support .heading-title-middle span{
    display: block;
    font-family: "Anton", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 20px;
    font-size:clamp(16px, 16 / 767 * 100vw ,20px);

}
.support-wrap .box{
    padding-left: 18px;
    padding-right: 18px;
    margin-top: 0;
}
.support-wrap .box .inner{
    background-color: #fff;
    border: solid 3px var(--main-color);
    padding: 14px 16px;
    height: 100%;
}
.support-wrap .text{
    font-size:clamp(16px, 16 / 767 * 100vw ,20px);
    font-weight: bold;
    margin-top: 16px;
    text-align: center;
}
.support-list{
    width: fit-content;
    margin: 16px auto 0;
}
.support-list li{
    font-size: 16px;
    font-weight: bold;
    line-height: 1.5;
}
@media screen and (max-width: 1024px) {
    .support-wrap {
        width: 100%;
        margin: auto;
    }
    .support-wrap .box {
        padding-left: 8px;
        padding-right: 8px;
    }
}
@media screen and (max-width: 767px) {
    .support-wrap .text .sp-only{
        display: block;
    }
    .support-wrap .text .pc-only{
        display: none;
    }
}
@media screen and (max-width: 660px) {
    .support-wrap{
        flex-wrap: wrap;
        justify-content: center;
        row-gap: 16px;
    }
    .support-wrap .box:last-child{
        max-width: 100%;
        width: 100%;
        flex: 0 0 100%;
    }
    .support-wrap .box:not(last-child) {
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 50%;
        max-width: 50%;
    }
    .support-wrap .box .inner {
        width: clamp(163px ,43vw,194px);
        margin: auto;
        padding: 14px 3px;
    }
    .support-wrap .box:nth-child(1) {
        padding-left: 0;
    }
    .support-wrap .box:nth-child(2) {
        padding-right: 0;
    }
    .support-wrap .box:nth-child(1) .inner {
        margin-right: 0;
    }
    .support-wrap .box:nth-child(2) .inner {
        margin-left: 0;
    }
    .icon-suport-img{
        width: 80%;
    }
    .support-list li {
        margin-bottom: 0.5em;
    }
}
/*-------------------------*/
/* よくある質問    */
/*-------------------------*/
.faq-wrap{
    max-width: 772px;
    margin: 0 auto 32px;
}
.faq-wrap:last-child{
    margin: 0 auto 0;
}

.question{
    background-color: var(--main-color);
    color: #fff;
    font-size:clamp(20px, 20 / 767* 100vw ,24px);
    padding: 16px 16px 16px 84px;
    position: relative;
}
.question::before{
    content: "Q";
    background-color: #fff;
    color:  var(--main-color);
    font-size:22px;
    border-radius: 100px;
    width: 36px;
    height: 36px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 50%;
    left: 24px;
    transform: translateY(-50%);
}
.answer{
    background-color: #F4F4F4;
    padding: 16px 24px 18px;
}
@media screen and (max-width: 767px) {
    .question {
        padding: 16px 16px 16px 60px;
    }
    .answer{
        padding: 16px 16px 18px;
    }
    .question::before{
        left: 16px;
    }
}

@media screen and (max-width: 550px) {
    .faq-wrap .pc-only{
        display: none;
    }
}

/*-------------------------*/
/* 製品ラインナップ    */
/*-------------------------*/
.section-lineup{
    background-color: var(--main-color);
    padding-bottom: 103px;
    position: relative;
    overflow-x: hidden;
}
.section-lineup::before{
    content: "";
    background-image: url('./images/top/lineup-bg2.png');
    background-repeat: no-repeat;
    background-size: 100%;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
}
.lineup-title{
    font-size: 32px;
}
.section-lineup .title{
    font-family: "Noto Serif JP", serif;
    font-weight: 700;
    font-size: 40px;
    font-size:clamp(28px, 28 / 900 * 100vw ,40px);
    color: var(--main-color);
}
.lineup-wrap {
    display: flex;
    align-items: flex-end;
    padding: 16px 16px 42px 64px;
    background: #ffffff;
    background: linear-gradient( #ffffff00 0%, #ffffff 37%, #ffffff 100%);
    position: relative;
    max-height: 222px;
    height: 23vw;
    margin-top: 58px;
    transition: 0.3s;
    text-decoration: none;
}
.lineup-wrap:hover{
    opacity: 0.8;
}
.lineup-wrap .box{
    display: flex;
    position: absolute;
}
.lineup-wrap1 .box{
    left: 45%;
    top: 10px;
}
.lineup-wrap2 .box{
    left: 9%;
    top: 10px;
    gap: 20px;
}
.lineup-wrap3 .box{
    left: 55%;
    top: 0px;
    gap: 57px;
}


.lineup-wrap2{
    flex-direction: row-reverse;
}


.lineup-wrap .title{
    position: relative;
    flex-basis: 40%;
}
.lineup-wrap .title::before{
    content: "";
    background-size: contain;
    background-repeat: no-repeat;    
    position: absolute;
    top: -16px;
    left: 3px;
}
.lineup-wrap1 .title::before{
    background-image: url('./images/common/mark01.png');
    width: 154px;
    height: 18px;
}
.lineup-wrap2 .title::before{
    background-image: url('./images/common/mark02.png');
    width: 75px;
    height: 18px;
}

.lineup-wrap3 .title {
    text-align: center;
    flex-basis: 55%;
}
@media screen and (max-width: 1200px) {
    .lineup-wrap .box {
        width: 44%;
    }
    .lineup-wrap3 .box {
        gap: 38px;
        width: 38%;
    }

}
@media screen and (max-width: 991px) {
    .lineup-wrap{
        padding: 16px 4px 42px 20px;
    }
}
@media screen and (max-width: 767px) {
    .lineup-wrap {
        padding: 16px 16px 16px 16px;
        width: 550px;
        margin: 160px auto 0;
    }
    .lineup-wrap .title {
        flex-basis: 100%;
        text-align: center;
        font-size:clamp(24px, 24 / 375 * 100vw ,28px);
    }
    .lineup-wrap .box {
        width: 100%;
        max-width: 450px;
        justify-content: center;
        top: -90px;
        left: 50%;
        transform: translateX(-50%);
    }
    .lineup-wrap2 .box {
        width: 62%;
        top: -140px;
    }
    .lineup-wrap3 .box {
        width: 50%;
        top: -130px;
    }

    .lineup-wrap .product-box1 {
        width: 58%;
    }
    .lineup-wrap .product-box2,
    .lineup-wrap .product-box3 {
        margin-top: 0;
    }
    .lineup-wrap .product-box5 {
        width: 43%;
        margin-top: -5px;
    }



    .lineup-wrap .product-box2 .product-name {
        bottom: 38%;
        left: 35%;
    }
    .lineup-wrap .product-box3 .product-name {
        left: -63px;
        bottom: 16%;
    }
    .lineup-wrap .product-box4 .product-name {
        left: 42%;
        bottom: 16%;
    }
    .lineup-wrap .product-box5 .product-name {
        left: -90px;
        bottom: 34%;
    }
    .lineup-wrap .product-box6 .product-name {
        left: 40%;
        bottom: 35%;
    }

    .lineup-wrap .title::before{
        top: -19px;
        left: 50%;
        transform: translateX(-50%);
    }

    .section-lineup .container{
        margin-top: -30px;
    }
    .section-lineup::before {
        background-size: 200%;
    }

}
@media screen and (max-width: 690px) {
    .section-lineup{
         padding-bottom: 50px;
    }
    .section-lineup::before{
        background-size: 100% 100%;
        background-image: url('./images/top/lineup-bg2-sp.png');
        bottom: 0;
        top: unset;
    }

    .lineup-wrap {
        max-width: 550px;
        width: 100%;
        height: 170px;
    }
    .lineup-wrap3 .box {
        width: 50%;
        top: -116px;
    }
    .lineup-wrap .product-box .product-name{
        display: none;
    }
    .sp-only.lineup-wrap-product-name{
        width: 100%;
        display: flex;
        justify-content: space-between;
        padding: 0 30px;
        position: absolute;
        top: 20px;
        left: 0;
    }
    .sp-only.lineup-wrap-product-name .product-name{
        position: unset;
    }
}
@media screen and (max-width: 550px) {


    .lineup-wrap {
        height: 150px;
        min-width: 310px;
    }
    .lineup-wrap1 .box {
        top: -70%;
    }

    .lineup-wrap2 .box {
        width: 320px;
        top: -140px;
    }
    .lineup-wrap3 .box {
        top: -120px;
        width: 250px;
    }
    .sp-only.lineup-wrap-product-name{
        padding: 0 0;
    }
}

@media screen and (max-width: 450px) {
    .lineup-wrap1 .box {
        top: -62px;
        width: 340px;
    }
}
/*-------------------------*/
/* 新着情報    */
/*-------------------------*/
.news-link{
    text-decoration: none;
    color: #000;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 16px 0;
}
.news-list{
    max-width: 880px;
    margin: auto;
    border-top: solid 1px #98A1AA;
}
.news-item{
    border-bottom: solid 1px #98A1AA;
}
.news-item .news-title{
    font-weight: bold;
    margin-left: 12px;
    display: block;
}
.news-item .news-date{
    font-size: 16px;
    font-weight: bold;
}
.news-item .news-category{
    background-color: var(--main-color);
    color: #fff;
    font-size: 13px;
    font-weight: bold;
    padding: 4px 15px;
    white-space: nowrap;
    height: 28px;
}
@media screen and (max-width: 767px) {
    .news-link {
        flex-wrap: wrap;
        gap: 16px;
    }
    .news-item .news-title {
        width: 100%;
        margin-left: 0;
    }
    .news-item .news-category {
        font-size: 11px;
        padding: 4px 15px;
        height: 24px;
    }
}
/*-------------------------*/
/* フッター上のCTAセクション   */
/*-------------------------*/
.section-footer-cta{
    background-color: var(--main-color);
    position: relative;
}
.section-footer-cta::before{
    content: "";
    background-image: url('./images/common/footer-cta-bg.png');
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
}

/*共通CTAボタン*/
.footer-cta{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 34px;
}
.btn-download,
.btn-contact{
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    font-weight: bold;
    text-decoration: none;
    padding: 15px;
    border-radius: 5px;
    position: relative;
    max-width: 434px;
    width: 45%;
    height: 58px;
    transition: 0.3s;
}
.btn-download{
    background-color: var(--red-color);
    color: #fff;
}
.btn-contact{
    background-color: #fff;
    color: var(--main-color);
}
.btn-download::before,
.btn-contact::before{
    content: "";
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
    margin-right: 8px;
}
.btn-download::before{
    background-image: url('data:image/svg+xml,%3Csvg%20width%3D%2228%22%20height%3D%2228%22%20viewBox%3D%220%200%2028%2028%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M18.375%2015.167C18.375%2014.9349%2018.2828%2014.7124%2018.1187%2014.5483C17.9546%2014.3842%2017.7321%2014.292%2017.5%2014.292H10.5C10.2679%2014.292%2010.0454%2014.3842%209.88128%2014.5483C9.71719%2014.7124%209.625%2014.9349%209.625%2015.167C9.625%2015.3991%209.71719%2015.6216%209.88128%2015.7857C10.0454%2015.9498%2010.2679%2016.042%2010.5%2016.042H17.5C17.7321%2016.042%2017.9546%2015.9498%2018.1187%2015.7857C18.2828%2015.6216%2018.375%2015.3991%2018.375%2015.167ZM18.375%2019.8337C18.375%2019.6016%2018.2828%2019.379%2018.1187%2019.2149C17.9546%2019.0508%2017.7321%2018.9587%2017.5%2018.9587H10.5C10.2679%2018.9587%2010.0454%2019.0508%209.88128%2019.2149C9.71719%2019.379%209.625%2019.6016%209.625%2019.8337C9.625%2020.0657%209.71719%2020.2883%209.88128%2020.4524C10.0454%2020.6165%2010.2679%2020.7087%2010.5%2020.7087H17.5C17.7321%2020.7087%2017.9546%2020.6165%2018.1187%2020.4524C18.2828%2020.2883%2018.375%2020.0657%2018.375%2019.8337Z%22%20fill%3D%22white%22%2F%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M8.16634%202.625C7.31544%202.625%206.49939%202.96302%205.89771%203.5647C5.29603%204.16638%204.95801%204.98243%204.95801%205.83333V22.1667C4.95801%2023.0176%205.29603%2023.8336%205.89771%2024.4353C6.49939%2025.037%207.31544%2025.375%208.16634%2025.375H19.833C20.6839%2025.375%2021.5%2025.037%2022.1016%2024.4353C22.7033%2023.8336%2023.0413%2023.0176%2023.0413%2022.1667V9.296C23.0413%208.8515%2022.8967%208.41983%2022.6283%208.06517L19.1307%203.43583C18.9404%203.18397%2018.6942%202.97967%2018.4117%202.83898C18.1291%202.69829%2017.8177%202.62504%2017.502%202.625H8.16634ZM6.70801%205.83333C6.70801%205.02833%207.36134%204.375%208.16634%204.375H16.6247V9.50483C16.6247%209.98783%2017.0167%2010.3798%2017.4997%2010.3798H21.2913V22.1667C21.2913%2022.9717%2020.638%2023.625%2019.833%2023.625H8.16634C7.36134%2023.625%206.70801%2022.9717%206.70801%2022.1667V5.83333Z%22%20fill%3D%22white%22%2F%3E%0A%3C%2Fsvg%3E');
    width: 28px;
    height: 28px;
}
.btn-contact::before{
    background-image: url('data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M4%2020C3.45%2020%202.97933%2019.8043%202.588%2019.413C2.19667%2019.0217%202.00067%2018.5507%202%2018V6C2%205.45%202.196%204.97933%202.588%204.588C2.98%204.19667%203.45067%204.00067%204%204H20C20.55%204%2021.021%204.196%2021.413%204.588C21.805%204.98%2022.0007%205.45067%2022%206V18C22%2018.55%2021.8043%2019.021%2021.413%2019.413C21.0217%2019.805%2020.5507%2020.0007%2020%2020H4ZM12%2013L4%208V18H20V8L12%2013ZM12%2011L20%206H4L12%2011ZM4%208V6V18V8Z%22%20fill%3D%22%230A58A9%22%2F%3E%0A%3C%2Fsvg%3E');
    width: 24px;
    height: 24px;
}
.btn-download::after,
.btn-contact::after{
    content: "";
    background-repeat: no-repeat;
    background-size: contain;
    width: 6px;
    height: 8px;
    display: inline-block;
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
}
.btn-download::after{
    background-image: url('data:image/svg+xml,%3Csvg%20width%3D%228%22%20height%3D%2210%22%20viewBox%3D%220%200%208%2010%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M0.608398%200.838867L6.25455%204.50553L0.608398%208.83887%22%20stroke%3D%22white%22%20stroke-width%3D%222%22%2F%3E%0A%3C%2Fsvg%3E');    background-repeat: no-repeat;
}
.btn-contact::after{
    background-image: url('data:image/svg+xml,%3Csvg%20width%3D%228%22%20height%3D%2210%22%20viewBox%3D%220%200%208%2010%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M0.608398%200.838867L6.25455%204.50553L0.608398%208.83887%22%20stroke%3D%22%230A58A9%22%20stroke-width%3D%222%22%2F%3E%0A%3C%2Fsvg%3E');
}
.btn-download:hover {
    color: #fff;
    background-color:  #cc1a1a;

}
.btn-contact:hover {
    color: var(--main-color);
    background-color: #e4e4e4;
}
@media screen and (max-width: 1060px) {
    .footer-cta {
        gap: 16px;
    }
    .btn-download, .btn-contact {
        width: 40%;
    }
}
@media screen and (max-width: 600px) {
    .footer-cta {
        flex-direction: column;
        gap: 8px;
    }
    .section-footer-cta .btn-download,
    .section-footer-cta .btn-contact{
        max-width: 343px;
        width: 100%;
    }
}
/*-------------------------*/
/* 共通：バナーエリア         */
/*-------------------------*/
.section-banner{
    padding: 50px 15px;
}
.banner{
    display: block;
    background-image: url('./images/common/banner-bg.jpg');
    background-size: cover;
    background-position: right;
    background-repeat: no-repeat;
    padding: 38px 16px 26px 140px;
    max-width: 900px;
    width: 100%;
    height: auto;
    aspect-ratio: 900/250;
    margin: auto;
    position: relative;
    border-radius: 5px;
    border: solid 4px var(--main-color);
    box-shadow: 2px 4px 20px rgba(45, 104, 185, 0.28);
    color: #000;
    text-decoration: none;
    transition: 0.3s;
}
.banner:hover {
    box-shadow: 2px 4px 30px rgba(45, 103, 185, 0.5);
}
.banner:hover .banner-books{
    transform: rotate(-3deg);
}
.banner-books{
    position: absolute;
    bottom: -34px;
    left: -86px;
    width: 233px;
    height: auto;
    filter: drop-shadow(2px 4px 9px rgba(0, 0, 0, 0.14));
    transition: 0.3s;
}
.banner .banzai{
    font-size: 16px;
    font-weight: bold;
    color: #000;
}
.banner .banzai .num{
    font-size: 125%;
}
.banner .title{
    font-size: 33px;
    font-weight: bold;
    letter-spacing: 0.01em;
    color: #000;
    margin-bottom: 8px;
}
.banner .title .dot{
    position: relative;
    display: inline-block;
}
.banner .title .dot::before{
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 100%;
    background-color: var(--main-color);
    display: inline-block;
    margin: 0 4px;
    position: absolute;
    top: -4px;
    left: 48%;
    transform: translateX(-50%);
}
.wrap-download {
    width: 50%;
}

.banner .btn-download{
    background: #9C2929;
    background: linear-gradient( #EC2121 0%, #9C2929 100%);
    font-size: 16px;
    padding: 12px;
    width: 100%;
}
.banner .btn-download::before{
    content: none;
}
.free{
    font-size: 17px;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    border-radius: 100%;
    background-color: #FFCC00;
    color: #000;
    position: absolute;
    top: -16px;
    left: -10px;
}
/*バンザイ共通*/
.banzai {
    display: flex;
    justify-content: center;
    align-items: center;
}
.banzai::before,
.banzai::after {
    width: 1px;
    height: 22px;
    background-color: #000000;
    content: '';
}
.banzai::before {
    transform: rotate(334deg);
    margin-right: 12px;
}
.banzai::after {
    transform: rotate(-334deg);
    margin-left: 12px;
}
@media screen and (max-width: 1024px) {
    .banner{
        padding: 38px 16px 26px 120px;
        width: 90%;
    }
    .banner .title {
        font-size: 28px;
    }
    .banner-books{
        left: -6%;
        max-width: 180px;
        width: 23%;
    }
}
@media screen and (max-width: 767px) {
    .section-banner {
        padding: 40px 16px 90px;
    }
    .banner{
        border-bottom: none;
        padding: 28px 0 6px 0;
    }
    .banner .title {
        font-size: clamp(20px, 20 / 375 * 100vw, 28px);
        padding-left: 8%;
    }
    .banner-books {
        z-index: 1;
        width: 20%;
        left: -4.5%;
        bottom: -78px;
    }
    .wrap-download {
        width: 101%;
    }
    .banner .btn-download {
        width: calc(100% + 8px);
        max-width: unset;
        border-radius: 0 0 5px 5px;
        justify-content: flex-start;
        padding-left: 130px;
        position: absolute;
        left: -4px;
        bottom: -56px;
    }
    .free {
        z-index: 1;
        left: 54px;
        top: -21px;
    }
    .banner .banzai {
        justify-content: flex-start;
        padding-left: 120px;
    }
}

@media screen and (max-width: 600px) {
    .banner .title {
        padding-left: 20px;
    }

    .banner .btn-download {
        padding-left: 20%;
        width: calc(100% + 4px);
        left: -2px;
    }
    .banner{
        background-image: url('./images/common/banner-bg-sp.jpg');
        padding: 12px 0 0 0;
        width: 100%;
        border: solid 2px var(--main-color);
        border-bottom: none;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
    }

    .free {
        left: 6%;
    }
    .banner .banzai{
        font-size:clamp(10px, 10 / 375 * 100vw ,12px);
        padding-left: 20%;
    }
    .banzai::before, .banzai::after {
        height: 16px;
    }
    .banzai::before {
        margin-right: 8px;
    }
    .banzai::after {
        margin-left: 8px;
    }
}
@media screen and (max-width: 500px) {
    .section-banner {
        padding: 24px 16px 64px;
    }
    .banner .btn-download {
        padding-left: 18%;
        height: 46px;
        bottom: -44px;
    }
    .banner-books {
        min-width: 65px;
        width: 17%;
        left: -4%;
        bottom: -57px;
    }
    .free {
        top: -12px;
        left: 9%;
        font-size: 10px;
        width: 31px;
        height: 31px;
    }
    .banner .banzai {
        padding-left: 18%;
    }
    .banner .title {
        margin-bottom: 0;
    }
}
@media screen and (max-width: 400px) {
    .free {
        left: 10%;
    }
}
/*-------------------------*/
/* 製品情報ページ            */
/*-------------------------*/
.product-nav-container {
    background-color: #EEEEEE;
    padding: 32px 0;
}
.product-nav-list {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: min(40px,2.7vw);
    list-style: none;
    padding: 0;
}
.product-nav-item:first-child a{
    padding-left: 42px;
}
.product-nav-link {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 7px 16px 7px 13px;
    background: #fff;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.product-nav-link:hover {
    background-color: #f9f9f9;
}

.product-nav-icon {
    width: auto;
    height: 58px;
    margin-right: 6px;
    object-fit: contain;
}

.product-nav-text {
    color: var(--main-color);
    font-weight: bold;
    font-size: 18px;
    margin-right: 16px;
}

.arrow-down {
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 8px solid var(--main-color);
}

@media screen and (max-width: 1200px) {
    .product-nav-list {
        gap: 16px;
    }
    .product-nav-text {
        font-size: 16px;
    }
    .product-nav-item:first-child a {
        padding-left: 24px;
    }

}
@media (max-width: 767px) {
    .product-nav-list {
        gap: 8px;
    }
    .product-nav-item {
        width: 100%;
        min-width: 343px;
        max-width: 400px;
        height: 56px;
    }
    .product-nav-item:first-child a {
        padding-left: 16px;
    }
    .product-nav-item:first-child a .product-nav-text{
        margin: auto;
        padding-left: 36px;
    }
    .product-nav-icon {
        margin-right: unset;
        margin-left: 0;
    }
    .product-nav-link {
        justify-content: space-between;
        padding: 7px 20px 7px 12px;
    }
}

.section-products{
    background-color: #DDE6F1;
}
.product-title-container{
    background-color: var(--main-color);
    padding-left: 52px;
    padding-bottom: 50px;
    width: 100%;
    max-height: 359px;
    height: 25vw;

    display: flex;
    align-items: flex-end;
    position: relative;
    overflow: hidden;
}
.product-title-container::before{
    content: "";
    background-image: url('./images/products/inspiral-title.png');
    background-size: contain;
    background-repeat: no-repeat;    
    position: absolute;
    bottom: 0;
    right: 0;
    width: auto;
    height: 98%;
    aspect-ratio: 1023/689;
}
.product-title-container.batch::before{
    background-image: url('./images/products/batch-washer-title.png');
    width: auto;
    height: 100%;
    right: 24px;
    aspect-ratio: 1036/718;
}
.product-title-container.pure-water::before{
    background-image: url('./images/products/pure-water-title.png');
    width: auto;
    height: 100%;
    right: 24px;
    aspect-ratio: 1276/718;
}

.product-title{
    font-family: "Noto Serif JP", serif;
    font-weight: 700;
    font-size:clamp(32px, 32 / 767 * 100vw ,56px);
    color: #fff;
    position: relative;
    
}
.product-title::before{
    content: "";
    background-image: url('./images/common/mark01.png');
    background-size: contain;
    background-repeat: no-repeat;    
    position: absolute;
    top: -22px;
    left: 3px;
    width: 239px;
    height: 28px;
}
.product-title.batch::before{
    background-image: url('./images/common/mark02.png');
    width: 120px;
    height: 28px;
}
.product-title.pure-water::before{
    content: none;
}
.product-detail-container{
    background-color: #fff;
    padding: 56px 0;
}
.product-detail-wrap .box{
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.product-detail-wrap .label{
    background-color: #000;
    color: #fff;
    font-size: 24px;
    padding: 0 16px;
    width: fit-content;
    margin: 16px auto 0;
}
.product-detail-container .text{
    margin: 24px auto 32px;
    width: fit-content;
}
@media screen and (max-width: 767px) {
    .product-title-container{
        padding: 56px 18px 32px;
        height: auto;
    }
    .product-title-container::before {
        content: none;
    }

    .product-title{
        font-size:clamp(32px, 32 / 500 * 100vw ,42px);
    }
    .product-title::before{
        width: 50vw;
    }
    .product-title.batch::before{
        width: 25vw;
    }
    .product-title-container.pure-water {
        padding: 32px 18px 32px;
    }
}
/* 製品情報テーブル */
.spec-table-container {
    width: 100%;
    overflow-x: auto;
    margin: 32px 0;
}
.spec-table-container-fixed{
    overflow-x: auto;
}
.spec-table-container-fixed .spec-table{
    min-width: 675px;
}
.spec-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 16px;
    border: solid 3px var(--main-color);
}
.spec-table .small{
    font-size: 14px;
    display: inline-block;
}

.spec-table th,
.spec-table td {
    border: 1px solid #D4DFE9;
    padding: 11px 10px 12px 20px;
    text-align: center;
    vertical-align: middle;
}
.spec-table td {
    text-align: left;
}
.spec-table td.center{
    text-align: center;
}

.spec-table thead th {
    background: var(--main-color);
    color: #fff;
    font-weight: bold;
    font-size:clamp(20px, 20 / 767 * 100vw ,24px);
}
.spec-table tbody th {
    background: #fff;
    color: var(--main-color);
    text-align: left;
    font-weight: bold;
}
/* サブヘッダー（テクニカルデータ等） */
.spec-table thead .spec-sub-header th {
    background-color: #D4DFE9; /* 薄い青 */
    color: var(--main-color);
    padding: 10px;
    font-size: 20px;
}
.spec-table thead .spec-sub-header th:first-child {
    border-right: solid 1px #fff;
}
.spec-table-container-fixed .spec-table thead .spec-sub-header th {
    font-size: 18px;
}
/* 偶数行の背景色 */
.spec-table tbody tr:nth-child(even) th,
.spec-table tbody tr:nth-child(even) td {
    background-color: #F2F5F8;
}

/* 製品ページのカタログダウンロードボタン */
.product-detail-container .btn-download {
    font-size: 20px;
    margin: auto;
    display: flex;
    justify-content: flex-start;
    padding-left: 42px;
    max-width: 467px;
    width: 100%;
}
.product-detail-container .btn-download::before{
    content: none;
}
.product-detail-container .btn-download::after{
    background-image: url('data:image/svg+xml,%3Csvg%20width%3D%2212%22%20height%3D%2216%22%20viewBox%3D%220%200%2012%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M11.25%207.79419L0%20-3.8147e-05V15.5884L11.25%207.79419Z%22%20fill%3D%22white%22%2F%3E%0A%3C%2Fsvg%3E');
    width: 18px;
    height: 15px;
}

/* インスパイラル洗浄機の特長・機能 */
.feature-wrap{
    margin-top: 32px;
}
.feature-wrap .title{
    font-size:clamp(18px, 18 / 1000 * 100vw ,20px);
    margin-bottom: 16px;
    color: var(--main-color);
    display: flex;
    align-items: center;
    gap: 8px;

}
.feature-wrap .text{
    font-size:clamp(16px, 16 / 1000 * 100vw ,18px);
}
.feature-wrap .title .num{
    background-color: var(--main-color);
    color: #fff;
    border-radius: 5px;
    line-height: 1;
    padding: 5px 6px;
    font-size: 20px;
    height: fit-content;
}
.feature-box{
    padding-left: 8px;
    padding-right: 8px;
    margin-bottom: 16px;
}

.inner-box{
    display: flex;
    gap: 16px;
    padding: 22px 16px 22px 8px;
    background-color: #fff;
    box-shadow: 0px 0px 32px 0px rgba(17, 76, 137,0.17);
}
.inner-box .feature-img{
    width: 33%;
}
.inner-box .feature-text{
    width: 67%;
}
@media screen and (max-width: 991px) {
    .feature-wrap {
        max-width: 820px;
        margin: 32px auto 0;
    }
    .feature-wrap .title{
        font-size:20px;
    }
    .feature-wrap .text{
        font-size:clamp(16px, 16 / 767 * 100vw ,18px);
    }
    .inner-box .feature-img {
        width: 26%;
    }
    .inner-box .feature-text {
        width: 74%;
    }

}
@media screen and (max-width: 767px) {
    /*インスパイラル洗浄機のテーブルのみ横スライド*/
    .spec-table-container-fixed{
        padding-bottom: 16px;
    }
    .spec-table-container-fixed .spec-table thead .spec-sub-header th:first-child{
        padding-left: 0;
        padding-right: 0;
    }
    .spec-table-container-fixed  colgroup col:first-child{
        width: 160px !important;
    }
    .spec-table-container-fixed  colgroup col:not(:first-child){
        width: calc((100% - 160px) / 2) !important;
    }
}
@media screen and (max-width: 600px) {
    .inner-box {
        flex-direction: column;
        align-items: center;
        padding: 16px;
    }
    .inner-box .feature-img ,
    .inner-box .feature-text {
        width: 100%;
    }
}

/*---------------------------------------*/
/* VORTENRYUの由来 */
/*---------------------------------------*/
.section-origin{
    background-color: #202020;
    position: relative;
}
.section-origin::before{
    content: "";
    background-image: url('./images/products/origin-bg.png');
    background-size: contain;
    background-repeat: no-repeat;    
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    aspect-ratio: 1440/650;
    z-index: 0;
}
.section-origin .container_s{
    position: relative;
    z-index: 1;
    padding: 24px 24px 10px;
    background-color: rgb(88, 88, 88,0.55);
}
.section-origin .heading-title{
    position: relative;
    z-index: 1;
}
.section-origin .title{
    font-size: 20px;
    color: #fff;
    margin: 32px auto ;
    text-align: center;
}
.section-origin .text{
    color: #fff;
}
.section-origin .text p{
    font-size:clamp(16px, 16 / 767 * 100vw ,18px);
    margin-bottom: 1em;
}
@media screen and (max-width: 767px) {
    .section-origin::before{
        top: 18%;
        left: -50%;
        width: 300%;
    }
    .section-origin .container_s{
        padding: 24px 16px 8px;
    }
   
}


/****************************************
3. header,nav
*****************************************/
@media screen and (max-width: 767.98px) {
    .header_cta,
    .header_menu {
        display: none;
    }
    .header{
        width: 100%;
        height: 60px;
        background-color: #fff;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 10000;
    }
}
@media screen and (min-width: 768px) {
    .header {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: center;
        position: fixed;
        top: 0px;
        left: 50%;
        z-index: 9999;
        transform: translateX(-50%);
        width: 100%;
        background-color: #fff;
        transition: transform 0.5s;
        padding: 0 15px;
    }
    .header::before {
        position: absolute;
        top: 0px;
        left: calc((50vw - 50%) * -1);
        right: calc((50vw - 50%) * -1);
        z-index: -1;
        bottom: 0px;
        width: 100vw;
        background-color: #fff;
        content: "";
    }
    .header_title {
        margin: 0;
        width: 180px;
    }
    .header_menu {
        width: 52%;
        max-width: 560px;
        margin: auto;
    }
    .header.js_hide {
        transform: translateX(-50%) translateY(-100%);    
    }
    body {
        margin-top: 80px;
    }
}
@media print, (max-width: 950px) {
    .header_menu {
        max-width: 480px;
        width: 57%;
    }
    body {
        margin-top: 65px;
    }
}
@media print, (min-width: 1300px) {
    .header {
        width: 100vw;
        padding: 0px 50px;
    }
    .header_title {
        width: 290px;
    }
}
@media print, (max-width: 767px) {
    .header_title {
        height: 100%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding-left: 15px;
    }
    body {
        margin-top: 60px;
    }
}

/*ヘッダー右ボタン*/
.header_cta_contact {
    margin: 0;
    background-color: #EC2121;
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    text-decoration: none;
    width: 245px;
    height: 58px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    transition: 0.3s;
}
.header_cta_contact:hover {
    color: #fff;
        background-color:  #cc1a1a;
}
.header_cta_contact::before {
    content: "";
    background-image: url('data:image/svg+xml,%3Csvg%20width%3D%2228%22%20height%3D%2228%22%20viewBox%3D%220%200%2028%2028%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M18.375%2015.1667C18.375%2014.9346%2018.2828%2014.7121%2018.1187%2014.548C17.9546%2014.3839%2017.7321%2014.2917%2017.5%2014.2917H10.5C10.2679%2014.2917%2010.0454%2014.3839%209.88128%2014.548C9.71719%2014.7121%209.625%2014.9346%209.625%2015.1667C9.625%2015.3988%209.71719%2015.6213%209.88128%2015.7854C10.0454%2015.9495%2010.2679%2016.0417%2010.5%2016.0417H17.5C17.7321%2016.0417%2017.9546%2015.9495%2018.1187%2015.7854C18.2828%2015.6213%2018.375%2015.3988%2018.375%2015.1667ZM18.375%2019.8334C18.375%2019.6013%2018.2828%2019.3787%2018.1187%2019.2146C17.9546%2019.0505%2017.7321%2018.9584%2017.5%2018.9584H10.5C10.2679%2018.9584%2010.0454%2019.0505%209.88128%2019.2146C9.71719%2019.3787%209.625%2019.6013%209.625%2019.8334C9.625%2020.0654%209.71719%2020.288%209.88128%2020.4521C10.0454%2020.6162%2010.2679%2020.7084%2010.5%2020.7084H17.5C17.7321%2020.7084%2017.9546%2020.6162%2018.1187%2020.4521C18.2828%2020.288%2018.375%2020.0654%2018.375%2019.8334Z%22%20fill%3D%22white%22%2F%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M8.16671%202.625C7.3158%202.625%206.49975%202.96302%205.89807%203.5647C5.29639%204.16638%204.95837%204.98243%204.95837%205.83333V22.1667C4.95837%2023.0176%205.29639%2023.8336%205.89807%2024.4353C6.49975%2025.037%207.3158%2025.375%208.16671%2025.375H19.8334C20.6843%2025.375%2021.5003%2025.037%2022.102%2024.4353C22.7037%2023.8336%2023.0417%2023.0176%2023.0417%2022.1667V9.296C23.0417%208.8515%2022.897%208.41983%2022.6287%208.06517L19.131%203.43583C18.9407%203.18397%2018.6946%202.97967%2018.412%202.83898C18.1294%202.69829%2017.8181%202.62504%2017.5024%202.625H8.16671ZM6.70837%205.83333C6.70837%205.02833%207.36171%204.375%208.16671%204.375H16.625V9.50483C16.625%209.98783%2017.017%2010.3798%2017.5%2010.3798H21.2917V22.1667C21.2917%2022.9717%2020.6384%2023.625%2019.8334%2023.625H8.16671C7.36171%2023.625%206.70837%2022.9717%206.70837%2022.1667V5.83333Z%22%20fill%3D%22white%22%2F%3E%0A%3C%2Fsvg%3E');
    display: inline-block;
    margin: 0px 0.5em 0px 0px;
    width: 28px;
    height: 28px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
@media screen and (max-width: 1200px) {
    .header_cta_contact {
        font-size: 14px;
        width: 180px;
        height: 54px;
    }
    .header_cta_contact::before {
        margin: 0px 0.3em 0px 0px;
        width: 26px;
        height: 26px;
    }
}
@media screen and (max-width: 950px) {
    .header_cta_contact {
        font-size: 10px;
        width: 95px;
        height: 58px;
        flex-direction: column;
    }
    .header_cta_contact::before {
        margin: 0px;
        width: 28px;
        height: 28px;
    }
}



.header_title_logo img {
    max-width: 230px;
    max-width: 180px;
}
@media print, (min-width: 1300px) {
    .header_title_logo img {
        max-width: 290px;
    }
}
@media screen and (max-width: 767px) {
    .header_title_logo img {
        max-width: 230px;
    }
}
.header_menu > .menu {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 0px;
    margin: 0px;
    gap: 20px;
}

.header_menu > .menu > li {
    position: relative;
    list-style-type: none;
    font-size: 16px;
    font-weight: bold;
}

.header_menu > .menu > li > a {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    height: 5em;
    color: #000;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    line-height: 1;
}
@media screen and (max-width: 1200px) {
    .header_menu > .menu > li {
        font-size: 14px;
    }
}

@media screen and (max-width: 950px) {
    .header_menu > .menu{
        gap: 0;
    }
    .header_menu > .menu > li {
        font-size: 13px;
    }
}

.header_menu > .menu > .btn-arrow.current-menu-item::before,
.header_menu > .menu > li:hover::before {
    position: absolute;
    bottom: 8px;
    left: 0px;
    right: 0px;
    width: 100%;
    height: 2px;
    background-color: var(--main-color);
    content: "";
}

.header_menu .sub-menu {
    display: block;
    position: absolute;
    top: 5em;
    left: 50%;
    transform: translateX(-50%);
    padding: 2em;
    background-color: rgba(8, 20, 65, 0.8);
    list-style: none;
    white-space: nowrap;
    visibility: hidden;
    opacity: 0;
    transition: 0.5s;
}
.header_menu .sub-menu.js_active {
    visibility: visible;
    opacity: 1;
}

.header_menu .sub-menu > li + li {
    margin-top: 1.5em;
}

.header_menu .sub-menu > li > a {
    display: block;
    color: #fff;
    text-decoration: none;
}
.header_menu .sub-menu > li > a:hover {
    color: #007cdb;
}
.menu-item.btn-arrow a{
    position: relative;
}
.menu-item.btn-arrow a::after {
    content: "";
    position: absolute;
    width: 6px;
    height: 10px;
    right: -16px;
    top: 50%;
    transform: translateY(-50%);
    background-image: url('data:image/svg+xml,%3Csvg%20width%3D%226%22%20height%3D%229%22%20viewBox%3D%220%200%206%209%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M0.75%200.750011L4.75%204.25001L0.75%207.75001%22%20stroke%3D%22black%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%0A%3C%2Fsvg%3E');
    background-size: contain;
    background-repeat: no-repeat;
}

.page_title {
    position: relative;
    z-index: -1;
    height: 323px;
    background-image: url(./images/pagetitle/common.jpg);
    background-repeat: no-repeat;
    background-position: right center;
    background-size: cover;
}

.page_title_base {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 90%;
}

.page_title_base > h1 {
    padding: 0 0.5em;
    margin-bottom: 32px;
    width: 100%;
    color: var(--main-color);
    font-size:clamp(32px, 32 / 650 * 100vw ,56px);
    font-weight: bold;
    text-align: center;
}
.page_title_description{
    font-size:clamp(18px, 18 / 650 * 100vw ,20px);
    font-weight: bold;
    color: #000;
    text-align: center;
}
@media screen and (max-width: 767px) {
    .page_title {
        margin-top: 60px;
    }
}
@media screen and (max-width: 650px) {
    .page_title_description{
        text-align: left;
    }
    .page_title {
        margin-top: 60px;
        height: 323px;
        background-image: url(./images/pagetitle/common-sp.jpg);
    }
}



/* ハンバーガーボタン */
.openbtn {
    position: fixed;
    top: 0;
    right: 0;
    width: 60px;
    height: 60px;
    cursor: pointer;
    z-index: 10001;
    display: none; /* PC時は非表示 */
    background-color: var(--main-color);
}

.openbtn span {
    display: block;
    position: absolute;
    width: 32px;
    height: 2px;
    background-color: #fff;
    left: 14px;
    transition: all 0.3s;
}

.openbtn span:nth-child(1) {
    top: 19px;
}

.openbtn span:nth-child(2) {
    top: 29px;
}

.openbtn span:nth-child(3) {
    top: 40px;
}

/* ボタンアクティブ時（×印） */
.openbtn.active span:nth-child(1) {
    top: 30px;
    transform: rotate(45deg);
}

.openbtn.active span:nth-child(2) {
    opacity: 0;
}

.openbtn.active span:nth-child(3) {
    top: 30px;
    transform: rotate(-45deg);
}

/* SPナビゲーション */
#sp-nav {
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%;
    max-width: 420px;
    height: 100vh;
    background-color: #fff;
    z-index: 10000;
    overflow-y: auto;
    transition: right 0.3s;
    box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
}

#sp-nav.active {
    right: 0;
}

#sp-nav-list {
    padding: 110px 0 40px;
}

#sp-nav-list ul {
    list-style: none;
    padding: 0 16px;
    margin: 0;
}

#sp-nav-list li ,.link-home{
    border-bottom: 1px solid #9D9D9D;
}

#sp-nav-list .menu-item a {
    display: block;
    padding: 20px 20px;
    color: var(--main-color);
    text-decoration: none;
    transition: background-color 0.3s;
    font-size: 16px;
    font-weight: bold;
}
#sp-nav-list a:hover {
    color: #359ddd;
}

.header_cta.sp {
    display: block;
    padding: 0 16px;
}
.header_cta.sp .header_cta_contact {
    max-width: 343px;
    width: 100%;
    height: 58px;
    margin: auto;
    font-size: 16px;
    flex-direction: row;
    justify-content: center;
    gap: 10px;
}
/* スクロール禁止 */
body.no-scroll {
    overflow: hidden;
}

#sp-nav-list  .menu-item.btn-arrow a::after {
    background-image: url('data:image/svg+xml,%3Csvg%20width%3D%229%22%20height%3D%2213%22%20viewBox%3D%220%200%209%2013%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M8.25%206.06216L0%2012.1243V-1.33514e-05L8.25%206.06216Z%22%20fill%3D%22%230A58A9%22%2F%3E%0A%3C%2Fsvg%3E');
    width: 14px;
    height: 11px;
    right: 0;
}
.header_title_logo_sp{
    position: absolute;
    top: 16px;
    left: 15px;
}
/* レスポンシブ設定 */
@media screen and (max-width: 767px) {
    .openbtn {
        display: block;
    }
}
@media screen and (max-width: 550px) {
    #sp-nav {
        width: 100%;
        max-width: 100%;
    }
}

/****************************************
4. sidebar
*****************************************/

/****************************************
5. contents
****************************************/
.menu-sitemap-container > .menu {
    margin: -1em 0px 0px 1.5em;
}

.menu-sitemap-container > .menu > li {
    margin: 1em 0px 0px;
    font-size: 17px;
}

.menu-sitemap-container > .menu .sub-menu {
    margin: 0px 0px 0px 2em;
}

.menu-sitemap-container > .menu .sub-menu > li {
    margin: 0.5em 0px 0px;
    font-size: 15px;
}

/****************************************
6. Footer 
****************************************/
.mnavi {
    display: block;
    position: fixed;
    bottom: 0px;
    left: 0px;
    z-index: 9990;
    width: 100%;
    height: 80px;
    background-color: var(--main-color);
    padding: 12px ;
}
.fixed-cta-pc{
    display: flex;
}
.fixed-cta-sp{
    display: none;
}
@media print, (max-width: 767.98px) {
    body {
        margin-bottom: 80px;
    }
}
@media print, (max-width: 767px) {
    .fixed-cta-pc{
        display: none;
    }
    .fixed-cta-sp{
        display: flex;
        width: calc(100% - 60px);
    }
    .fixed-cta-sp .btn-download, 
    .fixed-cta-sp .btn-contact{
        border-radius: 0;
        width: 50%;
    }
    .mnavi{
        background-color: transparent;
        padding: 0;
        bottom: 0;
        display: flex;
        justify-content: flex-start;
        align-items: flex-end;
    }
}
@media screen and (max-width: 550px) {
    body {
        margin-bottom: 44px;
    }
    .mnavi{
        height: 44px;
    }
    .fixed-cta-sp{
        width: calc(100% - 48px);
    }
    .fixed-cta-sp .btn-download,
    .fixed-cta-sp .btn-contact{
        height: 44px;
    }
    .fixed-cta-sp .btn-download::after, 
    .fixed-cta-sp .btn-contact::after{
        content:none;
    }
}
.copy-right{
    margin-bottom: 80px;
    background-color: #000;
    color: #fff;
    text-align: center;
    padding: 16px;
    font-size: 13px;
    font-weight: bold;
}
.footer .text{
    font-size: 16px;
    font-weight: bold;
}
.footer .text.address{
    margin-top: 10px;
    margin-bottom: 8px;
}
.footer-inner .box{
    margin-top: 0;
}
.footer-inner .box2{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 52px;
}
.footer-logo {
    margin: 0 0 16px;
}
.footer .map{
    text-decoration: none;
    color: #000;
}
@media screen and (max-width: 991px) {

    .footer-inner .box2 {
        gap: 30px;
        flex: 0 0 40%;
        margin: auto;
        margin-right: 20px;
    }
}
@media screen and (max-width: 575px) {
    .footer-inner .box2 {
        gap: 32px;
        flex: 0 0 100%;
        max-width: 400px;
        margin: 32px auto 0;
        padding: 0 20px;
    }
    .footer-inner .box2 div:first-child{
        width: 55%;
    }
    .footer-inner .box2 div:last-child{
        width: 45%;
    }

}
@media screen and (max-width: 550px) {
    .copy-right{
        margin-bottom: 44px;
    }
}

#btn_scroll_top {
    display: none;
    position: fixed;
    bottom: 0;
    right: 0;
    z-index: 9999;
    width: 44px;
    height: 44px;
    background-color: #879CB3;
    text-decoration: none;
    outline: none;
}
#btn_scroll_top:after {
    position: absolute;
    top: 40%;
    left: 50%;
    width: 12px;
    height: 12px;
    transform: translateX(-50%) rotate(-45deg);
    border-right: 2px solid #fff;
    border-top: 2px solid #fff;
    content: "";
}
@media print, (min-width: 550px) {
    #btn_scroll_top {
        width: 55px;
        height: 55px;
    }
    #btn_scroll_top:after {
        width: 12px;
        height: 12px;
    }
}
@media print, (min-width: 768px) {
    #btn_scroll_top {
        width: 55px;
        height: 55px;
        bottom: 12px;
        right: 12px;

    }
    #btn_scroll_top:after {
        width: 12px;
        height: 12px;
    }
}


/****************************************
7. single
****************************************/
.single-post p + p {
    margin: 1em 0px 0px;
}
.post-container{
    margin-bottom: 50px;
}
@media screen and (max-width: 767.98px) {
    .single-post img {
        margin: 1em auto 0px;
    }
}
@media print, (min-width: 768px) {
    .single-post img {
        margin: 1em 0px 0px;
    }
    
    .single-post .alignleft {
        display: inline-block;
    }
    
    .single-post .alignleft + .alignleft {
        margin: 1em 0px 0px 1em;
    }
    
    .single-post .aligncenter {
        margin: 1em auto 0px;
    }
    
    .single-post .alignright {
        margin: 1em 0px 0px 100%;
        transform: translateX(-100%);
    }
}

/****************************************
8. WP
****************************************/

/****************************************
9. Print
****************************************/

/****************************************
10. Plugin
****************************************/
.no_must {
    display: block;
    background-color: #fc0;
    padding: 4px 5px;
    font-size: 13px;
    color: #fff;
    float: left;
    margin: 0px 5px;
    border-radius: 4px;
    box-shadow: 0px 0px 5px #ccc;
}

.bx-wrapper {
    background-color: transparent;
    margin: 0px auto 0px;
    border: none;
    box-shadow: none;
}
.bx-wrapper img {
    display: block;
    margin: 0px auto;
}

.bx-wrapper .bx-pager.bx-default-pager a {
    background: #c9e2ff;
}

.bx-wrapper .bx-pager.bx-default-pager a:hover,
.bx-wrapper .bx-pager.bx-default-pager a.active,
.bx-wrapper .bx-pager.bx-default-pager a:focus {
    background: #012065;
}

/****************************************
10. Tweak
****************************************/

/****************************************
11. メールフォームプロ用スタイル
****************************************/
form#mailformpro .mailform {
    margin: 0px;
}

form#mailformpro dl {
    box-sizing: border-box;
}

form#mailformpro dl dt {
    display: flex;
    align-items: flex-start;
    box-sizing: border-box;
    border: none;
    font-size: 16px;
    font-weight: bold;
    line-height: 1.5;
}

form#mailformpro dl dd {
    box-sizing: border-box;
    border: none;
}

form#mailformpro dl dt:nth-of-type(n+2),
form#mailformpro dl dd:nth-of-type(n+2) {
    border-top: 1px solid #d3dad9;
}

.mfp_colored {
    background: none;
}

.mfp_element_text,
.mfp_element_number,
.mfp_element_select-one,
.mfp_element_email,
.mfp_element_tel,
.mfp_element_textarea {
    padding: 1em;
    margin: 0px;
    width: 100% !important;
    box-sizing: border-box;
    border: 1px solid #95cec7;
    background-color: #f0f8f7;
    box-shadow: none;
    outline: none;
}

.mfp_element_submit,
.mfp_element_reset,
.mfp_element_button {
    padding: 0.5em 3em;
    box-sizing: border-box;
    background: none;
    background-color: #00665b;
    box-shadow: none;
    color: #fff;
    font-size: 18px;
    text-shadow: 0px 2px 0px #00564d;
}

.mfp_element_submit:hover,
.mfp_element_reset:hover,
.mfp_element_button:hover {
    background: none;
    background-color: #267d73;
    box-shadow: none;
}

div.mfp_err {
    padding: 0.5em 0px 0.5em 1em;
    background: none;
}

.problem {
    border: 1px solid #ffd5dc;
    background-color: #ffd5dc;
}

.must,
.no_must {
    display: block;
    padding: 0px 1em;
    border-radius: 4px;
    background: none;
    box-shadow: none;
    text-shadow: none;
    color: #fff;
    font-size: 10px;
    line-height: 1.5;
}

.must {
    border: 1px solid #c60505;
    background-color: #c60505;
}

.no_must {
    border: 1px solid #fc0;
    background-color: #fc0;
}

@media screen and (max-width: 767.98px) {
    form#mailformpro dl dt,
    form#mailformpro dl dd {
        padding: 1em;
        width: 100%;
    }
    .must,
    .no_must {
        margin: 2px 2em 0px 0px;
    }
}

@media print, (min-width: 768px) {
    form#mailformpro dl {
        display: flex;
        flex-wrap: wrap;
    }
    form#mailformpro dl dt {
        float: none;
        padding: 2em 0px;
        width: 280px;
    }
    form#mailformpro dl dd {
        padding: 2em 2em 2em 0px;
        width: calc(100% - 280px);
    }
    .mfp_element_text,
    .mfp_element_number,
    .mfp_element_select-one,
    .mfp_element_email,
    .mfp_element_tel,
    .mfp_element_textarea {
        max-width: 500px;
    }
    .must,
    .no_must {
        margin: 2px 2em 0px;
    }
}

iframe[src*="youtube.com"] {
    width: 100%;
    aspect-ratio: 16 / 9; 
    height: auto;
  }