@charset "utf-8";

:root{
  --default-font:'Noto Sans JP', sans-serif;
  --eng-font:'Lato', 'Noto Sans JP', sans-serif;
  --serif-font:'游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif;
	--google-icon:'Material Symbols Outlined';
	--bootstrap:'bootstrap-icons';
  --main-color:rgb(196, 0, 3);
  --key-color01:#004ea2;
  --key-color02:rgb(94, 191, 208);
  --link-color:rgb(18, 126, 181);
  --base-color:#222;
  --base-light-color:#666;
  --normal:400;
  --medium:600;
  --bold:700;
  --heavy:900;
  --side-padding:3.5rem;
}

header{
  box-sizing:border-box;
  width:100%;
  background:#f8f8f8;
  padding:1.0rem var(--side-padding);
  display:flex;
  justify-content:space-between;
  align-items:center;
  position:fixed;
  top:0; left:50%; z-index:1000;
  transform:translateX(-50%);
  transition:0.2s;
}
.white header{
  background:#fff;
}
header > #logo > h1{
  font-size:1.6rem; line-height:1.8;
}
header > #logo > h1 > a{
  display:block;
  text-decoration:none;
  color:var(--base-color);
}
header > nav#global-nav > ul{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:0 1.25rem;
}
header > nav#global-nav > ul > li{
  font-size:0.925rem; line-height:1.8; font-weight:var(--bold);
}
header > nav#global-nav > ul > li > a{
  display:block;
  text-decoration:none;
  color:var(--base-color);
  position:relative;
}
header > nav#global-nav > ul > li:not(:last-child) > a::after{
  content:"";
  width:100%; height:0.1rem;
  background:var(--base-color);
  position:absolute;
  bottom:-0.1rem; left:0;
  transition:0.2s;
  transform:scaleX(0);
  transform-origin:top left;
}
header > nav#global-nav > ul > li:not(:last-child) > a:hover::after{
  transform:scaleX(1);
}
header > nav#global-nav > ul > li:last-child > a{
  color:#fff;
  background:var(--main-color);
  border-radius:9999px;
  padding:0.5em 1.5em;
  filter:drop-shadow(1px 1px 3px #ccc);
}

#billboard{
  box-sizing:border-box;
  width:100%; height:100vh;
  max-width:1600px;
  padding:80px var(--side-padding);
  margin:0 auto;
  display:flex;
  flex-direction:row-reverse;
  justify-content:space-between;
  align-items:center;
  gap:0 2.5rem;
}
#billboard > .billboard-image{
  width:48%; height:100%;
  height:calc(100vh - 240px);
  overflow:hidden;
  border-radius:1.0rem;
}
#billboard .swiper-container,
#billboard .billboard-slider{
  width:100%; height:100%;
}
#billboard > .billboard-image .swiper-slide img{
  width:100%; height:100%;
  object-fit:cover;
}
#billboard > .text-box{
  flex:1;
  text-align:left;
  position:relative;
  text-align:center;
}
#billboard > .text-box::after{
  content:"";
  position:absolute;
  width:90px; height:auto;
  bottom:0; right:0;
  transform:translateY(100%);
  aspect-ratio:37/49;
  background-image:url(../../img/billboard/billboard-illust.png);
  background-repeat:no-repeat;
  background-position:center center;
  background-size:cover;
}

#billboard .text-box > h1{
  font-size:2.2rem; line-height:1.4;
  color:var(--main-color);
  margin-bottom:0.5rem;
}
#billboard p{
  font-weight: 600;
}
#billboard .text-box > h1 + p{
  font-size: 0.9rem;
  line-height: 1.6;
  margin-bottom:2rem;
}
p.service-title{
  font-size: 1.15em;
  line-height: 1.4;
  margin-bottom:0.55rem;
}
.marker{
  font-size:1.6rem;
  background:linear-gradient(
    transparent 70%,
    #ff0 70%
  );
  padding-left:0.1rem;
}
ul.strength{
  display:flex;
  flex-flow:wrap;
  justify-content:center;
  gap:0.2rem 1.5rem;
}
ul.strength li{
  width:30%;
  font-size:1.1rem;
  position:relative;
  padding-left:1.5rem;
  font-weight:600;
  text-align:left;
}
ul.strength li > small{
  font-size:0.7rem;
}
ul.strength li::before{
  font-family:var(--bootstrap);
  content:"\F26C";
  position:absolute;
  top:0; left:0;
  color:red;
}
#container.contents{
  margin-top:120px;
}
#kurafuru-container.content,
.index-contents{
  box-sizing:border-box;
  width:100%;
  max-width:1600px;
  padding:0 var(--side-padding);
  margin:0 auto;
  margin-bottom:7rem;
  position:relative;
}
.index-contents section{
  box-sizing:border-box;
  width:100%;
  padding:3.0rem 3.5rem 5rem;
  background:#fff;
  border-radius:0.75rem;
}
#price .price-description section{
  padding-top:6rem;
}
.index-contents section:nth-child(3) .additional-function{
display:flex;
justify-content:center;
gap:2rem;
}
.index-contents section:nth-child(3) .additional-function ul li{
text-align:left;
}
.index-contents h2{
  font-size:1.8rem; line-height:1.8;
  position:relative;
  margin-bottom:1rem;
}
.index-contents h3{
  font-size:1.4rem; line-height:1.6;
  position:relative;
}

#problem h2 > div{
  font-size:0.75em;
  color:var(--main-color);
}
ul.problem-list{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:0 3rem;
  margin:1.5rem auto 0;
}
ul.problem-list > li{
  box-sizing:border-box;
  width:calc((100% - 3.0rem * 3) / 4);
}
ul.problem-list > li > figure{
  width:84%;
  margin:0 auto;
}
ul.problem-list > li > figcaption{
  font-size:1.0rem; line-height:1.6; font-weight:var(--bold);
  margin-top:0.5em;
//  border-radius:9999px;
//  border:1px solid #999;
//  padding:0.75rem 1.5rem
}
#problem .solution{
  font-size:2.0rem; line-height:1.6; font-weight:var(--bold);
  margin:6rem auto 0;
}
#problem .solution > div{
  font-size:0.75em;
}
#problem .solution > strong{
  font-weight:var(--bold);
  color:var(--main-color);
}

#feature.index-contents{
  background:#fff;
  padding:8rem var(--side-padding)6rem;
  margin-bottom:0;
}
#feature p > strong{
  font-size:1.2em;
  line-height:1.4;
}
#feature.index-contents > p{
  line-height:2.0;
  margin-bottom:4.0rem;
}
#feature.index-contents ul li strong{
  font-size:1.1rem;
  line-height:1.4;
}

/* 全体 */
.feature-box {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap:30px;
  margin-top: 40px;
}

.feature-box li {
  background: #fff;
  border-radius: 12px;
  padding: 5px 20px 30px 20px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  list-style: none;
}
.feature-box li figure img {
  width: 30%;
  height: auto;
  margin:0 auto;
}
.feature-box li h3 {
  font-size: 16px;
  font-weight: bold;
  color:var(--main-color);
  margin-bottom: 8px;
}
.feature-box li p {
  font-size: 13px;
  line-height: 1.6;
  color: #333;
}

.feature > .feature-detail:not(:last-of-type){
  margin-bottom:3.0rem;
}
.feature-detail{
  display:flex;
  flex-direction:row-reverse;
  justify-content:space-between;
  align-items:center;
  gap:0 3.0rem;
  overflow:hidden;
  position:sticky;
  top:100px;
  z-index:1;
  box-sizing:border-box;
  width:100%;
  padding:3.0rem 3.0rem;
  background:#f9f9f9;
  border-radius:0.75rem;
  transform-origin:top center;
  transition:0.3s;
}
.feature-detail.stacked{
  transform:scale(0.96);
  background:#fff;
}

.feature-detail figure{
  box-sizing:border-box;
  width:46%; height:100%;
  overflow:hidden;
  border-radius:0.5rem;
}
.feature-detail figure > img{
  width:100%; height:100%;
  object-fit:cover;
}
.feature-detail > .text-box{
  flex:1;
  text-align:left;
}
.feature-detail > .text-box > h3{
  font-size:1.5rem; line-height:1.6;
//  color:var(--main-color);
  margin-bottom:0.5em;
}
.feature-detail > .text-box > h3::before{
  content:attr(data-feature);
  display:block;
  width:fit-content;
  font-size:0.65em; line-height:2.0;
  color:var(--main-color);
  text-transform:capitalize;
  border-bottom:1px solid var(--main-color);
  margin-bottom:1.0em;
}

