/*
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: "※画像準備中※";
}

:root {
    --main-color: #00D200;
    --sub-color: #3388dd;
    --accent-color: #EDBA00;
    --text-color:#222222;
    --hover-color1: #029a02;
}
/****************************************
1.Setting
*****************************************/
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: #222222;
    font-size:clamp(14px, 14 / 550 * 100vw ,16px);
    font-weight: 400;
    /*font-family: "Noto Sans JP", "游ゴシック", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;*/
    font-family:  "Noto Sans JP", sans-serif;
    overflow-x: hidden;
}
body.home{
    background-color: #F5F5F5;

}
h1, h2, h3, h4, h5, h6 {
    line-height: 1.5;
}

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

a:hover {
    color: #05941f;
}

a[href="#none"] {
    color: #313131;
    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: 2;
}

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 {
    font-size: clamp(14px, 14 / 767 * 100vw, 16px);
    padding: 16px 16px;
    border-bottom: 1px solid #D9D9D9;
}
table tr:first-child th,
table tr:first-child td {
    border-top: 1px solid #D9D9D9;
}

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

table th {
    letter-spacing: 0.04em;
    font-weight: 700;
}
table td {
    letter-spacing: 0.04em;
    font-weight: 500;
    line-height: 2;
}

@media screen and (max-width: 767.98px) {
    .tbl_wrapper {
        overflow-x: scroll;
    }
    .tbl_wrapper > table {
        width: 767px;
    }
    table th,
    table td {
        padding: 16px 14px;
    }
}

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: var(--main-color);
    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;
}

.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);
}
.btn_link{
    margin: auto;
    display: block;
    width: fit-content;
}

.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%;
}
@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: 1200px;
    }
}

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

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


/*--------------------------------*/
/* 共通設定 */
/*--------------------------------*/
.oswald{
    font-family:  "Oswald", sans-serif;
    font-variant-numeric: tabular-nums;
}
/*長方形ボタン*/
.button-rectangle {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 300px;
    height: 80px;
    background-color: var(--accent-color);
    color: #fff;
    font-size: 24px;
    font-weight: 700;
    position: relative;
    text-decoration: none;
}
.button-rectangle::after {
    width: 12px;
    height: 12px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    content: '';
    position: absolute;
    top: 48%;
    right: 13%;
    transform: rotate(45deg) translateY(-50%);
}
.button-rectangle:hover{
    color: #fff;
    background-color: #222222;
    transition: background-color 0.3s ease;
}


/*楕円ボタン*/
.button-oval {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 293px;
    height: 56px;
    background-color: var(--accent-color);
    color: #fff;
    font-size: 18px;
    font-size:clamp(16px, 16 / 375 * 100vw ,18px);
    font-weight: 700;
    position: relative;
    text-decoration: none;
    border-radius: 100px;
    margin: 80px auto 0;
}

.button-oval::after {
    width: 8px;
    height: 8px;
    border-top: 1px solid #fff;
    border-right: 1px solid #fff;
    content: '';
    position: absolute;
    top: 48%;
    right: 8%;
    transform: rotate(45deg) translateY(-50%);
}
.button-oval:hover{
    color: #fff;
    background-color: #222222;
    transition: 0.3s ease;
}
.button-oval.green{
    color: #fff;
    background-color: var(--main-color);
}
.button-oval.green:hover{
    color: #fff;
    background-color: #222222;
    transition:  0.3s ease;
}

/*楕円ボタン：ページリンク*/
.button-page-link {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 210px;
    height: 56px;
    background-color: #fff;
    color: var(--main-color);
    font-size:clamp(16px, 16 / 375 * 100vw ,18px);
    font-weight: 700;
    position: relative;
    text-decoration: none;
    border-radius: 100px;
    margin: 80px auto 0;
}
.button-page-link::after {
    width: 21px;
    height: 21px;
    content: '';
    position: absolute;
    top: 50%;
    right: 8%;transform: translateY(-50%);
    background-image: url('data:image/svg+xml,%3Csvg%20width%3D%2221%22%20height%3D%2221%22%20viewBox%3D%220%200%2021%2021%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M17.5%209.625C17.2679%209.625%2017.0454%209.71719%2016.8813%209.88128C16.7172%2010.0454%2016.625%2010.2679%2016.625%2010.5V15.75C16.625%2015.9821%2016.5328%2016.2046%2016.3687%2016.3687C16.2046%2016.5328%2015.9821%2016.625%2015.75%2016.625H5.25C5.01794%2016.625%204.79538%2016.5328%204.63128%2016.3687C4.46719%2016.2046%204.375%2015.9821%204.375%2015.75V5.25C4.375%205.01794%204.46719%204.79538%204.63128%204.63128C4.79538%204.46719%205.01794%204.375%205.25%204.375H10.5C10.7321%204.375%2010.9546%204.28281%2011.1187%204.11872C11.2828%203.95462%2011.375%203.73206%2011.375%203.5C11.375%203.26794%2011.2828%203.04538%2011.1187%202.88128C10.9546%202.71719%2010.7321%202.625%2010.5%202.625H5.25C4.55381%202.625%203.88613%202.90156%203.39384%203.39384C2.90156%203.88613%202.625%204.55381%202.625%205.25V15.75C2.625%2016.4462%202.90156%2017.1139%203.39384%2017.6062C3.88613%2018.0984%204.55381%2018.375%205.25%2018.375H15.75C16.4462%2018.375%2017.1139%2018.0984%2017.6062%2017.6062C18.0984%2017.1139%2018.375%2016.4462%2018.375%2015.75V10.5C18.375%2010.2679%2018.2828%2010.0454%2018.1187%209.88128C17.9546%209.71719%2017.7321%209.625%2017.5%209.625Z%22%20fill%3D%22%2300D200%22%2F%3E%0A%3Cpath%20d%3D%22M13.9999%204.375H15.3824L9.8787%209.87C9.79668%209.95134%209.73159%2010.0481%209.68717%2010.1547C9.64274%2010.2614%209.61987%2010.3757%209.61987%2010.4913C9.61987%2010.6068%209.64274%2010.7211%209.68717%2010.8278C9.73159%2010.9344%209.79668%2011.0312%209.8787%2011.1125C9.96004%2011.1945%2010.0568%2011.2596%2010.1634%2011.304C10.2701%2011.3485%2010.3844%2011.3713%2010.4999%2011.3713C10.6155%2011.3713%2010.7298%2011.3485%2010.8365%2011.304C10.9431%2011.2596%2011.0399%2011.1945%2011.1212%2011.1125L16.6249%205.6175V7C16.6249%207.23206%2016.7171%207.45462%2016.8812%207.61872C17.0453%207.78281%2017.2679%207.875%2017.4999%207.875C17.732%207.875%2017.9546%207.78281%2018.1187%207.61872C18.2828%207.45462%2018.3749%207.23206%2018.3749%207V3.5C18.3749%203.26794%2018.2828%203.04538%2018.1187%202.88128C17.9546%202.71719%2017.732%202.625%2017.4999%202.625H13.9999C13.7679%202.625%2013.5453%202.71719%2013.3812%202.88128C13.2171%203.04538%2013.1249%203.26794%2013.1249%203.5C13.1249%203.73206%2013.2171%203.95462%2013.3812%204.11872C13.5453%204.28281%2013.7679%204.375%2013.9999%204.375Z%22%20fill%3D%22%2300D200%22%2F%3E%0A%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-size: contain;
    
}
.button-page-link:hover{
    color: var(--main-color);
    background-color: #222222;
    transition: background-color 0.3s ease;
}

.green{
    color: var(--main-color);
}
.align-left{
    text-align: left;
}
.list-none{
    list-style: none;
}
.box-img img{
    margin: 0;
}


/* 見出し（帯アニメーション） */
.heading-title-area {
    position: relative;
    width: 100%;
    padding: 100px 0 20px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    z-index: 1; 
    font-size: 66px;
    font-size:clamp(40px, 40 / 900 * 100vw ,66px);
}
.heading-title-area.center{
    align-items: center;
} 
.heading-title-area.left{
    align-items: left;
} 

/* --- アニメーション用の設定 --- */
.js-reveal {
    position: relative;
    display: inline-block; 
    overflow: hidden;
    color: transparent; /* 最初は文字を透明にしておく */
    margin: 0;
    line-height: 1.4;
}

/* 帯（擬似要素）の設定 */
.js-reveal::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--main-color); /* 帯の色 */
    transform: translateX(-101%); /* 最初は左外に隠す */
}
.heading-title-area.white .js-reveal::after {
    background-color: #fff; /* 背景が緑のものは白い帯 */
}
/* --- 画面に入った時 (.in-view) の動作 --- */
.js-reveal.in-view::after {
    animation: mask-slide 1.2s cubic-bezier(0.77, 0, 0.175, 1) forwards;
}
.heading-title-area .main-title.js-reveal.in-view {
    animation: text-appear-black 1.2s steps(1) forwards;
}
.heading-title-area .sub-title.js-reveal.in-view {
    animation: text-appear-green 1.2s steps(1) forwards;
    animation-delay: 0.2s;
}
.heading-title-area .sub-title.js-reveal.in-view::after {
    animation-delay: 0.2s;
}
.heading-title-area.white .main-title.js-reveal.in-view {
    animation: text-appear-white 1.2s steps(1) forwards;
}
.heading-title-area.white .sub-title.js-reveal.in-view {
    animation: text-appear-white 1.2s steps(1) forwards;
    animation-delay: 0.2s;
}

/* --- キーフレーム（動きの定義） --- */
/* 帯が左から右へ抜ける */
@keyframes mask-slide {
    0% { transform: translateX(-101%); }
    50% { transform: translateX(0); }
    100% { transform: translateX(101%); }
}

