@charset "utf-8";
/* CSS Document */
body {
  overflow: hidden;
  background: var(--C-white);
}
.sp{
	display:none !important;
}
.vertical_txt {
  writing-mode:  vertical-rl;
}
.content_title {
  text-align: center;
}
.catch_copy {
  font-size: 29px;
  line-height: 1.517241379310345;
  letter-spacing: 0.1em;
}
.aLink {
  padding-top: 70px;
  margin-top: -70px;
}

@media screen and (max-width: 640px) {
    .sp{
        display:block !important;
    }
  .catch_copy {
    font-size: 4.8vw;
    line-height: 1.6875;
  }
}
/* ===============================
	header
 =============================== */

header.header{
    width:100%;
    height:80px;
    display: flex;
    align-items: center;
    position: fixed;
    top:0;
    left:0;
    right:0;
    bottom:auto;
    z-index: 9999;
    background: rgba(0, 104, 167, 0.9);
}
header.header h1{
    margin: -15px 0 0 50px; 
}
header.header .linkArea{
    height:80px;
    display: flex;
    flex-direction: row-reverse;
    margin-left:auto; 
    position: relative;
}
header.header .linkArea .gnav{
    padding: 0 10px;
    display: flex;
    background: rgba(0,104,167,0.9);
}
header.header .linkArea .gnav li a{
    display: flex;
    justify-content: center;
    align-items: center;
    height:80px;
    color:#88959E;
    padding: 0 25px;
    font-size:16px;
    font-family:"Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
header.header .linkArea .gnav li a:hover{
    color:#FFFFFF;
    opacity: 1;
}
header.header .linkArea .otherArea{
    display: flex;
    background: rgba(0,42,109,0.9);
}
header.header .linkArea .otherArea li.sns,
header.header .linkArea .otherArea li:not(.sns) a{
    display: flex;
    justify-content: center;
    align-items: center;
    width:99px;
    height:80px;
    border-right:1px solid #FFFFFF;
    color:#88959E;
    font-size:16px;
    font-family:"Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
header.header .linkArea .otherArea li:not(.sns) a:hover{
    color:#FFFFFF;
    opacity: 1;
}
header.header .linkArea .otherArea li.sns{
    gap:15px;
}
header.header .linkArea .gnav .submenu {
    background: rgba(0,42,109,1);
    border-radius: 4px;
    margin: 0;
    padding: 32px 40px 40px;
    position: absolute;
    top: 80px;
    right: 0;
    transform: translateY(-1em);
    list-style: none;
    columns: 2;
    column-gap: 78px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease-in-out 0s, visibility 0s linear 0.3s;
    pointer-events: none;
}
header.header .linkArea .gnav .submenu > li {
    width: 360px;
}
header.header .linkArea .gnav .submenu > li > a {
    height:auto;
    font-size: 100%;
    color: #FFFFFF;
    display: block;
    border-bottom: 1px solid #666666;
    font-weight: bold;
    padding: 8px 0;
    background-image: url("../../../../common/images/icon_arrow_w.png");
    background-repeat: no-repeat;
    background-size: 16px 5px;
    background-position: right center;
    position: relative;
}
header.header .linkArea .gnav .submenu > li > a::after {
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 100%;
    height: 1px;
    background: #FFFFFF;
    transform: scaleX(0);
    transform-origin: top left;
    transition: all .3s;
    content: '';
}
header.header .linkArea .submenu > li > a:hover {
    opacity: 1;
}
header.header .linkArea .gnav .submenu > li > a:hover::after {
    transform: scaleX(1);
}
header.header .linkArea .gnav > li:hover .submenu {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s, 0s;
    transform: translateY(0%);
    pointer-events: auto;
}
@media (max-width: 768px) {
    header.header{
        height:44px;
    }
    header.header h1{
        display: none;
    }
    header.header .linkArea{
        width:calc(100% - 44px);
        height:44px;
        margin-left: 0;
        margin-right: auto;
    }
    header.header .linkArea .gnav{
        display: none;
    }
    header.header .linkArea .otherArea{
        width:100%;
        position: relative;
        z-index: 200;
        background: rgba(0,42,109,1);
    }
    header.header .linkArea .otherArea li{
        width:calc(100% / 3);
    }
    header.header .linkArea .otherArea li.sns{
        display: none;
    }
    header.header .linkArea .otherArea li:not(.sns) a{
        width:100%;
        height:44px;
        box-sizing: border-box;
    }
    header.header .spbtn,
    header.header .spmenu{
        display: block;
    }
    header.header .spbtn{
        position: absolute;
        top:0;
        right:0;
        bottom:auto;        
        margin: 0;
        width: 44px;
        height: 44px;
        transition: 0.3s;
        z-index: 10000;
        background: #FFFFFF;
    }
    header.header .spbtn,
    header.header .spbtn span {
        display: inline-block;
        -webkit-transition: all 0.3s; 
        -moz-transition: all 0.3s; 
        -o-transition: all 0.3s; 
        transition: all 0.3s;
        box-sizing: border-box;
    }
    header.header .spbtn span {
        position: absolute;
        left: 0;
        right:0;
        margin: auto;
        width: 18px;
        height: 2px;
        background-color: #000000;
        transition: 0.3s;
    }
    header.header .spbtn span:nth-of-type(1) {
        top: 14px;
    }
    header.header .spbtn span:nth-of-type(2) {
        top: 21px;
    }
    header.header .spbtn span:nth-of-type(3) {
        top: 28px;
    }
    header.header.select .spbtn span:nth-of-type(1) {
        transform: translate(0,7px) rotate(-45deg);
    }
    header.header.select .spbtn span:nth-of-type(2) {
        opacity: 0;
    }
    header.header.select .spbtn span:nth-of-type(3) {
        transform: translate(0,-7px) rotate(45deg);
    }
    header.header .spmenu{
        width:100%;
        height:calc(100vh - 94px);
        box-sizing: border-box;
        padding:0;
        position: fixed;
        top:44px;
        right:0;
        transform: translate(0,-80px);
        -webkit-transition: all 0.3s;
        -moz-transition: all 0.3s;
        -o-transition: all 0.3s;
        transition: all 0.3s;
        overflow-y: scroll;
        background: rgba(0,104,167,1);
        z-index: 120;
        opacity: 0;
        pointer-events: none;
    }
    header.header.select .spmenu{
        transform: translate(0,0);
        pointer-events:fill;
        opacity: 1;
    }
    header.header .spmenu ul{
        display: flex;
        flex-wrap: wrap;
    }
    header.header .spmenu li{
        width:100%;
    }
    header.header .spmenu li.item-fb,
    header.header .spmenu li.item-insta{
        display: inline-block;
        width:50%;
        box-sizing: border-box;
    }
    header.header .spmenu li.item-fb{
        border-right: 1px dashed #FFFFFF;
    }
    header.header .spmenu li:not(:last-child){
        border-bottom: 1px dashed #FFFFFF;
    }
    header.header .spmenu li:last-child{
        margin-bottom: 0;
    }
    header.header .spmenu li a{
        display: block;
        padding: 16px 15px 15px;
        color:#FFFFFF;
        position: relative;
        line-height: 1.15;
    }
    header.header .spmenu li a i::before{
        margin-right: 10px;
    }
    header.header .spmenu li a::after{
        width:6px;
        height:6px;
        border:1px solid;
        border-color:transparent #FFFFFF #FFFFFF transparent;
        content: "";
        color:#FFFFFF;
        position:absolute;
        top:0;
        right:15px;
        bottom:0;
        transform: rotate(-45deg);
        margin: auto;
    }
    header.header .spmenu li.item-fb a::after,
    header.header .spmenu li.item-insta a::after,
    header.header .spmenu li.item-tel a::after{
        display: none;
    }
}


header.lpheader {
  width: 100%;
  background-color: var(--C-white);
  position: fixed;
  z-index: 999;
  top:80px;
}
header.lpheader .disFlex {
  align-items: center;
}
header.lpheader #g-nav{
  padding:clamp(11px,27 / 1400 * 100vw,22px) 0;
}
header.lpheader .logo {
  margin-left: 1.785714285714286%;
}
header.lpheader .logo img {
  width: clamp(130px,191 / 1400 * 100vw,191px);;
}
header.lpheader nav li {
  border-right: 1px solid var(--C-T_blue);
  text-align: center;
}
header.lpheader nav li a {
  padding: 0 clamp(13px,27 / 1400 * 100vw,27px);
  font-size: clamp(12px,16 / 1400 * 100vw,16px);
}
header.lpheader nav li:nth-of-type(4) {
  border-right: none;
}
header.lpheader nav li.nav_csm {
  width: clamp(80px,151 / 1400 * 100vw,151px);
  border-right: none;
  background-color: #6DB154;
}
header.lpheader nav li.nav_csm a {
  padding: clamp(11px,27 / 1400 * 100vw,22px) 0;
  display: block;
  color: var(--C-white);
}
header.lpheader nav li.nav_csm:nth-last-of-type(2) {
  background: #549B3A;
}
header.lpheader nav li.nav_csm:last-child {
  background-color: #2C804F;
}
@media screen and (min-width: 641px) and (max-width: 705px) {
  header.lpheader nav li a {
    padding: 0 7px;
  }
}
@media screen and (max-width: 640px) {
    header.lpheader{
        display: none;
    }
  header.lpheader {
    border-image-slice: 0;
  }
  header.lpheader .logo {
    margin-left: 3.75vw;
    z-index: 9999;
  }
  header.lpheader .logo img {
    width: 31.25vw;
  }

  #g-nav {
    /*position:fixed;にし、z-indexの数値を大きくして前面へ*/
    position:fixed;
    z-index: 999;
    /*ナビのスタート位置と形状*/
    top:-120%;
    left:0;
    width:100%;
    height: 100vh;/*ナビの高さ*/
    background-color: var(--C-white);
    transition: all 0.7s;
    padding: 21.875vw 10.9375vw 0;
  }
  /*アクティブクラスがついたら位置を0に*/
  #g-nav.panelactive{
    top: 0;
  }
  /*ナビゲーションの縦スクロール*/
  #g-nav.panelactive #g-nav-list{
    /*ナビの数が増えた場合縦スクロール*/
    position: fixed;
    z-index: 999; 
    width: 100%;
    height: 100vh;/*表示する高さ*/
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

  /*========= ボタンのためのCSS ===============*/
  .openbtn1{
    position: relative;
    z-index: 9999;/*ボタンを最前面に*/
    top: 0;
    right: 10px;
    cursor: pointer;
    width: 8.4375vw;
    height:10.625vw;
  }
  
  /*×に変化*/  
  .openbtn1 span{
    display: inline-block;
    transition: all .4s;
    position: absolute;
    left: 0;
    height: 2px;
    background-color: var(--C-T_blue);
    width: 8.4375vw;
  }

  .openbtn1 span:nth-of-type(1) {
    top: 3.125vw; 
  }

  .openbtn1 span:nth-of-type(2) {
    top: 5.46875vw;
  }

  .openbtn1 span:nth-of-type(3) {
    top: 7.8125vw;
  }

  .openbtn1.active span:nth-of-type(1) {
      top: clamp(18px,28 / 640 * 100vw,28px);
      left: 0;
      transform: translateY(6px) rotate(-45deg);
      width: 8.4375vw;
  }

  .openbtn1.active span:nth-of-type(2) {
    opacity: 0;
  }

  .openbtn1.active span:nth-of-type(3){
      top: clamp(30px,40 / 640 * 100vw,40px);
      left: 0;
      transform: translateY(-6px) rotate(45deg);
      width: 8.4375vw;
  }




  header nav ul.disFlex {
    display: block;
    background-size: 10.9375vw auto;
  }
  header nav li {
    border: none;
  }
  header nav li a {
    font-size: 3.90625vw;
    line-height: 4.08;
  }
  header nav li.nav_csm {
    width: 100%;
    text-align: center;
    margin-top: 8.90625vw;
  }
  header nav li.nav_csm a {
    line-height: normal;
  }
  header nav li.nav_csm:last-child {
    background-color: #808080;
  }
}

