#price .plan .plan-list.shot-list @charset "UTF-8";

/*=================================
    AW-PLANNING
    260217
=================================*/
@import url('https://fonts.googleapis.com/css2?family=Aboreto&family=Marcellus&family=Noto+Sans+JP:wght@300&display=swap');


html{
  scroll-behavior: smooth;
}
body{
  font-family: "游明朝体", "YuMincho", "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN W3", HiraMinProN-W3, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
  overflow-x: hidden;
  color:#242424;
  line-height:1.8;
}
a{
  color:#242424;
  text-decoration:none;
}
a:hover {
  opacity: 1;
}
.en {
  font-family: "Marcellus", serif;
  font-weight: 400;
  font-style: normal;
}
.sans{
  font-family: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, sans-serif;
}
.ib{
  display:inline-block;
}
img{
  max-width:100%;
}

.inview {
  margin-top: 150px;
  opacity:0;
  transition: 0.6s ease 0s;
}
.inview.visible {
  margin-top: 0;
  opacity:1;
}

.sp{
  display:none;
}
@media only screen and (max-width: 768px){
  .pc{
    display:none;
  }
  .sp{
    display:block;
  }
}
#contents_index_company{
  background:#fff !important;
}
article{
  width: 100vw;
  overflow-x: hidden;
}

.wp-password{
  padding:100px 30px ;
}
/* header
=========================================*/
header{
  position:fixed;
  top:0;
  left:0;
  width:calc(100% - 30px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index:1000;
  padding:0 0 0 30px;
}
header.bg{
  background:rgba(255,255,255,.8);
}
header h1{
  width:clamp(115px , 15.1vw , 290px);
  order: 1;
}
header nav {
  order: 2;
}
header nav ul{
  display: flex;
  align-items: center;
  font-size:clamp(16px , 1.15vw , 22px);
  gap:3.8em;
  line-height:1;
}
header nav ul .btn-link{
  display: flex;
  gap:1px;
}
header nav ul .btn-contact{
  color:#fff;
  background:#000;
  padding:0 1.5em;
  display: block;
  line-height:4.5;
  border:1px solid #000;
}
header nav ul .btn-aw{
  background:#000;
  padding:0 1.5em;
  display: flex;
  align-items: center;
  justify-content: center;
  border:1px solid #000;
}
header nav ul .btn-aw .ico{
  width:12px;
  position:absolute;
  top:10px;
  right:10px;
}
header nav ul .btn-link a{
  border:1px solid #000;
  overflow:hidden;
  position: relative;
}
header nav ul .btn-link a span,
header nav ul .btn-link a svg{
  mix-blend-mode: difference;
  position: relative;
  z-index: 2;
}
header nav ul .btn-link a::after {
  content: "";
  height: 100%;
  width: 0;
  background: #fff;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  transition: width 0.3s ease 0s;
}
header nav ul .btn-link a:hover::after{
  width:100%;
}

@media only screen and (max-width: 1250px){
  header nav ul{
    gap:1.8em;
  }
  header nav ul .btn-contact,
  header nav ul .btn-aw{
    padding:0 1em;
  }
  header nav ul .btn-aw .ico{
    top:5px;
    right:5px;
  }
}

@media only screen and (max-width: 980px){
  header{
    width:calc(100% - 40px);
    padding:0 20px;
  }
  header h1{
    padding:15px 0;
  }
  header nav{
    width:100%;
    height:100%;
    max-width: 350px;
    background:rgba(255,255,255,0.95);
    position:fixed;
    right:-351px;
    top:0;
    opacity:0;
    transition: transform 0.8s ease, right 0.8s ease, opacity 1s ease;
    order: 3;
  }
  header nav.active{
    right:0;
    opacity:1;
    background:rgba(255,255,255,0.95);
  }
  header nav ul{
    display: block;
    font-size:22px;
    padding:80px 30px 40px;
  }
  header nav ul li{
    text-align:center;
    margin:1.5em auto;
  }
  header nav ul .btn-link{
    gap:1.5em;
    margin:1.5em auto 0;
    flex-wrap: wrap;
  }
  header nav ul .btn-contact,
  header nav ul .btn-aw{
    width:80%;
    margin:0 auto;
    box-sizing:border-box;
    padding:0 1em;
    line-height: 3.5;
    font-size:18px;
  }
  header nav ul .btn-aw{
    height:3.5em;
  }
  header nav ul .btn-aw .ico{
    top:10px;
    right:10px;
  }

}

/* menu
-----------------------------------------*/
header .menu {
  display:none;
}

@media only screen and (max-width: 980px){
header .menu {
  display:block;
}
}
header .menu {
  width: 26px;
  height:20px;
  position: relative;
  order: 2;
}
header .menu span {
  display: inline-block;
  width: 100%;
  height:2px;
  background: #000;
  position: absolute;
  left: 0;
  transition: .5s;
}
header .menu span:first-child {
  top: calc(50% - 10px);
}
header .menu span:nth-child(2) {
  top: 50%;
  transform: translateY(-50%);
}
header .menu span:last-child {
  bottom: calc(50% - 10px);
}

header .menu.active span:first-child {
  transform: translateY(9px) rotate(-45deg);
}
header .menu.active span:nth-child(2)  {
  opacity: 0;
}
header .menu.active span:last-child {
  transform: translateY(-9px) rotate(45deg);
}




/* kv
=========================================*/
#kv{
  max-width:1920px;
  margin:0 auto;
  padding:0 30px;
  position:relative;
}
#kv .kv-img{
  position:relative;
  width:min(67.88vw , 1310px);
  margin:0 0 0 auto;
}
#kv .kv-img img{
  opacity:0;
  animation-duration:0.5s;
  animation-fill-mode:forwards;
}
#kv .kv-img .kv-img02,
#kv .kv-img .kv-img03,
#kv .kv-img .kv-img04{
  position:absolute;
  right:0;
  top:0;
  transform: translateY(50px);
}
#kv .kv-img .kv-img01{
  transition: opacity 1.2s ease 0s;
}
#kv.active .kv-img .kv-img01{
  opacity:1;
}
#kv.active .kv-img .kv-img02{
  animation-name:fadeUpAnime;
  animation-delay: 0.5s;
}
#kv.active .kv-img .kv-img03{
  animation-name:fadeUpAnime;
  animation-delay: 1s;
}
#kv.active .kv-img .kv-img04{
  animation-name:fadeUpAnime;
  animation-delay: 1.5s;
}
#kv h2{
  position:absolute;
  font-size:clamp(25px, 2.9vw , 56px);
  left:min(2.44vw , 47px);
  top:40%;
  line-height:2.2;
  letter-spacing:0.16em;
  opacity:0;
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
}
#kv.active h2{
  opacity:1;
  transition: opacity 0.8s ease 0s;
  transition-delay: 2.5s;
}
#kv h2 span{
  position:relative;