.feature-detail > .text-box > p{
  font-size:1.05rem;
}
.feature-detail > .text-box > ul{
  margin-top:1.5em;
}
.cta-box{
  border: 0.5rem solid rgba(196,0,3,0.1);
border-radius: 1rem;
padding: 2rem 0;
margin:1.5rem 0 2.5rem;
}

ul.feature-list{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:1.0rem 1.0rem;
}
ul.feature-list > li{
  box-sizing:border-box;
  width:calc((100% - 1.0rem * 2) / 3);
  background:#fff;
  border-radius:0.75rem;
  padding:1.5rem 2.0rem;
  text-align:left;
}
ul.feature-list > li > h3{
  font-size:1.1rem; line-height:1.5;
  color:#fff;
  text-align:center;
  background:var(--base-color);
  border-radius:9999px;
  padding:0.25em 0.25em;
  margin-bottom:0.5em;
}

#feature .feature-box .more-button{
  margin-top:1rem;
}
#feature .feature-box .more-button a{
  font-size:0.8rem;
  line-height:2.0;
  padding:0.2rem 2.5rem;
}
#cta.index-contents{
  background:#fff;
  padding:0.0rem var(--side-padding) 10.0rem;
  border-radius:1.5rem;
  margin-bottom:0;
}
#cta > .cta-box{
  border:0.5rem solid rgba(196,0,3,0.1);
  border-radius:1.0rem;
  padding:3.0rem 0 4.5rem;
  position:relative;
}
#cta h2{
  font-size:1.6rem; line-height:1.8;
  margin-bottom:0.75em;
}
#cta h2 > strong{
  display:block;
  width:fit-content;
  font-size:1.35rem; line-height:1.8; font-weight:inherit;
  color:#fff;
  letter-spacing:0.05em;
  background:var(--main-color);
  padding:0 1.5em;
  border-radius:9999px;
  margin:0 auto 0.25em;
}
#cta h2 > span{
  font-size:1.2em;
  color:var(--main-color);
  margin-left:0.25em;
}
ul.price-feature{
  display:flex;
  justify-content:center;
  gap:0 0.5em;
  font-size:2.6rem; line-height:1.4; font-weight:var(--bold);
}
ul.price-feature li{
  background:linear-gradient(
    transparent 70%,
    #ff0 70%
  );
}
ul.price-feature{
  display:flex;
  justify-content:center;
  gap:0 0.5em;
  font-size:2.6rem; line-height:1.4; font-weight:var(--bold);
}
ul.price-feature li{
  background:linear-gradient(
    transparent 70%,
    #ff0 70%
  );
}
.price{
  font-family:var(--eng-font);
  font-size:2.4rem; line-height:1.2; font-weight:var(--heavy);
  display:flex;
  justify-content:center;
  align-items:baseline;
  gap:0 0.2em;
}
.price > strong{
  font-size:2.8em; font-weight:inherit;
/*
  -webkit-text-stroke:2px #d00;
  text-stroke:2px #d00;
  color:#fff;
*/
  color:var(--main-color);
}
.cta-box .button{
  width:fit-content;
  margin:0 auto;
  position:absolute;
  bottom:0; left:50%;
  transform:translate(-50%,calc(50% + 0.25rem));
}
.cta-box .button a{
  display:block;
  text-decoration:none;
  font-size:1.25rem; line-height:3.0; font-weight:var(--bold);
  color:var(--base-color);
  background:#fff;
  border:2px solid var(--main-color);
  border-radius:9999px;
  padding:0.25rem 4.0rem;
  overflow:hidden;
  position:relative;
  transition:0.2s;
}
.cta-box .button a:hover{
  color:#fff;
  border-color:var(--main-color);
}
.cta-box .button a > span{
  position:relative;
}
.cta-box .button a::before{
  content:"";
  width:100%; height:100%;
  background:var(--main-color);
  position:absolute;
  top:0; left:0;
  transform:scaleX(0);
  transition:0.2s;
}
.cta-box .button a:hover::before{
  transform:scaleX(1);
}
.cta-box .button a::after{
  content:"";
  width:0.4rem; height:auto;
  aspect-ratio:0.5/1;
  clip-path: polygon(0 0, 0% 100%, 100% 50%);
  background:var(--main-color);
  position:absolute;
  top:50%; right:1.0em;
  transform:translate(0,-50%);
  transition:0.2s;
}
.cta-box .button a:hover::after{
  background:#fff;
}

#package{
  background:#fff;
  padding:6.0rem var(--side-padding) 8.0rem;
  margin-bottom:8.0rem;
  border-radius:1.5rem;
}
#package::before,
#feature.index-contents::before
{
  content:attr(data-text);
  font-family:var(--eng-font);
  font-size:10.8vw; line-height:1; font-weight:var(--heavy);
  font-size:5.0rem;
  color:#f9f9f9;
  -webkit-text-stroke:1px #ccc;
  text-stroke:1px #ccc;
  color:#fff;
  white-space:nowrap;
  text-transform:uppercase;
  position:absolute;
  top:4%; left:50%;
  transform:translate(-50%,0);
}
#package > h2{
  display:flex;
  justify-content:center;
  align-items:baseline;
  gap:0 1.0rem;
}
#package > h2 > .label{
  font-size:0.85em;
}
ul.basic-package{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:1.0rem 1.0rem;
  margin:2.0rem 0 0;
}
ul.basic-package > li{
  box-sizing:border-box;
  width:calc((100% - 1.0rem * 5)/6);
  background:#fff;
//  border:1px solid var(--main-color);
  border-radius:0.5rem;
  padding:1.0rem 1.0rem;
  filter:drop-shadow(2px 2px 4px #ccc);
  filter:drop-shadow(1px 1px 4px #ddd);
}
ul.basic-package > li > figure{
  width:50%;
  margin:0 auto;
}
ul.basic-package > li > figcaption > h3{
  font-size:1.0rem; line-height:1.6;
  color:var(--main-color);
}
ul.basic-package > li > figcaption > p{
  font-size:0.85rem; line-height:1.6;
  margin-top:0.5em;
}

#package .price{
  font-family:var(--eng-font);
  font-size:1.6rem; line-height:1.2; font-weight:var(--heavy);
  display:flex;
  justify-content:center;
  align-items:baseline;
  gap:0 0.2em;
}
#package .price > strong{
  font-size:2.4em; font-weight:inherit;
  color:var(--main-color);
}
#package ul.price-feature{
  display:flex;
  justify-content:center;
  gap:0 0.5em;
  font-size:1.4rem; line-height:1.4; font-weight:var(--bold);
  margin:0.5em 0 0.25em;
}
#package ul.kigou-list{
  width:fit-content;
  margin:0 auto;
  font-size:0.8rem; line-height:1.8;
}

#option{
//  background:#fff;
  padding:6.0rem var(--side-padding) 8.0rem;
  margin-bottom:0;
}
#option::before{
  content:attr(data-text);
  font-family:var(--eng-font);
  font-size:10.8vw; line-height:1; font-weight:var(--heavy);
  font-size:5.0rem;
  color:#f9f9f9;
  -webkit-text-stroke:1px #eee;
  text-stroke:1px #ccc;
  color:#fcfcfc;
  white-space:nowrap;
  text-transform:uppercase;
  position:absolute;
  top:0; left:50%;
  transform:translate(-50%,0);
}
.contents #price .option{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:3rem;
  margin:1rem 0 0;
  background-color:#fbf5f7;
  border-radius:15px;
  padding:3rem;
}
.contents #price .option:first-child::after{
  width:80%;
  content:"";
  border:1px solid #999;
}
.contents #price .option .option-box{
  display: flex;
  text-align: left;
  justify-content:center;
  gap:2rem;
}
.option-box figure{
  width:35%; height:auto;
  aspect-ratio:4/2.5;
  overflow:hidden;
  border-radius:10px;
}
.option-box figure img{
  width:100%; height:100%;
  object-fit:cover;
}

