/**
 * トップページ固有スタイル
 * 移行元: SWELL 記事ごとのカスタムCSS (固定ページ「トップ」)
 */

.l-content {
margin: 0 auto;
}
main .entry-content .mincho,
.post_content .mincho {
font-family: "Zen Old Mincho", serif;
line-height: 2em;
font-weight: 900;
font-size: 18px !important;
}
@media screen and (min-width: 960px){
.post_content .mincho.has-small-font-size{
font-size: 32px !important;
}
}
/* h2 */
.post_content h2{
position: relative;
width: fit-content;
margin: 4em auto 2em;
font-size: 24px !important;
}
.post_content h2::before{
position: absolute;
font-size: 40px;
color: #CFE9F5;
font-weight: bold;
top: auto;
bottom: 0;
left: 50%;
transform: translateX(-50%);
letter-spacing: 1.04;
z-index: -1;
height: fit-content;
width: fit-content;
}
@media screen and (min-width: 960px){
.post_content h2{
font-size: 32px !important;
}
.post_content h2::before{
font-size: 96px;
bottom: -16px;
}
}
.post_content .scene_h2::before{
content: "SCENE" !important;
}
.post_content .h2_contact::before{
content: "CONTACT" !important;
letter-spacing: 0px;
}
.post_content .h2_example::before{
content: "CASES" !important;
letter-spacing: 0px;
}
.post_content .h2_strength::before{
content: "STRENGTH" !important;
font-size: 28px;
bottom: 60px;
letter-spacing: 0px;
}
@media screen and (max-width: 959px){
.post_content .h2_strength span{
font-size:40px !important;
}
.post_content .h2_strength span:first-child, .post_content .h2_strength span:last-child{
font-size:20px !important;
}
.post_content .h2_strength::before{
font-size: 16px;
bottom: 32px;
}
}
.post_content .h2_service::before{
content: "SERVICE" !important;
}
.post_content .h2_voice::before{
content: "VOICE" !important;
}
.post_content .h2_flow::before{
content: "FLOW" !important;
}
.post_content .h2_faq::before{
content: "FAQ" !important;
letter-spacing: 0px;
}
/* ヘッダー背景 */
.l-header{
	background-color: #EAF1F5;
}
/* スライダー全体 */
.slider-wrapper {
  display: flex; /* スライドのグループを横並び */
  /*overflow: hidden;*/ /* はみ出たスライドを隠す */
  margin-bottom: 1em;
}

.slider2, .slider3 {
  animation: scroll-right 50s infinite linear .5s both;
  display: flex; /* スライド3枚を横並び */
}
/*スライドの・を消す*/
.slider2 li, .slider3 li{
  list-style:none;
  margin-left:8px;
}
/* スライド */
.slide2, .slide3 {
  display: grid;
  place-items: center;
  min-width: 80px;
}
/* スライドの画像 */
.slide2 img, .slide3 img {
  display: block;
  height: 40px;
  width: auto;
  padding-left: 40px;
  object-fit: contain;
  max-width: none;
}
@media screen and (min-width: 960px){
.slide2 img, .slide3 img {
  width: 200px;
  height: 80px;
}
}
/* CSSアニメーション */
@keyframes scroll-right {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0%);
  }
}

/* 上のスライダー */
div.left_loop ul {
  width: fit-content;
  display: flex;
  flex-wrap: nowrap;
  will-change: transform;
  transform: translateZ(0);
}

div.left_loop ul {
  height: 176px;
  animation: left-scroll 50s linear infinite;
}
@media screen and (min-width: 960px){
  div.left_loop ul {
    height: 325px;
  }
}

div.left_loop ul li {
  flex: 0 0 256px;
  height: 182px;
  background-color: #ffffff;
  box-shadow: 0px 4px 4px 0px #00000040;
  margin-left: 16px;
  list-style: none;
}

@media screen and (min-width: 960px){
  div.left_loop ul li {
  flex: 0 0 464px;
  height: 320px;
  margin-left: 32px;
}
}

div.left_loop ul li > img {
  width: 100%;
  height: 144px;
  object-fit: cover;
}

@media screen and (min-width: 960px){
  div.left_loop ul li > img {
     height: 260px;
  }
}

div.left_loop ul li p {
  height: 32px;
  font-size: 14px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center; 
}
@media screen and (min-width: 960px){
div.left_loop ul li p {
  height: 56px;
  font-size: 18px;
}
}

div.left_loop ul li p img {
  height: 32px;
  max-width: 150px;
  object-fit: contain;
}
@media screen and (min-width: 960px){
div.left_loop ul li p img {
  height: 52px;
  max-width: 180px;
}
}

