@charset "utf-8";
/*ブレイクポイント*/
/*1025px~1920px*/
/*769px~1024px~*/
/*541px~768px~*/
/*360px~540px~*/

*{
    margin:0;
    padding:0;
    font-size:62.5%;
    text-decoration: none;
}
img{
    width:100%;
    height:auto;
}

.desc01{
    font-size:1.4rem;
    line-height:1.8;
}

.head02_1{
    font-size:2.9rem;
    text-align: center;
}

.head03_1{
  font-size:2.5rem;
  color:#009944;
}

.head03_2{
  font-size:2.5rem;
  color:#fff;
  text-align: center;
}

.head03_3{
  font-size:2rem;
  color:#000;
  text-align: center;
}

.head04_1{
  font-size:2rem;
  border-left:7px solid #009944;
  padding-left:1rem;
}

/* キーワード値 */
transform-box: content-box;
transform-box: border-box;
transform-box: fill-box;
transform-box: stroke-box;
transform-box: view-box;

/* グローバル値 */
transform-box: inherit;
transform-box: initial;
transform-box: revert;
transform-box: revert-layer;
transform-box: unset;





/* ふわっと表示アニメーション設定 */
.stanime0,
.stanime1,
.triger-threepoint-beta,
.stanime2,
.triger-graff0,
.triger-graff1,
.triger-graff2,
.triger-graff3,
.triger-graff4,
.triger-graff5,
.triger-graff6,
.stanime4_0,
.stanime4_1,
.stanime4_2,
.stanime5_0,
.stanime5_1,
.stanime5_2,
.stanime6_0,
.stanime6_1,
.stanime6_2,
.triger-title-image-path,
.triger-title-image-svg,
.triger-title-image-border-1,
.triger-title-image-border-2
{
  opacity: 0;
  transform: translate3d(0, 30px, 0);
}


.stanime0.st0,
.stanime1.st1,
.triger-threepoint-beta.threepoint-beta,
.stanime4_0.st4_0,
.stanime4_1.st4_1,
.stanime4_2.st4_2,
.stanime5_0.st5_0,
.stanime5_1.st5_1,
.stanime5_2.st5_2,
.stanime6_0.st6_0,
.stanime6_1.st6_1,
.stanime6_2.st6_2,
.triger-title-image-path.title-image-path,
.triger-title-image-svg.title-image-svg,
.triger-title-image-border-1.title-image-border-1,
.triger-title-image-border-2.title-image-border-2
{
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: 1s;
}


.stanime2.st2
{
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: 2s;
}

.triger-graff0.g-0row,
.triger-graff1.g-1row,
.triger-graff2.g-2row,
.triger-graff3.g-3row,
.triger-graff4.g-4row,
.triger-graff5.g-5row,
.triger-graff6.g-6row
{
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: 1s;
}


/* ふわっと表示アニメーション設定(なぞり文字無し) */
.scr-target {
  opacity: 0;
  transform: translate3d(0, 30px, 0);
}
.scr-target.is-active {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: 1s;
}

.bkGreen{
  background-color: #009944;
}

.bkBeige{
  background-color: #f7eed7;
}


.attention-white{
  font-size:1.2rem;
  color:white;
}

.attention-black{
  font-size:1.2rem;
  color:black;
}

.price-white{
  font-size:4rem;
  text-align: right;
  color:white;
  font-weight:bold;
}
.tax-white{
  font-size:2rem;
  color:white;
  font-weight:bold;
}

.reserve-button,
.reserve-button2
{
  margin:30px auto;
  text-align: center;
}

.reserve-button a{
  height:30px;
  width:200px;
  margin:0 auto;
  display: block;
	position:relative;
	z-index:0;
	overflow:hidden;
  font-size:2rem;
  color:#009944;
  border-radius: 20px;
  border:2px solid #fff;
  background-color: #fff;
  padding:10px 20px;
  font-weight:bold;

}
.reserve-button a:hover{
  color:#fff;
}
.reserve-button a:before{
  content:'';
  display: block;
  position:absolute;
  top:0;
  left:0;	
  z-index:-1;
  width:0%;
  height: 100%;
  background-color: #009944;
  transition: .5s;
}

