@charset "UTF-8";

/* ##### カスタムプロパティ ##### */
:root {
    --color-001: #ffea00;
    --color-002: #f00;
    --color-003: #0c4734;
    --color-004: #000;
    --color-005: #fff;
    --color-006: #fff580;
    --heroSectionAspectRatio: 0.62792;
    --innerWidth: calc(100% - (var(--heroSectionAspectRatio) * 100vh * 2));
    --minWidth: 425px;
}

@media (max-width: 424px) {
    :root {
        --minWidth: 100%;
    }
}

/* ##### 全体の設定 ##### */
html,
body {
    font-family: "M PLUS 1", sans-serif;
    font-weight: 900;
    font-size: 16px;
    color: var(--color-003);
    font-style: normal;
    background-color: var(--color-001);

    font-optical-sizing: auto;
}

.section {
    margin-left: auto;
    margin-right: auto;
    position: relative;
    z-index: 2;
}

.inner {
    width: var(--innerWidth);
    min-width: var(--minWidth);
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.bgc-002 .inner {
    background-color: var(--color-002);
}

/* ##### header ##### */
header {
    width: var(--innerWidth);
    min-width: var(--minWidth);
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    z-index: 2;
}

header h1 a {
    display: block;
    padding: 1em 5em;
    border-bottom: 3px solid var(--color-004);
}

/* ##### hero-section ##### */
.hero-section {
    height: 100vh;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
}

.hero-section-item {
    -ms-flex-negative: 0;
    flex-shrink: 0;
}

.hero-section-img {
    width: calc((100vw - (var(--innerWidth))) / 2);
    height: 100%;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -ms-flex-negative: 0;
    flex-shrink: 0;
}

.hero-section-img img {
    -o-object-fit: contain;
    object-fit: contain;
    -o-object-position: center center;
    object-position: center center;
}

.hero-section-space {
    width: var(--innerWidth);
    min-width: var(--minWidth);
}

/* ##### btn ##### */
.btn {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    max-width: 90%;
    margin: 3em auto;
}

.btn a {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    min-width: 270px;
    display: block;
    padding: 0.5em 2em;
    font-size: 1.5em;
    text-align: center;
    border-radius: 3.5em;
}

.btn a:hover {
    opacity: 1;
}

.btn-01 a {
    color: var(--color-005);
    border: 3px solid var(--color-005);
    background-color: var(--color-002);
}

.btn-01 a:hover {
    color: var(--color-002);
    border: 3px solid var(--color-002);
    background-color: var(--color-005);
}

.btn-02 a {
    color: var(--color-002);
    border: 3px solid var(--color-005);
    background-color: var(--color-001);
}

.btn-02 a:hover {
    color: var(--color-002);
    border: 3px solid var(--color-002);
    background-color: var(--color-005);
}

.btn-instagram {
    width: calc(100% - 2em);
    margin: 1em auto;
}

.btn-instagram a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -ms-flex-align: center;
    padding: 1em;
    border-top: 5px solid var(--color-003);
    border-bottom: 5px solid var(--color-003);
}

.btn-instagram a .icon {
    width: 20%;
    -ms-flex-negative: 0;
    flex-shrink: 0;
}

.btn-instagram a .img {
    width: 10%;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    margin-left: 1em;
}

/* ##### list ##### */
.list-01 li {
    margin: 1em;
    border: 5px solid var(--color-003);
    position: relative;
}

.list-01 li .img {
    width: 100%;
    display: block;
    position: relative;
}

.list-01 li .img::after {
    content: "";
    display: block;
    padding-top: 55%;
}

.list-01 li .img img {
    width: 100%;
    height: 100% !important;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: 50% 50%;
    object-position: 50% 50%;
    position: absolute;
    top: 0;
    left: 0;
}

.list-01 li .catch {
    padding: 0.5em 1em;
    color: var(--color-001);
    line-height: 1.2;
    background-color: var(--color-003);
    position: absolute;
    top: -1px;
    left: -1px;
    z-index: 1;
}

.list-01 li .balloon {
    padding: 4em 5em;
    color: white;
    background-image: url("/upload/tenant_1/balloon_001_01.webp");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    position: absolute;
    bottom: 0;
}

.list-01 li:nth-of-type(odd) .balloon {
    -webkit-transform: translate(-15%, 15%);
    transform: translate(-15%, 15%);
    left: 0;
}

.list-01 li:nth-of-type(even) .balloon {
    -webkit-transform: translate(15%, 15%);
    transform: translate(15%, 15%);
    right: 0;
}

.list-02 {
    width: calc(100% - 2em);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 1em auto;

    gap: 1em;
}

.list-02 li {
    width: calc((100% - 1em) / 2);
}

.list-02 li .img {
    width: 100%;
    display: block;
    position: relative;
}

.list-02 li .img::after {
    content: "";
    display: block;
    padding-top: 100%;
}

.list-02 li .img img {
    width: 100%;
    height: 100% !important;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: 50% 50%;
    object-position: 50% 50%;
    position: absolute;
    top: 0;
    left: 0;
}

/* ##### swiper ##### */
.swiper-wrapper {
    height: auto;
}