/* left-scroll アニメーションが定義されていない場合は追加 */
@keyframes left-scroll {
  0% {
    transform: translateX(-25%);
  }
  100% {
    transform: translateX(-75%);
  }
}

/* 活用シーン */
p.scene_place{
margin-left: 24px;
position: relative;
}

.scene_toilet{
width: 14vw;
}

.scene_columns .swell-block-column{
margin-bottom: 32px;
}

.scene_columns .swell-block-columns__inner>div:nth-child(2), .scene_columns .swell-block-columns__inner>div:nth-child(4){
transform: translateY(60px);
}
.scene_columns .swell-block-columns__inner .case_last_div .swell-block-columns__inner>div:first-child{
display: none;
}

@media screen and (min-width: 960px){
.scene_columns .swell-block-columns__inner>div:nth-child(2), .scene_columns .swell-block-columns__inner>div:nth-child(4){
transform: translateY(126px);
}
.scene_columns .swell-block-columns__inner .case_last_div{
transform: translateY(35px);
}

.scene_columns .case_last_div .swell-block-columns__inner>div:nth-child(2){
transform: translateY(80px);
}

.case_last_div figure {
width: 100%;
}

.scene_columns .swell-block-columns__inner .case_last_div .swell-block-columns__inner>div:first-child{
display: flex;
}
}

@media screen and (max-width: 959px){
.case_last_div .swell-block-column{
width: 100%;
text-align: center;
transform: translateY(70px) !important;
}
.case_last_div .swell-block-column figure{
margin: 0 auto;
min-width: 137px;
}
}

/* 活用 */
.kashuyo{
border-radius: 20px 20px 0 0;
}
.kashuyo .h2_katsuyo::before{
  content: "" !important;
  width: 0;
  height: 0;
  border-style: solid;
  border-right: 12px solid transparent;
  border-left: 12px solid transparent;
  border-bottom: 60px solid #126cb1;
  border-top: 0;
  transform: rotate(160deg);
  bottom: 0;
  left: -30px !important;
}

.kashuyo .h2_katsuyo::after{
  position: absolute;
  content: "" !important;
  width: 0;
  height: 0;
  border-style: solid;
  border-right: 12px solid transparent;
  border-left: 12px solid transparent;
  border-bottom: 60px solid #126cb1;
  border-top: 0;
  transform: rotate(200deg);
  bottom: 0;
  right: -30px;
}

.post_content .kashuyo h3{
font-size: 24px;
}

.radius{
  border-radius: 30px!important;
}

@media screen and (min-width: 960px){
.h2_katsuyo{
  font-size: 36px !important;
}

.kashuyo .h2_katsuyo::before{
  border-right: 18px solid transparent;
  border-left: 18px solid transparent;
  border-bottom: 90px solid #126cb1;
  left: -50px !important;
}

.kashuyo .h2_katsuyo::after{
  border-right: 18px solid transparent;
  border-left: 18px solid transparent;
  border-bottom: 90px solid #126cb1;
  right: -50px;
}
}

@media screen and (max-width: 959px){
.post_content .kashuyo h3{
margin-bottom: 18px;
}
.disaster_img{
order: -1;
}
}