.reserve-button a:hover:before{
  width: 100%;
}



.reserve-button2 a{
  height:30px;
  border:2px solid #009944;
  background-color: #009944;
  padding:10px 20px;
  width:200px;
  margin:0 auto;
  display: block;
	position:relative;
	z-index:0;
	overflow:hidden;
  font-size:1.8rem;
  color:#fff;
  border-radius: 50px;
  font-weight:bold;
}

.reserve-button2 a:hover{
  color:#009944;
}

.reserve-button2 a:before{
  content:'';
  display: block;
  position:absolute;
  top:0;
  left:0;	
  z-index:-1;
  width:0%;
  height: 100%;
  background-color:#f7eed7;
  transition: .5s;
}

.reserve-button2 a:hover:before{
  width: 100%;
}


.reserve-btn-head{
  width:200px;
  margin-top:20px;
  margin-right:10px;
  display:flex;
  justify-content: center;
  align-items: center;
	position:relative;
	z-index:0;
	overflow:hidden;
  font-size:2rem;
  color:#fff;
  border-radius: 20px;
  border:2px solid #009944;
  background-color: #009944;
  padding:10px;
  font-weight:bold;
  height:25px;
}
.reserve-btn-head:hover{
  color:#009944;
}

.reserve-btn-head:before{
  content:'';
  display: block;
  position:absolute;
  top:0;
  left:0;	
  z-index:-1;
  width:0%;
  height: 100%;
  background-color: #fff;
  transition: .5s;
}

.reserve-btn-head:hover:before{
  width: 100%;
}

.swc1300-{
  display: block;
}
.swc-1024{
  display: none;
}

.swc-768{
  display:none;
}

.swc-540{
  display:none;
}

.swc769-{
  display:block;  
 }

.swc360-1299{
  display:none;
}

.swc769-1024{
  display:none;
}

.swc1299-{
  display:block;
}
.swc360-1299{
  display: none;
}

.fl-swc-1099{
  display:none !important;
}

@media screen and (min-width:360px) and (max-width:1299px) {
  .fl-swc1300-{
    display:none !important;
  }
  .fl-swc-1299{
    display:flex !important;
  }
  .swc360-1299{
    display:block;
  }

  .swc1299-{
    display:none;
  }
  .swc1300-{
    display:none;
  }
}

.logo-ver{
  display:none;
}

.main-contents{
  display:flex;
}





@media screen and (min-width:769px) and (max-width:1024px) {

  .reserve-button a{
    height:40px;
  }
  .head02_1{
    font-size:2.5rem;
    text-align: center;
  }
  

  .swc1025-{
    display: none;
  }
  .swc-1024{
    display:block;
  }
  .swc769-{
    display:block;
  }

  .swc-768{
    display:none;
  }

  .swc-540{
    display:none;
  }

  .logo-ver{
    display:none;
  }

  .swc360-1024{
    display:block;
  }

  .swc769-1024{
    display:block;
  }
  

}

@media screen and (min-width:541px) and (max-width:768px) {

  .head02_1{
    font-size:2.5rem;
    text-align: center;
  }

  .head03_1{
    font-size:2.8rem;
  }
  .reserve-button a{
    height:40px;
  }
  
  .reserve-btn-head{
    height:35px;
  }
  .swc1025-{
    display: none;
  }
  .swc-1024{
    display:block;
  }

  .swc769-{
    display:none;
  }

  .swc-540{
    display:none;
  }

  .swc-768{
    display:block;
  }

  .swc360-1024{
    display:block;
  }

  .swc769-1024{
    display:block;
  }

  .logo-ver{
    position:fixed;
    top:0px;
    width:11%;
    min-width:30px;
    display:block;
  }

  .w-fill{
    fill:white;
  }

  .reserve-button-head-tablet1{
    text-align: center;
    line-height: 0;
  }
  .reserve-button-head-tablet1 a{
    font-size:20px;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    border:2px solid #009944;
    background-color: #009944;
    padding:20px 30px;
    margin:0 auto;
    display: block;
    position:relative;
    z-index:0;
    overflow:hidden;
    font-size:1.8rem;
    color:#fff;
    border-radius: 50px;
    font-weight:bold;
  }
  .reserve-button-head-tablet1 a:hover{
    color:#009944;
  }
  .reserve-button-head-tablet1 a:before{
    content:'';
    display: block;
    position:absolute;
    top:0;
    left:0;	
    z-index:-1;
    width:0%;
    height: 100%;
    background-color:#ffffff;
    transition: .5s;
  }
  
  .reserve-button-head-tablet1 a:hover:before{
    width: 100%;
  }




}