/*  transform: translateY(50px);
  animation-duration:1s;
  animation-fill-mode:forwards; */
  display:inline-block;
}
/*#kv.active h2 span{
  animation-name:fadeUpAnime;
}
#kv.active h2 span:nth-of-type(1){
  animation-delay: 2.5s;
}
#kv.active h2 span:nth-of-type(2){
  animation-delay: 3.5s;
  animation-delay: 2.5s;
}
#kv.active h2 span:nth-of-type(3){
  animation-delay: 4.5s;
  animation-delay: 2.5s;
}
*/
#kv h2 span::before{
  content:"";
  width:calc(100% - 0.5em);
  height:2px;
  background:#ff3a3a;
  position:absolute;
  left:0;
  bottom:0.3em;
  opacity:0;
}
#kv.active h2 span::before{
  transition: opacity 0.8s ease 0s;
  transition-delay: 3s;
  opacity:1;
}
/*
#kv.active h2 span:nth-of-type(1)::before{
  transition-delay: 3s;
}
#kv.active h2 span:nth-of-type(2)::before{
  transition-delay: 4s;
  transition-delay: 3s;
}
*/
#kv.active h2 span:nth-of-type(3)::before{
  width:100%;
}
@media only screen and (max-width: 768px){
  #kv{
    padding:0;
    overflow:hidden;
  }
  #kv .kv-img{
    width: 120%;
    margin: 0 -5% 0 -15%;  }
  #kv h2{
    position:relative;
    left:auto;
    top:auto;
    margin: 60px auto;
    padding: 0 30px;
  }
}

/* animation
-----------------------------------------*/
@keyframes fadeUpAnime{
  from {
    opacity: 0;
    transform: translateY(50px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* read
=========================================*/
#read{
  margin: clamp(120px, 9.63vw, 300px) auto 0;
  /* margin: min(15.63vw, 300px) auto 0; */
  position: relative;
}
#read .read-bg01{
  position:absolute;
  width:min(68.13vw , 1308px);
  top:calc(-1 * min(13.5vw , 528px));
  left:calc(50vw - min(71.88vw , 1380px));
  z-index:-1;
}
#read .read-bg02{
  position:absolute;
  width:min(30.16vw , 579px);
  top:min(27.08vw , 520px);
  right:calc(50vw - min(58.33vw , 1120px));
  z-index:-1;
}
#read .read-txt{
  max-width: 1200px;
  margin:0 auto;
  padding:0 30px;
}
#read .read-txt p{
  text-align:center;
  font-size:clamp(20px, 1.97vw , 31px);
  line-height: 1.85;
}
#read .read-txt p + p{
  font-size:clamp(13px, 1.23vw , 20px);
  margin-top:15px;
}
#read .read-txt ul{
  display: flex;
  justify-content: space-between;
  gap:min(2.08vw , 40px);
  margin:min(3.125vw , 60px) 0 10.5vw;
  width:100%;
}
#read .read-txt ul li{
  width:calc(calc(100% - min(2.08vw , 40px)) / 2);
}
#read .read-txt ul li a{
  background:#000;
  color:#fff;
  position:relative;
  padding:1em 0 1em 2em;
  font-size: clamp(14px,1.35vw , 26px);
  display:block;
  border:1px solid #000;
  overflow:hidden;
}
#read .read-txt ul li a span{
  mix-blend-mode: difference;
  position: relative;
  z-index: 2;
}
#read .read-txt ul li a::before{
  content:"";
  width:2em;
  height:1px;
  background:#fff;
  position:absolute;
  right:0;
  top:50%;
  display:block;
  mix-blend-mode: difference;
  z-index:2;
}
#read .read-txt ul li a::after{
  content:"";
  height:100%;
  width:0;
  background:#fff;
  position:absolute;
  left:0;
  top:0;
  z-index:1;
  transition: width 0.3s ease 0s;
}
#read .read-txt ul li a:hover::after{
  width:100%;
}

@media only screen and (max-width: 1250px){
  #read .read-txt{
    max-width: 80%;
  }
}

@media only screen and (max-width: 768px){
  #read .read-txt ul{
    flex-wrap: wrap;
    justify-content: center;
    gap:10px min(2.08vw , 40px);
    max-width:300px;
    margin:40px auto 100px;
  }
  #read .read-txt ul li{
    width:100%;
  }

}

/* consult
-----------------------------------------*/
#read .read-txt .consult{
  padding: min(7.42vw, 200px) 30px min(9.21vw, 20px);
  text-align:center;
}
#read .read-txt .consult h3{
  font-size: clamp(20px, 2.5vw, 48px);
  margin: 0 0 min(3.125vw, 60px);
}
#read .read-txt .consult h3 strong{
  font-weight: normal;
}
#read .read-txt .consult h3 strong .ib{
  position: relative;
  text-decoration: underline;
  text-underline-offset: 0.4em;
  text-decoration-thickness: 1.5px;
  text-decoration-color: #ff3a3a;
}
/*#read .read-txt .consult h3 strong .ib::before {
  content: "";
  width: 100%;
  height: 1.5px;
  background: #ff3a3a;
  position: absolute;
  left: 0;
  bottom: 0;
}*/

#read .read-txt .consult p{
  font-size: clamp(14px, 1.41vw, 29px);
}

@media only screen and (max-width: 768px){
  #read .read-txt .consult{
    padding: min(18.42vw, 200px) 30px 0;
  }
  #read .read-txt .consult h3{
    margin: 0 0 min(3.125vw, 60px);
  }
}

/* problem
-----------------------------------------*/
#read .problem{
  position:relative;
  padding:0 0 clamp(130px ,  10.42vw , 200px);
}
#read .problem::before{
  content:"";
  display:block;
  width:140px;
  height:80px;
  background:url(../img/arrow_b.png) no-repeat center bottom;
  background-size:contain;
  position:absolute;
  left:50%;
  bottom:0;
  transform: translateX(-50%);
}

