@charset "UTF-8";

/* 変数 */
:root{
  /* color */
--text-color:#080404;
--btntext-color:#5d351f;
--primary-color:#E3B730;
--secondary-color:#55A353;
--tertiary-color:#356D85;
--white-color:#fff;
--gray-color:#F7F7F7;
--bgpoint-color:#fff6e6;
  /* font */
--font-e:"Jost", sans-serif;
--font-semibold: 600;
--font-bold: 700;
}

/* CSS Document */
html {
  font-size: 2.66vw;
  /* 10px × 375px = 2.66 = 1rem */
  scroll-behavior: smooth;
}

body {
  color: var(--text-color);
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", Meiryo, sans-serif;
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.05em;
  animation: fadeIn 2s ease 0s 1 normal;
  -webkit-animation: fadeIn 2s ease 0s 1 normal;
}

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

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

a {
  color: var(--text-color);
  cursor: pointer;
}

img {
  max-width: 100%;
  height: auto;
}

address {
  font-style: normal;
}

small, .small {
  font-size: 1.2rem;
}

@media screen and (min-width: 769px) {
  small, .small {
    font-size: max(1.2rem, 12px);
  }
}

@media screen and (min-width: 769px) {
  html {
    font-size: 0.69vw;
    /* 10px × 1440px = 0.6 = 1rem */
    scroll-behavior: smooth;
  }

  body {
    color: var(--text-color);
    font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", Meiryo, sans-serif;
    font-size: max(1.6rem, 14px);
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: 0.05em;
    animation: fadeIn 2s ease 0s 1 normal;
    -webkit-animation: fadeIn 2s ease 0s 1 normal;
  }
}


/*------------------------
 * utility
 ------------------------*/
.wrapper {
  padding-left: 1.6rem;
  padding-right: 1.6rem;
}

.disp_pc {
  display: none;
}

.disp_sp {
  display: block;
}

.fuwatAnime {
  -webkit-animation-fill-mode: both;
  -ms-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-duration: 2s;
  -ms-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-name: fuwatAnime;
  -ms-animation-name: fuwatAnime;
  animation-name: fuwatAnime;
  visibility: visible !important;
}