@media screen and (max-width:540px) {

  .head03_1{
    font-size:2.5rem;
  }
  .head02_1{
    font-size:2.3rem;
    text-align:left;
  }
  .head03_3{
    font-size:2.0rem;
  }
  .swc1025-{
    display:none;
  }

  .swc-540{
    display:block;
  }

  .swc360-1024{
    display:block;
  }

  .swc769-1024{
    display:none;
  }

  .reserve-btn-head{
    display:"";
  }
  .desc01{
    font-size:1.3rem;
  }
}




/*--------------------------------------------------------メインビジュアル部分------------------------------------------------------------------------------*/

.kenshinlogo{
    width:15%;
    min-width:200px;
    margin: 20px;
}


.reserve-btn{

    width: 130px;
    text-align: center;
    margin: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.mv{
    align-items: center;
    background-image: url(../images/mv.png);
    padding-top:"";
    background-position:-19rem;
    background-size:cover;
    width: 100%;
    background-repeat: no-repeat;
    position:fixed;

}

.mv-child{
  height:100vh;
  display: flex;
  align-items: center;
}

.catchcopy{
  width:100%;
  display:block;
  position: relative;
  top:10vh;
}

.title-image{
  display:block;
  width:40%;
  min-width:400px;
  position:"";

}

.catchcopy-image{
  display:block;
  width:40%;
  min-width:300px;
  position:"";
  bottom:70px;
}

.band{
    position:fixed;
    width: 100%;
    z-index:9999;
    background-color: #fff;
    height:100px;
}

@media screen and (min-width:541px) and (max-width:1024px) {
  .title-image{
    min-width:430px;
  }
}




@media screen and (min-width:769px) and (max-width:1024px) {
  .band{
    height:80px;
  }
}

@media screen and (min-width:541px) and (max-width:768px) {
  .band{
    height:70px;
  }
}

@media screen and (max-width:540px) {
  .kenshinlogo{
    margin:27px 0;
  }
  .band{
    height:auto;
  }
  .mv{
    background-position:initial;
    padding-top:8rem;
  }
  .title-image{
    min-width:340px;
  }
}


@media screen and (min-width:360px) and (max-width:1299px) {
  .mv-1299{
    background-image: url(../images/mv.png);
    padding-top:40%;
    background-position:"";
    background-size:cover;
    width: 100%;
    background-repeat: no-repeat;
  }
  .catchcopy-image--1299{
    min-width:350px;
    position:initial;
    bottom:initial;
  }

}


/*--------------------------------------------------------メインビジュアル部分------------------------------------------------------------------------------*/


/*--------------------------------------------------------スマホコンテンツ部分------------------------------------------------------------------------------*/
.sp-box{
    position: relative;
    z-index: 1;
    width: calc(100vh - 260px);
    background-color: #ffffffd1;
    padding: 2rem;
    margin:0 auto;
    top:100px;
    left:15vw;
    min-width:500px;
}
@media screen and (min-width:769px) and (max-width:1024px) {
  .sp-box{
    top:80px;
    min-width:500px;
    left:5vw;
  }
  
}

@media screen and (min-width:541px) and (max-width:768px) {
  .sp-box{
    top: 0px;
    width: 78%;
    left: 6vw;
    min-width: 400px;
  }

  .sp-lead{
    padding-top:30px;
  }
}

@media screen and (max-width:540px) {
  .sp-box{
    width:95%;
    padding: 2.5%;
    top:70px;
    margin:0 auto;
    min-width:initial;
    left:initial;
  }
}


/*---------------------------------------------リード文部分---------------------------------------------------------*/


.head01_1{
    font-size:calc(30px + 5 * (100vw - 1000px) / 920);
    color:#009944;
}

.head01_1 span{
    font-size:calc(15px + 5 * (100vw - 1000px) / 920);
    color:#009944; 
}

@media screen and (min-width:769px) and (max-width:1024px) {
  .head01_1{
    font-size:calc(30px + 5 * (100vw - 769px) / 255);
    color:#009944;
  }

  .head01_1 span{
    font-size:calc(15px + 5 * (100vw - 769px) / 255);
    color:#009944; 
  }
  
}

@media screen and (min-width:541px) and (max-width:768px) {
  .head01_1{
    font-size:calc(30px + 5 * (100vw - 541px) / 227);
    color:#009944;
  }

  .head01_1 span{
    font-size:calc(15px + 5 * (100vw - 541px) / 227);
    color:#009944; 
  }
}

@media screen and (max-width:540px) {
  .head01_1{
    font-size:calc(30px + 5 * (100vw - 360px) / 160);
    color:#009944;
  }

  .head01_1 span{
    font-size:calc(15px + 5 * (100vw - 360px) / 160);
    color:#009944; 
  }
}

/*---------------------------------------------リード文部分---------------------------------------------------------*/


/*---------------------------------------------例・利用者の声部分---------------------------------------------------------*/

.customer{
    margin-top:20px;
}

.cust-head01{
    font-size:2rem;
    color:#009944;
    font-weight:bold;
    border-bottom:1px #009944 solid;
}

.st0{
    fill-opacity:0;
    stroke:#009944;
    stroke-width:7;
    stroke-miterlimit:50;
    stroke-dasharray: 2833;
    stroke-dashoffset: 2833;
    animation: strokeAnimation 1s linear 0s forwards;
  }
  @keyframes strokeAnimation {
    0% { stroke-dashoffset: 2833; }
    80% { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: 0; }
  }

  @-webkit-keyframes strokeAnimation {
    0% { stroke-dashoffset: 2833; }
    80% { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: 0; }
  }



  @media screen and (min-width:769px) and (max-width:1024px) {
    .cust-head01{
      font-size:1.9rem;
    }
  }

  @media screen and (min-width:541px) and (max-width:768px) {
    .cust-head01{
      font-size:1.8rem;
    }
  }

  @media screen and (max-width:540px) {
    .cust-head01{
      font-size:1.7rem;
    }
  }


/*---------------------------------------------例・利用者の声文部分---------------------------------------------------------*/


/*---------------------------------------------3つの特徴-------------------------------------------------------------------*/
.st1{
    fill:none;
    stroke:#000;
    stroke-width:5;
    stroke-miterlimit:50;
    stroke-dasharray: 3128;
    stroke-dashoffset: 3128;
    animation: strokeAnimation1 1s linear 0s forwards;
  }
  @keyframes strokeAnimation1 {
    0% { stroke-dashoffset: 3128; }
    80% { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: 0; }
  }

  @-webkit-keyframes strokeAnimation1 {
    0% { stroke-dashoffset: 3128; }
    80% { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: 0; }
  }



.threepoint-beta{
    opacity: 0;
    animation: threepoint 1.5s linear 0s forwards;
}
@keyframes threepoint {
    0% { opacity:0; }
    80% { opacity:0;  }
    100% {opacity: 1; }
  }


  .title-image-path{
    position: relative;
    fill-opacity:0;
    stroke:#000;
    stroke-width:1;
    stroke-miterlimit:50;
    stroke-dasharray: 193;
    stroke-dashoffset: 193;
    animation: titleimagepath 1s linear 0s forwards;
  }
  @keyframes titleimagepath {
    0% { stroke-dashoffset: 193; }
    80% { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: 0;}
  }
  .title-image-svg{
    width:100%;
    opacity: 0;
    animation: titleimagesvg 1.5s linear 0s forwards;
  }
  @keyframes titleimagesvg {
    0% { opacity:0; }
    80% { opacity:0;  }
    100% {opacity: 1; }
  }



  .title-image-border-1{
    fill:none;
    stroke:#5c5c5c;
    stroke-width:1;
    stroke-miterlimit:50;
    stroke-dasharray: 190px;
    stroke-dashoffset: 190px;
    animation: titleimageborder1 1s linear 3s forwards;
  }
  @keyframes titleimageborder1 {
    0% { stroke-dashoffset: 190px; }
    80% { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: 0; }
  }

  .title-image-border-2{
    fill:none;
    stroke:#5c5c5c;
    stroke-width:1;
    stroke-miterlimit:50;
    stroke-dasharray: 945px;
    stroke-dashoffset: 945px;
    animation: titleimageborder2 1s linear 3s forwards;
  }
  @keyframes titleimageborder2 {
    0% { stroke-dashoffset: 945px; }
    80% { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: 0; }
  }





  
  .feature-btn{
    margin-top:20px;
  }

  .feature-btn a{
    background-color: #009944;
    padding:5px 10px;
    display:flex;
    width:65%;
    height:80px;
    margin:0 auto;
    border-radius:10px;
  }

  .feature-btn a img{
    width:35%;
    height:"";
  }

  .feature-btn-text{
    color:#fff;
    font-size:1.3rem;
    width:100%;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;

  }

  .st2{
    fill:none;
    stroke:#009944;
    stroke-width:20px;
    stroke-miterlimit:50;
    stroke-dasharray: 3600;
    stroke-dashoffset: 3600;
    animation: strokeAnimation2 2s linear 0s forwards;
  }
  @keyframes strokeAnimation2 {
    0% { stroke-dashoffset: 3600; }
    80% { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: 0; }
  }

  .h2_icon{
    width:18%;
  }

  .feature-sub-sent{
    font-size:2rem;
  }

  .graff-box{
    border-radius:10px;
    background-color: rgb(231, 231, 231);
  }

  .f-graff{
    padding:10px;
    display:grid;
    gap:10px;
    grid-template-rows: 8fr;
    grid-template-columns: 4fr 4fr 2fr;
  }

  .g1{
    background-color: rgb(255, 153, 0);
  }

  .g-a1{
    color: rgb(255, 153, 0);
    font-size:1.6rem;
    font-weight:bold;
  }
  .g-a1:last-child{
    color:black;
  }

  .g-0row{
    width:100%;
    animation: g-0row 1s linear 0s forwards;
  }
  @keyframes g-0row {
    0% { width:0; }
    80% {width: 0; }
    100% {width: 100%; }
  }

  .g-1row{
    width:33%;
    animation: g-1row 1s linear 0s forwards;
  }
  @keyframes g-1row {
    0% { width:0; }
    80% {width: 0; }
    100% {width: 33%; }
  }

  .g-2row{
    width:30%;
    animation: g-2row 1s linear 0s forwards;
  }
  @keyframes g-2row {
    0% { width:0; }
    80% {width: 0; }
    100% {width: 30%; }
  }

  .g-3row{
    width:16%;
    animation: g-3row 1s linear 0s forwards;
  }
  @keyframes g-3row {
    0% { width:0; }
    80% {width: 0; }
    100% {width: 16%; }
  }

  .g-4row{
    width:3%;
    animation: g-4row 1s linear 0s forwards;
  }
  @keyframes g-4row {
    0% { width:0; }
    80% {width: 0; }
    100% {width: 3%; }
  }

  .g-5row{
    width:27%;
    animation: g-5row 1s linear 0s forwards;
  }
  @keyframes g-5row {
    0% { width:0; }
    80% {width: 0; }
    100% {width: 27%; }
  }

  .g-6row{
    width:5%;
    animation: g-6row 1s linear 0s forwards;
  }
  @keyframes g-6row {
    0% { width:0; }
    80% {width: 0; }
    100% {width: 5%; }
  }

  .g-7row{
    display:flex;
    justify-content: space-between;
    color:gray;
  }
  .g-7row span{
    font-size: 1.8rem;
    font-weight:bold;
  }


  .st4_0{
    fill:none;
    stroke:#000;
    stroke-width:1;
    stroke-miterlimit:5;
    stroke-dasharray: 2833;
    stroke-dashoffset: 2833;
    animation: st4_0 1s linear 0s forwards;
  }
  @keyframes st4_0 {
    0% { stroke-dashoffset: 2833; fill:none; }
    80% { stroke-dashoffset: 0;fill:white; }
    100% { stroke-dashoffset: 0; fill:white;}
  }


  .st4_1{
    fill:none;
    stroke:#009944;
    stroke-width:1;
    stroke-miterlimit:50;
    stroke-dasharray: 1657;
    stroke-dashoffset: 1657;
    animation: st4_1 3s linear 0s forwards;
  }
  @keyframes st4_1 {
    0% { stroke-dashoffset: 1657;fill:#00994500; }
    80% { stroke-dashoffset: 0;fill:#009945a2; }
    100% { stroke-dashoffset: 0;fill:#009944; }
  }

  .st4_2{
    fill:none;
    stroke:#000000;
    stroke-width:1;
    stroke-miterlimit:50;
    stroke-dasharray: 1657;
    stroke-dashoffset: 1657;
    animation: st4_2 3s linear 0s forwards;
  }
  @keyframes st4_2 {
    0% { stroke-dashoffset: 1657;fill:#00994500; }
    80% { stroke-dashoffset: 0;fill:#000000a2; }
    100% { stroke-dashoffset: 0;fill:#000000; }
  }

  .circle-grid02{
    display:grid;
    gap:10px;
    grid-template-rows:2fr;
    grid-template-columns: repeat(2, 1fr);
  }


  .circle-grid02-1{
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row: 1 / 2;
    width:50%;
    margin:0 auto;
  }


  .circle-grid02-2{
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row: 2 / 2;
  }
  .circle-grid02-3{
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row: 2 / 2;
  }


  .st5_0{
    fill:none;
    stroke:#000;
    stroke-width:1;
    stroke-miterlimit:50;
    stroke-dasharray: 2833;
    stroke-dashoffset: 2833;
    animation: st5_0 1s linear 0s forwards;
  }
  @keyframes st5_0 {
    0% { stroke-dashoffset: 2833; }
    80% { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: 0; }
  }


  .st5_1{
    fill:none;
    stroke:#009944;
    stroke-width:1;
    stroke-miterlimit:50;
    stroke-dasharray: 1657;
    stroke-dashoffset: 1657;
    animation: st5_1 3s linear 0s forwards;
  }
  @keyframes st5_1 {
    0% { stroke-dashoffset: 1657;fill:#00994500; }
    80% { stroke-dashoffset: 0;fill:#009945a2; }
    100% { stroke-dashoffset: 0;fill:#009944; }
  }


  .st5_2{
    fill:none;
    stroke:#000000;
    stroke-width:1;
    stroke-miterlimit:50;
    stroke-dasharray: 1657;
    stroke-dashoffset: 1657;
    animation: st5_2 3s linear 0s forwards;
  }
  @keyframes st5_2 {
    0% { stroke-dashoffset: 1657;fill:#00994500; }
    80% { stroke-dashoffset: 0;fill:#000000a2; }
    100% { stroke-dashoffset: 0;fill:#000000; }
  }


  .st6_0{
    fill:none;
    stroke:#000;
    stroke-width:1;
    stroke-miterlimit:50;
    stroke-dasharray: 2833;
    stroke-dashoffset: 2833;
    animation: st6_0 1s linear 0s forwards;
  }
  @keyframes st6_0 {
    0% { stroke-dashoffset: 2833; }
    80% { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: 0; }
  }


  .st6_1{
    fill:none;
    stroke:#009944;
    stroke-width:1;
    stroke-miterlimit:50;
    stroke-dasharray: 1657;
    stroke-dashoffset: 1657;
    animation: st6_1 3s linear 0s forwards;
  }
  @keyframes st6_1 {
    0% { stroke-dashoffset: 1657;fill:#00994500; }
    80% { stroke-dashoffset: 0;fill:#009945a2; }
    100% { stroke-dashoffset: 0;fill:#009944; }
  }


  .st6_2{
    fill:none;
    stroke:#000000;
    stroke-width:1;
    stroke-miterlimit:50;
    stroke-dasharray: 1657;
    stroke-dashoffset: 1657;
    animation: st6_2 3s linear 0s forwards;
  }
  @keyframes st6_2 {
    0% { stroke-dashoffset: 1657;fill:#00994500; }
    80% { stroke-dashoffset: 0;fill:#000000a2; }
    100% { stroke-dashoffset: 0;fill:#000000; }
  }


  .support-con{
    border:1px solid #009944;
    border-radius:10px;
    width:75%;
    margin:20px auto;
  }

  .support-con ul{
    padding:2rem;
    width:fit-content;
    margin:0 auto;
  }
  .support-con ul li{
    font-size:1.4rem;
    line-height:1.8;
  }

  @media screen and (min-width:769px) and (max-width:1024px) {
    .feature-btn a{
      width:70%;
    }
    .feature-btn-text{
      font-size:1.6rem;
    }

  }

  @media screen and (min-width:541px) and (max-width:768px) {
    .feature-btn a{
      width:70%;
    }
    .feature-btn-text{
      font-size:1.6rem;
    }
  }

  @media screen and (max-width:541px) {
    .feature-btn a{
      width:80%;
    }
    .feature-btn-text{
      font-size:1.4rem;
    }
    .feature-sub-sent{
      font-size:1.7rem;
    }
    .f-graff{
      grid-template-columns: 3fr 5fr 2fr;
      grid-template-rows:8fr;
      gap:5px;
      padding:5px;
    }
    .f-graff p{
      height:50px;
    }
    .g-a1{
      font-size:1.2rem;
    }

    .h2_icon{
      width:25%;
    }
  }


/*---------------------------------------------3つの特徴-------------------------------------------------------------------*/

/*---------------------------------------------オンリーワン・ドック-------------------------------------------------------------------*/


.onlyonedoc-con{
  padding:20px;
}

.onlyonedoc-inlineBox{
  background-color: #fff;
  border-radius:10px;
  width:85%;
  margin:20px auto;
}


.onlyonedoc-inlineBox ul{
  padding:2rem 1rem;
  width: fit-content;
  margin: 0 auto;
}
.onlyonedoc-inlineBox ul li{
  list-style: none;
  font-size:1.6rem;
}
@media screen and (max-width:541px) {
  .onlyonedoc-con{
    padding:8px;
  }
  .onlyonedoc-inlineBox{
    width:95%;
  }
  .onlyonedoc-inlineBox ul{
    padding:1rem;
  }

  .onlyonedoc-inlineBox ul li{
    font-size:1.4rem;
  }

}


/*---------------------------------------------オンリーワン・ドック-------------------------------------------------------------------*/

/*---------------------------------------------検査メニュー-------------------------------------------------------------------*/
.kensamenu-inlineBox{
  width:90%;
  margin:20px auto;
  display: grid;
  gap:10px;
  grid-template-rows:1fr;
  grid-template-columns:1fr 1fr;
}

.kensamenu-thumb{
  background-color: #fff;
  border-radius: 10px; ;
}

.kensamenu-thumb span{
  display: block;
  text-align: center;
  font-size:1.4rem;
}


#clipmask2 .spa{
  fill:none;
  stroke:#ffffff;
  stroke-width:100;
  stroke-miterlimit:50;
  stroke-dasharray: 2833;
  stroke-dashoffset: 2833;
  animation: support-arrow 5s linear 0s forwards;
}
@keyframes support-arrow {
  0% { stroke-dashoffset: 2833; }
  80% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 0; }
}

.spa{
  fill:#e09b1a;
  stroke:none;
  stroke-width:20;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-miterlimit:10;
  stroke-dasharray: 1500; /* この行を追加 */
  stroke-dashoffset:1500; /* この行を追加 */
}

.support-arrow{
  fill:orange;
}

#clipmask2{
  fill:#e09b1a;
}

@media screen and (max-width:541px) {
  .kensamenu-inlineBox{
    width:95%;
    gap:5px;
  }
}




/*---------------------------------------------検査メニュー-------------------------------------------------------------------*/

/*---------------------------------------------ご予約からアフターフォローの流れ-------------------------------------------------------------------*/
.flow0{
  background-color:#009944;
  overflow: hidden;
  border-radius:10px;
  width:80%;
  margin:20px auto;
}

.flow0-head{
  font-size:1.6rem;
  text-align: center;
  padding:10px;
  margin:0px auto 0;
  color:white;
}

.flow0-desc{
  background-color:#f7eed7;
  font-size:1.6rem;
  text-align: center;
  padding:10px;
  margin:0px auto 0;
  color:black;
}
.flow0-desc .tel{
  font-size:3rem;
  font-weight:bold;
}

@media screen and (max-width:541px) {
  .flow0{
    width:95%;
  }
  .flow0-desc{
    text-align: left;
    font-size:1.3rem;
  }

  .flow0-desc .tel{
    font-size:3.5rem;
  }
}



/*---------------------------------------------ご予約からアフターフォローの流れ-------------------------------------------------------------------*/

/*---------------------------------------------当日の検査について-------------------------------------------------------------------*/
.flow1{
  background-color: rgb(212, 212, 212);
  border-radius:10px;
  display:flex;
  width:80%;
  margin:30px auto 0;
}
.flow1-left{
  display: flex;
  align-items: center;
  background-color: #009944;
  border-radius:10px 20px 20px 10px;
  color:#fff;
  padding:10px;
  font-size:1.6rem;
}
.flow1-right{
  font-size:1.6rem;
  padding:10px;
}

.under-arrow{
  text-align: center;
  width:20px;
  height:20px;
  padding-top:10px;
  padding-bottom:10px;
  margin:0 auto;
}

@media screen and (min-width:769px) and (max-width:1024px) {
  .under-arrow{
    width:40px;
    height:40px;
  }

  .flow1{
    margin:15px auto 0;
  }
}

@media screen and (max-width:541px) {
  .flow1{
    font-size:1.4rem;
    width:95%;
  }

}

/*---------------------------------------------当日の検査について-------------------------------------------------------------------*/

/*---------------------------------------------地図-------------------------------------------------------------------*/
.map{
  background-color: #363636;
  margin-bottom:20px;
}

.map iframe{
  width:100%;
  height:240px;
}

/*---------------------------------------------地図-------------------------------------------------------------------*/



/*---------------------------------------------footer-------------------------------------------------------------------*/
.pc-footer{
  top:20px;
  padding-left:30px;
  position: relative;
  z-index: 9;
}
.pc-footer p,
.pc-footer a
{
  font-size:1.5rem;
}


@media screen and (min-width:769px) and (max-width:1024px) {
  .sp-footer p,
  .sp-footer a
  {
    font-size:1.8rem;
  }
}

@media screen and (min-width:541px) and (max-width:768px) {
  .sp-footer p,
  .sp-footer a
  {
    font-size:1.4rem;
  }
  .sp-footer{
    text-align: center;
    margin-top:30px;
  }
}

@media screen and (max-width:540px) {
  .sp-footer p,
  .sp-footer a{
    font-size:1.4rem;
  }
}

/*---------------------------------------------footer-------------------------------------------------------------------*/



/*--------------------------------------------------------スマホコンテンツ部分------------------------------------------------------------------------------*/