/*
Theme Name: 　ホームページ制作しちゃお2025
*/

/*ベースの設定*/
html{font-size:62.5%; font-weight: 400; 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-blue:#0068be;
  --content-brand-lightblue:#d9e8f5;
  --content-brand-yellow:#ffd900;
  --content-brand-gray:#eeeeee;
  --content-brand-darkgray:#c8c8c8;
  --content-brand-orange:#eb5902;
  --content-brand-shadow: 0.4rem 0.4rem 1.0rem rgba(0, 0, 0, .25);
}

html,body{width: 100%;}
body{ line-height: 1.5; overflow: hidden; font-family: var(--content-brand-font); font-weight: 400; font-size:1.6rem; 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%);}


/*トップページSVGアニメーション*/
/* パスは初期状態で非表示 */
  .draw-svg .cls-1 {
    opacity: 0;
    /* ここではダッシュ値は JS でセットするので省略 */
  }

  /* 準備完了＆描画開始クラス */
  .draw-svg .cls-1.ready {
    opacity: 1;
    /* 2秒かけてストロークを引く */
    transition: stroke-dashoffset 2s linear, opacity 0.3s ease-in;
  }

  .cls-1 {
    fill: none;
    stroke: #37786e;
    stroke-miterlimit: 10;
  }
/*装飾*/
.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);
  }
}

.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}


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

.std{ text-align: center; margin-bottom: 5rem;}
.std strong{ display: block; font-weight: 600; font-size: 3.2rem;}
.std i{ display: block; font-weight: 400; font-size: 1.4rem; color: var(--content-brand-blue);}
.std small{ font-size:1.4rem; font-weight: 200;}
.std.white strong{color: white;}
.std.white i{ color: white;}
.std2{ border-left:0.6rem solid var(--content-brand-blue); padding-left: 1.5rem; }
.std2 strong{ font-weight: 600; font-size:2.4rem; display: flex; align-items: center;}
.std2 strong:after{content: ''; width:2.56rem; height:2.23rem; display:block; background-image:url(images/arrow_to-right_yellow.webp); background-size:contain; background-position:center;  background-repeat: no-repeat; margin-left: 1.5rem;}
.std2 i{ font-weight: 300; font-size:1.6rem; display: block;}
.std2.white{ border-left:0.6rem solid var(--content-brand-yellow);}
.std2.white strong{ color: white;}
.std2.white strong a{ color: white;}
.std2.white strong:after{ background-image:url(images/arrow_to-right_white.webp);}
.std2.white i{ color: white}
.btn{ background-color: var(--content-brand-yellow); font-size:1.6rem; color: var(--content-brand-blue); display: flex; justify-content: center; align-items: center; padding:1.5rem 0; font-weight: 500; border:0.1rem solid var(--content-brand-yellow); width:25.6rem}
.btn:hover{ background-color: white; border: 0.1rem solid var(--content-brand-blue);}
.btn::after{content: ''; width:0.6rem; height:1.0rem; display:block; background-image:url(images/arrow_to-right_single_blue.webp); background-size:contain; background-position:center;  background-repeat: no-repeat; margin-left: 1.5rem;}
.btn.mail::before{content: ''; width:1.8rem; height:1.2rem; display:block; background-image:url(images/icon_btn_mail.webp); background-size:contain; background-position:center;  background-repeat: no-repeat; margin-right: 0.5rem;}
.btn.caution::before{content: ''; width:1.5rem; height:1.5rem; display:block; background-image:url(images/icon_btn_caution.webp); background-size:contain; background-position:center;  background-repeat: no-repeat; margin-right: 0.5rem;}
.btn-wrap{ display: flex; justify-content: center;}
.btn2{ background-color: var(--content-brand-orange); padding:0.75rem 2.5rem; color: white; font-size:1.4rem; font-weight: 500; display: flex; align-items: center; justify-content: center; width: fit-content; border-radius: 0.5rem; margin-top: 2.5rem; }
.btn2::after{content: ''; width:0.6rem; height:1.0rem; display:block; background-image:url(images/arrow_to-right_single_white.webp); background-size:contain; background-position:center;  background-repeat: no-repeat; margin-left: 1.5rem;}
.btn2:hover{ background-color: var(--content-brand-blue);}


