/*
Theme Name: matsuganedai-theme
Author: BLUE SEVEN
*/

@charset "utf-8";
/* CSS Document */

/*--------------------------------------------------------------
/* reset / base
---------------------------------------------------------------*/
*,
*::before,
*::after {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}
:root {
  --fs-page-title: clamp( 2rem, calc( 0.4571428571428571rem + 4.285714285714286vw ), 5.6rem );
  --fs-sec-title: clamp( 1.8rem, calc( 0.8571428571428571rem + 2.619047619047619vw ), 4rem );
  --fs-block-title: clamp( 1.6rem, calc( 1.2571428571428571rem + 0.9523809523809524vw ), 2.4rem );
  --fs-normal: clamp(1.4rem,calc(1.275rem + 0.3vw),1.6rem);
  --ff-gothic: 'Zen Maru Gothic', Meiryo, "メイリオ", YuGothic, sans-serif;
  --ff-english: 'Josefin Sans', sans-serif;
  --fc-base : #454948;
  --key-color: #4E9D9B;
  --accent-blue: #44BFDE;
  --pale-blue: #E5F4F1;
  --accent-pink: #EE8485;
  --pale-pink: #FFECE5;
  --accent-orange: #F49A00;
  --accent-green: #8FCC57;
  --pale-yellow: #FFFEE5;
}
html{
  font-size: 62.5%;
}
body {
  color: var(--fc-base);
  font-family: 'Zen Maru Gothic', Meiryo, "メイリオ", YuGothic, sans-serif;
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 2;
  letter-spacing: 0.04em;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: -ms-autohiding-scrollbar;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  margin:0;
}
h2 {
  font-size: min(calc(1.325rem + 0.9vw),2rem);
}
h3 {
  font-size: min(calc(1.3rem + 0.6vw),1.75rem);
}
h4 {
  font-size: min(calc(1.275rem + 0.3vw),1.5rem);
}
h5{
  font-size: 1.25rem;
}
h6{
  font-size: 1rem;
}
p {
  font-size:clamp(1.4rem,calc(1.275rem + 0.3vw),1.6rem);
  margin:0;
}
ol,
ul,
li,
dl,
dt,
dd,
th,
td,
figcaption{
  font-size: var(--fs-normal);
  margin: 0;
  padding: 0;
}
dt,
th{
  font-weight:700;
}
ol,
ul{
  list-style-type:none;
}

a{
  color: #008CFF;
  font-size: var(--fs-normal);
  text-decoration: none;
  transition-duration: 0.4s;
}
img {
  max-width:100%;
  height:auto;
}
table {
  border-collapse: collapse;
}
figure{
  margin:0;
}
.gmap {
  height: 0;
  overflow: hidden;
  padding-bottom: 56.25%;
  position: relative;
}
.gmap iframe {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
}

video {
  filter: drop-shadow(0px 0px rgba(0,0,0,0));
  outline: none;
  border: none;
}

