@charset "UTF-8";

/* ================================================

COMMON.CSS
◼︎ 共通スタイル
◼︎ 共通パーツ設定
◼︎ 下層ページ用パーツ
◼︎ アニメーション
◼︎ 404ページ
◼︎ プライバシーポリシー

================================================ */

html {
    font-size: 62.5%;
    /* 16px = 10px */
    scroll-behavior: smooth;
    scrollbar-gutter: stable;
    overflow-x: clip;
}

body {
    font-size: var(--clamp-size);
    overflow-x: clip;
    font-family: var(--fontFamily-base);
    font-feature-settings: "palt";
    font-weight: var(--fontWeight-regular);
    line-height: 2;
    letter-spacing: 0.2em;
    color: var(--color-base);
    background: url(../img/common/bg_body.webp) repeat center/contain;
    -webkit-font-smoothing: subpixel-antialiased;
    -moz-osx-font-smoothing: unset;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    text-align: justify;
    font-optical-sizing: auto;
}

/* ········ loading ········ */
#loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(../img/common/bg_loading.jpg) repeat center/contain;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.6s ease;
}

/* ホームページの場合 */
body.home #loading .loading__logo img {
    width: clamp(80px, 10vw, 130px);
    height: auto;
    transition: opacity 0.5s ease;
}

/* ホームページ以外 */
body:not(.home) #loading .loading__logo {
    display: none;
}

/* ロゴのフェードアウト */
#loading.logo-fadeout .loading__logo img {
    opacity: 0;
}

#loading.fadeout {
    opacity: 0;
}

/* ········ layout ········ */
/* ヘッダー分下げる */
main {
    position: relative;
}

/* スクロールマージン */
*[id] {
    scroll-margin-top: var(--height-header);
}

/* ········ link ········ */
a {
    color: inherit;
    text-decoration: none;
    word-break: break-all;
    cursor: pointer;
    transition: filter 0.2s ease;
}

/* .btnクラスがついていないaタグのみ */
a:not(.btn):hover,
a:not(.btn):focus {
    color: #222222e2;
}

a[target=_blank] {
    text-decoration: none;
}

/* telリンクのスタイル */
a[href^="tel:"] {
    text-decoration: none;
}

/* PCはtelリンク無効 */
@media (width >=768px) {
    a[href^="tel:"] {
        pointer-events: none;
        cursor: default;
        text-decoration: none;
    }
}

/* ········ elements ········ */
picture {
    display: block;
    height: 100%;
}

button {
    color: var(--font-color);
}

img {
    max-width: 100%;
    height: 100%;
    object-fit: cover;
    vertical-align: bottom;
}

iframe {
    vertical-align: baseline;
    width: 100%
}


/* ········ 表示制御 ········ */
/* PCサイズ以上に表示 */
@media (width >=768px) {
    .pc {
        display: block;
    }

    .sp {
        display: none !important;
    }
}

/* PC以外に表示 */
@media (width < 768px) {
    .pc {
        display: none !important;
    }

    .sp {
        display: block !important;
    }
}

.nowrap {
    white-space: nowrap;
}

/* ------------------------------------------------
共通パーツ
------------------------------------------------ */

/* ········ flex ········ */
.flex {
    display: flex;
}

.flex-col {
    flex-direction: column;
}

.flex-rev {
    flex-direction: row-reverse;
}

.flex-col-rev {
    flex-direction: column-reverse;
}

@media (width < 768px) {
    .flex {
        flex-direction: column !important;
        align-items: center;
    }

    .flex>div {
        width: 100%;
    }
}

/* ········ container ········ */
.container {
    padding: var(--space-6xl) var(--padding-container);
    position: relative;
}

/* セクションのインナー幅の統一 */
.inner-xs {
    margin-inline: auto;
    max-width: var(--width-inner-xs);
}

.inner-s {
    margin-inline: auto;
    max-width: var(--width-inner-s);
}

.inner-m {
    margin-inline: auto;
    max-width: var(--width-inner-m);
}

.inner-l {
    margin-inline: auto;
    max-width: var(--width-inner-l);
}

.inner-xl {
    margin-inline: auto;
    max-width: var(--width-inner-xl);
}

.inner-2xl {
    margin-inline: auto;
    max-width: var(--width-inner-2xl);
}