/* 黒文字になる */
@keyframes text-appear-black {
    0% { color: transparent; }
    50% { color: #222222; } /* ここで黒にする */
    100% { color: #222222; }
}

/* 緑文字になる */
@keyframes text-appear-green {
    0% { color: transparent; }
    50% { color: var(--main-color); } /* ここで緑にする */
    100% { color: var(--main-color); }
}
/* 黒文字になる */
@keyframes text-appear-white {
    0% { color: transparent; }
    50% { color: #fff; } /* ここで黒にする */
    100% { color: #fff; }
}

.heading-title-area .main-title {
    font-size: 100%;
    font-weight: bold;
    letter-spacing: 0.1em;
    margin-bottom: 5px;
    color: #222222; /* 最終的な文字色 */
    display: block;
}

.heading-title-area .sub-title {
    font-size: 36%;
    font-weight: bold;
    letter-spacing: 0.05em;
    margin-top: 0;
    text-transform: uppercase;
    display: block;
    width: fit-content;
}

@media screen and (max-width: 767px) {
    .heading-title-area {
        padding: 50px 0 0px;
        font-size:clamp(18px, 18 / 375 * 100vw ,40px);
        flex-direction: column-reverse;
    }
    .heading-title-area .sub-title {
        font-size: 160%;
        font-family:  "Oswald", sans-serif;
        font-variant-numeric: tabular-nums;

    }
}

/*　アンダーライン付きタイトル　*/
.heading-underline{
    font-size: clamp(28px, 28 / 880 * 100vw ,40px);
    font-weight: 700;
    border-bottom: solid #525752 1px;
    width: 100%;
    padding-bottom: 16px;
    margin-bottom: 18px;
    letter-spacing: 0.04em;
}
@media screen and (max-width: 767px) {
    .heading-underline{
        font-size:clamp(18px, 18 / 375 * 100vw ,28px);
    }
}
.section-wide{
    margin: 20px calc(50% - 50cqi);
    width: 100vw;
}
.section-wide.bg-gray{
    background-color: #F5F5F5;
}
/*丸数字*/
.num{
    font-size: 26px;
    font-weight: 400;
    width: 60px;
    height: auto;
    min-width: 60px;
    aspect-ratio: 1/1;
    background-color: var(--main-color);
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 100%;
    position: relative;
}
/*丸数字とロゴセット*/
.num.num-logo::before{
    content: "";
    background-image: url('./images/common/logo-icon.png');
    background-repeat: no-repeat;
    background-size: contain;
    width: 85px;
    height: auto;
    aspect-ratio: 85/93;
    display: block;
    position: absolute;
    top: -58px;
    left: -45px;
}

.arrow{
    position: absolute;
    top: 40%;
    right: 20px;
    background-image: url('data:image/svg+xml,%3Csvg%20width%3D%2258%22%20height%3D%2258%22%20viewBox%3D%220%200%2058%2058%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M16.1112%2028.2564L35.6243%2028.2565L27.2615%2020.4488L28.3129%2019.3334L38.6667%2029L28.3129%2038.6667L27.2615%2037.5513L35.6243%2029.7436L16.1112%2029.7436L16.1112%2028.2564Z%22%20fill%3D%22%2300D200%22%2F%3E%0A%3Ccircle%20cx%3D%2229%22%20cy%3D%2229%22%20r%3D%2228.5%22%20stroke%3D%22%23D9D9D9%22%2F%3E%0A%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-size: contain;
    width: 50px;
    height: auto;
    aspect-ratio: 1/1;
    transition: right 0.3s ease;
    border-radius: 100px;
}
.arrow:hover{
    right: 0px;
    transition: right 0.3s ease;
}
@media screen and (max-width: 767px) {
    .arrow{
        width: 40px;
        height: auto;
    }
}
.noise{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-image: url('./images/common/noise.png');
    background-repeat: repeat;
    opacity: 0.1;
    pointer-events: none;
}


.bg-logo {
    position: absolute;
    background-image: url('./images/top/bg-logo.png');
    background-repeat: no-repeat;
    background-size: contain;
    aspect-ratio: 620/676;
    width: min(42vw,620px);
    height: auto;
    top: 455px;
    left: 0;
    z-index: 0;
}

/* 背景の大きな文字 */
.bg-text {
    position: absolute;
    font-size: 10vw; 
    font-size:clamp(100px, 100 / 767 * 100vw ,168px);
    font-weight: 400;
    color: #ffffff; 
    z-index: 0;
    line-height: 1;
    user-select: none;
    white-space: nowrap;
    text-align: left;
    text-transform: uppercase;
}
@media screen and (max-width: 767px) {
    .bg-text {
        font-size:clamp(72px, 72 / 375 * 100vw ,130px);
    }
}
.polygon{
    position: absolute;
    width: 533px;
    width: clamp(320px, 32vw ,533px);
    height: auto;
    aspect-ratio: 533/343;
    background-image: url('data:image/svg+xml,%3Csvg%20width%3D%22533%22%20height%3D%22343%22%20viewBox%3D%220%200%20533%20343%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M265.804%20195.827V293.172L181.5%20341.845L97.1963%20293.172V195.827L181.5%20147.154L265.804%20195.827Z%22%20stroke%3D%22%238FE388%22%20stroke-width%3D%222%22%2F%3E%0A%3Cpath%20d%3D%22M350.804%2049.8271V147.172L266.5%20195.845L182.196%20147.172V49.8271L266.5%201.1543L350.804%2049.8271Z%22%20stroke%3D%22%238FE388%22%20stroke-width%3D%222%22%2F%3E%0A%3Cpath%20d%3D%22M433.804%20195.827V293.172L349.5%20341.845L265.196%20293.172V195.827L349.5%20147.154L433.804%20195.827Z%22%20stroke%3D%22%238FE388%22%20stroke-width%3D%222%22%2F%3E%0A%3Cpath%20d%3D%22M518.804%2049.8271V147.172L434.5%20195.845L350.196%20147.172V49.8271L434.5%201.1543L518.804%2049.8271Z%22%20stroke%3D%22%238FE388%22%20stroke-width%3D%222%22%2F%3E%0A%3Cpath%20d%3D%22M182.804%2049.8271V147.172L98.5%20195.845L14.1963%20147.172V49.8271L98.5%201.1543L182.804%2049.8271Z%22%20stroke%3D%22%238FE388%22%20stroke-width%3D%222%22%2F%3E%0A%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-size: cover;
    top: 80px;
    z-index: 0;
    pointer-events: none;
}
.top-section-products .polygon{
    right: -9vw;
    filter: brightness(10) saturate(0); /*白*/
}
.top-section-strength .polygon{
    top: 352px;
    right: 0;
    left: unset;
}
.top-section-case-studies .polygon{
    top: 460px;
    right: -65px;
}
.top-section-company .polygon{
    top: 55px;
    left: -110px;
    z-index: 3;
}
.top-section-recruit .polygon{
    top: 38px;
    right: -180px;
    filter: brightness(10) saturate(0); /*白*/
}
.section-ft-contact .polygon{
    background-image: url('data:image/svg+xml,%3Csvg%20width%3D%22533%22%20height%3D%22343%22%20viewBox%3D%220%200%20533%20343%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M265.804%20195.827V293.172L181.5%20341.845L97.1963%20293.172V195.827L181.5%20147.154L265.804%20195.827Z%22%20stroke%3D%22%2307E307%22%20stroke-width%3D%222%22%2F%3E%0A%3Cpath%20d%3D%22M350.804%2049.8271V147.172L266.5%20195.845L182.196%20147.172V49.8271L266.5%201.1543L350.804%2049.8271Z%22%20stroke%3D%22%2307E307%22%20stroke-width%3D%222%22%2F%3E%0A%3Cpath%20d%3D%22M433.804%20195.827V293.172L349.5%20341.845L265.196%20293.172V195.827L349.5%20147.154L433.804%20195.827Z%22%20stroke%3D%22%2307E307%22%20stroke-width%3D%222%22%2F%3E%0A%3Cpath%20d%3D%22M518.804%2049.8271V147.172L434.5%20195.845L350.196%20147.172V49.8271L434.5%201.1543L518.804%2049.8271Z%22%20stroke%3D%22%2307E307%22%20stroke-width%3D%222%22%2F%3E%0A%3Cpath%20d%3D%22M182.804%2049.8271V147.172L98.5%20195.845L14.1963%20147.172V49.8271L98.5%201.1543L182.804%2049.8271Z%22%20stroke%3D%22%2307E307%22%20stroke-width%3D%222%22%2F%3E%0A%3C%2Fsvg%3E');
    top: 50px;
    left: -100px;
    z-index: 1;
}
@media screen and (max-width: 767px) {
    .polygon{
        width: clamp(270px, 70vw ,450px);
    }
    .top-section-products .polygon{
        right: -11vw;
        top: 160px;
    }
}
.sp-only{
    display: none;
}
/*--------------------------------*/
/* トップページ                     */
/*--------------------------------*/
/* FV部分 */
.section-fv{
    position: relative;
    min-height: 720px;
/*    overflow-x: hidden;*/
}
.wrap-fv-copy{
    position: absolute;
    top: 21%;
    left: 2.8vw;
}
.wrap-fv-copy p{
    color: #111111;
    line-height: 1.2;
}
.fv-en{
    font-size: 32px;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 10px;
}
.fv-copy{
    font-size: 70px;
    font-weight: 700;
    margin-bottom: 10px;
    letter-spacing: 0.04em;
    padding: 2px 0 8px 10px;
    /*.green{
        margin-left: -0.4em;
    }
    .ls{
        margin-left: -0.4em;
    }
    */
}
.fv-copy-sub{
    font-size: 24px;
    font-weight: 700;
    width: fit-content;
    margin-left: auto;
    margin-bottom: 50px;
    padding: 2px 10px 8px;
}
.fv-copy ,.fv-copy-sub{
    background-color: #fff;
}
/* FVコピー フォント */
.font-kosugi     { font-family: 'Kosugi Maru', sans-serif; }
.fv-img{
    /*先方の希望で一旦変更
    width: 88vw;*/
    
    width: 100%;
    height: 100%;
    object-fit: cover;
    /*margin-left: 8vw;*/
}
.section-fv .bxslider,
.section-fv .bxslider li,
.section-fv .image-wrap{
    height: 100%;
}

.section-fv .bx-viewport{
    min-height: 720px;
}

/* ページャー全体 */
.bx-pager-custom {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: fit-content;
    position: absolute;
    top: 50%;
    right: 32px;
    transform: translateY(-50%);
}

/* 各数字 */
.bx-pager-custom a {
  position: relative;
  padding-left: 70px;
  color: #aaa;
  font-family: "Roboto", sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

/* アクティブ数字 */
.bx-pager-custom a.active {
  color: var(--main-color);
}

/* アクティブ時の横ライン */
.bx-pager-custom a.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 60px;
  height: 3px;
  background: var(--main-color); 
  transform: translateY(-50%);
}
.bx-controls {
    z-index: 999;
    position: relative;
}
/* コントロール全体 */
.bx-controls-direction {
    display: flex;
    gap: 21px;
    width: fit-content;
    position: absolute;
    left: 48px;
}
.bx-wrapper .bx-controls-direction a {
  position: relative;
  width: 48px;
  height: 48px;
  background: #ACACAC;
  text-indent: -9999px; 
}
.bx-wrapper .bx-prev ,
.bx-wrapper .bx-next {
  border-radius: 0 ;
  background: unset;
}
.bx-controls-direction a::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: translate(-50%, -50%) rotate(225deg);
}
.bx-wrapper  .bx-next::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

/* hover */
.bx-controls-direction a:hover {
  background: #a5a5a5;
}



@media screen and (max-width: 768px) {
    .bx-pager-custom {
        flex-direction: row;
        gap: 8px;
        top: 87%;
        left: 50%;
        transform: translateX(-50%);
    }
    .bx-pager-custom a {
        padding: 0;
        font-size: 0;
        width: 40px;
        height: 6px;
        background: #fff;
    }
    .bx-pager-custom a::before {
        display: none;
    }
    .bx-pager-custom a.active {
        background: var(--main-color);
    }
}
@media screen and (max-width: 520px) {
    .bx-pager-custom {
        top: 80%;
    }
}


/*******************************************/
.wrap-fv-copy{
    position: absolute;
    top: 21%;
    left: 2.8vw;
    z-index: 2; /* 画像より手前に来るように念のため */
}
.wrap-fv-copy p{
    color: #111111;
    line-height: 1.2;
}
.fv-en{
    font-size:clamp(22px, 22 / 767 * 100vw ,32px);
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 10px;
    width: fit-content;
}
.fv-copy{
    font-size:clamp(40px, 40 / 767 * 100vw ,70px);
    font-weight: 700;
    margin-bottom: 10px;
}
.fv-copy-sub{
    font-size:clamp(18px, 18 / 767 * 100vw ,24px);
    font-weight: 700;
    width: fit-content;
    margin-left: auto; /* 右寄せ */
    margin-bottom: 50px;
}
.fv-copy, .fv-copy-sub{
    padding: 2px 10px 8px;
    white-space: nowrap; 
}

@media screen and (max-width: 1024px) {
    .button-rectangle {
        width: 200px;
        height: 60px;
        font-size: 18px;
    }
    .fv-copy-sub{
        margin-bottom: 30px;
    }
    .section-fv,
    .section-fv .bx-viewport{
        min-height: 520px;
    }
}
@media screen and (max-width: 767px) {
    .fv-img {
        width: 100vw;
        height: 100%;
        margin-left: 0;
    }
    .section-fv .bx-controls.bx-has-controls-direction {
        display: none;
    }

    .fv-en{
        font-size:clamp(14px, 14 / 500 * 100vw ,22px);
    }
    .fv-copy{
        font-size:clamp(14px, 6.2vw ,40px);
        margin-bottom: 6px;
    }
    .fv-copy-sub{
        font-size:clamp(11px, 3.5vw ,18px);
        margin-bottom: 8px;
    }
    .wrap-fv-copy {
        top: 28%;
        left: 4vw;
    }

}
@media screen and (max-width: 600px) {
    .fv-copy{
        width: fit-content;
    }
}
@media screen and (max-width: 500px) {
    .button-rectangle {
        width: 163px;
        height: 48px;
        font-size: 14px;
    }
    .section-fv, .section-fv .bx-viewport {
        min-height: 400px;
        height: 460px;
    }

}

/* --- アニメーションのベース設定 --- */
.js-fv-anim {
    position: relative;
    overflow: hidden; 
    visibility: hidden;
}

/* --- 帯（マスク）の設定 --- */
.js-fv-anim::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--main-color); 
    visibility: visible; 
    transform: translateX(-101%); 
}

/* --- アニメーション発火時 (.start-anim) --- */
/* 1. 帯が左から右へ抜ける動き */
.js-fv-anim.start-anim::after {
    animation: fv-mask-slide 1.2s cubic-bezier(0.77, 0, 0.175, 1) forwards;
}
/* 2. 文字が「非表示」→「表示」になる動き */
.js-fv-anim.start-anim {
    animation: fv-visibility-on 1.2s steps(1) forwards;
}
/* 順番に動かすための遅延設定 */
.js-fv-anim.delay-1, .js-fv-anim.delay-1::after { animation-delay: 0.2s; }
.js-fv-anim.delay-2, .js-fv-anim.delay-2::after { animation-delay: 0.4s; }
.js-fv-anim.delay-3, .js-fv-anim.delay-3::after { animation-delay: 0.6s; }

@keyframes fv-mask-slide {
    0% { transform: translateX(-101%); }
    50% { transform: translateX(0); }
    100% { transform: translateX(101%); }
}
@keyframes fv-visibility-on {
    0% { visibility: hidden; }
    50% { visibility: visible; }
    100% { visibility: visible; }
}

/*--------------------------------*/
/* トップお知らせ（メインビジュ直後） */
.top-news {
    overflow-x: hidden;
}
.top-news a{
    display: flex;
    gap: 25px;
    width: 100%;
    max-width: 554px;
    background-color: #FFFFFF;
    padding: 22px 30px;
    position: absolute;
    bottom: -40px;
    right: 0;
    z-index: 1;
    text-decoration: none;
    color: #222222;
}
.top-news a:hover{
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.3s ease;
}
.top-news h2{
    font-size:clamp(12px, 12 / 375 * 100vw ,16px);
    text-transform: uppercase;
    position: relative;
    margin-top: 1em;
}
.top-news h2:before{
    content: "";
    display: inline-block;
    width: 84px;
    height: 3px;
    background-color: var(--main-color);
    position: absolute;
    top: -7px;
    left: 0;
}
.top-news .title{
    position: relative;
    font-size:clamp(10px, 10 / 375 * 100vw ,13px);
    color: #8E8E8E;
    line-height: 1.5;
    padding-right: 30px;
}
.top-news .title .arrow{
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 18px;
    height: auto;
    background-image: url('data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Crect%20x%3D%220.5%22%20y%3D%220.5%22%20width%3D%2217%22%20height%3D%2217%22%20rx%3D%228.5%22%20stroke%3D%22%23E6E6E6%22%2F%3E%0A%3Cpath%20d%3D%22M5%208.76923L11.0558%208.76923L8.46045%206.34615L8.78672%206L12%209L8.78672%2012L8.46045%2011.6538L11.0558%209.23077L5%209.23077L5%208.76923Z%22%20fill%3D%22%2300D200%22%2F%3E%0A%3C%2Fsvg%3E');
}
.top-news .top-news-box{
    display: flex;
    flex-direction: column;
}
.box-date-cat{
    display: flex;
    gap: 8px;
    align-items: center;
}
.top-news .date {
    font-size:clamp(10px, 10 / 375 * 100vw ,13px);
    text-decoration: none;
    color: #8E8E8E;
    line-height: 1.5;
}
.top-news .category {
    font-size: 10px;
    color: #fff;
    background-color: var(--main-color);
    padding: 0 10px;
    line-height: 1.5;
}
.top-news .top-news-box a:hover{
    text-decoration: underline;
}
@media screen and (max-width: 767px) {
    .top-news a {
        width: 82vw;
        max-width: 500px;
    }
}
@media screen and (max-width: 430px) {
    .top-news h2:before {
        width: 63px;
    }
}

/* トップ製品情報 */
.top-section-products{
    padding-top: 80px;
    padding-left: 16vw;
    padding-right: 32px;
    padding-bottom: 130px;
    background-color: #F5F5F5;
    position: relative;
    overflow: hidden;
}
.top-section-products .bg-text {
    top: 80px;
    left: 2.8vw;
    color: #fff;
    z-index: 0;
}
.top-section-products .box-img {
    display: grid;
    grid-template-columns: repeat(2, auto);
    grid-template-rows: repeat(2, auto);
    grid-column-gap: 8px;
    grid-row-gap: 8px;
    margin-top: 100px;
    max-width: 504px;
    height: fit-content;
    position: relative;
    z-index: 1;
}
.top-section-products .img-container1 { grid-area: 1 / 1 / 2 / 3; }
.top-section-products .img-container2 { grid-area: 2 / 1 / 3 / 2; }
.top-section-products .img-container3 { grid-area: 2 / 2 / 3 / 3; }
.top-section-products .img-container2,
.top-section-products .img-container3 {
    aspect-ratio: 337 / 306;
    overflow: hidden;
}
.top-section-products .img-container2 img,
.top-section-products .img-container3 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.top-section-products .box-img.two-images .img-container2 {
    grid-area: 2 / 1 / 3 / 3;
    aspect-ratio: auto;
}
.top-section-products .box-img.two-images .img-container2 img {
    width: 100%;
    height: auto;
    object-fit: unset;
}
.top-section-products .box-img.two-images .img-container3 { display: none; }
.top-products-list{
    max-width: 524px;
}
.top-section-products .product-link-box{
    text-decoration: none;
    color: #222222;
    padding: 40px 65px 18px 0;
    display: block;
    border-bottom: dotted 1px #D7D7D7;
    position: relative;
    transition: 0.3s ease-in-out;
    
}
.top-section-products .product-link-box:hover{
    background-color: #eaeaea;
}
.top-section-products .product-link-box:hover .arrow{
    right: 5px;
}
.top-section-products .title{
    font-size:clamp(14px, 14 / 375 * 100vw ,18px);
    font-weight: 700;
    margin-bottom: 10px;
}
.top-section-products .text{
    font-size:clamp(12px, 12 / 375 * 100vw ,14px);
}
.top-section-products .rectangle {
    position: absolute;
    aspect-ratio: 432/429;
    background-color: #fff;
    width: 26vw;
    height: auto;
    right: -20px;
    bottom: -40px;
    z-index: -1;
}
.top-section-products .bg-logo {
    top: 455px;
    left: 0;
    z-index: 0;
}
.product-img {
    transition: opacity 0.35s ease;
}

.product-img.is-fade {
    opacity: 0;
}


@media screen and (max-width: 1024px) {
    .top-section-products{
        padding-left: 6vw;
        padding-right: 32px;
    }
}
@media screen and (max-width: 767px) {
    .top-section-products{
        padding-left: 20px;
        padding-right: 20px;
    }
    .top-products-list {
        max-width: 100%;
    }

    .top-section-products .box-img {
        grid-template-columns: repeat(3, auto);
        grid-template-rows: repeat(2, auto);
        margin-top: 40px;
    }
    .top-section-products .img-container1 { grid-area: 1 / 1 / 3 / 3; }
    .top-section-products .img-container2 { grid-area: 1 / 3 / 2 / 4; }
    .top-section-products .img-container3 { grid-area: 2 / 3 / 3 / 4; }
    .top-section-products .box-img.two-images {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
    }
    .top-section-products .box-img.two-images .img-container1 { grid-area: 1 / 1 / 2 / 2; }
    .top-section-products .box-img.two-images .img-container2 { grid-area: 2 / 1 / 3 / 2; }
    .top-section-products .img-container1 .img{ 
        height: 100%; 
        object-fit: cover;
    }
    .top-section-products .bg-logo{
        width: min(500px,100%);
        left: -26.6vw;
    }
}
@media screen and (max-width: 500px) {
    .top-section-products .text br{
        display: none;
    }
}

/* 当社の強み */
.top-section-strength{
    padding-top: 158px;
    padding-bottom: 100px;
    padding: 158px 20px 100px 20px;
    background-color: #F5F5F5;
    position: relative;
   
}
.top-section-strength .bg-image1,
.top-section-strength .bg-image2{
    position: absolute;
    top: 0px;
    width: 50%;
    height: auto;
    aspect-ratio: 840/728;
    z-index: 0;
    background-repeat: no-repeat;
    background-size: cover;
}
.top-section-strength::before{
    content: "";
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: auto;
    aspect-ratio: 1680/728;
    background: linear-gradient(
    135deg,
    #00D200 0%,
    #00D200 5%,
    rgba(0, 210, 0, 0) 100%
    );
    z-index: 1;
}
.top-section-strength .noise{
    content: "";
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: auto;
    aspect-ratio: 1680/728;
    background: url("./images/common/noise.png") repeat;
    opacity: 0.7; /* Figmaの70%に合わせる */
    z-index: 2;
}
.top-section-strength .bg-logo {
    top: 10px;
    left: 0;
    z-index: 1;
}


.top-section-strength .bg-image1{
    left: 0px;
    background-image: url('./images/top/bg-strength01.jpg');
}
.top-section-strength .bg-image2{
    right: 0px;
    background-image: url('./images/top/bg-strength02.jpg');
}
.top-section-strength .bg-text {
    top: 80px;
    right: 2.8vw;
    z-index: 2;
}
.top-section-strength .inner {
    background-color: #fff;
    padding:  140px 45px 80px;
    position: relative;
    z-index: 3;
}
.top-section-strength .heading-title-area{
    position: absolute;
    top: -150px;
    left: 50%;
    transform: translateX(-50%);
}
.top-strength-list .wrap:nth-child(even) {
    flex-direction: row-reverse;
}
.top-strength-list .wrap {
    margin-bottom: 90px;
}

.top-strength-list .wrap:nth-child(odd) .box-text{ 
    padding-left: 46px;
}
.top-strength-list .wrap:nth-child(odd) .box-img{ 
    padding-left: 40px;
}
.top-strength-list .wrap:nth-child(even) .box-text{ 
    padding-left: 40px;
}
.top-strength-list .wrap:nth-child(even) .box-img{ 
    padding-right: 46px;
}

.top-strength-list .title{
    font-size:clamp(20px, 20 / 900 * 100vw ,24px);
    font-weight: 700;
    line-height: 1.58;
    font-feature-settings: "palt" 1;
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 15px;
}
.top-strength-list .title-inner{
    margin-bottom: 10px;
}

.top-strength-list .text{
    font-size: 18px;
    font-size:clamp(16px, 16 / 767 * 100vw ,18px);
    font-weight: 700;
    line-height: 1.5;
    margin-bottom: 20px;
    border-top: solid 2px #ECECEC;
    border-bottom: solid 2px #ECECEC;
    padding: 1em 0.5em 1em 0;
}
.top-strength-list .label{
    font-size: 12px;
    font-weight: 400;
    background-color: #D9D9D9;
    min-width: 40px;
    height: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.top-strength-list .case-text{
    font-size:clamp(12px, 12 / 375 * 100vw ,14px);
    font-weight: 400;
    line-height: 2;
    padding-right: 1em;
}
.top-strength-list .case{
    display: flex;
    align-items: baseline;
    gap: 12px;
}
@media screen and (max-width: 1250px) {
    .top-strength-list .title .title-inner br{
        display: none;
    }
}
@media screen and (max-width: 1024px) {
    .num {
        font-size: 22px;
        width: 50px;
        min-width: 50px;
    }
    .num.num-logo::before {
        width: 65px;
        top: -36px;
        left: -35px;
    }
    .top-strength-list .title{
        gap: 8px;
    }

    .top-strength-list .wrap:nth-child(odd) .box-text{ 
        padding-left: 20px;
    }
    .top-strength-list .wrap:nth-child(odd) .box-img{ 
        padding-left: 20px;
    }
    .top-strength-list .wrap:nth-child(even) .box-text{ 
        padding-left: 30px;
    }
    .top-strength-list .wrap:nth-child(even) .box-img{ 
        padding-right: 20px;
    }
    .top-strength-list .wrap:last-child{
        margin-bottom: 0;
    }

}


@media screen and (max-width: 767px) {
    .top-section-strength{
        padding-top: 197px;
    }
    .top-section-strength .heading-title-area {
        top: -80px;
    }
    .top-section-strength .inner{
        padding-top: 120px;
    }
    .top-section-strength .bg-text {
        top: 56px;
        right: 0;
    }
    .top-section-strength .bg-logo {
    display: none;
    }
    .top-section-strength .polygon {
        top: 92px;
        left: -70px;
        right: unset;
        z-index: 2;
    }
    .num {
        margin: auto;
    }
    .top-strength-list .title{
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 16px;
    }
    .top-strength-list .title .title-inner br{
        display: block;
    }
    .top-strength-list .wrap:nth-child(odd) .box-text,
    .top-strength-list .wrap:nth-child(odd) .box-img,
    .top-strength-list .wrap:nth-child(even) .box-text,
    .top-strength-list .wrap:nth-child(even) .box-img{ 
        padding-left: 0;
        padding-right: 0;
    }
    .top-strength-list .wrap .box-img {
        margin-top: 40px;
    }
    .top-strength-list .wrap .box-img img{
        width: 100%;
        object-fit: cover;
    }
    .top-strength-list .title{
        font-size: clamp(18px, 18 / 375 * 100vw, 24px);
    }
    .top-section-strength .bg-image1{
        display: none;
    }
    .top-section-strength .bg-image2 {
        width: 100%;
    }
    .top-section-strength .noise {
        aspect-ratio: 840 / 728;
    }
    .top-section-strength::before{
        aspect-ratio: 840 / 728;
    }

}
@media screen and (max-width: 550px) {
    .top-section-strength .inner{
        padding: 90px 40px 64px;
    }
    .top-strength-list .title{
        align-items: flex-start;
    }
    .top-strength-list .wrap:nth-child(2) .title .title-inner br{
        display: none;
    }
    .num {
        font-size: 14px;
        width: 33px;
        min-width: 33px;
    }
    .num.num-logo::before {
        width: 43px;
        top: -26px;
        left: -25px;
    }
    .top-section-strength .polygon {
        top: 54px;
        left: -50px;
    }
    .top-strength-list .text ,
    .top-strength-list .case-text {
        padding-right: 0;
    }
}
@media screen and (max-width: 430px) {
    .top-section-strength .heading-title-area {
        top: -70px;
    }
}


/* トップ：開発・応用事例 */
.top-section-case-studies {
    position: relative;
    padding-top: 30px;
    padding-bottom: 110px;
    background-color: #fff;
    overflow-x: hidden;

}
.top-section-case-studies .bg-text {
    top: 110px;
    right: 1vw;
    color: #F5F5F5;
    z-index: 0;
}
.top-section-case-studies .heading-title-area {
    padding-left: 15px;
}
.top-section-case-studies .wrap-title{
    align-items: flex-end;
    margin-bottom: 100px;
    position: relative;
}
.top-section-case-studies .wrap-title .box-text{
    margin-bottom: 50px;
}
.top-section-case-studies .wrap-case .title{
    font-size:clamp(16px, 16 / 767 * 100vw ,18px);
    font-weight: 700;
    width: 100%;
    background-color: var(--main-color);
    color: #fff;
    text-decoration: none;
    height: 102px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.top-section-case-studies .link-box{
    text-decoration: none;
}

.top-section-case-studies .link-box:hover .title{
    background-color: var(--hover-color1);
    transition: background-color 0.3s ease;
    text-decoration: none;
}
.top-section-case-studies .wrap-case .img-container{
    aspect-ratio: 384/288;
    overflow: hidden;
}
.top-section-case-studies .wrap-case .img-container img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.top-section-case-studies .wrap-case .img-container:hover .img{
    transform: scale(1.1);
    transition: transform 0.5s ease;
}
@media screen and (max-width: 1024px) {
    .top-section-case-studies .wrap-case .title {
        height: 70px;
    }
    .top-section-case-studies .wrap-title {
        margin-bottom: 60px;
    }
}
@media screen and (max-width: 767px) {
    .top-section-case-studies {
        padding: 70px 25px 100px;
    }
    .top-section-case-studies .bg-text {
        top: 50px;
        right: 50vw;
        transform: translateX(50%);
    }
    .top-section-case-studies .box-case {
        padding-right: 5px;
        padding-left: 5px;
    }
    .top-section-case-studies .wrap-title {
        margin-bottom: 0;
    }
    .top-section-case-studies .wrap-title .box-text {
        padding-left: 20px;
        padding-right: 20px;
        margin-top: 50px;
        font-size:clamp(12px, 12 / 375 * 100vw ,16px);
    }
    .top-section-case-studies .heading-title-area{
        padding-left: 20px;
        padding-right: 20px;
    }
    .top-section-case-studies .polygon {
        top: 140px;
        right: -30vw;
    }

}
@media screen and (max-width: 575px) {
    .top-section-case-studies {
        padding: 70px 20px 100px;
    }

    .top-section-case-studies .wrap-case{
        gap: 50px;
    }
    .top-section-case-studies .box-case .link-box .img{
        width: 100%;
        object-fit: cover;
    }
    .top-section-case-studies .box-case .link-box {
        margin-bottom: 20px;
    }

}
/* 会社情報 */
.top-section-company{
    padding-top: 10px;
    padding-bottom: 210px;
    background-color: #F5F5F5;
    position: relative;
   
}
.bg-text{
    top: 260px;
    right: 1vw;
    z-index: 3;
    color: #94DF94;
}
.top-section-company.heading-title-area{
    color: #fff !important;
}
.top-section-company .bg-image{
    position: absolute;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 0;
    background-image: url('./images/top/bg-company.jpg');
    background-repeat: no-repeat;
    background-size: cover;
}
.top-section-company::before,
.top-section-company::after{
    content: "";
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}
.top-section-company::before{
    background: linear-gradient(
        310deg,
        rgba(255, 255, 255, 0.5) 2%,
        #00d200e7 90%
    );
    z-index: 1;
}
.top-section-company::after{ 
    background: linear-gradient(
        90deg,
        #00c600ba 0%,
        rgba(0, 198, 0, 0) 40%
    );
    z-index: 2;
}
.top-section-company .noise{
    content: "";
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: url("./images/common/noise.png") repeat;
    opacity: 0.7; /* Figmaの70%に合わせる */
    z-index: 3;
}
.top-section-company .rectangle{
    position: absolute;
    left: 0px;
    bottom: 160px;
    width: 94%;
    height: 154px;
    background-color: #fff;
    z-index: 4;
}

.top-section-company .wrap-company {
    margin-top: 80px;
}
.top-section-company .inner{
    position: relative;
    z-index: 4;
}
.top-section-company .wrap-company .link-box{
    position: relative;
    aspect-ratio: 384/324;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    text-decoration: none;
    padding: 60px 1em 40px;
    overflow: hidden;
    
}
.top-section-company .wrap-company .link-box::after {
  content: "";
  position: absolute;
  margin: auto;
  inset: 0;
  border: 1px solid #fff;
  pointer-events: none;
  width: calc(100% - 26px);
  height: calc(100% - 26px);
}
.top-section-company .wrap-company .link-box::before {
    content: "";
    position: absolute;
    margin: auto;
    inset: 0;
    background-color: rgba(0, 0, 0,0.6);
}
.top-section-company .wrap-company .box-company:nth-child(1) .link-box::before {
    background-color: rgba(0, 0, 0,0.49);
}

.top-section-company .wrap-company .link-box:hover .img{
    transform: scale(1.1);
    transition: transform 0.5s ease;
}
.top-section-company .wrap-company .link-box:hover::before{
    background-color: rgba(0, 0, 0,0.5);
    transition: transform 0.5s ease;
}
.top-section-company .wrap-company .box-company:nth-child(1) .link-box:hover::before{
    background-color: rgba(0, 0, 0,0.3);
    transition: transform 0.5s ease;
}
.top-section-company .wrap-company .button-oval{
    font-size:clamp(14px, 14 / 800 * 100vw ,16px);
    max-width: 220px;
    height: 48px;
    position: relative;
    z-index: 1;
    background-color: var(--main-color);
    margin-top: auto;
    width: 95%;
}
.top-section-company .wrap-company .link-box:hover .button-oval{
    color:#fff;
    background-color: #222222;
    transition: background-color 0.3s ease;
}

.top-section-company .wrap-company .title{
    font-size:clamp(18px, 18 / 767 * 100vw ,22px);
    font-weight: 700;
    text-align: center;
    color: #fff;
    text-decoration: none;
    position: relative;
    z-index: 1;
}
.top-section-company .wrap-company .img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
}

@media screen and (max-width: 1024px) {
    .top-section-company .wrap-company {
        margin-top: 30px;
        padding: 0 15px;
    }
    .top-section-company .bg-text {
        top: 170px;
    }
    .top-section-company .wrap-company .link-box {
        padding: 48px 1em 40px;
    }
}

@media screen and (max-width: 767px) {
    .top-section-company {
        padding-top: 30px;
        padding-bottom: 140px;
    }
    .top-section-company .box-company4    {
        padding-right: 5px;
        padding-left: 5px;
    }
    .top-section-company .wrap-company .link-box {
        padding: 30px 1em 30px;
    }

    .top-section-company .wrap-company .button-oval{
        height: 40px;
    }
    .top-section-company .rectangle {
        bottom: 70px;
    }
}
@media screen and (max-width: 575px) {
    .top-section-company {
        padding-top: 20px;
        padding-bottom: 140px;
        overflow-x: hidden;
    }
    .top-section-company .wrap-company {
        margin-top: 160px;
        padding: 0 0;
        gap: 32px;
    }
    .top-section-company .bg-text .sp-only{
        display: block;
    }
    .top-section-company .bg-text {
        top: 160px;
        text-align: right;
    }
    .top-section-company .wrap-company .title {
        font-size: clamp(18px, 18 / 375 * 100vw, 22px);
    }
    .top-section-company .wrap-company .button-oval {
        font-size: clamp(14px, 14 / 375 * 100vw, 16px);
        max-width: 220px;
        height: 48px;
    }
    .top-section-company .wrap-company .link-box {
        padding: 58px 1em 50px;
    }
    .top-section-company .polygon {
        top: 140px;
        left: -30vw;
    }
    .top-section-company .bg-image {
        top: 0px;
        left: 70%;
        transform: translateX(-50%);
        width: 440%;
        height: auto;
        aspect-ratio: 3358 / 1708;
        background-position: center;
    }
}


/* 採用情報 */
.top-section-recruit{
    padding-top: 50px;
    padding-bottom: 70px;
    background-color: #F5F5F5;
    position: relative;
    background-image: url('./images/top/bg-recruit.jpg');
    background-repeat: no-repeat;
    background-size: 100%;
    overflow-x: hidden;

}
.top-section-recruit .inner{
    position: relative;
    z-index: 1;
}
.top-section-recruit .bg-text {
    top: 110px;
    left: 50%;
    transform: translateX(-50%);
    color: #FDFDFD;
    text-align: center;
    z-index: 0;
}
.top-section-recruit .heading-title-area {
    padding-left: 15px;
}
.top-section-recruit .wrap-title{
    align-items: flex-end;
    margin-bottom: 100px;
}
.top-section-recruit .wrap-title .box-text{
    margin-bottom: 70px;
}
.top-section-recruit .wrap-img{
    position: relative;
}
.top-section-recruit .wrap-img .wrap{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}

.top-section-recruit .img-title{
    font-size: 28px;
    font-size:clamp(22px, 22 / 900 * 100vw ,28px);
    font-weight: 700;
    color: #000000;
    text-align: left;
}
.top-section-recruit .img-text{
    font-size: 22px;
    font-size:clamp(18px, 18 / 900 * 100vw ,22px);
    font-weight: 700;
    text-align: left;
}
.top-section-recruit .rectangle{
    position: absolute;
    left: 0;
    bottom: 0px;
    width: 100%;
    height: 530px;
    background-color: var(--main-color);
    z-index: 0;
}
.top-section-recruit .wrap-img-sp{
        display: none;
}
@media screen and (max-width: 1100px) {
    .top-section-recruit .wrap-title {
        margin-bottom: 50px;
    }
    .top-section-recruit .img-title{
        font-size:22px;
        margin-bottom: 5px;
    }
    .top-section-recruit .img-text{
        font-size:18px;
        line-height: 1.5;
    }

}
@media screen and (max-width: 767px) {
    .container{
        padding: 0 20px;
    }
    .top-section-recruit .wrap-title {
        margin-bottom: 0;
        padding-left: 20px;
        padding-right: 20px;
    }
    .top-section-recruit .wrap-img{
        display: none;
    }
    .top-section-recruit .wrap-img-sp{
        display: block;
    }
    .top-section-recruit .wrap-img-sp .img-sp1,
    .top-section-recruit .wrap-img-sp .img-sp2{
        height: auto;
        width: 100%;
        display: block;
    }
    .top-section-recruit .wrap-img-sp .wrap{
        padding: 20px 20px;
        width: 100%;
        background-color: #fff;
    }
    .top-section-recruit .wrap-img-sp .wrap .inner{
        width: fit-content;
        margin: auto;
    }
    .top-section-recruit .wrap-title .box-text{
        margin-top: 64px;
    }
    .top-section-recruit .heading-title-area {
        text-align: center;
        align-items: center;
    }
    .top-section-recruit .bg-text {
        top: 50px;
    }
    .top-section-recruit {
        background-position: top;
        background-size: 240%;
    }
}
@media screen and (max-width: 575px) {
    .top-section-recruit {
        background-size: 400%;
    }
}


/*トップお知らせ*/
.top-section-news{
    padding-top: 100px;
    padding-bottom: 140px;
    position: relative;
}
.top-section-news .bg-text {
    top: 105px;
    left: 10vw;
    color: #fff;
    z-index: 0;
}
.top-section-news .inner{
    align-items: flex-end;
}
.top-section-news .wrap-title{
    padding-left: 90px;
}
.top-section-news .button-oval{
    margin-left: 0;
    width: 178px;
    height: 56px;
}
.top-section-news .button-oval::after {
    right: 13%;
}
.news-list .news-item{
    display: flex;
    gap: 10px;
    padding: 48px 0;
    border-bottom: dotted 1px #E0E0E0;
}
.news-list .news-item:last-child{
    border-bottom: none;
}
.news-list .date-cat{
   min-width: 180px;
}
.news-list .date{
    font-size: 16px;
    font-weight: 400;
    color: #000;
}
.news-list .cat{
    font-size: 12px;
    font-weight: 500;
    background-color: var(--main-color);
    color: #fff;
    padding: 2px 8px;
    margin: 0 10px;
    white-space: nowrap;
}
.news-list .title{
    font-size: 14px;
    font-weight: 400;
    text-decoration: none;
    color: #000;
}
.news-list .title:hover{
    text-decoration: underline 1px solid var(--main-color);
    text-underline-offset: 5px;
}
.top-section-news::before{
    content: "";
    position: absolute;
    top: 0px;
    left: 0px;
    width: 37.5%;
    height: 100%;
    background-color: #F5F5F5;
    z-index: -1;
}
@media screen and (max-width: 1024px) {
    .top-section-news .wrap-title {
        padding-left: 50px;
    }
    .top-section-news .bg-text {
        left: 4vw;
    }
}
@media screen and (max-width: 767px) {
    .top-section-news {
        padding-top: 50px;
        padding-bottom: 64px;
    }
    .top-section-news .inner {
        padding: 0 50px;
    }
    .top-section-news .wrap-title {
        padding-left: 0;
        display: contents;
    }
    .top-section-news .button-oval{
        order: 3;
        margin: 56px auto 0;
    }
    .top-section-news::before {
        top: 0px;
        left: 0px;
        width: 100%;
        height: 35%;
    }
    .top-section-news .wrap-news-list{
        margin-top: 120px;
    }
    .top-section-news .news-item:last-child {
        border-bottom: dotted 1px #E0E0E0;
    }
}

@media screen and (max-width: 575px) {
     .top-section-news .inner {
        padding: 0 20px;
    }
    .top-section-news .heading-title-area.left {
        padding-left: 15vw;
    }
    .top-section-news .bg-text {
        left: 8vw;
    }
    .news-list .news-item {
        padding: 40px 0;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    .top-section-news .wrap-news-list {
        margin-top: 90px;
    }
    .top-section-news::before {
        height: 27%;
    }
    .top-section-news .bg-text {
       top: 64px;
    }
}

/* トップ：お問い合わせ */
.section-ft-contact {
    position: relative;
    padding-top: 30px;
    padding-bottom: 75px;
    background-color: #F5F5F5;
    overflow-x: hidden;
}
.section-ft-contact .bg-image{
    content: "";
    position: absolute;
    top: 0;
    left: 0px;
    width: 100%;
    height: 79%;
    background-image: url('./images/top/bg-contact.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position-x: right;
    z-index: 0;
}
.section-ft-contact .noise{
    content: "";
    position: absolute;
    top: unset;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 150px;
    background: url("./images/common/noise-cta.png") repeat;
    z-index: 0;
}
.section-ft-contact .bg-text {
    top: 110px;
    left: 46.5%;
    color: #07E407;
    z-index: 0;
}
.section-ft-contact .heading-title-area {
    padding-left: 15px;
}
.section-ft-contact .wrap-title{
    align-items: flex-end;
    margin-bottom: 64px;
    color: #fff;
}
.section-ft-contact .wrap-title .box-text{
    margin-bottom: 50px;
}
.footer-cta-box{
    position: relative;
    z-index: 1;
    background-color: #fff;
    padding: 30px 40px 20px;
    max-width: 904px;
    width: calc(100vw - 40px);
    height: 330px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    margin: auto;
}

.footer-cta-box .box:nth-child(1) { grid-area: 1 / 1 / 2 / 2; }
.footer-cta-box .box:nth-child(2) { grid-area: 1 / 2 / 2 / 3; }
.footer-cta-box .title{
    font-size:clamp(20px, 20 / 767 * 100vw ,24px);
    font-weight: 700;
    /*margin-bottom: 20px;*/
    text-align: center;
}
.footer-cta-box .footer_cta_tel{
    font-size: 40px;
    font-weight: 700;
    /*margin-bottom: 20px;*/
    text-decoration: none;
    color: #111111;
    text-align: center;
    display: block;
}
.footer-cta-box .footer_cta_tel .icon-tel{
    width: 23px;
    height: auto;
}
.footer-cta-box .footer_cta_tel .tel-num,
.contact-cta-tel .tel-num{
    font-family: 'Barlow Condensed', sans-serif;
    font-variant-numeric: tabular-nums;
}
.footer-cta-box .open{
    font-size:clamp(12px, 12 / 375 * 100vw ,16px);
    font-weight: 700;
    /*margin-bottom: 20px;*/
    text-decoration: none;
    color: #111111;
    text-align: center;
    display: block;
}
.footer-cta-box .footer_cta_email{
    max-width: 290px;
    width: 80%;
    height: 64px;
    font-size:clamp(20px, 20 / 767 * 100vw ,24px);
    margin: 40px auto 0;
}
.footer-cta-box .footer_cta_email .icon-mail {
    width: 27px;
    height: auto;
    margin-right: 12px;
    margin-top: 4px;
}
.footer-cta-box::before{
    width: 1px;
    height: 200px;
    background-color: #E7E7E7;
    content: "";
    position: absolute;
    top: 64px;
    left: 50%;
}


@media screen and (max-width: 767px) {
    .section-ft-contact .wrap-title {
        margin-bottom: 10px;
        padding: 0 20px;
        gap: 60px;
    }
    .section-ft-contact .heading-title-area {
        padding-left: 0;
        align-items: center;
    }
    .section-ft-contact .wrap-title .box-text .text{
        font-size:clamp(12px, 12 / 375 * 100vw ,18px);
        width: fit-content;
        margin: auto;
    }
    .footer-cta-box .title{
        font-size:clamp(18px, 18 / 375 * 100vw ,20px);
    }

    .footer-cta-box .footer_cta_tel{
        font-size: 35px;
        font-size:clamp(32px, 32 / 375 * 100vw ,35px);
        margin-bottom: 10px;
    }
    .footer-cta-box .footer_cta_tel .icon-tel{
        width: 20px;
        height: auto;
    }
    .footer-cta-box {
        padding: 64px 30px 40px 0;
        height: auto;
    }
    .footer-cta-box::before {
        top: 35px;
        left: 47%;
    }
    .section-ft-contact .bg-text {
        top: 40px;
        left: 50%;
        right: auto;
        transform: translateX(-50%);
    }
    .section-ft-contact .polygon {
        top: 170px;
        left: -25vw;
    }
    .section-ft-contact .bg-image {
        background-image: url(./images/top/bg-contact-sp.jpg);
    }
}
@media screen and (max-width: 600px) {
    .section-ft-contact {
        padding-top: 40px;
    }
    .footer-cta-box {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(2, 1fr);
        height: auto;
        padding: 20px 0 0;
    }

    .footer-cta-box .box:nth-child(1) { grid-area: 1 / 1 / 2 / 2; }
    .footer-cta-box .box:nth-child(2) { grid-area: 2 / 1 / 3 / 2; }
    
    .footer-cta-box .box{
        padding: 50px 10px;
    }
    .footer-cta-box::before {
        top: 50%;
        left: 50%;
        transform: translate(-50% ,-50%);
        width: 53%;
        height: 1px;
    }


    .section-ft-contact .sp-only{
        display: block;
    }
    .footer-cta-box .footer_cta_email {
        width: 270px;
        font-size: 18px;
    }

}


/*------------------------------------*/
/*  会社概要ページ                      */
/*------------------------------------*/
.section-company{
    padding: 100px 0;
}
.wrap-table{
    overflow-x: auto;
}
.wrap-table .space{
    margin-right: 4em;
}
.section-message{
    padding-top: 72px;
    position: relative;
}
.section-message img{
    max-width: 1100px;
    width: 49vw;
    height: auto;
    object-fit: cover;
    position: absolute;
    top: 150px;
    right: calc((100vw - 1200px) / 2 * -1);
}
.section-company-info .sub-text{
    margin: 70px auto ;
    text-align: center;
    max-width: 800px;
}
.section-company table th{
    padding-left: 3em;
    text-align: left;
    width: 20%;
}
.section-history .wrap-table{
    margin-top: 70px;
}
.section-company-info table ,
.section-history table{
    min-width: 650px;
}
@media screen and (max-width: 767px) {
    .section-company-info table,
    .section-history table {
        min-width: 0;
    }
    .section-company table th {
        padding-left: 1em;
    }
    .section-company-info .wrap-table table th,
    .section-company-info .wrap-table table td,
    .section-history .wrap-table table th,
    .section-history .wrap-table table td {
        font-size: clamp(10px, 2.8vw, 14px);
    }
}
.wrap-factory-media{
    display: flex;
    gap: 16px;
    margin-top: 16px;
}
.wrap-factory-media .factory-img{
    width: 50%;
    height: 240px;
    object-fit: cover;
}
.wrap-factory-media .factory-map{
    width: 50%;
    height: 240px;
}
@media screen and (max-width: 600px) {
    .wrap-factory-media{
        flex-direction: column;
    }
    .wrap-factory-media .factory-img,
    .wrap-factory-media .factory-map{
        width: 100%;
        height: 200px;
    }
}

@media screen and (min-width: 2245px) {
    .section-message {
        min-height: 1000px;
    }
}
@media screen and (max-width: 1200px) {
    .section-message img{
        width: 100%;
        max-width: 100%;
        right: 0;
        position: unset;
    }
}
@media screen and (max-width: 767px) {
    .section-company{
        padding: 80px 0;
    }
    .section-message .row {
        flex-direction: column-reverse;
    }
    .section-company-info .sub-text{
        text-align: left;
        margin: 40px auto;
    }
    .section-company table th{
        padding-left: 2em;
        width: 20%;
    }
    .section-company table td{
        font-size: 14px;
    }
}

/*------------------------------------*/
/*  製品情報ページ                      */
/*------------------------------------*/
.post-type-archive-products .container {
    max-width: 1246px;
}
.archive-products,
.taxonomy-products{
    margin: 50px auto;
}
.archive-products .no-posts,
.taxonomy-products .no-posts{
    text-align: center;
    font-size: 18px;
    color: var(--text-color);
    margin: 100px auto;
}
.product-list{
    list-style: none;
    row-gap: 40px;
    margin-top: 50px;
}
.product-list a{
    text-decoration: none;
}
.product-list .product-image{
    overflow: hidden;
    aspect-ratio: 280/210;
}
.product-list .product-image img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.3s ease;
}
.product-list a:hover .product-image img{
    transform: scale(1.05);
    transition: 0.3s ease;
}
.product-title{
    font-size:clamp(16px, 16 / 900 * 100vw ,20px);
    font-weight: bold;
    color: var(--text-color);
    margin-top: 10px;
    padding-left: 5px;
}
.product-subtitle{
    font-size: 14px;
    font-weight: 500;
    color: var(--text-color);
    padding-left: 5px;
    line-height: 1.5;
    margin-top: 0.5em;
}
.product-item{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.product-item .button-oval{
    background-color: #fff;
    color: var(--main-color);
    border: solid var(--main-color) 1px;
    margin: 18px auto 10px;
    max-width: 278px;
    width: 100%;
    height: 48px;
    font-size: 16px;
}
.product-item .button-oval::after {
    border-top: 1px solid var(--main-color);
    border-right: 1px solid var(--main-color);
}
.product-item .button-oval:hover{
    background-color: var(--main-color);
    color: #fff;
}
.product-item .button-oval:hover::after{
    border-top: 1px solid #fff;
    border-right: 1px solid #fff;
}
@media screen and (max-width: 767px) {
    .product-title{
        font-size:clamp(16px, 16 / 550 * 100vw ,20px);
    }
}
@media screen and (max-width: 575px) {
    .product-list{
        gap: 50px;
    }
    .product-title{
        font-size:clamp(16px, 16 / 375 * 100vw ,20px);
    }
}


/*-------詳細ページ-------------*/
.section-products{
    padding: 30px 0;
}
.section-use-cases{
    padding-bottom: 0;
}
.taxonomy-products .link-ancker-taxonomy{
    margin-bottom: 50px;
}
/*メイン情報*/
.section-main-details{
    padding-top: 58px;
}
.section-main-details .box-images,
.product-other .box-images{
    row-gap: 15px;
}
.section-main-details .box-images .col-12,
.section-main-details .sub-image,
.product-other .box-images .col-12,
.product-other .sub-image{
    padding-right: 8px;
    padding-left: 8px;
}
.section-main-details .sub-image,
.product-other .sub-image{
    aspect-ratio: 4/3;
    overflow: hidden;
}
.section-main-details .sub-image img,
.product-other .sub-image img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: left center;
}
.product-other .box-images .col-12{
    aspect-ratio: 4/3;
    display: block;
    overflow: hidden;
}
.product-other .box-images .col-12 img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.only-others .product-other + .product-other{
    border-top: 1px solid #B3B3B3;
}
.product-other .description-title-wrap{
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
}
.product-other .description-area{
    font-size:clamp(16px, 16 / 767 * 100vw ,20px);
    font-weight: 500;
    white-space: nowrap;
}
.section-main-details .description-title,
.product-other .description-title{
    font-size:clamp(23px, 23 / 800 * 100vw ,32px);
    line-height: 1.6;
    margin-bottom: 24px;
}
.section-main-details .description-list,
.product-other .description-list{
    font-size:clamp(16px, 16 / 767 * 100vw ,17px);
    font-weight: 500;
}
.section-main-details .button-rectangle{
    margin-top: 40px;
}
.section-main-details .box-details,
.product-other .box-details{
    padding-left: 30px;
}
@media screen and (max-width: 1220px) {
    .section-main-details .wrap-main-details,
    .product-other .wrap-main-details{
        justify-content: center;
        row-gap: 30px;
    }
    .section-main-details .box-details,
    .product-other .box-details{
        padding-left: 15px;
    }
}
@media screen and (max-width: 767px) {
    .section-products{
        padding: 60px 0;
    }
    .section-main-details .button-rectangle{
        margin: 40px auto 0;
    }
}
@media screen and (max-width: 550px) {
    .section-products{
        padding: 40px 0;
    }
    .product-other{
        padding: 30px 0;
    }

}
/* 製品概要 */
.section-overview .overview{
    font-size: 18px;
    font-size:clamp(16px, 16 / 550 * 100vw ,18px);
    font-weight: 500;
    letter-spacing: 0.04em;
    
}
/*その他仕入商品テーブル*/
.section-overview .spec-type-table{
    min-width: auto;
    margin-bottom: 0;
}
.section-products.section-overview{
    padding-top: 60px;
}
.section-overview .spec-type-table th:first-child,
.section-overview .spec-type-table td:first-child{
    width: 160px;
}
/*使用例*/
.use-case-list{
    row-gap: 48px;
}
.use-case-image{
    width: 100%;
    height: auto;
    aspect-ratio: 592/360;
    background-color: #F5F5F5;
}
.use-case-image img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.use-case-spec{
    display: flex;
    flex-wrap: wrap;
    gap: 5px 0;
    margin-bottom: 16px;
}
.use-case-title{
    font-size:clamp(20px, 20 / 550 * 100vw ,22px);
    font-weight: 700;
    margin-bottom: 8px;
}
.use-case-spec-item{
    display: flex;
    font-weight: 500;
}
/*規格一覧*/
.heading-mid{
    margin: 38px 0 30px;
    font-size:clamp(20px, 20 / 550 * 100vw ,22px);
}
.spec-type-list-wrapper{
    overflow-x: auto;
}
.spec-type-table {
    margin-bottom: 80px;
    min-width: 800px;
    width: 100%;
}
.spec-type-table th{
    text-align: left;
    border-top: none;
}
.spec-type-table tr:first-child th{
    border-top: none;
}
.spec-type-table td{
    vertical-align: text-top;
}

.spec-type-structure{
    width: 16%;
    min-width: 130px;
    text-align: center;
}
.spec-type-name{
    width: 12%;
    min-width: 100px;
}
.spec-type-base{
    width: 12%;
    min-width: 100px;
}
.spec-type-detail{
    padding-right: 16px;
}
.spec-type-example{
    width: 15%;
    min-width: 100px;
}
/* 使用例なし：table-layout fixedで厳密に分配 */
.spec-type-table.no-example {
    table-layout: fixed;
}
.spec-type-table.no-example .spec-type-structure { width: 21%; }
.spec-type-table.no-example .spec-type-name      { width: 17%; }
.spec-type-table.no-example .spec-type-base      { width: 17%; }
/* 品種詳細なし：detailの幅をexampleに吸収 */
.spec-type-table.no-detail .spec-type-example    { width: 25%; }
/* 両方なし */
.spec-type-table.no-example.no-detail {
    table-layout: fixed;
}
.spec-type-table.no-example.no-detail .spec-type-structure { width: 28%; }
.spec-type-table.no-example.no-detail .spec-type-name      { width: 22%; }
.spec-type-table.no-example.no-detail .spec-type-base      { width: 22%; }
.spec-type-pdf{
    width: 80px;
    min-width: 80px;
    max-width: 80px;
    text-align: center;
}
.novadan-w th,
.novadan-w td{
    width: 25%;
}
.spec-type-image{
    width: 80px;
    min-width: 80px;
    max-width: 80px;
    text-align: center;
}
@media screen and (max-width: 767px) {
    .spec-type-list-wrapper {
        overflow-x: visible;
    }
    .spec-type-table {
        min-width: 0;
    }
    .spec-type-table th,
    .spec-type-table td {
        font-size: clamp(6px, 2.8vw, 13px);
        padding: 8px 6px;
    }
    .spec-type-image,
    .spec-type-pdf {
        width: auto;
        min-width: 0;
        max-width: none;
    }
}
.spec-thumb{
    width: 50px;
    height: 50px;
    object-fit: cover;
    display: block;
    margin: 0 auto;
    cursor: pointer;
}
.btn-pdf{
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    background-color: var(--main-color);
    padding: 3px 8px;
    border-radius: 3px;
    text-decoration: none;
    white-space: nowrap;
}
.btn-pdf:hover{
    opacity: 0.8;
}



/*色付きテーブル*/
.table-colored th{
    background-color: #9AFF9A;
}
.table-colored th,
.table-colored td{
    padding: 10px 20px;
    border: solid 1px #B3B3B3;
    line-height: 1.6;
}
.section-spec-list .table-colored {
    min-width: 650px;
    margin-bottom: 10px;
}
.section-spec-list .table-colored td:not(:first-child){
    text-align: center;
}
.table-colored .narrow{
    width: 12%;
}
@media screen and (max-width: 1024px) {
    .section-spec-list .wrap-table1 .table-colored th:first-child,
    .section-spec-list .wrap-table1 .table-colored td:first-child{
        width: 34%;
    }
    .section-spec-list .wrap-table1 .table-colored th:not(:first-child)
    .section-spec-list .wrap-table1 .table-colored td:not(:first-child){
        width: 22%;
    }
    .table-colored .narrow{
        width: 15%;
    }

}
.map-image{
    margin-top: 80px;
    margin-bottom: 80px;
}

/*よくある質問*/
.faq-question,
.faq-answer{
    font-size:clamp(18px, 18 / 767 * 100vw ,24px);
    font-weight: 700;
    line-height: 1.4;
    position: relative;
    padding: 40px 1em 40px 74px;
    
}
.faq-question{
    font-weight: 500;    
    border-bottom: solid 1px #E3E3E3;
}
.faq-question::before,
.faq-answer::before{
    content: "";
    position: absolute;
    top: 24px;
    left: 0;;
    font-size: 24px;
    font-weight: 700;
    color: #fff;
    border-radius: 100px;
    width: 60px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.faq-question::before{
    content: "Q";
    background-color: var(--main-color);
}
.faq-answer::before{
    content: "A";
    background-color: #FF383C;
}
@media screen and (max-width: 767px) {
    .faq-question::before, .faq-answer::before {
        top: 30px;
        font-size: 20px;
        width: 50px;
        height: 50px;
    }
    .faq-question, .faq-answer {
        font-size:clamp(16px, 16 / 375 * 100vw ,18px);
        padding: 40px 0.5em 40px 64px;
    }

}
/*関連製品*/
.section-related-products .product-list{
    margin-top: 38px;
}
.button-oval.green.small{
    width: 198px;
}

/*製品情報：その他*/
.only-others .product-material-images{
    row-gap: 48px;
}
.only-others .other-img-caption{
    margin-top: 0px;
    font-size: 20px;
    font-weight: 700;
}
.only-others .box-other-img{
    width: 100%;
    height: auto;
    aspect-ratio: 4/3;
}
.only-others .other-img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/*------------------------------------*/
/*  開発事例一覧ページ                   */
/*------------------------------------*/
.archive-solutions{
    padding-top: 50px;
}
.link-ancker-taxonomy a{
    text-decoration: none;
    color: var(--text-color);
    font-size: clamp(16px, 16 / 1000 * 100vw ,20px);
    font-weight: 700;
    letter-spacing: 0.04em;
    height: 80px;
    display: flex;
    align-items: center;    
    justify-content: center;
    background-color: #E1F3DF;
    border-radius: 30px;
    position: relative;
}
.link-ancker-taxonomy a::after{
    content: "";
    position: absolute;
    right: 30px;
	width: 8px;
	height: 8px;
	border-top: 1px solid #222222;
	border-right: 1px solid #222222;
	-webkit-transform: rotate(135deg);
	transform: rotate(135deg);
}
.section-solution-cat{
    padding: 50px 0;
}
.post-type-archive-solutions .container {
    max-width: 1246px;
}
.section-solution-cat .text{
    margin: 64px auto ;
    text-align: center;
}
@media screen and (max-width: 1024px) {
    .link-ancker-taxonomy li{
        padding-left: 5px;
        padding-right: 5px;
    }
    .link-ancker-taxonomy a{
        border-radius: 80px;
        height: 65px;
    }
    .link-ancker-taxonomy a::after {
        right: 20px;
    }
}
@media screen and (max-width: 767px) {
    .link-ancker-taxonomy {
        row-gap: 10px;
    }
    .link-ancker-taxonomy a::after {
        right: 30px;
    }

}
@media screen and (max-width: 500px) {
    .link-ancker-taxonomy a{
        font-size: 14px;
        height: 60px;
    }
    .link-ancker-taxonomy a::after {
        right: 20px;
        width: 6px;
        height: 6px;
    }

}

/*コア技術*/
.section-core-tech{
    padding-bottom: 100px;
}
.core-tech-item{
    display: flex;
    gap: 34px;
    margin-bottom: 40px;
}
.core-tech-title{
    background-color: #004B3F;
    color: #fff;
    height: 76px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size:clamp(20px, 20 / 900 * 100vw ,24px);
    font-weight: 700;
    letter-spacing: 0.04em;
    box-shadow: 8px 8px 0 #BFD2CF;
    width: 30%;
    min-width: 300px;
}
.core-tech-text{
    font-size:clamp(18px, 18 / 767 * 100vw ,20px);
    font-weight: 700;
    letter-spacing: 0.04em; 
    line-height: 1.5;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 70%;
}
@media screen and (max-width: 767px) {
    .core-tech-item{
        gap: 24px;
    }
    .core-tech-title{
        font-size: 18px;
        min-width: 250px;
    }
    .core-tech-text{
        font-size: 16px;
    }
}
@media screen and (max-width: 600px) {
    .core-tech-item{
        flex-direction: column;
        gap: 30px;
        margin-bottom: 60px;
    }
    .core-tech-title{
        width: 100%;
        height: 64px;
    }
    .core-tech-text{
        width: 100%;
        padding: 0 1em;
    }
}
/*------------------------------------*/
/*  開発事例ページ                      */
/*------------------------------------*/
.heading-color{
    font-size:clamp(24px, 24 / 767 * 100vw ,32px);
    font-weight: 700;
    margin-bottom: 24px;
    background-color: #E1F3DF;
    padding: 11px 28px;
    line-height: 1.5;
}
.heading-color.fit{
    width: fit-content;
    padding: 10px 44px;
}
@media screen and (max-width: 767px) {
    .heading-color{
        font-size:clamp(20px, 20 / 375 * 100vw ,24px);
        padding: 8px 15px;
    }
}
/*-------詳細ページ-------------*/
.section-solutions{
    padding: 40px 0;
}
/*メイン情報*/
.section-solutions-main-details{
    padding-top: 58px;
}
.section-solutions-main-details .case_study_list{
    font-size: clamp(16px, 16 / 900 * 100vw ,20px);
    font-weight: 500;
    margin-bottom: 30px;
}
.section-solutions-main-details .box-details{
    padding-left: 30px;
    padding-right: 0;
}
.section-solutions-main-details .row{
    justify-content: center;
}
.section-solutions-main-details .box-images a{
    aspect-ratio: 592/444;
    display: block;
    overflow: hidden;
}
.section-solutions-main-details .box-images .main-image{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/*見出し（H3）*/
.heading-leftline{
    font-size:clamp(20px, 20 / 767 * 100vw ,24px);
    font-weight: 700;
    margin-bottom: 20px;
    position: relative;
    padding-left: 40px;
    margin-top: 40px;
}
.heading-leftline::before{
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 30px;
    height: 2px;
    background-color: var(--main-color);
}
@media screen and (max-width: 767px) {
    .heading-leftline{
        font-size:clamp(18px, 18 / 375 * 100vw ,20px);
        margin-bottom: 16px;
        margin-top: 30px;
    }

    .section-solutions-main-details .box-images{
        margin-top: 0;
    }
    .section-solutions-main-details img{
        width: 100%;
    }
    .section-solutions-main-details .box-details{
        padding-left: 15px;
        padding-right: 15px;
    }
}
/*繰り返しフィールド*/
.solutions-text{
    margin-bottom: 2em;
}
.solutions-image{
    max-width: 600px;
    width: 100%;
    height: auto;
    margin-left: 0;
    margin-bottom: 30px;
}
.section-reference-materials .solutions-image{
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
}
.solutions-image img{
    width: 100%;
    height: auto;
    margin: 0;
}
.section-solutions.with-sidebar{
    padding-top: 70px;
    padding-bottom: 100px;
}
.section-solutions.with-sidebar .solutions-left{
    margin-top: 0;
}   
.section-solutions-repetition:first-child{
    padding-top: 0;
}
.section-solutions .button-oval{
    margin-top: 0;
    margin-bottom: 30px;
}


.single-solutions article .container{
    background-color: #f5f5f5;
}
.section-solutions.with-sidebar .flex{
    display: flex;
    gap: 30px;
    background-color: #f5f5f5;
}
.section-solutions.with-sidebar .solutions-left{
    width: 75%;
    background-color: #fff;
}  
.section-solutions.with-sidebar .solutions-sidebar{
    width: 25%;
    background-color: #fff;
}  

.single-solutions article{
    background-color: #f5f5f5;
}
.single-solutions .page_title{
    z-index: 1;
}
.section-solutions.with-sidebar .content{
    padding-left: 20px;
    padding-right: 20px;
}
/*サイドバー*/
.solutions-group{
    border-left: solid 1px #D8D8D8;
    border-right: solid 1px #D8D8D8;
    
}
.solutions-cat-title{
    font-size: 16px;
    font-weight: 700;
    background-color: #E1F3DF;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: 24px;
    letter-spacing: 0.04em;

    border-bottom: solid 1px #D8D8D8;
}
.solutions-list a{
    text-decoration: none;
    color: #000;
    font-size: 14px;
    font-weight: 700;
    padding-left: 24px;
    height: 50px;
    display: flex;
    align-items: center;    
    justify-content: flex-start;
    border-bottom: solid 1px #D8D8D8;
}
.solutions-list a::before{
    content: ">";
    margin-right: 6px;
}
.solutions-list a:hover{
    background-color: #F5F5F5;
}
.box-contact-sidebar{
    padding: 24px 0 10px;
    background-color: #f5f5f5;
}
.contact-sidebar{
    width: 90%;
    gap: 10px;
}
/* サイドバーを追従させる */
.section-solutions.with-sidebar .solutions-sidebar {
    position: sticky;
    top: 20px;   /* ヘッダーの高さに合わせて調整 */
}
.section-solutions.with-sidebar .flex{
    align-items: flex-start;   /* Bootstrapのstretchを解除 */
}


@media screen and (max-width: 1220px) {
    .solutions-cat-title{
        height: 60px;
        padding-left: 14px;
    }
    .solutions-list a {
        padding-left: 14px;
        padding-right: 8px;
    }
    .section-solutions.with-sidebar .flex{
        gap: 20px;
    }
}
@media screen and (max-width: 767px) {
    .section-solutions-main-details{
        padding-top: 30px;
    }
    .section-solutions.with-sidebar .flex{
        flex-direction: column;
        gap: 50px;
    }
    .section-solutions.with-sidebar .solutions-left{
        width: 100%;
    }  
    .section-solutions.with-sidebar .solutions-sidebar{
        width: 100%;
    }  


    .section-solutions.with-sidebar .button-oval{
        margin-top: 0;
    }
    .section-solutions.with-sidebar .solutions-sidebar {
        position: unset;
        top: unset;
    }
}

/*サイドバーをアコーディオン化*/
/* デフォルトを「開いた状態」にする */
.solutions-group .solutions-list {
    max-height: 1000px;
    overflow: hidden;
    transition: max-height 0.35s ease;
}

/* is-open が付いたときに閉じる */
.solutions-group.is-open .solutions-list {
    max-height: 0;
}

/* タイトルをクリックできるように */
.solutions-cat-title {
    cursor: pointer;
    position: relative;
    padding-right: 20px;
}

/* 開閉アイコン 
.solutions-cat-title::after {
    content: "＋";
    position: absolute;
    right: 0;
    top: 0;
    transition: transform 0.3s;
}

.solutions-group.is-open .solutions-cat-title::after {
    content: "−";
}
*/

/*------------------------------------*/
/*  拠点情報・対応エリアページ            */
/*------------------------------------*/
.section-locations{
    padding: 50px 0 100px;
}
.section-locations .map-image{
    margin-top: 0;
}
.wrap-table-locations table th{
    padding-left: 2em;
    width: 20%;    
    font-size:clamp(14px, 14 / 767 * 100vw ,18px);
    background-color: #F5F5F5;
    border-left: solid 1px #D9D9D9;
}
.wrap-table-locations table td{
    width: 80%;
    font-size: 18px;
    font-size:clamp(14px, 14 / 767 * 100vw ,18px);
    border-left: solid 1px #D9D9D9;
    border-right: solid 1px #D9D9D9;
}
.wrap-table-locations table td span{
    display: inline-block;
}
.wrap-table-locations iframe{
    width: 100%;
    margin-top: 25px;
}
@media screen and (max-width: 767px) {
    .section-locations{
        padding: 20px 0 80px;
    }
    .wrap-table-locations tr {
        display: flex;
        flex-direction: column;
    }
    .wrap-table-locations table th,
    .wrap-table-locations table td{
        width: 100%;
    }
    .wrap-table-locations iframe{
        margin-bottom: 20px;
    }
}
@media screen and (max-width: 550px) {
    .page-locations .page_title_base > h1 {
        font-size: 30px;
    }
}
/*------------------------------------*/
/*  品質管理体制ページ                  */
/*------------------------------------*/
.section-quality{
    padding: 50px 0 100px;
}
.contact-text-box{
        width: fit-content;
    margin: auto;
}
.contact-tel-box{
    text-align: center;
    background: #f5f5f5;
    padding: 30px 80px;
    width: 100%;
    max-width: 840px;
    margin: 80px auto 50px;
}
.contact-tel-box .title {
    font-size: clamp(20px, 20 / 767 * 100vw, 24px);
    font-weight: 700;
    margin-bottom: 20px;
    text-align: center;
}
.contact-cta-tel{
    font-size: 40px;
    font-weight: 700;
    text-decoration: none;
    color: #111111;
    text-align: center;
    display: block;
}

.contact-tel-box .icon-tel{
    width: 23px;
    height: auto;
}
.contact-tel-box .open{
    font-size:clamp(12px, 12 / 375 * 100vw ,16px);
    font-weight: 700;
    text-decoration: none;
    color: #111111;
    text-align: center;
    display: block;
}
@media screen and (max-width: 500px) {
    .contact-cta-tel{
        font-size: 36px;
    }
    .contact-tel-box {
        padding: 30px 20px;
        margin: 50px auto 50px;
    }
    .contact-tel-box .icon-tel {
        width: 20px;
        height: auto;
    }

}

/*------------------------------------*/
/*  プライバシーポリシー・サイトマップページ  */
/*------------------------------------*/
.page-privacy .container{
    margin-bottom: 80px;
}
.page-sitemap .menu-ftnavi-container{
    margin-bottom: 60px;
    padding-left: 50px;
}
.page-sitemap .menu-ftnavi-container a{
    font-size: clamp(16px, 16 / 767 * 100vw ,18px);
    font-weight: 500;
    text-decoration: none;
    color: var(--text-color);
}
.page-sitemap .menu-ftnavi-container .sub-menu{
    margin: 12px 0 24px 20px;
}
.page-sitemap .menu-ftnavi-container .menu-item{
    margin-bottom: 12px;
}


/****************************************
3. header,nav
*****************************************/
@media screen and (max-width: 1000.98px) {
    .header_cta,
    .header_menu,
    .header_tel {
        display: none;
    }
}
@media screen and (min-width: 1001px) {
    .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;
    }
    .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: "";
    }
    .home .header {
        background-color: #F5F5F5;
    }
    .home .header::before {
        background-color: #F5F5F5;
    }
/*    .header_title {
        margin: 0px 0px 0px 10px;
        width: 240px;
    }*/
/*    .header_cta {
        margin: 0px 10px 0px auto;
    }*/
    .header_menu {
        width: 65%;
        max-width: 680px;
    }
    .header.js_hide {
        transform: translateX(-50%) translateY(-100%);    
    }
    body {
        margin-top: 80px;
    }
}
@media print, (min-width: 1100px) {
    .header {
        padding-left: 70px;
        padding-right: 175px;
        height: 80px;
    }
    body {
        margin-top: 96px;
    }
}
.header_nav{
    flex-grow: 1;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-right: 0;
    gap: 40px;
}
.header_cta_tel {
    color: #111111;
    font-size:clamp(18px, 18 / 1200 * 100vw ,22px);
    font-weight: bold;
    text-decoration: none;
    text-indent: 0.5px;
    letter-spacing: 0.5px;
    position: relative;
}
.header_cta_tel:hover {
    color: var(--main-color);
    opacity: 0.8;
}
.icon-tel {
    content: "";
    display: inline-block;
    width: 12px;
    height: auto;
    aspect-ratio: 12/18;
    background-image: url('data:image/svg+xml,%3Csvg%20width%3D%2212%22%20height%3D%2218%22%20viewBox%3D%220%200%2012%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M1.96585%2011.397C5.23668%2017.7537%208.91101%2018.4079%209.97933%2017.8367C10.081%2017.7821%2010.1699%2017.7348%2010.2579%2017.6875L7.7561%2012.825C7.66452%2012.873%207.57106%2012.9218%207.47666%2012.9723C6.61526%2013.4336%205.75481%2012.102%204.65249%209.95987C3.55024%207.81773%202.96475%206.33933%203.82609%205.87851C3.92137%205.82802%204.01313%205.77783%204.10395%205.72848L1.60211%200.865434C1.51312%200.913167%201.42513%200.960358%201.32344%201.01456C0.255166%201.58584%20-1.30499%205.04052%201.96585%2011.397ZM11.7711%2016.8783C12.1839%2016.6576%2011.9574%2016.1739%2011.7224%2015.7177C11.7224%2015.7177%2010.2221%2012.8027%2010.0414%2012.4515C9.8608%2012.1004%209.56183%2011.9023%209.32033%2012.0314C9.1688%2012.1126%208.81572%2012.2836%208.36082%2012.5138L10.8579%2017.3664C11.2745%2017.144%2011.5024%2017.0217%2011.7711%2016.8783ZM5.63388%204.86717C5.87527%204.73842%205.88498%204.37396%205.70428%204.0233C5.52453%203.67173%204.02419%200.756901%204.02419%200.756901C3.78916%200.300279%203.52812%20-0.16414%203.11516%200.056707C2.84653%200.20014%202.61861%200.322348%202.20206%200.544811L4.69914%205.39808C5.14369%205.14713%205.4823%204.94823%205.63388%204.86717Z%22%20fill%3D%22%2300D200%22%2F%3E%0A%3C%2Fsvg%3E');    background-repeat: no-repeat;
    background-size: contain;
    margin-right: 5px;
}
.header_cta_tel::after {
    content: "平日08:30〜17:00";
    position: absolute;
    bottom: -14px;
    left: 20px;
    font-size: 11px;
    font-weight: 400;
}
.header_cta_contact {
    background-color: var(--accent-color);
    color: #fff;
    font-size: 15px;
    font-weight: bold;
    text-decoration: none;
    width: 174px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 5px;
    position: absolute;
    top: 0px;
    right: 0px;
}
.header_cta_contact:hover {
    color: #fff;
    background-color: #222222;
    transition: background-color 0.3s ease;
}
.icon-mail {
    content: "";
    display: block;
    width: 24px;
    height: auto;
    aspect-ratio: 24/17;
    background-image: url('data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2217%22%20viewBox%3D%220%200%2024%2017%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M23.0625%200H0.93759C0.675091%200%200.435092%200.106316%200.270093%200.265791C0.105094%200.421722%209.39941e-05%200.644986%209.39941e-05%200.889514V16.1105C-0.00365599%2016.3515%200.105094%2016.5783%200.273843%2016.7378C0.438842%2016.8972%200.678841%2017%200.93759%2017H23.0625C23.3175%2017%2023.5575%2016.8972%2023.7263%2016.7378C23.895%2016.5783%2024%2016.3515%2024%2016.1105V0.889514C24%200.644986%2023.895%200.421722%2023.7263%200.265791C23.5613%200.106316%2023.3213%200%2023.0625%200ZM22.5863%202.38415V15.664H1.41009V2.37794L10.7963%2010.2808H10.8001C11.1376%2010.5643%2011.5688%2010.7132%2011.9963%2010.7132C12.1463%2010.7132%2012.2925%2010.6883%2012.4388%2010.6529H12.4838L12.5963%2010.6139C12.8138%2010.543%2013.0163%2010.4296%2013.1963%2010.2808C14.7882%208.9421%2018.631%205.70698%2021.2156%203.53192L22.5863%202.38459V2.38415ZM21.6952%201.34136C19.3899%203.28252%2014.1811%207.66674%2012.2588%209.28497C12.2175%209.31686%2012.1725%209.34167%2012.1275%209.35585C12.0863%209.37002%2012.0413%209.37711%2011.9963%209.37711C11.9025%209.37711%2011.8125%209.34876%2011.7338%209.28143L2.29509%201.33604H13.4175L21.6947%201.34136H21.6952Z%22%20fill%3D%22white%22%2F%3E%0A%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-size: contain;
}
@media screen and (max-width: 1400px) {
    .header {
        padding-left: 20px;
        padding-right: 105px;
    }
    .header_cta_contact {
        width: 110px;
        font-size: 13px;
    }
    .header_nav {
        gap: 20px;
    }
    .header_menu {
        width: 70%;
/*        max-width: 600px;*/
    }
}
@media print, (max-width: 1300px) {
    .header {
        padding-right: 90px;
    }
    .header_cta_contact {
        width: 90px;
        font-size: 12px;
    }
    .header_menu {
        width: 70%;
        max-width: 550px;
    }
/*     .header_nav {
       gap: 10px;
    }
*/
}
.header_title_logo img {
    max-width: 300px;
}
.header_title {
    width: 300px;
}
@media print, (min-width: 1380px) {
    .header_title_logo img {
        max-width: 330px;
    }
    .header_title {
        width: 330px;
    }
}

@media print, (min-width: 1100px) {
    .header_title_logo img {
        max-width: 300px;
        margin: 0;
    }
    .header_title {
        width: 250px;
    }
}
@media screen and (max-width: 1000px) {
    .header {
        height: 60px;
        position: fixed;
        z-index: 10000;
        padding: 0;
    }
    .header_title_logo img {
        max-width: 300px;
        margin-left: 0;
        padding-top: 4px;
    }
    .header_title {
        position: fixed;
        background-color: #fff;
        width: 100%;
        height: 60px;
        padding-left: 10px;
        z-index: 10001;
        top: 0;
    }
    .section-fv {
        padding-top: 60px;
    }
}
.header_menu > .menu {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0px;
    margin: 0px;
}

.header_menu > .menu > li {
    position: relative;
    list-style-type: none;
    font-size:clamp(13px, 13 / 1100 * 100vw ,14px);
}

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

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

.header_menu .sub-menu {
    display: block;
    display: none;
    position: absolute;
    top: 5em;
    left: 50%;
    transform: translateX(-50%);
    padding: 2em;
    background-color: #fff;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
    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: #222222;
    text-decoration: none;
}
.header_menu .sub-menu > li > a:hover {
    color: var(--main-color);
}

/*サブメニュー*/
.menu-item-has-children {
  position: relative;
}
.header_nav .submenu-toggle {
    width: 100%;
    height: 24px;
    background: none;
    border: none;
    cursor: pointer;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}
.header_nav .submenu-toggle::before {
    content: '';
    display: block;
    width: 8px;
    height: 8px;
    border-right: 2px solid #333;
    border-bottom: 2px solid #333;
    transform: rotate(45deg);
    margin: auto;
    transition: transform .3s;
    margin-right: -30px;
}
.header_nav .menu-item-has-children.is-open .submenu-toggle::before {
  transform: rotate(-135deg);
}
.header_nav .menu-item-has-children.is-open > .sub-menu {
    display: block;
    visibility: visible;
    opacity: 1;
}

@media screen and (max-width: 1240px) {
    .header_nav .submenu-toggle::before {
        margin-right: -20px;
    }
}

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

.page_title_base {
    position: absolute;
    top: 50%;
    left: 20%;
    left: calc((100vw - 1100px) / 2);
    transform: translateY(-50%);
    max-width: 1200px;
    width: 94%;

}
/* 開発事例ページの場合のH1タイトル位置 */
.post-type-archive-solutions .page_title_base,
.single-solutions .page_title_base {
    max-width: 1450px;
    top: 58%;
}
.page_title_base > h1 {
    padding: 0;
    width: 100%;
    color: #fff;
    font-weight: bold;
    text-align: left;
    font-size:clamp(34px, 34 / 767 * 100vw ,64px);
    letter-spacing: 0.04em;
    text-decoration: underline 20px var(--accent-color);
    text-underline-offset: -6px;position: relative;
}
.error404 .page_title_base > h1 {
    font-size: clamp(30px, 30 / 767 * 100vw, 58px);
}

.page_title_base > h1::before {
    content: "";
    position: absolute;
    top: 52%;
    left: -70px;
    transform: translateY(-50%);
    aspect-ratio: 64/70;
    width: 64px;
    height: auto;
    z-index: -1;
    background-image: url('./images/pagetitle/title-logo.png');
    background-size: contain;
    background-repeat: no-repeat;
}
.page_title::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background-image: url('./images/pagetitle/common-noise.png');
    background-size: 40% 100%;
    background-repeat: no-repeat;
}
.page_title_base .button-rectangle {
    margin-top: 20px;
}
.page_title_sub{
    margin-top: 10px;
    margin-left: 1em;
    color: #fff;
    font-size:clamp(20px, 20 / 767 * 100vw ,24px);
    font-weight: 700;
    letter-spacing: 0.05em;
}
@media screen and (max-width: 1300px) {

    .page_title_base {
        left: 100px;
        width: 90%;
    }
}
@media screen and (max-width: 1000px) {
    .page_title {
        margin-top: 60px;
    }
}
@media screen and (max-width: 767px) {

    .page_title_base {
        left: 70px;
        width: 80%;
    }

    .page_title_base > h1::before {
        width: 46px;
        height: auto;
        top: 59%;
        left: -51px;
    }
    .page_title_base > h1 {
        text-decoration: underline 10px var(--accent-color);
        text-underline-offset: -2px;
    }
    .page_title {
        height: 280px;
    }
    .page_title::after {
        background-image: url('./images/pagetitle/common-noise-sp.png');
        background-size: 60% 100%;
    }
    .page_title_sub{
        margin-top:6px;
        margin-left: 0;
        font-size:clamp(15px, 15 / 550 * 100vw ,20px);
    }
}

@media screen and (max-width: 600px) {
    .page_title {
        background-image: url(./images/pagetitle/common-sp.jpg);
        height: 300px;
    }
}

/* カテゴリ別アイキャッチ */
.tax-products_cat.term-agriculture .page_title,
.products-cat-agriculture .page_title {
    background-image: url(./images/pagetitle/agriculture.jpg);
}
.tax-products_cat.term-construction .page_title,
.products-cat-construction .page_title {
    background-image: url(./images/pagetitle/construction.jpg);
}
.tax-products_cat.term-others .page_title,
.products-cat-others .page_title {
    background-image: url(./images/pagetitle/others.jpg);
}
@media screen and (max-width: 600px) {
    .tax-products_cat.term-agriculture .page_title,
    .products-cat-agriculture .page_title {
        background-image: url(./images/pagetitle/agriculture-sp.jpg);
    }
    .tax-products_cat.term-construction .page_title,
    .products-cat-construction .page_title {
        background-image: url(./images/pagetitle/construction-sp.jpg);
    }
    .tax-products_cat.term-others .page_title,
    .products-cat-others .page_title {
        background-image: url(./images/pagetitle/others-sp.jpg);
    }
}
/*
.post-type-archive-product .page_title,
.single-product .page_title {
    background-image: url(./images/pagetitle/product.jpg);
}
.page-contact .page_title,
.page-contact-child .page_title {
    background-image: url(./images/pagetitle/contact.jpg);
}
.category-news .page_title,
.single-post .page_title {
    background-image: url(./images/pagetitle/news.jpg);
}
.page-privacy .page_title {
    background-image: url(./images/pagetitle/privacy.jpg);
}
.error404 .page_title,
.page-sitemap .page_title {
    background-image: url(./images/pagetitle/common.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: 80%;
    max-width: 420px;
    height: 100vh;
    background-color: #242424;
    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: 80px 0 40px;
}

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

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

#sp-nav-list a {
    display: block;
    padding: 15px 20px;
    color: #fff;
    text-decoration: none;
    transition: background-color 0.3s;
    font-weight: 500;
}
#sp-nav-list .sub-menu a::before{
    content: "ー";
    margin-right: 5px;
}
#sp-nav-list a:hover {
    color: #b8b8b8;
}

.header_cta.sp {
    display: block;
    padding: 0;
}
.header_cta.sp .header_cta_contact {
    max-width: 335px;
    width: 95%;
    height: 72px;
    margin: auto;
    font-size: 15px;
    border-radius: 100px;
    flex-direction: row;
    justify-content: flex-start;
    gap: 10px;
    padding-left: 40px;
    position: relative;
    font-size: 24px;
}
.header_cta.sp .header_cta_contact .icon-mail {
    width: 31px;
    height: auto;
}
.header_cta.sp .header_cta_contact::after{
    content: "";
    position: absolute;
    top: 50%;
    right: 30px;
    width: 12px;
    height: 12px;
    border-top: 1px solid #fff;
    border-right: 1px solid #fff;
    transform: rotate(45deg) translateY(-50%);
}

.header_tel.sp{
    display: block;
    border: solid 1px #D7D7D7;
    width: 95%;
    max-width: 335px;
    margin: 0 auto 40px;
    padding: 10px 20px 25px;
}
.header_tel.sp .header_cta_tel{
    color: #fff;
    font-size: 32px;
    font-weight: 600;
    width: fit-content;
    display: block;
    margin: auto;
}
.header_tel.sp .header_cta_tel .icon-tel {
    width: 18px;
    height: auto;
    margin-right: 10px;
}
.header_tel.sp .header_cta_tel::after {
    font-size: 12px;
    left: 28px;
}
/* スクロール禁止 */
body.no-scroll {
    overflow: hidden;
}


/* 子メニュー */
#sp-nav .sub-menu {
    display: none;
}
#sp-nav .menu-item-has-children.is-open > .sub-menu {
    display: block;
    position: relative;
    z-index: 1;
}
#sp-nav .menu-item-has-children {
    position: relative;
}
#sp-nav .submenu-toggle {
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border: none;
    background: transparent;
    cursor: pointer;
}
#sp-nav .submenu-toggle::before {
    content: '';
    position: absolute;
    top: 22px;
    right: 20px;
    width: 8px;
    height: 8px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform:  rotate(-45deg);
    transition: transform 0.3s ease;
}
#sp-nav .menu-item-has-children.is-open > .submenu-toggle::before {
    transform: rotate(45deg);
}



