@charset "utf-8";

html{
  scroll-behavior: smooth;
}

body {
    width: 30%;
    margin: auto;
    font-family: "Noto Sans JP", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    position: relative;
    z-index: 0;
}

body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(./images/bg.jpg) no-repeat center center / cover;
  filter: blur(5px);
  z-index: -2;
}

body::after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.1); /* 白の半透明 */
  z-index: -1;
}



.container {
  background-color: #fff;
}

h1 {
  position: relative;
  top: 1vw;
  margin-left: 50%;
  padding-left: 1vw;
  font-size: 10px;
  font-weight: 200;
  border-left: 1px solid #fff;
  color: #fff;
  z-index: 100;
}

img.fadeInDown {
    width: 100%;
    margin: -2vw auto 0;
    position: relative;
}

.fadeInDown {
    opacity: 0;
    animation: fadein-top 2s ease-out forwards;
}

/* フェードインアニメーション */
@keyframes fadein-top {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
}

.delay02s {
    animation-delay: 0.2s;
}

.fadeIn {
    opacity: 0;
}

.fadeIn.is-animated {
    animation-name: fadeIn;
    animation-duration: 1s;
    animation-fill-mode: both;
}

@keyframes fadeIn {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
}

.fadeRight {
  text-align: right;
    margin-right: 0;
    margin-left: auto;
    width: 85%;
  opacity: 0;
  transform: translateX(-7%);
}

.fadeLeft {
  text-align: left;
    margin-right: auto;
    margin-left: 0;
    width: 85%;
  opacity: 0;
  transform: translateX(7%);
}

.fadeRight.is-animated {
  animation-name: fadeRight;
  animation-duration: 1s;
  animation-fill-mode: both;
}

@keyframes fadeRight {
  0% {
    opacity: 0;
    transform: translateX(-7%);
  }
  100% {
    opacity: 1;
    transform: translateX(0px);
  }
}

.fadeLeft.is-animated {
  animation-name: fadeLeft;
  animation-duration: 1s;
  animation-fill-mode: both;
}

@keyframes fadeLeft {
  0% {
    opacity: 0;
    transform: translateX(7%);
  }
  100% {
    opacity: 1;
    transform: translateX(0px);
  }
}

.con_01 {
    margin: 3vw 0;
}

.cp {
  height: 48vw;
  background: url(./images/campaign_cta.webp);
  background-repeat: no-repeat;
  background-size: contain;
}

img.cp_cta {
  width: 90%;
  margin: 0 auto;
  position: relative;
  top: 40vw;
  animation: pulse 2s infinite;
}

.cta_btn{
  width: 95%;
  margin: 0 auto;
  position:relative;
  top: -9.5vw;
}

.cta_btn_2{
  width: 95%;
  margin: 0 auto;
  position:relative;
  top: -13vw;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1); /* ボタンが少し拡大 */
  }
  100% {
    transform: scale(1);
  }
}

.title {
    font-size: 2vw;
    text-align: center;
    letter-spacing: 1px;
    font-weight: 600;
    padding: 2vw 0 0;
}

.voice_box {
  margin:40px 10px;
 
}

/*新規*/
.title_reserve_area {
  font-size: 1.2em;
  text-align: center;
  letter-spacing: 1px;
  font-weight: 600;
  padding: 0.5vw 0 1vw;
  
}

/*新規*/
.reserve_area_text{
  font-size: 14px;
  text-align: center;
  letter-spacing: 1px;
  font-weight: 600;
  /*padding: 2vw 0 0;*/
  /*letter-spacing: 2px;*/
}

/*新規*/
.form_back_box{
  padding:12px;
  background-color: white;
}

.tel_box{
  margin: 0 auto;
}

.subtitle {
    font-size: 1vw;
    text-align: center;
    letter-spacing: 1px;
    font-weight: 200;
    color: rgb(97, 176, 18);
}

.name {
    width: 96%;
    padding-top: 2vw;
    margin: 0 auto;
    font-size: 1vw;
}

.name span{
    color: rgb(97, 176, 18);
}

.sub_name {
    width: 96%;
    margin: 0 auto;
    font-size: 1vw;
    border-bottom: 1px solid #000;
    line-height: 2vw;
}