/*--------------------------------------------------------------
# common-css
--------------------------------------------------------------*/
.no_scroll {
  overflow: hidden;
  height: 100vh;
}
main {
  padding-top: 7rem;
  @media (min-width:992px) {
    padding-top: 10rem;
  }
}
.page_visual {
  aspect-ratio: 24 / 7;
  margin-bottom: 4rem;
  mask: url(/assets/img/common/page_visual_mask.svg) no-repeat center / cover;
  -webkit-mask: url(/assets/img/common/page_visual_mask.svg) no-repeat center / cover;
}
.page_title{
  display: flex;
  color: #FFF;
  font-size: var(--fs-page-title);
  justify-content: center;
  align-items: center;
  text-align: center;
  height: 100%;
  filter: drop-shadow(0px 0px 6px rgba(0,0,0,0.4));
}
.section_title{
  color: var(--key-color);
  font-size: var(--fs-sec-title);
  text-align: center;
  line-height: 1.3;
  word-break: keep-all;
  overflow-wrap: anywhere;

  &::after {
    display: block;
    content: "";
    width: 5.6rem;
    height: 0.8rem;
    margin: 2rem auto 5.6rem;
    background: radial-gradient(circle at 92%, var(--accent-pink) 0.3rem, transparent 0.4rem), radial-gradient(circle at 50%, var(--key-color) 0.3rem, transparent 0.4rem), radial-gradient(circle at 8%, var(--accent-pink) 0.3rem, transparent 0.4rem);
  }
}
.page_intro {
  padding: 0;

  .inner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 17.6rem;
    padding: 3.5em 1em;
    background-color: var(--pale-yellow);
    background-image: url(/assets/img/common/icon_flower.png),
                url(/assets/img/common/icon_flower.png),
                url(/assets/img/common/icon_flower.png),
                url(/assets/img/common/icon_flower.png);
    background-repeat: no-repeat;
    background-position: right 95% top 13%,
                        right 84% top 32%,
                        left 88% top 77%,
                        left 97% top 90%;
    background-size: 8%;
    @media (min-width:768px) {
      background-position: right 95% top 21%,
                          right 90% top 56%,
                          left 93% top 51%,
                          left 97% top 82%;
      background-size: auto;
    }
    
    .text {
      @media (min-width:768px) {
        word-break: keep-all;
        overflow-wrap: anywhere;
        text-align: center;
      }
    }
  }
}
.column2_row_layout {
  @media (min-width: 768px) {
    display: flex;
    justify-content: space-between;
  }
  
  .img_wrap {
    margin-bottom: 1rem;
    @media (min-width: 768px) {
      width: 48%;
      margin-bottom: 0;
    }
  }
  .text_wrap {
    @media (min-width: 768px) {
      width: 48%;
    }
  }
  + .column2_row_layout {
    margin-top: 3.2rem;
  }
  &.reverse {
    @media (min-width: 768px) {
      flex-direction: row-reverse;
    }
  }
}
.column2_box_layout {
  @media (min-width: 768px) {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  
  .item {
    margin-bottom: 5.6rem;
    @media (min-width: 768px) {
      display: flex;
      flex-direction: column;
      width: 48%;
    }
    .img_wrap {
      margin-bottom: 1rem;

      & img {
        width: 100%;
      }
    }
    .text {
      margin: 1em 0;
    }
    .btn_wrap {
      margin: auto auto 0;
    }
  }
}
.img_wrap img {
  border-radius: 1.6rem;
}
.block_title{
  font-size: var(--fs-block-title);
}
ul.mark_dotted li {
  text-indent: -1em;
  padding-left: 1em;
  
  &::before {
    content: "・";
  }
}
ul.mark_kome li::before {
  content: "※";
}
ul.mark_red li::before {
  display: inline-block;
  content: "●";
  color: var(--accent-pink);
  margin-right: 0.5em;
}
ul.mark_blue li::before {
  display: inline-block;
  content: "";
  color: var(--key-color);
  flex-shrink: 0;
  width: 2em;
  height: 2em;
  background-image: radial-gradient(var(--key-color) 20%, transparent 25%);
}
.dl_list {
  display: flex;
  padding-bottom: 1em;
  gap: 0 2em;
  @media (min-width:768px) {
    gap: 0;
  }

  > dt {
    flex-shrink: 0;
    padding-left: 1em;
  }
  + .dl_list {
    margin-top: 1em;
  }
}
.link a{
  font-weight:700;
}
.btn_wrap {
  .btn {
    display: inline-block;
    font-weight:700;
    color: #FFF;
    text-align: center;
    min-width: 30rem;
    padding: 1em 0.5em;
    background: var(--key-color);
    border: 0.2rem solid var(--key-color);
    border-radius: 999rem;
    position: relative;

    &::after {
      display: block;
      content: "";
      width: 1em;
      height: 1em;
      background-color: currentColor;
      mask: url(/assets/img/common/icon_arrow.svg) no-repeat center / contain;
      -webkit-mask: url(/assets/img/common/icon_arrow.svg) no-repeat center / contain;
      position: absolute;
      top: 50%;
      right: 1em;
      transform: translateY(-50%);
    }

    &:hover {
      color: var(--key-color);
      background: #FFF;
    }
  }
}
.inline_block {
  display: inline-block
}
.pc_br {
  display: none;
  @media (min-width:768px) {
    display: block;
  }
}
.grecaptcha-badge {
  display: none;
}
/*--------------------------------------------------------------
# base-layout
--------------------------------------------------------------*/
.container{
  width: min(95%,1000px);
  margin-right: auto;
  margin-left: auto;
}
section {
  padding: 6rem 0;
  @media (min-width:768px) {
    padding: 8rem 0;
  }
}

/*--------------------------------------------------------------
# header
--------------------------------------------------------------*/
header {
  width: 100%;
  height: 7rem;
  background: #FFF;
  position: fixed;
  z-index: 9999;
  @media (min-width:992px) {
    height: 10rem;
  }
}
header .inner{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:center;
  width: 95%;
  height: 100%;
  margin: 0 auto;
  gap: 5rem;
}
header .logo{
  width: min(70%,24rem);
}
header .gnav{
  display:none;
}
.hamburger {
  align-self: center;

  & summary {
    display: block;
    list-style: none;
    height: 0.5rem;
    width: 4.4rem;
    background: var(--fc-base);
    position: relative;
    top: 50%;
    transition: 0.4s all ease;
    cursor: pointer;

    &::before,
    &::after {
      content: '';
      display: block;
      height: 0.5rem;
      width: 4.4rem;
      background-color: var(--fc-base);
      position: absolute;
      z-index: 3;
      transition: 0.4s all ease;
    }
    &::before {
      top: -0.85rem;
    }
    &::after {
      bottom: -0.95rem;
    }
    & span {
      display: none;
    }
  }
  #sp_nav_list {
    display: flex;
    flex-wrap: wrap;
    width: 100vw;
    height: calc(100svh - 7rem);
    /*padding-bottom: 6rem;*/
    background: #FFF;
    transition: all 0.6s;
    position: absolute;
    top: 7rem;
    right: 0;
    z-index: 9999;

    & li {
      width: 50%;
      border-top: 1px solid var(--key-color);
      transition: .4s all;

      &:nth-child(even) {
        border-left: 1px solid var(--key-color);
      }
      &:nth-child(13) {
        border-bottom: 1px solid var(--key-color);
      }
      &:nth-child(14) {
        border-bottom: 1px solid var(--key-color);
      }
      & a {
        display: flex;
        color: var(--key-color);
        text-decoration :none;
        justify-content: center;
        align-items: center;
        height: 100%;
        padding: .7em;
      }
    }
  }
  &[open] {
    & summary {
      background: transparent;

      &::before {
        top: 0;
        transform: rotate(45deg);
      }
      &::after {
        bottom: 0;
        transform: rotate(-45deg);
      }
    }
  }
}
.cv_btn_list {
  display: flex;
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 999;
  @media (min-width:992px) {
    display: block;
    width: fit-content;
    top: 13rem;
    bottom: auto;
    left: auto;
    right: 0;
  }

  .cv_btn {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.3;
    width: 50%;
    border-top: 0.2rem solid #fff;
    @media (min-width:992px) {
      writing-mode: vertical-rl;
      text-orientation: upright;
      width: min(calc(100vw * 0.05),8.3rem);
      margin-bottom: 1em;
      border: 0.4rem solid #fff;
      border-top-left-radius: 2.4rem;
      border-bottom-left-radius: 2.4rem;
    }

    & a {
      display: flex;
      color: #fff;
      font-size: clamp( 1.4rem, calc( 1.1428571428571429rem + 0.7142857142857143vw ), 2rem );
      justify-content: center;
      align-items: center;
      height: 4em;
      padding: 1.2em 0.6em;
      @media (min-width:992px) {
        height: 10em;
        padding: 0 0.6em;
      }

      &::after {
        display: inline-block;
        content: "";
        width: 1em;
        height: 1em;
        margin-left: 0.3em;
        background: #FFF;
        border-radius: 50%;
        mask: url(/assets/img/common/icon_circle_arrow.svg) no-repeat center / contain;
        -webkit-mask: url(/assets/img/common/icon_circle_arrow.svg) no-repeat center / contain;
        @media (min-width:992px) {
          margin-top: 0.3em;
          margin-left: 0;
        }
      }
    }
    &:nth-child(1) {
      background: var(--accent-orange);
      border-right: 0.2rem solid #fff;
      @media (min-width:992px) {
        border-right: none;
      }
    }
    &:nth-child(2) {
      background: #EC6D44;
    }
  }
}

