.font1 { line-height: 100%; font-family: "Adobe Arabic", "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif; }
.font2 { font-family: source-han-serif-japanese, serif; }

.inner { width: 94%; max-width: 1000px; margin: auto; }
.inner-short { width: 94%; max-width: 900px; margin: auto; }

.common_h3 { text-align: center; font-weight: 500; font-size: 20px; line-height: 100%; }
.common_h3 span { letter-spacing: 2px; font-size: 88px; display: block; font-weight: 100; line-height: 100%;
    font-family: "Adobe Arabic", "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif; 
}

.btn { text-align: center; padding: 50px 0 0; }
.btn a { border-radius: 5px; height: 50px; line-height: 50px; border: 1px solid #000; font-weight: bold; width: 400px; display: inline-block; font-size: 19px; }

.txt { font-size: 14px; line-height: 200%; }

.bg-color1 { background-color: #EEEEEF; }

a { transition: 0.5s; }
a:hover { opacity: 0.8; }

.btn a { background-color: #fff; }
.btn a:hover { background-color: #000; color: #fff; }

.pc-none { display: none; }

/* ------------------------------------------------------- slider */

.slider-wrap { position: relative; }
.slider-dots { display: flex; justify-content: center; padding: 20px 0; width: 100%; left: 0; bottom: 0; z-index: 2; position: absolute; }
.slider-dots ul { display: flex; justify-content: center; align-items: center; }
.slider-dots ul li { cursor: pointer; width: 15px; height: 15px; border-radius: 50%; border: 2px solid #fff; margin: 0 10px; }
.slider-dots ul li button { display: none; }

.slider-arrows .slick-arrow { width: 32px; position: absolute; top: 0; bottom: 0; margin: auto; cursor: pointer; }
.slider-arrows .arrow-prev { left: -50px; }
.slider-arrows .arrow-next { right: -50px; }

/* ------------------------------------------------------- fv */

.fv { position: relative; overflow: hidden; }
.fv .logo { position: absolute; pointer-events: all; left: 0; top: 0; z-index: 9; transition: 0.5s; }
.fv .logo a { display: block; padding: 40px 30px 30px; }
.fv .logo a img { width: 130px; }
.fv .fv_inner { min-height: 780px; box-sizing: border-box; pointer-events: none; padding: 150px 50px 200px; position: relative; overflow: hidden; z-index: 2; }

.fv .fv_inner .main-txt { padding: 50px 0 0; width: 560px; }
.fv .fv_inner .subtxt { padding: 10px 0 0 100px; }

.fv .fv_inner .fv-txt1 { transition: 0.5s; opacity: 0; }

.fv :where(.overlay1, .overlay2, .overlay3, .overlay4) { display: flex; transition: 0.5s; opacity: 0; position: absolute; width: 100%; height: 100%; z-index: 1; left: 0; top: 0; pointer-events: none; box-sizing: border-box; }

.fv .overlay1::before,
.fv .overlay1::after { width: 290px; height: 100%; top: 0; display: block; content: ''; position: relative; z-index: 0; background-color: rgba(240, 0, 0, 0.88); }
.fv .overlay1::before { max-width: 290px; width: 20%; }
.fv .overlay1::after { clip-path: polygon(0% 0%, 0% 106%, 79% 0%); }

.fv .overlay2 { padding: 0 4%; justify-content: center; align-items: center; 
    background: url(../img/pr-lp/white-overlay.png) no-repeat right center; 
    background-size: cover; 
}
.fv .overlay2 .fv-txt2 { padding: 0 4% 0 0; }
.fv .overlay2 .fv-txt2 p { padding: 30px 0 0; line-height: 220%; }
.fv .overlay2 .diagram { max-width: 450px; width: 40%; }

.fv .overlay3 { justify-content: center; align-items: center; }
.fv .overlay3 a { width: 94%; max-width: 900px; display: block; }

.fv .overlay4 { justify-content: flex-start; align-items: center; }
.fv .overlay4 .fv-txt3 { padding: 0 0 0 100px; }
.fv .overlay4 .fv-txt3 p { padding: 50px 0 0; }
.fv .overlay4 .fv-txt3 p span { letter-spacing: 2px; font-weight: bold; display: inline-block; font-size: 18px; padding: 0 20px 0 0; }

.fv:where(.slide1, .slide2, .slide3) .logo { background-color: #E30900; }
.fv.slide0 .fv_inner .fv-txt1 { opacity: 1; }
.fv.slide0 .overlay1 { opacity: 1; }
.fv.slide1 .overlay2 { opacity: 1; }
.fv.slide2 .overlay3 { opacity: 1; }
.fv.slide2 .overlay3 a { pointer-events: all; }
.fv.slide3 .overlay4 { opacity: 1; }

.fv .slider-wrap { z-index: 0; left: 0; top: 0; position: absolute; width: 100%; height: 100%; }
.fv .slider-dots ul li.slick-active { background-color: #fff; }

.fv .slider .slide { position: relative; width: 100%; height: 100%; min-height: 802px; background-position: center center; background-repeat: no-repeat; background-size: cover; }
.fv .slider .bg1 { background-image: url(../img/pr-lp/fv1.jpg); }
.fv .slider .bg2 { background-image: url(../img/pr-lp/fv2.jpg); }
.fv .slider .bg3 { background-image: url(../img/pr-lp/fv3.jpg); }
.fv .slider .bg4 { background-image: url(../img/pr-lp/fv4.jpg); }
.fv .slider .bg5 { background-image: url(../img/pr-lp/fv5.jpg); }

/* ------------------------------------------------------- event */

.event { padding: 100px 0; }
.event .slider { padding: 50px 0 0; } 
.event .slide { width: calc(94% / 3); max-width: 320px; }
.event .slide .title { padding: 20px 0; font-weight: bold; }
.event .slide img { width: 100%; height: auto; }
.event .slide .date { align-items: center; }
.event .slide .date span { padding: 4px 8px; font-size: 13px; }
.event .slide .date span:first-child { display: block; background-color: #E6E6E6; }
.event .slider-dots { position: relative; }
.event .slider-dots ul li { border: 2px solid #000 }
.event .slider-dots ul li.slick-active { background-color: #000; }
.event .slider-arrows { position: relative; width: 70%; max-width: 300px; margin: auto; }
.event .slider-arrows .slick-arrow { top: -50px; }
.event .slider-arrows .arrow-prev { left: 0; }
.event .slider-arrows .arrow-next { right: 0; }

/* ------------------------------------------------------- contents */

.contents { padding: 80px 0; background-color: #E30900; color: #fff; }
.contents ul { padding: 25px 0 0; }
.contents ul li { margin: 25px 0; border-left: 1px solid #fff; padding: 20px 0; width: calc(100% / 4); box-sizing: border-box; text-align: center; }
.contents ul li:first-child,
.contents ul li:nth-child(5) { border: none; }
.contents ul li a { display: block; color: #fff; font-size: 14px; }
.contents ul li a span { display: block; font-size: 37px; padding: 0 0 15px; }

/* ------------------------------------------------------- campaign */

.campaign { padding: 100px 0; }
.campaign .slider { padding: 50px 0 0; }
.campaign .slider .slide { width: 100%; }
.campaign .slider-dots ul li { border: 2px solid #000; width: 12px; height: 12px; margin: 0 8px; }
.campaign .slider-dots ul li.slick-active { background-color: #000; }

/* ------------------------------------------------------- harmony */

.harmony { padding: 70px 0 100px; }
.harmony .h2 { padding: 100px 0; font-size: 49px; text-align: center; color: #E62E18; font-weight: 200; line-height: 150%; 
    background: url(../img/pr-lp/txt-the_amazing_life-2.png) no-repeat center center;
    background-size: auto 100%;
}
.harmony .h2 span { font-size: 75px; letter-spacing: 2px; }
.harmony .txt-intro { padding: 0 0 70px; font-size: 30px; text-align: center; line-height: 150%; }
.harmony .tab { width: 100%; }
.harmony .tab a { width: 50%; padding: 35px 3% 20px; display: block; box-sizing: border-box; text-align: center; position: relative; background-color: #A2B7CC; }
.harmony .tab a span { display: block; width: 100%; background-color: #A2B7CC; line-height: 100%; position: relative; z-index: 1; }
.harmony .tab a::before { border-radius: 100%; top: -30px; left: 0; right: 0; margin: auto; width: 80px; height: 80px; position: absolute; display: block; content: ''; box-sizing: border-box;
    background-image: url(../img/pr-lp/icn-click.png); 
    background-position: center 15px;
    background-size: 50% auto;
    background-repeat: no-repeat;
    background-color: #A2B7CC;
}
.harmony .tab .tab2 { background-color: #CBC8C7; }
.harmony .tab .tab2 span { background-color: #CBC8C7; font-size: 18px; font-weight: 600; }
.harmony .tab .tab2::before { background-color: #CBC8C7; }

.harmony .content { background-color: #fff; padding: 0 0 90px; background-size: 65% auto; background-position: right top; }
.harmony .content_inner { width: 88%; max-width: 820px; margin: auto; }
.harmony .content_logo { padding: 60px 0 0; }
.harmony .content_logo img { width: 30%; max-width: 243px; }
.harmony .content_house { padding: 0 0 0 20px; }
.harmony .content_house img { max-width: 340px; width: 44%; }

.harmony .content.hygge { background-image: url(../img/pr-lp/hygge-img0.jpg); }
.harmony .content.bungalow { background-image: url(../img/pr-lp/bungalow-img0.jpg); }
.harmony .content .title { font-weight: 600; padding: 0 0 10px; font-size: 16px; line-height: 180%; }
.harmony .content .txt { font-size: 14px; line-height: 200%; }

.harmony .content_fv .title { padding: 30px 0 10px; font-size: 20px; }
.harmony .features { padding: 60px 0 0; width: 100%; max-width: 700px; margin: auto; }
.harmony .features li { flex-direction: row-reverse; padding: 25px 0; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; }
.harmony .features li:nth-child(2n) { flex-direction:unset; }
.harmony .features li img { width: 52%; max-width: 360px; }
.harmony .features li .box { width: 45%; padding: 0; }
.harmony .features li h3 { padding: 0 0 3px; border-bottom: 2px solid #739CBC; color: #739CBC; font-size: 40px; font-weight: 100; letter-spacing: 2px; }
.harmony .features li h3 span { display: inline-block; height: 34px; font-size: 30px; vertical-align: middle; }
.harmony .features li .title { padding: 20px 0 10px; }
.harmony .features li .txt { line-height: 170%; font-size: 13px; }
.harmony .plan { padding: 50px 0 0; }

.harmony .bungalow .content_logo { padding: 20% 0 0; }
.harmony .bungalow .content_house { padding: 20px 0 0; }
.harmony .bungalow .features li h3 {color: #CBC8C7; border-bottom: 2px solid #CBC8C7; }

/* ------------------------------------------------------- model_house */

.model_house { padding: 70px 0 100px; }
.model_house .common_h3 { padding: 0 0 70px; }
:where(.model_house, .work) .slider-wrap { width: 88%; margin: auto; max-width: 1000px; }
.model_house .slider {position: relative; }
.model_house .slider .slide { position: relative; }
.model_house .title { font-weight: 600; padding: 0 0 20px; line-height: 180%; font-size: 20px; }
.model_house .detail { position: absolute; top: 0; left: 0; }
.model_house .detail .box {  box-sizing: border-box; padding: 0 0 0 30px; }
.model_house .detail .box .txt { width: 260px; }
.model_house .txt { font-size: 14px; line-height: 200%; }
.model_house .slider-arrows .arrow-prev { left: -40px; }
.model_house .slider-arrows .arrow-next { right: -40px; }

/* ------------------------------------------------------- work */

.work { padding: 100px 0; text-align: center; }
.work .intro { font-size: 18px; padding: 50px 0; line-height: 200%; }
.work .caption { text-align: center; font-size: 24px; font-weight: 600; letter-spacing: 2px; padding: 0 0 20px; }
.work .slider :where(.big, .small) { width: calc(50% - 5px); }
.work .slide { text-align: left; }
.work .slide img { width: 100%; }
.work .slide .txt { font-size: 14px; padding: 15px 10px 0; }
.work .images { display: flex; flex-wrap: wrap; justify-content: space-between; }
.work .images img { width: calc(50% - 3px); display: block; margin: 0 0 6px; }

/* ------------------------------------------------------- section banner */

.sec_banner { position: relative; text-align: center; padding: 100px 0 0; margin: 0 0 50px; }
.sec_banner::before { height: 80%; width: 100%; content: ''; display: block; position: absolute; background-repeat: no-repeat; background-position: center center; background-size: cover; top: 0; left: 0; }
.sec_banner .wb { background-color: #fff; padding: 30px 0; position: relative; z-index: 1; }
.sec_banner .txt { padding: 30px 0 0; font-size: 18px; line-height: 200%; }

/* ------------------------------------------------------- red line box */

.line_box { border-left: 2px solid #E62E18; padding: 0 20px; }
.line_box h4 { font-size: 26px; font-family: 600; padding: 0 0 15px; }
.line_box .txt { max-width: 450px; font-size: 14px; line-height: 200%; padding: 0 0 10px; }

/* ------------------------------------------------------- performance */

.performance { padding: 0 0 100px; }
.performance .sec_banner::before { background-image: url(../img/pr-lp/perform-bg.jpg);  }
.performance .slider .slide { width: 40vw !important; max-width: 580px; margin: 0 15px; }
.performance .slider .slide img { margin: 0 0 30px; display: block; }
.performance .slider-dots { padding: 40px 0 0; position: relative; }
.performance .slider-dots ul li { border: 2px solid #000; width: 12px; height: 12px; }
.performance .slide .txt small { display: block; padding: 10px 0 0; font-size: 12px; }
.performance .slider-dots ul .slick-active { background-color: #000; }
.performance .slider-arrows { position: relative; width: 88%; max-width: 500px; margin: auto; }
.performance .slider-arrows .slick-arrow { top: -20px; }
.performance .slider-arrows .arrow-prev { left: 0; }
.performance .slider-arrows .arrow-next { right: 0; }

/* ------------------------------------------------------- design */

.design .sec_banner::before { background-image: url(../img/pr-lp/design-bg.jpg); }
.design ul { width: 100%; max-width: 900px; margin: auto; }
.design ul li { padding: 0 0 100px; align-items: flex-start; }
.design ul li img { width: 46%; height: auto; }
.design ul li .box { width: 50%; }
.design ul li h4 { padding: 0 0 15px; border-bottom: 2px solid #E62E18; font-size: 20px; line-height: 180%; }
.design ul li .txt { padding: 30px 0 0; }

/* ------------------------------------------------------- material */

.material { padding: 0 0 100px; }
.material .sec_banner::before { background-image: url(../img/pr-lp/material-bg.jpg); }
.material ul { max-width: 860px; margin: auto; }
.material ul li { width: 48%; margin: 0 0 70px; max-width: 400px; }
.material ul li img { width: 100%; display: block; margin: 0 0 35px; }
.material ul li h4 { line-height: 100%; padding: 0 0 25px; font-size: 20px; }
.material ul li .line_box { padding: 0 25px; }
.material ul li .line_box .txt { padding: 0; }

/* ------------------------------------------------------- reason */

.reason .sec_banner::before { background-image: url(../img/pr-lp/reason-bg.jpg); }
.reason .maker { padding: 0 0 100px; max-width: 900px; margin: auto; }
.reason .maker h4 { font-size: 20px; padding: 0 0 20px; }
.reason .why { padding: 0 0 100px; }
.reason .why ul li { border-left: 1px solid #E62E18; width: 35%; box-sizing: border-box; padding: 0 50px 0 30px; }
.reason .why ul li:first-child { border: none; width: 30%; padding: 0 30px; }
.reason .why ul li h4 { font-size: 20px; color: #E62E18; letter-spacing: 1px; line-height: 200%; }
.reason .why ul li h5 { font-size: 17px; padding: 0 0 20px; line-height: 180%; }
.reason .why ul li p.txt { font-size: 15px; }

/* ------------------------------------------------------- product */

.product { padding: 100px 0; }
.product p.caption { letter-spacing: 2px; padding: 50px 0; font-size: 18px; text-align: center; }
.product ul { max-width: 900px; margin: auto; overflow: hidden; transition: 0.5s; max-height: auto; height: auto; }
.product ul.closed { height: 48vw; max-height: 400px; }

.product ul li { width: 49%; max-width: 420px; margin: 0 0 50px; }
.product ul li img { width: 100%; }
.product ul li h5 { font-size: 20px; padding: 20px 0 8px; }
.product ul li h5 small { font-size: 14px; }
.product ul li .txt { line-height: 180%; }
.product .btn { padding: 50px 0 0; }

/* ------------------------------------------------------- support */

.support { padding: 100px 0; }
.support .caption { text-align: center; padding: 70px 0 50px; line-height: 180%; }
.support .col { width: 49%; }
.support ul li { padding: 30px 40px; border: 1px solid #727171; box-sizing: border-box; margin: 0 0 15px; } 
.support ul li h4 { font-size: 18px; padding: 0 0 15px; }
.support ul li h4 span {display: inline-block; margin-right: 10px; }
.support ul li h4 small { border-radius: 25px; font-weight: 500; color: #fff; padding: 2px 10px; display: inline-block; font-size: 12px; background-color: #E30900; }
.support ul li .txt { line-height: 180%; }
.support ul li .txt small { font-size: 12px; display: block; padding: 10px 0 0; }

/* ------------------------------------------------------- catalog */

.catalog { text-align: center; padding: 100px 0; text-align: center; }
.catalog h5 { font-size: 24px; line-height: 180%; padding: 0 0 50px; }
.catalog ul li { max-width: 300px; width: calc(94% / 3); }


.sp_links { display: none; max-width: 450px; box-shadow: 0px 7px 21px #000; width: 100%; position: fixed; z-index: 10; bottom: 0; right: 0; }
.sp_links.show { display: block; }
.sp_links a { font-size: 14px; color: #fff; background-color: #E30900; width: 40%; padding: 15px 0; box-sizing: border-box; text-align: center;}
.sp_links a span { display: block; border-left: 1px solid #fff; padding: 0 3%; }
.sp_links a:first-child span { border: none; }
.sp_links .to_top { position: relative; width: 20%; background-color: #4D4D4D; }
.sp_links .to_top::before { position: absolute; left: 0; right: 0; top: 40%; transform: rotate(-45deg); border-top: 1px solid #fff; border-right: 1px solid #fff; content: ''; display: block; width: 20px; height: 20px; margin: auto; }


/* ------------------------------------------------------- responsive 767px */

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

    .pc-none { display: block; }
    .sp-none { display: none; }

    .common_h3 { font-size: 18px; }
    .common_h3 span { font-size: 58px; letter-spacing: 1px; }

    .txt { line-height: 180%; }

    .btn a { height: 45px; line-height: 45px; font-size: 16px; width: 88%; max-width: 380px; }

    .sec_banner { margin: 0 0 30px; padding: 50px 0 0; box-sizing: border-box; }
    .sec_banner .inner { width: 88%; }
    .sec_banner .wb { padding: 30px 6%; }
    .sec_banner .txt { font-size: 14px; text-align: left; }
    .sec_banner .common_h3 { position: relative; padding: 0 0 30px; }
    .sec_banner .common_h3::after { height: 2px; background-color: #E62E18; content: ''; display: block; width: 50%; position: absolute; bottom: 0; left: 0; right: 0; margin: auto; }

    .line_box h4 { font-size: 20px; line-height: 100%; }
    .line_box .txt { padding: 0; }

    /* ------------------------------------------------------- slider */

    .slider-dots ul li { width: 12px; height: 12px; margin: 0 8px; }

    /* ------------------------------------------------------- fv */

    .fv .logo { display: none; width: 24%; max-width: 120px; background-color: #E30900; }
    .fv .logo a { padding: 8px 15px; }
    .fv .logo a img { width: 100%; }

    .fv { height: 86vh; }
    .fv .slider .slide { height: 88vh; min-height: 0; }
    
    .fv .fv_inner { padding: 0; text-align: right; min-height: auto; }
    .fv .fv_inner .main-txt { width: 100%; }
    .fv .fv_inner .main-txt  img { width: 90%; display: inline-block; }
    .fv .fv_inner .subtxt { padding: 0; margin-top: -10px; }
    .fv .fv_inner .subtxt img { display: inline-block; max-width: 420px; width: 65%; }

    .fv .overlay1 { display: none; }
    .fv .overlay2 { background-position: 50% center; padding: 0 6%; flex-wrap: wrap; align-content: center; }
    .fv .overlay2 h2 img { width: 100%; max-width: 400px; }
    .fv .overlay2 .fv-txt2 { padding: 0; max-width: 380px; margin: auto; }
    .fv .overlay2 .fv-txt2 p { padding: 10px 0 20px; line-height: 180%; font-size: 14px; }
    .fv .overlay2 .diagram { width: 70%; max-width: 320px; }
    
    .fv .overlay3 a { padding: 0; width: 66%; max-width: 320px; }

    .fv .overlay4 { align-items: flex-end; }
    .fv .overlay4 .fv-txt3 { padding: 0 4% 15%; width: 100%; max-width: 500px; margin: 0 auto; }
    .fv .overlay4 .fv-txt3 img { width: 100%; }
    .fv .overlay4 .fv-txt3 p { padding: 20px 0 0; }
    .fv .overlay4 .fv-txt3 p span { font-size: 14px; color: #fff; }

    .fv .slider .bg5 { background-image: url(../img/pr-lp/fv5-sp.jpg); }
    
    /* ------------------------------------------------------- Event */

    .event { padding: 50px 0; }
    .event .slide { width: 70vw !important; margin: auto; padding: 0 3% 30px; max-width: 420px; }
    .event .slide .date { display: block; }
    .event .slide .date span { display: block; padding: 8px 0; font-size: 14px; }
    .event .slide .date span:first-child { display: inline-block; padding: 4px 8px; font-size: 12px; }
    
    /* ------------------------------------------------------- contents */

    .contents { padding: 60px 0; }
    .contents ul li { display: flex; flex-wrap: wrap; align-items: center; position: relative; padding: 20px 0 45px; margin: 10px 0 0; width: calc(100% / 2); border: none; }
    .contents ul li::before,
    .contents ul li::after { margin: auto; display: block; content: ''; position: absolute;  }
    .contents ul li::after { width: 80%; bottom: 0; left: 0; right: 0; border-bottom: 1px solid #fc9490; }
    .contents ul li::before { transform: rotate(45deg); bottom: 25px; width: 15px; height: 15px; border-bottom: 2px solid #fff; border-right: 2px solid #fff; right: 0; left: 0; }
    .contents ul li a { width: 100%; line-height: 150%; }
    .contents ul li a span { line-height: 80%; }

    /* ------------------------------------------------------- .campaign */

    .campaign { padding: 50px 0; }
    .campaign .slider-wrap { max-width: 420px; margin: auto; }
    .campaign .slider-dots { position: relative; }
    .campaign .slider-dots ul li { border: 2px solid #B3B3B3; }
    .campaign .slider-dots ul li.slick-active { background-color: #B3B3B3; }
    
    /* ------------------------------------------------------- harmony */
    
    .harmony { padding: 50px 0; }
    .harmony .h2 {  padding: 50px 0; font-size: 28px; }
    .harmony .h2 span { font-size: 42px; }
    .harmony .txt-intro { font-size: 18px; }
    .harmony .tab a { padding: 30px 2% 15px; }
    .harmony .tab a::before { top: -22px; width: 65px; height: 65px; }
    .harmony .tab a span { font-size: 14px !important; line-height: 150%; } 
    .harmony .content { padding: 0 0 30px; background-image: none !important; }
    .harmony .content_logo { padding: 50px 0 10px; text-align: center; }
    .harmony .content_logo img { width: 80%; margin: auto; }
    .harmony .content_house { padding: 0; text-align: center; }
    .harmony .content_house img { width: 100%; }
    .harmony .sp_img { padding: 10% 0 0; }
    .harmony .content_fv .title { padding: 20px 0 10px; font-size: 18px; }
    .harmony .features { padding: 20px 0 0; }
    .harmony .features li { display: block; }
    .harmony .features li img { max-width: none; width: 100%; }
    .harmony .features li .box { width: 100%; }
    .harmony .features li .txt { font-size: 14px; padding: 0 0 30px; line-height: 180%; }
    .harmony .features li h3 { letter-spacing: 1px; }
    .harmony .plan { padding: 20px 0 0; }

    /* ------------------------------------------------------- harmony */ 

    .model_house { padding: 50px 0; }
    .model_house .common_h3 { padding: 0 0 30px; }
    .model_house .title { font-size: 18px; }
    .model_house .detail { position: relative; }
    .model_house .detail .box { padding: 0 0 30px; }
    .model_house .detail .box .txt { width: 100%; }
    .model_house .slider-arrows .slick-arrow { top: 15%; bottom: auto; }
    .model_house .slider-arrows .arrow-prev { left: -3%; }
    .model_house .slider-arrows .arrow-next { right: -3%; }

    /* ------------------------------------------------------- work */ 

    .work { padding: 50px 0; }
    .work .slider-wrap { width: 94%; }
    .work .caption { text-align: left; font-size: 18px; padding: 0 0 60px; text-align: center; }
    .work .slide { padding: 0 10px; }
    .work .slide .flex { display: block; }
    .work .slider .big { padding: 0 0 10px; }
    .work .slider :where(.big, .small) { width: 100%; }
    .work .slider-arrows :where(.arrow-prev, .arrow-next) { top: 60px; bottom: auto; }
    .work .slider-arrows .arrow-prev { left: -1%; }
    .work .slider-arrows .arrow-next { right: -1%; }

    /* ------------------------------------------------------- performance */ 

    .performance .slider .slide { width: 88vw !important }
    .performance .slider .slide .line_box { border: none; padding: 0; }
    .performance .slider-wrap { padding: 30px 0 0; }
    .performance .slider-arrows .slick-arrow { bottom: auto; top: -20px; }
    .performance .slider-arrows .arrow-prev { left: 3%; }
    .performance .slider-arrows .arrow-next { right: 3%; }

    /* ------------------------------------------------------- design */ 

    .design ul li { display: block; padding: 0 0 50px; }
    .design ul li img { width: 100%; }
    .design ul li .box { width: 100%; padding: 20px 0 0; }
    .design ul li h4 { font-size: 18px; border: none; padding: 0; }
    .design ul li .txt { padding: 10px 0 0; }

    /* ------------------------------------------------------- material */ 

    .material { padding: 0 0 50px; }
    .material ul { display: block; }
    .material ul li { width: 100%; margin: 0 0 30px; max-width: none; }
    .material ul li .line_box { border: none; padding: 0; }
    .material ul li .line_box .txt { max-width: none; }
    
    /* ------------------------------------------------------- reason */ 

    .reason .maker { padding: 0 0 50px; }
    .reason .maker img { width: 94%; margin: auto; max-width: 420px; }
    .reason .why { padding: 0 0 30px; }
    .reason .why ul { display: block; }
    .reason .why ul li { border-left: 2px solid #E62E18; width: 100% !important; margin: 0 0 40px; padding: 0 0 0 20px; }
    .reason .why ul li:first-child { margin: 0 0 30px; padding: 0; }
    .reason .why ul li h4 { font-size: 18px; line-height: 150%; }
    .reason .why ul li h5 { font-size: 16px; line-height: 150%; padding: 0 0 15px; }

    /* ------------------------------------------------------- product */ 
    
    .product { padding: 50px 0; }
    .product .btn { padding: 30px 0 0; }
    .product ul.closed { height: 58vw; }
    .product p.caption { font-size: 16px; padding: 30px 0; }
    .product ul li { max-width: 0 0 10%; }
    .product ul li h5 { padding: 15px 0 10px; font-size: 18px; }

    /* ------------------------------------------------------- support */ 

    .support { padding: 50px 0; }
    .support .caption { padding: 40px 0 30px; }
    .support .col { width: 100%; }
    .support ul li { padding: 20px 6%; }

    /* ------------------------------------------------------- catalog */ 

    .catalog { padding: 50px 0; }
    .catalog h5 { font-size: 20px; padding: 0 0 30px; }
    .catalog ul li { max-width: 380px; margin: auto; width: 100%; padding: 0 0 30px; }
    .catalog ul li img { width: 100%; }

}