:root {
  --main-color: #231815;
  --point01-color: #b7dce2;
  --point02-color: #ddddb6;
  --point03-color: #f1cece;
  --point_new-color: #c7bbdc;
}
.anno{
  display: inline-block;
  padding-left: 1em;
  text-indent: -1em;
  font-size: .8em;
}
.btn.pdf>span{
  background: url('data:image/svg+xml;utf8,<svg fill="%23231815" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" viewBox="0 0 498.436 498.436" xml:space="preserve"><g><g><g><path d="M389.277,0H74.15v68.25H22.941v181.13h51.187v249.056h401.368V80.653L389.277,0z M293.805,151.125v14.841H257.07v37.49h-17.731v-87.987h60.355v14.884H257.07v20.773H293.805z M224.261,160.314c0,7.248-0.906,13.482-2.696,18.723c-2.2,6.385-5.371,11.584-9.405,15.531c-3.128,3.063-7.226,5.371-12.425,7.032c-4.012,1.23-9.232,1.877-15.747,1.877h-33.392v-88.009h32.399c7.312,0,12.921,0.539,16.76,1.661c5.134,1.553,9.534,4.228,13.201,8.111c3.689,3.883,6.471,8.585,8.434,14.258C223.312,145.171,224.261,152.052,224.261,160.314z M86.359,170.258v33.241H68.627v-0.022v-88.009h28.452c10.785,0,17.817,0.453,21.053,1.337c5.004,1.337,9.297,4.185,12.64,8.542c3.451,4.465,5.134,10.181,5.134,17.127c0,5.436-0.971,9.923-2.934,13.611c-1.941,3.753-4.422,6.601-7.485,8.736c-2.955,2.049-5.997,3.473-9.103,4.12c-4.293,0.82-10.354,1.316-18.4,1.316H86.359z M446.375,469.186c-25.842,0-317.306,0-343.105,0c0-13.223,0-116.482,0-219.806h244.613V68.25H103.292c0-20.535,0-34.751,0-39.108c25.756,0,263.983,0,274.531,0c6.989,6.601,60.873,56.968,68.595,64.151C446.375,105.136,446.375,442.654,446.375,469.186z"/><path d="M199.066,135.357c-2.157-2.071-4.875-3.408-8.175-4.12c-2.545-0.582-7.334-0.863-14.539-0.863h-7.981v58.22h13.201c4.94,0,8.499-0.259,10.721-0.841c2.912-0.712,5.285-1.985,7.161-3.667c1.941-1.726,3.451-4.53,4.681-8.456c1.186-3.969,1.812-9.362,1.812-16.135c0-6.73-0.604-12.015-1.812-15.596C202.884,140.232,201.201,137.406,199.066,135.357z"/><path d="M114.724,134.882c-1.855-2.071-4.249-3.343-7.118-3.904c-2.049-0.41-6.363-0.604-12.705-0.604h-8.542v24.957h9.621c7.01,0,11.648-0.431,13.999-1.381c2.373-0.906,4.228-2.33,5.587-4.293c1.337-1.963,1.963-4.228,1.963-6.86C117.55,139.628,116.687,136.996,114.724,134.882z"/></g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g></g></svg>') no-repeat right center;
  background-size: 1em;
  padding-right: 1em;
}
.pc_only{
  display: block;
}
.tab_only{
  display: none;
}
.sp_only{
  display: none;
}
.txt_r{
text-align: right;
}
#fznih{
  color: var(--main-color);
  line-height: 1.7;
  font-family: 'Noto Sans JP';
}
#fznih .kv_fzn{
    /* height: 100vh; */
    height: calc(100vh - 3em);
    width: 100%;
        margin-top: 3em;
    position: relative;
}
#fznih .kv_fzn .kv_fzn_bg{
    height: 100%;
    width: 100%;
    background: url(../images/kv.webp)no-repeat center 1vw;
    background-size: cover;
    position: absolute;
    opacity: 0;
      transition: opacity 2s ease 0s;
    animation: opacity 1.5s 3.4s ease-in-out forwards;
}
#fznih .kv_fzn h2{
    position: absolute;
    /* width: max(30%,50vw); */
    width: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    animation: h2_pc 1s 2.6s ease-in-out forwards;
}
#fznih .kv_fzn h2.no-anim {
  animation: none !important;
}
#fznih .kv_fzn #logo_main{
    position: absolute;
}
#fznih .kv_fzn #logo_main .st0{display:none;}
	#fznih .kv_fzn #logo_main .st1{display:inline;opacity:0.85;}
	#fznih .kv_fzn #logo_main .st2{opacity:0.85;clip-path:url(#SVGID_00000003104107177492557430000010279742971271663018_);}
	#fznih .kv_fzn #logo_main .st3{clip-path:url(#SVGID_00000031899505653418867650000005216234779531193015_);fill:#FFF9BF;}
	#fznih .kv_fzn #logo_main .st4{clip-path:url(#SVGID_00000031899505653418867650000005216234779531193015_);fill:#FFF7A4;}
	#fznih .kv_fzn #logo_main .st5{clip-path:url(#SVGID_00000031899505653418867650000005216234779531193015_);fill:#FFF46E;}
	#fznih .kv_fzn #logo_main .st6{clip-path:url(#SVGID_00000031899505653418867650000005216234779531193015_);fill:#FFFBD8;}
	#fznih .kv_fzn #logo_main .st7{clip-path:url(#SVGID_00000031899505653418867650000005216234779531193015_);fill:#FFF68C;}
	#fznih .kv_fzn #logo_main .st8{clip-path:url(#SVGID_00000031899505653418867650000005216234779531193015_);fill:#FFF24A;}
	#fznih .kv_fzn #logo_main .st9{display:inline;fill:#231815;}
	#fznih .kv_fzn #logo_main .st10{fill:#262727;}
	#fznih .kv_fzn #logo_main .st11{display:inline;fill:#262727;}
	#fznih .kv_fzn #logo_main .st12{fill:none;stroke:#FF2727;stroke-width:22;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
      #fznih .kv_fzn #logo_main #text{
        mask: url(#mask);
      }
      #fznih .kv_fzn #logo_main #mask path{
         fill: none;
      stroke: #fff;
      stroke-width: 25;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-dasharray: 4000px;
      animation: handwriting 2.5s linear forwards;
      }
      #fznih .kv_fzn #cloud .cls-1 {
        opacity: .9;
      }

      #fznih .kv_fzn #cloud .cls-2 {
        fill: #fff46e;
      }

     #fznih .kv_fzn #cloud .cls-3, #cloud .cls-4 {
        fill: #262727;
      }

      #fznih .kv_fzn #cloud .cls-5 {
        fill: #fff9bf;
      }

      #fznih  .kv_fzn #cloud .cls-6 {
        fill: #fff24a;
      }

      #fznih .kv_fzn #cloud .cls-4 {
        font-family: MVBoli, 'MV Boli';
        font-size: 152.7px;
      }

      #fznih .kv_fzn #cloud .cls-7, #cloud .cls-8 {
        fill: none;
      }

      #fznih .kv_fzn #cloud .cls-9 {
        clip-path: url(#clippath-1);
      }


      #fznih .kv_fzn #cloud .cls-10, #cloud .cls-11 {
        display: none;
      }

      #fznih .kv_fzn #cloud .cls-12 {
        fill: #fff7a4;
      }


      #fznih .kv_fzn #cloud .cls-13 {
        fill: #fffbd8;
      }

      #fznih .kv_fzn #cloud .cls-14 {
        fill: #fff68c;
      }

      #fznih .kv_fzn #cloud .cls-15 {
        clip-path: url(#clippath);
      }
      #fznih .kv_fzn #cloud .cls-1 {
        opacity: .9;
      }
      #fznih .kv_fzn #logo_txt_jp{
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    height: 100%;
    opacity: 0;
    animation: opacity 1s 4.4s ease-in forwards;
}
      #fznih .kv_fzn #logo_txt_jp .st0{fill:#262727;}