.sub_name a {
    text-decoration: none;
    color:  rgb(97, 176, 18);
}
/* ---------------------strength--------------------- */
.point_cta {
  width: 90%;
  margin: 0 auto;
  position: relative;
  top: -62vw;
}
/* ---------------------menu--------------------- */
#menu {
    margin-top: 6vw;
}
/* --------------------flow--------------------- */
#flow {
    /*height: 105vw;*/
    background: url(./images/flow.png);
    background-repeat: no-repeat;
    background-size: 100%;
    padding-bottom: 40px;
}

.slider2 {
    text-align: center;
    overflow: hidden;
  }

  
  .slides2 {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
        /*
    scroll-snap-points-x: repeat(300px);
    scroll-snap-type: mandatory;
    */
  }
  .slides2::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }
  .slides2::-webkit-scrollbar-thumb {
    display: none;
  }
  .slides2::-webkit-scrollbar-track {
    background: transparent;
  }
  .slides2 > div {
    scroll-snap-align: start;
    flex-shrink: 0;
    width: 80%;
    height: 100%;
    margin-top: 16vw;
    margin-right: 50px;
    padding-left: 2vw;
    border-radius: 10px;
    transform-origin: center center;
    transform: scale(1);
    transition: transform 0.5s;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 100px;
  }

  .slides2 > div:target {
  /*   transform: scale(0.8); */
  }
  
  .author-info2 {
    background: rgba(0, 0, 0, 0.75);
    color: white;
    padding: 0.75rem;
    text-align: center;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    margin: 0;
  }
  
  .author-info2 a {
    color: white;
  }

  .img2 {
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  
  .slider2 > a {
    display:none;
    width: 1.5rem;
    height: 1.5rem;
    background: white;
    text-decoration: none;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin: 0 0 0.5rem 0;
    position: relative;
  }
  .slider2 > a:active {
    top: 1px;
  }
  .slider2 > a:focus {
    background: #000;
  }
  
  /* Don't need button navigation */
  @supports (scroll-snap-type) {
    .slider2 > a {
      display: none;
    }
  }
/* ---------------------access----------------------- */
#access h3 {
  font-weight: 400;
}

.course-cell {
    width: 90%;
    padding: 0 0.5vw;
    margin: 4vw auto;
  }

  .course-cell img {
    width: 100%;
    height: 100%;
  }
  
  * {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }

  .flickity-enabled {
    position: relative;
  }
  
  .flickity-enabled:focus { outline: none; }
  
  .flickity-viewport {
    overflow: hidden;
    position: relative;
    height: 100%;
  }
  
  .flickity-slider {
    position: absolute;
    width: 100%;
    height: 100%;
  }
  
  /* draggable */
  .flickity-enabled.is-draggable {
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
  }
  
  .flickity-enabled.is-draggable .flickity-viewport {
    cursor: move;
    cursor: -webkit-grab;
    cursor: grab;
  }
  
  .flickity-enabled.is-draggable .flickity-viewport.is-pointer-down {
    cursor: -webkit-grabbing;
    cursor: grabbing;
  }
  
  /* ---- flickity-button ---- */
  .flickity-button {
    display: none;
  }
  
  /* ---- page dots ---- */
  .flickity-page-dots {
    position: absolute;
    bottom: 25px;
    width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
    text-align: center;
    line-height: 1;
  }
  
  .flickity-rtl .flickity-page-dots { direction: rtl; }
  
  .flickity-page-dots .dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin: 0 8px;
    background:  rgb(97, 176, 18);
    border-radius: 50%;
    opacity: 0.25;
    cursor: pointer;
  }
  
  .flickity-page-dots .dot.is-selected {
    opacity: 1;
  }

.sub_name img {
    width: 70%;
    margin: 1vw 0;
}

iframe.map {
    width: 100%;
    height: 60vh;
    padding-top: 2vw;
}
/* ---------------------aql----------------------- */
#aql {
  padding-top: 12vw;
  margin-bottom: 3vw;
  background: url(./images/Q&A_bg.png);
  background-repeat: no-repeat;
  background-size: cover;
}

.accordion_faq {
    width: 94%;
    margin: 0 auto;
    position: relative;
    top: 0vw;
}
  
/* inputのチェックボックスを非表示 */
  .accordion-hidden {
    display: none;
}