/*活用セクション画像ポップアップ 2026年4月7日追記*/
/* ギャラリー全体のレイアウト */
.c-custom-gallery {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

/* メイン画像のエリア */
.c-custom-gallery__main {
    position: relative;
    aspect-ratio: 16 / 9;
    background: #f5f5f5;
    overflow: hidden;
    border-radius: 4px;
}

.c-custom-gallery__main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 左右の矢印ボタン */
.c-custom-gallery__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,0.7);
    color: #333;
    border: none;
    padding: 10px 15px;
    cursor: pointer;
    font-size: 18px;
    transition: 0.3s;
}
.c-custom-gallery__nav:hover { background: #fff; }
.c-custom-gallery__nav.prev { left: 10px; }
.c-custom-gallery__nav.next { right: 10px; }

/* 下のサムネイルエリア */
.c-custom-gallery__thumbs {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 5px;
}

.c-custom-gallery__thumbs img {
    width: calc(25% - 7.5px); /* 4枚並びのサイズ */
    aspect-ratio: 4 / 3;
    object-fit: cover;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.3s;
    border-radius: 4px;
}

.c-custom-gallery__thumbs img.is-active,
.c-custom-gallery__thumbs img:hover {
    opacity: 1;
    border: 2px solid #333;
}
/*ここまで*/

.swell-block-button .blue_ -size-s .is-style-btn_normal .btn_frame_anime .case_btn .radius{
  background-color:#116CB0;
  border-radius:30px;
}

/* エコノワトイレについて */
.swell-block-fullWide.has-bg-img.about_toilet{
background-size: contain !important;
border-radius: 50px;
}
.about_toilet{
position: relative;
}

.about_toilet p {
line-height: 2em;
}

.swell-block-fullWide.has-bg-img.about_toilet::before{
position: absolute;
content: "";
width: 100%;
height: 1000px;
background-image: linear-gradient(#ebf6fc, #ffffff);
top: 0;
left: 0;
z-index: -1;
}

@media screen and (max-width: 959px){
.about_toilet{
  background-image: url("https://ti-plus-hd.jp/econowa/wp-content/uploads/2025/11/Group-3019.png") !important;
  background-size: 100% !important;
  background-position: top center !important;
  margin-top: 230px !important;
}

.about_toilet .about_toilet_top{
  padding-top: 16px;
}
.about_toilet .wp-block-columns{
  position: reltive;
}
.about_toilet .wp-block-columns .about_toilet_movie{
    width: calc(100% - 20px);
    max-width: 400px;
    position: absolute;
    top: -250px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 20px;
    overflow: hidden;
}

.about_toilet h2 span{
font-size: 24px !important;
}

.about_toilet p span{
font-size: 16px !important;
}

.about_strong_text{
text-align: center;
}
}

/* 導入事例 */
.cases .swell-block-fullWide__inner{
padding-top: 40px;
}

.post_content .h2_example::before{
left: 50% !important;
transform: translateX(-50%);
width: fit-content;
}

.case_tag{
font-size: 0.9em;
color: #777777;
border: 1px solid #D9D9D9;
padding: 0.5em 1em;
width: fit-content;
}

.cases .wp-block-media-text{
border-radius: 25px;
padding: 16px;
}

.cases .wp-block-media-text .wp-block-media-text__content{
padding-left: 0 !important;
padding-right: 0 !important;
}

.cases .case_btn{
padding-top: 18px;
}

.cases .case_btn a {
font-size: 18px;
line-height: 18px;
border-radius: 30px;
padding: 12px 40px;
}

@media screen and (min-width: 960px){
.cases .wp-block-media-text .wp-block-media-text__content{
padding-left: 40px !important;
padding-right: 40px !important;
}
.cases .h2_example{
font-size: 36px !important;
}
.cases .case_btn a {
font-size: 28px;
line-height: 28px;
border-radius: 40px;
padding: 20px 90px;
}
}

/* strength */
.h2_strength span:nth-of-type(2){
color: #126CB1;
}

.strength h3{
position: relative;
}

.strength h3::before{
font-family: "Oswald", sans-serif;
position: absolute;
color: #CFE9F5;
font-size: 144px;
bottom: 5%;
left: -15px;
z-index: -1;
height: 144px;
background: none;
}
.strength .h3_strength01::before{
content: "01";
}
.strength .h3_strength02::before{
content: "02";
}
.strength .h3_strength03::before{
content: "03";
}
.strength .h3_strength04::before{
content: "04";
}
.strength .h3_strength05::before{
content: "05";
}
@media screen and (max-width: 959px){
.post_content .strength h3{
  padding-left: 2em;
  width: fit-content;
  margin: 0 auto;
  padding-bottom: 12px;
  line-height: 1.8em;
}
.strength h3::before{
font-size: 2em;
top: 0;
left: -4px;
width: fit-content;
height: fit-content;
}

.strength .u-mb-60{
margin-bottom: 30px !important;
}
}

.strength p {
line-height: 2em;
}

.strength02, .strength04{
position: relative;
box-sizing: border-box;
}
.strength02{
padding: 3em 0 1em;
}
.strength04{
padding: 1em 0 6em;
}
.strength02::before, .strength04::before{
position: absolute;
content:"";
background-color: #EBF6FC;
border-radius: 45px;
width: 100vw;
z-index: -1;
}
.strength02::before{
right: -100px;
height: calc(100% + 3em);
top: -3em;
}
.strength04::before{
left: -1em;
height: calc(100% + 1em);
top: -1em;
}

.strength04_text{
padding-left: 7.5em;
}
.stone{
position: absolute;
top: 212px;
left: 235px;
}
@media screen and (max-width: 959px){
.strength h3{
font-size: 20px;
}

.strength p{
font-size: 0.875em;
}

.strength02, .strength04{
padding: 1.25em 0 1em;
}
.strength02::before, .strength04::before{
height: 100%;
top: 0;
width: 100vw;
margin: 0 calc(50% - 50vw);
left: 0;
right: 0;
}

.strength04_text{
padding-left: 0;
}
.stone01{
width: 212px;
margin-left: 44px;
margin-bottom: 65px;
}
.stone{
top: 206px;
left: 184px;
width: 154px;
}
}

/* CTA */
.cta .cta_box{
border-radius: 12px;
padding: 28px 52px;
width: 360px;
max-width: 50%;
}

.cta .cta_box>*{
width: 100%;
text-align: left;
margin: 0 auto;
}

.cta .cta_box p {
line-height: 2em;
}

@media screen and (max-width: 959px){
.cta .is-style-section_ttl{
margin-bottom: 20px;
}
.cta p strong span{
font-size: 20px !important;
}

.cta .swell-block-fullWide__inner .wp-block-columns{
margin-bottom: 35px !important;
}
.cta .cta_box{
border-radius: 4px;
padding: 28px;
width: 100%;
max-width: 100%;
}
.cta .cta_box>*{
width: 100%;
text-align: center !important;
margin: 0 auto;
}

.cta .btn_frame_anime a {
width: 240px;
padding: 4px 12px;
line-height: 2em;
}

.cta .btn_frame_anime a span{
font-size: 14px;
}

.cta .btn_frame_anime a svg{
width: 11px;
}

}

/* 商品紹介 */
.service .swell-block-fullWide__inner > .wp-block-columns{
border-bottom: 1px solid #CFE9F5;
padding-bottom: 2.5em;
position: relative;
}

.service .swell-block-fullWide__inner > .wp-block-columns:last-child {
border-bottom: none;
}
.econowa_inside {
position: absolute;
top: 93px;
left: -100px;
}

@media screen and (min-width: 960px){
.service .l-article .h2_service {
font-size: 36px !important;
margin-top: 100px !important;
}
}

@media screen and (max-width: 959px){
.post_content .service h4.is-style-section_ttl {
font-size: 28px;
text-align: center;
margin-bottom: 20px;
}
.econowa_inside {
top: 113px;
left: auto;
right: 205px;
}
}

/* お客様の声 */
  .voice_wrapper.swell-block-fullWide{
    position: relative;
    overflow: visible;
  }
  .voice_wrapper.swell-block-fullWide::before{
    content: "";
    background-image: url("https://ti-plus-hd.jp/econowa/wp-content/uploads/2025/10/Vector-1.png");
    width: 100%;
    height: 100vw;
    position: absolute;
    background-position: 0% 0%;
    background-size: contain;
    background-repeat: no-repeat;
    top: -60px;
  }

.voice_wrapper .l-container{
padding-left: 0;
padding-right: 0;
}

@media screen and (min-width: 1800px){
.voice_wrapper.swell-block-fullWide::before{
top: -120px;
}
}

.voice-slide-content .voice_header .voice_header_right .voice-title{
text-align: left;
font-size: 1em;
margin: 0.5em 0 0;
color: #126CB1;
}

.voice_wrapper .voice-carousel-wrap .swiper-button-prev {
left: -50px;
}

.voice_wrapper .voice-carousel-wrap .swiper-button-next {
right: -50px;
}

@media screen and (max-width: 959px){
  .voice_wrapper.swell-block-fullWide::before{
    background-image: url("https://ti-plus-hd.jp/econowa/wp-content/uploads/2025/11/Vector.png");
    height: 200vw;
    top: -85px;
    object-fit: cover;
  }

.voice_wrapper h2.h2_voice {
margin-top: 1em !important;
margin-bottom: 10px;
}

.swiper.voice-carousel-wrap{
padding: 20px 0 50px;
}

.swiper-backface-hidden .swiper-slide{
width: 100% !important;
margin: 0 6px !important;
transform: translateX(-3px) translateZ(0) !important;
}

.swiper-slide .voice-slide-content{
width: 100%;
margin: 0 5px;
height: 460px;
padding: 32px;
}

.swiper-slide .voice-slide-content .voice-thumbnail img{
width: 80px !important;
height: 80px !important;
}

.swiper-button-prev, .swiper-button-next {
display: none !important;
}

.voice-carousel-wrap .swiper-pagination.swiper-pagination-bullets{
bottom: 0 !important;
}

}

/* FLOW */
.flow p:last-child{
line-height: 2em;
}
.flow .swell-block-fullWide__inner .column_triangle{
position: relative;
}
.flow .swell-block-fullWide__inner .column_triangle::before{
content: "";
position: absolute;
bottom: -3.5em;
left: 48%;
width: 0;
height: 0;
border-style: solid;
border-right: 15px solid transparent;
border-left: 15px solid transparent;
border-top: 24px solid #3ba6d7;
border-bottom: 0;
}

.flow .wp-block-columns .wp-block-column.is-vertically-aligned-center>p:first-child{
font-weight: bold;
}

@media screen and (max-width: 959px){
.flow .wp-block-columns .wp-block-column.is-vertically-aligned-center>p:first-child{
font-size: 20px;
}
}

/* FAQ */
.faq_main details{
background-color: #ffffff;
border-radius: 10px;
padding: 32px 48px;
margin-bottom: 24px !important;
border: none !important;
}

.faq_main summary{
position: relative;
font-weight: bold;
padding-left: 48px;
}

.faq_main summary::before{
position: absolute;
content: "Q";
color: #3BA6D7;
top: 50%;
transform: translateY(-50%);
left: 0;
font-size: 1.25em;
}

.faq_main summary i {
color: #3BA6D7;
}

.faq_main.swell-block-accordion.is-style-simple .swell-block-accordion__body{
position: relative;
padding-left: 48px;
border-top: 1px solid #999;
margin: 0 !important;
}

.faq_main .swell-block-accordion__body::before{
position: absolute;
content: "A.";
color: #D79E3B;
top: 10px;
left: 0;
font-size: 1.25em;
}

@media screen and (max-width: 959px){
.faq_main details{
padding: 16px;
font-size: 0.8em;
}

.faq_main summary{
padding: 0 0 0 20px;
}

.faq_main summary::before{
top: -4px;
transform: translateY(0);
height: fit-content;
}

.faq_main.swell-block-accordion.is-style-simple .swell-block-accordion__body{
padding-left: 20px;
}
}

/* contact */
.contact_main{
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}

form{
    background-color:#EBF6FC;
    border-radius: 24px;
    padding:48px;
    margin: 0 auto;
}

.wpcf7-form p:last-of-type {
    text-align: center;
}

.post_content .h2_contact::before{
left: 50% !important;
transform: translateX(-50%);
width: fit-content;
}
.tel_link {
text-decoration: none;
}

.tel_link a {
color: #333333;
}

.tel_text, .top_contact_left p:first-child, .top_contact_right p:first-child{
letter-spacing: 0.12em;
}

.top_contact_left {
position: relative;
background-color: #EBF6FC;
min-height: 325px;
height: fit-content;
}

.top_contact_left::before{
display: block;
content: "";
height: 100%;
position: absolute;
width: 2000px;
background-color: #EBF6FC;
left: -1000px;
z-index: -1;
}

.top_contact_right {
background-color: #F0F0F0;
position: relative;
min-height: 325px;
height: fit-content;
}

.top_contact_right::before{
display: block;
content: "";
position: absolute;
width: 2000px;
height: 100%;
background-color: #F0F0F0;
left: -300px;
z-index: -1;
}

.top_contact .wp-block-buttons a {
display: flex;
justify-content: space-between;
align-items: center;
}

.top_contact_right .u-mb-ctrl.u-mb-0.bottom_text{
margin-bottom: 28px !important;
} 

.sp_only.top_contact .btn_frame_anime a{
margin: 0 auto;
}

@media screen and (min-width: 960px){
.contact_main .swell-block-fullWide__inner{
padding-top: 100px;
}
}

@media screen and (max-width: 959px){
form{
    border-radius: 0;
    padding:25px 12px 0;
    margin: 0;
}

.swell-block-columns__inner{
row-gap: 0;
}
.top_contact_left, .top_contact_right{
height: 414px;
}

.wpcf7-spinner{
display: block;
}

.swell-block-fullWide.top_contact{
padding: 0 !important;
}

.contact_main{
margin-bottom: 0 !important;
padding-bottom: 50px !important;
}
.u-fz-l.tel_text{
font-size: 24px !important;
}
.tel_link{
margin-bottom: 0;
}

.top_contact .swell-block-fullWide__inner p:first-child.contact_head_text {
letter-spacing: 0.12em;
}
.top_contact .swell-block-fullWide__inner p.contact_head_text{
padding: 48px 0 0;
font-size: 20px;
letter-spacing: 0;
}
.top_contact .swell-block-fullWide__inner p.contact_head_text strong {
font-weight: normal;
}
.top_contact .swell-block-fullWide__inner p.contact_head_text span{
font-size: 20px !important;
}

div.contact_btn_wrapper{
padding-bottom: 36px;
}

div.contact_btn_wrapper a {
width: 254px !important;
padding: 7px 16px;
font-size: 15px;
}
div.contact_btn_wrapper a span:after{
width: 11px;
}
}