/*!
Theme Name: ELULA
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: elula
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

ELULA is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments

--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/

/* Normalize
--------------------------------------------- */

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
	 ========================================================================== */
/*
  Josh's Custom CSS Reset
  https://www.joshwcomeau.com/css/custom-css-reset/
*/
*,
*::before,
*::after {
    box-sizing: border-box
}

* {
    margin: 0
}

html,
body {
    height: 100%
}

body {
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    height: auto;
}

img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%
}

input,
button,
textarea,
select {
    font: inherit
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
    overflow-wrap: break-word
}

#root,
#__next {
    isolation: isolate
}

















/* 汎用 */
a {
    text-decoration: none;
    color: #000;
}

ul {
    list-style-type: none;
}

.flex {
    display: flex;
}

.pc {
    display: none;
}



header {
    position: sticky;
    position: -webkit-sticky;
    top: 0;
    z-index: 100;
}

header .nav-bar__wrapper {
    width: 100%;
    height: 60px;
    background-color: #fff;
    display: flex;
    align-items: center;
    z-index: 1020;
}

header .nav-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 0 calc(20px + 28px) 0 10px;
}

header .nav-bar__left {
    height: 100%;
    display: flex;
    align-items: center;
}

header .nav-bar__right {
    height: 100%;
    display: flex;
    align-items: center;
}

header .nav-bar__right .hamburger-menu {
    height: 21px;
}




#hamburger {
    position: fixed;
    z-index: 1050;
}

#hamburger:before {
    content: "";
    display: inline-block;
    background-size: contain;
    width: 28px;
    height: 21px;
    background-image: url(../img/hamburger@2x.png);
    background-repeat: no-repeat;
    transition: background-image, height .5s ease-out;
}

nav {
    background-color: rgba(0, 0, 0, 0.8);
    position: fixed;
    padding: 12.5px 10px 0 10px;
    top: 0px;
    left: 0px;
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    z-index: 1040;
    opacity: 0;
    visibility: hidden;
    transition: all .5s ease-out;
    will-change: opacity, visibility;
    color: #fff;
    font: 300 15px 'Noto Sans JP', sans-serif;
    overflow-y: auto;
    overflow-y: scroll;
}

#nav-input:checked~nav {
    opacity: 1;
    visibility: visible;
}

#nav-input:checked~#hamburger:before {
    height: 28px;
    background-image: url(../img/close@2x.png);
}

.logo__wrapper {
    position: sticky;
    top: 0;
    width: 185.46px;
}

nav ul {
    padding: calc(35px + 66px) 10px 0 10px;
}

nav>ul>li {
    border-bottom: 1px solid #888;
}

nav .menu__contents a,
nav .menu__contents .accordion {
    display: block;
    padding: 17px 0;
    color: #fff;
    position: relative;
}

nav .menu__contents a::after,
nav .menu__contents .accordion::after {
    content: "";
    position: absolute;
    top: 0;
    right: 15px;
    bottom: 0;
    margin: auto 0;
    width: 8.4853px;
    height: 8.4853px;
    border-top: 1px solid #A89660;
    border-right: 1px solid #A89660;
    transform: rotate(45deg);
}

nav .accordion-menu {
    padding: 0 0 0 20px;
    display: block;
}

nav .accordion-menu a {
    position: relative;
    display: inline-block;
    color: #fff;
    padding: 0 0 0 23px;
    vertical-align: middle;
    text-decoration: none;
    font-size: 15px;
    width: 100%;
}

nav .accordion-menu a::before,
nav .accordion-menu a::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    vertical-align: middle;
}

nav .accordion-menu a::before {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #A89660;
}

nav .accordion-menu a::after {
    left: 5px;
    width: 4.2426px;
    height: 4.2426px;
    border-top: 1px solid #fff;
    border-right: 1px solid #fff;
    transform: rotate(45deg);
}

#acd-check01:checked~ul {
    display: block;
}

nav li>ul>li>div {
    gap: 8px;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: flex-end;
}

nav li>ul>li {
    margin-bottom: 17px;
}

nav li>ul>li>div>img {
    width: 15px;
    height: 15px;
}

nav input {
    display: none;
}

