/*
Theme Name:砂籐商事
*/

/*ベースの設定*/
html{font-size:62.5%; font-style: normal;}

:root {
  --content-brand-font: "Noto Sans JP", serif;
  --content-brand-font-en: "Oswald", sans-serif;
  --content-brand-font-en2: "Questrial", sans-serif;
  --content-brand-font-min: "Noto Serif jp", serif;
  --content-brand-font-midashi: "Zen Old Mincho", serif;
  --content-brand-green:#76b42b;
  --content-brand-middlegreen:#c0dc9d;
  --content-brand-lightgreen:#e5efd7;
  --content-brand-darkgreen:#0d4c50;
  --content-brand-red:#dd4e4a;
  --content-brand-orange:#D96800;
  --content-brand-lightorange:#fbeedc;
  --content-brand-lightred:#fceded;
  --content-brand-shadow: 0.4rem 0.4rem 2.0rem rgba(0, 0, 0, .75);
}

html,body{width: 100%;}
body{ line-height: 1.5; overflow: hidden; font-family: var(--content-brand-font); font-weight: 400; font-size:1.8rem; font-feature-settings: "palt";}
a{ text-decoration: none; transition: 0.5s; color: #000000;}
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%; display: block;}
a.btn-simple{ display: block; text-align: right; display: flex; align-items: center; justify-content: flex-end; position: relative;}
a.btn-simple::after{content: ''; width:0.75rem; height:0.75rem; display: block; border-right: 1px solid #000000; border-bottom: 1px solid #000000; transform: rotate(-45deg);}
a.btn-simple:hover{ color: #da3312;}
a.btn-simple:hover::after{ border-right: 1px solid #da3312; border-bottom: 1px solid #da3312;}
strong{font-weight: normal;}

.marker {background:linear-gradient(transparent 60%, #ff0 60%);}


/*装飾*/
.shutter{ opacity: 0;}
.is-visible{ opacity: 1;}
.is-visible.shutter{ position: relative;}
.is-visible.shutter:after{ content: ''; display: block; width:100%;height:100%; position: absolute; top:0; left:0; background-color: #ffffff; animation: shutter-open 1.5s ease-in-out forwards;transform-origin:100% 0}
@keyframes shutter-open{
    from {
    transform: scaleX(1);
  }
  to {
    transform: scaleX(0);
  }
}

.fade{ opacity: 0;}
.is-visible.fade{ position: relative; animation: fade-in 1.5s 0.5s ease-in-out forwards; opacity: 0;}
@keyframes fade-in{
    from {
    opacity:0;
    transform: translateY(-1rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

details::details-content {
  overflow: clip;                 /* はみ出しを隠す */
  transition: block-size .25s;    /* 高さ相当（縦書きでもOK） */
}

details:not([open])::details-content {
  block-size: 0;                  /* 閉時は 0 */
}

details[open]::details-content {
  block-size: auto;               /* 開時は 自動高さ */
}


.presentation{}
.slick-dots{ bottom:0}
.slick-dots li button{  display: flex; align-items:center}
.slick-dots li button:before{ top:0; left:0; right:0; bottom:0; margin:auto; font-size:2.4rem}
.slider-top img{ height:auto; margin:auto; transform: scale(120%);}
.slick-current img{ animation: zoom-out 5s 0.1s ease-out forwards;  position: relative;
  z-index: 1;
}
@keyframes zoom-in{
    from {
    transform: scale(100%);
  }
  to {
    opacity: 1;
    transform: scale(110%);
  }
}
@keyframes zoom-out{
    from {
      transform: scale(120%);
    }
    to {
    transform: scale(100%);
  }
}


.slider-top{
  opacity: 0; transition: 0.5s all;
}
.slider-top.slick-initialized{
  opacity: 1;
}



.fade-up {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease, transform 0.8s ease;
  position: relative;
  z-index: 2;
}
.fade-up.show {
  opacity: 1;
  transform: translateY(0);
}

.std{ text-align: center; margin-bottom: 2.4rem;}
.std i{ display: block; font-weight: 700; font-size: 5.6rem; color: var(--content-brand-green); font-family: var(--content-brand-font-en); line-height: 1; margin-bottom: 0.8rem;}
.std i::first-letter{ color: var(--content-brand-red);}
.std strong{ display: block; font-weight: 300; font-size: 1.8rem; color: var(--content-brand-green); line-height: 1;}
.std+p strong{ font-size:2.4rem; font-weight: 500; line-height: 1.8; display: block; margin-bottom: 2.4rem;}
.std+p strong i{ color: var(--content-brand-red);}
.std small{ font-size:1.6rem; font-weight: 300;}
.std.white strong{color: white;}
.std.white i{ color: white;}
.std2 { text-align: center; position: relative; display: flex; align-items: center; justify-content: center; height:12rem; padding: 7.2rem 0; margin-bottom: 4.0rem;}
.std2 i{ font-size:12.0rem; font-family: var(--content-brand-font-en2); color: var(--content-brand-red); opacity: 0.1; position: absolute; font-weight: 400;z-index: 1;}
.std2 strong{ font-size:4.2rem; font-weight: 600; position: relative; z-index: 2;}
.std2 strong img{ width:15.3rem; height:7.6rem; object-fit: contain; margin: 0 auto;}
.std2+p strong{ font-size:2.4rem; font-weight: 500; line-height: 1.8; display: block; margin-bottom: 2.4rem; text-align: center;}
.std3{ display: flex; align-items: center; justify-content: center; margin-bottom: 7.2rem;}
.std3 img{ width:13.0rem; height:13.0rem; object-fit: contain; margin-right: 1.6rem;}
.std3 strong{ font-size:3.2rem; font-weight:700;}
.std3v{ display: flex;flex-direction: column; align-items: center;}
.std3v img{ width:13.0rem; height:13.0rem; object-fit: contain;}
.std3v strong{ font-size:3.2rem; font-weight:700; display: block; margin: 0 auto; }
.std3v small{ display: block; font-weight: 400; font-size: 2.6rem; margin: 0 auto; text-align: center;}
.std4{ font-size:2.6rem; font-weight: 600; padding-left: 1.6rem; border-left: 1.6rem solid var(--content-brand-green); margin-bottom: 2.4rem;}
.bg_green{background-image: url(images/bg_green.webp); background-size: 100% auto; background-position: bottom; background-repeat: no-repeat; background-color: #e5efd7;}
.btn{ width:25.6rem; height: 5.8rem; display: flex; align-items: center; justify-content: center; background-color: var(--content-brand-red); font-size:1.6rem; color: #ffffff;}
.btn:after{ content: ''; width:2.8rem; height:2.8rem; display:block; background-image:url(images/icon_btn_arrow.webp); background-size:contain; background-position:center;  background-repeat: no-repeat; margin-left: 1.6rem; aspect-ratio: 1 / 1; transition: 0.5s all;}
.btn:hover{ background-color: var(--content-brand-darkgreen);}
.btn:hover:after{ transform: translateX(0.8rem);}
a:hover .btn{ background-color: var(--content-brand-red);}
a:hover .btn:after{ transform: translateX(0.8rem);}
.btn.tp{ border: 0.16rem solid var(--content-brand-red);background-color: transparent;}
.btn.tp:after{background-image:url(images/icon_btn_arrow2.webp);}
.btn.tp:hover{ background-color: var(--content-brand-red);}
.btn.sbtn{ width:20rem; height:4.6rem}



/*BASE*/
.pagehead { position: fixed; top:0; width:100%; z-index: 10; height:8.0rem; background-image: url(images/bg_pagehead.png); background-position: center; background-repeat: repeat-y;}
.pagehead .inner{ width:100%; max-width:1201px; margin:0 auto; display: flex; justify-content: space-between;}
.pagehead .branding{ width:22.64%; display: flex; align-items: center; justify-content: flex-end; background: #ffffff; padding: 0 2.4rem;}
.pagehead .branding img{ max-width:18.5745rem;}
.pagehead .header-menu{ background-color: rgba(255,255,255,0.75); width:100%}
.pagehead .header-menu ul{ max-width: 98.2rem; display: flex; justify-content: flex-end;}
.pagehead .header-menu li.menu_recruit a{ background-color: var(--content-brand-green); color: #ffffff; padding: 0 3.2rem;}
.pagehead .header-menu li .parent:hover{ background-color: var(--content-brand-darkgreen); color: #ffffff;}
.pagehead .header-menu li.menu_recruit a:before{ content: ''; width:2.1rem; height:1.88rem; display:block; background-image:url(images/icon_recruit.webp); background-size:contain; background-position:center;  background-repeat: no-repeat; margin-right: 0.4rem;}
.pagehead .header-menu li.menu_contact a{ background-color: var(--content-brand-red); color: #ffffff; padding:0 3.2rem}
.pagehead .header-menu li.menu_contact a:before{ content: ''; width:2.1rem; height:1.4rem; display:block; background-image:url(images/icon_contact.webp); background-size:contain; background-position:center;  background-repeat: no-repeat; margin-right: 0.4rem; transform: translateY(0.16rem);}
.pagehead .header-menu li i{ transform: translateY(0.4rem);}
.pagehead .header-menu li i::after{ content: ''; width:100%; height:0.4rem; display:block; margin: 0.4rem auto 0 auto;}
body:not(.home){ padding-top: 8.0rem;}
.home .pagehead .header-menu .menu_top i::after{ background-color: var(--content-brand-red);}
.company .pagehead .header-menu .menu_company i::after{ background-color: var(--content-brand-red);}
.delivery .pagehead .header-menu .menu_strength i::after{ background-color: var(--content-brand-red);}
.stock .pagehead .header-menu .menu_strength i::after{ background-color: var(--content-brand-red);}
.wide-range .pagehead .header-menu .menu_strength i::after{ background-color: var(--content-brand-red);}
.products .pagehead .header-menu .menu_products i::after{ background-color: var(--content-brand-red);}
.products-child .pagehead .header-menu .menu_products i::after{ background-color: var(--content-brand-red);}
.faq .pagehead .header-menu .menu_faq i::after{ background-color: var(--content-brand-red);}
.pagehead .header-menu .menu-box{ display: none;}
.pagehead .header-menu .parent{ width:fit-content; display: flex; align-items: center; justify-content: center; height: 8.0rem; padding:0 1.6rem}

.pagehead .header-menu li.dropmenu{ position: relative;}
.pagehead .header-menu li.dropmenu:hover .menu-box{ position: absolute; display: block; top:8.0rem; left:0; width:fit-content; background-color: rgba(255,255,255,0.75);}
.pagehead .header-menu li.dropmenu:hover .menu-box a{ display: block; white-space: nowrap; padding:1.6rem; border-bottom: 0.16rem dotted var(--content-brand-darkgreen);}
.pagehead .header-menu li.dropmenu:hover .menu-box a:hover{ background-color: var(--content-brand-darkgreen); color: #ffffff;}

.site-footer{ padding:7.2rem 0 2.4rem 0; background-color: var(--content-brand-green);}
.site-footer .inner{ max-width:1200px; width:95%; margin:0 auto; padding-bottom: 7.2rem;}
.site-footer .flex-wrap{ display: flex; justify-content: space-between;}
.site-footer .flex-wrap dl{ width:24.0rem; color: #ffffff;}
.site-footer .flex-wrap dt{ margin-bottom: 2.4rem;}
.site-footer .flex-wrap dt img{ width:90%}
.site-footer .flex-wrap dd{ font-weight: 500; font-size:1.6rem}
.site-footer .flex-wrap .footer-menu { width: calc(100% - 27.2rem)}
.site-footer .flex-wrap .footer-menu ul{ display: flex; justify-content: space-between;}
.site-footer .flex-wrap .footer-menu a:hover{ text-decoration: underline;}
.site-footer .flex-wrap .footer-menu .menu_top{ display: none;}
.site-footer .flex-wrap .footer-menu .parent{ color: #ffffff;font-weight: 600;}
.site-footer .flex-wrap .footer-menu .menu-box{ padding-top: 2.4rem; ;}
.site-footer .flex-wrap .footer-menu .menu-box a{ display: block; color: #ffffff; margin-bottom: 0.8rem;}
.copyright{ text-align: center; font-size:1.4rem; color: #ffffff;}
.top-link{ width:4.8rem; height: 4.8rem; border-radius: 0.8rem; overflow: hidden; border:0.16rem solid #ffffff; position: fixed; right:2.4rem; bottom:2.4rem; z-index: 200;}
.site-footer .tel a{color: #ffffff;}

.tel a{pointer-events: none;}


/*TOP*/
.topslider { position: relative; display: flex; justify-content: center; align-items: center;}
.topslider .inner{ display: block; max-width: 100%;}
.topslider .slide img{ height: 100vh; object-fit: cover;}
.topslider .catchcopy{ position: absolute; color: #ffffff; text-align: center; text-shadow: var(--content-brand-shadow);}
.topslider .catchcopy strong{ display: block; font-size: 2.0rem; font-weight: 300; letter-spacing: 0.24rem;}
.topslider .catchcopy i{ display: block; font-size:5.2rem; font-family: var(--content-brand-font-en); letter-spacing: 0.8rem;}
.topslider .catchcopy i:after{content: ''; width:52.8rem; height:12.7rem; display:block; background-image:url(images/after_catchcopy.webp); background-size:contain; background-position:center;  background-repeat: no-repeat; margin: -3.2rem auto 0 auto;}
.topslider .scroll-icon{ position: absolute; width:6.0rem; bottom:2.4rem}
.top_about{ padding:7.2rem 0}
.top_about .inner{ width:95%; max-width:1200px; margin:0 auto}
.top_about .inner .flex-wrap{ display: flex; justify-content: space-between; align-items: flex-end;}
.top_about .inner figure{ width:54.333%}
.top_about .inner .text{ width:40.333%}
.top_about .inner .text .std{ text-align: left;}
.top_about .inner p{ line-height: 1.8; margin-bottom: 2.4rem;}
.top_promise{ padding: 7.2rem 0; background-color: var(--content-brand-lightgreen);}
.top_promise .std+p strong{ text-align: center;}
.top_promise .inner{ max-width:1200px; width:95%; margin:0 auto;}
.top_promise ul{ display: flex; justify-content: space-between;}
.top_promise li{ width:18.5%}
.top_promise li strong{ display: block; text-align: center; font-size: 2.4rem; color: var(--content-brand-green); font-weight: 600; margin-bottom: 1.2rem;}
.top_promise li figure{ position: relative;}
.top_promise li figcaption{ width:100%; height:100%; position: absolute; display: flex; justify-content: center; align-items: center;; background-color: rgba(13, 76, 80, .85); top:0; left:0; color: #ffffff; text-align: center; font-size:1.6rem; opacity: 0; transition: 0.5s all;}
.top_promise li:hover figcaption{ opacity: 1;}
.top_products{ padding: 7.2rem 0 25.2rem 0; background-image: url(images/after_products.webp); background-position: bottom; background-repeat: no-repeat; background-size: contain;}
.top_products .inner{ max-width:1200px; width:95%; margin:0 auto;}
.top_products .std+p strong{ text-align: center;}
.top_products .std+p { width:90%; max-width:1000px; margin: 0 auto 2.4rem auto; line-height: 1.8;}
.top_products .std+p+.btn { margin: 0 auto;}
.top_products dl{ display: flex; justify-content: space-between; flex-wrap: wrap;}
.top_products dt{ font-size:2.0rem; text-align: center; width:100%; padding-top: 7.2rem;}
.top_products dt strong{ font-weight: 600; color: var(--content-brand-green); width: fit-content; display: block; margin: 0 auto; border-bottom: 0.24rem solid var(--content-brand-green); margin-bottom: 2.4rem;}
.top_products dd{ width:50%; position: relative;}
.top_products dd a{ display: block; overflow: hidden;}
.top_products dd a:hover img{ transform: scale(1.1);}
.top_products dd h3{ font-size:3.2rem; font-weight: 600; color: #ffffff;}
.top_products .position_lb{ position: absolute; left:1.6rem; bottom:1.6rem}
.top_products .position_rb{ position: absolute; right:1.6rem; bottom:1.6rem}
.top_products .position_lt{ position: absolute; left:1.6rem; top:1.6rem}
.top_strength { padding:7.2rem 0 0 0 ; background-color: var(--content-brand-lightgreen);}
.top_strength .std+p { max-width:1000px; margin:0 auto 7.2rem auto; line-height: 1.8;}
.top_strength .std+p strong{ text-align: center;}
.top_strength ul{ display: flex; justify-content: space-between; flex-wrap: wrap;}
.top_strength li{ width:calc(100% / 3);}
.top_strength li .text{ width:100%; height: 80%; position: absolute; z-index: 2; display: flex; justify-content: space-between; align-items: center; flex-direction: column;}
.top_strength li h3{ color: #ffffff;text-align: center; font-size: 2.6rem; font-weight: 500; ;}
.top_strength li h3 i{ display: block; width:fit-content; font-size:4.0rem; font-family: var(--content-brand-font-en); border-bottom: 0.16rem solid #ffffff; margin: 0 auto; margin-bottom: 2.4rem; font-weight: 400;}
.top_strength li a{ display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden;}
.top_strength li:hover img{ transform: scale(1.1); }
.top_strength li.wide{ width:100%; background-color: var(--content-brand-green); padding:3.2rem 0; display: flex; align-items: center; justify-content: center; position: relative;}
.top_strength li.wide h3{ display: flex; text-align: left; align-items: center;}
.top_strength li.wide h3 small{ font-size:1.6rem; display: block; font-weight: 300;}
.top_strength li.wide h3 .wrap{ margin-left: 1.6rem;}
.top_contact{ padding: 7.2rem 0}
.top_contact .inner{ max-width:1200px; width:95%; margin:0 auto;}
.top_contact .std+p { text-align: center; margin-bottom: 2.4rem;}
.top_contact ul{ text-align: center; margin-bottom: 2.4rem;}
.top_contact li{ color: var(--content-brand-green); font-weight: 600; font-size:2.6rem}
.top_contact li a{ color: var(--content-brand-green); font-weight: 600;}
.top_contact .btn{ margin:0 auto}

/*固定ページ*/
.page-header .page-eyecatch{ position: relative; display: flex; justify-content: center; align-items:center;overflow: hidden; overflow: hidden;}
.page-header .page-eyecatch img{ height: auto; min-height:32.0rem; object-fit: cover; animation: zoom-out 1.5s 0.1s ease-out forwards; transform: scale(120%);}
.page-header .page-eyecatch figcaption{ position: absolute; color: #ffffff; text-align: center;}
.page-header .page-eyecatch figcaption i{ display: block; font-size:4.0rem; font-weight: 700; line-height: 1.5; font-family: var(--content-brand-font-en);}
.page-header .page-eyecatch figcaption strong{ display: block; font-size:2.0rem; font-weight: 300; line-height: 1; letter-spacing: 0.8rem; transform: translateX(0.4rem);}
.company_profile{ padding:7.2rem 0}
.company_profile .inner{ width:90%; margin:0 auto;}
.company_profile table{ max-width: 700px; width:100%; margin:0 auto;}
.company_profile th{ padding: 1.6rem;border:1px solid #e0e0e0; color: var(--content-brand-green); background-color: var(--content-brand-lightgreen);}
.company_profile td{ padding: 1.6rem;border:1px solid #e0e0e0}
.company_profile .business_list li{ display: flex; margin-bottom: 0.8rem;}
.company_profile .business_list li i{ width:9.0rem; font-weight: 600; display: block;}
.company_history{ padding: 7.2rem 0 0 0; }
.company_history .std2 i{ color: #ffffff; opacity: 1;}
.company_history .inner{ width:90%; margin:0 auto; padding-bottom: 7.2rem;}
.company_history table{ max-width: 700px; width:100%; margin:0 auto; position: relative;}
.company_history table:before{ content: ''; width:1px ; height:95%; display: block; background-color: #000000;; position: absolute; left:2.4rem; top:2.4rem}
.company_history th{ padding: 1.6rem ; }
.company_history th::before{ content: '●'; color: var(--content-brand-red); display: inline-block; position: relative; z-index: 2; margin-right: 1.6rem;}
.company_history td{ padding: 1.6rem;}
.company_access{ padding:7.2rem 0}
.company_access .inner{ max-width:1000px; width:90%; margin:0 auto;}
.company_access iframe{ width:100%; display: block; height: 37.5rem; margin-bottom: 2.4rem}
.company_access dl{ display: flex; justify-content: space-between; flex-wrap: wrap; max-width:700px; margin: 0 auto; }
.company_access dt{ width:40%; font-size: 2.4rem; font-weight: 600; margin-bottom: 2.4rem;}
.company_access dt::before{ content: '●'; color: var(--content-brand-green);}
.company_access dd{ width:55%; margin-bottom: 2.4rem; line-height: 1.8;}
.delivery-location{ padding:7.2rem 0 14.4rem 0; background-image: url(images/bg_delivery_area.webp); background-size: cover; background-position: bottom;;}
.delivery-location .inner{ padding-top:7.2rem;width:90%; max-width:1000px; margin:0 auto;}
.delivery-location .inner p{ line-height: 1.8; margin-bottom: 7.2rem;}
.delivery-location .inner figure{ width:90%; max-width: 760px; margin:0 auto;}
.delivery-speed{ padding:7.2rem 0}
.delivery-speed .inner{ padding-top:7.2rem;width:90%; max-width:1000px; margin:0 auto;}
.delivery-speed .std4+p{ line-height: 1.8;}
.delivery-driver{ padding:7.2rem 0}
.delivery-driver .inner{ padding-top:7.2rem;width:90%; max-width:1000px; margin:0 auto;}
.delivery-driver p{ line-height: 1.8;}
.delivery-driver .flex-wrap{ display: flex; justify-content: space-between;}
.delivery-driver .flex-wrap dl{ min-width:280px; width:28%; margin-left: 2.4rem; padding: 1.6rem 3.2rem; border: 2px solid var(--content-brand-red); background-color: #fdf6f6; border-radius:1.6rem;}
.delivery-driver .flex-wrap dt{ font-weight: 600;transform: translateX(-1.6rem);}
.delivery-driver .flex-wrap dt:before{ content: '◆'; color: var(--content-brand-red);}
.delivery-driver .flex-wrap dd{ display: flex; align-items: center; justify-content: space-between;}
.stock-inventory { padding:7.2rem 0}
.stock-inventory .inner{ padding-top:7.2rem;width:90%; max-width:1000px; margin:0 auto;}
.stock-inventory .inner p{ line-height: 1.8;}
.stock-warehouse { padding:7.2rem 0 0 0}
.stock-warehouse .inner{ width:80%; max-width: 1000px; margin:0 auto; padding-bottom: 7.2rem;}
.stock-warehouse .flex-wrap{ display: flex; justify-content: space-between; padding-top: 7.2rem;}
.stock-warehouse dl{ width:47.5%; border:2px solid var(--content-brand-green); border-radius:1.6rem; background-color: #ffffff; padding:3.2rem;}
.stock-warehouse dt{ font-size:2.6rem; font-weight: 600; padding-bottom:0.8rem; border-bottom: 1px solid var(--content-brand-green); margin-bottom: 1.6rem;}
.stock-warehouse dt img{ margin-bottom: 1.6rem;}
.stock-warehouse ul li{display: flex; align-items: center;}
.stock-warehouse ul i{ width:7rem; min-width:9rem; border-right: 1px solid var(--content-brand-green); padding:0.8rem; margin-right: 1.6rem;}
.widerange-knowledge{ padding:7.2rem 0}
.widerange-knowledge .inner{ width:90%; max-width:1000px; margin:0 auto;}
.widerange-knowledge .flex-wrap{ display: flex; justify-content: space-between;}
.widerange-knowledge .inner{ padding-top:7.2rem;width:90%; max-width:1000px; margin:0 auto;}
.widerange-knowledge .inner p{ line-height: 1.8;}
.widerange-knowledge .text-set p{ margin-bottom: 2.4rem;}
.widerange-knowledge .text-set .btn{ width:32.0rem; margin: 0 auto;}
.widerange-brand{ padding:7.2rem 0}
.widerange-brand .block{ width:95%; max-width:1200px; margin:0 auto; background-color: #ffffff; border-radius:1.6rem; padding:4.0rem 0}
.widerange-brand h3{ margin-bottom: 3.6rem;}
.widerange-brand .box{ width:90%; max-width:1000px; margin:0 auto 7.2rem auto;}
.widerange-brand .brand-list{ border:2px solid var(--content-brand-red); padding:2.4rem; display: none; border-top: none;}
.widerange-brand .box:has(input:checked) .brand-list{ display: flex;}
.widerange-brand h4 { border-bottom:2px solid var(--content-brand-red)}
.widerange-brand h4 i{ font-size:2.6rem; padding:0.8rem 3.2rem 0.8rem 1.6rem; background-color: var(--content-brand-red); color: #ffffff; font-weight: 600; width:fit-content; clip-path: polygon(0 0,calc(100% - 2.4rem) 0,100% 100%,0 100%);}
.widerange-brand h4 label{ display: flex; justify-content: space-between; align-items: center;}
.widerange-brand h4 label:after{content: ''; width:3.2rem; height:3.2rem; display:block; background-image:url(images/icon_plus_red.webp); background-size:contain; background-position:center; background-repeat: no-repeat; margin-left: 1.6rem;}
.widerange-brand input:checked+h4 label:after{content: ''; width:3.2rem; height:3.2rem; display:block; background-image:url(images/icon_minus_red.webp); background-size:contain; background-position:center; background-repeat: no-repeat; margin-left: 1.6rem;}
.widerange-brand input{ display: none;}
.widerange-brand dt{ font-size:2.6rem; font-weight: 600; color: var(--content-brand-red);}
.widerange-brand .extra-link ul{ display: flex; flex-wrap: wrap; max-width:1000px; margin: 0 auto}
.widerange-brand .extra-link li{ width:20%; margin-bottom: 2.4rem;}
.widerange-brand .extra-link li img{ width:90%; margin: 0 auto; object-fit: contain;}
.products_introduction{ padding:7.2rem 0}
.products_introduction p{ width:90%; max-width:1000px; margin: 0 auto; line-height: 1.8;}
.products_list { padding-bottom: 7.2rem;}
.products_list .box{ padding:6.4rem 0}
.products_list .flex-wrap{  width:90%; max-width:1000px; margin:0 auto; display: flex; justify-content: space-between;}
.products_list .flex-wrap figure{width:45%;}
.products_list .flex-wrap dl{ width:50%}
.products_list .flex-wrap dt{ border-left: 1.6rem solid var(--content-brand-green); padding-left: 0.8rem; font-size:3.2rem; font-weight: 600; margin-bottom: 2.4rem;}
.products_list .flex-wrap dt i{ display: block; color: var(--content-brand-green); font-size:1.6rem;}
.products_list .flex-wrap dd{ line-height: 1.8;}
.products_list .flex-wrap .btn{ margin: 2.4rem 0 0 auto; line-height: 1;}
.products_list .box small{ display: block; padding: 3.2rem 0; width:90%; max-width:1000px; margin:0 auto;}
[class$="_introduction"]{ padding:7.2rem 0}
[class$="_introduction"] p{ width:90%; max-width:1000px; margin: 0 auto; line-height: 1.8;}
[class$="_introduction"] p strong{  font-size:3.2rem}
.products_items { padding: 7.2rem 0;}
.products_items .inner{ width:90%; max-width:1000px; margin:0 auto; }
.products_items .flex_wrap{ display:flex; justify-content: space-between;}
.products_items .text{ width:61.5%;}
.products_items .flex_wrap dl:not(:last-child){ margin-bottom: 3.2rem;}
.products_items .flex_wrap dt{ font-size:2.0rem; font-weight:600; color: var(--content-brand-orange); padding:0.8rem 1.6rem; background-color: var(--content-brand-lightorange); display: flex; align-items: center;}
.products_items .flex_wrap dt:before{ content: ''; width:2.0rem; height:2.0rem; display:block; background-image:url(images/icon_product_item.webp); background-size:contain; background-position:center;  background-repeat: no-repeat; margin-right: 0.8rem;}
.products_items .flex_wrap dd{ padding:1.6rem ; font-size:1.8rem; line-height: 1.8;}
.products_items .images{ width:32%;}
.products_items .images img{ margin-bottom: 1.6rem;}
.products_items .flex_wrap .images figcaption{ font-size:1.6rem; text-align: center; }
.plastering_list .images{ display: flex; flex-direction: column; justify-content: space-between;}
.products_items .box { margin-bottom: 7.2rem; display: flex; justify-content: space-between;}
.products_items .box p strong{ display: block; font-weight:600; margin-bottom: 0.8rem; color: var(--content-brand-green); font-size:1.8rem}
.products_items .box p { margin-bottom: 2.4rem;}
.products_items .box dl{ background-color: var(--content-brand-lightorange); border-radius: 1.6rem; padding:1.6rem}
.products_items .box dt{ font-weight:600; color: var(--content-brand-orange);}
.products_items .box dd{ padding:0 1.6rem ;}
.products_items .box dd .col{ column-count: 2;}
.products_items .box dd .col3{ column-count: 3; }
.products_items .box dd .nado{ text-align: right;}
.products_items .box dd .flat{ display: flex;}
.products_items .box dd .flat li{ margin-right: 2.4rem;}
.land_introduction{ background-color: var(--content-brand-lightgreen);}
.land_introduction .std2 i{ color: #ffffff; opacity: 1;}
.products_items.bg_green .box dl{ background-color: #ffffff;}
.insulation_list h3{ position: relative}
.insulation_list h3 .miraform{ width:32.0rem; height: auto; position: absolute; top:0; right:0}
.insulation_list h3 .insulpak{ width:25.0rem; height: auto; position: absolute; top:0; right:0}
.products_items .wide .text{ width:100%;}
.products_items .wide .images{ width:100%; display: flex; justify-content: space-between;}
.products_items .wide .images figure{ width:32%}
.products_items .text-img{ display: flex; justify-content: space-between;}
.products_items .text-img li{ white-space: nowrap;}
.products_items .text-img figure{ max-width:54rem;}
.products_items .text-img figure{ max-width:54rem;}

.small-box{ background-color: var(--content-brand-lightorange); border-radius: 1.6rem; margin: 0 auto 2.4rem auto;}
.small-box h4{ font-size:2.0rem; font-weight: 600; color: var(--content-brand-orange); border-radius:1.6rem 1.6rem 0 0; padding:2.4rem}
.products_items .wide .small-box  .images{ width:calc(100% - 4.8rem); margin:0 auto}
.products_items .caption{ padding:0 2.4rem 2.4rem 2.4rem;}

.faq_list{ padding:7.2rem 0}
.faq_list .std2 i{ color: #ffffff; opacity: 1;}
.faq_list ul {max-width:1130px; margin: 0 auto; width:90%}
.faq_list li{ background-color: #ffffff; margin-bottom: 2.4rem; box-shadow: 0.5rem 0.5rem 0.5rem rgba(0, 0, 0, .25);}
.faq_list li summary{ padding: 2.4rem; color: var(--content-brand-green); font-size:1.8rem; font-weight: 600; display: flex; align-items: center; position: relative; cursor: pointer;}
.faq_list li summary:hover{ background-color: var(--content-brand-lightorange);}
.faq_list li summary:before{ content: 'Q'; display: block; color: var(--content-brand-green); margin-right: 1.6rem; font-size:2.6rem;}
.faq_list li details summary:after{content: ''; width:3.2rem; height:3.2rem; display:block; background-image:url(images/icon_plus.webp); background-size:contain; background-position:center; background-repeat: no-repeat; margin-left: 1.6rem; position: absolute; right:2.4rem; top:2.4rem}
.faq_list li details[open] summary:after{content: ''; width:3.2rem; height:3.2rem; display:block; background-image:url(images/icon_minus.webp); background-size:contain; background-position:center; background-repeat: no-repeat; margin-left: 1.6rem; transition: 0.5s all;}
.faq_list li p{ padding:2.4rem 0; width:calc(100% - 4.8rem); margin:0 auto; display: flex;}
.faq_list li details:not([open]) p{ transition: 0.5s all; opacity: 0;}
.faq_list li details[open] p{ opacity: 1;}
.faq_list li p:before{ content: 'A'; display: block; color: var(--content-brand-red); margin-right: 1.6rem; font-size:2.6rem; font-weight: 600;}
.faq_list li hr{ width:calc(100% - 12rem); margin:0 auto; background-color: var(--content-brand-lightgreen); border: none; height:1px}
.faq_list ul:after{ content: ''; width:110.0rem; height:10.0rem; display:block; background-image:url(images/after_qa.webp); background-size:contain; background-position:center;  background-repeat: no-repeat; margin-top: 7.2rem;}
.contact_tel-fax{ padding:7.2rem 0}
.contact_tel-fax .inner{ width:90%; max-width:1000px; margin:0 auto;}
.contact_tel-fax .std2+p{ text-align: center; font-size:2.6rem; font-weight: 400; margin-bottom: 7.2rem;}
.contact_tel-fax .tel-fax{ width:90%; max-width: 700px; margin:0 auto; background-color: var(--content-brand-red); padding: 2.4rem 0;}
.contact_tel-fax li{ font-size:2.8rem; font-weight: 600; color: #ffffff; text-align: center; padding:1.6rem 0; display: flex; justify-content: center; align-items: center; letter-spacing: 0.25rem;}
.contact_tel-fax li.tel:before{ content: ''; width:3.2rem; height:3.2rem; display:block; background-image:url(images/icon_tel.webp); background-size:contain; background-position:center;  background-repeat: no-repeat; margin-right: 1.6rem;}
.contact_tel-fax li.tel a{ color: #ffffff;}
.contact_tel-fax li.fax:before{ content: ''; width:3.2rem; height:3.2rem; display:block; background-image:url(images/icon_fax.webp); background-size:contain; background-position:center;  background-repeat: no-repeat; margin-right: 1.6rem;}
.contact_tel-fax hr{ width:90%; max-width: 550px; margin:0 auto; border: none; background-color: #ffffff; height:1px; display: block;}
.contact_form { padding:0 0 7.2rem 0}
.contact_form .inner{ padding:7.2rem 0; max-width:1200px; border-radius:2.4rem; margin: 0 auto; width:95%}
.contact_form .inner .std3v{ margin-bottom:2.4rem}
.contact_form .inner p{ text-align: center; margin-bottom: 2.4rem;}
.contact_form .inner p .red{ color: var(--content-brand-red);}
.wpcf7-form th,.wpcf7-form td{ display: block; width:100%}






/*サービス*/

/*フォーム*/

div.wpcf7{ width:calc(95% - 10rem); max-width:980px; margin:0 auto;}
.wpcf7-form{ width:100%; margin: auto;}
.wpcf7-form table{ max-width:700px; width:90%; margin:0 auto;}
.wpcf7-form th p,.wpcf7-form td p{margin-bottom:0!important; text-align: left!important;}
.wpcf7-form th i{ color: var(--content-brand-red);}
.wpcf7-form th{background-color: var(--content-brand-middlegreen); color: var(--content-brand-green); border:1px solid var(--content-brand-lightgreen); padding:1.6rem; vertical-align: top;}
.wpcf7-form td{ background-color: #ffffff; border:1px solid var(--content-brand-lightgreen); padding:1.6rem}
.wpcf7-form input[type="text"],.wpcf7-form input[type="email"],.wpcf7-form textarea{ border: none; border-radius: 0.4rem; padding:0.8rem; background-color: #efefef; width:100%}
.wpcf7-form table+p{ display: flex; justify-content: center; align-items: center; flex-direction: column; padding:2.4rem 0}
.wpcf7-form input[type="submit"]{ font-size:1.6rem; color: #ffffff; padding:0.8rem 1.6rem; border: none; background-color: var(--content-brand-red); border-radius: 2.4rem; cursor: pointer;}
.wpcf7-form input[type="submit"]:hover{ background-color: var(--content-brand-darkgreen);}


/*投稿ページ*/




/*投稿一覧ページ*/


/*==============================================
●PC版非表示
===============================================*/
.sp{ display:none!important;}
.tablet{ display:none!important;}






/*===============================================
●レスポンシブ  画面の横幅が1080pxまで
===============================================*/
@media screen and (max-width:1080px){
html{font-size:1vw}
.tablet{ display:block!important;}
.pagehead .header-menu ul{ font-size:1.4rem}
}


/*===============================================
●レスポンシブ  画面の横幅が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; font-size:1.8rem}
img{
max-width: 100%;
height: auto;
width /***/:auto;
}
.pc{ display:none!important;}
.sp{ display:block!important;}
.bc{ display: none;}
.tel a{pointer-events: auto;}

.pagehead{ position: relative;}
.pagehead .branding{ width:50%; padding:1.6rem}
.pagehead .branding img{ max-width: 100%;}
.topslider .slide img{ height: calc(100vh - 8.0rem);}
.topslider .catchcopy i:after{ width:75%}
.top_about .inner { width:85%}
.top_about .inner .flex-wrap{ display: block;}
.top_about .inner figure{ width:100%; margin-bottom: 2.4rem;}
.top_about .inner .text{ width:100%;}
.top_about .inner .text .std{ text-align: center;}
.top_about .inner .text .std+p strong{ text-align: center;}
.top_about .inner .text .btn{ margin: 0 auto;}
.top_promise ul{ display: block;}
.top_promise li{ display: flex; align-items: center; width:100%; justify-content: space-between; margin-bottom: 1.6rem;}
.top_promise li figure{ width:40%}
.top_promise li strong{ text-align: left; display: flex; width:60%; padding: 1.6rem; border-bottom: 1px solid var(--content-brand-green);}
.top_promise li:nth-child(odd) { flex-direction: row-reverse;}
.top_promise li:nth-child(even) strong{ justify-content: flex-end;}
.top_products dl{ width:90%; margin: 0 auto;}
.top_products dd{ width:100%; margin-bottom: 1.6rem;}
.top_strength .std+p{ width:81%}
.top_strength li{ width:100%; border-bottom: 0.16rem solid #ffffff;}
.top_strength li img{ aspect-ratio: 3 / 2; object-fit: cover; width:100%; height: auto;}
.top_strength li.wide h3{ flex-direction: column; }
.top_strength li.wide h3 .wrap{ margin: 0 auto; padding: 1.6rem 2.4rem;}
.top_contact li{ font-size:3.2rem}
.site-footer .flex-wrap dl{ width:66%; margin: 0 auto;}
.site-footer .flex-wrap dt img{ width:100%}
.site-footer{padding-top:4.8rem}
.site-footer .inner{padding-bottom: 4.8rem;}

body:not(.home){ padding-top: 0;}


.std2 i{ font-size: 8.0rem;line-height: 1;}
.company_profile th{ white-space: nowrap;}
.company_profile .business_list li{ display: block; }
.company_history th{ white-space: nowrap;}
.company_access dl{ display: block;}
.company_access dt{ width:100%; margin-bottom:0.8rem;}
.company_access dd{ width:100%}
.std3{ display: flex;flex-direction: column; align-items: center;}
.std3 img{ width:13.0rem; height:13.0rem; object-fit: contain; margin-right: 0;}
.std3 strong{ font-size:3.2rem; font-weight:700; display: block; margin: 0 auto; }
.std3 small{ display: block; font-weight: 400; font-size: 2.6rem; margin: 0 auto; text-align: center;}
.delivery-location .inner figure{ width:100%}
.delivery-driver .flex-wrap{ display: block;}
.delivery-driver .flex-wrap dl{ margin:2.4rem auto}
.stock-warehouse .flex-wrap{ display: block;}
.stock-warehouse dl{ width:100%; margin:0 auto 2.4rem auto}
.widerange-brand .block{ width:90%}
.widerange-brand .extra-link li{ width:50%}
.products_items .flex_wrap{ display: block;}
.products_items .text{ width:100%; margin-bottom: 2.4rem;}
.products_items .images{ width:100%; display: flex; flex-wrap: wrap; flex-direction: row;}
.products_items .images figure{ width:48%; margin-bottom: 2.4rem;}
.products_items .box{ display: block;}

.products_items .box dd .col3,
.products_items .box dd .col{ column-count:unset}
.products_items .box dd .flat{ display: block;}
.products_items .wide .images{ flex-wrap: wrap; justify-content: space-around;}
.products_items .wide .images figure{ width:45%; margin-bottom: 0;}
.insulation_list h3 .miraform{ position: unset; width:25rem; padding-top: 1.6rem;}
.products_items .text-img{ display: block;}
.products_items .text-img figure{ padding: 1.6rem;}
.insulation_list h3 .insulpak{ position: unset; width:25rem; padding-top: 1.6rem;}
.products_items .images.one-image figure{ margin: 0 auto;}
div.wpcf7{ width:100%}

.products_list .flex-wrap{ display: block;}
.products_list .flex-wrap figure{margin-bottom: 1.6rem; width: 100%;}
.products_list .flex-wrap dl{ width: 100%;}
.products_list .flex-wrap .btn{ margin: 2.4rem auto;}

.globalMenuSp { overflow: scroll; height: 100vh; padding:3.2rem 0}
.globalMenuSp .branding{ width:70%; margin:0 auto; padding:2.4rem}
.sp-menu ul{ padding:1.5rem 0; width:80%; margin:0 auto}
.sp-menu li{ font-size:2.4rem; border-bottom: 0.16rem dotted var(--content-brand-darkgreen); text-align: left; padding:1.6rem}
.sp-menu li .menu-box a{ display: block; font-size:2.0rem; padding-left: 1.6rem;}
.sp-menu li .menu-box a::before{ content: '・'; color: var(--content-brand-green); margin-right: 0.6rem;}
.sp-menu li a.parent{ display: block;}
.globalMenuSp .data{ font-size:1.8rem; font-weight: 500;}
.globalMenuSp .tel{ font-size:3.2rem; font-weight: 600; color: var(--content-brand-green);}

}