#fznih .kv_fzn #registered{
        position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    height: 100%;
    opacity: 0;
    animation: opacity 1s 4.4s linear forwards;
}
      #fznih .kv_fzn #registered .st0{fill:#231815;}
      #fznih .kv_fzn .scroll-down_container {
    z-index: 999999;
    position: absolute;
    width: 100%;
    bottom: 0dvh;
}

#fznih .kv_fzn .scroll-down {
  position: absolute;
  opacity: 0;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  font-family: serif;
  color: #f9f29d;
  font-size: 14px;
  text-decoration: none;
  animation: opacity 1.5s 3.4s ease-in-out forwards;
}

#fznih .kv_fzn .mouse-icon {
  width: 30px;
  height: 50px;
  border: 1px solid #f9f29d;
  border-radius: 20px;
  position: relative;
  margin-inline:auto;
  margin-bottom: 6px;
}
#fznih .kv_fzn .mouse-icon::before {
  content: "";
  width: 1px;
  height: 8px;
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #f9f29d;
  border-radius: 2px;
  animation: scroll 2s infinite;
}
.section_lead{
  padding-top: 100px;
    /* background: url(../images/section_lead_bg.webp) no-repeat center 14vw;
    background-size: contain;
    padding-bottom: 24vw; */
    margin: auto;
}
.section_lead h3{
  text-align: center;
  font-weight: 600;
  font-size: min(4vw,52px);
  overflow: hidden;
  opacity: 0;
  -webkit-mask-image: linear-gradient(to left, transparent 30%, black 68%);
  mask-image: linear-gradient(to left, transparent 30%, black 68%);
  -webkit-mask-size: 200% 100%;
  mask-size: 200% 100%;
  -webkit-mask-position: left;
  mask-position: left;
}
.section_lead h3.active{
  animation: mask_anime 3.5s ease forwards;
}
.section_lead h3 span{
  position: relative;
}
.section_lead h3 span::after{
  position: absolute;
  content: "";
  background: url(../images/ttl_ornament.svg)no-repeat center bottom;
  bottom: -.3em;
  left: 0;
  display: block;
  width: 120%;
  height: 100%;
  mix-blend-mode: multiply;
}
.section_lead .lead_area{
      background: url(../images/section_lead_bg.webp) no-repeat center 0vw;
    background-size: contain;
    padding-bottom: 24vw;
}
.section_lead .section_lead_txt{
  text-align: center;
  margin-bottom: .7em;
  opacity: 0;
  transition: opacity 1.5s ease 1s;
}
.section_lead .section_lead_txt.active{
  opacity: 1;
}
.section_lead .point_list{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  padding: 4% 0 0 0;
}
.section_lead .point_list>li{
  max-width: 25%;
  min-width: 280px;
}
.section_lead .point_list>li:not(:last-child){
  margin-left: 2em;
}
.section_lead .point_list>li>dl>dt{
  display: flex;
    /* justify-content: center; */
    align-items: center;
}
.section_lead .point_list>li>dl>dt>i{
  background: #919191;
  font-size: min(1.3vw,25px);
  border: 3px solid #070606;
    position: relative;
    max-width: 75px;
    max-height: 100px;
    width: 8vw;
    height: 11vw;
    box-sizing: border-box;
    flex-shrink: 0;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}