#read .problem h3{
  text-align:center;
  font-size:clamp(38px , 5.83vw , 112px);
  position:relative;
  margin:min(5.21vw , 100px) 0 min(3.125vw , 60px);
  line-height: 1;
}
#read .problem h3 span{
  display:inline-block;
  padding:0 0.5em;
}
#read .problem h3::before{
  content:"";
  width:calc(50% - 2.5em);
  height:1px;
  background:#000;
  position:absolute;
  left:0;
  top:50%;
  display:block;
  z-index:-1;
}
#read .problem h3 + p{
  font-size:clamp(14px , 2.08vw , 40px);
  line-height:1.85;
  text-align:center;
  padding:0 30px;
}
#read .problem .problem-list{
  max-width:1086px;
  margin:min(8.42vw , 200px) auto 0;
  border-bottom:1px solid #959595;
}
#read .problem .problem-list .item{
  padding:min(2.125vw , 60px) min(6.25vw , 120px);
  border-top:1px solid #959595;
  position:relative;
}
#read .problem .problem-list .item h4{
  font-size:clamp(20px ,2.0vw , 38px);
  position:relative;
  z-index:2;
  display: inline-block;
  text-decoration: underline;
  text-underline-offset: 0.4em;
  text-decoration-thickness: 1.5px;
  text-decoration-color: #ff3a3a;
}
/*#read .problem .problem-list .item h4::before{
  content: "";
  width: 100%;
  height: 1.5px;
  background: #ff3a3a;
  position: absolute;
  left: 0;
  bottom: 0;
}*/
#read .problem .problem-list .item p{
  font-size:clamp(14px ,1.4vw , 24px);
  margin-top:1em;
  position:relative;
  z-index:2;
}
#read .problem .problem-list .item:nth-child(even){
  background:#F6F6F6;
}
#read .problem .problem-list .item .num{
  font-size:clamp(86px , 8.75vw , 168px);
  position:absolute;
  top:50%;
  transform: translateY(-50%);
}
#read .problem .problem-list .item:nth-child(odd) .num{
  color:#F6F6F6;
  left:min(3.125vw , 60px);
}
#read .problem .problem-list .item:nth-child(even) .num{
  color:#fff;
  right:min(3.125vw , 60px);
}

@media only screen and (max-width: 768px){
  #read .problem .problem-list{
    margin:40px 30px 0;
  }
  #read .problem::before{
    width:70px;
    height:40px;
    bottom:50px;
  }
}


/* support
-----------------------------------------*/
#read .support{
  background:#F2F2F2;
  padding:min(7.63vw , 300px) 30px min(10.42vw , 200px);
  text-align:center;
}
#read .support h3{
  font-size:clamp(18px , 2.5vw , 48px);
  margin:0 0 min(3.125vw , 60px);
}
#read .support h3 strong{
  font-weight:normal;
  position:relative;
  text-decoration: underline;
  text-underline-offset: 0.4em;
  text-decoration-thickness: 1.5px;
  text-decoration-color: #ff3a3a;
}
/*#read .support h3 strong::before{
  content: "";
  width: 100%;
  height: 1.5px;
  background: #ff3a3a;
  position: absolute;
  left: 0;
  bottom: 0;
}*/
#read .support ul{
  display: flex;
  flex-wrap: wrap;
  gap:12px;
  max-width:1420px;
  margin:0 auto;
}
#read .support ul li{
  width:calc(calc(100% - 24px) / 3);
  background:#fff;
  font-size:clamp(10px , 1.25vw , 24px);
  padding:0.5em 1em;
  box-sizing:border-box;
}
#read .support ul + h3{
  margin-top:min(5.21vw , 100px);
}

@media only screen and (max-width: 768px){
  #read .support{
    padding:30px 30px;
  }
  #read .support ul li {
    width: calc(calc(100% - 12px) / 2);
    display: flex;
    align-content: center;
    justify-content: center;
    flex-wrap: wrap;
  }
}

/* okay
-----------------------------------------*/
#read .okay{
  padding: min(10.42vw, 200px) 30px 0;
  text-align:center;
}
#read .okay h3{
  font-size: clamp(18px, 2.5vw, 48px);
  margin: 0 0 min(3.125vw, 60px);
}
#read .okay h3 strong{
  font-weight: normal;
}
#read .okay h3 strong .ib{
  position: relative;
  text-decoration: underline;
  text-underline-offset: 0.4em;
  text-decoration-thickness: 1.5px;
  text-decoration-color: #ff3a3a;
}
/*#read .okay h3 strong .ib::before {
  content: "";
  width: 100%;
  height: 1.5px;
  background: #ff3a3a;
  position: absolute;
  left: 0;
  bottom: 0;
}*/

#read .okay h4{
  font-size: clamp(18px , 2.5vw, 48px);
}
#read .okay h4 strong {
  font-weight: normal;
}
#read .okay h4 strong .ib {
  position: relative;
  text-decoration: underline;
  text-underline-offset: 0.4em;
  text-decoration-thickness: 1.5px;
  text-decoration-color: #ff3a3a;
}
/*#read .okay h4 strong .ib::before {
  content: "";
  width: 100%;
  height: 1.5px;
  background: #ff3a3a;
  position: absolute;
  left: 0;
  bottom: 0;
}*/

#read .okay p{
  font-size: clamp(14px , 1.51vw , 29px);
}
#read .okay .scroll-hint {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 1em 3em;
  background: rgba(0, 0, 0, 0.3);
  animation: scroll-hint-animation 2s infinite ease;
  display: none;
  border-radius:0.5em;
  pointer-events: none;
  z-index: 3;
}
@keyframes scroll-hint-animation {
  0% {
    transform: translate(-80%, -50%);
  }
  40% {
    transform: translate(-40%, -50%);
  }
  100% {
    transform: translate(-80%, -50%);
  }
}
#read .okay .scroll-hint img{
  width:min(15vw , 80px);
}
#read .okay .table-inner{
  padding: 18px 0 0;
}

#read .okay table{
  border-collapse:  collapse;
  width:100%;
  max-width: 1920px;
  margin: min(3.125vw, 60px) auto min(7.81vw , 150px);
  position:relative;
}
#read .okay table::before{
  content:"";
  position:absolute;
  width: calc(21% - 2px);
  height: calc(100% + 13px);
  left: calc(16% - 1px);
  top: -15px;
  border: 2px solid red;
  border-image: linear-gradient(to right, #ff8177 0%, #ff867a 0%, #ff8c7f 21%, #f99185 52%, #cf556c 78%, #b12a5b 100%) 2;
  display:block;
  z-index: 2;
}
#read .okay table th,
#read .okay table td{
  border: 3px solid #e8e8e8; 
  padding:2em 1em;
  width:21%;
  font-size: clamp(13px , 0.83vw , 16px);
  font-weight: normal;
}
#read .okay table th{
  background:#F2F2F2;
  vertical-align: middle;
  font-size: clamp(10px , 1.04vw , 20px);
  line-height:1.6;
}
#read .okay table tr:first-of-type th{
}
#read .okay table tr:not(:first-of-type) th{
  width:16%;
  border-right:0;