#option h3{
  font-size:1.85vw; line-height:1.6;
  display:flex;
  justify-content:center;
  align-items:baseline;
  gap:0 1.0rem;
  margin-bottom:0.5rem;
}
#option h3 > .plan-name{
  font-size:0.8em;
}
#option .text-box > p{
  margin:1.0em 0;
}
#option .price{
  font-family:var(--eng-font);
  font-size:1.5rem; line-height:1.2; font-weight:var(--heavy);
  display:flex;
  justify-content:center;
  align-items:baseline;
  gap:0 0.2em;
}
#option .price > strong{
  font-size:2.4em; font-weight:inherit;
  color:var(--main-color);
}
#option .price-caution{
  font-size:1.05rem; line-height:1.6;
}
.additional-function{
  margin-top:1.5rem;
}

#option ul.kigou-list{
  width:fit-content;
  margin:0 auto;
  font-size:0.8rem;
  color:var(--base-light-color);
}

.contents #price .option-plus{
  box-sizing:border-box;
  width:100%;
  border-radius:1.0rem;
  overflow:hidden;
  background:#fff;
  filter:drop-shadow(1px 1px 4px #ddd);
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.contents #price .option-plus figure{
  width:47.0%; height:auto;
  overflow:hidden;
}
.contents #price .option-plus figure + .text-box{
  flex:1;
  padding:0 2rem;
}
.price-description{
  background-color:#fff;
  border-radius:10px;
}

p.kigou-list{
  font-size: 0.8rem;
  line-height:1.4;
}
.additional-function .text-box{
  padding-top:0 !important;
}
#price p strong:first-of-type {
  display: inline-block;
  font-size: 1.8rem;
color: var(--main-color);
  background: linear-gradient( transparent 70%, #ff0 70% );
  padding: 0 0.2em;
}
#price p strong:nth-of-type(2) {
  font-size: 2.4rem;
color: var(--main-color);
  margin: 0 0.15em;
}
#price p strong span.small{
  font-size: 1.5rem;
  font-weight:900;
}
#price p span.small{
  font-size:0.7em;
}
#price{
  background:#fff;
  padding:6rem var(--side-padding) 4rem;
  border-radius:10px;
}
#price::before{
  content:attr(data-text);
  font-family:var(--eng-font);
  font-size:10.8vw; line-height:1; font-weight:var(--heavy);
  font-size:5.0rem;
  color:#f9f9f9;
  -webkit-text-stroke:1px #ccc;
  text-stroke:1px #ccc;
  color:#fff;
  white-space:nowrap;
  text-transform:uppercase;
  position:absolute;
  top:2%; left:50%;
  transform:translate(-50%,0);
}
.contents #price{
  background:none;
  margin-bottom:0;
  padding-top:0;
  padding-bottom:0;
}
ul.price-list{
  display:flex;
  justify-content:center;
  gap:2rem;
  margin-top:1.5rem;
}
.contents #price ul.price-list{
  gap:0.5rem;
}
.contents #price ul.price-list > li{
  margin-bottom:3rem;
}
ul.price-list > li{
  box-sizing:border-box;
  width:38%;
  margin-bottom:0;
/*
  border:0.25rem solid rgba(196,0,3,0.1);
  border-color:var(--main-color);
*/
  border-radius:1.0rem;
  background:#fff;
  overflow:hidden;
  filter:drop-shadow(1px 1px 4px #ddd);
  position:relative;
}
ul.price-list > li > h3{
  font-size:1.1rem; line-height:1.0;
  padding-bottom:0.25rem;
  padding:1.5rem 0 0.5rem;
  color:#fff;
  background:rgba(196,0,3,0.1);
  background:var(--main-color);
  border-radius:0.25rem 0.25rem 0 0;
  position:relative;
  z-index:10;
  margin:0 0.5rem;
  margin:0;
}
ul.price-list > li > h3 > .eng{
  display:block;
  font-family:var(--eng-font);
  font-size:1.6em; line-height:1.0;
  text-transform:uppercase;
  margin-bottom:0.5rem;
}
ul.price-list > li > h3::after{
  content:"";
  width:100%; height:auto;
  aspect-ratio:10/0.8;
  clip-path: polygon(100% 0, 0 0, 50% 100%);
  background:var(--main-color);
  position:absolute;
  bottom:0; left:0;
  transform:translate(0,98%);
}
ul.price-list > li > .text-box{
  padding:3.5rem 1.0rem 2.5rem;
}
#price{
  padding-bottom:4rem;
}
#price .price{
  font-family:var(--eng-font);
  font-size:1.3rem; line-height:1.2; font-weight:var(--heavy);
  display:flex;
  justify-content:center;
  align-items:baseline;
  gap:0 0.2em;
}
#price .price > strong{
  font-size:3em; font-weight:inherit;
  color:var(--main-color);
}
#price .price-notax{
  font-family:var(--eng-font);
  font-size:1.0rem; line-height:1.8; font-weight:var(--bold);
  color:var(--base-light-color);
}
#price .price-notax > strong{
  font-size:1.05em; font-weight:inherit;
}
#price .price-notax::before{
  content:"（";
}
#price .price-notax::after{
  content:"）";
}
#price .plus > .price{
  font-size:1.05rem; line-height:1.2; font-weight:var(--heavy);
}
#price .plus > .price > strong{
  color:var(--base-color);
}
.index-contents #price p{
  font-size:0.95rem; line-height:1.6;
  margin-bottom:4rem;
}
#price .plus{
  margin-top:1.5rem;
}
#price section:nth-child(1) .price-container::after{
  content: "";
  width: 260px;
  height: auto;
  aspect-ratio: 700/530;
  background-image: url(../../img/price/01.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  display: block;
  margin: 1.5rem 0 0;
  position:absolute;
  top:-5%;
  left:5%;
}
.price-container h3{
  font-size:1.4rem; line-height:1.6;
  margin-bottom:0;
}
#price .difference{
  margin-top:6.0rem;
  margin-bottom:0;
}
#price .difference > .text-box{
  padding:1.5rem 2.0rem;
  border:2px solid #999;
  border-color:var(--main-color);
  border-radius:1.0rem;
}
#price .difference > .text-box > ul.kigou-list{
  width:fit-content;
  font-size:0.75rem; line-height:1.6;
  text-align:left;
  margin:1.0rem 0 0 auto;
}
table.price-table{
  width:100%;
  border-collapse:collapse;
  border-spacing:0;
  table-layout:fixed;
  font-size:0.95rem; line-height:1.8;
}
table.price-table > thead > tr{
//  border-bottom:3px double #999;
}
table.price-table > thead > tr > th{
  padding:0 0.25em;
  padding-bottom:1.0em;
  font-size:1.05em; line-height:4.0; font-weight:var(--bold);
  color:var(--main-color);
}
table.price-table > thead > tr > th:not(:first-child){
//  border-left:1px dashed #999;
}
table.price-table > thead > tr > th > span{
  display:block;
  background:var(--main-color);
  border-radius:0.25rem 0.25rem 0 0;
  color:#fff;
  position:relative;
}
table.price-table > thead > tr > th > span::after{
  content:"";
  width:100%; height:auto;
  aspect-ratio:10/1.0;
  clip-path: polygon(100% 0, 0 0, 50% 100%);
  background:var(--main-color);
  position:absolute;
  bottom:0; left:0;
  transform:translate(0,98%);
}
table.price-table > tbody > tr:not(:last-child){
  border-bottom:1px solid #ccc;
}
table.price-table > tbody > tr > th{
  font-weight:var(--bold);
  color:var(--base-light-color);
  text-align:left;
  padding:1.5em 0.5em;
}
table.price-table > tbody > tr > th > span{
  font-size:0.9em;
}
table.price-table > tbody > tr > td{
  border-left:1px dashed #999;
  padding:1.5em 1.5em;
}
table.price-table > tbody > tr > td > strong{
  font-family:var(--eng-font);
  font-size:1.1em;
}
table.price-table > tbody > tr > td > .check,
table.price-table > tbody > tr > td > .bar{
  display:block;
  width:1.6rem; height:auto;
  aspect-ratio:1/1;
  color:transparent;
  margin:0 auto;
  position:relative;
}
table.price-table > tbody > tr > td > .check::after,
table.price-table > tbody > tr > td > .bar::after{
  font-family:var(--bootstrap);
  font-size:1.6rem; line-height:1;
  color:var(--base-color);
  position:absolute;
  top:0; left:0;
}
table.price-table > tbody > tr > td > .check::after{
  content:"\F28A";
}
table.price-table > tbody > tr > td > .bar::after{
  content:"\F63B";
}