.section_lead .point_list>li.point_new{
width: 80%;
    min-width: auto;
    max-width: none;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    margin: auto;
}
.section_lead .point_list>li.point_new>dl>dd>figure{
  position: relative;
}
.section_lead .point_list>li.point_new>dl>dd>figcaption{
  position: absolute;
  bottom: 0;
}
.section_lead .point_list>li:not(.point_new)>dl>dt>i::before{
  content: "Point";
    font-size:min(1.4vw,55%);
    position: absolute;
    top: 12%;
    left: 50%;
    transform: translate(-50%, 0);
}
.section_lead .point_list>li.point_new>dl>dt>i::before{
  content: "New";
    font-size:clamp(52%, 1.6vw, 66%);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.section_lead .point_list>li>dl>dt>i::after{
  content: "";
  /* width: 3.5em;
  height: 3.5em; */
  width: 136%;
    height: 80%;
  border: 1px solid #070606;
  position: absolute;
  top:50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.section_lead .point_list>li.point_new>dl>dt>i{
  background: var(--point_new-color);
}
.section_lead .point_list>li.point01>dl>dt>i{
  background: var(--point01-color);
}
.section_lead .point_list>li.point02>dl>dt>i{
  background: var(--point02-color);
}
.section_lead .point_list>li.point03>dl>dt>i{
  background: var(--point03-color);
}
.section_lead .point_list>li>dl>dt>span{
  font-size:min(1.18vw, 30px);
  font-weight: 500;
  position: relative;
  margin-left: .5em;
}
.section_lead .point_list>li>dl>dt>span::after{
  position: absolute;
  content: "";
  background: #bbbbbb;
  height: .3em;
  width: 100%;
  bottom: 0;
  left: 0;
  clip-path: polygon(0 1%, 100% 1%, 96% 100%, 6% 100%);
  mix-blend-mode: multiply;
}
.section_lead .point_list>li.point_new>dl>dt>span::after{
  background: var(--point_new-color);
}
.section_lead .point_list>li.point01>dl>dt>span::after{
  background: var(--point01-color);
}
.section_lead .point_list>li.point02>dl>dt>span::after{
  background: var(--point02-color);
}
.section_lead .point_list>li.point03>dl>dt>span::after{
  background: var(--point03-color);
}
.section_lead .point_list>li>dl>dd{
  margin-top: min(1vw,1em);
  padding: 0 1.5em 0;
}
.section_lead .point_list>li.point01 .u_txt_style{
  color: #537878;
}
.section_lead .point_list>li.point01>dl>dd > p{
  text-align: center;
}
.section_lead .point_list>li.point01>dl>dd .img01{
  width: 32%;
  margin: 1em auto ;
  display: block;
}
.section_lead .point_list>li.point01>dl>dd .arrw{
  background: var(--point01-color);
  display: block;
  clip-path: polygon(40% 0%, 40% 20%, 100% 20%, 100% 80%, 40% 80%, 40% 100%, 0% 50%);
      width: 2em;
    height: 2em;
    transform: rotate(-90deg);
    margin: auto;
}
.section_lead .point_list>li.point01>dl>dd figure{
  border: 11px solid #949fa8;
  text-align: center;
  padding: 1em 1em;
    width: 90%;
  margin: auto;
  box-shadow: #949fa8 12px 9px 0px;
}
.section_lead .point_list>li.point01>dl>dd figure >img{
  margin-bottom: 1em;
  width: 50%;
}
.section_lead .point_list>li.point02 .txt_bubble{
  padding: 1.5em;
  border: 2px solid #656463;
  border-bottom: 4px solid #656463;
  position: relative;
  margin-bottom: 5em;
}
.section_lead .point_list>li.point02 .txt_bubble::before{
  position: absolute;
    width: 9%;
    height: min(3vw, 50px);
    content: "";
    display: block;
    background: #656463;
    clip-path: polygon(0 0, 50% 100%, 100% 0);
    top: 100%;
    left: 30%;
}
.section_lead .point_list>li.point02 .txt_bubble::after{
  position: absolute;
    width: 9%;
    height: min(3vw, 50px);
    content: "";
    display: block;
    background: #fff;
    clip-path: polygon(0 0, 50% 100%, 100% 0);
    top: 99%;
    left: 31%;
}
.section_lead .point_list>li.point02 > dl >dd > figure.img01{
  position: relative;
  width: 46%;
    margin: 1em auto;
    display: block;
}
.section_lead .point_list>li.point02 > dl >dd > figure.img01>.cap01{
  position: absolute;
  display: inline-block;
  top: max(92%, 6vw);
    left:  max(8.5%, 1vw);
    font-size:  min(1vw, 1em);;
}
.section_lead .point_list>li.point02 > dl >dd > figure.img01>.cap02{
  position: absolute;
  display: inline-block;
  top:  min(102%, 9.6vw);
  font-size:  min(1vw, 1em);
    right:max(27.5%, 2.3vw);

}
.section_lead .point_list>li.point02 > dl >dd > figure.img02{
  position: relative;
  width: 46%;
    margin: 1em auto;
    display: block;
    margin-top: 3em;
}
.section_lead .point_list>li.point03 > dl >dd >ul.point03_list{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.section_lead .point_list>li.point03 > dl >dd >ul.point03_list li{
  width: 50%;
}
.section_lead .point_list>li.point03 > dl >dd >ul.point03_list li figcaption{
  text-align: center;
}
.section_lead .point_list>li.point03 > dl >dd >p.point03_txt_area{
  position: relative;
}
.section_lead .point_list>li.point03 > dl >dd >p.point03_txt_area::before{
  position: absolute;
  content: "";
  width: 2px;
  height: 120%;
  background: #585453;
  top:50%;
  left: 1em;
  transform: translate(0,-50%);
}
.section_lead .point_list>li.point03 > dl >dd >p.point03_txt_area::after{
  position: absolute;
  content: "";
  width: 2px;
  height: 120%;
  background: #585453;
  top:50%;
  right:1em;
  transform: translate(0,-50%);
}
.section_lead .point_list>li.point03 > dl >dd >p.point03_txt_area > span{
  border-top: #d26363 2px solid;
    border-bottom: #d26363 2px solid;
    display: block;
    padding: 1em 2em;
}
.section_lead .section_lead_btmline{
  position: relative;
  background: var(--main-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
  transform: translate(-100%,0);
  overflow: hidden;
}
.section_lead .section_lead_btmline.active{
  animation: btmline .5s .2s ease-in-out forwards;
}
.section_lead .section_lead_btmline::before{
  position: absolute;
  top:0;
  left: 0;
  content: '';
  background: #e5e5e5;
  width: 100%;
  height: 100%;
}
.section_lead .section_lead_btmline.active::before{
  animation: btmline_aftr .5s 1s ease-in-out forwards;
}
.section_lead .section_lead_btmline>h4{
  width: 35%;
  padding-left: 2em;
}
.section_lead .section_lead_btmline .section_lead_btmline_list{
  display: flex;
  justify-content: end;
}
.section_lead .section_lead_btmline .section_lead_btmline_list li{
  width: 20%;
}
.section_lead .section_lead_specbox{
  position: relative;
  width: 80%;
  margin: auto;
  margin-top: 120px;
  margin-bottom: 120px;
  overflow: visible;
}
.section_lead .section_lead_specbox::after{
  content: "";
  width: 103%;
  height: 108%;
  margin: auto;
  position: absolute;
  top:50%;
  left: 50%;
  transform: translate(-50%,-50%);
  background: #e5e5e5;
  z-index: 1;
  clip-path: polygon(
  108px 0,
  calc(100% - 108px) 0,
  100% 108px,
  100% calc(100% - 108px),
  calc(100% - 108px) 100%,
  108px 100%,
  0 calc(100% - 108px),
  0 108px
);

  overflow: visible;
  z-index: 0;
}
.section_lead .section_lead_specbox .section_lead_specbox_inner{
  border: 2px solid #63625b;
  margin: auto;
  width: 98%;
  height: 95%;
      position: relative;
      padding: 3em;
    z-index: 99999;
}
.spec_flexbox{
  display: flex;
  justify-content: space-between;
}
.spec_flexbox > li > dl > dt{
  font-size: max(2vw,24px);
  font-weight: 500;
}
.spec_flexbox > li > dl > dt .specbox_under_line{
  border-bottom: 2px solid var(--main-color);
  display: inline-block;
}
.spec_flexbox > li > dl > dt .specbox_new_icon{
  background: #e60012;
    font-size: 0.5em;
    vertical-align: top;
    padding: .3em 1em;
    color: #fff;
    text-align: center;
    display: inline-block;
    border-radius: 71%;
}
.spec_flexbox > li > dl > dt .specbox_sub{
  display: block;
  font-size: 63%;
  font-weight: 400;
}
.spec_flexbox .fzb_flexbox{
  display: flex;
  justify-content: end;
}
 .patentbox{
  padding: .4em;
  background: #6c703a;
  text-align: center;
  color: #fff;
 }
  .patentbox>span{
  display: block;
  border: 2px solid #ffffff;
  padding: .3em;
 }
 .fzb_box{
  padding-right: 2em;
 }
 .fzl_box,.dtls_box{
  border-left: 2px solid var(--main-color);
  border-bottom: 2px solid var(--main-color);
  padding:0 2em 2em 2em;
 }

 .fzl_box dd>figure > img{
  width: 75%;
 }
 .dtls_box {
  margin-top: 2em;
 }
 .dtls_box figure{
  display: flex;
  justify-content: space-between;
  align-items: center;
 }
 .tbl_box{
  width: 100%;
 }
 .tbl_box table{
  width: 100%;
  min-width: 1200px;
 }
 .tbl_box table th,
 .tbl_box table td{
  padding: .5em;
  border: 1px solid #3e3a39;
  background: #fff;
  text-align: center;
 }
.tbl_box table thead th{
  background: #d1c989;
  color: #fff;
}
.tbl_box table .bdr_l_non{
  border-left: none;
}
.tbl_box table .bdr_r_non{
  border-right: none;
}
.tbl_box table .txt_left{
  text-align: left;
}
.tbl_box table .name_product{
  background: #b0ad99;
}
.tsutae_area h4{
  background: #3e3d3d;
  text-align: center;
  padding: 1.5em 0;
  color: #ffffff;
}
.tsutae_area h4 span.tsutae_ttl_main{
  width: 25%;
  display: inline-block;
  opacity: 0;
  opacity: 0;
  -webkit-mask-image: linear-gradient(to left, transparent 20%, black 56%);
  mask-image: linear-gradient(to left, transparent 20%, black 56%);
  -webkit-mask-size: 1000% 100%;
  mask-size: 260% 100%;
  -webkit-mask-position: left;
  mask-position: left;
}
.tsutae_area h4 span.tsutae_ttl_main.active{
 animation: mask_anime 3s ease forwards;
}
.tsutae_area h4 span.tsutae_ttl_sub{
  display: block;
  text-align: center;
  font-size: clamp(1.5vw ,2.6vw,33px);
  opacity: 0;
}
.tsutae_area h4 span.tsutae_ttl_sub.active{
  animation: opacity 1s 1s ease-in-out forwards;
}
/* .tsutae_contentbox{
  background: url(../images/tsutae_area_bg.webp)no-repeat center;
  background-size: cover;
  padding: 10em;
} */
 .tsutae_contentbox {
  background: url(../images/tsutae_area_bg.webp) no-repeat center;
  background-size: 100%;
  background-position: center;
  background-repeat: no-repeat;
  transition: background-size 0.1s ease-out;
  padding: 10em;
}
.tsutae_contentbox p{
  text-align: center;
  font-size: 20px;
}
.tsutae_contentbox .btn_area{
  margin-top: 3em;
}
.tsutae_contentbox .btn_area > li{
  margin: auto;
  text-align: center;
}
.tsutae_contentbox .btn_area > li > a{
  text-align: center;
  color: var(--main-color);
  display: inline-block;
  background: #ffffff3b;
  backdrop-filter: blur(2px);
  border: 1px solid var(--main-color);
  padding: .5em 1.3em;
  font-size: 20px;
}
.tsutae_contentbox .btn_area > li > a:hover{
  background: #e2f37f73;
}
.purchase_area{
  display: flex;
  width: 80%;
  margin:5em auto;
  justify-content: center;
  align-items: center;
  font-size: min(1.7vw, 18px);
}
.purchase_area dt{
  background: #d1c989;
  padding:.9em 1.5em;
  color: #fff;
}
.purchase_area dt>span{
  border-top: 3px solid #ffffff;
  border-bottom: 3px solid #ffffff;
  padding: .8em;
  position: relative;
  display: block;
  text-align: center;
}

.purchase_area dt>span::before{
  position: absolute;
  content: "";
  width: 3px;
  height: 100%;
  background: #ffffff;
  left: -.9em;
  top:50%;
  transform: translate(0,-50%);
}
.purchase_area dt>span::after{
  position: absolute;
  content: "";
  width: 3px;
  height: 100%;
  background: #ffffff;
   right:-.9em;
  top:50%;
  transform: translate(0,-50%);
}
.purchase_area dd{
  margin-left: 3em;
  font-weight: 500;
  width: 70%;
}
.mt10{
  margin-top: 10px;
}
.mt20{
  margin-top: 20px;
}
.mt30{
  margin-top: 30px;
}
.mt40{
  margin-top: 40px;
}
.mt50{
  margin-top: 50px;
}
.mt60{
  margin-top: 60px;
}
.mt70{
  margin-top: 70px;
}
.mt80{
  margin-top: 80px;
}
.mt90{
  margin-top: 90px;
}
.mt100{
  margin-top: 100px;
}

.mb10{
  margin-bottom: 10px;
}
.mb20{
  margin-bottom: 20px;
}
.mb30{
  margin-bottom: 30px;
}
.mb40{
  margin-bottom: 40px;
}
.mb50{
  margin-bottom: 50px;
}
.mb60{
  margin-bottom: 60px;
}
.mb70{
  margin-bottom: 70px;
}
.mb80{
  margin-bottom: 80px;
}
.mb90{
  margin-bottom: 90px;
}
.mb100{
  margin-bottom: 100px;
}
@keyframes h2_pc {
  from {
    top: 50%;
    width: 100%;
  }
  to {
    top: 13vw;
    width: max(30%,50vw);
  }
}
@keyframes h2_sp {
  from {
    top: 50%;
    width: 100%;
  }
  to {
    top: 21vw;
    width: 85vw;
  }
}
@keyframes scroll {
  0% {
    opacity: 1;
    transform: translate(-50%, 0);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, 20px);
  }
}
      @keyframes handwriting {
  0% {
    stroke-dashoffset: 4000px;
  }
  100% {
    stroke-dashoffset: 0;
  }
}
@keyframes reveal-mask {
      0% {
        mask-image: linear-gradient(to right, black 0%, transparent 0%);
      }
      100% {
        mask-image: linear-gradient(to right, black 100%, black 100%);
      }
    }
    @keyframes opacity {
      0% {
        opacity: 0;
      }
      100% {
        opacity: 1;
      }
    }
@keyframes btmline{
  0%{
    transform: translate(-100%,0);
  }
   100%{
    transform: translate(0,0);
  }
}
@keyframes btmline_aftr{
  0%{
    left: 0;
  }
  100%{
    left: 100%;
  }
}
@keyframes mask_anime{
  from {
    opacity: 0;
    -webkit-mask-position: right;
    mask-position: right;
  }
  to {
    opacity: 1;
    -webkit-mask-position: left;
    mask-position: left;
  }
}
@media (max-width: 1512px){
  .dtls_box figure{
  flex-direction: column;
}
.dtls_box figure >img{
  width: 100%;
}
.dtls_box figure > figcaption{
  margin-top: 1em;
}
}
@media (max-width: 1024px) {
  .pc_only{
  display: none;
}
.tab_only{
  display: block;
}
.sp_only{
  display: none;
}
  #fznih .kv_fzn h2{
    position: absolute;
    /* width: max(30%,50vw); */
    width: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    animation: h2_sp 1s 3.4s ease-in-out forwards;
}
  .section_lead .lead_area{
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 37vw;
    background-size: 100%;
    background-position: 0 5vw;
  }
  .section_lead .point_list{
    flex-direction: column;
    padding-left: 20px;
    padding-right: 20px;
  }
  .section_lead .point_list>li:not(:last-child) {
    margin-left: 0;
    margin-bottom: 20vw;
}
.section_lead .point_list>li {
    max-width: 100%;
    min-width: auto;
}
.section_lead .point_list>li>dl>dt>i{
  font-size: 3vw;
}
.section_lead .point_list>li>dl>dt>span{
  font-size: 4vw;
}
.section_lead .point_list>li.point02 .txt_bubble::after {
    width: 4vw;
    height: 4vw;
    bottom: -4vw;
    left: 25vw;
}
.section_lead .point_list>li.point02 .txt_bubble::before {
    width: 4vw;
    height: 4vw;
    left: 26.8vw;
    bottom: -4vw;
    left: 24.3vw;
}

.section_lead .section_lead_btmline>h4{
  padding-left: 0;
  width: 60%;
  padding: 1.5em 0;

}
.section_lead .section_lead_btmline{
  flex-direction: column;
}
.section_lead .section_lead_btmline .section_lead_btmline_list{
  flex-wrap: wrap;
}
.section_lead .section_lead_btmline .section_lead_btmline_list li{
  width: 50%;
}
.section_lead .section_lead_specbox{
  width: 90%;
}
.section_lead .section_lead_specbox::after {
  height: 104%;
    clip-path: polygon(80px 0, calc(100% - 80px) 0, 100% 80px, 100% calc(100% - 80px), calc(100% - 80px) 100%, 80px 100%, 0 calc(100% - 80px), 0 80px);
}
.spec_flexbox{
  flex-direction: column;
}
.spec_flexbox >li:not(:first-child){
  margin-top: 10vw;
  display: flex;
  flex-direction: column;
}
.spec_flexbox >li:not(:first-child) .fzl_box{
  border-top: 2px solid var(--main-color);
  border-right: 2px solid var(--main-color);
  padding: 2em;
  order: 1;
}
.spec_flexbox > li > dl > dt{
  font-size: 5vw;
}
.section_lead .point_list>li.point02 > dl >dd > figure.img01>.cap01{
  font-size: 3vw;
}
.section_lead .point_list>li.point02 > dl >dd > figure.img01>.cap02{
  font-size: 3vw;
  top: auto;
  bottom: -5vw;
}
.purchase_area{
  width: 100%;
  font-size: 1.5vw;
  margin: 5vw auto;
}
.purchase_area dd{
  width: 55%;
}
}
@media (max-width: 767px) {
    .pc_only{
  display: none;
}
.tab_only{
  display: none;
}
.sp_only{
  display: block;
}
.section_lead .lead_area {
        padding-bottom: 48vw;
        background-size: 100%;
        background-position: 0 43vw;
    }
  .section_lead .section_lead_specbox::after {
  height: 102%;
    clip-path: polygon(40px 0, calc(100% - 40px) 0, 100% 40px, 100% calc(100% - 40px), calc(100% - 40px) 100%, 40px 100%, 0 calc(100% - 40px), 0 40px);
}
.section_lead .section_lead_specbox .section_lead_specbox_inner{
  padding: 7vw;
}
.section_lead .point_list>li>dl>dt>i{
  width: 14vw;
    height: 19vw;
    font-size: 6vw;
}
.section_lead .point_list>li.point_new{
  flex-direction: column;
  width: 100%;
}
.section_lead .point_list>li>dl:not(:last-of-type){
  margin-bottom: 10vw;
}
.section_lead .point_list>li.point_new>dl>dt>i::before{
  font-size: 2.26vw;
}
.section_lead .point_list>li:not(.point_new)>dl>dt>i::before{
  font-size: min(2.1vw, 13.5px);
}
.section_lead .point_list>li.point02 > dl >dd > figure.img01{
  width: 100%;
}
.section_lead .point_list>li.point02 > dl >dd > figure.img02{
  width: 100%;
}
.section_lead .point_list>li.point02 > dl >dd > figure.img01>.cap01{
  font-size: 5vw;
}
.section_lead .point_list>li.point02 > dl >dd > figure.img01>.cap02{
  font-size: 5vw;
  top: auto;
  bottom: -8vw;
}
.section_lead .section_lead_specbox{
  margin-top: 14vw;
  margin-bottom: 14vw;
}
.tsutae_area h4 span.tsutae_ttl_main{
  width: 57vw;
}
.tsutae_contentbox{
  padding: 17vw 8vw;
}
.tsutae_area h4 span.tsutae_ttl_sub{
  font-size: 3vw;
}
.tsutae_contentbox .btn_area > li > a{
  width: 100%;
}
.purchase_area{
  flex-direction: column;
  font-size: 3vw;
  padding:0 20px;
}
.purchase_area dd{
  width: 100%;
  margin-left:0;
  margin-top: 5vw;
}
}