/*  letter-spacing: -0.1em;*/
}
#read .okay table th.aw{
  color:#fff;
  border: 0;
/*  font-weight:bold;*/
  position:relative;
}
#read .okay table th.aw::before{
  content:"";
  position:absolute;
  height:28px;
  width:100%;
  left:0;
  top:-15px;
  background: #F2F2F2;
}
#read .okay table th.aw img{
  width:min(75% , 200px);
  margin: 0 auto;
}
#read .okay table th.none{
  background:#fff;
  border: 3px solid #fff;
  border-right: 0; 
  border-bottom: 3px solid #e8e8e8 !important; 
  width:16%;
}

#read .okay table td .flex{
  display: flex;
  flex-wrap: wrap;
  gap:10px;
  align-items: center;
}
#read .okay table td .mark{
  font-size:clamp(24px, 3.125vw, 60px);
  color:#606060;
  line-height:1;
}
#read .okay table td.aw{
  position:relative;
/*  font-weight:bold;*/
  border-left:0;
  border-right:0;
}
#read .okay table td.aw.last{
}
#read .okay table td.aw .mark{
  color:#ff3b3b;
  background: linear-gradient(to right, #ff8177 0%, #ff867a 0%, #ff8c7f 21%, #f99185 52%, #cf556c 78%, #b12a5b 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
#read .okay table td p{
  text-align:left;
  font-size:clamp(12px , 0.94vw , 20px);
  line-height;1.6;
}
#read .okay table td p.main{
  width:calc(100% - 10px - clamp(24px, 3.125vw, 60px));
  line-height: 1.6;
}
#read .okay table td p.sub{
  width:100%;
  line-height: 1.6;
  font-size:clamp(12px , 0.83vw , 16px);
}

@media only screen and (max-width: 980px){
  #read .okay .table-inner{
    margin: 40px -30px 60px;
    padding: 18px 0 10px;
    overflow: hidden;
    overflow-x:scroll;
    cursor:pointer;
    position: relative;
  }
  #read .okay .scroll-hint {
    display:block;
  }
  #read .okay table{
    width:240%;
    margin: 0 30px;
  }

  #read .okay .table-inner::-webkit-scrollbar {
    width: 20px;
  }
  #read .okay .table-inner::-webkit-scrollbar-thumb {
    background: #b6b6b6;
    border-radius: 6px;
  }
  #read .okay .table-inner::-webkit-scrollbar-track {
    background: #e0e0e0;
    margin:0 30px;
  }
  #read .okay table th,
  #read .okay table td{
    width:21.5%;
  }
  #read .okay table th.none,
  #read .okay table tr:not(:first-of-type) th{
    width:14%;
  }
  #read .okay table::before{
    width: calc(21.5% - 2px);
    left: calc(14% - 1px);
  }
}


/* cta
=========================================*/
.cta{
  background:#000 url(../img/bg_logo.png) no-repeat center bottom;
  background-size:100% auto;
  padding:clamp(50px , 5.21vw , 100px) clamp(30px , 3.125vw, 60px);
}
.cta .inview{
  max-width:1700px;
  margin:0 auto;
  display: flex;
  justify-content: center;
  gap:clamp(50px , 3.65vw , 70px);
}
.cta .inview .nav{
  color:#fff;
}
.cta .inview .nav h3{
  font-size:clamp(24px , 2.08vw , 40px);
  margin:0 auto clamp(24px , 3.125vw , 60px);
  text-align:center;
}
.cta .inview .nav ul{
  display: flex;
  justify-content: space-between;
  gap: min(2.08vw, 40px);
  margin: min(3.125vw, 60px) 0 0;
  width: 100%;
}
.cta .inview .nav ul li{
  width: calc(calc(100% - min(2.08vw, 40px)) / 2);
}
.cta .inview .nav ul li a{
  color:#fff;
  background:#fff;
  position: relative;
  padding: 0.9em 0 0.9em 2em;
  font-size: clamp(14px ,1.35vw , 23px);
  display: block;
  overflow:hidden;
  border:1px solid #fff;
}
.cta .inview .nav ul li a span{
  mix-blend-mode: difference;
  position: relative;
  z-index: 2;
}
.cta .inview .nav ul li a::before {
  content: "";
  width: 2em;
  height: 1px;
  background:#fff;
  position: absolute;
  right: 0;
  top: 50%;
  display: block;
  mix-blend-mode: difference;
  z-index:2;
}
.cta .inview .nav ul li a::after {
  content: "";
  height: 100%;
  width: 0;
  background:#000;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  transition: width 0.3s ease 0s;
}
.cta .inview .nav ul li a:hover::after{
  width:100%;
}

.cta .inview .point{
  width:59%;
}
.cta .inview .point h4{
  color:#fff;
  border-top:1px solid #b5b5b5;
  border-bottom:1px solid #b5b5b5;
  font-size:clamp(16px ,1.98vw , 38px);
  padding:0.5em 0;
  text-align:center;
  margin:0 auto clamp(20px , 3.125vw, 60px);
}

.cta .inview .point ul{
  display: flex;
  flex-wrap: wrap;
  gap:min(3.125vw, 60px) min(2.08vw, 40px);
}
.cta .inview .point ul li{
  background:rgba(0,0,0,.3);
  padding:1em 1em 1em 2.5em;
  position:relative;
  width:calc(calc(100% - min(2.08vw, 40px)) / 2);
  box-sizing:border-box;
  font-size:clamp(12px ,1.35vw , 26px);
  display:flex;
  align-items: center;
  border: 1px solid #b5b5b5;
}
.cta .inview .point ul li p{
  flex-grow:1;
  line-height:1.37;
  color:#fff;
}
.cta .inview .point ul li::before{
  content:"";
  background:#ff3b3b;
  position:absolute;
  left:1em;
  top:50%;
  transform: translateY(-50%);
  width:10px;
  height:10px;
  display:block;
}