/* ===============================
	main
 =============================== */
 main {
  padding-top: calc(80px + clamp(39px,62 / 1400 * 100vw,62px));
 }
@media screen and (max-width: 768px) {
  main {
    padding-top: 44px;
  }
}

/* ===============================
	noticeArea
 =============================== */

 .noticeArea{
     padding: 10px 10px 10px 10px;
     background: #000000;
     display: flex;
     gap:40px;
     justify-content: center;
     align-items: center;
 }
 .noticeArea h2{
     color:#FFFFFF;
     font-size:22px;
     border:1px solid #FFFFFF;
     line-height: 1;
     padding: 10px 5px 12px calc(5px + 0.2em);
 }
 .noticeArea p{
     color:#FFFFFF;
     line-height: 1.4;
     font-size:16px;
 }
 .noticeArea p span{
     color:#dfbe76;
     font-size:22px;
     font-weight: bold;
     display: inline-block;
     margin-left: 10px;
 }
 .noticeArea p font{
     color:#FFFFFF;
     font-size:14px;
 }
@media screen and (max-width: 768px) {
 .noticeArea{
     padding: 10px 10px 10px 10px;
     background: #000000;
     display: flex;
     gap:20px;
     justify-content: center;
     align-items: center;
 }
 .noticeArea h2{
     font-size: 18px;
     padding: 10px 5px 12px 5px;
     letter-spacing: 0;
     width: 160px;
     text-align: center;
 }
 .noticeArea p{
     font-size:13px;
     letter-spacing: 0;
 }
 .noticeArea p span{
     font-size:18px;
     margin-left: 0px;
     display: block;
     letter-spacing: 0;
 }
 .noticeArea br{
     display:none;
 }
 .noticeArea p font{
     font-size:11px;
     display: block;
     letter-spacing: 0;
 }
}