.difference{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:0 1.5rem;
  padding:4rem 0;
}
.difference > .title{
  flex:1;
  text-align:left;
  padding-top:1.5rem;
}
/*
.difference h3::after{
  content:"";
  width:100%; height:0.1em;
  background:var(--base-color);
  position:absolute;
  bottom:-0.5em; left:0;
}
*/
.difference > .text-box{
  box-sizing:border-box;
  width:855px;
  padding:2.0rem;
  background:#fff;
  border-radius:0.75rem;
}
.difference table.difference-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  table-layout:fixed;
  font-size:0.95rem; line-height:1.8;
}
.difference table.difference-table > thead > tr > th{
  padding:1.0em 0 1.0em;
}
.difference table.difference-table > thead > tr > th > strong{
  font-size:1.25em; font-weight:var(--bold);
}
.difference table.difference-table > thead > tr > th:nth-of-type(2){
  color:var(--main-color);
  border:2px solid var(--main-color);
  border-bottom:none;
  border-radius:0.5em 0.5em 0 0;
  background:rgba(196,0,3,0.02);
}
.difference table.difference-table > tbody > tr{
}
.difference table.difference-table > tbody > tr > th{
  border-top:1px solid #ccc;
  font-weight:var(--bold);
  color:var(--base-light-color);
  text-align:left;
  padding:1.0em 1.5em;
}
.difference table.difference-table > tbody > tr > td{
  border-top:1px solid #ccc;
  padding:1.0em 1.5em;
}
.difference table.difference-table > tbody > tr > td:first-of-type{
  font-weight:var(--bold);
  border-left:2px solid var(--main-color);
  border-right:2px solid var(--main-color);
  background:rgba(196,0,3,0.02);
}
.difference table.difference-table > tbody > tr:last-of-type > td:first-of-type{
  padding-bottom:1.5em;
  border-radius:0 0 0.5em 0.5em;
  border-bottom:2px solid var(--main-color);
}

#comission{
  background:#fff;
  padding:6rem var(--side-padding) 4rem;
  border-radius:1.5rem;
}
#comission::before{
  content:attr(data-text);
  font-family:var(--eng-font);
  font-size:10.8vw; line-height:1; font-weight:var(--heavy);
  font-size:5.0rem;
  color:#f9f9f9;
  -webkit-text-stroke:1px #ccc;
  text-stroke:1px #ccc;
  color:#fff;
  white-space:nowrap;
  text-transform:uppercase;
  position:absolute;
  top:8.0rem; left:50%;
  transform:translate(-50%,0);
}
#comission > h3{
  font-size:1.5rem; line-height:1.6;
  color:var(--main-color);
  margin:1em 0 2.0rem;
}
section #comission::before{
  display:none;
}
.compare{
  box-sizing:border-box;
  padding:3.0rem 3.0rem;
  display:flex;
  flex-direction:row-reverse;
  justify-content:space-between;
  gap:0 3.0rem;
}
.compare > figure{
  width:220px;
}
.compare > .text-box{
  flex:1;
}
.compare > .text-box > h3 + p{
  font-size:0.9rem; line-height:1.8;
  margin-top:1.5em;
  margin-bottom:0.75em;
}

.compare table.compare-table{
  width:100%;
  border-collapse:collapse;
  table-layout:fixed;
  font-family:var(--eng-font);
  font-size:1.0rem; line-height:1.6;
  background:#fff;
  margin-bottom:2.0rem;
}
.compare table.compare-table caption{
  font-size:0.9rem; line-height:1.8;
  text-align:right;
  margin-bottom:0.5em;
}
.compare table.compare-table > thead > tr > th{
  font-size:0.95em;
  padding:0.5em 0;
  background:#f9f9f5;
}
.compare table.compare-table > thead > tr > th > span{
  display:block;
  font-size:0.9em;
  font-weight:var(--normal);
}
.compare table.compare-table > tbody > tr{
  border-top:1px solid #ccc;
}
.compare table.compare-table > tbody > tr > th{
  font-weight:var(--bold);
  color:var(--base-light-color);
  text-align:left;
  padding:1.0em 0;
}
.compare table.compare-table > tbody > tr > td{
  padding:0.75em 0;
}
.compare table.compare-table > tbody > tr > td.savings-cell{
  font-size:1.1em; font-weight:var(--bold);
  color:var(--main-color);
}
.compare table.compare-table > tbody > tr > td.savings-cell > span{
  font-size:0.95em; font-weight:var(--normal);
}
.compare .compare-result{
  text-align:left;
}
.compare .compare-result > ul.kigou-list{
  font-size:0.8rem;
  margin-top:1.5em;
}

#design.index-contents .design{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0 2rem;
}
#design.index-contents .design > .title{
  flex:1;
  text-align: left;
}
#design.index-contents figure{
  width:750px;
}
#design .more-button a{
  font-size:1rem;
}
.more-button{
  margin-top:3rem;
}
.more-button a{
  display: inline-block;
  text-decoration: none;
  font-size:0.9rem;
  line-height: 2.5;
  font-weight: var(--bold);
  color: var(--base-color);
  border: 1px solid var(--base-light-color);
  border-radius: 9999px;
  padding: 0.25rem 3.5rem;
  overflow: hidden;
  position: relative;
  transition: 0.2s;
}
.more-button a:hover{
  color:#fff;
  border-color:var(--main-color);
}
.more-button a::after{
  content: "";
  width: 0.4rem;
  height: auto;
  aspect-ratio: 0.5/1;
  clip-path: polygon(0 0, 0% 100%, 100% 50%);
  background: var(--base-light-color);
  position: absolute;
  top: 50%;
  right: 1em;
  transform: translate(0,-50%);
  transition: 0.2s;
}
.more-button a:hover::after{
  background:#fff;
}
.more-button a::before{
  content: "";
  width: 100%;
  height: 100%;
  background: var(--main-color);
  position: absolute;
  top: 0;
  left: 0;
  transform: scaleX(0);
  transform-origin: left; /* ← これだけ追加 */
  transition: 0.2s;
}
.more-button a:hover::before{
  transform:scaleX(1);
}

.more-button a > span{
  position:relative;
}