.inner-3xl {
    margin-inline: auto;
    max-width: var(--width-inner-3xl);
}

.container,
.inner-xs,
.inner-s,
.inner-m,
.inner-l,
.inner-xl,
.inner-2xl {
    container-type: inline-size;
    container-name: content;
}


/* ================================================
下層ページ用パーツ
================================================ */

/* ········ 見出し ········ */
.page-header {
    padding: var(--space-lg) var(--padding-container) var(--space-xl);
}

.heading01 {
    font-size: var(--fontSize-3xl);
    font-weight: var(--fontWeight-medium);
    line-height: 1.5;
    letter-spacing: 0.16em;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-xs);
}

.heading01-center {
    align-items: center;
}

.heading01::after {
    content: attr(data-en);
    display: block;
    --min-size: 12;
    --max-size: 15;
    font-size: var(--clamp-size);
    color: var(--color-main);
    letter-spacing: 0.05em;
}

/* 縦文字の見出し */
.vertical {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-feature-settings: initial;
    font-variant-ligatures: none;
    /* 合字を無効化 */
    font-variant-numeric: normal;
    font-synthesis: none;
    /* フォント合成を無効 */
    text-align: center;
    white-space: normal;
}

/* ----------------------------------------
page-box のレイアウト
---------------------------------------- */

.page-box {
    display: flex;
    gap: var(--space-4xl);
}

/* ········ image ········ */
.page-img {
    flex: 1;
    aspect-ratio: 550/460;
    width: 100%;
}

.page-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ········ text ········ */
.page-text {
    flex: 1;
    margin-top: 3.9cqi;
}

.page-title {
    font-size: clamp(16px, 2cqi, 24px);
    line-height: 1.65;
    letter-spacing: 0.3em;
    margin-bottom: var(--space-3xl);
    position: relative;
}

.page-title::after {
    content: "";
    display: block;
    width: calc(100% + 2rem);
    height: 2px;
    background-color: #998A62;
    margin-top: var(--space-3xl);
    position: absolute;
    bottom: -0.5em;
    left: 0;
}

.page-desc {
    line-height: 2.25;
    font-size: clamp(14px, 1.5cqi, 18px);
}

/* ········ 偶数番目のレイアウト ········ */
.page-box-left {
    flex-direction: row-reverse;
}

.page-box-left .page-title {
    text-align: right;
}

.page-box-left .page-title::after {
    right: 0;
    left: unset;
}

/* ----------------------------------------
レスポンシブ
---------------------------------------- */

@media (width < 768px) {
    .page-box {
        flex-direction: column;
    }

    .page-box-left {
        flex-direction: column;
    }

    .page-text {
        width: 90%;
    }

    .page-title::after {
        width: calc(105% + 2rem + var(--padding-container));
    }

    /* ········ 奇数番目 ········ */
    .page-box:nth-of-type(1) .page-img {
        margin-right: calc(50% - 50vw);
        width: 95% !important;
        margin-left: auto;
    }

    .page-box:nth-of-type(1) .page-title {
        text-align: left;
        margin-right: calc(50% - 50vw);
        margin-left: 16px;
    }

    .page-box:nth-of-type(1) .page-title::after {
        left: -16px;
    }

    .page-box:nth-of-type(1) .page-desc {
        margin-left: 16px;
    }

    /* ········ 偶数番目 ········ */
    .page-box-left .page-img {
        margin-left: calc(50% - 50vw);
        width: 95% !important;
        margin-right: auto;
    }

    .page-box-left .page-text {
        margin-left: auto;
    }

    .page-box-left .page-title {
        text-align: right;
        margin-left: calc(50% - 50vw);
    }

    .page-box-left .page-title::after {
        /* right: -16px; */
        left: unset;
    }
}



/* ------------------------------------------------
矢印のスタイル
------------------------------------------------ */

/* ········ 基本のarrowクラス ········ */
.arrow {
    position: relative;
    display: inline-block;
    background-color: #9d9d9d;
    transition: all 0.3s ease-in-out;
}

.arrow::before {
    content: "";
    position: absolute;
    transition: all 0.3s ease-in-out;
}

/* ········ 横向きarrow（右・左共通） ········ */
.arrow-right,
.arrow-left {
    width: clamp(40px, 11vw, 65px);
    height: 0.5px;
    margin-top: 6.2px;
}