/* レスポンシブ設定 */
@media screen and (max-width: 1000px) {
    .openbtn {
        display: block;
    }
}
@media screen and (max-width: 550px) {
    #sp-nav {
        width: 100%;
        max-width: 100%;
    }
}

/* 767px以下の時、白いロゴを非表示にして通常のロゴを表示 
@media (max-width: 767px) {
    .header_title_logo a img[src*="head_logo_white.png"] {
        content: url('./images/common/head_logo.png');
    }
}


*/


/****************************************
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 
****************************************/
.footer{
    background-color: #242424;
    color: #fff;
    padding: 80px 0px 100px;
    font-size: 14px;
    font-weight: 400;
}

.footer-container{
    display: flex;
    gap: 60px;
}

.ft-logo{
    max-width: 330px;
    width: 100%;
    height: auto;
    margin-bottom: 42px;
    display: block;
}
.footer_info {
    width: 30%;
}
.ft-address span{
    display: block;
}

.footer_menu .menu {
    display: grid;
    grid-template-columns: repeat(3, auto);
    grid-template-rows: repeat(6, auto);
    grid-column-gap: 100px;
    grid-row-gap: 32px;
    max-width: 586px;
    margin-top: 20px;
}
.footer_menu .menu .menu-item:nth-child(1) { grid-area: 1 / 1 / 7 / 2; }
.footer_menu .menu .menu-item:nth-child(2) { grid-area: 1 / 2 / 2 / 3; }
.footer_menu .menu .menu-item:nth-child(3) { grid-area: 2 / 2 / 7 / 3; }
.footer_menu .menu .menu-item:nth-child(4) { grid-area: 1 / 3 / 2 / 4; }
.footer_menu .menu .menu-item:nth-child(5) { grid-area: 2 / 3 / 3 / 4; }
.footer_menu .menu .menu-item:nth-child(6) { grid-area: 3 / 3 / 4 / 4; }
.footer_menu .menu .menu-item:nth-child(7) { grid-area: 4 / 3 / 5 / 4; }