ul.case-menu{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:0 0.5rem;
  margin:2.0rem auto 0 2.5rem;
  margin:2.0rem auto 0;
  width:fit-content;
  position:relative;
  z-index:10;
}
ul.case-menu > li{
  color:var(--base-light-color);
  font-weight:var(--bold);
  background:#ccc;
  padding:0.5rem 3.5rem;
  border-radius:9999px;
  cursor:pointer;
  position:relative;
}
ul.case-menu > li.active{
  color:var(--key-color01);
  background:#fff;
  filter:drop-shadow(1px 1px 4px #ccc);
}
ul.case-menu > li.active::after{
  content:"";
  width:2.0rem; height:auto;
  aspect-ratio:1/0.5;
  clip-path: polygon(0 0, 50% 100%, 100% 0);
  background:#fff;
  position:absolute;
  bottom:0; left:50%;
  transform:translate(-50%,96%);
}
.case-contents{
  display:none;
  margin-top:-1.4rem;
}
.case-contents.active{
  display:block;
}
.case-contents > section{
  padding-top:4.0rem;
/*
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  flex-wrap:wrap;
  gap:0 3.0rem;
*/
}

.kurafuru-description{
  display:flex;
  justify-content:space-between;
  gap:3em;
}
.kurafuru-description > .title{
  flex:1;
  position:relative;
  text-align:left;
}
.kurafuru-description > .title::after{
  content: "";
  width: 250px;
  height: auto;
  aspect-ratio: 760/543;
  background-image: url(../../img/kurafuru/01.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  display: block;
  margin: 1.5rem auto 4em;
  position: relative;
}
.kurafuru-description figure{
  width:46%;
  height:80%;
  border-radius:10px;
  overflow:hidden;
}
.kurafuru-description figure img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.case-description{
  flex:1;
  box-sizing:border-box;
  margin-bottom:1.5rem;
}
.case-description > h3{
  width:100%;
  font-size:1.5rem; line-height:1.8;
  color:var(--key-color01);
  margin-bottom:0.5em;
}
.case-example{
  width:920px;
  width:92%;
  margin:0 auto;
}
.case-example h4{
  font-size:1.05rem; line-height:1.8;
  margin-bottom:0.5em;
}
.case{
  box-sizing:border-box;
  width:calc(100% - 4.8rem);
  margin:0 auto 2.4rem;
  background:rgba(0,78,162,0.01);
  border:1px solid var(--key-color01);
  border-radius:0.5rem;
  padding:2.5rem 2.5rem;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
}
.case > .flex{
  width:100%;
  justify-content:space-between;
  align-items:flex-start;
  gap:0 2.5rem;
}
.case figure{
  width:360px; height:auto;
  aspect-ratio:3/2;
  background:#f0f0f0;
}
.case .text-box{
  flex:1;
  box-sizing:border-box;
  text-align:left;
}
.case .text-box > h3{
  font-size:1.3rem; line-height:1.6;
  margin-bottom:1.5rem;
}
.case .text-box > h3 + .sdgs{
  margin-top:-1.5rem;
  margin-bottom:1.5rem;
}
.case ul.check-list > li::before{
  color:var(--key-color01);
}
.case-detail{
  box-sizing:border-box;
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  border-top:1px dashed #ccc;
  margin-top:0.75em;
  padding-top:0.75em;
}
.case-detail > .label{
  width:13em;
  font-size:0.9rem; line-height:1.8;
  font-weight:var(--bold);
  color:var(--base-light-color);
}

.swiper-container .swiper-button-prev,
.swiper-container .swiper-button-next{
  width:1.5rem; height:auto;
  aspect-ratio:1/1;
  color:var(--base-light-color);
  margin:0;
  position:absolute;
  top:calc(50% - 1.4rem);
}
.swiper-container .swiper-button-prev{
  left:0;
  transform:translate(0,-50%);
}
.swiper-container .swiper-button-next{
  right:0;
  transform:translate(0,-50%);
}
.swiper-container .swiper-button-prev::after,
.swiper-container .swiper-button-next::after{
  font-family:var(--google-icon);
  font-size:1.5rem; line-height:1;
  font-variation-settings:'wght' 200;
  text-align:center;
}
.swiper-container .swiper-button-prev::after{
  content:"\e2ea";
}
.swiper-container .swiper-button-next::after{
  content:"\e5e1";
}
.swiper-container .swiper-pagination-bullet{
  width:0.6rem; height:auto;
  aspect-ratio:1/1;
  border-radius:100%;
  margin:0 0.3em !important;
}
.swiper-container .swiper-pagination-bullet.swiper-pagination-bullet-active{
  background:var(--base-light-color);
}

.case-example > ul.sample-site{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:0 2.0rem;
  margin-bottom:1.5rem;
}
.case-example > ul.sample-site > li{
  box-sizing:border-box;
  width:360px;
  border:1px solid #ccc;
}
#example.index-contents{
  padding:6.0rem var(--side-padding) 8.0rem;
  margin-bottom:0;
}
#example.index-contents .text-box{
  text-align:left;
}
#example.index-contents::before{
  content:attr(data-text);
  font-family:var(--eng-font);
  font-size:10vw; line-height:1; font-weight:var(--heavy);
  font-size:5.0rem;
  color:#f9f9f9;
  -webkit-text-stroke:1px #eee;
  text-stroke:1px #ccc;
  color:#fcfcfc;
  white-space:nowrap;
  text-transform:uppercase;
  position:absolute;
  top:1%; left:50%;
  transform:translateX(-50%);
}

.example-box{
  margin-top:2.0rem;
}
.example-box > .slick-container{
  margin:0 auto;
}
.example{
  box-sizing:border-box;
  width:800px;
  background:#fff;
  border-radius:0.5rem;
  padding:2.5rem 3.0rem;
  margin:0 0.5rem;
}
.example > h3{
  font-size:1.4rem;
  color:var(--main-color);
  margin-bottom:0.25em;
}
.example > p{
  font-size:0.95rem; line-height:1.6;
}
.example ul.thumbnail{
  display:flex;
  justify-content:center;
  align-items:flex-start;
  gap:0 2.0rem;
  margin:1.5rem 0;
}
.example ul.thumbnail > li{
  width:auto; height:340px;
  overflow:hidden;
  border:1px solid #ccc;
  border-radius:0.25rem;
}
.example ul.thumbnail > li:first-child{
  aspect-ratio:3/2;
}
.example ul.thumbnail > li > img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:top center;
}
.example .site-data{
  font-size:0.9rem; line-height:2.0;
  margin-bottom:2.0rem;
}
.example .button{
  display:inline-block;
  margin:0 auto;
}
.example .button a{
  display:block;
  text-decoration:none;
  font-size:0.9rem; line-height:2.75; font-weight:var(--bold);
  color:var(--base-color);
  border:1px solid var(--base-light-color);
  border-radius:9999px;
  padding:0 2.5rem;
  overflow:hidden;
  position:relative;
  transition:0.2s;
}
.example .button a:hover{
  color:#fff;
  border-color:var(--main-color);
}
.example .button a > span{
  position:relative;
}
.example .button a::before{
  content:"";
  width:100%; height:100%;
  background:var(--main-color);
  position:absolute;
  top:0; left:0;
  transform:scaleX(0);
  transition:0.2s;
}
.example .button a:hover::before{
  transform:scaleX(1);
}
.example .button a::after{
  content:"";
  width:0.4rem; height:auto;
  aspect-ratio:0.5/1;
  clip-path: polygon(0 0, 0% 100%, 100% 50%);
  background:var(--base-light-color);
  position:absolute;
  top:50%; right:1.0em;
  transform:translate(0,-50%);
  transition:0.2s;
}
.example .button a:hover::after{
  background:#fff;
}

ul.flow-and-support{
  display:flex;
  justify-content:space-between;
}
ul.flow-and-support > li{
  box-sizing:border-box;
  width:49.0%;
  border:4px solid rgba(196,0,3,1);
  border-radius:1.5rem;
  overflow:hidden;
}
ul.flow-and-support > li > a{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:0 3.0rem;
  background:#fff;
  padding:2.5rem 2.0rem;
  text-decoration:none;
  color:var(--base-color);
}
ul.flow-and-support > li > a > figure{
  width:34%;
}
ul.flow-and-support > li > a > .text-box{
  flex:1;
  text-align:left;
}
ul.flow-and-support > li > a h3{
  font-size:1.6rem;
  color:var(--main-color);
}
ul.flow-and-support > li > a .button{
  width:fit-content;
  font-size:1.0rem; line-height:1.8; font-weight:var(--bold);
  color:var(--base-light-color);
  margin:1.0em 0 0;
  position:relative;
}
ul.flow-and-support > li > a .button::after{
  content:"";
  width:0.4rem; height:auto;
  aspect-ratio:0.5/1;
  clip-path: polygon(0 0, 0% 100%, 100% 50%);
  background:var(--base-light-color);
  position:absolute;
  top:50%; right:0;
  transform:translate(200%,-45%);
  transition:0.2s;
}
ul.flow-and-support > li > a:hover .button{
  color:var(--link-color);
}
ul.flow-and-support > li > a:hover .button::after{
  background:var(--link-color);
}

