@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 2.0em;
  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:52%; height:100%;
  height:calc(100vh - 140px);
  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;
}
#billboard > .text-box #badge{
  width:164px; height:auto;
  aspect-ratio:1/1;
  background:var(--main-color);
  border-radius:100%;
  font-size:2.0rem; line-height:1.3;
  color:#fff;
  text-align:center;
  white-space:nowrap;
  position:absolute;
  top:0; right:0;
  transform:translate(40%,-100%) rotate(5deg);
  display:flex;
  flex-direction:column;
  justify-content:center;
  z-index:1;
}
#billboard > .text-box #badge > strong{
  display:block;
  font-family:var(--eng-font);
}
#billboard > .text-box #badge > strong > span{
  font-size:0.6em;
  margin-left:0.1em;
}
#billboard > .text-box #badge > small{
  font-size:0.6em;
}

#billboard > .text-box > h1{
  font-size:2.1rem; line-height:1.6;
  color:var(--main-color);
  margin-bottom:0.5em;
}
#billboard > .text-box > h1 .sub-copy{
  font-size: 0.6em;
  font-weight: 600;
  line-height: 1.4;
  display:block;
}
#billboard > .text-box > p{
  font-size:1.15rem; line-height:1.8; font-weight:var(--bold);
}
#billboard > .text-box .marker{
  font-size:1.5rem;
  line-height:1.5;
}
.marker{
  background:linear-gradient(
    transparent 70%,
    #ff0 70%
  );
}

#container{
}
#container.contents{
  margin-top:120px;
}
.index-contents{
  box-sizing:border-box;
  width:100%;
  max-width:1600px;
  padding:0 var(--side-padding);
  margin:0 auto;
  margin-bottom:10.0rem;
  position:relative;
}
.index-contents section{
  box-sizing:border-box;
  width:100%;
  padding:3.0rem 3.5rem;
  background:#fff;
  border-radius:0.75rem;
  filter:drop-shadow(1px 1px 4px #eee);
}
.index-contents h2{
  font-size:1.8rem; line-height:1.8;
  position:relative;
}
.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:8.5rem 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:8.0rem var(--side-padding) 10.0rem;
  border-radius:1.5rem;
  margin-bottom:0;
}
#feature.index-contents > p{
  line-height:2.0;
  margin-bottom:4.0rem;
}
.feature{
}
.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;
}

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.15rem; line-height:1.6;
  color:#fff;
  text-align:center;
  background:var(--base-color);
  border-radius:9999px;
  padding:0.25em 0.25em;
  margin-bottom:0.5em;
}

#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;
}
#cta ul.price-feature{
  display:flex;
  justify-content:center;
  gap:0 0.5em;
  font-size:2.6rem; line-height:1.4; font-weight:var(--bold);
}
#cta ul.price-feature li{
  background:linear-gradient(
    transparent 70%,
    #ff0 70%
  );
}
#cta .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;
}
#cta .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 ul.kigou-list{
  width:fit-content;
  margin:0 auto;
  font-size:0.8rem; line-height:1.8;
}
.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.index-contents{
  background:#fff;
  padding:6.0rem var(--side-padding) 8.0rem;
  margin-bottom:8.0rem;
  border-radius:1.5rem;
}
#package.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:0; left:50%;
  transform:translate(-50%,0);
}
#package.index-contents > h2{
  display:flex;
  justify-content:center;
  align-items:baseline;
  gap:0 1.0rem;
}
#package.index-contents > 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;
}
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.index-contents{
//  background:#fff;
  padding:6.0rem var(--side-padding) 8.0rem;
  margin-bottom:0;
}
#option.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 #eee;
  text-stroke:1px #ccc;
  color:#fcfcfc;
  white-space:nowrap;
  text-transform:uppercase;
  position:absolute;
  top:0; left:50%;
  transform:translate(-50%,0);
}

#option > .option{
  display:flex;
  justify-content:space-between;
  margin:2.5rem 0;
}
#option > .option > .option-box{
  box-sizing:border-box;
  width:48.5%;
  border-radius:1.0rem;
  background:#fff;
  filter:drop-shadow(1px 1px 4px #ddd);
  overflow:hidden;
}
.option-box > figure{
  width:100%; height:auto;
  aspect-ratio:16/9;
  overflow:hidden;
}
.option-box > figure > img{
  width:100%; height:100%;
  object-fit:cover;
}
.option-box > .text-box{
  padding:1.0rem 2.5rem 2.5rem;
}
#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;
}
#option .additional-function{
  display:flex;
  justify-content:center;
  gap:0 1.0rem;
/*
  border-top:1px dashed #ccc;
  padding-top:2.0rem;
*/
  margin-top:1.5rem;
  text-align:left;
}
#option ul.kigou-list{
  width:fit-content;
  margin:0 auto;
  font-size:0.8rem;
  color:var(--base-light-color);
}

#option .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;
}
.option-plus > figure{
  width:47.0%; height:auto;
  overflow:hidden;
}
.option-plus > .text-box{
  flex:1;
  padding:1.0rem 2.5rem;
}

#price.index-contents{
  background:#fff;
  padding:14.0rem var(--side-padding) 10.0rem;
  border-radius:1.5rem;
}
#price.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:8.0rem; left:50%;
  transform:translate(-50%,0);
}
ul.price-list{
  display:flex;
  justify-content:space-between;
  margin:2.5rem 0 0;
}
ul.price-list > li{
  box-sizing:border-box;
  width:31%;
/*
  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.25rem; 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 .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:2.4em; 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);
}
#price p{
  font-size:0.95rem; line-height:1.6;
}
#price .plus{
  margin-top:1.5rem;
}
.price-container + ul.kigou-list{
  width:fit-content;
  margin:1.0rem auto 0;
  font-size:0.8rem; line-height:1.6;
}
#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;
  margin-bottom:6.0rem;
}
.difference > .title{
  flex:1;
  text-align:left;
}
/*
.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:980px;
  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.index-contents{
  background:#fff;
  padding:14.0rem var(--side-padding) 4rem;
  border-radius:1.5rem;
}
#comission.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:8.0rem; left:50%;
  transform:translate(-50%,0);
}
#comission.index-contents > h3{
  font-size:2.0rem; line-height:1.6;
  color:var(--main-color);
  margin:1.5em 0 2.0rem;
}
.compare{
  box-sizing:border-box;
  background:#fff;
  border-radius:1.0rem;
  filter:drop-shadow(1px 1px 4px #ddd);
  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 .design-button a{
  font-size:1rem;
}
.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:hover{
  color:#fff;
  border-color:var(--main-color);
}
.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;
}
.design-button a:hover::after{
  background:#fff;
}
.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:hover::before{
  transform:scaleX(1);
}

.design-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;
*/
}

.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::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);
}

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


body.preload ,
body.animating{
  width: 100%;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* preload 中は各要素を隠す
body.preload header,
body.preload .anim-swiper,
body.preload #sub-copy,
body.preload #lead-text,
body.preload #main-catch-final,
body.preload #container{
  visibility: hidden;
  opacity: 0;
}
*/
/*
#main-catch {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
}
#main-catch .char {
  opacity: 0;
  display: inline-block;
}
#main-catch-final {
  opacity: 0;
  visibility: hidden;
}
#sub-copy {
  opacity: 0;
}
#lead-text {
  opacity: 0;
}
.anim-swiper {
  opacity: 0;
}
.anim-header {
  opacity: 0;
}
*/