@charset "UTF-8";

/* ==========================================================================
   Global
========================================================================== */
html {
   scroll-behavior: smooth;
   scroll-padding-top: 60px
}

body {
   color: #442C16;
   font-size: 16px;
   font-family: 'Noto Sans', 'Noto Sans JP', sans-serif;
   line-height: 1.7;
   text-align: left;
}

@media (max-width: 360px) {
   body {
      font-size: 14px;
   }
}

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

span {
   display: inline-block;
}

.conteiner {
   display: grid;
   grid-template-columns: 5fr 390px 3fr;
}

@media (max-width: 1024px) {
   .conteiner {
      grid-template-columns: 6fr 390px 1fr;
   }
}

@media (max-width: 599px) {
   .conteiner {
      grid-template-columns: 1fr 375px 1fr;
   }
}

@media (max-width: 390px) {
   .conteiner {
      grid-template-columns: 1fr;
   }
}


section {
   padding-top: 56px;
   padding-bottom: 56px;
}


section:nth-of-type(2n) {
   background-color: white;
}

.inner {
   padding-right: 40px;
   padding-left: 40px;
}

@media (max-width: 390px) {
   .inner {
      padding-right: 8%;
      padding-left: 8%;
   }
}

/* 文字 */
a {
   cursor: pointer;
}

h2 {
   max-width: 80%;
   margin-bottom: 32px;
   padding-top: 1rem;
   padding-bottom: 1rem;
   font-weight: 700;
   text-align: center;
   border: 0.8px solid #442c162f;
   border-left: none;
   background-color: white;
   box-shadow: 24px 8px 0px 0 #F3EAE5;
}

h3 {
   font-size: 18px;
   text-align: center;
   font-weight: 700;
}

/* 左のコンテナ */
.content-left {
   height: 100%;
   background-color: #F3EAE5;
}

.content-left img {
   width: 30vw;
   position: fixed;
   top: 36vh;
   left: 7vw;
}


@media (max-width: 700px) {
   .content-left img {
      left: 1.5vw;
   }
}

@media (max-width: 599px) {
   .content-left img {
      display: none;
   }
}

@media (max-width: 390px) {
   .content-left {
      display: none;
   }
}

/* 中央のコンテナ */
.content-center {
   position: relative;
   background-color: #F9F7F4;
   box-shadow: 0px 0px 18px 10px #442c1617;
   z-index: 3;
}

@media (max-width: 390px) {
   .content-center {
      max-width: 390px;
   }
}

/* 右のコンテナ */
.content-right {
   height: 100%;
   position: relative;
   background-color: #F3EAE5;
   z-index: 1;
}

.pc-nav {
   position: fixed;
   right: calc(((100vw - 390px)/12));
   top: 35vh;
}

.pc-nav li a {
   display: flex;
   align-items: center;
   font-size: 1.3vw;
}

.pc-nav li {
   margin-bottom: 1rem;
}

.pc-nav img {
   width: 23px;
   height: 23px;
   margin-right: 12px;
}

.pc-nav p.maru-text::before {
   content: "maru◎maru";
   font-size: 1vw;
}

.pc-nav .info {
   margin-top: 3.7vw;
   padding: 0.5vw 4.7vw;
   border-radius: 9999px;
   color: white;
   font-size: 1vw;
   background-color: #CEBE83;
   box-shadow: 0 3px 6px 3px #442c161f
}


@media (max-width: 1024px) {
   .pc-nav {
      display: none;
   }
}

@media (max-width: 390px) {
   .content-right {
      display: none;
   }
}


/* ==========================================================================
index.html
========================================================================== */

/* --‐‐‐‐▼ header ▼ ‐‐‐‐‐-- */
header {
   display: none;
   width: 100%;
   height: 60px;
   position: sticky;
   top: 0;
   z-index: 999;
   background-color: #ffffffeb;
}

@media (max-width: 1024px) {
   header {
      display: block;
   }
}

.header-inner {
   height: 60px;
   position: relative;
   display: flex;
   justify-content: space-between;
   align-items: center;
}

header h1 img {
   width: 108px;
}

.header-right .info:first-of-type {
   padding: 6px;
   border-radius: 5px;
   color: white;
   background-color: #CEBE83;
}

.header-right {
   display: flex;
   align-items: center;
}


header li a {
   display: flex;
   align-items: center;
   font-size: 24px;
}

header li {
   margin-bottom: 1rem;
}

header nav img {
   width: 23px;
   height: 23px;
   margin-right: 12px;
}

header p.maru-text::before {
   content: "maru◎maru";
   font-size: 18px;
}

header .sp-info {
   margin-top: 72px;
   padding: 8px 68px;
   border-radius: 9999px;
   color: white;
   font-size: 18px;
   background-color: #CEBE83;
}