.acd-label {
    display: block;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.nav-hidden {
    display: none;
}



.breadcrumb-list__wrapper {
    width: 100%;
    height: 34px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    background-color: #F7F6F4;
    padding-left: 12px;
    font: 300 12px 'Noto Sans JP', sans-serif;
    margin-bottom: 30px;
}

.page-name__wrapper {
    padding: 0 0 11px 15px;
    margin-bottom: 30px;
}

.page-name {
    font: 300 24px 'Noto Serif JP', serif;
    position: relative;
    line-height: 32px;
}

.page-name::after {
    content: "";
    width: 48px;
    height: 2px;
    display: inline-block;
    background-color: #A89660;
    position: absolute;
    bottom: -11px;
    left: 0px;
}




.main-photo__wrapper {
    height: 280px;
    margin-bottom: 40px;
    background-size: cover;
    background-position: center;
}

.main-text__wrapper {
    padding: 0 15px;
    margin-bottom: 73px;
}

.big-text__wrapper {
    margin-bottom: 32px;
}

.big-text {
    font: 300 22px 'Noto Serif JP', serif;
    line-height: 36px;
}

.small-text {
    font: 300 15px 'Noto Sans JP', sans-serif;
    line-height: 20px;
}




.recommend .img__wrapper {
    width: 100%;
    height: 180px;
    background-size: cover;
    background-position: center;
}

.recommend .text__wrapper {
    background-color: #F7F6F4;
    padding: 30px 15px;
}

.recommend .text__wrapper .text__container {
    background-color: #fff;
    padding: 30px 20px;
    text-align: center;
    max-width: 850px;
    margin: 0 auto;
}

.recommend .text__wrapper .text__container h3 {
    font: 500 16px 'Noto Sans JP', sans-serif;
    text-align: center;
    position: relative;
    margin-bottom: 28px;
    display: inline-block;
}

.recommend .text__wrapper .text__container h3::before {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    top: 0;
    bottom: 0;
    left: -14px;
    margin: auto 0;
    background-color: #A89660;
}

.recommend .text__wrapper .text__container h3::after {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    top: 0;
    right: -14px;
    bottom: 0;
    margin: auto 0;
    background-color: #A89660;
}

.recommend .text__wrapper .text__container p {
    font: 300 15px 'Noto Sans JP', sans-serif;
    text-align: start;
    margin: 0 auto 6px auto;
    padding-left: 28px;
    position: relative;
    max-width: 470px;
}

.recommend .text__wrapper .text__container p::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    background: url('../img/check@2x.png') no-repeat;
    background-size: contain;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto 8px auto 0;
}




.benefits .img__wrapper {
    width: 100%;
    height: 180px;
    background-size: cover;
    background-position: center;
}

.benefits .benefit {
    padding: 42px 15px 0 15px;
}

.benefits .benefit h3 {
    text-align: center;
    font: 400 22px 'Noto Serif JP', serif;
    margin-bottom: 22px;
}

.benefits .benefit .circles {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    font: 300 16px 'Noto Serif JP', serif;
    margin: 0 auto 60px auto;
    max-width: 556px;
}

.benefits .benefit .circles div {
    width: 127px;
    height: 127px;
    border: 1px solid #A89660;
    border-radius: 50%;
    text-align: center;
    position: relative;
}

.benefits .benefit .circles div p {
    color: #A89660;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
}

.benefits .benefit .circles div p span {
    font-size: 14px;
}




.link-button__wrapper {
    margin: 0 auto;
    text-align: center;
    background-color: #000;
    margin-bottom: 80px;
    max-width: 345px;
}

.link-button__wrapper a {
    display: block;
    padding: 17px 25px;
    color: #fff;
    position: relative;
}

.link-button__wrapper a::after {
    content: "";
    position: absolute;
    top: 0;
    right: 15px;
    bottom: 0;
    margin: auto 0;
    width: 8.4853px;
    height: 8.4853px;
    border-top: 1px solid #A89660;
    border-right: 1px solid #A89660;
    transform: rotate(45deg);
}




.about {
    display: flex;
    flex-direction: column;
    margin-bottom: 80px;
}

.about__logo__wrapper {
    width: 291.47px;
    margin: 0 auto 45px auto;
    text-align: center;
}

.sns {
    text-align: center;
    margin: 0 auto 50px auto;
    gap: 16px;
    flex-direction: column;
}

.sns p {
    font-size: 16px;
    line-height: 21px;
}

.sns ul {
    /* width: 106px; */
    flex-direction: row;
    gap: 16px;
    padding: 0px;
}

.sns li {
    width: 24px;
    height: 24px;
}