/* ===============================
	mv
 =============================== */
 #mv {
  background: url('../imgs/mv_bg_pc.webp') no-repeat center top;
  background-size: contain;
  padding-top: 53.15%;
 }

 #mv .wrap{
  margin-top: -175px;
  text-align: center;
 }

 #mv h1 {
  font-size: clamp(36px,70 / 1200 * 100vw,70px);
  color: #6DB154;
  text-align: center;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.5;
  margin-top: 75px;
 }

 #mv p{
  font-size: clamp(14px,24 / 1200 * 100vw,24px);
  text-align: center;
  color: #6DB154;
  line-height: 2.5;
  margin-top: 50px;
 }

 @media screen and (max-width: 640px) {
  #mv {
    background: url('../imgs/mv_bg_sp.webp') no-repeat center top;
    background-size: contain;
    padding-top: 146vw;
   }
  #mv .wrap{
      margin-top: -14vw;
     }
   #mv h1 {
    font-size: 7.1875vw;
    margin-top: 40px;
    padding: 0 3%;
   }
   #mv p{
     margin-top: 20px;
     margin-bottom: 40px;
     padding: 0 3%;
   }
 }
/* ===============================
	intoro
=============================== */
#intoro * {
  color:#FFFFFF;
  letter-spacing: 0;
}
#intoro {
  padding:80px calc(50% - 500px) 100px; 
  text-align: center;
  background: #6DB154;
  margin-top: 75px;
}
#intoro .intoro_copy_wrap{
  font-size: clamp(14px,30 / 1000 * 100vw,30px);
}
#intoro h2 {
  color:#F7FF00;
  font-size: clamp(28px,100 / 1000 * 100vw,100px);
  margin-top: 20px;
}
#intoro h2 + hr {
  margin: clamp(35px,46 / 1000 * 100vw,46px) auto clamp(30px,42 / 1000 * 100vw,42px);
}
#access_point {
  justify-content: space-between;
 }
 #access_point li {
  display: flex;
  align-items: flex-end;
  text-align: right;
  font-size: clamp(14px,20 / 1000 * 100vw,20px);
  letter-spacing: normal;
  position: relative;
  line-height: clamp(28px,40 / 1000 * 100vw,40px);
 }
 #access_point li span {
  font-size: clamp(13px,16 / 1000 * 100vw,16px);
  padding-left: 20px;
  line-height: clamp(28px,40 / 1000 * 100vw,40px);
 }
 #access_point li span img {
  padding-left: 5px;
  padding-bottom: 12px;
 }
 #access_point li:after{
  position: absolute;
  top:100%;
  right:0;
  display: block;
  text-align: right;
  padding-top: 5px;
  letter-spacing: normal;
 }
 #access_point li:nth-child(1):after{
  content: "（約680m）";
 }
 #access_point li:nth-child(2):after{
  content: "（約660m）";
 }
 #access_point li:nth-child(3):after{
  content: "（約1,490m）";
 }
 @media screen and (min-width: 641px) and (max-width: 705px) {
  #access_point li span img {
    width: auto;
    height: 6.092199vw;
    padding-left: 1.985815602836879vw;
   }
 }