/* ハンバーガーメニュー */
header nav.sp-menu {
   padding-top: 72px;
   position: absolute;
   top: 0px;
   left: 0;
   z-index: 5;
   width: 100%;
   height: 100vh;
   flex-direction: column;
   justify-content: start;
   align-items: center;
   background: #f3eae5f3;
   pointer-events: none;
   opacity: 0;
   transition: opacity 0.2s linear;
}

.sp-menu-inner {
   max-width: 252px;
   margin: auto;
   margin-top: 18vh;
}

header nav.sp-menu.is-active {
   pointer-events: auto;
   opacity: 1;
}

.ham-menu {
   display: inline-block;
   cursor: pointer;
   position: relative;
   z-index: 10;
   width: 44px;
   height: 44px;
}

.ham-inner {
   position: relative;
   margin: auto;
   width: 18px;
   height: 14px;
}

.ham-line {
   position: absolute;
   left: 0;
   transition: 0.3s;
   width: 18px;
   height: 4px;
   border-radius: 2px;
   transform: scaleY(0.5) translateY(2px);
   background-color: #442C16;
}

.line-top {
   top: 0;
}

.line-middle {
   top: calc(50% - 2px);
}

.line-bottom {
   bottom: 0;
}

.ham-menu-active .line-top {
   top: calc(50% - 2px);
   transform: rotate(45deg);
}

.ham-menu-active .line-middle {
   width: 0;
   height: 0;
}

.ham-menu-active .line-bottom {
   top: calc(50% - 2px);
   transform: rotate(-45deg);
}

/* --‐‐‐‐▲ header ▲ ‐‐‐‐‐-- */

/* --‐‐‐‐-▼ main ▼ ‐‐‐‐-‐-- */
/* トップへ戻るボタン */
.top-button {
   display: none;
   position: fixed;
   bottom: 40px;
   right: 16px;
   z-index: 3;
}

@media (max-width: 660px) {
   .top-button {
      display: block;
   }
}

/* プラン概要 */
section.about-753 {
   padding-top: 32px;
}

h2.about-text::before {
   content: "maru◎maru";
   font-size: 18px;
}


.about-753 p:nth-of-type(1) {
   font-weight: 700;
   text-align: center;
}

.about-753 p:nth-of-type(2) {
   margin-top: 32px;
   margin-bottom: 24px;
}

.point {
   display: flex;
   justify-content: space-between;
   align-items: center;
}

.point img {
   width: 64px;
}

.point-inner {
   display: flex;
   justify-content: center;
   align-items: center;
   width: 232px;
   height: 80px;
   margin-top: 16px;
   border-radius: 27px;
   background-color: white;
   line-height: 1.5;
   font-weight: 700;
   box-shadow: 0 3px 6px #442c161f
}

/* 開催場所 */
.place p:nth-of-type(1) {
   margin-bottom: 40px;
}

.place p:nth-of-type(2) {
   margin-bottom: 12px;
}

.place #map {
   max-width: 310px;
}

.place iframe {
   aspect-ratio: 4 / 3;
   object-fit: cover;
}

/* 当日までの流れ */
.flow h3 {
   border-bottom: solid 1px #442c1678;
   margin-bottom: 24px;
}


.flow .flow-text-flex {
   margin-top: 24px;
   display: flex;
}

.flow span.circle {
   width: 25px;
   height: 25px;
   display: block;
   position: relative;
   top: 3px;
   flex-shrink: 0;
   border-radius: 50%;
   background-color: #CEBE83;
}

.flow-text-left::after {
   display: block;
   position: relative;
   bottom: -2px;
   left: 48%;
   content: "";
   width: 0.5px;
   height: 100%;
   background-color: #CEBE83;
}

.flow dl {
   padding-left: 12px;
   font-size: 14px;
}

.flow dl dt {
   font-size: 16px;
}

.flow .reserve-flow {
   margin-bottom: 56px;
}

/* プラン内容 */
.plice {
   font-size: 24px;
   margin-bottom: 24px;
   font-weight: 700;
}

.plan ul {
   display: flex;
   justify-content: center;
   font-size: 12px;
   text-align: center;
}

.plan li {
   width: 80px;
   margin: 0 10px;
   line-height: 1.5;

}

.plan img {
   max-width: 72px;
   margin-bottom: 2px;
}

.plan .content-01 {
   margin-bottom: 32px;
}

.plan .content-02 {
   margin: 0 auto;
   margin-bottom: 56px;
}

.plan h3 {
   max-width: 50%;
   font-size: 16px;
   margin-bottom: 16px;
   padding-top: 0.3rem;
   padding-bottom: 0.3rem;
   background-color: #F3EAE5;
}

/* オプションメニュー */
.plan tr {
   margin-top: 12px;
   display: flex;
   justify-content: space-between;
   align-items: start;
}