.contact {
    text-align: center;
    margin-bottom: 48px;
}

.contact .phone {
    font: 400 30px 'Noto Serif JP', serif;
}

.contact .opening {
    font: 300 12px "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
    line-height: 16px;
}

.address {
    margin: 0 auto 27px auto;
    font: 300 15px "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
    gap: 4vw;
    line-height: 19px;
}




.top-button {
    position: fixed;
    bottom: 76px;
    right: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    background: #fff;
    border-radius: 50%;
    border: 1px solid #7F7F7F;
    z-index: 1020;
}

.top-button .arrow {
    width: 8.4853px;
    height: 8.4853px;
    border-top: 1px solid #7F7F7F;
    border-right: 1px solid #7F7F7F;
    transform: rotate(-45deg);
    margin-top: 5px;
}

.contact-button__wrapper {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 56px;
    background-color: #000;
    z-index: 1020;
}

.contact-button__wrapper a {
    display: block;
    padding: 16.235px 0;
}

.contact-button__wrapper p {
    color: #fff;
    font: 300 15px 'Noto Sans JP', sans-serif;
    text-align: center;
}

.contact-button__wrapper p::before {
    content: "";
    display: inline-block;
    width: 11.08px;
    height: 20px;
    background-image: url(../img/smart-phone.png);
    background-position: center;
    background-size: contain;
    vertical-align: middle;
    position: relative;
    top: -1px;
    right: 10px;
    background-repeat: no-repeat;
}




footer div {
    text-align: center;
    color: #fff;
    background-color: #000;
    padding: 17.5px 0;
}

footer p {
    font: 300 10px "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
}




@media only screen and (min-width: 1025px) {
    header {
        position: unset;
    }

    .sp.nav-bar__wrapper {
        display: none !important;
    }

    .sp.contact-button__wrapper {
        display: none;
    }

    .pc-nav {
        display: block;
        position: relative;
    }

    .pc-nav__top {
        justify-content: space-between;
        flex-direction: row;
        margin-bottom: 26px;
    }

    .pc .top-logo__wrapper {
        padding: 16px 0 0 16px;
    }

    .pc .top-logo__wrapper img {
        width: 212.12px;
        height: 40px;
    }

    .contact-button__wrapper {
        position: static;
        width: 230px;
        height: 42px;
        background-color: #000;
        margin-bottom: 20px;
    }

    .contact-button__wrapper a {
        padding: 0;
    }

    .contact-button__wrapper p {
        line-height: 42px;
    }

    .pc-nav__bottom {
        justify-content: center;
        align-items: center;
        position: relative;
        margin-bottom: 20px;
    }

    .pc-nav__bottom ul {
        font: 300 14px 'Noto Sans JP', sans-serif;
        line-height: 19px;
        gap: 20px;
        padding-inline-start: 0;
    }

    .pc-nav__bottom .instagram__wrapper {
        position: absolute;
        right: 24px;
    }

    .pc-nav__bottom .instagram__wrapper {
        width: 24px;
    }

    .top-button {
        bottom: 20px;
    }




    .breadcrumb-list__wrapper {
        padding-left: 20px;
        margin-bottom: 41px;
    }




    .page-name__wrapper {
        padding: 0 0 12px 50px;
        margin-bottom: 34px;
    }

    .page-name {
        font-size: 32px;
        line-height: 43px;
    }

    .page-name::after {
        width: 58px;
    }

    .main-photo__wrapper {
        height: 400px;
        margin-bottom: 80px;
        background-size: cover;
        background-position: center;
    }

    .main-text__wrapper {
        max-width: 676px;
        margin-right: auto;
        margin-left: auto;
        margin-bottom: 81px;
    }

    .big-text {
        font-size: 30px;
        line-height: 43px;
    }

    .big-text__wrapper {
        margin-bottom: 26px;
    }




    .link-button__wrapper {
        margin-bottom: 150px;
    }



    .about {
        flex-direction: column;
        gap: 55px;
        margin-bottom: 134px;
    }

    .about__logo__wrapper {
        width: unset;
        margin: 0;
    }

    .about .about__logo__wrapper img {
        width: 323.28px;
        height: 61px;
    }

    .sns {
        margin-bottom: 0px;
    }

    .contact {
        margin-bottom: 0;
    }

    .content .phone {
        font-size: 34px;
        line-height: 46px;
    }

    .contact .opening {
        font-size: 15px;
        line-height: 19px;
    }
}