@media only screen and (max-width: 768px){
  .cta .inview{
    flex-wrap: wrap;
  }
  .cta .inview .nav,
  .cta .inview .point{
    width:100%;
  }
  .cta .inview .nav h3{
    text-align:center;
  }
  .cta .inview .nav ul{
    flex-wrap: wrap;
    justify-content: center;
    gap:10px min(2.08vw , 40px);
    max-width:300px;
    margin: 0 auto;
  }
  .cta .inview .nav ul li{
    width:100%;
  }
  .cta .inview .point ul li{
    padding: 1em 0 1em 2.5em;
  }

}

/* point
=========================================*/
#point{
  position:relative;
  padding:min(10.42vw , 200px) 0;
}
#point::before{
  content:"";
  background:#F8F8F8;
  width:86.62%;
  height: calc(100% - clamp(100px , 13.02vw , 250px));
  z-index: -1;
  position:absolute;
  right:0;
  top:clamp(100px , 13.02vw , 250px);
  border-radius:min(4.69vw , 90px) 0 0 0 ;
}
#point h3{
  margin:0 0 0 18.13%;
  font-size:clamp(38px , 5.83vw , 112px);
  position: relative;
  line-height: 0.6;
}
#point h3::before{
  content: "";
  width: calc(100% - 3.2em);
  height: 1px;
  background: #000;
  position: absolute;
  right: 0;
  top: 0;
  display: block;
  z-index: -1;
}
#point h3 .txt{
  font-size: clamp(13px , 2.08vw , 40px);
}
#point .point-list{
  max-width:1400px;
  width:72.92%;
  margin:min(10.42vw , 200px) 0 0 18.13%;
  display: flex;
  flex-wrap: wrap;
  gap:min(10.42vw , 200px);
}
#point .point-list .item{
  position: relative;
  display: flex;
  align-items: flex-start;
}
#point .point-list .item::before{
  content: "";
  width: 50%;
  height: 1px;
  background: #000;
  position: absolute;
  left: -54.28%;
  top: 0;
  display: block;
}
#point .point-list .item .num{
  width:clamp(50px , 5.1vw , 98px);
  height:clamp(50px , 5.1vw , 98px);
/*  width:min(5.1vw , 98px);
  height:min(5.1vw , 98px);*/
  border-radius:50%;
  background:#000;
  color:#fff;
  font-size:clamp(24px , 2.92vw , 56px);
  line-height:clamp(50px , 5.1vw , 98px);
  text-align:center;
}
#point .point-list .item .txt{
  width:calc(100% - 34% - min(5.1vw , 98px));
  padding:0 8.57% 0 2.14%;
  box-sizing:border-box;
  font-size:clamp(14px , 1.31vw , 25px);
}
#point .point-list .item .txt h4{
  font-size:clamp(18px , 1.63vw , 32px);
  margin:0 0 1em;
  font-weight:bold;
  position:relative;
}
#point .point-list .item .txt h4 .ib{
  position:relative;
  text-decoration: underline;
  text-underline-offset: 0.4em;
  text-decoration-thickness: 1.5px;
  text-decoration-color: #ff3a3a;
}
/*#point .point-list .item .txt h4 .ib::before{
  content: "";
  width: 100%;
  height: 1.5px;
  background: #ff3a3a;
  position: absolute;
  left: 0;
  bottom: 0;
}*/
#point .point-list .item .img{
  width:34%;
}

@media only screen and (max-width: 768px){
  #point{
    position:relative;
    padding:80px 0;
  }
  #point::before{
    width:100%;
  }
  #point h3{
    margin:0 0 0 30px;
  }
  #point .point-list .item::before{
    display:none;
  }
  #point .point-list {
    max-width:500px;
    width: calc(100% - 60px);
    margin: 60px auto 0;
    padding:0 30px;
    gap: 40px;
  }
  #point .point-list .item{
    flex-wrap: wrap;
    justify-content: center;
  }
  #point .point-list .item .txt{
    width:100%;
    order: 2;
    padding: 20px 0 0;
  }
  #point .point-list .item .txt h4{
    display: flex;
    align-items: center;
    gap:10px;
  }
  #point .point-list .item .txt h4 strong{
    width:calc(100% - 10px - clamp(50px , 5.1vw , 98px));
  }




  #point .point-list .item .img{
    width:100%;
    order: 1;
    text-align:center;
  }
  #point .point-list .item .img img{
    width:100%;
  }


}

/* marketer
=========================================*/
#marketer{
  position:relative;
  padding:clamp(100px , 10.42vw , 200px) 0;
}
#marketer::before{
  content:"";
  background:#F8F8F8;
  width:94%;
  height: calc(100% - clamp(100px , 13.02vw , 250px));
  z-index: -1;
  position:absolute;
  left:0;
  top:clamp(100px , 13.02vw , 250px);
  border-radius:0 min(4.69vw , 90px) 0 0 ;
}
#marketer h3{
  margin:0 0 0 18.13%;
  font-size:clamp(38px , 5.83vw , 112px);
  position: relative;
  line-height: 0.6;
}
#marketer h3::before{
  content: "";
  width: calc(100% - 5.2em);
  height: 1px;
  background: #000;
  position: absolute;
  right: 0;
  top: 0;
  display: block;
  z-index: -1;
}
#marketer h3 .txt{
  font-size: clamp(13px , 2.08vw , 40px);
}
#marketer h3 + p{
  margin:min(3.125vw, 60px) 30px 0 18.13%;
  font-size:clamp(14px , 1.46vw , 28px);
}
#marketer .marketer-list{
  max-width:1228px;
  width:70%;
  margin:min(7.81vw , 150px) auto 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap:min(3.125vw, 60px) 0;
  position: relative;
  transition: max-height 2s ease-in-out 0s;
  overflow:hidden;
}
#marketer .marketer-wrap{
  position: relative;
  transition: max-height 2s ease-in-out 0s;
  overflow:hidden;
  display: block;
}

#marketer .marketer-wrap::after{
  content: "";
  display: block;
  width: 100%;
  height: 20%;
  position: absolute;
  left: 0;
  bottom: 0;
  pointer-events: none;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  background: linear-gradient(to bottom, rgba(247, 247, 247, 0) 0%, rgb(247, 247, 247) 70%);    transition: opacity 0.5s ease 0s;
  z-index:5;
}

#marketer .marketer-wrap .index_works_open{
  z-index:6;
}
#marketer .marketer-wrap.active{
  max-height:99999px !important;
}
#marketer .marketer-wrap.active::after{
  display:none !important;
}
#marketer .marketer-wrap.active .index_works_open{
  display:none !important;
}