.accordion-open {
    display: block;
    font-size: 1.2vw;
    padding: 1vw 8vw 1vw 0.5vw;
    border-top: 1px solid #efefef;
    cursor: pointer;
    position: relative;
}

/* ＋アイコン */
.accordion-open::before,
.accordion-open::after {
    content: '';
    width: 1vw;
    height: 0.1vw;
    background: #000;
    position: absolute;
    top: 50%;
    right: 5%;
    transform: translateY(-50%);
}
  
/* アイコンのー */
.accordion-open::after {
    transform: translateY(-50%) rotate(90deg);
    transition: .5s;
 }
  
/* アコーディオンが開いたらーに */
.accordion-hidden:checked+.accordion-open:after {
    transform: translateY(-50%) rotate(0);
}
  
/* アコーディオン中身部分 */
.accordion-inner {
    display: block;
    height: 0;
    overflow: hidden;
    padding: 0;
    opacity: 0;
    transition: 0.5s;
    /* 表示速度の設定 */
    cursor: pointer;
}
  
/* チェックボックスにチェックが入ったら中身部分を表示する */
.accordion-hidden:checked+.accordion-open+.accordion-inner {
    height: auto;
    opacity: 1;
    padding: 10px;
}
  
.accordion_qa .accordion-open {
    padding-left: 0.5vw;
}
  
.accordion_qa .accordion-hidden:checked+.accordion-open+.accordion-inner {
    font-size: 1.2vw;
    height: auto;
    opacity: 1;
    padding: 0.5vw;
}

.under_bar {
    width: 50%;
    margin: 0 auto;
    border-top: 1px solid #fff;
}


.link {
  background-color: #383838;
}

.link img {
  width: 60%;
  margin-left: 2vw;
}

.link_sub {
  padding-left: 2vw;
  color: #cb4611;
}

.link_box {
  width: 80%;
  padding-bottom: 2vw;
  display: flex;
  flex-wrap: wrap;
}

.f_link {
  width: 50%;
  list-style: none;
  text-align: left;
  line-height: 4vw;
}

.f_link a {
  font-size: 1vw;
  color: #fff;
  text-decoration: none;
}

.f_link a:hover {
  opacity: 0.5;
  transition: 0.4s;
}

/* ---------------------footer----------------------- */
footer {
  background-color: #ebeaea;
}

.footer_box {
  width: 96%;
  margin: 0 auto;
  padding: 2vw 1vw;
}

footer img {
  width: 70%;
  padding: 4vw 0.5vw 2vw;
}

p.footer_text {
  background-color: #ebeaea;
  color: #000;
  font-size: 1vw;
  text-align: left;
  line-height: 2vw;
  padding: 0 0 1vw 0;
}

footer h3 {
  padding-top: 1vw;
  padding-bottom: 1vw;
  margin-bottom: 1vw;
  border-bottom: 1px solid #000;
  font-size: 3vw;
  font-weight: 300;
  font-style: italic;
  letter-spacing: 1px;
  opacity: 0.65;
}

footer p {
  background-color: #383838;
  color: #fff;
  font-size: 1vw;
  line-height: 2vw;
  text-align: center;
  letter-spacing: 1px;
}
/* ---------------------footer end----------------------- */

/* ---------------------none----------------------- */
.float-button__wrap {
  width: 30%;
  z-index: 10;
}

.float_flex {
  width: 100%;
  z-index: 10;
  margin: 0 auto;
}

.float-button_flex {
  display: flex;
}

.float_flex img {
  width: 100%;
}