@media screen and (max-width: 640px) {
  #intoro {
    margin-top: -30px;
    padding-bottom: 50px;
  }
  #intoro .intoro_copy_wrap {
    margin-top: -50px;
  }
  #intoro h2 {
    font-size: 8.86875vw;
  }
  #intoro h2 + hr {
    width: 84.375vw;
  }
  #access_point {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap:50px;
  }
  #access_point .disFlex {
    display: block;
   }
  #access_point span img {
    width: auto;
    height: 16vw;
    padding-bottom: 5px;
  }
}

/* ===============================
	location
=============================== */
#location {
  padding: clamp(30px,56 / 1200 * 100vw,56px) 0 clamp(50px,145 / 1200 * 100vw,145px);
}
#location .wrap{
  position: relative;
}
#location .wrap:not(:last-child){
  margin-bottom: 40px;
}
#location .content_title {
  position: absolute;
  top:0;
  left:0;
  transform: translate(-50%,0);
}

#location_data {
  width: 630px;
  margin-left: auto;
}
#location_data .gallery{
  display: grid;
  gap:15px 30px;
  grid-template-columns: 1fr 1fr;
  counter-reset: number 0;
}
#location_data .gallery li {
  width: 300px;
  margin-bottom: clamp(10px,21 / 1000 * 100vw,21px);
  counter-increment: number 1;
  position: relative;
}
#location_data .gallery li:before{
  width:36px;
  height:36px;
  content: counter(number) " ";
  font-size:clamp(16px,30 / 1200 * 100vw,30px);
  color:#FFFFFF;
  background: #2C804F;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top:0;
  left:0;
  line-height: 0.9;
  letter-spacing: 0;
}
#location_data .gallery li img {
  margin-bottom: 5px;
  width: 100%;
}
#location_data .gallery li figcaption {
  font-size: clamp(14px,18 / 1200 * 100vw,18px);
  letter-spacing: normal;
  line-height: 2;
  text-align: left;
  margin-top: 5px;
}