#marketer .marketer-list .member{
  max-width:574px;
  width:48%;
  background:#fff;
  padding:clamp(20px , 1.56vw , 30px) clamp(20px , 2.08vw , 40px) clamp(30px , 2.08vw , 40px);
  box-sizing:border-box;
  position:relative;
}
#marketer .marketer-list .member.main{
  margin:0 25%;
}
#marketer .marketer-list .member .notes{
  position:absolute;
  background:#000;
  color:#fff;
  left:min(0.52vw , 10px);
  top:min(0.52vw , 10px);
  font-size:clamp(12px , 1.04vw , 20px);
  padding:0.5em 1em 0.5em 2.5em;
  z-index:2;
}
#marketer .marketer-list .member .notes::before {
  content: "";
  background: #ff3b3b;
  position: absolute;
  left: 1em;
  top: 50%;
  transform: translateY(-50%);
  width: 7px;
  height: 7px;
  display: block;
}

#marketer .marketer-list .member .img{
  position:relative;
}
#marketer .marketer-list .member h4{
  margin-top: -1em;
  font-size:clamp(46px , 3.96vw , 76px);
  position:relative;
  z-index:2;
  line-height: 0.1;
}

#marketer .marketer-list .member h4 span{
  display: block;
}
#marketer .marketer-list .member h4 .en{
  line-height: 1;
}
#marketer .marketer-list .member h4 .white{
  color:#fff;
}
#marketer .marketer-list .member h4 .position{
  font-size:clamp(12px , 0.89vw , 17px);
  line-height: 1.8;
}
#marketer .marketer-list .member h4 .name{
  font-size:clamp(23px , 1.99vw , 38px);
  line-height: 1;
}
#marketer .marketer-list .member p{
  font-size:clamp(13px , 1.1vw , 17px);
  margin-top:0.5em;
}

@media only screen and (max-width: 768px){
  #marketer{
    padding: 80px 0;
  }
  #marketer::before{
    width:100%;
  }
  #marketer h3{
    margin:0 0 0 30px;
  }
  #marketer h3 + p{
    margin:min(6.125vw, 60px) 30px 0;
  }
  #marketer .marketer-list{
    max-width:500px;
    width:calc(100% - 60px);
    padding:0 30px;
  }
  #marketer .marketer-list .member{
    width:100%;
  }
  #marketer .marketer-list .member.main{
    margin:0 auto;
  }
}


/* other
-----------------------------------------*/
#marketer .other{
  margin:min(7.81vw , 150px) auto 0;
  max-width:1228px;
  width: 70%;
}
#marketer .other h4{
  font-size:clamp(16px , 2.08vw , 40px);
  text-align:center;
}
#marketer .other .other-list .member{
  background:#fff;
  margin:min(5.56vw , 30px) auto 0;
  padding:min(1.56vw , 30px) min(2.08vw , 40px);
}
#marketer .other .other-list .member h5{
  background:#000;
  color:#fff;
  font-size:clamp(12px , 1.04vw , 20px);
  padding:0.5em 1em 0.5em 2.5em;
  display:inline-block;
  position:relative;
}
#marketer .other .other-list .member h5::before {
  content: "";
  background: #ff3b3b;
  position: absolute;
  left: 1em;
  top: 50%;
  transform: translateY(-50%);
  width: 7px;
  height: 7px;
  display: block;
}
#marketer .other .other-list .member p{
  margin-top:1em;
  font-size:clamp(12px , 1.1vw , 21px);
}

@media only screen and (max-width: 768px){
  #marketer .other {
    width: calc(100% - 60px);
  }
  #marketer .other .other-list .member p{
    padding: 10px 10px 20px;
  }
}

/* merit
=========================================*/
#merit{
  position:relative;
  padding:min(10.42vw , 200px) 0;
}
#merit::before{
  content:"";
  background:#F8F8F8;
  width:86.62%;
  height: calc(100% - clamp(100px , 13.02vw , 250px));
  z-index: -1;
  position:absolute;
  right:0;
  top:clamp(100px , 13.02vw , 250px);
  border-radius:min(4.69vw , 90px) 0 0 0 ;
}
#merit h3{
  margin:0 0 0 18.13%;
  font-size:clamp(38px , 5.83vw , 112px);
  position: relative;
  line-height: 0.6;
}
#merit h3::before{
  content: "";
  width: calc(100% - 3.2em);
  height: 1px;
  background: #000;
  position: absolute;
  right: 0;
  top: 0;
  display: block;
  z-index: -1;
}
#merit h3 .txt{
  font-size: clamp(13px , 2.08vw , 40px);
}
#merit .merit-list{
  max-width:1366px;
  margin:min(7.02vw , 250px) 0 0 18.13%;
}
#merit .merit-list .item{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap:min(2.17vw, 80px) 4.3%;
}
#merit .merit-list .item + .item{
  margin-top:clamp(50px , 6.25vw , 120px);
/*  margin-top:min(6.25vw , 120px);*/
}

#merit .merit-list .item h4{
  width:100%;
  font-size:clamp(15px , 1.8vw , 32px);
  padding:0 0 0 min(11.41vw , 212px);
  box-sizing:border-box; 
  position: relative;
  min-height:min(13.02vw , 250px);
  display: flex;
  align-items: center;
  font-weight:bold;
}
#merit .merit-list .item h4 .ib{
  position:relative;
  text-decoration: underline;
  text-underline-offset: 0.4em;
  text-decoration-thickness: 1.5px;
  text-decoration-color: #ff3a3a;
}
/*#merit .merit-list .item h4 .ib::before{
  content: "";
  width: 100%;
  height: 1.5px;
  background: #ff3a3a;
  position: absolute;
  left: 0;
  bottom: 0;
}*/
#merit .merit-list .item h4 .en{
  position: absolute;
  left: 0;
  top: 50%;
  font-size:clamp(72px , 13.02vw , 250px);
  transform: translateY(-50%);
  color:rgba(85,85,85,.1);
  font-weight:400;
}
#merit .merit-list .item .txt{
  width:47%;
  font-size:clamp(12px , 1.15vw , 22px);
}

#merit .merit-list .item .img{
  width:43%;
}