.footer_menu .menu .menu-item > a {
    color: #fff;
    text-decoration: none;
    font-size: 16px;
    font-weight: 700;    
}
.footer_menu .menu .menu-item{
    height: 1.5em;
    margin-bottom: 12px;
}
.footer_menu .menu .sub-menu .menu-item > a {
    font-size: 14px;
    font-weight: 400;
}
.footer_menu ul{
    padding: 0px;
    margin: 0px;
    list-style: none;
}
.footer_menu .menu .sub-menu {
    margin-top: 32px;
}
.footer_menu .menu .sub-menu .menu-item{
    margin-bottom: 32px;
    position: relative;
    padding-left: 18px;
}
.footer_menu .menu .sub-menu .menu-item::before{
    content: "";
    position: absolute;
    top: 50%;
	left: 2px;
	width: 7px;
	height: 7px;
	border-top: 1px solid #fff;
	border-right: 1px solid #fff;
	transform: rotate(45deg) translateY(-50%);
}
.wrap-copyright{
    background-color: #151515;
    color: #fff;
    padding: 13px 0;
    position: relative;
}
.sitemap-policy{
    display: inline;
    font-size: 12px;
    font-weight: 400;
}
.sitemap-policy a{
    color: #fff;
    text-decoration: none;
}
.copyright{
    text-align: center;
    font-size: 11px;
    font-weight: 400;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}