#map {
  width: 41%;
  position: absolute;
  top: 0;
  right: 0;
}
#map img {
  width: 100%;
  max-width: 610px;
}
.other_list{
  letter-spacing: normal;
  text-align: left;
  width: 580px;
  position: relative;
}
.other_list .disFlex {
  justify-content: space-between;
}
.other_list h3{
  width:100%;
  height:50px;
  background: #2C804F;
  font-size:20px;
  color:#FFFFFF;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 15px;
}
.other_list dl{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
}
.other_list dl:not(:last-child){
  margin-bottom: 40px;
}
.other_list dl dt,
.other_list dl dd{
  font-size:18px;
  letter-spacing: 0;
}
.other_list dl dt:after{
  content: "";
  width:100%;
}
@media screen and (max-width: 640px) {
#location .content_title {
    position: static;
    transform: none;
}
#location_data {
  width: 94%;
  margin-left: auto;
  margin-right: auto;
}
#location_data .gallery{
  gap:10px;
}
#location_data .gallery li {
  width: auto;
  margin-bottom: 10px;
}
#location_data .gallery li figcaption {
  line-height: 1.5;
}
.other_list{
  width: 94%;
  margin: 0 auto 30px;
}
.other_list dl dt,
.other_list dl dd{
  font-size:14px;
  letter-spacing: 0;
}
}

/* ===============================
	planning
=============================== */

