/*
Theme Name: Re.Life 2025
*/
/*ベースの設定*/
html{font-size:62.5%;}
:root {
--content-brand-font: "Noto Sans JP", serif;
--content-brand-font-en: "Jost", sans-serif;
--content-brand-font-min: "Noto Serif", serif;
--content-brand-color: #beafa7;
--content-brand-gray: #6a6a6a;
}
html,body{width: 100%; font-family: var(--content-brand-font); }
body{ line-height: 1.5; overflow: hidden; }
a{ text-decoration: none; transition: 0.5s;}
a:visited{}
a:hover img{ opacity: 0.8; transition: 0.5s ;}
a:hover,li:hover,input:hover,p:hover { transition: 0.5s ;}
img{ width:100%; height:auto; display: block;}
p{ font-family: var(--content-brand-font); font-weight: 200; font-style: normal; font-feature-settings: "palt";}
/*装飾*/
.text-link{ color: #000000; display: flex; align-items: center; justify-content: flex-end; width:fit-content;font-family: var(--content-brand-font-en); }
.text-link:hover{ opacity: 70%;}
.text-link i{ font-size:4.0rem; font-weight: 600; display: block; color: #000000; align-items: center; justify-content: flex-end;}
.text-link.middle i{ font-size:2.8rem}
.text-link i::first-letter{ color: var(--content-brand-color);}
.text-link:after{ content:''; aspect-ratio:1 / 1; display: block; width:2.4rem; background-image: url(images/arrow_left_gray.png); background-size: contain; margin-left: 0.8rem;}
.std{ border-bottom:0.16rem solid var(--content-brand-color); margin-bottom: 4.8rem;}
.std .wrap{ display: flex; align-items: center; font-size:1.6rem; font-weight: 200; max-width:1100px; width:90%; margin:0 auto; position: relative; bottom:-2rem}
.std .wrap i{ font-size:4.8rem; font-weight: 600; font-family: var(--content-brand-font-en); vertical-align: baseline; margin-right: 1.6rem; display: block;}
.std .wrap i::first-letter{ color: var(--content-brand-color);}
.std .wrap strong{ font-weight: 600; }
.std2{ font-family: var(--content-brand-font-en); font-size:4.8rem;color: var(--content-brand-gray); font-weight: 600; line-height: 1;}
.std2 strong{ font-family: var(--content-brand-font); font-size:1.6rem; font-weight: 500; display: block; color: #000000;}
.btn2{ display: block; width:fit-content; margin: 0 auto; padding: 0.8rem 2.4rem; font-size:2.4rem; font-weight: 600; color: #ffffff; background-color: #000000; border-radius: 0.8rem;}
.btn2:hover{ background-color: #ffffff; color: var(--content-brand-color);}
/*トップページ演出*/
/*固定ボタン*/
/*BASE*/
.pagehead {position: fixed; z-index: 2; width:100%}
.home .pagehead {background: linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)); }
.pagehead .wrap{ width:98%; max-width:1100px; margin:0 auto; display: flex; justify-content: space-between; padding:4.0rem 0 0 0; transition: 0.5s all;}
.home .pagehead .wrap { padding:4.8rem 0 0 0;}
.scrolled-200px .pagehead .wrap{ padding:1.6rem 0 2.4rem 0; transition: 0.5s all;}
.scrolled-200px .pagehead {background: linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)); }
.pagehead .wrap .branding{ max-width:176px; width:16%;}
.pagehead .wrap .menu{ display: flex; justify-content: flex-end; }
.pagehead .wrap .menu li { padding: 0 1.5rem;}
.pagehead .wrap .menu li a{ color: #000000;}
.pagehead .wrap .menu li a:hover{ color: #ffffff}
.pagehead .wrap .menu li.contact a{ color: #ffffff; border-radius:0.48rem; padding:0 1.6rem; background-color: #000000; border:0.16rem solid #ffffff; display: flex; align-items: center; justify-content: center;}
.pagehead .wrap .menu li.contact a:hover{ background-color: #ffffff; border:0.16rem solid var(--content-brand-color); color: var(--content-brand-color);}
.pagehead .wrap .menu li a:hover{ color: #ffffff}
.home .pagehead .wrap .menu li a:hover{ color: var(--content-brand-color)}
.pagehead .wrap .menu li i{ font-family: var(--content-brand-font-en); font-weight: 600; font-size:2.0rem; transition: 0.5s all;}
.scrolled-200px .pagehead .wrap .menu li i{ font-size:1.6rem;}
.pagehead .wrap .branding .scrolled{ display: none;}
.scrolled-200px .pagehead .wrap .branding .scrolled{ display: block;}
.pagehead .wrap .branding .topview{ display: block;}
.scrolled-200px .pagehead .wrap .branding .topview{ display: none;}
.site-footer{ padding:2.4rem 0 5.6rem 0 ; border-bottom: 2.4rem solid var(--content-brand-color);}
.site-footer .inner{ max-width:1100px; width:95%; margin:0 auto; display: flex; justify-content: space-between; align-items: center;}
.site-footer .inner .branding{ width:28.8rem; }
.site-footer .menu{ display: flex; justify-content: flex-end; }
.site-footer .menu li { padding: 0 1.5rem;}
.site-footer .menu li a{ color: #000000;}
.site-footer .menu li a:hover{ color: var(--content-brand-color)}
.home .site-footer .menu li a:hover{ color: var(--content-brand-color)}
.site-footer .menu li i{ font-family: var(--content-brand-font-en); font-weight: 600; font-size:1.6rem;}
/*TOP*/
.topmv figure{ display: flex; justify-content: center; align-items: center;}
.topmv figure .home_slider{ width:100%;}
.topmv figure figcaption { display: block; font-size: 4.8rem; font-weight: 800; color: #ffffff; text-align: center; position: absolute; line-height: 1; font-family: var(--content-brand-font-en); text-shadow: 0.4rem 0.4rem 0.4rem rgba(0, 0, 0, 0.25);}
.topmv figure figcaption::before{ content:''; aspect-ratio:56 / 51; display: block; width:5.6rem; background-image: url(images/dec_topview.png); margin:0 auto 0 0; background-size: contain;}
.topmv figure figcaption::after{ content:''; aspect-ratio:56 / 51; display: block; width:5.6rem; background-image: url(images/dec_topview.png); margin:0 0 0 auto; background-size: contain;}
.top-introduction{ padding:4.8rem 0;}
.top-introduction .inner{ max-width:1100px; width:95%; margin:0 auto}
.top-introduction .wrap{ display: flex; justify-content: space-between;}
.top-introduction h2{ border-left: 0.8rem solid var(--content-brand-color); padding-left: 1.6rem; margin-right: 2.4rem;}
.top-introduction h2 strong{ font-size:3.2rem; font-weight: 600; white-space: nowrap; display: block; display: flex; white-space: nowrap; align-items: center;}
/*.top-introduction h2 strong:after{content:''; aspect-ratio:36 / 38; display: block; width:5.6rem; background-image: url(images/dec_top_introduction.png); margin:0 auto 0 0; background-size: contain; width:3.6rem}*/
.top-introduction h2 i{ font-size:2.0rem; font-weight: 500; display: block;}
.top-introduction .description{ font-size:1.6rem; line-height: 2; padding-bottom: 2.4rem; border-bottom:0.16rem solid #000000; margin-bottom: 1.6rem;}
.top-introduction .description strong{ font-size:1.8rem; display: block;}
.top-introduction .btn-wrap{ display: flex; justify-content: flex-end;}
.blog_top { padding:4.8rem 0}
.blog_top .slider li figure{ display: flex; justify-content: center;}
.blog_top .slider li figure a{ display: block;width:90%; }
.blog_top .slider li figure img{ object-fit: cover; object-position: center;height: 100%; aspect-ratio: 33 / 45; }
.blog_top .slider li .text{ width:90%; margin: 0 auto;}
.blog_top .slider li .date{ font-size:1.4rem;}
.blog_top .slider li h3 a{ font-size:1.6rem; font-weight: 500; color: #000000;}
.blog_top .btn-wrap{ display: flex; justify-content: flex-end; max-width:1100px; width:90%; margin:3.2rem auto 0 auto; padding-top:1.6rem; /*border-top:0.16rem solid var(--content-brand-color)*/}
.video_top { padding:4.8rem 0}
.video_top .inner{ max-width:1100px; width:90%; margin:0 auto}
.video_top ul{ display: flex; justify-content: space-between; flex-wrap: wrap;}
.video_top li{ width:47.5%}
.video_top li iframe{ width:100%; height:auto; aspect-ratio:16 / 9}
.video_top li video{ width:100%;}
.video_top li h3 a{ font-size:2.4rem; font-weight: 200; color: #000000; display: flex; line-height: 1.2; justify-content: space-between; align-items: flex-start;}
.video_top li h3 a:after{ content:''; aspect-ratio:1 / 1; display: block; width:2.4rem; background-image: url(images/arrow_left_gray.png); background-size: contain; margin-left: 0.8rem;}
.video_top li .date{ font-size:1.4rem; font-weight: 200;}
.video_top li p{ display: none;}
.video_top .btn-wrap{ display: flex; justify-content: flex-end; max-width:1100px; width:90%; margin:3.2rem auto 0 auto; padding-top:1.6rem; /*border-top:0.16rem solid var(--content-brand-color)*/}
.works_top{ padding:4.8rem 0}
.works_top .inner{ max-width:1100px; width:90%; margin:0 auto}
.works_top .slider_works li{ aspect-ratio:1100 / 503}
.works_top .slider_works li a{ display: flex; background-color: var(--content-brand-color); color: #ffffff; align-items: flex-end;}
.works_top .slider_works li figure{ width:68.72%;}
.works_top .slider_works li img{object-fit: cover; object-position: center; aspect-ratio: 756 / 503; height:auto;}
.works_top .slider_works li .text{ margin:1.6rem; width:31.28%}
.works_top .slider_works li h3 { font-size:3.2rem; font-weight: 200; display: flex; justify-content: space-between; align-items: center;}
.works_top .slider_works li .date{ font-size:1.4rem; margin-bottom: 1.6rem;}
.works_top .slider_works li .description{ font-size:1.4rem; line-height: 2;}
.works_top .slider_works li h3:after{ content:''; aspect-ratio:1 / 1; display: block; width:2.4rem; background-image: url(images/arrow_left_gray.png); background-size: contain; margin-left: 0.8rem; border: 1px solid #ffffff;}
.works_top .btn-wrap{ display: flex; justify-content: flex-end; max-width:1100px; width:90%; margin:3.2rem auto 0 auto; padding-top:1.6rem; /*border-top:0.16rem solid var(--content-brand-color)*/}
.information_top{ padding:4.8rem 0;}
.information_top .inner{ max-width:1100px; width:90%; margin:0 auto}
.information_top ul{ display: flex; justify-content: space-between;}
.information_top li{ width:23%}
.information_top li figure{ aspect-ratio: 1 / 1; margin-bottom:0.8rem; border:1px solid #eeeeee}
.information_top li figure img{ height: auto; object-fit: cover; object-position: center; aspect-ratio: 1 / 1;}
.information_top li .text p{ font-size: 1.4rem;}
.information_top li .text h3 a{ font-size: 1.6rem; font-weight: 600; color:#000000}
.information_top li .text .link-more{ display: none;}
.information_top .btn-wrap{ display: flex; justify-content: flex-end; max-width:1100px; width:90%; margin:3.2rem auto 0 auto; padding-top:1.6rem; /*border-top:0.16rem solid var(--content-brand-color)*/}
.sitemap_top { padding:4.8rem 0}
.sitemap_top .inner{ max-width:1100px; width:90%; margin:0 auto}
.sitemap_top ul{ display: flex; justify-content: space-between; flex-wrap: wrap;}
.sitemap_top li{ width:48%; margin-bottom: 2.4rem; border-top:0.16rem solid #000000; border-bottom:0.16rem solid #000000; display: flex; align-items: center; justify-content: space-between; padding:1.6rem 0}
.sitemap_top li a{ color: #000000; display: flex; align-items: center; justify-content: flex-end; width:fit-content;font-family: var(--content-brand-font-en); }
.sitemap_top li a i{ font-size:4.0rem; font-weight: 600; display: block; color: #000000; align-items: center; justify-content: flex-end;}
.sitemap_top li a i::first-letter{ color: var(--content-brand-color);}
.sitemap_top li a:after{ content:''; aspect-ratio:1 / 1; display: block; width:2.4rem; background-image: url(images/arrow_left_gray.png); background-size: contain; margin-left: 0.8rem;}
.sitemap_top li strong{ font-size:1.6rem; font-weight:600}
.sns_section{ padding:4.8rem 0}
.sns_section .inner{ max-width:1100px; width:90%; margin:0 auto}
.sns_section ul{ display: flex; justify-content: space-between; flex-wrap: wrap;}
.sns_section li{ width:30%; }
.sns_section li a{position: relative; display: flex; justify-content: center; align-items: center; width:100%; height: 100%; border: 0.16rem solid #000000}
.sns_section li a::after{ content:''; aspect-ratio:1 / 1; display: block; width:2.4rem; background-image: url(images/arrow_left_gray.png); background-size: contain; position: absolute; right:0.8rem}
.sns_section li img{ height:40%; object-fit: contain; object-position: center;}
.sns_section li .line img{ height:30%}
.sns_section .btn-wrap{ display: flex; justify-content: flex-end; max-width:1100px; width:90%; margin:3.2rem auto 0 auto; padding-top:1.6rem; /*border-top:0.16rem solid var(--content-brand-color)*/}
.access_section { padding:4.8rem 0}
.access_section .location{ max-width:1100px; width:90%; margin:0 auto 2.4rem auto; font-size:2.0rem; font-weight:500}
.access_section iframe{ display: block; width:100%; height:50rem; min-height:400px;}
/*固定ページ*/
.page-header{ border-top:10.4rem solid var(--content-brand-color); margin-bottom:4.8rem;}
.page-header .page-title{ width:90%; max-width: 1000px; margin:0 auto; padding:7.2rem 0 4.8rem 0; text-align: right; line-height: 1;}
.page-header .page-title i{ font-family: var(--content-brand-font-en); font-size:7.2rem; font-weight: 600; display: block; color: #000000;}
.page-header .page-title i::first-letter{ color: var(--content-brand-color);}
.page-header .page-title strong{ display: block; font-weight: 200; font-size:3.2rem}
.page-header .introduction{ display: flex; flex-direction: column; align-items: flex-end; justify-content: flex-end; width:90%; max-width: 1000px; margin:0 auto; padding:2.4rem 0 4.8rem 0;}
.page-header .introduction h2{ font-size:3.2rem; font-weight: 500; margin-bottom: 1.6rem;}
.page-header .introduction P{ font-size:1.6rem; font-weight: 200; line-height: 2;}
.page-header .page-eyecatch{ max-width:1000px; width:90%; margin: 0 auto; aspect-ratio: 5 / 3; overflow: hidden;}
.page-header .page-eyecatch img{ height: auto; object-fit: cover;}
.sec-type1{ padding:6.4rem 0}
.sec-type1 .inner{ width: 90%; max-width:1000px; margin:0 auto; display: flex; justify-content: space-between;}
.sec-type1 .left-image,
.sec-type1 h2{ text-align: right; width: 30%;}
.sec-type1 .block-list{ width:65%}
.sec-type1 .block-list{ width:65%}
section.vision ul{ background-image: url(images/pic_piramid.webp); background-size: contain; background-position: right; background-repeat: no-repeat;}
section.vision li{ padding:4.0rem 0; font-size: 2.4rem; line-height: 1.2;}
section.vision li i{ font-size:4.8rem; font-family: var(--content-brand-font-en); font-weight: 600; display: block; color:var(--content-brand-color); display: block;}
section.ethos .wrap{ width:30%}
section.ethos .block{ margin-bottom: 7.2rem;}
section.ethos h3 { margin-bottom: 2.4rem;}
section.ethos h3 i{ font-size:4.8rem; color: var(--content-brand-gray); font-weight: 200; display: block; color: var(--content-brand-gray); line-height: 1; margin-bottom: 0.8rem;}
section.ethos h3 strong{ display: block; font-size: 1.6rem; font-weight: 600; color: #000000;}
section.ethos .introduction{ font-size:1.4rem; line-height: 2; margin-bottom: 4.8rem;}
section.ethos li{ margin-bottom: 4.8rem; display: flex; justify-content: space-between; align-items: flex-start;}
section.ethos li figure{ width:30%}
section.ethos li .text{ width:65%}
section.ethos li h4{ font-size:1.8rem; font-weight: 600; margin-bottom: 0.8rem;}
section.ethos li p{ font-size:1.4rem; line-height: 2; margin-bottom: 1.6rem;}
section.service .block{ display: flex; justify-content: space-between; flex-wrap: wrap;}
section.service .box{ width:45%; margin-bottom: 3.2rem;}
section.service .box figure{ margin-bottom: 0.8rem;}
section.service .box h3{ font-size:1.8rem; font-weight: 500;}
section.service .box p{ font-size:1.4rem; line-height: 2;}
section.aisatsu p{ font-size:1.6rem; line-height: 2;}
section.aisatsu .signature{ display: block; text-align: right; margin-top: 1.6;}
section.company-data table{ width:100%; border-top:1px solid #000000}
section.company-data th,
section.company-data td{ padding:0.8rem; border-bottom:1px solid #000000; font-size:1.6rem; font-weight: 200;}
section.company-data th{ width:15rem; font-weight: 400;}
section.history ul{ margin-left: 2.4rem;}
section.history li{ display: flex; font-size:1.8rem; border-left: 1px solid #000000; padding:0 0 1.6rem 0;}
section.history li:last-child{ border-left:none;}
section.history li:before{ content: ''; width:1.6rem; min-width:1.6rem; height:1.6rem; border-radius: 50%; background-color: #000000; transform: translate(-0.88rem, -0.08rem);}
section.history li i { margin-right: 1.6rem; transform: translateY(-0.64rem); white-space: nowrap; min-width:14rem}
section.history li .text { transform: translateY(-0.64rem); font-weight: 200; font-size: 1.6rem;}
section.staff { padding-bottom: 0;}
section.staff .left-image { aspect-ratio: 1 / 1; overflow: hidden; }
section.staff .left-image img{ height: auto;}
section.staff .block h3{ font-size:2.4rem; font-weight: 200; margin-bottom: 2.4rem;}
section.staff .block p{ font-size:1.6rem; line-height: 2;}
section.staff .block .signature{ display: block; text-align: right;}
section.staff .block .signature strong{ font-size: 2.0rem; margin-left: 1.6rem;}
section.staff+.editor{ margin-bottom: 9.6rem;}
body.sns .page-header{ margin-bottom: 0;}
section.title-section{ text-align: center; padding: 0;}
section.title-section h2{ font-size: 2.4rem; font-weight: 600; margin-bottom: 2.4rem;}
section.sns .left-image a{ display: block; width:60%; margin:0 auto 2.4rem auto}
section.sns .left-image a.line{ width:50%;}
section.sns .left-image figcaption{ text-align: center;}
section.sns .left-image figcaption i{font-size: 1.6rem; font-weight: 600;}
section.sns .left-image figcaption strong{ font-size: 2.4rem; font-weight: 600}
section.sns .left-image .qr{ width: 40%; aspect-ratio: 1 / 1; margin: 1.6rem auto 0 auto;}
section.sns .block-list .strong{ font-size: 2.4rem; font-weight: 600; margin-bottom: 1.6rem}
section.contact-tel .tel a{ font-size:6.0rem; font-weight: 600; color: #000000; display: block; font-family: var(--content-brand-font-en); line-height: 1;}
section.contact-tel .tel i{ font-size:1.4rem; display: block;}
section.contact-line figure{ display: flex;}
section.contact-line figure img{ width:15.0rem; height:15.0rem}
section.contact-line figcaption{ font-size:1.6rem; line-height: 2 ;}
section.contact-line figcaption .btn2{ line-height: 1; background-color: #54b75c; margin-top: 1.6rem;}
section.contact-mail .description{ font-size:1.6rem; font-weight: 400; line-height: 2;}
body.recruit .title-section { margin-bottom: 4.8rem;}
body.recruit .title-section p{ font-size: 2.0rem; font-weight: 200; line-height: 2;}
section.recruit { padding-bottom: 7.2rem;}
section.recruit h2{ font-weight: 600; text-align: center; font-size: 2.4rem;}
section.recruit table{ font-size:1.6rem; width:90%; max-width: 700px; margin:0 auto}
section.recruit th{ padding:1.6rem; border-bottom: 1px solid #000000; text-align: right; width:10.0rem}
section.recruit td{ padding:1.6rem; border-bottom: 1px solid #000000;}
section.recruit .btn-wrap{ padding:4.8rem 0; width:90%; max-width: 700px; margin:0 auto}
section.recruit .btn-wrap a{ display: flex; padding:1.6rem; border: 1px solid #000000; justify-content: space-between; align-items:center; color: #000000;}
section.recruit .btn-wrap strong{ font-weight: 500; font-size: 1.6rem; display: block;}
section.recruit .btn-wrap i{ font-size:4.0rem; display: flex; color: #000000; align-items: center; justify-content: flex-end;}
section.recruit .btn-wrap i .wrap{ font-weight: 600;}
section.recruit .btn-wrap i .wrap::first-letter{ color: var(--content-brand-color);}
section.recruit .btn-wrap i:after{ content:''; aspect-ratio:1 / 1; display: block; width:2.4rem; background-image: url(images/arrow_left_gray.png); background-size: contain; margin-left: 0.8rem;}
.wpcf7{ padding:4.8rem 0}
.wpcf7 .form-item{ margin-bottom: 2.4rem;}
.wpcf7 .form-item:not(:has(.item-label)) label{ font-size:1.8rem; font-weight: 500; display: flex; align-items: center; margin-bottom: 0.8rem;}
.wpcf7 .form-item:not(:has(.item-label)) label i{ color: #cb000e; font-size:1.4rem; margin-left: 0.8rem;;}
.wpcf7 .form-item .item-label{ font-size:1.8rem; font-weight: 500; display: flex; align-items: center; margin-bottom: 0.8rem;}
.wpcf7 .form-item .item-label i{ color: #cb000e; font-size:1.4rem; margin-left: 0.8rem;;}
.wpcf7-list-item{ margin: 0 1.6rem 0 0; }
.wpcf7-list-item label{ display: flex; font-size:1.6rem; align-items: center; font-weight: 500;}
.cta{ background-color: var(--content-brand-color); padding:6.4rem 0; text-align: center;}
.cta .inner{ width: 90%; max-width:1000px; margin:0 auto;}
.cta h2{ font-size:3.2rem; font-weight: 600; margin-bottom: 1.6rem}
.cta p{ font-size: 1.6rem; margin-bottom: 2.4rem; font-weight: 400; line-height: 2;}
.mailform{ padding:7.5rem 0}
.mailform .block{ font-size:1.6rem}
.mailform .block .wpcf7-checkbox{ display: block; padding: 0 0 1.5rem 0; line-height: 2;}
/*フォーム*/
.wpcf7-form{ width:100%; margin: auto;}
.wpcf7-form p.note{ font-size:12px; padding: 15px 0; text-align: right;}
.wpcf7-form p.note i{ color: #da3312;}
.wpcf7-form table{ width: 100%;}
.wpcf7-form table th,.wpcf7-form table td{ padding: 15px; vertical-align: top;}
.wpcf7-form table th{ width:200px; position: relative; font-weight: bold;}
.wpcf7-form table th i{ color: #da3312; font-size:12px}
.wpcf7-form table th span{ position: absolute; right:15px; display: inline-block; padding: 5px; line-height: 1; color: #da3312; border-radius:5px; font-size: 12px;}
.wpcf7-form table td br{ display: none;}
.wpcf7-form table td i{ display: inline-block; width:130px; text-align: right; margin-right: 5px;}
.your-zipcode,.your-address1,.your-address2{ display: flex; margin-bottom:5px; width:100%; align-items: center; justify-content: space-between;}
.wpcf7-form textarea{ height: 100px;}
.wpcf7-form .privacy{ text-align:center;}
.wpcf7-form .privacy input{ display: block; width:20px; margin:15px auto 5px auto}
.wpcf7-form input[type="text"],.wpcf7-form input[type="email"],.wpcf7-form textarea{ padding:5px; font-size:18px; width:calc(100% - 12px); border:1px solid #666666;}
.wpcf7-form .submit{ text-align: center; padding: 25px;}
.wpcf7-form .submit input{ display: block; margin:0 auto; border-radius: 5px; padding:15px 50px; font-size:18px; color: #ffffff; cursor: pointer; background-color:#000000; border:none}
.wpcf7-form .submit input:hover{ background-color: #e0e0e0; color: #000000;}
.satei .contact-box{ margin-bottom:50px}
.wpcf7-form.invalid .bukken-sonota,.wpcf7-form.invalid .bukken-sonotariyuu{ margin: 0;}
.wpcf7 form .wpcf7-response-output{margin: 2em 0 1em; padding: 15px; border-radius: 15px; text-align: center; font-size:18px; font-weight:bold; background-color: #fbe2cb;}
.bukken-syurui .wpcf7-not-valid-tip,.bukken-riyuu .wpcf7-not-valid-tip{ display: inline-block;}
.wpcf7-not-valid{ background-color: #fbe2cb; }
/*投稿アーカイブ*/
.archivecontent .inner{ width:90%; max-width:790px; margin:0 auto;}
.archivecontent .inner li{ display: flex; margin-bottom: 4.8rem; justify-content: space-between; align-items: center;}
.archivecontent .inner li figure{ width:30%; aspect-ratio: 1 / 1; overflow: hidden; border:1px solid #eeeeee}
.archivecontent .inner li figure img{ aspect-ratio: 1 / 1; height: auto; object-fit: cover; object-position: center;}
.archivecontent .inner li .text{ width:62.5%;}
.archivecontent .inner li .text .date{ font-size:1.4rem; font-weight: 600; margin-bottom: 0.8rem;}
.archivecontent .inner li .text h3{ font-size:2.4rem; margin-bottom: 0.8rem;}
.archivecontent .inner li .text a{ color: #000000; font-weight: 300;}
.archivecontent .inner li .text p{ font-size:1.6rem}
.archivecontent .inner li .text .link-more{ display: none;}
/*投稿ページ*/
.wp-default-content p,
.wp-default-content h1,
.wp-default-content h2,
.wp-default-content h3,
.wp-default-content h4,
.wp-default-content h5,
.wp-default-content h6,
.wp-default-content em,
.wp-default-content strong,
.wp-default-content a,
.wp-default-content hr,
.wp-default-content ul,
.wp-default-content ol,
.wp-default-content li{all: revert;}
.wp-default-content p{ font-size:1.6rem; line-height: 2; font-weight: 300;}
.wp-default-content h2{ font-size:2.4rem;}
.wp-default-content h3{ font-size:2.0rem;}
.single .introduction.entry-title p{ font-size:1.6rem; font-weight: 500;}
.single article .inner{ width:90%; max-width:800px; margin:0 auto}
.single article .inner .page-eyecatch { margin-bottom: 2.4rem;}
.single article .inner .page-eyecatch img{ height: auto;}
.single article .entry-header h1 .date{ font-size:1.6rem; font-weight: 500; display: block;}
.single article .entry-header h1 strong{ font-size:3.2rem; font-weight: 300;}
.navi-single{ display: flex; justify-content: center; padding:4.8rem 0}
.navi-single .btn2 a{ color: #ffffff;}
.navi-single .btn2:hover{ background-color: var(--content-brand-color); color: #000000;}
figure.wp-block-gallery.has-nested-images{ padding:2.4rem 0}
.wp-block-gallery.has-nested-images figure.wp-block-image img{ height:100%; object-fit: cover; object-position: center; aspect-ratio: 1 / 1;}
/*動画アーカイブ*/
.topics-archive.movies { padding-bottom: 7.2rem;}
.topics-archive.movies .inner{ width:90%; max-width:1000px; margin:0 auto}
.topics-archive.movies li{ display: flex; justify-content: space-between; align-items: center; margin-bottom: 4.8rem;}
.topics-archive.movies li:nth-child(odd){ flex-direction: row-reverse;}
.topics-archive.movies li figure{ width:64%;}
.topics-archive.movies li figure video{ width:100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: center;}
.topics-archive.movies li figure iframe{ width:100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: center;}
.topics-archive.movies li .text{ width:32%}
.topics-archive.movies li .text h3 a{ font-size:2.4rem; font-weight: 300; color: #000000;}
.topics-archive.movies li .text .date{ font-size:1.4rem; font-weight: 600; margin-bottom: 0.8rem; display: block;}
.topics-archive.movies li .text p{ font-size:1.6rem; line-height:2; }
.topics-archive.movies .post-eyecatch { margin-bottom: 2.4rem;}
/*動画ページ*/
.single article .inner{ width:90%; max-width:800px; margin:0 auto}
.single article .inner .page-eyecatch video,
.single article .inner .page-eyecatch iframe{ width:100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: center; margin-bottom: 2.4rem;}
.single article .entry-header h1 .date{ font-size:1.6rem; font-weight: 500; display: block;}
.single article .entry-header h1 strong{ font-size:3.2rem; font-weight: 300;}
/*施工実績アーカイブ*/
.topics-archive.works { padding:4.8rem 0}
.topics-archive.works .inner{ max-width:1100px; width:90%; margin:0 auto}
.topics-archive.works li{ aspect-ratio:1100 / 503; margin-bottom: 4.8rem;}
.topics-archive.works li a{ display: flex; background-color: var(--content-brand-color); color: #ffffff; align-items: flex-end;}
.topics-archive.works li:nth-child(even) a{ flex-direction: row-reverse;}
.topics-archive.works li figure{ width:68.72%;}
.topics-archive.works li img{object-fit: cover; object-position: center; aspect-ratio: 756 / 503; height:auto;}
.topics-archive.works li .text{ margin:1.6rem; width:31.28%}
.topics-archive.works li h3 { font-size:3.2rem; font-weight: 200;display: flex; justify-content: space-between; align-items: center;}
.topics-archive.works li .date{ font-size:1.4rem; margin-bottom: 1.6rem;}
.topics-archive.works li .description{ font-size:1.4rem; line-height: 2;}
.topics-archive.works li h3:after{ content:''; aspect-ratio:1 / 1; display: block; width:2.4rem; background-image: url(images/arrow_left_gray.png); background-size: contain; margin-left: 0.8rem; border: 1px solid #ffffff;}
/*施工実績ページ*/
.single .works figure{ display: flex; justify-content: flex-end; position: relative; }
.single .works figcaption{ position: absolute; left:2.4rem; bottom:2.4rem; background-color: var(--content-brand-color); color: #ffffff; padding:1.2rem 2.4rem}
.single .works figcaption strong{ font-size:3.2rem; font-weight: 300; display: block;}
.single .works figcaption .date{ font-size: 1.6rem; font-weight: 500; display: block;}
.single .works figure.tatenaga{ aspect-ratio: 1 / 1;}
.single .works figure.tatenaga img{ width:auto; height:100%; object-fit: contain;}
.single .works .wp-default-content{ max-width:640px; margin:4.8rem auto}
/*アニメーション*/
.ethos.sec-type1:first-child{padding-bottom: 0;}
.animation-container {
/* 既存のスタイル */
opacity: 0;
transform: translateY(50px);
transition: opacity 0.8s ease, transform 0.8s ease;
}
.animation-container.visible {
opacity: 1;
transform: translateY(0);
}
.animation-container {
position: relative;
width: 100%;
height: 100%;
aspect-ratio:1 / 1;
display: flex;
justify-content: center;
align-items: center;
}
.center-circle {
position: absolute;
width: 70%;
height: auto;
aspect-ratio: 1 / 1;;
background: white;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
z-index: 0;
border:0.2rem solid #beafa7
}
.center-text {
font-size: 2.4rem;
font-weight: 300;
color: #333;
line-height: 1.4;
opacity: 0;
transition: opacity 0.8s ease-out;
}
.center-text.show {
opacity: 1;
}
.rotating-container {
position: absolute;
width: 80%;
height: auto;
aspect-ratio: 1 / 1;
animation: rotate 6s linear infinite;
animation-play-state: paused;
}
.rotating-container.animate {
animation-play-state: running;
}
.rotating-container .text {
animation: rotateCounter 6s linear infinite;
animation-play-state: paused;
}
.rotating-container.animate .text {
animation-play-state: running;
}
.outer-circle {
position: absolute;
width: 12rem;
height: 12rem;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
font-size: 2.4rem;
font-weight: bold;
color: white;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
opacity: 0;
transform: scale(0.8);
transition: all 0.8s ease-out;
z-index: 10;
}
.outer-circle.show {
opacity: 1;
transform: scale(1);
}
.health {
background-color:#beafa7;
top: -2.5rem;
left: 0;
right:0;
margin:0 auto;
transform: translateX(-50%) rotate(0deg);
}
.comfort {
background-color:#beafa7;
bottom: 5.0rem;
left: 0;
transform: rotate(120deg);
}
.security {
background-color:#beafa7;
bottom: 5.0rem;
right: 0;
transform: rotate(240deg);
}
.control-panel {
position: fixed;
top: 20px;
left: 20px;
z-index: 100;
}
.start-btn {
padding: 12px 24px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border: none;
border-radius: 25px;
font-size: 16px;
font-weight: bold;
cursor: pointer;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
transition: transform 0.3s ease;
}
.start-btn:hover {
transform: translateY(-2px);
}
.start-btn:active {
transform: translateY(0);
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes rotateCounter {
from {
transform: rotate(0deg);
}
to {
transform: rotate(-360deg);
}
}
/* @keyframes pulse {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
}
*/
.center-circle {
animation: pulse 2s ease-in-out infinite;
}
/*==============================================
●PC版非表示
===============================================*/
.sp{ display:none!important;}
/*===============================================
●レスポンシブ 画面の横幅が1080pxまで
===============================================*/
@media screen and (max-width:1200px){
html{font-size:1vw}
}
/*===============================================
●レスポンシブ 画面の横幅が880pxまで
===============================================*/
@media screen and (max-width:880px){
}
/*===============================================
●レスポンシブ 画面の横幅が660pxまで
===============================================*/
@media screen and (max-width:660px){
html{font-size:2vw}
body{ min-width:320px; background-image:none;}
img{
max-width: 100%;
height: auto;
width /***/:auto;
}
.pc{ display:none!important;}
.sp{ display:block!important;}
.home .pagehead .wrap{ padding-top: 1.6rem; padding-bottom:7.2rem}
.topmv figure img{ height:100vh; object-fit: cover; }
.pagehead .wrap .branding{ width:25%}
.scrolled-200px .pagehead .wrap .branding:has(.scrolled){ width:125%}
.top-introduction .wrap{ display: block;}
.top-introduction h2{ margin-bottom: 2.4rem;}
.std .wrap{ display: block; bottom:0.8rem}
.std .wrap strong{ display: block;}
.video_top ul{ display: block; width:80%; margin: 0 auto;}
.video_top li{ width:100%; margin-bottom: 2.4rem;}
.works_top .slider_works li{ aspect-ratio: auto;}
.works_top .slider_works li a{ display: block;}
.works_top .slider_works li figure{ width:100%; aspect-ratio: 3 / 2;}
.works_top .slider_works li .text{ width:calc(100% - 3.2rem); padding-bottom: 1.6rem;}
.information_top ul{ flex-wrap: wrap;}
.information_top li{ width:48%; margin-bottom: 2.4rem;}
.sitemap_top ul{ width:80%; margin:0 auto;}
.sitemap_top li{ width:100%}
.belt-image{ height:30vh}
.belt-image img{ height: 20vh; object-fit: cover;}
.sns_section ul{ width:80%; margin:0 auto;}
.sns_section li{ width:100%; margin-bottom: 2.4rem;}
.site-footer .inner .branding{ margin: 0 auto;}
.sec-type1 .inner{ display: block;}
.sec-type1 .left-image{display: block; float: left; margin:0 1.6rem 0 0 }
.sec-type1 h2{ display: block; width:100%; margin-bottom: 2.4rem;}
.sec-type1.sns .left-image{ float: none; width:100%; margin:0 auto 1.6rem auto; display: flex; justify-content: space-between; align-items: center;}
.sec-type1.sns .left-image a{ width:30%; margin: 0 ;}
section.sns .left-image a.line{ width:30%; margin: 0 ;}
section.ethos { padding-top: 0;}
section.ethos .wrap{ width:100%}
.sec-type1 .block-list{ width:100%;}
section.staff .block h3{font-size: 2.0rem;}
section.contact-line figcaption{ width:100%}
.topics-archive.works li{ aspect-ratio: auto;}
.topics-archive.works li a{ display: block;}
.topics-archive.works li figure{ width:100%; aspect-ratio: 3 / 2;}
.topics-archive.works li .text{ width:calc(100% - 3.2rem); padding-bottom: 1.6rem;}
.topics-archive.movies li{display: block;}
.topics-archive.movies .post-eyecatch{ width: 100%;}
.topics-archive.movies li .text{ width: 100%;}
.rotating-container { width:90%}
.mailform .block th{ display: block; width:calc(100% - 30px)}
.mailform .block td{ display: block; width:calc(100% - 30px)}
/*メニューレイアウト*/
.globalMenuSp .wrap{ z-index:99999; overflow-y: scroll; height: 100vh; position: relative; -webkit-overflow-scrolling: touch;}
.globalMenuSp .wrap .branding{ width:33%; margin:2.5rem auto}
.globalMenuSp .wrap .logo img{ width:20.0rem; display: block; margin:0 auto}
.globalMenuSp .wrap .description{ font-size:14px; line-height: 1.8; padding:25px 0}
.globalMenuSp .wrap ul{ display: flex; justify-content: space-between; max-width:900px; width:80%; margin:25px auto}
.globalMenuSp .wrap li a{ display: flex; align-items:center; justify-content: space-between;}
.globalMenuSp .wrap li a i{ color: #000000; font-size:2.4rem; font-weight: 600; display: block; justify-content: space-between; align-items: center; font-family: var(--content-brand-font-en); }
.globalMenuSp .wrap li a i::first-letter{ color: var(--content-brand-color); font-size:3.2rem}
.globalMenuSp .wrap li a strong{ font-size: 1.6rem; font-weight: 500; color: #000000;}
.globalMenuSp .wrap li{ text-align: center; width:100%; border-bottom: 1px solid #000000; margin-bottom:25px}
.globalMenuSp .wrap .data{ font-size:1.8rem}
}