/* ---------------------mobile----------------------- */
@media (max-width: 500px) {
body {
    width: 100%;
    margin: auto;
}

h1 {
  position: relative;
  top: 2.5vw;
  font-size: 8px;
  margin-left: 60%;
  padding-left: 5vw;
}

img.fadeInDown {
  margin: -7.7vw auto 0;
}

.con_01 {
    margin: 9vw 0;
} 

.cp {
  height: 160vw;
  background-color: #fff;
}

.point_cta {
  width: 90%;
  margin: 0 auto;
  position: relative;
  top: -215vw;
}

img.cp_cta {
  width: 90%;
  margin: 0 auto;
  position: relative;
  top: 130vw;
}

.cta_btn{
  width: 95%;
  margin: 0 auto;
  position:relative;
  top: -33vw;
}
.cta_btn_2{
  width: 95%;
  margin: 0 auto;
  position:relative;
  top: -55vw;
}
  
.title {
    font-size: 30px;
    padding: 32px 0 0;
}

/*新規*/
.title_reserve_area {
  font-size: 20px;
  padding: 5px 0 10px;
}

/*新規*/
.reserve_area_text{
  font-size: 12px;
  padding: 5px 0 5px;
}


/*新規
.form_back_box{
  margin: 2vw auto;
  background-color: white;
}
*/

.subtitle {
    font-size: 12px;
}

.name {
    width: 90%;
    padding-top: 28px;
    margin: 0 auto;
    font-size: 14px;
}

.sub_name {
    width: 90%;
    font-size: 16px;
    line-height: 20px;
}
/* ---------------------strength--------------------- */
/*
#strength img {
  padding: 1vw 0 60px;
}
*/
/* ---------------------menu--------------------- */
#menu {
  padding-top: 6vw;
}
/* --------------------flow--------------------- */
/*#flow {
    height: 340vw;
}*/

.slides2 > div {
    margin-top: 50vw;
}
/* --------------------access-------------------- */

  
  /* ---- page dots ---- */
  .flickity-page-dots {
    bottom: -10px;
  }

iframe.map {
    width: 100%;
    height: 60vh;
    padding-top: 2vw;
}
/* ---------------------aql----------------------- */
#aql {
  padding-top: 46vw;
  margin-bottom: 9vw;
}

.accordion_faq {
    width: 94%;
}

.accordion-open {
    font-size: 14px;
    padding: 4vw 8vw 4vw 0.5vw;
}

/* ＋アイコン */
.accordion-open::before,
.accordion-open::after {
    width: 4vw;
    right: 3%;
}
  
.accordion_qa .accordion-hidden:checked+.accordion-open+.accordion-inner {
    font-size: 14px;
    letter-spacing: 2px;
}


img.shop_view {
    width: 90%;
    margin: 2vw auto;
}

iframe.map {
    height: 32vh;
    padding: 4vw 0 0vw;
}


.link img {
  width: 70%;
  padding-top: 6vw;
  margin-left: 4vw;
}

.link_sub {
  font-size: 14px;
  padding-left: 8vw;
}

.link_box {
  padding-bottom: 12vw;
}

.f_link {
  line-height: 36px;
}

.f_link a {
  font-size: 14px;
}


.footer_box {
  width: 96%;
  margin: 0 auto;
  padding: 3vw 6vw;
}

footer img {
  width: 50%;
  padding: 6vw 2vw;
}

footer h3 {
  padding-top: 8vw;
  padding-bottom: 2vw;
  margin-bottom: 2vw;
  font-size: 26px;

}

p.footer_text {
  background-color: #ebeaea;
  color: #000;
  font-size: 14px;
  text-align: left;
  line-height: 28px;
  padding:0;
}

footer p {
  padding: 4vw 0;
  font-size: 12px;
}

/* ---------------------none----------------------- */
.float-button__wrap {
  width: 100%;
}
    
    
}
/* ---------------------PC View----------------------- */
#menu  {
  font-size: 1.2rem;
}
#menu  .pc_logo {
  position: fixed;
  width: 25vw;
  top: 28vh ;
  left: 5vw ;
}

#menu  .pc_qr {
  position: fixed;
  width: 30vw;
  top: 20vh ;
  right: 2vw ;
}

#menu  .pc_btn {
  position: fixed;
  top: 70vh ;
  right: 6vw ;
}

.pc_btn {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 20vw;
  margin: 0 auto;
  padding: .9em 3em .9em 2em;
  border: 1px solid #000000;
  border-radius: 5px;
  background-color: #fff;
  color: #000000;
  font-size: 0.6em;
}

.pc_btn::after {
  position: absolute;
  right: 2em;
  transform: translateY(-50%);
  transform-origin: left;
  width: 2em;
  height: .5em;
  background-color: #000000;
  clip-path: polygon(0 100%, 100% 100%, 70% 40%, 70% 90%, 0% 90%);
  content: '';
  transition: transform .3s;
}

.pc_btn:hover::after {
  transform: translateY(-50%) scaleX(1.4);
}



@media screen and (max-width: 500px) {
  #menu {
      display: none;
  }
}