#planning .content_wrap {
  padding: 100px 0;
  background: #E7F3E6;
  position: relative;
}
#planning .content_title {
  width:100%;
  position: absolute;
  top:0;
  left:0;
  text-align: center;
  transform: translate(0,-50%);
}
#planning .catch_copy {
  color:#2C804F;
  margin-bottom: clamp(27px,54 / 1000 * 100vw,54px);
}
#planning table {
  width: 100%;
  margin: clamp(30px,60 / 1000 * 100vw,60px) auto 0;
  border: 1px solid #2C804F;
}
#planning table th,
#planning table td {
  border: 1px solid #2C804F;
  text-align: center;
  padding: 15px;
  font-size: clamp(12px,16 / 822 * 100vw,16px);
  letter-spacing: 0.05em;
  vertical-align: middle;
  background: #FFFFFF;
}
#planning table th{
  background: #F4FFF3;
  color:#2C804F;
}
#planning table td:empty:before{
  content: "─";
}
#planning .col1 {
  width: 16%;
}
#planning .col2 {
  width: 21%;
}
@media screen and (max-width: 640px) {
  #planning .content_wrap {
    padding: 10vw 3%;
  }
  #planning .content_title {
    margin-bottom: 10vw;
  }
  #planning .content_title img {
    width:  52.5vw;
  }
  #planning .catch_copy {
    letter-spacing: 0.05em;
  }
  #planning .content_title picture {
    margin-left: 0;
  }
  #planning .w1000 {
    padding : 0 7.5vw;
  }
  #planning picture {
    width: 100vw;
    display: block;
    margin-left: -7.5vw;
  }
  #planning table {
    width: 100%;
  }
  #planning table th,
  #planning table td {
    font-size: 2.6vw;
    padding: 5px 2px;
  }
  
  #planning .col2 {
    width: auto;
  }
}


/* ===============================
	outline
=============================== */
#outline .content_wrap {
  padding: 120px 0;
}
#outline .content_title {
  margin-bottom: clamp(46px,93 / 1000 * 100vw,93px);
}
#outline h3 {
  font-size: clamp(14px,16 / 536 * 100vw,16px);
  letter-spacing: 0.1em;
  text-indent: -5px;
  margin-bottom: clamp(12px,18 / 1000 * 100vw,18px);
  color:#2C804F;
}
.outline_wrap {
  width: 50%;
}
.outline_wrap:first-child {
  padding-left: 1.86175%;
}
.outline_wrap:last-child {
  padding: 0 3%;
}
.outline_wrap dl {
  display: flex;
  flex-wrap: nowrap;
}
.outline_wrap dl dt {
  width: 130px;
  letter-spacing: normal;
  border-right: 1px solid #707070;
  font-size:clamp(14px,18 / 1200 * 100vw,18px);
}
.outline_wrap:last-child dl dt {
  width: 190px;
}
.outline_wrap dl dt::before {
  content: '●';
}
.outline_wrap dl dd {
  width: calc(100% - 130px);
  letter-spacing: normal;
  padding: 0 0 0 40px;
  box-sizing: border-box;
  font-size:clamp(14px,18 / 1200 * 100vw,18px);
}
.outline_wrap:last-child dl dd{
  width: calc(100% - 190px);
}
.outline_wrap dl dt,
.outline_wrap dl dd {
  padding-bottom: 18px; 
}
.outline_wrap dl:last-of-type dt,
.outline_wrap dl:last-of-type dd {
  padding-bottom: 0;
}
.outline_wrap .notes {
  margin-top: clamp(23px,46 / 1200 * 100vw,46px);
}
.outline_wrap .notes p {
  font-size:clamp(14px,18 / 1200 * 100vw,18px);
  letter-spacing: normal;
  line-height: 2;
  margin-bottom: 10px;
}
@media screen and (max-width: 640px) {
  #outline .content_wrap {
    padding: 17.34375vw 7.5vw 10.46875vw;
    background-image: none;
  }
  #outline .content_title {
    margin-bottom: 11.09375vw;
  }
  #outline .content_title img {
    width: 72.96875vw;
  }
  .outline_wrap {
    width: 100%;
  }
  .outline_wrap:first-child {
    padding-left: 0;
    margin-bottom: 15vw;
  }
  .outline_wrap:last-child {
    padding: 0;
  }
  #outline h3 {
    font-size: 3.4375vw;
  }
  .outline_wrap dl {
    display: block;
    border-bottom: 1px solid #707070;
    /* margin-bottom: 1.71875vw; */
    padding-bottom: 1.875vw;

  }
  .outline_wrap dl dt,
  .outline_wrap dl dd {
    width: 100%;
    padding: 0;
    font-size: 2.8125vw;
  }
  .outline_wrap dl dt {
    border-right: none;
    line-height: 2;
  }
  .outline_wrap .notes p {
    font-size: 2.8125vw;
  }
}