#flow > .title{
  position:sticky;
  top:100px;
  float:left;
}
#flow > .title > h2::after{
  content:"";
  width:280px; height:auto;
  aspect-ratio:1100/742;
  background-image:url(../../img/banner_flow.png);
  background-repeat:no-repeat;
  background-position:center center;
  background-size:cover;
  display:block;
  margin:1.5rem 0 0;
}
#flow > .flow-box{
  width:880px;
  text-align:left;
  margin:0 0 0 auto;
  padding-top:0.5rem;
}
ul.flow{
  display:flex;
  flex-direction:column;
  gap:4.0rem 0;
  margin:2.5rem 0 0;
  position:relative;
}
ul.flow > li{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:0 2.5rem;
  background:#fff;
  padding:2.0rem 3.0rem;
  border-radius:0.5rem;
  position:relative;
  z-index:1;
  filter:drop-shadow(1px 1px 4px #eee);
}
ul.flow > li:not(:last-child)::after{
  content:"";
  width:2.0rem; height:auto;
  aspect-ratio:1/0.5;
  clip-path: polygon(0 0, 50% 100%, 100% 0);
  background:var(--main-color);
  background:rgba(196,0,3,0.6);
  position:absolute;
  bottom:0; left:0; z-index:1000;
  transform:translate(2.75rem,2.5rem);
}
ul.flow > li > .num{
  font-family:var(--eng-font);
  font-size:1.2rem; line-height:1.8; font-weight:var(--heavy);
  color:var(--main-color);
  position:relative;
}
ul.flow > li > .num > span{
  position:relative;
  z-index:100;
}
ul.flow > li > .num::before{
  content:"";
  width:3.5em; height:auto;
  aspect-ratio:1/1;
  border-radius:100%;
  background:#fff;
  border:1px solid var(--main-color);
  position:absolute;
  top:50%; left:50%; z-index:10;
  transform:translate(-50%,-50%);
}
ul.flow > li > .text-box{
  flex:1;
  text-align:left;
}
ul.flow > li > .text-box > p{
  font-size:0.95rem; line-height:1.6;
  padding-top:0.1em;
  margin-right:0.5em;
}

.support-feature,
.design-feature,
.kurafuru-container{
  margin-top:2.0rem;
}
.support-feature .support-description{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:0 4.5rem;
  text-align:left;
  margin-bottom:1.0rem;
}
.support-feature .support-description > .title{
  flex:1;
  position:relative;
}
.support-feature .support-description > .title::after{
  content:"";
  width:280px; height:auto;
  aspect-ratio:1100/742;
  background-image:url(../../img/banner_support.png);
  background-repeat:no-repeat;
  background-position:center center;
  background-size:cover;
  display:block;
  margin:2.5rem auto 0;
  position:relative;
}
.support-feature .support-description > ul.support-feature-list{
  width:50%;
  display:flex;
  flex-direction:column;
  gap:2.5rem 0;
}
ul.support-feature-list > li > h3{
  position:relative;
}
ul.support-feature-list > li > h3::before{
  content:attr(data-point);
  display:block;
  font-size:0.9rem; line-height:1.8;
  color:#FF7A00;
  text-transform:uppercase;
  border-bottom:1px solid #FF7A00;
  width:fit-content;
  margin-bottom:0.25em;
}

ul.support-list{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:0.8rem 0.8rem;
  margin-top:3.0rem;
}
ul.support-list > li{
  box-sizing:border-box;
  width:calc((100% - 1.0rem * 2) / 3);
  background:#fff;
  background:rgba(255, 235, 187, 0.25);
  background:rgba(247, 242, 233, 0.5);
  border-radius:0.75rem;
  padding:1.25rem 1.75rem 1.5rem;
  text-align:left;
}
ul.support-list > li > figure{
  width:33%;
  margin:1.5em auto;
}
ul.support-list > li > h3{
  font-size:1.2rem; line-height:1.6;
  color:var(--main-color);
  color:#FF7A00;
  text-align:center;
}
ul.support-list > li > h3 > span{
  font-size:0.8em;
}
ul.support-list > li > p{
  font-weight:var(--bold);
  text-align:center;
}
ul.support-list > li > ul.check-list{
  font-size:0.9rem;
  margin-top:0.5em;
}
ul.support-list > li > ul.check-list > li::before{
  color:#FF7A00;
}
ul.support-list > li > ul.kigou-list{
  font-size:0.9rem;
}

/* デザイン */
.design-linkbtn{
  margin:2rem 0 0;
}
.design-linkbtn a{
  color:#111;
  background:#fff;
  border-radius:9999px;
  border:1px solid var(--main-color);
  padding:0.5em 2em;
  margin:0 0.15rem;
  display:inline-block;
}
.design-linkbtn a:hover{
  text-decoration:none;
}
#design-warm .design-linkbtn a:not(:nth-of-type(1)):hover{
  color: var(--main-color);
}
#design-warm .design-linkbtn a:nth-of-type(1){
  color:#fff;
  background:var(--main-color);
  padding:0.4em 2em 0.5em;
  filter:drop-shadow(1px 1px 3px #ccc);
  position:relative;
}
#design-warm .design-linkbtn a:nth-of-type(1)::after{
  content:"";
  position:absolute;
  bottom:-8px;
  left:50%;
  transform:translateX(-50%);
  width:0;
  height:0;
  border-left:10px solid transparent;
  border-right:10px solid transparent;
  border-top:10px solid var(--main-color);
}
#design-clean .design-linkbtn a:not(:nth-of-type(2)):hover{
  color: var(--main-color);
}
#design-clean .design-linkbtn a:nth-of-type(2){
  color:#fff;
  background:var(--main-color);
  padding:0.4em 2em 0.5em;
  filter:drop-shadow(1px 1px 3px #ccc);
  position:relative;
}
#design-clean .design-linkbtn a:nth-of-type(2)::after{
  content:"";
  position:absolute;
  bottom:-8px;
  left:50%;
  transform:translateX(-50%);
  width:0;
  height:0;
  border-left:10px solid transparent;
  border-right:10px solid transparent;
  border-top:10px solid var(--main-color);
}
#design-lively .design-linkbtn a:not(:nth-of-type(3)):hover{
  color: var(--main-color);
}
#design-lively .design-linkbtn a:nth-of-type(3){
  color:#fff;
  background:var(--main-color);
  padding:0.4em 2em 0.5em;
  filter:drop-shadow(1px 1px 3px #ccc);
  position:relative;
}
#design-lively .design-linkbtn a:nth-of-type(3)::after{
  content:"";
  position:absolute;
  bottom:-8px;
  left:50%;
  transform:translateX(-50%);
  width:0;
  height:0;
  border-left:10px solid transparent;
  border-right:10px solid transparent;
  border-top:10px solid var(--main-color);
}


