@charset "utf-8";
@import url('unable/board.css');
@import url('unable/board_renew.css');
@import url('custom_board.css');

.area-subVisual{ --lnb-size: 61rem;--radius: 8rem; position: relative; z-index: 8; padding-top: var(--header-height); background: var(--black) no-repeat 50% / cover;
    &[data-sub-layout="about"]{ background-image: url('/images/content/img_s-visual01.jpg'); }
    &[data-sub-layout="business"]{ background-image: url('/images/content/img_s-visual02.jpg'); }
    &[data-sub-layout="process"]{ background-image: url('/images/content/img_s-visual03.jpg'); }
    &[data-sub-layout="subsidiary"]{ background-image: url('/images/content/img_s-visual04.jpg'); }
    &[data-sub-layout="contact"]{ background-image: url('/images/content/img_s-visual05.jpg'); }
    .inr{ display: grid; align-items: center; max-width: 1508rem; height: 410rem; column-gap: 10rem; padding-top: 2.1%; color: #fff; }
    .eng{ font: 16rem var(--font-pre); letter-spacing: .1em; text-transform: uppercase; opacity: .5; }
    .title{ margin-top: .12068966em; font: 900 clamp(40rem, calc(58 / var(--inr) * 100vw), 58rem)/1.2 var(--font-pre); color: #fff; }
    .subVisual-subTitle{ margin-top: 1.09090909em; font: clamp(18rem, calc(22 / var(--inr) * 100vw), 22rem)/1.36363636 var(--font-paperlogy); text-align: right; }
    .subVisual-subTitle em{ font-weight: 700; }
    .lnb{background:#fff;}
    .en &{
        .title{ font-size: clamp(30rem, calc(40 / var(--inr) * 100vw), 40rem); white-space: nowrap; }
        .subVisual-subTitle{ max-width: 70ch; font-size: clamp(12rem, calc(16 / var(--inr) * 100vw), 16rem); }
    }
    @media(prefers-reduced-motion:no-preference) {
        .lnb,.lnb-btn::after{transition:.6s;}
    }
    @media(hover) {
        .lnb a:hover{color:var(--primary);}
    }
    @media screen and (min-width: 768px) {
        &{ padding-top: calc(var(--header-height) + 30rem); }
        .inr{ grid-template-columns: 1fr auto; }
        .lnb-btn{display:none}
        .lnb{position:relative;inset:unset;padding:unset;border:unset;clip-path:unset;border-radius:0 var(--radius) 0 0;box-shadow:0 5rem 20rem rgba(0,0,0,.04);}
        .lnb-group{width:100%;}
        .lnb>ul{display:flex;gap:0;height:100%;justify-content: center;} 
        .lnb>ul>li>a{position:relative;display:flex;height:100%;align-items:center;padding:20rem 50rem;font-weight: 600; font-size: 18rem;}
        .lnb>ul>li>a::before{
            position: absolute;
            left: 0;
            content: "";
            width: 100%;
            height: 2px;
            background: var(--primary);
            bottom: -4px;
            transform: scale(0, 1);
            transition: transform 0.3s;
            transform-origin: center top;
        }
        .lnb>ul>li>a:hover:before {
            transform: scale(1, 1);
        }
        .lnb>ul>li.active>a::before{ 
            transform: scale(1, 1); 
        }
        .lnb>ul>li.active>a{color: var(--primary);}
    }
    @media screen and (max-width: 767px) {
        .title-group{ align-self: end; text-align: center; }
        .title{margin-top:10rem;}
        .subVisual-subTitle{ text-align: center; }
        .subVisual-subTitle br{ display: none; }
        .lnb-btn{display:flex;align-items:center;justify-content:space-between;height: var(--lnb-size);padding:0 32rem 0 29rem;background:#fff;font:500 18rem var(--font-pre);border-bottom: 1px solid var(--stroke-grey);}
        .lnb{position:absolute;inset:100% 0 auto;padding:44rem 46rem 45rem;background:#fff;border:3rem solid var(--secondary);border-radius:0 0 var(--radius) var(--radius);box-shadow:0 15rem 30rem rgba(0,0,0,.1);font:300 18rem var(--font-pre);clip-path:inset(0 -50rem 100%);}
        .lnb-group{position:relative;display:grid;grid-template-columns: 1fr;width:auto;height:var(--lnb-size);}
        .home{display:grid;place-items:center;height:100%;aspect-ratio:1;background:var(--primary);border-radius:var(--radius) 0 0 0;}
        .home-icon{width:18rem;height:18rem;fill:#fff;}
        .lnb-btn::after{content:'';translate:0 -33%;display:block;width:9rem;aspect-ratio:1;border:solid currentColor;border-width:0 2px 2px 0;rotate:45deg;}
        .lnb.isExpanded{clip-path:inset(0 -50rem -50rem);}
        .lnb>ul{display:grid;gap:17rem;}
        .lnb>ul>li>a{display:block;position: relative;}
    }
}

.inr{ max-width: 1510rem; }

/* #content{ padding: clamp(70rem, calc( 144 / var(--inr) * 100vw ), 144rem) 0; } */
section.subpage { padding: clamp(70rem, calc( 144 / var(--inr) * 100vw ), 144rem) 0; }
.sub-title{margin-bottom:clamp(50rem,calc(100 / var(--inr)* 100vw),100rem);font:700 var(--fs40) var(--font-pre);text-align:center;}
.section-title{margin-bottom:clamp(50rem,calc(100 / var(--inr)* 100vw),100rem);font:700 var(--fs40) var(--font-pre);text-align:left;}
.sub-section-title {margin-bottom:clamp(24rem,calc(100 / var(--inr)* 100vw),50rem);font:700 var(--fs35) var(--font-pre);text-align:left;}

.content-wrap {
    &>section>.title{display: flex;gap: 20rem;}
    &>section>.title img{width: 25rem;}
    &>section>.title>h3{font-size: 28rem;font-weight: 700;}
}

.subpage {
    .sct-intro {border:1px solid var(--stroke-grey);padding:35rem;} 
    .sct-intro li{font-size:18rem;line-height:1.8;list-style:disc;list-style-position:inside;list-style-position:outside;margin-left:20rem;}
    .en & .sct-intro li{ font-size: var(--fs20); }
    .sct-intro li::marker {color: var(--primary);} 
}

.content-wrap>section:not(:first-child) {margin-top: 50rem;padding-top:50rem;
    @media (max-width: 767px) {margin-top:30rem;padding-top:30rem;}
} 

.sub01.sp01 {
    .greeting{ display: grid; align-items: center; gap: 50rem 5.6%; }
    .greeting-swiper{ width: clamp(min(430rem, 100%), calc(835 / 1920 * 100vw), 835rem); }
    .greeting-btn-group{ position: absolute; right: 1px; bottom: 0; z-index: 1; display: inline-flex; gap: 1px; }
    .greeting-btn{ width: 30rem; aspect-ratio: 1; background: linear-gradient(var(--deg2), #0000 calc(50% - .5px), currentColor calc(50% - .5px), currentColor calc(50% + .5px), #0000 calc(50% + .5px)) no-repeat 50% calc(50% - 3rem) / 7rem 7rem, linear-gradient(var(--deg), #0000 calc(50% - .5px), currentColor calc(50% - .5px), currentColor calc(50% + .5px), #0000 calc(50% + .5px)) no-repeat 50% calc(50% + 3rem) / 7rem 7rem, #000; color: #fff; }
    .greeting-prev{ --deg: 45deg; --deg2: -45deg; }
    .greeting-next{ --deg: -45deg; --deg2: 45deg; }
    .greeting-txt-group{ padding-inline: 4vw; }
    .greeting-txt{ display: block; font: 300 var(--fs20)/1.5 var(--font-pre); color: #212121; text-transform: uppercase; }
    .en & .greeting-txt{ text-transform: none; }
    .greeting-txt + .greeting-txt{ margin-top: 1.5em; }
    .txt1{ font: 700 clamp(20rem, calc(25 / 1920 * 100vw), 25rem)/1.75 var(--font-nmj); letter-spacing: -.01em; }
    .separation{ margin-block: clamp(40rem, calc(50 / var(--inr) * 100vw), 50rem) clamp(42rem, calc(53 / var(--inr) * 100vw), 53rem); display: block; width: 47rem; border-top: 1px solid #29853a; }
    .greeting-txt.txt5{ margin-top: 1.9em; font-weight: 700; }
    @media(min-width:768px){
        .greeting{ grid-template-columns: 43.48958333% 1fr; }
        .greeting-txt-group{ padding-left: 0; }
    }
    @media(min-width:1280px){
        .greeting-txt-group{ padding-top: 3.4%; }
    }
    @media(max-width:1365px){
        :where(.txt1, .txt2) br{ display: none; }
    }
    @media(max-width:1280px){
        .txt3 br{ display: none; }
    }

    .insa { 
        .greet-text article{padding:50rem;border-left: 1px solid #e1e2e3;display: grid; grid-template-columns: auto 15%;gap: 50rem;text-wrap: balance;}
        .greet-text p {font-size: var(--fs20);line-height: 1.8;}
        .greet-text h4{font-size:var(--fs22);font-weight: 500;margin-top: 25rem;}
        
        @media (max-width: 767px) {
            .greet-text article {padding: 30rem;grid-template-columns: 1fr;}
            .greet-text article figure{width:40%;margin-inline:auto;}
        }
    }
    
    .history {--top-offset : 15rem; margin-top: 117rem; font-family: var(--font-suit); 
        .history-container {display: grid;grid-template-columns: repeat(2, minmax(0, 1fr));gap: 40rem;}
        .history-container article { position: relative;}
        .history-container article ul{display:flex;flex-direction:column;gap:50rem;}
        .history-container article ul::before{content:" ";position:absolute;top:var(--top-offset);left:7rem;width:1rem;height:calc(100% - var(--top-offset));background-color:#ddd;}
        .history-container ul>li{display:grid;grid-template-columns:15rem 8ch 50rem auto;gap:40rem;}
        .history-container ul>li::before{content:" ";display:inline-block;width:15rem;height:15rem;aspect-ratio:1;border:2rem solid var(--primary);background-color:var(--white);border-radius:50%;z-index:1;position:relative;top:15rem;}
        .history-container ul>li span{display:inline-block;width:auto;height:2rem;background-color:var(--primary);position:relative;top:20rem;}
        .history-container ul>li>div{display:flex;flex-direction:column;gap:40rem;}
        .history-container ul>li i {font-size: var(--fs30);font-weight: 600;color: var(--primary);font-style: normal;}
        .history-container ul>li p {font-size: 18rem;font-weight: 400;display: flex;flex-direction: row;gap: 20rem;}
        .en & .history-container ul>li p{ font-size: var(--fs20); }
        .history-container ul>li p b {font-size: var(--fs24);font-weight: 800;}
        .history-container ul>li p em {margin-top: 5rem;}

        @media (max-width: 1080px) {
            .history-container ul>li {grid-template-columns: 15rem 7ch 30rem auto;gap: 25rem;}
        }

        @media (max-width: 767px) {
            --top-offset : 10rem;
            .history-container {grid-template-columns: 1fr;gap: 0;}
            .history-container article ul {gap: 40rem;}
            .history-container article ul::before {top: 0;height: 100%;}
            .history-container ul>li {grid-template-columns: 15rem 1fr;gap: 15rem 25rem;}
            .history-container ul>li::before {top: 9rem;}
            .history-container ul>li:last-child {padding-bottom: 30rem;}
            .history-container ul>li span {display: none;}
            .history-container ul>li>div {grid-column: 2;gap: 15rem;}
            .history-container ul>li p em{margin-top:2rem;}
        }
    }

    .org-cart { margin-top: clamp(50rem, calc(128 / var(--inr) * 100vw), 128rem);
        figure{border:1px solid var(--stroke-grey);display: flex;justify-content: center;padding-block: 50rem;}
        figure>img{width: min(90%, 838rem);}
        @media (max-width: 767px) {
            figure{padding-block: 35rem;}
        }
    }

    .certificate { margin-top: clamp(50rem, calc(116 / var(--inr) * 100vw), 116rem); display: flex;flex-direction: column;gap: clamp(50rem, calc(100 / var(--inr) * 100vw), 100rem);
        ul {display: grid;grid-template-columns: repeat(4, minmax(0, 1fr));gap: 30rem; }
        figure {border:1px solid var(--stroke-grey);padding: 10rem;} 
        @media (max-width: 767px) { gap: 50rem;
            ul {grid-template-columns: repeat(2, minmax(0, 1fr));gap: 15rem;}
        }
    }
}

.sub02.sp01 {
    .business-featured{ text-align: center; }
    .business-featured-li{ padding: 16.6% 1ch 15.3%; background: no-repeat 50% / cover; }
    .business-featured-li.li1{ background-image: url('/images/content/business-featured-bg-1.jpg'); }
    .business-featured-li.li2{ background-image: url('/images/content/business-featured-bg-2.jpg'); }
    .business-featured-order{ font: 800 16rem var(--font-pre); letter-spacing: .3em; color: #f3c60a; text-transform: uppercase; }
    .business-featured-icon-box{ margin-top: .28181818em; display: grid; place-items: center; height: 1em; font-size: clamp(84rem, calc(110 / var(--inr) * 100vw), 110rem); }
    .business-featured-icon{ display: block; width: auto; }
    .business-featured-icon.icon1{ height: 1em; }
    .business-featured-icon.icon2{ height: calc(1em * .745454545); }
    .business-featured-description{ margin-top: 1.88461538em; font: 800 var(--fs26)/1.15384615 var(--font-pre); color: #fff; }
    @media(min-width:768px){
        .business-featured{ display: grid; grid-template-columns: repeat(2, 1fr); }
    }

    .business-prod-list{ margin: 50rem auto 0; display: grid; gap: 50rem 12%; max-width: 1298rem; }
    .business-prod-hero{ margin-inline: auto; display: block; width: 96.36363636%; }
    .business-prod-caption{ margin-top: 1.23333333em; font: 800 var(--fs30) var(--font-pre); color: #1515c6; text-align: center; text-transform: uppercase; }
    .business-img-list{ --color: #6d6d6d; margin-top: 30rem; display: grid; gap: 29rem; padding-top: 74rem; background: radial-gradient(circle at 50% 6.5rem, var(--color), var(--color) 5.5rem, #0000 6.5rem), linear-gradient(90deg, #0000 calc(50% - .5px), var(--color) calc(50% - .5px), var(--color) calc(50% + .5px), #0000 calc(50% + .5px)) no-repeat 0 1px; }
    .business-img{ display: block; width: 100%; border: 1px solid #e1e1e1; }
    @media(min-width:768px){
        .business-prod-list{ margin-top: 90rem; grid-template-columns: repeat(3, 1fr); }
    }

    .prod-desc {
        /* &>figure:not(:last-child) {margin-bottom: 30rem;}
        figure {position:relative; border:1px solid var(--stroke-grey);padding: 70rem 35rem;display: flex;justify-content: center;align-items: center;height: 450rem;}
        figure img {display: block;width: auto;max-width: 667rem;}
        figcaption {position: absolute;top: 0;left: 0;background-color: var(--primary);color: var(--white); padding:20rem;font-size: var(--fs24);font-weight: 700;} */
        @media (max-width: 767px) {
            /* figure img { width: 100%; } */
        }
    }

    .table-note{ margin-top: 10rem; font-size: var(--fs20); }
    
    .key-partner {
        .partnerSwiper{border:1px solid var(--stroke-grey);padding:40rem 10rem;}
        .swiper{width:100%;height:100%}
        .swiper-slide{text-align:center;font-size:18px;background:#fff;display:flex;justify-content:center;align-items:center}
        .swiper-slide img{display:block;width:100%;height:63rem;object-fit:contain}
    }
}

.common-table{ font-size: var(--fs20); text-align: center;
    *{ padding: 17.25rem 1ch; border: 1px solid #c7c7c7; }
    thead{ background: #2a2a5f; border-top: 4rem solid #edc319; color: #fff; }
    .first-td{ background: #f3f3f9; }
    &.last-arrow td:last-child{ font-family: var(--font-pre); }
}

.sub03.sp01 {
    .banner{ padding: 8.25% 1ch 11.65%; background: var(--black) url('/images/content/process-banner.jpg') no-repeat 50% / cover; color: #fff; text-align: center; }
    .banner-title{ font: 700 var(--fs30)/1.66666667 var(--font-pre); }
    @media(max-width:767px){
        .banner br{ display: none; }
    }

    .proc-step2{ margin-top: clamp(60rem, calc(137 / var(--inr) * 100vw), 137rem); display: flex; align-items: center; justify-content: space-between; gap: 2ch; text-align: center; }
    .proc-step2-li{ display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(23rem, calc(29 / var(--inr) * 100vw), 29rem); flex: 1 30%; aspect-ratio: 1; background: #f7f7fe; border: 1px solid #9999d1; border-radius: 50%; font: 800 var(--fs30) var(--font-pre); }
    .proc-arrow{ translate: -16%; rotate: 45deg; width: 19rem; aspect-ratio: 1; border: solid var(--black); border-width: 3rem 3rem 0 0; }
    .proc-setp2-icon{ display: block; width: clamp(65rem, calc(85 / var(--inr) * 100vw), 85rem); }
    .proc-setp2-icon.icon1{ display: block; width: clamp(62rem, calc(83 / var(--inr) * 100vw), 83rem); }
    @media(min-width:1280px){
        .proc-step2{ padding-inline: 17rem; }
        .proc-step2-li{ max-width: 286rem; }
    }
    @media(max-width:767px){
        .proc-step2{ flex-wrap: wrap; }
        .arrow2{ display: none; }
    }

    .proc-production{ margin-top: 2.11111111em; padding: 1.22222222em 1ch; background: #f7f7f7; border: 1px solid #eaeaea; font: 800 var(--fs36) var(--font-pre); color: #ff5a00; text-align: center; }

    .proc-intro {
        --step-gap: 40rem;

        .proc-step {margin-top: 50rem;}
        .proc-step ul{display:flex;flex-direction:row;gap:var(--step-gap);justify-content:space-between;}
        .proc-step ul li{border:1px solid #20892a;background-color:rgba(32,137,42,.1);display:flex;justify-content:center;align-items:center;height:80rem;flex:1;position:relative;}
        .proc-step ul li:not(:last-child)::after{content:"\2192";font-family:var(--font-pre);font-size:20rem;color:var(--primary);font-weight:800;width:var(--step-gap);position:absolute;right:calc(var(--step-gap) * -1);top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;}
        .proc-image {margin-top: 80rem;border: 1px solid var(--stroke-grey);padding: 25rem;text-align: center;}
        .proc-image h4 {font-size: var(--fs24);font-weight: 800;padding-bottom: 25rem;color: var(--primary);}
        .proc-image hr{border:none;border-top:1px solid #ddd;margin-block: 0;}
        .proc-image figcaption {font-size: var(--fs20);padding-block: 28rem 31rem;font-weight: 600;}
        
        @media (max-width: 767px) {
            --step-gap: 30rem;
            .proc-image {padding: 15rem;margin-top: 50rem;}
            .proc-image h4 {font-size: 16rem;padding-bottom: 15rem;}
            .proc-image figcaption {font-size: 16rem;padding-block: 15rem 15rem;}
        }
    }
    .fac-status { 
        table.table tbody>tr>td[rowspan]{background-color:#dfdfdf}
    }
}

.sub04.sp01 {
    .subsidiary-list {margin-top: 50rem; display: grid;grid-template-columns: repeat(3, minmax(0, 1fr));gap: 20rem;
        article {border:1px solid var(--primary);padding: 30rem;font-size: var(--fs20);line-height: 1.7;}
        h4 {display: flex;align-items: start;gap: 7rem;}
        h4 span { translate: 0 14%; flex-shrink: 0; display:block; width: 1.25em;}
        ul {margin-left: 30rem;}
        @media (max-width: 767px) {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            article {padding: 15rem;}
            ul{margin-left:5rem;margin-top: 7rem;font-size: 16rem;}
        }
    }
}

.sub05.sp01 {
    *{ font-size: 18rem; }
    .bbsView .spam > span{ font-size: inherit; }
    .box_privacy textarea {white-space: pre-line;padding: 15rem 40rem;}
    .designRadio input:is([type="radio"]) + label {margin-right: 30rem;}
    .bbsView {
        .marking{vertical-align: baseline;}
    }
}

.image-page{
    img{ margin-inline: auto; display: block; max-width: 1871px; width: 100%; }
    img ~ img{ padding-top: 120px; }
    section{ padding-top: 120px; }
}
.image-page__img{ margin-inline: auto; margin-bottom: 120px; display: block; max-width: 1871px; width: 100%; }