/* ===============================
	contact
=============================== */
#contact {
  background: #6DB154;
}
#contact .disFlex {
  padding: 0 4%;
  align-items: center;
}
#contact li {
  width: 25%;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
}
#contact li:after{
  content: "";
  width:1px;
  height:80px;
  background: #FFFFFF;
  margin: auto 0 auto auto;
  position: absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
}
#contact li:last-child:after{
  display: none;
}
#contact img {
  max-width: 90% !important;
}
#contact li a {
  font-size: clamp(26px,42 / 1200 * 100vw,42px);
  color: var(--C-white);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  letter-spacing: 0;
}
#contact li a span {
  font-size: clamp(16px,15 / 1400 * 100vw,24px);
  letter-spacing: 0.05em;
  color: var(--C-white);
}
@media screen and (max-width: 640px) {
  #contact nav {
    padding: 0 12.96875vw;
  }
  #contact li {
    width: 100%;
    height: 44.375vw;
    border-right: 0;
    border-bottom: 1px solid #fff;
  }
  #contact li:after{
    display: none;
  }
  #contact li:last-child {
    border-bottom: none;
  }
  
  #contact li a {
    font-size: 7.65625vw;
  }
  #contact li a[href*="tel:"] img {
    width: 67.34375vw;
  }
  #contact li a span {
    font-size: 4.375vw;
  }
}

#footer_fixed_contact {
  display: none;
}
@media screen and (max-width: 640px) {
  #footer_fixed_contact {
    width: 100vw;
    display: block;
    position: fixed;
    bottom: 0;
  }

  #footer_fixed_contact li {
    width: 33.333333%;
    text-align: center;
  }
  #footer_fixed_contact li:first-child {
    background-color: #e74566;
  }
  #footer_fixed_contact li:nth-of-type(2) {
    background: #004097;
    background: -moz-linear-gradient(left, #004097 0%, #0073bc 100%);
    background: -webkit-linear-gradient(left, #004097 0%,#0073bc 100%);
    background: linear-gradient(to right, #004097 0%,#0073bc 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#004097', endColorstr='#0073bc',GradientType=1 );
  }
  #footer_fixed_contact li:last-child {
    background-color: #727171;
  }
  #footer_fixed_contact li a {
    display: block;
    font-size: 14px;
    line-height: 20px;
    padding: 15px 0;
    color: var(--C-white);
  }
}
/* ===============================
	footer
 =============================== */
footer {
  text-align: center;
  padding: 80px 0 70px 0;
}
footer dl{
  width:900px;
  margin: 0 auto;
}
footer dt {
  margin-bottom: 60px;
}
footer dd {
  font-size:18px;
  letter-spacing: normal;
  line-height: 1.5;
  text-align: left;
}
@media screen and (max-width: 640px) {
  footer {
    padding: 9.375vw 0 20vw;
  }
  footer dl{
    width:94%;
    margin: 0 auto;
  }
  footer dt img {
    width: 54.6875vw;
  }
  footer dd {
    font-size: 2.8125vw;
    line-height: 1.944444444444444;
    margin-bottom: 3.4375vw;
  }
  footer dd:last-child {
    margin-bottom: 0;
  }
}



/* ===============================
	event btn
 =============================== */
 #event_btn {
  width: clamp(80px,260 / 1400 * 100vw,260px);
  position: fixed;
  right: 2vw;
  bottom: 50px;
 }


/* ===============================
	payBox
 =============================== */