.plan th {
   font-weight: 400;
}

@media(max-width: 560px) {
   .plan table {
      font-size: 14px;
   }

}


/* よくある質問 */
.faq dt {
   background: url(../img/icon_open.svg) no-repeat right 12px center/20px;
   display: flex;
   margin-bottom: 12px;
   padding: 12px;
   padding-right: 32px;
   cursor: pointer;
   border-radius: 5px;
   border: solid 1px #442c162f;
   background-color: white;
   box-shadow: 0 3px 6px #442c161f
}

.faq dl {
   font-size: 14px;
}

.faq dl dt.is-close {
   background: url(../img/icon_close.svg) no-repeat right 12px center/20px;
   background-color: white;
}

.faq dt::before {
   content: 'Q';
   margin-right: 0.5rem;
}

.faq dd {
   margin-bottom: 24px;
   padding: 0 8px;
   display: none;
}

/* slider */
.slider {
   margin: 0 auto;
   max-width: 303px;
   width: 100%;
}

.slider-img {
   margin: 0 8px;
   box-shadow: 0 3px 6px #442c1653
}

.slider-img img {
   width: 100%;
   height: auto;
}

.slick-dots li button:before {
   font-size: 12px;
   color: #442C16;
}

.slider>.slider-img:not(:first-child) {
   display: none;
}

/* --‐‐‐‐-▲ main ▲ ‐‐‐‐‐--- */

/* --‐‐‐‐▼ footer ▼ ‐‐‐‐‐-- */

footer.index {
   margin-top: 64px;
}

footer {
   padding-top: 114px;
   text-align: center;
   background-color: white;
}

footer ul {
   padding-left: 56px;
   text-align: left;
}

footer ul li {
   margin-bottom: 24px;
}

footer ul li:nth-of-type(n+3) {
   margin-bottom: 12px;
}

footer ul li:last-of-type {
   margin-top: 24px;
   margin-bottom: 48px;
}

.ext-link {
   margin-left: 0.5rem;
   padding-left: 0.5rem;
   border-left: solid 1px #442c162f;
}

footer li a {
   display: flex;
   align-items: baseline;
}

footer li img {
   margin-right: 4px;
}

footer p {
   margin-right: 4px;
}

footer .maru-text {
   display: flex;
}

footer .maru-text::before {
   content: 'maru◎maru';
}

img.logo-futur {
   width: 80px;
}

.copy {
   padding-bottom: 40px;
}

/* --‐‐‐‐▲ footer ▲ ‐‐‐‐‐-- */


/* ==========================================================================
provider.html
========================================================================== */

/* --‐‐‐‐-▼ main ▼ ‐‐‐‐-‐-- */

.about-ftur-wrapper {
   background-color: white;
}

img.decorat {
   margin-top: 40px;
}

section.about-futur {
   margin-top: -20px;
   padding-top: 0;
   background-color: #F9F7F4;
}

section.about-futur h1 {
   margin-bottom: 52px;
   font-size: 40px;
}

section.about-futur h1::after {
   content: 'フチュール';
   margin-left: 10px;
   font-size: 12px;
}

.about-futur h1+p {
   margin-bottom: 24px;
}

section.about-futur h3 {
   max-width: 50%;
   margin-top: 48px;
   margin-bottom: 24px;
   padding-top: 0.3rem;
   padding-bottom: 0.3rem;
   background-color: #F3EAE5;
   font-size: 16px;
}

section.about-futur .button {
   width: 240px;
   margin: 0 auto;
   margin-bottom: 12px;
   padding: 10px 0;
   display: flex;
   justify-content: center;
   align-items: baseline;
   border-radius: 9999px;
   background-color: white;
   box-shadow: 0 3px 6px #442c161f
}

section.about-futur .button img {
   margin: 6px;
}

section.about-futur p:last-child {
   margin-top: 12px;
}

section.contact {
   background-color: white;
}

.contact-link {
   display: flex;
   align-items: baseline;
   font-size: 16px;
   font-weight: 700;
}

@media (max-width: 360px) {
   .contact-link a {
      font-size: 14px;
   }
}

.contact-link a {
   margin-bottom: 24px;
   display: flex;
   align-items: center;
}

.contact-link .icon {
   width: 22px;
   margin-right: 6px;
}

@media (max-width: 360px) {
   .contact-link .icon {
      width: 20px;
   }
}

img.out_icon {
   margin-left: 6px;
}

p.contact_insta {
   font-size: 14px;
}

/* --‐‐‐‐-▲ main ▲ ‐‐‐‐‐--- */
/* --‐‐‐‐▼ footer ▼ ‐‐‐‐‐-- */
.provider footer {

   border-top: solid 1px #442c162f;
}

/* --‐‐‐‐▲ footer ▲ ‐‐‐‐‐-- */