.design-customize{
  display:flex;
  justify-content:space-between;
  gap:4rem;
  margin:5rem 0 0;
  background-color:rgba(247, 242, 233, 0.5);
  padding:4rem 4rem 5.5rem 4rem;
  border-radius:0.75rem;
}
.design-feature h3{
  color:var(--main-color);
}
figure.design-image img{
  margin:2rem auto;
  display:block;
}
.design-customize .text-box{
  flex:1;
  text-align:left;
  position:relative;
}
.design-customize .text-box::after{
  content: "";
  width: 280px;
  height: auto;
  aspect-ratio: 4/3;
  background-image: url(../../img/design/design-illust.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  display: block;
  margin: 2.5rem auto 0;
  position: absolute;
}
.design-customize .text-box h3{
  color:#FF7A00;
  margin-bottom:0.75rem;
}
.design-slider {
  width: 45%;
  position: relative;
}
.slide-item {
  position:relative;
  width: 100%;
}
.image-wrapper {
  width: 100%;
  padding:0 0 1.5rem 0;
}
.main-image {
  width: 90%;
  height: auto;
  display: block;
}
.side-image {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 150px;
  height: auto;
  z-index: 2;
}

.design-slider .slick-dots li button:before{
  font-size:10px;
  color:#999;
}
.design-slider .slick-dots li.slick-active button:before{
  color:var(--main-color);
}
.design-slider button.slick-prev,
.design-slider button.slick-next{
	z-index:10;
}
.design-slider .slick-prev{left:-2.8rem;}
.design-slider .slick-next{right:-1.8rem;}
.design-slider button.slick-prev::before,
.design-slider button.slick-next::before{
	font-family:var(--google-icon);
	font-size:2.2rem; line-height:1;
	color:var(--base-light-color);
	font-variation-settings:'wght' 200;
	opacity:0.8;
	position:absolute;
	top:0; left:0;
}
.design-slider button.slick-prev::before{
	content:"\f591";
	transform:rotate(180deg);
}
.design-slider button.slick-next::before{
	content:"\f591";
}
.design-slider div.slick-prev::before,
.design-slider div.slick-next::before{
	content:"";
	display:none;
}

.faq{
  display:flex;
  justify-content:center;
  align-items:flex-start;
  gap:0 5.0rem;
}
.faq > .title{
  text-align:right;
}
.faq > .title > .more > a{
  text-decoration:none;
  font-size:0.85rem; line-height:1.8;
  color:var(--base-color);
  position:relative;
  padding-right:1.5rem;
}
.faq > .title > .more > a::after{
  font-family:var(--bootstrap);
  content:"\F138";
  position:absolute;
  top:50%; right:0;
  transform:translate(0, -45%);
}
.faq > .title > .more > a:hover{
  color:var(--link-color);
}
.faq > .faq-box{
  box-sizing:border-box;
  width:880px;
}
ul.faq-list > li{
  text-align:left;
  padding:1.5em 0;
}
ul.faq-list > li:first-child{
  padding-top:0.5em;
}
ul.faq-list > li:not(:last-child){
  border-bottom:1px solid #ccc;
}

ul.faq-list li .question{
  position:relative;
  padding:0 3em 0 44px;
  cursor:pointer;
}
ul.faq-list li .question::before{
  content:"Q";
  width:32px; height:auto;
  aspect-ratio:1/1;
  border-radius:100%;
  background:var(--main-color);
  font-size:1.05em; line-height:28px; font-weight:var(--bold);
  text-align:center;
  color:#FFF;
  position:absolute;
  top:0em; left:0;
}
ul.faq-list li .question span{
  width:1.0em; height:1.0em;
  position:absolute;
  top:0.6em; right:0.25rem;
}
ul.faq-list li .question span:before{
  content:"";
  width:100%;
  border-top:0.15rem solid var(--main-color);
  position:absolute;
  top:50%; left:0;
  transform:translateY(-50%);
}
ul.faq-list li .question span:after{
  content:"";
  height:100%;
  border-left:0.15rem solid var(--main-color);
  position:absolute;
  top:0; left:50%;
  transform:translateX(-50%) rotate(0);
  transition:0.2s;
}
ul.faq-list li .question.open span:after{
  content:"";
  height:100%;
  border-left:0.15rem solid var(--main-color);
  position:absolute;
  top:0; left:50%;
  transform:translateX(-50%) rotate(-90deg);
  transition:0.2s;
}
ul.faq-list li .answer{
  display:none;
  padding:0 3em 0 44px;
  margin:1em 0 0;
  font-size:1.05rem; line-height:1.8;
  font-weight:var(--bold);
  color:var(--base-color);
}
ul.faq-list li .answer p{
  text-indent:0;
  margin:0;
}
ul.faq-list li .answer p strong{
  font-weight:var(--bold);
  background:linear-gradient(
    transparent 70%,
    #ff0 70%,
    #ff0 100%
  );
}
ul.faq-list li .answer ul > li{
  list-style:disc outside;
  margin-left:1.25em;
}

.contents .faq{
  display:block;
}
.contents .faq > .title{
  position:sticky;
  top:100px;
  float:left;
}
.contents .faq > .faq-box{
  margin:0 0 0 auto;
}

.news{
  display:flex;
  flex-direction:row-reverse;
  justify-content:center;
  align-items:flex-start;
  gap:0 5.0rem;
  margin-bottom:6.0rem;
}
.news > .title{
  text-align:right;
}
.news > .title > .more > a{
  text-decoration:none;
  font-size:0.85rem; line-height:1.8;
  color:var(--base-color);
  position:relative;
  padding-right:1.5rem;
}
.news > .title > .more > a::after{
  font-family:var(--bootstrap);
  content:"\F138";
  position:absolute;
  top:50%; right:0;
  transform:translate(0, -45%);
}
.news > .title > .more > a:hover{
  color:var(--link-color);
}
.news > .text-box{
  box-sizing:border-box;
  width:880px;
  padding:2.5rem 3.0rem;
  background:#fff;
  border-radius:0.75rem;
  text-align:left;
}

ul.news-list > li:not(:last-child){
  padding-bottom:1.5rem;
  margin-bottom:1.5rem;
  border-bottom:1px solid #ccc;
}
ul.news-list > li > a{
  display:block;
  text-decoration:none;
  color:var(--base-light-color);
}
ul.news-list > li > a > .entry-date{
  font-size:0.9rem; line-height:1.8;
  margin-bottom:0.5em;
}
ul.news-list > li > a > .entry-date > .category{
  display:inline-block;
  margin-left:0.5em;
  position:relative;
}
ul.news-list > li > a > .entry-date > .category > span{
  display:block;
  font-size:0.8em; line-height:1.8; font-weight:var(--bold);
  text-align:center;
  background:#ededed;
  padding:0 1.0em;
  border-radius:9999px;
}
ul.news-list > li > a > h3{
  font-size:1.0rem; line-height:1.6;
  color:var(--link-color);
}
ul.news-list > li > a:hover > h3{
  text-decoration:underline;
}

.contents .news{
  flex-direction:row;
  justify-content:space-between;
}
.contents .news:has(+ .pagenavi-box){
  margin-bottom:2.0rem;
}

.contents .news > .text-box{
  width:940px;
}



#about{
  box-sizing:border-box;
  width:100%;
  background:#fff;
  padding:6.0rem 0;
}
#about > .index-contents{
  box-sizing:border-box;
  width:100%;
  max-width:1600px;
  padding:0 var(--side-padding);
  margin:0 auto;
  /*
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:0 4.5rem;
  text-align:left;
  */
}
#about .about-box{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:0 5.0rem;
  text-align:left;
  margin-bottom:2.5rem;
}
.about-box > .text-box{
}
.about-box > .text-box > h2{
  font-size:1.4rem; line-height:1.8;
  margin-bottom:0.5em;
}
#about table.about-table{
  width:fit-content;
  border-collapse:collapse;
}
#about table.about-table caption{
  font-size:0.95rem; line-height:1.8; font-weight:var(--normal);
  text-align:left;
  margin-bottom:0.6rem;
}
#about table.about-table tr{
  border-top:1px solid #ccc;
}
#about table.about-table tr > th{
  font-size:0.95em;
  color:var(--base-light-color);
  padding:0.6rem 2.0em;
  padding-left:0;
  text-align:left;
}
#about table.about-table tr > td{
  padding:0.6rem 4.0em;
  text-align:left;
}
#about .works-box{
  text-align:left;
}
#about .works-box > h3{
  font-size:1.2rem; line-height:1.8;
  margin-bottom:1.0em;
}
ul.works-list{
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:1.5rem 1.5rem;
}
ul.works-list li{
  width:calc((100% - 1.5rem * 3) /4);
}
ul.works-list li > a{
  display:block;
  text-decoration:none;
  color:var(--base-color);
}
ul.works-list li > a > figure{
  box-sizing:border-box;
  width:100%; height:auto;
  aspect-ratio:3/2;
  overflow:hidden;
  filter:drop-shadow(1px 1px 4px #ccc);
}
ul.works-list li > a > figcaption{
  font-size:0.9rem; line-height:1.6;
  text-align:center;
  margin-top:0.5em;
}
ul.works-list li > a:hover > figcaption{
  text-decoration:underline;
  color:var(--link-color);
}

.index-contents:has(.contact){
  margin:8.0rem auto;
}
.index-contents section.contact{
  display:flex;
  justify-content:center;
  align-items:flex-start;
  gap:0 6.0rem;
  padding:5.0rem 3.5rem;
}
section.contact > .text-box{
  width:400px;
  text-align:left;
}
section.contact > .form-box{
  width:600px;
}
.form-box  form > fieldset{
  display:none;
}
table.contact-table{
  width:100%;
  border-collapse:collapse;
  text-align:left;
}
table.contact-table tr{
//  border-top:1px solid #CCC;
}
table.contact-table tr th{
  width:200px;
  padding:5px 20px 10px;
  padding-left:0px;
  font-weight:var(--bold);
  white-space:nowrap;
  vertical-align:top;
  position:relative;
}
table.contact-table tr th.hissu{
  color:var(--base-color) !important;
}
table.contact-table tr th.hissu::after{
  display:inline-block;
  content:"必須";
  font-size:0.7em; line-height:1.8;
  color:#fff;
  background:#dd0000;
  border-radius:1px;
  padding:0 1em 0;
  position:absolute;
  top:calc(5px + 0.25em); right:0;
}
table.contact-table tr td{
  padding:0 20px 10px;
  padding-right:0;
}
table.contact-table tr td .caution{
  font-size:0.85em; line-height:1.6;
  color:#555;
}
table.contact-table tr td.bikou{
  padding:15px 0 0;
  text-align:center;
  border-top:1px dashed #ccc;
}
table.contact-table tr td .label{
  font-size:0.9em; line-height:1.8;
  margin-bottom:0.5em;
}
table.contact-table td input.p-postal-code{
  display:inline-block;
  width:30%;
}
table.contact-table tr td strong{
  font-weight:500;
}
table.contact-table tr td .wpcf7-radio{
  display:flex;
}
table.contact-table tr td .wpcf7-list-item{
  box-sizing:border-box;
  margin:0;
}
table.contact-table tr td .wpcf7-list-item:not(:last-of-type){
  margin-right:1.5em;
}
table.contact-table tr td .wpcf7-list-item > label > .wpcf7-list-item-label{
  margin-left:0.25em;
}
table.contact-table tr td .wpcf7-not-valid-tip{
  font-size:0.9em; line-height:1.8;
}
table.contact-table tr td .acceptance{
  margin:1em auto 1.5em;
  white-space:nowrap;
}
table.contact-table tr td .button-list{
  display:flex;
  justify-content:center;
  margin:30px 0;
}
table.contact-table tr td .button-list input[type="submit"],
table.contact-table tr td .button-list input[type="button"],
table.contact-table tr td .button-list input[type="reset"]{
  margin:0 10px;
}
table.contact-table tr td .button-list input[type="reset"]{
  width:180px;
}
.form-box > .thanks-message{
  text-align:left;
}
.form-box > .thanks-message > h3{
  color:var(--main-color);
  margin:0.5em 0;
}
.form-box > .thanks-message > p:not(:last-of-type){
  margin-bottom:1.0em;
}

footer{
  padding-top:6.0rem;
  padding-bottom:3.5rem;
}
footer > h1{
  font-size:1.2rem; line-height:1.8;
  margin-bottom:1.5em;
}
footer > h1 > span{
  display:block;
  font-size:0.75em; font-weight:var(--normal);
}
footer > #footer-nav > ul{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:1.0rem 1.0rem;
}
footer > #footer-nav > ul > li{
  font-size:0.85rem; line-height:1.8;
}
footer > #footer-nav > ul > li > a{
  text-decoration:none;
  color:var(--base-color);
}
footer > #footer-nav > ul > li > a:hover{
  border-bottom:1px dashed var(--base-color);
}