/*BASE*/
body:not(.home) .pagehead{ backdrop-filter: blur(20px);position: fixed; top:0 ;left:0; width:100%; background-color: rgba(255, 255, 255, .75); z-index: 100;}
.home .pagehead{ backdrop-filter: blur(20px); /*position: fixed; top:0 ;left:0;*/ width:100%; background-color: rgba(255, 255, 255, .75); z-index: 100;}
.pagehead .inner{ width:98%; max-width:1200px; margin:0 auto; padding:0;}
.pagehead .inner .wrap{display: flex; justify-content: space-between;}
.pagehead .branding{ width:28.5rem; padding:1.5rem 0 0 0}
.pagehead .contact-list{ display: flex; width:51.0rem; align-items: center; justify-content: flex-end;}
.pagehead .contact-list .tel{ width:21.0rem}
.pagehead .contact-list .tel a{ display: flex; font-size:2.4rem; font-family: var(--content-brand-font-en2); align-items: center; line-height: 1;}
.pagehead .contact-list .tel a:before{content:''; display: block; width:1.4rem; height:1.9rem; background-image: url(images/icon_tel.webp); background-repeat: no-repeat; background-size: contain; background-position: center; margin-right: 0.5rem; transform: translateY(-0.1rem);}
.pagehead .contact-list .tel i{ display: block; font-size: 1.2rem; display: flex; align-items: center;}
.pagehead .contact-list .tel i::before{ content: ''; width:1.1rem; height:1.1rem; display:block; background-image:url(images/icon_time.webp); background-size:contain; background-position:center;  background-repeat: no-repeat; margin-right: 0.1rem;}
.pagehead .contact-list .works { margin-left: 2.0rem;}
.pagehead .contact-list .works a{ width:12.4rem; height:7.0rem; line-height: 1.2; display: flex; align-items: center; justify-content: center; color: var(--content-brand-blue); background-color: var(--content-brand-yellow); font-size:1.4rem; font-weight: 600; border: 0.1rem solid var(--content-brand-yellow)}
.pagehead .contact-list .works a::before{content: ''; width:3.7rem; height:3.9rem; display:block; background-image:url(images/icon_works.webp); background-size:contain; background-position:center;  background-repeat: no-repeat; margin-right: 0.5rem;}
.pagehead .contact-list .works a:hover{ background-color:white; border: 0.1rem solid var(--content-brand-blue);}
.pagehead .contact-list .mail { margin-left: 2.0rem;}
.pagehead .contact-list .mail a{ width:12.4rem; height:7.0rem; line-height: 1.2; display: flex; align-items: center; justify-content: center; color: white; background-color: var(--content-brand-blue); font-size:1.4rem; font-weight: 600; border: 0.1rem solid var(--content-brand-blue)}
.pagehead .contact-list .mail a:hover{ background-color: var(--content-brand-orange); border: 0.1rem solid var(--content-brand-orange);;}
.pagehead .contact-list .mail a::before{content: ''; width:3.9rem; height:2.6rem; display:block; background-image:url(images/icon_mail.webp); background-size:contain; background-position:center;  background-repeat: no-repeat; margin-right: 0.5rem;}
.pagehead .contact-list .mail a .text{ display: flex; flex-direction: column;}
.pagehead .contact-list .mail a .text small{ font-size: 1.2rem; font-weight: 400;}
.pagehead .menu{ display: flex; padding:1.5rem 0}
.pagehead .menu dl{ display: flex; align-items: center;}
.pagehead .menu dl:first-child{ margin-right: 2.5rem;}
.pagehead .menu dt{ background-color: var(--content-brand-blue); clip-path: polygon(0 0, 90% 0, 100% 50%, 90% 100%, 0 100%); color:white; line-height: 1;padding:0.75rem 2.0rem 0.75rem 1.5rem; font-size:1.4rem; }
.pagehead .menu dd { padding:0 0.75rem}
.pagehead .menu dd a{ display: flex; align-items: center;}
.pagehead .menu dd a::before{content: ''; width:1.25rem; height:1.6rem; display:block; clip-path: polygon(0 0,100% 50%,0 100%); background-color: var(--content-brand-yellow);}
.pagehead .menu dd a:hover{ color: var(--content-brand-orange);}
.pagehead .menu dd a:hover::before{ background-color: var(--content-brand-orange);}
.scrolled-70px .pagehead {position: fixed; top:0 ;left:0;}
.scrolled-70px .pagehead .branding.branding{ display: none;}
.scrolled-70px .pagehead .contact-list .tel{ display: none;}
.scrolled-70px .pagehead .inner{ display:flex; justify-content: space-between; flex-direction: row-reverse;}
.scrolled-70px .pagehead .contact-list{ width:auto}
.scrolled-70px .pagehead .menu dl{ flex-wrap: wrap; width:fit-content; justify-content: center;}
.scrolled-70px .pagehead .menu dt{ width:100%; clip-path: none; padding:0.5rem; text-align: center; margin-bottom: 0.5rem; font-size:1.4rem}
.scrolled-70px .pagehead .menu dd{ width:fit-content; font-size:1.4rem}
.site-content{ position: relative;z-index: 1;}
.acces-data{ padding:5.0rem 0}
.acces-data .block{ width:90%; max-width:800px; margin:0 auto 5.0rem auto; display: flex; justify-content: space-between;}
.acces-data .box{ width:47.5%}
.acces-data .box dt{ font-size:1.6rem; color:white; text-align: center; padding:0.5rem 0; background-color: #666666; border-radius:2.5rem; margin-bottom: 0.75rem;}
.acces-data .box dd { text-align: center; margin-bottom: 2.5rem;}
.acces-data .box dd .time{ display: block; font-size: 1.6rem; display: flex; align-items: center; justify-content: center; margin-bottom: 1.5rem;}
.acces-data .box dd .time::before{ content: ''; width:1.5rem; height:1.5rem; display:block; background-image:url(images/icon_time.webp); background-size:contain; background-position:center;  background-repeat: no-repeat; margin-right: 0.5rem; transform: translateY(0.1rem);}
.acces-data .box dd a.tel{ display: flex; font-size:5rem; font-family: var(--content-brand-font-en2); align-items: center; line-height: 1; justify-content: center; white-space: nowrap;}
.acces-data .box dd a.tel:before{content:''; display: block; width:3.8rem; height:3.8rem; background-image: url(images/icon_tel.webp); background-repeat: no-repeat; background-size: contain; background-position: center; margin-right: 0.5rem; transform: translateY(-0.1rem);}
.acces-data .box dd .time.blue{color: var(--content-brand-blue); font-weight: 500;}
.acces-data .box dd .time.blue::before{display: none;}
.acces-data .box dd .fax{ display: flex; font-size:5rem; font-family: var(--content-brand-font-en2); align-items: center; line-height: 1; justify-content: center; white-space: nowrap;}
.acces-data .box dd .fax:before{content:''; display: block; width:3.8rem; height:3.8rem; background-image: url(images/icon_fax.webp); background-repeat: no-repeat; background-size: contain; background-position: center; margin-right: 0.5rem; transform: translateY(-0.1rem);}
.acces-data .box figure { margin: 0 auto 1.5rem auto; width:80%; font-size:1.4rem;}
.acces-data .box figure img{ width:85%; margin:0 auto 1.5rem auto}
.acces-data .box figure h3{ font-size: 2.0rem;}
.acces-data .area{ width:90%; max-width:800px; margin:0 auto 5.0rem auto;}
.acces-data .area h3{ background-color: var(--content-brand-blue); text-align: center; font-size:2.0rem; color:white; padding:0.75rem; border-radius:2.5rem;margin-bottom: 2.5rem;}
.acces-data .area dl{ display: flex; justify-content: space-between;}
.acces-data .area dt { width:30%;}
.acces-data .area dt figcaption{ background-color: var(--content-brand-darkgray); text-align: center; padding: 0.75rem 0; font-size:2.0rem; font-weight: 600;}
.acces-data .area dt figcaption small{ font-size:1.2rem; display: block; font-weight: 400;} 
.acces-data .area dd{ width:67.5%; font-size:1.0rem; line-height: 1.75;}
.acces-data .area dd strong{ font-weight: 600; display: block;}
.banner-wrap{ width:90%; max-width:800px; margin:0 auto;}
.banner-wrap .onlinmeeting_banner{ display: block; margin-bottom:2.5rem;}
.banner-wrap ul{ display: flex; justify-content: space-between; flex-wrap: wrap; }
.banner-wrap li{ width:30%; margin-bottom: 1.5rem;}
.site-footer { border-top:1.0rem solid var(--content-brand-blue); padding-top:2.5rem;}
.site-footer .inner{ max-width:1080px; width:95%; margin:0 auto; padding-bottom: 2.5rem;}
.site-footer .inner dl{ display: flex; justify-content: space-between;}
.site-footer .inner dt{ width:38.0rem;}
.site-footer .inner dd{ display: flex; align-items: center; justify-content: space-between;}
.site-footer .contact-list{ display: flex; align-items: center; justify-content: flex-end;}
.site-footer .contact-list .tel a{ display: flex; font-size:3.2rem; font-family: var(--content-brand-font-en2); align-items: center; line-height: 1;}
.site-footer .contact-list .tel a:before{content:''; display: block; width:1.8rem; height:2.4rem; background-image: url(images/icon_tel.webp); background-repeat: no-repeat; background-size: contain; background-position: center; margin-right: 0.5rem; transform: translateY(-0.1rem);}
.site-footer .contact-list .tel i{ display: none;}
.site-footer .contact-list .works { margin-left: 2.0rem;}
.site-footer .contact-list .works a{ width:fit-content; height:auto; line-height: 1.2; display: flex; align-items: center; justify-content: center; color: var(--content-brand-blue); background-color: var(--content-brand-yellow); font-size:1.4rem; font-weight: 600; padding:0.5rem 2.5rem; border-radius: 0.5rem; border: 0.1rem solid var(--content-brand-yellow);}
.site-footer .contact-list .works a:hover{ border: 0.1rem solid var(--content-brand-blue); background-color: white;}
.site-footer .contact-list .works a::before{content: ''; width:1.7rem; height:1.8rem; display:block; background-image:url(images/icon_works.webp); background-size:contain; background-position:center;  background-repeat: no-repeat; margin-right: 0.5rem;}
.site-footer .contact-list .works a br{ display: none;}
.site-footer .contact-list .mail { margin-left: 2.0rem;}
.site-footer .contact-list .mail a{ width:fit-content; height:auto; line-height: 1.2; display: flex; align-items: center; justify-content: center; color: white; background-color: var(--content-brand-blue); font-size:1.4rem; font-weight: 600; padding:0.5rem 2.5rem; border-radius:0.5rem; border: 0.1rem solid var(--content-brand-blue);}
.site-footer .contact-list .mail a:hover{ background-color: var(--content-brand-orange); border: 0.1rem solid var(--content-brand-orange);}
.site-footer .contact-list .mail a::before{content: ''; width:1.9rem; height:1.3rem; display:block; background-image:url(images/icon_mail.webp); background-size:contain; background-position:center;  background-repeat: no-repeat; margin-right: 0.5rem;}
.site-footer .contact-list .mail a .text{ display: block;}
.site-footer .contact-list .mail a .text small{ font-size: 1.4rem; font-weight: 600;}
.site-footer .menu{ display: flex; padding:1.5rem 0}
.site-footer .menu dl{ display: flex; align-items: center; width:50%}
.site-footer .menu dl:first-child{ margin-right: 2.5rem;}
.site-footer .menu dt{ background-color: var(--content-brand-blue); clip-path: polygon(0 0, 90% 0, 100% 50%, 90% 100%, 0 100%); color:white; line-height: 1;padding:0.75rem 2.0rem 0.75rem 1.5rem; font-size:1.4rem; width:fit-content}
.site-footer .menu dd { padding:0 0.75rem}
.site-footer .menu dd a{ display: flex; align-items: center;}
.site-footer .menu dd a:hover{ color: var(--content-brand-orange);}
.site-footer .menu dd a::before{content: ''; width:1.25rem; height:1.6rem; display:block; clip-path: polygon(0 0,100% 50%,0 100%); background-color: black;}
.site-footer .menu dd a:hover::before{ background-color: var(--content-brand-orange);}
.site-footer .data{ display: flex; justify-content: space-between; padding:2.5rem 0; border-top: 0.1rem solid var(--content-brand-darkgray);}
.site-footer .data .wrap{ max-width:1080px; width:95%; margin:0 auto; display: flex; justify-content: space-between; }
.site-footer .data p{ font-size:1.2rem;}
.site-footer .data p strong{ font-size: 1.4rem; font-weight: 600; margin-right: 1.5rem;}
.site-footer .data .textlink{ font-size: 1.4rem; display: flex; align-items: baseline;}
.site-footer .data .textlink:before{ content: ''; width:0.6rem; height:1.0rem; display:block; background-image:url(images/arrow_to-right_single_gray.webp); background-size:contain; background-position:center;  background-repeat: no-repeat; margin-right: 0.5rem;}
.copyright{ background-color: var(--content-brand-blue); color: white; text-align: center; padding: 0.75rem ; font-size:1.4rem}



/*TOP*/
.topview .mv{ position: relative; display: flex; justify-content: center; align-items: flex-end; }
.topview .mv picture img{ min-height:64rem; object-fit: cover; object-position: center;}
.topview .mv figcaption{ max-width:108rem; position: absolute; width:95%; padding-bottom:7vw;}
.topview .mv figcaption strong{ color: var(--content-brand-blue); font-weight: 700; font-size: 4.6rem; margin-bottom: 2.5rem; display: block;}
.topview .mv figcaption .wrap{ background-color: rgba(255, 255, 255, .75); display: block; width:fit-content; padding:1.5rem 2.5rem}
.topview .mv figcaption .wrap img{ width:41.5rem}
section.product{ padding:5rem 0; border-bottom: 1px solid var(--content-brand-gray);}
section.product .slick-slider{ max-width:1080px; width:95%; margin:0 auto; position: relative;}
section.product .slick-slider .slide{ padding:1.5rem}
section.product .slick-slider .slide img{ aspect-ratio: 3 / 2; height: auto; object-fit: cover; object-position: center;}
section.product .slick-slider .slide i{ font-size: 1.4rem; font-weight: 300; display: block;}
section.product .slick-slider .slide-arrow{ position: absolute; width:2.5%; top:35%;}
section.product .slick-slider .prev-arrow{ left:-2.5%}
section.product .slick-slider .next-arrow{ right:-2.5%}
section.product .loading{ display: block; width:fit-content ;margin: 0 auto;}
section.homepage{ padding:5rem 0}
section.homepage ul{ display: flex; flex-wrap: wrap; justify-content: space-between; max-width:1080px; margin:0 auto; width:95%}
section.homepage li{ width:47.5%; margin-bottom: 5rem;}
section.homepage li img{ margin-bottom: 1.5rem;;}
section.hp-operation{ background-color: var(--content-brand-blue); padding:5.0rem 0}
section.hp-operation ul{ width:95%; max-width: 1080px; margin:0 auto; display: flex; justify-content: space-between; flex-wrap: wrap;}
section.hp-operation li{ width:28%;}
section.hp-operation li img{ margin-bottom: 1.5rem;}
section.plan-by-budget{ padding:5.0rem 0; background-color: var(--content-brand-gray);}
section.plan-by-budget ul{ width:95%; max-width: 1080px; margin:0 auto; display: flex; justify-content: space-between; flex-wrap: wrap;}
section.plan-by-budget li{ width:47.5%;position: relative; margin-bottom: 5.0rem;}
section.plan-by-budget li:before{ content: ''; width:7.2rem; height:22.1rem; background-color: var(--content-brand-yellow); display: block; clip-path: polygon(0 0,100% 0,100% 100%); position: absolute; top:0; right:0; z-index: 1;}
section.plan-by-budget li figure{ display: flex; justify-content: space-between; position: relative; z-index: 2; align-items: center;}
section.plan-by-budget li figure img{ width:65%;}
section.plan-by-budget li .std{ line-height: 1.2; margin-bottom:0;}
section.plan-by-budget li p{ width: fit-content; margin: 0 auto}
section.plan-by-budget li .price-box { display: flex; align-items:flex-end;}
section.plan-by-budget li .price-box .number{ font-size:9.6rem; display: block; line-height: 1; font-family: var(--content-brand-font-en); color: var(--content-brand-blue); font-weight: 400; line-height: 1;}
section.plan-by-budget li .price-box .yen small{ font-size:2.0rem; display: block; font-weight: 400;}
section.plan-by-budget li .price-box .yen{ font-size:3.2rem; display: block; font-weight: 600; line-height: 1;}
section.plan-by-budget li figure .komi{ display: block; text-align: center; font-size:1.4rem}
section.reasons{ padding:0 0 5.0rem 0}
section.reasons .h2-wrap{ display: flex; align-items: center; justify-content: center; aspect-ratio: 14 / 2; background-image: url(images/bg_top_reasons_ttl.jpg); background-size: cover; background-position: center; margin-bottom: 5.0rem;}
section.reasons .h2-wrap h2{ transform: translateY(2.5rem);}
section.reasons ul{ width:95%; max-width: 1080px; margin:0 auto; display: flex; flex-wrap: wrap; justify-content: space-between;}
section.reasons li{ width:28.6%; margin-bottom: 5.0rem;}
section.reasons li.ttl{ background-color: var(--content-brand-blue); position: relative; display: flex; justify-content: center; align-items: center; color: #ffffff;}
section.reasons li.ttl:before{ content: ''; width:5.5rem; height:5.8rem; display: block; background-color: var(--content-brand-yellow); clip-path: polygon(0 0,100% 0,100% 100%); position: absolute; top:0; right:0}
section.reasons li.ttl:after{ content: ''; width:5.5rem; height:5.8rem; display: block; background-color: var(--content-brand-yellow); clip-path: polygon(0 0,100% 100%,0 100%); position: absolute; bottom:0; left:0}
section.reasons li.ttl .name{ display: block; font-size: 3.2rem; line-height: 1.2; border-bottom: 0.1rem solid #ffffff; padding-bottom: 1.5rem;}
section.reasons li.ttl .text-box{ display: flex; align-items: center;}
section.reasons li.ttl .number{ font-size:14.6rem; font-weight: 600; display: block; line-height: 1;}
section.reasons li.ttl small{ font-size:3.7rem; line-height: 1; display: block;}
section.reasons li.ttl strong{ font-size:7.0rem; line-height: 1; display: block;}
section.reasons li img{ margin-bottom: 0.75rem;}
section.reasons li h3{ font-size:2.0rem; margin-bottom: 0.5rem;}
section.workflow{ background-color: var(--content-brand-blue); padding:5.0rem 0}
section.workflow ul{ display: flex; justify-content: space-between; width:95%; max-width: 1200px; margin:0 auto; flex-wrap: wrap;}
section.workflow li{ width:calc(23% - 3.0rem); background-color: #ffffff; border-radius:1.5rem; padding:1.5rem; margin-bottom: 5rem; position: relative; box-shadow: var(--content-brand-shadow);}
section.workflow li h3{ text-align: center; font-weight: 600; color: var(--content-brand-blue); margin: 0.5rem 0; font-size:2.0rem; height:7.5rem; justify-content: center; align-items: center; display: flex;}
section.workflow li p{ font-size:1.4rem}
section.workflow li:after{ content: ''; width:2.0rem; height:4.0rem; display: block; background-color: var(--content-brand-yellow); clip-path: polygon(0 0,100% 50%,0 100%); position: absolute; top:0; bottom:0; right:-2.7rem; margin: auto;}
section.workflow li:last-child::after{ right:437%;}
section.company{ padding:5.0rem 0}
section.company dl{ max-width:1080px; width:95%; margin:0 auto; border:0.1rem solid var(--content-brand-blue); padding:5.0rem 0}
section.company dt{ width:48.0rem; margin: 0 auto 2.5rem auto; display: flex; justify-content: space-between; align-items: center;}
section.company dt img{ width:28.0rem;}
section.company dt .btn{ width:17.3rem; border-radius:0.5rem; padding: 0.75rem 0}
section.company dd ul{ display: flex; justify-content: center;}
section.company dd li{ width:25.5rem; margin: 0 2.5rem;}
section.company dd li h3{ font-size:2.0rem;}
section.company dd li p{ font-size:1.4rem; white-space: nowrap;}
section.contactform{ background-color: var(--content-brand-lightblue); padding:5.0rem 0}

/*固定ページ*/
.page-mv figure{ display: flex; align-items: flex-end; justify-content: center; align-items: center; position: relative;}
.page-mv figcaption{ position: absolute; background-color: rgba(0, 104, 190, .75); color: white; text-align: center; padding:1.5rem; bottom:5vw; width:27rem}
.page-mv h1{ color: white; font-size: 3.2rem; font-weight: 600;}
.page-mv h1 i{ display: block; font-size: 1.4rem; font-weight: 300;}
section.introduction{ padding:5.0rem 0;}
section.introduction h2{ text-align: center; font-weight: 600; font-size: 3.2rem; margin-bottom: 2.5rem;}
section.introduction h2 .blue{color: var(--content-brand-blue);}
section.introduction h2 strong{ font-size: 2.4rem; font-weight: 600; display: block;}
section.introduction p{ text-align: center; font-size: 1.6rem; margin-bottom: 2.5rem;}
section.flow-content .block{ padding: 7.5rem 0; background-color: var(--content-brand-gray); position: relative; z-index: 1;}
section.flow-content .block .wrap{ width:98%; max-width:1150px; margin:0 auto; display: flex;justify-content: space-between; align-items: flex-start;}
section.flow-content .block figure{ width:54.43%; clip-path: polygon(25% 0, 100% 0,75% 100%,0 100%); overflow: hidden;}
section.flow-content .block .text{ width:39.62%}
section.flow-content h3{ display: flex; align-items: center; margin-bottom: 2.5rem;}
section.flow-content h3 .step{ background-color: var(--content-brand-yellow); width:11.8rem; height: 8.4rem; display: flex; justify-content: center; align-items:center; color: var(--content-brand-blue); font-size:2.4rem; line-height: 1; font-weight: 400; margin-right: 1.5rem;}
section.flow-content h3 .step i{ font-size: 4.8rem; font-weight: 500;}
section.flow-content h3 strong{ font-size:3.2rem; font-weight: 600; line-height: 1.2;}
section.flow-content h4{ font-size:2.0rem; color: var(--content-brand-blue); margin-bottom: 1.5rem; white-space: nowrap;}
section.flow-content .text p{ line-height: 1.8;}
section.flow-content .text p strong{ font-weight: 600;}
section.flow-content .block:nth-child(even){ background-color: white;}
section.flow-content .block:nth-child(even) .wrap{ flex-direction: row-reverse;}
section.flow-content .block:after{content: ''; display: block; width:6.0rem; height:3.5rem; background-color:var(--content-brand-gray); clip-path: polygon(0 0,100% 0,50% 100%); position: absolute; margin: auto; left:0; right:0; top:0; z-index: 2;}
section.flow-content .block:nth-child(odd)::after{ background-color:white;}
section.flow-content .block:nth-child(1)::after{ display: none;}
section.inpage-navi { background-color: var(--content-brand-yellow); padding:2.5rem 0}
section.inpage-navi ul{ max-width: 1150px; width:100%; display: flex; justify-content: space-between; margin:0 auto;}
section.inpage-navi li{ width:20%; border-right: 0.25rem solid white;}
section.inpage-navi li a{ display: block;}
section.inpage-navi li figure figcaption{ color: var(--content-brand-blue); font-size:2.0rem; font-weight: 600; text-align: center; font-family: var(--content-brand-font-en); margin-bottom: 1.5rem;}
section.inpage-navi li figure img{width:33%; aspect-ratio: 1 / 1; object-fit: contain; object-position: center; margin:0 auto 1.5rem auto;}
section.inpage-navi li i{ display: block; text-align: center; margin-bottom: 1.5rem;}
section.inpage-navi li:after{content: ''; width:3.8rem; height:1.33rem; display:block; background-image:url(images/arrow_to-bottom_flat_blue.webp); background-size:contain; background-position:center;  background-repeat: no-repeat; margin:0 auto; transform: translateY(0); transition: 0.5s all;}
section.inpage-navi li:hover::after { transform: translateY( 1.0rem);}
section.reasons-content{ padding: 7.5rem 0;}
section.reasons-content .block{ position: relative;}
section.reasons-content .block .box{ display: flex; justify-content: space-between; align-items: flex-start; max-width:1300px; width:95%; margin:0 auto 5.0rem 0;padding-bottom: 5.0rem; }
section.reasons-content .block:nth-child(even) .box{ margin:0 0 5.0rem auto;}
section.reasons-content .block .box figure{ width:42.5%; position: relative; display: flex; justify-content: center; align-items: flex-end;}
section.reasons-content .block .box figcaption{ font-size:13.3rem; font-family: var(--content-brand-font-en); font-weight: 600; color: rgba(255, 255, 255, .75); position: absolute; line-height: 1; transform: translateY(1.0rem);}
section.reasons-content .block .box .text{ width:54%}
section.reasons-content .block .box .text h2 { display: flex; align-items: center; margin-bottom: 2.5rem;}
section.reasons-content .block .box .text h2 .icon{ background-color: var(--content-brand-yellow); border-radius: 1.0rem; display: flex; justify-content: center; align-items: center; width:9.2rem; height:9.2rem;}
section.reasons-content .block .box .text h2 .icon img{ width:66%; aspect-ratio: 1 / 1; object-fit: contain; object-position:center;}
section.reasons-content .block .box .text h2 .wrap{ margin-left: 1.5rem;}
section.reasons-content .block .box .text h2 i{ font-size:2.0rem; font-weight: 500; display: block;}
section.reasons-content .block .box .text h2 strong{ font-size:3.2rem; font-weight: 600; color: var(--content-brand-blue);}
section.reasons-content .block .box .text p{ line-height: 2; font-size:1.6rem;}
section.reasons-content .block .box .text p strong{ font-weight: 600;}
section.reasons-content .block::after{content: ''; width:24.0rem; height:0.3rem; border-radius: 0.15rem; background-color: var(--content-brand-gray); display: block; margin:0 auto; position: absolute; bottom:0; left:0; right:0}
section.reasons-content .block:nth-child(even) .box{ flex-direction: row-reverse;}
section.reasons-content .btn-wrap{ justify-content: flex-start;}
section.reasons-content .btn-wrap a{ margin-right: 2.5rem;}
section.reasons-content .block:last-child::after{ display: none;}
section.reasons-content .block dl{ background-color: var(--content-brand-gray); padding:2.5rem; margin-top: 2.5rem;}
section.reasons-content .block dt{ font-weight: 500;}
section.reasons-content .block dd:not(:last-child){ margin-bottom: 1.5rem;}

body.privacy-policy .kotei{ width:90%; max-width:900px; margin:0 auto; border-bottom: 1px solid #666666;}
body.privacy-policy .entry-header h1{ text-align: center; font-size:2.4rem; padding-top:15.0rem; margin-bottom: 7.5rem;}
body.privacy-policy .kotei p{ font-size:1.6rem; line-height: 2; margin-bottom: 2.5rem;}
body.privacy-policy .kotei ol{ padding:2.5rem 2.5rem 2.5rem 5.0rem; background-color: var(--content-brand-lightblue); margin-bottom: 2.5rem;}
body.privacy-policy .kotei li{ margin-bottom: 0.5rem; list-style-type: circle; line-height: 2;}
body.privacy-policy .kotei h4{ font-size:2.4rem; padding: 2.5rem 0 1.5rem 0;}
body.privacy-policy .kotei strong{ display: block; font-size:2.0rem; font-weight: 600; margin: 5.0rem 0 1.5rem 0}


/*サービス*/
body.service .kotei{ width:90%; max-width:900px; margin:0 auto; padding:5.0rem 0}
body.service .service_top_banner img{ width:100%!important}
body.service .is-layout-flex { align-items: flex-start!important;}
body.service .is-layout-flex .wp-block-column{ flex-basis: auto;}
body.service .is-layout-flex .wp-block-column:nth-child(1){ width:20%}
body.service .is-layout-flex .wp-block-column:nth-child(2){ width:40%}
body.service .is-layout-flex .wp-block-column:nth-child(2) p{ margin-bottom: 2.5rem; line-height: 1.8;}
body.service .is-layout-flex .wp-block-column:nth-child(3){ width:calc(40% - 3.0rem); border-radius: 1.5rem; border:0.25rem solid var(--content-brand-blue); padding:1.5rem; background-color: var(--content-brand-lightblue);}
body.service .is-layout-flex .wp-block-column:nth-child(3) h3{ font-size: 2.4rem; font-weight: 800; margin-bottom: 1.5rem; color: var(--content-brand-blue);}
body.service .is-layout-flex .wp-block-column:nth-child(3) li{ margin-bottom: 1.5rem; line-height: 1.5; font-size: 1.4rem; color: #333333;}
body.service .is-layout-flex .wp-block-column:nth-child(3) li strong{ font-weight: 600; color: var(--content-brand-blue);}
body.service [id^="service"] img{ width:80%}
body.service [id^="service_"]{ margin-bottom: 5.0rem; padding-top: 5.0rem;}


/*フォーム*/

div.wpcf7{ width:calc(95% - 10rem); max-width:980px; background-color: #ffffff; padding:5.0rem; border-radius:2.5rem; margin:0 auto; box-shadow: var(--content-brand-shadow);}
.wpcf7-form{ width:100%; margin: auto;}
.wpcf7-form dt{ font-size:2.0rem; font-weight: 500; display: flex; align-items: center; margin-bottom: 0.75rem;}
.wpcf7-form dt i{ font-size:1.6rem; line-height: 1; color: white; background-color: red; border-radius:1.5rem; padding:0 1.5rem; margin-left: 1.5rem;}
.wpcf7-form dd{margin-bottom: 2.5rem;}
.wpcf7-checkbox{ display: flex; flex-wrap: wrap;}
.wpcf7-list-item{ font-size:2.0rem; width:40%; padding: 0.75rem 0;}

.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-control.wpcf7-date.wpcf7-validates-as-date{ font-size:1.8rem; padding:0.5rem}
.wpcf7-form input[type="text"],.wpcf7-form input[type="email"],.wpcf7-form textarea{ padding:1.5rem; font-size:18px; width:calc(100% - 3rem - 2px); border:1px solid var(--content-brand-darkgray); border-radius:0.75rem}


.wpcf7-form select{ font-size:1.8rem; padding:5px; margin-bottom: 1.5rem;}
.wpcf7-form .submit{ text-align: center;}
.wpcf7-form .submit input{ display: block; margin:0 auto; border-radius: 5px; padding:15px 50px; font-size:18px; color: #ffffff; cursor: pointer; background-color:var(--content-brand-orange); 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; }

.wpcf7-form .notice{ text-align: center; background-color: var(--content-brand-pink); padding:1.5rem 0; font-family: var(--content-brand-font); font-weight: 600; color: #ffffff;}
.wpcf7-form .notice strong{ font-size:2.4rem; font-weight: 600; display: inline-block; margin:0.5rem 0}



/*投稿ページ*/
.single .main-eyecatch {width:90%; max-width:800px; margin:0 auto; padding-bottom: 2.5rem;}
.single .main-eyecatch img{ width: 100%; height:auto; display:block}
.single .entry-header{ text-align:center;}
.single .entry-header .data{ display: flex; align-items: center; justify-content: center;}
.single .entry-header .date{ font-size:1.8rem;}
.single .entry-header .category{ font-size:1.6rem; background-color: var(--content-brand-lightgreen); color: #ffffff; padding:0.25rem; line-height: 1; margin:0 0.5rem}
.single .entry-header h1{ font-size:3.2rem; width:90%; margin:0 auto 2.5rem auto;}
.single .entry-header h1 strong{ font-weight: 600;}
.single .entry-header h1 i{ font-size:20px; display: block; color: #000000; padding:15px 0 25px 0}
.single .normal { padding:0 0 50px 0;}
.single article section{ width:90%; max-width:800px; margin:2.5rem auto}
.single article section p{ padding-bottom: 25px; font-size:16px; line-height: 1.8;}
.single article h2{ font-size:24px; font-weight: bold; padding-top: 25px; margin-bottom:25px; font-family:'Noto Serif JP', 'Noto Serif Japanese', "游明朝", YuMincho, 'Noto Serif JP', serif, sans-serif; }
.single article h3{ font-size:20px; font-weight: bold; margin:15px 0; border-bottom:1px solid #000000; padding-bottom: 2px;}
.single article img{ height: auto;}
.single article h4{ font-size:18px; font-weight: bold; color:#000000; padding-top: 15px; margin-bottom:15px}
.single article h5{ font-size:16px; font-weight: bold; padding-top: 15px; margin-bottom:15px}
.single article ul{ padding:0 25px; margin-bottom:15px}
.single article li{ list-style-type: disc;}
.single article table{ margin-bottom:25px}
.single .wp-block-buttons{ text-align: center;}
.single .wp-block-file { text-align: center;}
.single .wp-block-file a:first-child{display: none;}
.navi-single {max-width:800px; width:90%; margin:0 auto; padding:25px 0; display: flex; justify-content: center;}
.navi-single a{ font-size:16px; color: #000000;}
.single .content-area{ border-bottom:1px solid #dddddd; padding-bottom:50px}





/*投稿一覧ページ*/
.archivecontent{ width:95%; max-width:1000px; margin:0 auto; padding:5.0rem 0;}
.archivecontent .archive-list ul{ width:100%; margin:0 auto}
.archivecontent .archive-list li{ margin-bottom:2.5rem; border-bottom: 3px dotted var(--content-brand-green); padding-bottom:2.5rem}
.archivecontent .archive-list li .wrap { display: flex; align-items: center; justify-content: space-between;}
.archivecontent .archive-list li .wrap figure img{ object-fit: cover; aspect-ratio: 1 / 1;}
.archivecontent .archive-list li .wrap figure{ min-width:18.0rem; max-width: 18.0rem;}
.archivecontent .archive-list li .wrap figure .dummy{ border:0.1rem solid var(--content-brand-green) }
.archivecontent .archive-list li .wrap .text{ width:calc(100% - 22.5rem)}
.archivecontent .archive-list li .data{ display: flex; align-items: center;}
.archivecontent .archive-list li .date{ font-size:1.8rem;}
.archivecontent .archive-list li .category{ font-size:1.6rem; background-color: var(--content-brand-lightgreen); color: #ffffff; padding:0.25rem; line-height: 1; margin:0 0.5rem}
.archivecontent .archive-list li .new-post{ font-size:1.8rem; color: #ff0000;}
.archivecontent .archive-list h3{ font-size:2.4rem; font-weight: 400; padding:0.75rem 0}
.archivecontent .archive-list h3 a{ display: block; width:100%; color: #000000;}
.archivecontent .archive-list li a.btn-simple{ justify-content: flex-start; padding-top:1.5rem; font-size:1.4rem; color: var(--content-brand-green);}
.archivecontent .archive-list li a.btn-simple::after{ border-color: var(--content-brand-green);}
.category .pagebottom{ position: absolute; bottom:0; width:100%}
.category .pagebottom img{ display: block; width:100%}
.category .archivecontent section{ z-index: 10; position: relative;}
.link-more{ display: none;}
.blog-wrap{ display: flex; justify-content: space-between; width:95%; max-width:1000px; margin:0 auto; }
.blog-wrap .archivecontent{ width:70%;}
.blog-wrap .archive-navi{ width:25%; padding: 5.0rem 0;}
.blog-wrap .archive-navi h4{ font-size:1.8rem; font-weight: 400; margin-bottom: 0.5rem; color: var(--content-brand-green);}
.blog-wrap .archive-navi ul{ margin: 0 0 2.5rem 0;}
.blog-wrap .archive-navi li{ padding:1.0rem; border-bottom: 1px dotted var(--content-brand-green); display: flex; align-items: center;}
.blog-wrap .archive-navi li:before{ content: ''; background-color: var(--content-brand-green); display: block; width:1.0rem; height:1.4rem; clip-path: polygon(0 0,100% 50%, 0 100%); margin-right: 0.5rem;}

.pagenation li{ padding:0.75rem}
.pagenation li.active{ background-color: transparent; color: #000000; padding:0.75rem}
.pagenation li a{ background-color: transparent; color: #000000; padding:0.75rem}
.pagenation li.next a{ color: #ffffff; text-shadow:none; position: relative; width:1.5rem; height: 2rem; padding: 0;}
.pagenation li.next a:before{ content: ''; display: block; width:1.5rem; height: 2rem; background-color: var(--content-brand-green); display: block; clip-path: polygon(0 0,100% 50%,0 100%); position: absolute;left:0; top:0.25rem}
.pagenation li.next a:hover{ background-color: #ffffff;}
.pagenation li.prev a{ color: #ffffff; text-shadow:none; position: relative; width:1.5rem; height: 2rem; padding: 0;}
.pagenation li.prev a:before{ content: ''; display: block; width:1.5rem; height: 2rem; background-color: var(--content-brand-green); display: block; clip-path: polygon(0 50%,100% 0,100% 100%); position: absolute;right:0; top:0.25rem}
.pagenation li.prev a:hover{ background-color: #ffffff;}


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






/*===============================================
●レスポンシブ  画面の横幅が1080pxまで
===============================================*/
@media screen and (max-width:1080px){
html{font-size:1vw}
.tablet{ display:block!important;}
section.reasons-content .block .box .text h2 i{ font-size:1.8rem;}
section.reasons-content .block .box .text h2 strong{ font-size: 2.8rem;}
section.reasons-content .block .box figcaption{ font-size:10rem}
section.reasons-content .block dl{ font-size:1.4rem}
section.reasons-content .btn-wrap { justify-content: space-between;}
section.reasons-content .btn-wrap a{ margin-right: 0;}
section.flow-content .block .text{ width:44%}
.acces-data .area dd{font-size:1.1rem}
}


/*===============================================
●レスポンシブ  画面の横幅が880pxまで
===============================================*/
@media screen and (max-width:880px){
}


/*===============================================
●レスポンシブ  画面の横幅が660pxまで
===============================================*/
@media screen and (max-width:660px){
html{font-size:2.3vw}
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;}


.topview .mv figcaption .wrap{ display: none;}
.pagehead .branding{ width:calc(80% - 1.5rem); padding:0.75rem}
.topview .mv picture img{ min-height: auto;}
.topview .mv figcaption strong{ font-size:3.2rem; ;text-shadow: 0 0 5px #fff,0 0 10px #fff,0 0 20px #fff;}
.topview .mv{ align-items: flex-start; justify-content: center;}
.topview .mv figcaption{ width:fit-content; top:30vw; }
section.product .slick-slider{ width:80%}
section.product .slick-slider .slide-arrow{ width:5%}
section.homepage ul{ width:75%; }
section.homepage li{ width:100%}
section.homepage li img{ aspect-ratio: 16 / 9; object-fit: cover; object-position: center}
section.hp-operation ul{ width:75%; flex-direction: column;}
section.hp-operation li{ width:100%; margin-bottom: 5.0rem;}
section.hp-operation li img{ aspect-ratio: 16 / 9; object-fit: cover; object-position: center}
section.plan-by-budget ul{ width:75%;}
section.plan-by-budget li{ width:100%; margin-bottom: 7.5rem;}
section.plan-by-budget li figure{ display: block;}
section.plan-by-budget li figure img{ width:75%}
section.plan-by-budget li figcaption{ display: flex; justify-content: flex-end; align-items:center; flex-wrap: wrap;}
section.plan-by-budget li .std{ width:50%}
section.plan-by-budget li .price-box{ width:50%}
section.reasons .h2-wrap{ aspect-ratio: 7 / 3;}
section.reasons ul{ width:75%;}
section.reasons li{ width:100%}
section.workflow ul{ width:75%;}
section.workflow li{ width:100%}
section.workflow li:after{ transform: rotate(90deg); left:0; right:0; bottom:-4.5rem; top:auto; margin:0 auto}
section.workflow li:last-child::after{ right: 0; display: none;}
section.workflow li h3{ height: auto;}
section.workflow li h3 br{ display: none;}
section.company dl{ width:75%}
section.company dt{ width:66%; display: block;}
section.company dt .btn{ margin: 1.5rem auto 0 auto;}
section.company dd ul{ display: block; width:80%}
section.company dd li{ width:100%;margin-top: 2.5rem;}
.wpcf7-list-item{ width:90%}
.acces-data .block{ display: block; width:75%;}
.acces-data .box{ width:100%; margin-bottom: 5.0rem;}
.acces-data .box dd a.tel{ font-size:4.0rem}
.acces-data .box dd .fax{ font-size:4.0rem}
.acces-data .box figure{ width:90%}
.acces-data .area{ width:75%}
.acces-data .area dl{ display: block;}
.acces-data .area dt { width:100%; margin-bottom: 1.5rem;}
.acces-data .area dt figure{ display: flex;}
.acces-data .area dt figcaption{ width:35%;}
.acces-data .area dt img{ width:65%;}
.acces-data .area dd{ width:100%}
.banner-wrap li{ width:48%}
.site-footer .inner dl{ display: block; width:75%; margin:0 auto}
.site-footer .inner dt{ width:100%}
.site-footer .inner dd{ width:100%}
.site-footer .inner dd ul{ flex-wrap: wrap; justify-content: space-around;}
.site-footer .inner dd li.tel{ width:100%; padding:2.5rem 0}
.site-footer .inner dd li.tel a{ justify-content: center;}
.site-footer .contact-list .works{ margin: 0;}
.site-footer .contact-list .mail{ margin: 0;}
.site-footer .data .wrap{ display: block;}
.site-footer .data p strong{ display: block; margin-bottom: 1.5rem;}
.site-footer .data p { text-align: center;}
.site-footer .data .textlink{ justify-content: center; margin-top: 1.5rem;}


.page-mv figure img{ aspect-ratio:3 / 2;object-fit: cover;}
.page-mv figcaption{ bottom:12.5vw}
section.introduction p{ width:80%; margin:0 auto; text-align: justify;}
section.inpage-navi li{ border:none;}
section.inpage-navi li figure figcaption{ font-size: 1.4rem;}
section.inpage-navi li i{ font-size:1.2rem;}
section.reasons-content .block .box{ flex-direction: column; width:100%}
section.reasons-content .block .box figure{ width:100%; margin-bottom: 1.5rem;}
section.reasons-content .block .box figure img{ aspect-ratio: 16 / 9; object-fit: cover; object-position: center;}
section.reasons-content .block .box .text{ width:90%; margin:0 auto}
section.reasons-content .block .box .text h2{ align-items: flex-start;}
section.reasons-content .block .box .text h2 strong{ white-space: nowrap;}
section.reasons-content .block:nth-child(even) .box{ flex-direction: column;}
section.reasons-content .btn-wrap{ display: block;}
section.flow-content .block .wrap{ width:90%; display: block;}
section.flow-content .block figure{ width:100%; margin-bottom: 2.5rem;}
section.flow-content .block .text{ width:100%}
section.flow-content h4{font-size:1.8rem;}
section.flow-content .text p{ font-size: 1.6rem;}


/*サービス*/
body.service [id^="service"] img{ width:100%}
body.service .is-layout-flex .wp-block-column:nth-child(1) img{ width:40%; margin:0 auto 0 auto}
body.service .is-layout-flex .wp-block-column:nth-child(1) figure{ margin: 0;}



/*メニューレイアウト*/

.globalMenuSp .wrap{ z-index:99999; overflow-y: scroll; height: 100vh; position: relative; -webkit-overflow-scrolling: touch;}
.globalMenuSp .wrap .branding{ width:80%; margin:0 auto; padding:5.0rem 0 2.5rem 0}
.globalMenuSp .wrap .logo img{ width:20.0rem; display: block; margin:0 auto}



.sp-contact .contact-list{ display: flex; align-items: center; justify-content: space-between;}
.sp-contact .contact-list .tel { margin-bottom: 1.5rem;}
.sp-contact .contact-list .tel a{ display: flex; font-size:4.8rem; font-family: var(--content-brand-font-en2); align-items: center; line-height: 1;}
.sp-contact .contact-list .tel a:before{content:''; display: block; width:2.7rem; height:3.6rem; background-image: url(images/icon_tel.webp); background-repeat: no-repeat; background-size: contain; background-position: center; margin-right: 0.5rem; transform: translateY(-0.1rem);}
.sp-contact .contact-list .tel i{ display: none;}
.sp-contact .contact-list .works { width:48%}
.sp-contact .contact-list .works a{ width:100%; height:5.0rem; line-height: 1.2; display: flex; align-items: center; justify-content: center; color: var(--content-brand-blue); background-color: var(--content-brand-yellow); font-size:1.4rem; font-weight: 600; border-radius: 0.5rem; border: 0.1rem solid var(--content-brand-yellow); }
.sp-contact .contact-list .works a:hover{ border: 0.1rem solid var(--content-brand-blue); background-color: white;}
.sp-contact .contact-list .works a::before{content: ''; width:3.4rem; height:3.6rem; display:block; background-image:url(images/icon_works.webp); background-size:contain; background-position:center;  background-repeat: no-repeat; margin-right: 0.5rem;}
.sp-contact .contact-list .works a br{ display: none;}
.sp-contact .contact-list .mail { width:48%}
.sp-contact .contact-list .mail a{ width:100%; height:5rem; line-height: 1.2; display: flex; align-items: center; justify-content: center; color: white; background-color: var(--content-brand-blue); font-size:1.4rem; font-weight: 600; border-radius:0.5rem; border: 0.1rem solid var(--content-brand-blue);}
.sp-contact .contact-list .mail a:hover{ background-color: var(--content-brand-orange); border: 0.1rem solid var(--content-brand-orange);}
.sp-contact .contact-list .mail a::before{content: ''; width:3.8rem; height:2.6rem; display:block; background-image:url(images/icon_mail.webp); background-size:contain; background-position:center;  background-repeat: no-repeat; margin-right: 0.5rem;}
.sp-contact .contact-list .mail a .text{ display: block;}
.sp-contact .contact-list .mail a .text small{ font-size: 1.4rem; font-weight: 600;}

.sp-menu .menu{ padding:1.5rem 0}
.sp-menu .menu dl{ width:80%; margin:0 auto 2.5rem auto}
.sp-menu .menu dt{ background-color: var(--content-brand-blue); color:white; line-height: 1; padding:0.75rem 2.0rem 0.75rem 1.5rem; font-size:1.4rem;}
.sp-menu .menu dd { padding:1.5rem; border-bottom:1px dotted var(--content-brand-blue)}
.sp-menu .menu dd a{ display: flex; align-items: center; font-size: 1.8rem; font-weight: 600;}
.sp-menu .menu dd a:hover{ color: var(--content-brand-orange);}
.sp-menu .menu dd a::before{content: ''; width:1.25rem; height:1.6rem; display:block; clip-path: polygon(0 0,100% 50%,0 100%); background-color: var(--content-brand-blue);}
.sp-menu .menu dd a:hover::before{ background-color: var(--content-brand-orange);}
}