@media screen and (max-width: 1250px) {
    .footer-container {
        padding-left: 5vw;
    }
}
@media screen and (max-width: 992px) {
    .footer {
        padding: 64px 0px 100px;
    }
    .footer-container {
        flex-direction: column;
        gap: 40px;
        padding-left: 20px;
        padding-right: 20px;
        align-items: center;
    }
    .footer_info,
    .footer_menu  {
        width: 100%;
        max-width: 600px;
    }
    .footer_menu .menu {
        width: 100%;
        max-width: unset;
    }
    .ft-logo {
        margin-bottom: 24px;
    }
    .wrap-copyright{
        padding: 20px 0;
    }
    .copyright{
        position: relative;
        top: unset;
        left: unset;
        transform: unset
    }
    .inner-copyright{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 14px;
    }
    .sitemap-policy{
        display: block;
        font-size: 13px;
    }
}
@media screen and (max-width: 600px) {
    .footer {
        padding: 64px 0px 50px;
    }
    .footer_menu .menu {
        display: block;
    }
    .footer_menu .menu .menu-item{
        height: auto;
            margin-bottom: 32px;
    }
    .footer_menu .menu .sub-menu {
        margin-bottom: 64px;
    }

 
}
/*
@media print, (max-width: 767.98px) {
    .mnavi {
        display: block;
        position: fixed;
        bottom: 0px;
        left: 0px;
        z-index: 9999;
        width: 100%;
        height: 80px;
        background-color: #009270;
    }
    body {
        margin-bottom: 80px;
    }
}
@media print, (min-width: 768px) {
    .mnavi {
        display: none;
    }
}

.mnavi > ul {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 100%;
    list-style: none;
}

.mnavi > ul > li {
    width: 40px;
    height: 40px;
}

.mnavi > ul > li > a,
.mnavi > ul > li > button {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    color: #fff;
    font-size: 2.5vw;
}
.mnavi > ul > li > a:before,
.mnavi > ul > li > button:before {
    position: absolute;
    top: 0px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 32px;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}
.mnavi_home > a:before {
    content: "\f015";
}
.mnavi_contact > a:before {
    content: "\f0e0";
}
.mnavi_tel > a:before {
    content: "\f095";
}
.mnavi_menu > button:before {
    content: "\f0c9";
}

.mnavi > ul > li > a {
    text-decoration: none;
}

.mnavi > ul > li > button {
    border: none;
    background: none;
    outline: none;
    appearance: none;
    cursor: pointer;
}

.mnavi > ul > li span {
    position: absolute;
    bottom: -1em;
    left: 50%;
    transform: translateX(-50%);
    line-height: 1;
    white-space: nowrap;
}

.mnavi_menu_area {
    display: none;
    position: fixed;
    left: 0px;
    bottom: 80px;
    width: 100vw;
    height: calc(100vh - 80px);
    z-index: 9999;
    background-color: rgba(0, 0, 0, 0.6);
    overflow-x: hidden;
    overflow-y: scroll;
}

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

.mnavi_menu_area > .menu > li {
    list-style-type: none;
    text-align: center;
}

.mnavi_menu_area > .menu > li > a {
    display: inline-block;
    padding: 1em 2em;
    color: #fff;
    font-size: 4vw;
    text-decoration: none;
}
*/
#btn_scroll_top {
    display: none;
    position: fixed;
    bottom: 50px;
    right: 20px;
    z-index: 9999;
    width: 48px;
    height: 48px;
    background-color: #fff;
    text-decoration: none;
    outline: none;
    border-radius: 100%;
    border: #464646 1px solid;
}
#btn_scroll_top:after {
    position: absolute;
    top: 40%;
    left: 50%;
    width: 12px;
    height: 12px;
    transform: translateX(-50%) rotate(-45deg);
    border-right: 2px solid #000;
    border-top: 2px solid #000;
    content: "";
}
#btn_scroll_top:hover{
    background-color: #f0f0f0;
}
@media print, (min-width: 768px) {
    #btn_scroll_top {
        right: 10vw;
        bottom: 50px;
        width: 72px;
        height: 72px;
    }
    #btn_scroll_top:after {
        width: 12px;
        height: 12px;
    }
}