footer > #copyright{
  font-size:0.8rem; line-height:1.8;
  color:var(--base-color);
  margin-top:6.0em;
}

.contents .news > .text-box:has(article){
  background:transparent;
  padding:0;
}
.contents .news > .text-box > article{
  padding:3.5rem 4.0rem;
  background:#fff;
  border-radius:0.75rem;
}
article .entry-title{
  margin-bottom:2.0rem;
}
article .entry-title > ul.entry-data{
  display:flex;
  align-items:center;
  font-size:0.85rem; line-height:1.8;
}
article .entry-title > ul.entry-data > li.entry-category:before{
  content:"｜";
  margin:0 0.25rem;
}
article .entry-title > h2{
  font-size:1.6rem; line-height:1.6; font-weight:var(--normal);
}
article .entry-body{
  font-size:1.0rem; line-height:2.0;
}
article .entry-body p,
article .entry-body ul,
article .entry-body ol{
  margin-bottom:1.0rem;
}
article .entry-body ul > li{
  list-style:disc outside;
  margin-left:1.25em;
}
article .entry-body ol > li{
  list-style:decimal outside;
  margin-left:1.25em;
}
article .entry-body > :last-child{
  margin-bottom:0;
}
article + ul.entry-bottom{
  margin-top:2.0rem;
  display:flex;
  justify-content:center;
}
article + ul.entry-bottom > li{
  font-size:0.85rem; line-height:1.8;
}
article + ul.entry-bottom > li > a{
  text-decoration:none;
  color:var(--base-light-color);
  border-bottom:1px dashed transparent;
}
article + ul.entry-bottom > li > a:hover{
  border-color:var(--base-light-color);
}
article + ul.entry-bottom > li:not(:last-child)::after{
  content:"｜";
  margin:0 1.0rem;
}

.design-button a{
  display: inline-block;
text-decoration: none;
font-size: 0.9rem;
line-height: 2.5;
font-weight: var(--bold);
color: var(--base-color);
border: 1px solid var(--base-light-color);
border-radius: 9999px;
padding: 0.25rem 3.5rem;
overflow: hidden;
position: relative;
transition: 0.2s;
}
.design-button a::before {
  content: "";
  width: 100%;
  height: 100%;
  background: var(--main-color);
  position: absolute;
  top: 0;
  left: 0;
  transform: scaleX(0);
  transform-origin: left;
  transition: 0.2s;
}
.design-button a::after {
  content: "";
  width: 0.4rem;
  height: auto;
  aspect-ratio: 0.5/1;
  clip-path: polygon(0 0, 0% 100%, 100% 50%);
  background: var(--base-light-color);
  position: absolute;
  top: 50%;
  right: 1em;
  transform: translate(0,-50%);
  transition: 0.2s;
}
body.preload ,
body.animating{
  width: 100%;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* =========================
   price plan layout remake
   ========================= */

#price .plan-layout-section{
  padding-top:6rem;
}

#price .plan-layout-heading{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:1.5rem;
  text-align:center;
  margin-bottom:4rem;
  font-size:1.4rem;
}

#price .plan-layout-heading::before,
#price .plan-layout-heading::after{
  content:"";
  flex:1;
  max-width:260px;
  height:1px;
  background:#555;
}
#price .plan-layout-heading span{
  display:inline-block;
  white-space:nowrap;
}
#price .plan-layout-card{
  position:relative;
  margin:0 auto 4rem;
  border:2px solid var(--main-color);
  border-radius:15px;
  padding:0 3rem 2rem;
}
#price .plan-layout-card::before{
  content:"";
  position:absolute;
  top:5%;
  left:50%;
  transform:translateX(-50%);
  height:15%;
  border-left:2px dotted #aaa;
}
#price .plan-layout-card > .price-list > li{
  width:100%;
  margin-bottom:0;
  border-radius:2rem;
  background:#fff;
  filter:none;
  overflow:visible;
  position:relative;
}
p.small-text{
  font-size:0.8em;
  margin-top:1.5rem;
}

/* 共通：丸イラスト */
#price .plan-layout-illust{
  width:136px;
  height:136px;
  border:1.5px solid #333;
  border-radius:50%;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  position:absolute;
  top:0;
  left:1.5rem;
  transform:translateY(-28%);
  z-index:5;
}
#price .plan-layout-illust img{
  width:72%;
  height:72%;
  object-fit:contain;
}
/* 共通：赤ラベル */
#price .plan-layout-card > .price-list > li > h3{
  width:500px;
  max-width:calc(100% - 4rem);
  margin:0;
  padding:1rem 1.5rem 1.2rem;
  color:#fff;
  background:var(--main-color);
  border-radius:9999px;
  position:absolute;
  top:-10%;
  left:50%;
  transform:translateX(-50%);
  z-index:6;
}
#price section:nth-child(2){
  padding-top:0;
  padding-bottom:0;
}
#price section:nth-child(2) .plan-layout-card > .price-list > li > h3{
  top:-28%;
}

#price .plan-layout-card > .price-list > li > h3::after{
  content:"";
  width:24px;
  aspect-ratio:24/14;
  clip-path:polygon(50% 100%, 0 0, 100% 0);
  background:var(--main-color);
  position:absolute;
  left:50%;
  bottom:0;
  transform:translate(-50%,98%);
}

#price .plan-layout-card > .price-list > li > h3 > .eng{
  display:block;
  font-family:var(--eng-font);
  font-size:1.55em;
  line-height:1;
  text-transform:uppercase;
  margin-bottom:0.35rem;
}

/* ===== regular ===== */
#price .regular-plan-card > .price-list > li{
  padding:3rem 2rem 2rem;
}
#price .regular-plan-card > .price-list > li > .text-box{
  padding:0;
  text-align:center;
  margin-bottom:1.75rem;
}
#price .regular-plan-card .price{
  font-size:1.45rem;
}
#price .regular-plan-card .price > strong{
  font-size:3.1em;
}
#price .regular-plan-card .price-notax{
  margin-top:0.2rem;
}

#price .option-plan-card > .price-list > li{
  width:calc((100% - 2rem) / 2);
  padding:3.5rem 2rem 0;
}

#price .option-plan-card > .price-list > li > .text-box{
  padding:0;
  text-align:center;
  margin-bottom:1.5rem;
}

#price .regular-plan-section > .kigou-list,
#price .option-plan-section > .kigou-list{
  margin-top:2rem;
}