@media only screen and (max-width: 768px){
  #merit{
    padding:80px 0;
  }
  #merit::before{
    width:100%;
  }
  #merit h3{
    margin:0 0 0 30px;
  }
  #merit .merit-list{
    margin:min(13.02vw , 250px) 30px 0;
  }
  #merit .merit-list .item h4{
    padding: 0 0 0 min(18.41vw, 212px);
    white-space: nowrap;
  }
  #merit .merit-list .item .txt{
    width:100%;
    order: 2;
    margin: 30px 0 0;
  }
  #merit .merit-list .item .img{
    width:100%;
    order: 1;
    text-align:center;
    margin: 20px 0 0;
  }
  #merit .merit-list .item .img img{
    max-width:350px;
    margin:0 auto;
  }


}

/* price
=========================================*/
#price{
  padding:clamp(74px , 11.02vw , 250px) 0 0;
}
#price h3{
  margin:0 0 0 18.13%;
  font-size:clamp(38px , 5.83vw , 112px);
  position: relative;
  line-height: 0.6;
}
#price h3::before{
  content: "";
  width: calc(100% - 2.8em);
  height: 1px;
  background: #000;
  position: absolute;
  right: 0;
  top: 0;
  display: block;
  z-index: -1;
}
#price h3 .txt{
  font-size: clamp(13px , 2.08vw , 40px);
}
#price h3 + p{
  margin: min(3.125vw, 60px) 0 0 18.13%;
  font-size: clamp(14px , 1.46vw , 28px);
}
#price .plan{
  background:#F2F2F2;
  padding:min(7.81vw , 150px) 30px min(10.42vw , 200px);
  margin:min(7.81vw , 150px) 0 0;
}
#price .plan .inner{
  max-width:1608px;
  margin:0 auto;
  padding:0 min(3.81vw , 50px);
}
#price .plan h4{
  font-size:clamp(18px , 2.08vw , 40px);
  padding-left:0.5em;
  border-left:8px solid #ff3b3b;
}
#price .plan h4 + p{
  margin:1em 0 min(3.125vw, 60px);
  font-size: clamp(14px, 1.46vw, 28px);
}
#price .plan .plan-list{
  display: grid;
  grid-auto-columns:1fr;
  grid-column-gap: 16px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1.25fr 1fr;
  grid-row-gap: 3em;
}

#price .plan .plan-list .detail{
  background:#fff;
  display: flex;
  flex-direction: column;
}
#price .plan .plan-list .detail.standard,
#price .plan .plan-list .detail.free{
  border: 2px solid red;
  border-image: linear-gradient(to right, #ff8177 0%, #ff867a 0%, #ff8c7f 21%, #f99185 52%, #cf556c 78%, #b12a5b 100%) 2;
  box-sizing:border-box;
  height:calc(100% + 2em);
  position: relative;
  top:-1em;
}
#price .plan .plan-list .detail h5{
  font-size:clamp(18px, 1.8vw , 32px);
  text-align:center;
  padding:1em 0;
  letter-spacing:-0.05em;
}
#price .plan .plan-list .detail h5 span{
  font-family: "Aboreto", system-ui;
  font-weight: 400;
  font-style: normal;
  font-size:clamp(12px , 0.83vw , 16px);
  color:#ff3b3b;
  letter-spacing:0;
  display:block;
}
#price .plan .plan-list .detail .price-yen{
  font-size:clamp(30px , 2.6vw , 50px);
  background:#F8F8F8;
  padding:0.5em 0;
  text-align:center;
  display: flex;
  justify-content: center;
  align-items: center;
}
#price .plan .plan-list .detail .price-yen::before{
  content:"月額";
  font-size:clamp(12px , 0.99vw , 19px);
   writing-mode: vertical-rl;
}
#price .plan .plan-list .detail .price-yen::after{
  content:"円～";
  font-size:clamp(12px , 0.99vw , 19px);
  margin-top: 1em;
}
#price .plan .plan-list .detail>ul{
  font-size:clamp(12px , 0.99vw , 18px);
  padding:1em 1em 2em 1em;
  flex-grow: 1;
}
#price .plan .plan-list .detail>ul>li{
  font-size:clamp(12px , 0.99vw , 18px);
  padding:0 0 0 2em;
  background:url(../img/ico_check.svg) no-repeat left top;
  background-size:auto 1.6em;
  margin-top:1.5em;
}
#price .plan .plan-list .detail>ul>li.time{
  background:url(../img/ico_check2.svg) no-repeat left top;
  background-size:auto 1.6em;
}
#price .plan .plan-list .detail>ul>li ul{
  font-size:clamp(11px , 0.83vw , 16px);
/*  font-size:clamp(14px , 0.83vw , 16px);*/
  list-style: disc;
  margin-left: 1em;
}

#price .plan .plan-list .detail .btn{
  text-align:center;
  padding:0 1em 1.5em;
}
#price .plan .plan-list .detail .btn a{
  background:#000;
  color:#fff;
  position:relative;
  padding:0.9em 0;
  font-size: clamp(14px,1.35vw , 26px);
  display:block;
  border:1px solid #000;
  overflow:hidden;
}
#price .plan .plan-list .detail .btn a span{
  mix-blend-mode: difference;
  position: relative;
  z-index: 2;
}
#price .plan .plan-list .detail .btn a::after{
  content:"";
  height:100%;
  width:0;
  background:#fff;
  position:absolute;
  left:0;
  top:0;
  z-index:1;
  transition: width 0.3s ease 0s;
}
#price .plan .plan-list .detail .btn a:hover::after{
  width:100%;
}
#price .plan .plan-list .detail .btn .att{
  font-size: clamp(11px, 0.83vw, 16px);
  margin-top:0.5em;
}




#price .plan .plan-list > .att{
  grid-column: 1 / 5;
  font-size:clamp(11px , 0.95vw , 18px);
  margin:1em 0 min(5.21vw , 100px);
}
#price .plan .plan-list .att li{
  text-indent:-1em;
  padding-left:1em;
}

#price .plan .plan-list.shot-list{
  grid-template-columns: 1.1fr 1fr 1fr;
}
#price .plan .plan-list.shot-list .detail{
  display:flex;
  flex-direction:column;
}
#price .plan .plan-list.shot-list .detail>ul{
  background:#F8F8F8;
  flex-grow:1; 
}
#price .plan .plan-list.shot-list .detail>ul li .att{
  font-size:clamp(11px , 0.83vw , 16px);
  line-height:1.8;
  display: block;
}
#price .plan .plan-list .detail.shot-list .btn{
  background:#F8F8F8;
}
@media only screen and (max-width: 980px){
  #price .plan .plan-list{
    grid-template-columns: 1fr 1fr;
  }
  #price .plan .plan-list.shot-list .detail{
  }
  #price .plan .plan-list .detail.standard{
    height:auto;
    top:unset;
  }
  #price .plan .plan-list > .att{
    grid-column: 1 / 3;
  }
}