/* ##### slider 01 ##### */
.swiper-slide {
    height: auto;
}

.swiper-01 {
    overflow: hidden;
    padding-bottom: 4em;
    position: relative;
}

.swiper-01 .slide-item {
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    margin: 0 1em;
}

.swiper-01 .slide-heading {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    width: 10em;
    min-width: 20%;
    max-width: 80%;
    border-top: 3px solid var(--color-003);
    border-left: 3px solid var(--color-003);
    border-right: 3px solid var(--color-003);
}

.swiper-01 .slide-element {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    padding: 0.75em;
    border: 3px solid var(--color-003);
}

.swiper-01 .slide-img .img {
    width: 100%;
    display: block;
    position: relative;
}

.swiper-01 .slide-img .img::after {
    content: "";
    display: block;
    padding-top: 65%;
}

.swiper-01 .slide-img .img img {
    width: 100%;
    height: 100% !important;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: 50% 50%;
    object-position: 50% 50%;
    position: absolute;
    top: 0;
    left: 0;
}

.swiper-01 .slide-title {
    margin: 0.75em 0;
    font-size: 110%;
}

.swiper-01 .slide-text {
    font-weight: 500;
    font-size: 95%;
    line-height: 1.4;
}

.swiper-01 [class^=swiper-button-] {
    width: 1.5em;
    height: 1.5em;
    top: auto;
    bottom: 1em;
}

.swiper-01 [class^=swiper-button-] svg path {
    fill: var(--color-003);
}

.swiper-01 .swiper-button-prev {
    left: auto;
    right: 3em;
}

.swiper-02 {
    overflow: hidden;
    padding-bottom: 4em;
    position: relative;
}

.swiper-02 .slide-item {
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    margin: 0 1em;
    padding: 1em 0.5em;
    border: 3px solid var(--color-003);
    background-color: var(--color-005);
}

.swiper-02 .slide-icon {
    width: 6em;
}

.swiper-02 .slide-icon img {
    width: 100%;
}

.swiper-02 .slide-title {
    width: 100%;
    margin: -0.25em 0 1em;
}

.swiper-02 .slide-title img {
    width: 100%;
}

.swiper-02 .slide-text {
    font-weight: 500;
    font-size: 90%;
}

.swiper-02 [class^=swiper-button-] {
    width: 1.5em;
    height: 1.5em;
    top: auto;
    bottom: 1em;
}

.swiper-02 [class^=swiper-button-] svg path {
    fill: var(--color-003);
}

.swiper-02 .swiper-button-prev {
    left: auto;
    right: 3em;
}

/* ##### img text ##### */
.img-text-wrap {
    position: relative;
}

.img-text-wrap .text {
    width: 55%;
    max-height: 25%;
    font-size: 115%;
    position: absolute;
    top: 22%;
    left: 22%;
    z-index: 1;
}

@media (max-width: 1440px) {
    .img-text-wrap .text {
        font-size: 104%;
    }
}

@media (max-width: 376px) {
    .img-text-wrap .text {
        font-size: 92%;
    }
}

/* ##### heading ##### */
.faq-box {
    padding: 1em;
}

.faq-heading {
    padding: 0.5em;
    font-weight: bold;
    font-size: 120%;
    color: var(--color-003);
    text-align: center;
    border-bottom: 3px solid var(--color-003);
}

.faq-list dt {
    padding: 1em 3.5em;
    position: relative;
}

.faq-list dt .q {
    position: absolute;
    top: 1em;
    left: 1em;
}

.faq-list dt::after {
    content: "";
    width: 1em;
    height: 1em;
    display: inline-block;
    border-bottom: 3px solid var(--color-003);
    border-right: 3px solid var(--color-003);
    -webkit-transition: 0.3s linear;
    transition: 0.3s linear;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    position: absolute;
    top: 1em;
    right: 1em;
}

.faq-list dd {
    padding: 0 1em;
}

/* ##### accordion ##### */
.js-toggle:hover {
    cursor: pointer;
}

.js-toggle.is-parent::after {
    -webkit-transform: rotate(225deg);
    transform: rotate(225deg);
    top: 1.5em;
}

.js-toggle+* {
    max-height: 0;
    overflow: hidden;
    -webkit-transition: max-height 0.4s ease-out, padding 0.4s ease-out;
    transition: max-height 0.4s ease-out, padding 0.4s ease-out;
}

/* ##### footer ##### */
footer {
    width: var(--innerWidth);
    min-width: var(--minWidth);
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    background-color: var(--color-006);
    position: relative;
    z-index: 2;
}

footer .footer-logo a {
    display: block;
    padding: 3em 6em;
}

.copy {
    padding: 2em;
    font-weight: normal;
    font-size: 12px;
    color: var(--color-004);
    text-align: center;
}

/* ##### 見たまま編集 ##### */
[data-element-id] .swiper-wrapper {
    overflow-x: scroll;
}

[data-element-id] .section,
[data-element-id] .hero-section-space,
[data-element-id] .inner,
[data-element-id] header,
[data-element-id] footer {
    width: 500px;
}

[data-element-id] .js-toggle+* {
    max-height: none;
}