@media (min-width: 992px) {
  .hamburger{
    display: none;
  }
  header .logo { 
    max-width: 29.8rem;
  }
  header .gnav {
    display:block;
    flex-grow: 1;
    max-width: 80rem;
  }
  header #nav_list {
    display:flex;
    flex-wrap:wrap;
    justify-content:right;
    list-style: none;
    margin: 0 50px 0 auto;
    gap: 5%;

    > li {
      font-weight: 700;
      text-align: center;
      position: relative;

      > button {
        line-height: 2;
        padding: 0;
      }
      > a {
        color: var(--fc-base);
        
        &::before {
          display: block;
          content:"";
          width: 3.2rem;
          height: 3.1rem;
          margin: 0 auto;
          background-repeat: no-repeat;
          background-size: contain;
        }
      }
      & button {
        color: var(--fc-base);
        font-family: inherit;
        font-size: inherit;
        font-weight: 700;
        background: none;
        border: none;
        cursor: pointer;

        &::before {
          display: block;
          content:"";
          width: 3.2rem;
          height: 3.1rem;
          margin: 0 auto;
          background-repeat: no-repeat;
          background-size: contain;
        }
      }
      &:nth-child(1) button::before {
        background-image: url(/assets/img/common/nav_icon_leaf.png);
      }
      &:nth-child(2) a::before {
        background-image: url(/assets/img/common/nav_icon_ribon.png);
      }
      &:nth-child(3) a::before {
        background-image: url(/assets/img/common/nav_icon_star.png);
      }
      &:nth-child(4) a::before {
        background-image: url(/assets/img/common/nav_icon_flower.png);
      }
      &:nth-child(5) a::before {
        background-image: url(/assets/img/common/nav_icon_onpu.png);
      }
      &:nth-child(6) a::before {
        background-image: url(/assets/img/common/nav_icon_ashiato.png);
      }
    }
  }
  #submenu_about {
    width: 8em;
    padding: 1em 1em 0;
    background: #FFF;
    position: absolute;
    left: -1.5em;
    
    > li {
      margin-bottom: 0.5em;

      + li {
        margin-top: 0.5em;
        padding-top: 0.5em;
        border-top: 1px solid rgba(0,0,0,0.4);
      }
      > a {
        color: var(--fc-base);
      }
    }
  }
  #submenu_about[hidden] {
    display: none;
  }
  header #nav_list > li:nth-child(1):hover #submenu_about {
    display: block;
  }
}
/*--------------------------------------------------------------
# footer
--------------------------------------------------------------*/
.contact_wrap {
  padding: 0 0 14rem;
  background: var(--pale-pink);
  position: relative;
  @media (min-width:1200px) {
    background: url(/assets/img/common/illust_ume_1.png) no-repeat top left / 14%, var(--pale-pink);
  }

  &::before {
    display: block;
    content: "";
    width: 100%;
    height: 7rem;
    background: var(--pale-pink);
    mask: url(/assets/img/common/contact_section_mask.png) no-repeat center / 900px 100%;
    -webkit-mask: url(/assets/img/common/contact_section_mask.png) no-repeat center / 900px 100%;
    position: absolute;
    bottom: 100%;
    left: 0;
    @media (min-width:768px) {
      height: 10.4rem;
      mask: url(/assets/img/common/contact_section_mask.png) no-repeat center / 1920px 100%;
      -webkit-mask: url(/assets/img/common/contact_section_mask.png) no-repeat center / 1920px 100%;
    }
  }
}
.contact_section_title {
  font-size: clamp( 2rem, calc( 1.1428571428571429rem + 2.380952380952381vw ), 4rem );
  text-align: center;
  line-height: 1;
  margin-bottom: 1em;
  position: relative;
  z-index: 3;

  &::before {
    display: block;
    content: "Contact";
    color: var(--accent-pink);
    font-family: var(--ff-english);
    font-size: clamp( 1.2rem, calc( 0.9428571428571429rem + 0.7142857142857143vw ), 1.8rem );
    text-align: center;
    margin-bottom: 1em;
  }
}
.contact_section_text {
  line-height: 1.5;
  @media (min-width:768px) {
    text-align: center;
    max-width: 53.5rem;
    margin: 0 auto 1em;
  }
}
.contact_wrap .content_block {
  display: flex;
  justify-content: space-between;
  margin-top: 5.6rem;
  
  .tel_btn {
    width: 48%;
    background: #FFF;
    border: 0.4rem solid var(--key-color);
    border-radius: 1em;
    @media (min-width:768px) {
      height: 20rem;
    }

    & a {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      height: 100%;
      padding: 0.5em;
    }
    .text {
      display: flex;
      color: var(--fc-base);
      font-size: clamp( 10px, calc( 7.428571428571429px + 0.7142857142857143vw ), 16px );
      justify-content: center;
      margin-bottom: 2rem;
      gap: 0.5em;
      align-items: center;

      &::before {
        content: "";
        width: 0.1rem;
        height: 1.1em;
        background: var(--key-color);
        transform: rotate(-30deg);
      }
      &::after {
        content: "";
        width: 0.1rem;
        height: 1.1em;
        background: var(--key-color);
        transform: rotate(30deg);
      }
    }
    .number {
      color: var(--fc-base);
      font-family: var(--ff-english);
      font-size: 2rem;
      line-height: 1;
      @media (min-width:768px) {
        display: flex;
        font-size: clamp( 4rem, calc( 2.577777777777778rem + 1.8518518518518516vw ), 4.8rem );
        align-items: center;
      }

      &::before {
        display: block;
        content: "";
        width: 4.8rem;
        height: 3.8rem;
        margin: 0 auto 1rem;
        background-color: var(--key-color);
        mask: url(/assets/img/common/icon_tel.svg) no-repeat center / contain;
        -webkit-mask: url(/assets/img/common/icon_tel.svg) no-repeat center / contain;
        @media (min-width:768px) {
          width: 1.2em;
          height: 1em;
          margin-bottom: 0;
        }
      }
    }
  }
  .mail_btn {
    width: 48%;
    background: var(--accent-orange);
    border: 0.4rem solid #FFF;
    border-radius: 1em;
    @media (min-width:768px) {
      height: 20rem;
    }
    & a {
      display: flex;
      flex-direction: column;
      color: #FFF;
      font-size: clamp( 1.4rem, calc( 1.1428571428571429rem + 0.7142857142857143vw ), 2rem );
      justify-content: center;
      align-items: center;
      text-align: center;
      height: 100%;
      padding: 0.5em;

      &::before {
        display: block;
        content: "";
        width: 4.8rem;
        height: 3.8rem;
        margin: 2rem auto 1rem;
        background: url(/assets/img/common/icon_mail.svg) no-repeat center / contain;
      }
    }
  }
}
.footer_wrap {
  padding: 7rem 0 4rem;
  background: var(--accent-green);
  position: relative;
  @media (min-width:768px) {
    padding-top: 12rem;
  }

  &::before {
    display: block;
    content: "";
    width: 100%;
    height: min(14vw,12.6rem);
    background: url(/assets/img/common/footer_illust.png) no-repeat center / auto 100%;
    position: absolute;
    bottom: 96%;
    left: 0;
  }
}
.footer_wrap .content_block {
  margin-bottom: 3rem;
  padding-bottom: 3rem;
  border-bottom: 0.1rem solid #FFF;
  @media (min-width:768px) {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5.6rem;
    padding-bottom: 5.6rem;
  }
}
.footer_wrap .address_wrap {
  color: #FFF;
  text-align: center;
  @media (min-width:768px) {
    text-align: left;
  }

  & address {
    font-style: normal;
    margin: 2.4rem 0;
  }
  .tel {
    display: flex;
    font-family: var(--ff-english);
    font-size: clamp( 2rem, calc( 1.4857142857142858rem + 1.4285714285714286vw ), 3.2rem );
    justify-content: center;
    align-items: center;
    margin-bottom: 1em;
    @media (min-width:768px) {
      justify-content: start;
    }

    &::before {
      display: inline-block;
      content: "";
      width: 1.2em;
      height: 1em;
      margin-right: 0.1em;
      background: url(/assets/img/common/icon_tel.svg) no-repeat center / contain;
    }
  }
  .btn {
    display: inline-flex;
    color: var(--accent-green);
    justify-content: center;
    align-items: center;
    background: #FFF;
    border-color: #FFF;

    &::before {
      display: inline-block;
      content: "";
      width: 1.2em;
      height: 1em;
      margin-right: 0.5em;
      background-color: currentColor;
      mask: url(/assets/img/common/icon_mail.svg) no-repeat center / contain;
      -webkit-mask: url(/assets/img/common/icon_mail.svg) no-repeat center / contain;
    }
    &::after {
      display: none;
    }

    &:hover {
      color: #FFF;
      background: var(--accent-green);
    }
  }
}
.footer_wrap .f_nav {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: space-between;
  max-width: 33rem;
  height: 15em;
  margin: 1em auto;
  gap: 0 3em;
  @media (min-width:768px) {
    margin: 0 0 0 auto;
  }

  & a {
    color: #FFF;
  }
}
.footer_wrap .copyright {
  color: #FFF;
  font-size: 1.2rem;
}

/*--------------------------------------------------------------
/* popup
---------------------------------------------------------------*/
.pum-overlay.pum-active,
.pum-overlay.pum-active .popmake.active {
    display: block !important;
}
.pum-title {
  background: var(--accent-pink)!important;
}
.pum-content .img_wrap {
  padding: 1.5rem;
  text-align: center;
}