@media only screen and (max-width: 768px){
  #price h3{
    margin:0 0 0 30px;
  }
  #price h3 + p{
    margin: min(3.125vw, 60px) 30px 0;
  }
  #price .plan .plan-list,
    #price .plan .plan-list.shot-list{
    grid-template-columns: 1fr;
  }
  #price .plan .plan-list .detail.free{
    height:auto;
    top:unset;
  }
  #price .plan .plan-list > .att{
    margin:1em 0 50px;
    grid-column: 1 / 1;
  }
}
@media only screen and (max-width: 640px){
  #price .plan .plan-list.shot-list{
  }
  #price .plan .plan-list .detail,
  #price .plan .plan-list.shot-list .detail{
    width:100%;
    max-width:500px;
  }
}

/* flow
=========================================*/
#flow{
  padding:clamp(74px , 11.02vw , 300px) 0;
}
#flow h3{
  margin:0 0 0 18.13%;
  font-size:clamp(38px , 5.83vw , 112px);
  position: relative;
  line-height: 0.6;
}
#flow h3::before{
  content: "";
  width: calc(100% - 3.2em);
  height: 1px;
  background: #000;
  position: absolute;
  right: 0;
  top: 0;
  display: block;
  z-index: -1;
}
#flow h3 .txt{
  font-size:clamp(13px , 2.08vw , 40px);
}
#flow ul{
  max-width:1206px;
  width:80%;
  margin:min(7.81vw , 150px) auto 0;
  display: flex;
  gap:clamp(20px , 1.56vw , 30px);
   flex-wrap: wrap;
}
#flow ul li{
  background:#F2F2F2;
  text-align:center;
  width:calc(calc(100% - clamp(20px , 1.56vw , 30px) * 3) / 4);
  font-size:clamp(16px , 1.35vw , 24px);
  padding:0 0 1.5em;
  position: relative;
}
#flow ul li .en{
  color:#e3e3e3;
  font-size:min(6.25vw , 120px);
  line-height:0.8;
  text-align:left;
  display:block;
  margin-bottom:min(1.56vw , 30px);
}
#flow ul li img{
  height:min(5.21vw , 100px);
  margin:0 auto;
}
#flow ul li p{
  margin:1em 0.5em 0;
}
#flow ul li p .supple{
  font-size:clamp(10px , 0.83vw , 16px);
  display:block;
}

@media only screen and (max-width: 768px){
  #flow h3{
    margin:0 0 0 30px;
  }
  #flow ul li{
    width:calc(calc(100% - clamp(20px , 1.56vw , 30px))  / 2);
    padding:0 0 0.6em;
  }
  #flow ul li img{
    height:60px;
  }
  #flow ul li .en{
    font-size:50px;
  }
  #flow ul li p{
    margin:0.2em 0.5em 0;
    line-height: 1.3;
  }
}

@media only screen and (max-width: 500px){
/*  #flow ul{
    max-width:300px;
    width:100%;
  }
  #flow ul li{
    width:100%;
  }

  #flow ul li .en{
    font-size:80px;
  }
*/
}


/* faq
=========================================*/
#faq{
  background:#F2F2F2;
  padding:clamp(74px , 11.02vw , 160px) 0;
}
#faq h3{
  margin:0 0 0 18.13%;
  font-size:clamp(38px , 5.83vw , 112px);
  position: relative;
  line-height: 0.6;
}
#faq h3::before{
  content: "";
  width: calc(100% - 2.2em);
  height: 1px;
  background: #000;
  position: absolute;
  right: 0;
  top: 0;
  display: block;
}
#faq h3 .txt{
  font-size: clamp(13px , 2.08vw , 40px);
}

#faq dl{
  max-width:1313px;
  width:80%;
  margin:min(7.81vw , 150px) auto 0;
}
#faq dt{
  background:#fff;
  padding:0.5em 1em 0.5em 2.5em;
  font-size:clamp(16px , 1.575vw , 31px);
  position:relative;
  cursor:pointer;
}
#faq dt .en{
  content:"Q";
  font-size:clamp(14px , 1.25vw , 24px);
  color:#ff3b3b;
  position:absolute;
  left:1.5em;
  top:50%;
  transform: translateY(-50%);
}
#faq dd{
  font-size:clamp(13px , 1.3vw , 25px);
  margin-top:1em;
  display:none;
}
#faq dd + dt{
  margin-top:min(3.125vw, 60px);
}
#faq dt::before,
#faq dt::after  {
    content: '';
    display: inline-block;
    width: clamp(14px , 1.875vw , 36px);
    height: 2px;
    background-color: #8D8D8D;
    position: absolute;
    right: 1em;
    top: 50%;
    transform: translateY(-50%);
    transition: opacity 0.5s;
}

#faq dt::after {
    transform: translateY(-50%) rotate(90deg);
    transition: transform 0.5s;
}

#faq dt.show::before {
    opacity: 0;
}

#faq dt.show::after {
    transform: translateY(-50%) rotate(180deg);
}

@media only screen and (max-width: 768px){
  #faq h3{
    margin:0 0 0 30px;
  }
  #faq dl{
    width:calc(100% - 60px);
    margin:min(7.81vw , 150px) 30px 0;
  }
  #faq dt{
    padding:0.5em 1.9em 0.5em 2.7em;
  }
}

/* contact
=========================================*/
#contact_form{
  padding:0 30px 50px;
}
#contact_form #contact{
  max-width: 1410px;
  margin:0 auto;
  padding:clamp(74px , 11.02vw , 160px) 0  0;
}
#contact_form h3{
  margin:0 0 0 15.03%;
  font-size:clamp(38px , 5.83vw , 112px);
  position: relative;
  line-height: 0.6;
}
#contact_form h3::before{
  content: "";
  width: calc(100% - 5em);
  height: 1px;
  background: #000;
  position: absolute;
  right: 0;
  top: 0;
  display: block;
}
#contact_form h3 .txt{
  font-size: clamp(13px , 2.08vw , 40px);
}
#contact_form .wpcf7{
  margin: min(7.81vw, 150px) auto 0;
}

@media only screen and (max-width: 768px){
  #contact_form{
    padding:0 30px;
  }
  #contact_form h3{
    margin:0;
  }

}