#reference h4{
    margin-top: 80px;
    text-align: center;
    font-size:24px;
    color:#CC0000;
    font-weight: bold;
}
.payBox{
    width:720px;
    margin: 30px auto 0;
    display: grid;
    gap:10px;
    grid-template-columns:100px auto;
    padding: 20px;
    background: rgba(78,125,190,0.3);
}
.payBox .header-pay{
    width:100px;
    height:100px;
    grid-column: 1 / 2;
    grid-row: 1 / 3;
    border-radius: 50%;
    position: relative;
    background: #CC0000;
}
.payBox .header-pay p{
    display: block;
    width:100%;
    color:#FFFFFF;
    font-size:24px;
    position: absolute;
    top:50%;
    left:0;
    text-align: center;
    transform: translate(0,-50%);
    letter-spacing: 0;
}
.payBox .header-pay p span{
    color:#FFFFFF;
    font-size:28px;
    letter-spacing: 0;
}
.payBox .month{
    height:50px;
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    display: flex;
}
.payBox .month .title{
    width:50px;
    height:50px;
    display: block;
    border-radius: 50%;
    border:2px solid #CC0000;
    font-size:14px;
    line-height: 46px;
    font-weight: bold;
    color:#CC0000;
    margin-right: 15px;
}
.payBox .month .price{
    font-size:24px;
    color:#CC0000;
    letter-spacing: 0;
}
.payBox .month .price span{
    font-size:32px;
    color:#CC0000;
    letter-spacing: 0;
}
.payBox .bonus{
    height:50px;
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    display: flex;
}
.payBox .bonus .title{
    font-size:14px;
    line-height: 1.5;
    margin-right: 15px;
}
.payBox .bonus .price{
    font-size:18px;
}
.payBox .bonus .price span{
    font-size:24px;
}
.payBox ul{
    grid-column: 1 / 3;
    grid-row: 3 / 4;
    display: grid;
    grid-template-columns: auto 1fr 1fr;
    grid-template-rows: 24px 24px;
    gap:10px 20px;
    padding-top: 15px;
    border-top:2px dotted #000000;
}
.payBox ul span{
    width:180px;
    font-size:18px;
    grid-column:1 / 2;
    grid-row:1 / 3;
    text-align: left;
}
.payBox ul li{
    font-size:14px;
    list-style: none;
    line-height: 1.5;
    text-align: left;
}
.payBox ul li:before{
    content: "●";
}
.payBox .comment{
    grid-column: 1 / 3;
    grid-row: 4 / 5;
    font-size:12px;
    padding-left: 15px;
    text-align: left;
}
@media screen and (max-width: 640px) {
#reference h4{
    margin-top: 40px;
}
.payBox{
    margin-top: 20px;
    padding: 15px;
    width:calc(100% - 15vw);
    grid-template-columns:60px auto;
}
.payBox .header-pay{
    width:60px;
    height:60px;
}
.payBox .header-pay p{
    font-size:14px;
}
.payBox .header-pay p span{
    font-size:18px;
}
.payBox .month{
    height:30px;
}
.payBox .month .title{
    width:30px;
    height:auto;
    border:none;
    font-size:18px;
    line-height: 28px;
    margin-right: 35px;
}
.payBox .month .title::after{
    content: "：";
}
.payBox .month .price{
    font-size:18px;
}
.payBox .month .price span{
    font-size:24px;
}
.payBox .bonus{
    height:30px;
    display: block;
    text-align: left;
}
.payBox .bonus .title{
    font-size:12px;
    margin-right: 10px;
    line-height: 1;
}
.payBox .bonus .title br{
    display: none;
}
.payBox .bonus .price{
    font-size:14px;
    line-height: 1;
    margin-top: 5px;
}
.payBox .bonus .price span{
    font-size:16px;
    line-height: 1;
}  
.payBox ul{
    display: block;
    gap:10px;
}
.payBox ul span{
    width:180px;
    font-size:16px;
    grid-column:1 / 3;
    grid-row:1 / 2;
}
.payBox ul li{
    font-size:12px;
    margin-top: 10px;
    margin-bottom: 0;
}
.payBox .comment{
    padding-left: 5px;
}
}