/****************************************
7. single
****************************************/
.single-post p + p {
    margin: 1em 0px 0px;
}
.single-post .container{
    margin-bottom: 80px;
}
@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;
    }
}

/* 社長あいさつ */
.president-figure {
    margin: 0;
}

.section-message .president-name {
    position: absolute;
    top: min(calc(150px + 32.7vw + 12px), 896px);
    right: calc((100vw - 1200px) / 2 * -1);
    width: min(49vw, 1100px);
}
.president-name {
    font-family: 'Zen Old Mincho', serif;
    margin-top: 12px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.president-title {
    font-size: 20px;
}
.president-name-text {
    font-size: 30px;
}
@media screen and (max-width: 1200px) {
    .section-message .president-name {
        position: unset;
        width: 100%;
        right: 0;
        top: 0;
        margin-top: 12px;
    }
    .president-title {
        font-size: 13px;
    }
    .president-name-text {
        font-size: 20px;
    }
}

/* 品質方針ページ */
.quality-policy-list {
    padding-left: 1.5em;
}
.quality-policy-list li {
    margin-bottom: 24px;
}
.quality-policy-list li p {
    margin-bottom: 10px;
}
.sdg-icons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    justify-content: flex-start;
}
.sdg-icons img {
    width: 45px;
    height: 45px;
    object-fit: contain;
    margin: 0;
    display: inline-block;
}