.arrow-right::before,
.arrow-left::before {
    top: calc(50% - 0.25px);
    width: clamp(8px, 3.96vw, 23px);
    height: 0.5px;
    background-color: #9d9d9d;
}

/* ········ 横右向き ········ */
.arrow-right::before {
    right: 0;
    transform: rotate(16deg);
    transform-origin: calc(100% - 0.25px) 50%;
}

/* ········ 横左向き ········ */
.arrow-left::before {
    left: 0;
    transform: rotate(-16deg);
    transform-origin: 0.25px 50%;
}

/* ········ 縦下向き ········ */
.arrow-bottom {
    width: 1px;
    height: clamp(180px, 34vw, 370px);
    margin-right: clamp(8px, 1.5vw, 24px);
    background-color: currentColor;
}

.arrow-bottom::before {
    bottom: 0;
    left: calc(50% - 0.5px);
    width: 1px;
    height: clamp(20px, 3.3vw, 54px);
    border-radius: 9999px;
    background-color: currentColor;
    transform: rotate(27deg);
    transform-origin: 50% calc(100% - 0.5px);
}

/* ········ hover ········ */
@media (pointer: fine) and (hover: hover) {

    .arrow:hover,
    .arrow::before:hover {
        background-color: #c1c1c1b6;
        transition: all 0.3s ease-in-out;
    }
}


/* ================================================
ANIMATION アニメーション
================================================ */

/* ········ jsスクロール禁止用のスタイル ········ */
body.no-scroll,
html.no-scroll {
    overflow: hidden !important;
}

/* ········ フェード ········ */
.fade {
    opacity: 0;
    filter: blur(.2rem);
}
.fadein {
  opacity: 0;
  transform: translateY(3rem);
}
/* gentle-text要素の初期状態 */
.write-text {
    opacity: 1;
    /* 要素は表示、中身の文字は個別に制御 */
}

@keyframes blink {

    0%,
    50% {
        opacity: 1;
    }

    51%,
    100% {
        opacity: 0;
    }
}

@keyframes BlurFadeIn {
    0% {
        opacity: 0;
        filter: blur(2px);
    }

    100% {
        opacity: 1;
        filter: blur(0);
    }
}

/* ········ 線が伸びるアニメーション ········ */
.line {
    /* color: #111; */
    position: relative;
    text-decoration: none;
    height: fit-content;
}

.line::before {
    background: #C4C2C2;
    top: 0;
    content: '';
    display: block;
    height: 1em;
    right: -0.5em;
    position: absolute;
    width: 1px;
    z-index: -1;
}

.line::after {
    background: #513939;
    top: 0.75em;
    content: '';
    display: block;
    height: 0.5em;
    right: -0.5em;
    position: absolute;
    transition: all .4s ease-in-out;
    width: 1px;
    z-index: 0;
}

.line:hover::after {
    height: calc(100% - 1em);
}

@media (width < 480px) {
    header .line {
        /* color: #111; */
        position: relative;
        text-decoration: none;
    }

    header .line::before {
        width: 0.75em;
        height: 1px;

        top: auto;
        bottom: -0.5em;
        left: 0;
    }

    header .line::after {
        top: auto;
        bottom: -0.5em;
        width: 0.25em;
        height: 1px;
        left: 0.75em;
    }

    header .line:hover::after {
        width: calc(100% - 1em);
        height: 1px;
    }
}

/* ================================================
404ページ/プライバシーポリシーページ
================================================ */
.error404 main,
.page-privacy main {
    margin-top: var(--height-header);
}
.error404__title,
.privacy__title {
    font-size: var(--fontSize-2xl);
    letter-spacing: 0.4em;
    margin-bottom: 1em;
    line-height: 1.5;
}

.error404__btn{
    margin-top: var(--space-3xl);
    text-align: right;
}

.privacy__content h2{
    font-size: var(--fontSize-lg);
    margin-bottom: 0.5em;
    line-height: 1.5;
    margin-top: 1em;
}

.privacy__content ul  {
    margin-top: 1em;
    margin-bottom: 1em;
}

.privacy__content ul li {
    margin-left: 2em;
    list-style: disc;
}

.privacy__content a{
    text-decoration: underline;
}

.privacy__info{
    margin-top: var(--space-3xl);
}