@-webkit-keyframes fuwatAnime {
  0% {
    opacity: 0;
    -webkit-transform: translateY(40px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
  }
}

@keyframes fuwatAnime {
  0% {
    opacity: 0;
    -webkit-transform: translateY(40px);
    -ms-transform: translateY(40px);
    transform: translateY(40px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}


@media screen and (min-width: 769px) {
  .wrapper {
    padding-left: 4rem;
    padding-right: 4rem;
  }

  .disp_pc {
    display: block;
  }
  
  .disp_sp {
    display: none;
  }  
}


/*------------------------
 * header
 ------------------------*/
header {
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 7rem;
  background-color: rgba(255, 255, 255, 0.7);
  padding: 1.8rem 1.6rem;
  z-index: 100;

  img{
    width: 12.8rem;
  }
}

nav{
  /* display: none; */
  position: fixed;
  top: 0;
  right: -150%;
  width: 100%;
  height: 100%;
  background-color: var(--white-color);
  padding: 7rem 3.8rem;
  opacity: 0;
  transition: all .5s;

  &.open{
    /* display: block; */
    right: 0;
    opacity: 1;
  }

  img{
    display: block;
    width: 16.5rem;
    margin: 0 auto 5rem;
  }

  li{
    position: relative;
    height: 7rem;
    line-height: 7rem;
    border-top: solid 2px #CFCFCE;

    &::before{
      position: absolute;
      content: '▶︎';
      top: 50%;
      transform: translateY(-50%);
      right: 0;
    }

    &:last-of-type{
      border-bottom: solid 2px #CFCFCE;
    }
  }

  .cvButton{
    display: block;
    width: 23rem;
    font-size: max(1.6rem, 14px);
    text-align: center;
    padding: 2rem 0;
    border-radius: 3.6rem;
    background-color: var(--primary-color);
    margin: 4.3rem auto 0;
    transition: all 0.5s;

    &:hover{
      background-color: var(--text-color);
      color: var(--white-color);
    }
  }
}

.navButton{
  position: relative;
  width: 3rem;
  height: 1.8rem;

  span{
    position: absolute;
    width: 3rem;
    height: 0.4rem;
    background-color: var(--text-color);
    transition: all .5s;

    &:first-child{
      top: 0;
    }
    &:last-child{
      bottom: 0;
    }
  }
}

.navButton.active{
  span{
    &:first-child{
      top: .7rem;
      transform: rotate(45deg);
    }

    &:last-child{
      bottom: .7rem;
      transform: rotate(-45deg);
    }
  }
}

@media screen and (min-width: 769px) {
  header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: max(8rem, 80px);
    background-color: rgba(255, 255, 255, 0.7);
    padding: 1.8rem 6vw;
    z-index: 100;
  
    img{
      width: 12.8rem;
    }
  }

  nav{
    display: block;
    position: unset;
    width: auto;
    height: auto;
    background-color: transparent;
    padding: 0 0;
    margin-left: auto;
    margin-right: 0;
    opacity: 1;

    div{
      display: flex;
      align-items: center;
      gap: 5.4rem;
    }
  
    ul{
      display: flex;
      gap: 5.4rem;
    }

    li{
      height: auto;
      line-height: 1;
      border-top: none;
  
      &::before{
        display: none;
      }

      &:last-of-type{
        border-bottom: none;
      }
    }

    .cvButton{
      width: fit-content;
      height: fit-content;
      font-weight: var(--font-bold);
      padding: .9rem 2rem;
      margin: 0;
    }  
  }
}

@media screen and (min-width: 1440px) {
  header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 8rem;
    background-color: rgba(255, 255, 255, 0.7);
    padding: 1.8rem 6rem;
    z-index: 100;
  
    img{
      width: 12.8rem;
    }
  }

  nav{
    display: block;
    position: unset;
    width: auto;
    height: auto;
    background-color: transparent;
    padding: 0 0;
    margin-left: auto;
    margin-right: 0;

    div{
      display: flex;
      align-items: center;
      gap: 5.4rem;
    }
  
    ul{
      display: flex;
      gap: 5.4rem;
    }

    li{
      height: auto;
      line-height: 1;
      border-top: none;
  
      &::before{
        display: none;
      }

      &:last-of-type{
        border-bottom: none;
      }
    }

    .cvButton{
      width: fit-content;
      height: fit-content;
      font-weight: var(--font-bold);
      padding: .9rem 2rem;
      margin: 0;
    }  
  }
}

/*------------------------
* section
------------------------*/
.section_title {
  font-size: 3.2rem;
  font-weight: var(--font-semibold);
  text-align: center;
  margin-bottom: 3rem;

  img{
    width: 3rem;
    height: auto;
  }

  span{
    display: block;
    font-family: var(--font-e);
    font-weight: var(--font-semibold);
    margin-top: -1rem;
  }

  h2{
    font-size: 1.2rem;
    font-weight: var(--font-bold);
  }
}

@media screen and (min-width: 769px) {  
  .section_title {
    display: flex;
    font-size: 6.4rem;
    line-height: 1;
    justify-content: center;
    align-items: center;
    margin-bottom: 5rem;
  
    img{
      width: 6rem;
      height: 6rem;
      margin-right: 1rem;
    }
  
    span{
      margin-top: 0;
    }
  
    h2{
      font-size: max(2rem, 20px);
      margin-left: 2.2rem;
    }
  }  
}


/*------------------------
* main visual
------------------------*/
.mv {
  padding-top: 7rem;
}

.mv_title{
  position: relative;
  width: 29.5rem;
  background-color: var(--white-color);
  border-radius: 0 0 3rem 0;
  padding: 1rem 0 2.4rem 1.5rem;
  background-image: url(../images/svg/textOohako.svg);
  background-size: 44%;
  background-repeat: no-repeat;
  background-position: 14% 34%;
  z-index: 2;

  h2{
    position: relative;
    font-size: 4rem;
    font-weight: var(--font-bold);
    letter-spacing: 0.15em;
    z-index: 2;

    span{
      font-size: 2.4rem;
    }
  }

  .mapObject{
    position: absolute;
    top: 1.7rem;
    right: -4rem;
    width: 15.3rem;
    height: auto;
    z-index: 1;
  }
}

.mv_graphic{
  padding-left: 2rem;
  padding-bottom: 1.7rem;
  margin-top: -10.2rem;

  img{
    width: 100%;
    height: calc(100vw - 2rem);
  }
}

.mv_leadTitle{
  font-size: 2rem;
  font-family: var(--font-e);
  font-weight: var(--font-bold);
  padding-top: 0.8rem;
}

.fadein {
  transition: all 2s 1s;
  opacity: 0;
  &.active {
    opacity: 1;
  }
  &.move-to-top {
    transform: translateY(100px);
    &.active {
      transform: translateY(0);
    }
  }
}

@media screen and (min-width: 769px) {  
  .mv {
    position: relative;
    padding-top: max(8rem, 80px);
  }
  
  .mv_title{
    position: absolute;
    width: 65.4rem;
    border-radius: 0 0 3rem 0;
    padding: 0 0 2.9rem 5.6rem;
    background-size: 32%;
    background-position: 21% 30%;
  
    h2{
      font-size: 8rem;
      line-height: 1.4;
  
      span{
        font-size: 4rem;
      }
    }
  
    .mapObject{
      top: 8rem;
      right: 3rem;
      width: 22.7rem;
    }
  }
  
  .mv_graphic{
    display: flex;
    align-items: flex-start;
    padding-bottom: 0;
    margin-top: 0;
    margin-left: 4.2rem;
    margin-right: 2.6rem;
    gap: 20px;

    img{
      width: 85.2rem;
      height: 63.6rem;
      object-fit: cover;
    }

    .lead{
      margin-top: 36rem;
      flex: 0 0 36.5%;

      p{
        font-size: max(2rem, 14px);
        line-height: 1.96;

        br{
          display: none;
        }
      }
    }
  }
  
  .mv_leadTitle{
    font-size: 4rem;
  }
}

@media screen and (min-width: 1440px) { 
  .mv {
    padding-top: 8rem;
  }
  
  .mv_graphic{
    align-items: flex-end;

    .lead{
      margin-top: 0;

      p{
        br{
          display: block;
        }
      }
    }
  }
}


/*------------------------
* event
------------------------*/
section.event{
  padding-top: 4rem;
  padding-bottom: 9rem;
  background-color: var(--primary-color);

  .googlecalendar{
    display: block;

    iframe{
      width: 100%;
      height: 30rem;
      border: none !important;
    }
  }

  .message{
    text-decoration: underline;
  }
}

@media screen and (min-width: 769px) {
  section.event{
    padding-top: 13.4rem;
    padding-bottom: 14rem;
    padding-left: 20.9rem;
    background-color: transparent;

    .wrapper{
      background-color: var(--primary-color);
      background-image: url(../images/svg/bg_calendat.svg);
      background-repeat: no-repeat;
      background-position: 100% 0;
      background-size: contain;
      border-radius: 3rem 0 0 3rem;
      padding-top: 1px;
    }

    .section_title{
      justify-content: flex-start;
      margin-top: -3rem;
      margin-left: 1.5rem;
    }

    .googlecalendar{
      display: block;
      padding-left: 6rem;
      padding-bottom: 1rem;

      iframe{
        width: 81.1rem;
        height: 60.7rem;
      }
    }
    
    .message{
      padding-left: 6rem;
      padding-bottom: 5rem;
    }
  }
}

/*------------------------
* about
------------------------*/
.about{
  margin-top: -3rem;
  position: relative;
  z-index: 1;

  .about_contents{
    position: relative;
    z-index: 1;
  }

  .about_topImage{
    width: 33.2rem;
    height: 26.9rem;
    border-radius: 0 2rem 2rem 0;
    object-fit: cover;
  }

  h2{
    font-size: 2rem;
    font-weight: var(--font-bold);
    padding-top: 4.5rem;
    padding-left: 1.6rem;
    margin-bottom: 2rem;
  }

  h3{
    font-size: 1.6rem;
    font-weight: var(--font-bold);
    margin-bottom: 1.5rem;
  }

  p + p{
    padding-top: 2rem;
  }

  .imageArea1{
    position: relative;
    margin-top: 4rem;
    margin-bottom: 2rem;

    .mapObjectMizuho{
      position: absolute;
      top: 1.2rem;
      left: 1.6rem;
      width: 22.9rem;
    }
  }

  .image1, .image2, .image3{
    display: block;
    border-radius: 1rem;
    object-fit: cover;
  }

  .image1{
    width: 22.8rem;
    height: 16.7rem;
    margin-left: auto;
    margin-right: 0;
  }

  .image2{
    width: 16.5rem;
    height: 12.1rem;
  }

  .image3{
    width: 13.4rem;
    height: 9.8rem;
    margin-top: -8rem;
    margin-left: auto;
    margin-right: 1.6rem;
  }
}

.cvAreaWrapper{
  padding: 0.9rem 3rem 0;
}

.cvImage{
  display: block;
  border-radius: 1rem;
  object-fit: cover;
  width: 16.4rem;
  margin-left: 2.2rem;
  margin-bottom: 1.8rem;
}

.cvArea{
  font-size: 1.6rem;
  font-weight: var(--font-bold);
  text-align: center;
  background-color: var(--primary-color);
  border-radius: 2rem;
  padding: 3.2rem 4rem;

  img{
    width: 11.8rem;
  }

  a{
    display: block;
    padding: 2rem 0;
    border: solid 2px var(--text-color);
    border-radius: 99rem;
    margin-top: 1.5rem;
    transition: all 0.5s;

    &:hover{
      background-color: var(--text-color);
      color: var(--white-color);
    }
  }
}

@keyframes infinity-scroll-left {
  from {
    transform: translateX(0);
  }
    to {
    transform: translateX(-100%);
  }
}

.background_image{
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}
.scroll-infinity{
  position: sticky;
  top: calc(100vh - 9.7rem);
  bottom: 0;
  z-index: 0;
}
.scroll-infinity__wrap {
  display: flex;
  overflow: hidden;
}
.scroll-infinity__list {
  display: flex;
  list-style: none;
  padding: 0
}
.scroll-infinity__list--left {
  animation: infinity-scroll-left 20s infinite linear .5s both;
}
.scroll-infinity__item {
  width: 47.4rem;
  margin-right: 4.8rem;
}
.scroll-infinity__item>img {
  width: 47.4rem;
}


@media screen and (min-width: 769px) {
  .about{
    margin-top: 0;

    .topArea{
      display: flex;
    }

    .titleArea{
      display: flex;
      flex-direction: column;
      width: 75.5rem;
    }
  
    .about_topImage{
      width: 75.5rem;
      height: 55.3rem;
      border-radius: 0 3rem 3rem 0;
      order: 2;
    }
  
    h2{
      font-size: 4rem;
      padding-top: 0;
      padding-left: 14.2rem;
      margin-bottom: 6rem;
      order: 1;

      img{
        width: 41.5rem;
      }
    }

    .textArea{
      width: 68.5rem;
      padding-top: 3.7rem;

      .wrapper{
        padding-left: 11.7rem;
        padding-right: 7.6rem;
      }
    }
  
    h3{
      font-size: max(2rem, 20px);
      margin-bottom: 3rem;
    }
    
    .imageArea1{
      margin-top: 24.4rem;
      margin-bottom: 2rem;
  
      .mapObjectMizuho{
        top: -16rem;
        left: 7.6rem;
        width: 44.8rem;
      }
    }
  
    .imageArea2{
      margin-top: -24rem;
      margin-left: 3rem;
    }
    
    .image1{
      width: 55rem;
      height: 40rem;
    }
  
    .image2{
      width: 40rem;
      height: 29.3rem;
    }
  
    .image3{
      width: 32.5rem;
      height: 23.8rem;
      margin-top: -15rem;
      margin-left: 50.7rem;
      margin-right: auto;
    }
  }
  
  .cvAreaWrapper{
    position: relative;
    max-width: 115.6rem;
    width: 100%;
    padding: 1px 0 0;
    margin: 10rem auto 0;
  }
  
  .cvImage{
    position: absolute;
    width: 48.9rem;
    margin-left: 0;
    margin-bottom: 0;
  }
  
  .cvArea{
    max-width: 106rem;
    width: 100%;
    font-size: 4rem;
    text-align: left;
    border-radius: 3rem;
    padding: 5.4rem 8.5rem 4rem 53rem;
    margin: 7.7rem auto 0;
  
    img{
      width: 22.9rem;
    }

    span{
      font-size: 3.6rem;
    }
  
    a{
      display: inline-block;
      font-size: max(1.6rem, 16px);
      padding: 2rem 4rem;
      margin-top: 4rem;
    }
  }

  .scroll-infinity{
    top: calc(100vh - 24rem);
  }
  .scroll-infinity__item {
    width: 116.4rem;
    margin-right: 11.8rem;
  }
  .scroll-infinity__item>img {
    width: 116.4rem;
  }
}

/*------------------------
* information
------------------------*/
section.information{
  padding-top: 5rem;
  padding-bottom: 5rem;
}

.information{
  .list{
    padding: 0 4.8rem;
  }
  
  .listNoWrapper{
    display: flex;
    align-items: flex-end;
    gap: .5rem;
    margin-bottom: 1rem;
  }
  
  .listNo{
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background-color: var(--secondary-color);
    font-size: 1.6rem;
    color: var(--white-color);
    text-align: center;
    line-height: 2.5rem;
  }
  
  .listItem{
    color: var(--secondary-color);
  
    .japanese{
      font-size: 1.4rem;
      font-weight: var(--font-bold);
      margin-bottom: 0.5em;
    }
  
    .alphabet{
      font-size: 3.2rem;
      font-family: var(--font-e);
      font-weight: var(--font-semibold);
      line-height: 2.5rem;
    }
  }
  
  .informationMap{
    margin: 0 auto;
  }

  .primary, .secondary, .tertiary{
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin-bottom: 5rem;
  }
  
  .primary{
    .informationMap{
      width: 21.1rem;
    }
  }
  
  .secondary{
    .informationMap{
      width: 11.5rem;
    }
    
    .listNo{
      background-color: var(--primary-color);
    }
  
    .listItem{
      color: var(--primary-color);
    }
  }
  
  .tertiary{
    margin-bottom: 0;

    .informationMap{
      width: 15rem;
    }
  
    .listNo{
      background-color: var(--tertiary-color);
    }
  
    .listItem{
      color: var(--tertiary-color);
    }
  }
}

@media screen and (min-width: 769px) {
  section.information{
    padding-top: 10rem;
  }

  .allMap{
    position: relative;

    & > img{
      position: relative;
      width: 100%;
      margin: 0 auto;  
    }
  }
  
  .information{

    .section_title{
      margin-bottom: 7rem;
    }

    .list{
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      max-width: 135.4rem;
      width: 100%;
      height: 100%;
      padding: 0;
    }

    .right{
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: flex-end;
      height: 100%;
    }

    .primary, .secondary, .tertiary{
      width: 40rem;
      margin-bottom: 0;
    }

    .primary{
      margin-bottom: 3rem;
    }
        
    .tertiary{
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      left: 0;
      .informationMap{
        width: 17rem;
      }
    }
    
    .listNoWrapper{
      gap: .8rem;
    }
    
    .listNo{
      width: 2.8rem;
      height: 2.8rem;
      border-radius: 50%;
      font-size: 2rem;
      line-height: 2.8rem;
    }
    
    .listItem{
    
      .alphabet{
        font-size: 3.6rem;
        line-height: 2.8rem;
      }
    }
  }
}

@media screen and (min-width: 1000px) {
  section.information{
    padding-top: 10rem;
    padding-bottom: 0;
  }
  
  .information{

    .list{
      max-width: 115.4rem;
    }

    .primary, .secondary, .tertiary{
      width: 30rem;
    }
  }
}

/*------------------------
* facilities
------------------------*/
.facilities{
  position: relative;
  z-index: 2;

  h2{
    font-size: 2.4rem;
    font-weight: var(--font-bold);
    text-align: center;
    margin-bottom: 1rem;

    .logo{
      width: 12rem;
    }

    .decoration_left{
      width: 2.3rem;
      margin-right: 1.2rem;
    }
    
    .decoration_right{
      width: 2.3rem;
      margin-left: 1.2rem;
    }
  
    span{
      font-size: 1.6rem;
    }
  }

  & > ul{
    color: var(--white-color);
  }

  .title{
    color: var(--white-color);
    margin-bottom: 1.5rem;

    h3{
      font-size: 1.3rem;
      font-weight: var(--font-bold);
  
      & + span{
        font-size: 3.2rem;
        font-weight: var(--font-semibold);
        font-family: var(--font-e);
        line-height: 1.2;
      }
    }
  }

  .spaceListWrapper > img:last-child{
      display: block;
      margin: 2rem 0 0 auto;
  }

  .spaceList{
    & > li{
      display: flex;
      flex-direction: column;
      gap: 2rem;
      margin-bottom: 3rem;

      &:last-child{
        margin-bottom: 0;
      }
    }

    .facilitiesImage{
      width: 100%;
      height: calc((100vw - (2.2rem * 2 + 1.6rem * 2)) / 40 * 27);
      border-radius: .5rem;
      object-fit: cover;
    }
  
    h4{
      position: relative;
      font-size: 1.6rem;
      padding-left: 1.7rem;
      margin-bottom: 1.2rem;
  
      &::before{
        position: absolute;
        content: '';
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        background-color: var(--white-color);
        width: 1rem;
        height: 1rem;
      }
    }  
  }

  .item_info{
    li{
      position: relative;
      padding-left: 1.7rem;
      margin-bottom: .6rem;

      &::before{
        position: absolute;
        content: '';
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        background-color: var(--white-color);
        width: .6rem;
        height: .4rem;
      }
    }
  }

  .primary, .secondary, .tertiary{
    padding: 3rem 2.2rem;
    border-radius: 2rem;
    margin-bottom: 2rem;
  }

  .primary{
    background-color: var(--secondary-color);
  }

  .secondary{
    background-color: var(--primary-color);
  }

  .tertiary{
    background-color: var(--tertiary-color);
  }
}

@media screen and (min-width: 769px) {
  .facilities{
    padding-top: 10rem;
  
    h2{
      font-size: 4rem;
      margin-bottom: 4.6rem;
    
      .logo{
        width: 22.9rem;
      }

      .decoration_left{
        width: 3.6rem;
        margin-right: 1.5rem;
      }
      
      .decoration_right{
        width: 3.6rem;
        margin-left: 1.5rem;
      }  
    
      span{
        font-size: 2.8rem;
      }
    }
  
    & > ul{
      max-width: 120rem;
      margin: 0 auto;
    }
  
    .title{
      display: flex;
      align-items: flex-end;
      margin-bottom: 2.5rem;
  
      h3{
        font-size: 1.6rem;
        order: 2;
        margin-left: 2rem;
        padding-bottom: 1rem;
    
        & + span{
          font-size: 4.8rem;
          line-height: 1;
          order: 1;
        }
      }
    }

    .spaceListWrapper{
      display: flex;
      align-items: flex-end;
    }
  
    .spaceListWrapper > img:last-child{
        margin: 0 0 0 auto;
    }
  
    .spaceList{
      & > li{
        flex-direction: row;
        gap: 5.5rem;
        margin-bottom: 2.5rem;
      }
  
      .facilitiesImage{
        width: 40rem;
        height: 27rem;
        object-fit: cover;
      }
      
      h4{
        font-size: 2.4rem;
    
        &::before{
          width: 1.5rem;
          height: 1.5rem;
        }
      }  
    }
    
    .primary, .secondary, .tertiary{
      padding: 5rem 3.5rem 5rem 7rem;
      border-radius: 3rem;
      margin-bottom: 4rem;
    }
  
    .primary .spaceListWrapper > img{
      max-width: 15.8rem;
      width: 100%;
    }

    .secondary .spaceListWrapper > img{
      max-width: 20.8rem;
      width: 100%;
      margin-bottom: -3.7rem;
    }

    .tertiary .spaceListWrapper > img{
      max-width: 20.4rem;
      width: 100%;
      margin-bottom: -2.4rem;
    }
  }
}

@media screen and (min-width: 1000px) {
  .facilities{
    & > ul{
      max-width: 106rem;
    }
  }
}


/*------------------------
* disclaimer
------------------------*/
.disclaimer{
  position: relative;
  background-color: var(--gray-color);
  padding: 16.5rem 3.8rem 4rem;
  margin-top: -14.8rem;
  z-index: 1;

  h2{
    font-size: 1.6rem;
    font-weight: var(--font-bold);
    margin-bottom: 2rem;

    &::before{
      display: inline-block;
      content: '';
      width: 1.2rem;
      height: 1.2rem;
      border-radius: 50%;
      background-color: var(--primary-color);
      margin-right: .7rem;
    }
  }

  h3{
    font-weight: var(--font-bold);
    margin-bottom: .4rem;
    padding-top: 1.5rem;

    &:first-of-type{
      padding-top: 0;
    }

    li{
      font-size: 1.4rem;
    }
  }
}

@media screen and (min-width: 769px) {
  .disclaimer{
    & > div{
      max-width: 90.8rem;
      width: 100%;
      margin: 0 auto;
    }
  
    h2{
      font-size: 2.4rem;
      margin-bottom: 3rem;
  
      &::before{
        width: 1.5rem;
        height: 1.5rem;
      }
    }
  
    h3{
      font-size: max(1.4rem, 14px);
      }

    li{
      font-size: max(1.4rem, 14px);
    }
  }
}


/*------------------------
* flow
------------------------*/
section.flow{
  padding: 5rem 3.5rem;
}

.flow{
  .step{
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 3rem;
  
  
    li{
      position: relative;
      display: flex;
      align-items: center;
      gap: 1.6rem;
  
      &:last-of-type{
        .step_icon::before{
          display: none;
        }
      }
  
      .step_icon{
        position: relative;
        display: block;
        flex: 0 0 6.9rem;
  
        img{
          position: relative;
          width: 100%;
          height: 6.9rem;
          z-index: 1;
        }
  
        &::before{
          position: absolute;
          content: '';
          top: 0;
          left: 50%;
          width: 1px;
          height: calc(100% + 5rem);
          background-color: var(--text-color);
        }
      }
    }
  
    .stepNo{
      font-size: 2rem;
      font-family: var(--font-e);
      font-weight: var(--font-semibold);
    }
  
    .stepText{
      font-weight: var(--font-bold);
    }
  }  
}

.badge{
  position: absolute;
  top: 0;
  right: 0;
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1;
  border-radius: 1rem;
  background-color: var(--primary-color);
  padding: .8rem;
}

@media screen and (min-width: 769px) {
  section.flow{
    padding: 7rem 3.5rem 8rem;
    background-image: url(../images/svg/bg_ohako.svg);
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: contain;
  }
  
  .flow{
    .step{
      gap: 3rem;
      max-width: 100%;
      padding-right: 80px;
      padding-left: 80px;
      margin: 5rem auto 0;
    
      li{
        gap: 7.2rem;
        
        .step_icon{
          flex: 0 0 11.6rem;

          img{
            height: 11.6rem;
          }
        
          &::after{
            position: absolute;
            content: '';
            top: 50%;
            transform: translateY(-50%);
            left: 100%;
            width: 6.3rem;
            height: 1px;
            border: dashed 1px var(--text-color);
          }
        }
      }
    
      .stepNo{
        font-size: max(2.4rem, 16px);
      }
    
      .stepText{
        font-size: max(2rem, 16px);
      }
    }  
  }
  
  .badge{
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.6rem;
    border-radius: 1.5rem;
    padding: 1.9rem 3.5rem;
  }  
}

@media screen and (min-width: 1000px) {
  .flow{
    .step{
      gap: 3rem;
      max-width: 90.8rem;
      padding: 0;
      margin: 5rem auto 0;
    
      li{
        gap: 7.2rem;
        
        .step_icon{
          flex: 0 0 11.6rem;
        
          &::after{
            position: absolute;
            content: '';
            top: 50%;
            transform: translateY(-50%);
            left: 100%;
            width: 6.3rem;
            height: 1px;
            border: dashed 1px var(--text-color);
          }
        }
      }
    
      .stepNo{
        font-size: max(2.4rem, 16px);
      }
    
      .stepText{
        font-size: max(2rem, 16px);
      }
    }  
  }
}


/*------------------------
* faq
------------------------*/
section.faq{
  padding-top: 5rem;
  padding-bottom: 5rem;
  background-color: var(--gray-color);
}

.faq{
  li{
    border: solid 2px var(--tertiary-color);
    border-radius: 1.5rem;
    background-color: var(--white-color);
    padding: 1.5rem 1.6rem;
    margin-bottom: 2rem;

    &:last-of-type{
      margin-bottom: 0;
    }
  }

  .question{
    position: relative;
    font-size: 1.6rem;
    font-weight: var(--font-bold);
    padding-top: .6rem;
    padding-left: 5rem;
    margin-bottom: .4rem;

    &::before{
      position: absolute;
      content: 'Q';
      top: 0;
      left: 0;
      font-size: 4rem;
      font-family: var(--font-e);
      font-weight: var(--font-semibold);
      color: var(--tertiary-color);
      line-height: 1;
    }
  }

  .answer{
    position: relative;
    padding-top: 0;
    padding-left: 5rem;
    margin-bottom: .4rem;
    margin-top: 2rem;

    &::before{
      position: absolute;
      content: 'A';
      top: 0;
      left: 0;
      font-size: 4rem;
      font-family: var(--font-e);
      font-weight: var(--font-semibold);
      color: #ED5B32;
      line-height: 1;
    }
  }
}

@media screen and (min-width: 769px) {
  section.faq{
    padding-top: 8rem;
    padding-bottom: 8rem;
  }
  
  .faq{
    ul{
      max-width: 106rem;
      width: 100%;
      margin: 0 auto;  
    }

    li{
      border-radius: 3rem;
      padding: 2rem 3.4rem;
      margin-bottom: 2.5rem;
    }

    .question{
      font-size: max(1.6rem, 16px);
    }

    .answer{
      position: relative;
      padding-top: 0rem;
      padding-left: 5rem;
      margin-bottom: .4rem;
      margin-top: 2rem;
  
      &::before{
        position: absolute;
        content: 'A';
        top: 50%;
        transform: translateY(-50%);
        left: 0;
        font-size: 4rem;
        font-family: var(--font-e);
        font-weight: var(--font-semibold);
        color: #ED5B32;
        line-height: 1;
      }
    }  
  }  
}


/*------------------------
* form
------------------------*/
.form{
  background-color: var(--primary-color);
  padding-top: 4rem;
  padding-bottom: 4rem;

  .formInner{
    background-color: var(--white-color);
    border-radius: 2rem;
    padding: 1.8rem 2.1rem;
  }

  .form_title{
    font-size: 2.4rem;
    font-weight: var(--font-bold);
    text-align: center;
    line-height: 1.2;
    margin-bottom: 1.3rem;

    img{
      width: 14.9rem;
    }
  }

  .lead{
    text-align: center;
  }

  .step{
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding-top: 3.2rem;
    margin-bottom: 1.8rem;
  }

  .stepTitle{
    display: flex;
    gap: 1rem;
    color: var(--tertiary-color);

    .step_icon{
      position: relative;
      display: block;
      flex: 0 0 4.6rem;
    }

    .stepItem{
      small{
        color: var(--text-color);
        padding-top: .6rem;
        display: block;      }
    }

    .stepNo{
      font-size: 2.4rem;
      font-family: var(--font-e);
      font-weight: var(--font-semibold);
      line-height: 1;
      margin-bottom: .4rem;
    }

    .stepText{
      font-size: 1.8rem;
      font-weight: var(--font-bold);
      line-height: 1;
    }
  }
}

.wpcf7-form-control-wrap{
  width: 100%;
  height: 100%;
  display: block;
  text-align: left;
}

/* error */
.screen-reader-response{
  color: red;
  margin-bottom: 2rem;
}

[id^="wpcf7-f10-o1-ve-"]{
  display: none;
}

[id^="wpcf7-f10-o1-ve-"] *{
  display: none;
}

.wpcf7-not-valid-tip{
  color: red;
}
/* /error */


.downloadList{
  background-color: var(--gray-color);
  padding: 2rem 1rem;

  li{
    text-decoration: underline;
    margin-bottom: 1rem;

    &:last-of-type{
      margin-bottom: 0;
    }
  }
}

form{
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

label, .label{
  display: block;
  margin-bottom: .5rem;
}

input[type="text"],
input[type="email"],
input[type="tel"]
{
  appearance: none;
  width: 100%;
  height: max(6.5rem, 65px);
  border-radius: .5rem;
  background-color: var(--gray-color);
  padding: 2.1rem 1.5rem;
  color: var(--text-color);

  &:focus{
    background-color: var(--gray-color);
  }

  &::placeholder{
    color: #C0C0C1;
  }
}

input[type="checkbox"]{
  position: relative;
  width: 2.5rem;
  height: 2.5rem;
  vertical-align: middle;
  background-color: var(--gray-color);
  transition: all .2s;

  & + span{
    padding-left: .8rem;
  }

  &:checked::after{
    appearance: auto !important;
    position: absolute;
    content: '';
    top: .2rem;
    left: .8rem;
    transform: rotate(50deg);
    width: .7rem;
    height: 1.6rem;
    border-right: 3px solid var(--text-color);
    border-bottom: 3px solid var(--text-color);
    z-index: 1;
    transition: all .2s;
  }
}


/* select */
/** Custom Select **/
.custom-select-wrapper {
  position: relative;
  display: inline-block;
  width: 100%;
  user-select: none;
}
  .custom-select-wrapper select {
    display: none;
  }
  .custom-select, 
  .custom-select-time {
    position: relative;
    display: inline-block;
    width: 100%;
    z-index: 100;
  }
    .custom-select-trigger, 
    .custom-select-trigger-time {
      position: relative;
      display: block;
      width: 100%;
      color: var(--text-color);
      background-color: var(--gray-color);
      border-radius: .5rem;
      padding: 2.1rem 1.5rem;
      cursor: pointer;
      transition: all .5s;

      &:hover{
        background-color: #EDD99A;
      }    
    }
      .custom-select-trigger-time:after, 
      .custom-select-trigger:after {
        position: absolute;
        content: '▼';
        top: 50%;
        transform: translateY(-50%);
        right: 1.5rem;
        color: var(--text-color);
      }
      .custom-select.opened .custom-select-trigger:after, 
      .custom-select.opened .custom-select-trigger-time:after, 
      .custom-select-time.opened .custom-select-trigger:after, 
      .custom-select-time.opened .custom-select-trigger-time:after {
        transform: translateY(-50%) rotate(180deg);
      }
  .custom-options {
    position: absolute;
    display: block;
    width: 100%;
    color: var(--text-color);
    background-color: var(--gray-color);
    border-radius: .5rem;
    /* padding: 2.1rem 1.5rem; */
    transition: all .5s;
  
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-15px);
  }
  .custom-select-time.opened .custom-options, 
  .custom-select.opened .custom-options {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
    transform: translateY(0);
  }
    .custom-options:before {
      position: absolute;
      content: '▼';
      top: 50%;
      transform: translateY(-50%);
      right: 1.5rem;
      color: var(--text-color);
  }
    .option-hover:before {
      background-color: #EDD99A;
    }
    .custom-option {
      position: relative;
      display: block;
      width: 100%;
      color: var(--text-color);
      background-color: var(--gray-color);
      border-radius: .5rem;
      padding: 2.1rem 1.5rem;
      transition: all .5s;
      cursor: pointer;
    }
    .custom-option:first-of-type {
      border-radius: .5rem .5rem 0 0;
    }
    .custom-option:last-of-type {
      border-bottom: 0;
      border-radius: 0 0 .5rem .5rem;
    }
    .custom-option:hover,
    .custom-option.selection {
      background: #EDD99A;
    }


/* firefoxでデフォルトのselectを消す */
select{
	-webkit-appearance:none;
	-moz-appearance:none;
	appearance:none;
	border-radius: 0;
	margin: 0;
	padding: 0;
	background: none transparent;
	vertical-align: middle;
	text-indent: .01px; /*Firefox用*/
	text-overflow: ""; /*Firefox用*/
}
/* /select */

.timeWrapper p:first-child{
  position: relative;
  z-index: 100;
}

.timeWrapper p:last-child{
  position: relative;
  z-index: 1;
}

.tilde{
  text-align: center;

  span{
    display: inline-block;
    transform: rotate(90deg);
  }
}

/* calendar */
.calendarLabel{
  
  label{
    margin-bottom: 0;
  }

  small{
    display: block;
    margin-bottom: 1rem;
  }
}

.dataWrapper{
  position: relative;
  appearance: none;
  width: 100%;
  height: max(6.5rem, 65px);

  &::after{
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: .5rem;
    background-color: var(--gray-color);
    padding: 1rem 1.5rem;
    color: var(--text-color);
    z-index: 0;
  }

  p{
    width: 100%;
    height: 100%;
  }
}

input[type="date"]{
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;
}
input[type="date"]::-webkit-date-and-time-value {
    text-align: left;
    padding: 2.1rem 1.5rem !important;
    line-height: max(2.4rem, 24px) !important;
}

input::-webkit-datetime-edit{
  text-align: left;
}

.date::-webkit-datetime-edit-fields-wrapper{
  appearance: none;
  padding: 2.1rem 1.5rem !important;
  line-height: max(2.4rem, 24px);
  /* line-height: max(6.5rem, 65px); */
}

.date::-webkit-calendar-picker-indicator {
  position: absolute;
  width: 100%;
  height: max(6.5rem, 65px);
  margin: 0;
  padding: 2.1rem 1.5rem;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
}
/* /calendar */

.privacyPolicy{
  width: 100%;
  height: 18rem;
  border-radius: .5rem;
  background-color: var(--gray-color);
  padding: 2.1rem 1.5rem;
  overflow-y: scroll;
}

/* iOSでのデフォルトスタイルをリセット */
input[type="submit"],
input[type="button"] {
  display: block;
  width: max(25rem, 250px);
  height: max(7rem, 70px);
  font-size: max(1.6rem, 16px);
  color: var(--text-color);
  line-height: 7rem;
  text-align: center;
  background-color: var(--primary-color);
  border-radius: 99rem;
  appearance: button;
  border: none;
  cursor: pointer;
  margin: 7rem auto 4.2rem;
  transition: all .5s;

  &:hover{
    background-color: var(--text-color);
    color: var(--white-color);
  }  
}

input[type="submit"]::-webkit-search-decoration,
input[type="button"]::-webkit-search-decoration {
  display: none;
}

input[type="submit"]:focus,
input[type="button"]:focus {
  outline-offset: -2px;
}

.formAfterText{
  font-weight: var(--font-bold);
  color: var(--tertiary-color);
  text-align: center;
}

@media screen and (min-width: 769px) {
  .form{
    padding-top: 8rem;
    padding-bottom: 8rem;
  
    .formInner{
      max-width: 106rem;
      width: 100%;
      border-radius: 3rem;
      padding: 9.3rem 18rem;
      margin: 0 auto;
    }
  
    .form_title{
      display: flex;
      justify-content: center;
      align-items: flex-end;
      gap: 1.6rem;
      font-size: 3.2rem;
      margin-bottom: 2rem;
  
      img{
        width: 22.4rem;
      }

      h2{
        padding-bottom: .4rem;
      }
    }
    
    .step{
      gap: 3rem;
      padding-top: 6rem;
      margin-bottom: 0;
    }
  
    .stepTitle{  
      .step_icon{
        flex: 0 0 6.2rem;

        img{
          width: 100%;
        }
      }

      .stepItem{
        display: flex;
        align-items: center;
        gap: 2.3rem;
      }
  
      .stepNo{
        font-size: 4rem;
      }
  
      .stepText{
        font-size: 2.4rem;
      }
    }
  }
  
  .downloadList{
    padding: 2.5rem 16.8rem;
  }
    
  label, .label{
    margin-bottom: 1rem;
  }
  
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input:-internal-autofill-selected {
    padding: 2.1rem 2.6rem;
  }
  
  /* select */    

  /* 時間選択の時 */

  .timeWrapper{
    display: grid;
    grid-template-columns: 1fr 4.8rem 1fr;
    align-items: center;
  }
  /* /select */

  .tilde{
  
  span{
      transform: rotate(0);
    }
  }  
  
  /* calendar */
  .calendarLabel{
    display: flex;
    align-items: center;
    margin-bottom: 1rem;

    label{
      margin-bottom: 0;
    }

    small{
      margin-left: 1rem;
      margin-bottom: 0;
    }
  }

  .dataWrapper{
    &::after{
      top: 50%;
      transform: translateY(-50%);
      padding: 2.1rem 2.6rem;
    }
  }
  /* /calendar */
  
  .privacyPolicy{
    height: 13rem;
    padding: 2.1rem 2.6rem;
  }
  
  /* iOSでのデフォルトスタイルをリセット */
  input[type="submit"],
  input[type="button"] {
    margin: 3rem auto 4.2rem;
  }
}


/*------------------------
* footer
------------------------*/
footer{
  height: 10rem;
  background-color: var(--primary-color);
  background-image: url(../images/png/mizuhomaru.png);
  background-position: 100% 100%;
  background-repeat: no-repeat;
  background-size: 30%;
  text-align: center;
  padding-top: 3.2rem;
  margin-top: -1px;

  img{
    width: 13.5rem;
  }

  span{
    display: block;
    font-size: 1rem;
    font-family: var(--font-e);
    font-weight: var(--font-bold);
  }
}

@media screen and (min-width: 769px) {
  footer{
    height: 15rem;
    background-position: 86% 100%;
    background-size: 13%;
    padding-top: 4.6rem;
  
    img{
      width: 21.9rem;
    }
  
    span{
      font-size: 1.2rem;
    }
  }
}