@charset "UTF-8";

/*
SP ～519px
tab 520px～959px
pc 960px～
*/

/* -----変数宣言----- */

:root {
    /* フォント */
    --font-Garamond: "Cormorant Garamond", serif;
    --font-ryo-mincho: "ryo-text-plusn", serif;
    --font-ryo-gothic: "ryo-gothic-plusn", sans-serif;

    /* フォントサイズ */
    --size-12px: 1.2rem;
    --size-14px: 1.4rem;
    --size-16px: 1.6rem;
    --size-18px: 1.8rem;
    --size-20px: 2rem;
    --size-24px: 2.4rem;
    --size-32px: 3.2rem;
    --size-40px: 4rem;

    /* カラー */
    --color-brown: #44392F;
    --color-white: #ffffff;
    --color-beige: #FCF8F1;
    --color-ac-beige: #f3ece2;

    /* 余白 */
    --gutter-8px: 8px;
    --gutter-14px: 14px;
    --gutter-16px: 16px;
    --gutter-24px: 24px;
    --gutter-32px: 32px;
    --gutter-40px: 40px;
    --gutter-48px: 48px;
    --gutter-60px: 60px;
    --gutter-80px: 80px;
    --gutter-120px: 120px;
    --gutter-160px: 160px;
}


/* -----共通設定----- */
html {
    font-size: 62.5%;
}

body {
    box-sizing: border-box;
    font-size: var(--size-14px);
    font-family: var(--font-ryo-gothic);
    line-height: 2;
    color: var(--color-brown);
}

a {
    text-decoration: none;
}

@media screen and (min-width:729px) {
    body {
        font-size: var(--size-16px);
    }
}

/* -----共通クラスの設定----- */

.section {
    background-color: var(--color-beige);
    background-image: url(../../img/back_texture.png);
    background-repeat: repeat;
    width: 100%;
    padding: 80px 0;
    overflow: hidden;
}

.center {
    padding: 0 var(--gutter-32px);
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.whiteback {
    margin-left: 16px;
    margin-right: 16px;
    background-color: var(--color-white);
}

.whiteback .center {
    padding: 0 var(--gutter-16px);
}


@media screen and (min-width:729px) {
    .section {
        padding: 160px 0;
    }

    .center {
        padding: 0 var(--gutter-60px);
        max-width: 1120px;
    }

    .point {
        margin: 0 16px;
    }

    .whiteback {
        max-width: 1232px;
        margin-left: auto;
        margin-right: auto;
    }

    .whiteback .center {
        padding: 0 60px;
    }
}

/* -----pageview----- */
.pageview {
    width: 100%;
    padding: var(--gutter-80px) 0;
    overflow: hidden;
    /* 背景画像 */
    background-image: url(../../img/about_main_image.jpg);
    background-color: rgba(189, 182, 174, 100%);
    background-size: cover;
    background-position: left;
    background-blend-mode: multiply;
    /* 文字 */
    color: var(--color-white);
}

.pageview_inner {
    width: 100%;
    padding: 0 var(--gutter-32px);
    margin-left: auto;
    margin-right: auto;
}

@media screen and (min-width:729px) {
    .pageview {
        padding: var(--gutter-160px) 0;
    }

    .pageview .title_wrap {
        margin-bottom: 0;
    }

    .pageview_inner {
        padding: 0 var(--gutter-60px);
        max-width: 1120px;
    }

    .pageview_contents_flex {
        display: flex;
        gap: var(--gutter-60px);
        justify-content: space-between;
    }

    .pageview_text {
        max-width: 630px;
    }
}

/* -----readcrumb----- */

.breadcrumb {
    display: flex;
    gap: var(--gutter-16px);
    align-items: center;
    margin-bottom: var(--gutter-40px);
    /* フォント */
    font-family: var(--font-Garamond);
    font-size: var(--size-18px);
    line-height: 1;
}

.breadcrumb a {
    transition: 0.5s;
}

.breadcrumb li.jp {
    /* フォント */
    font-family: var(--font-ryo-mincho);
    font-size: var(--size-14px);
}

.breadcrumb a:hover {
    opacity: 0.5;
}

@media screen and (min-width:729px) {
    .breadcrumb {
        margin-bottom: var(--gutter-60px);
        /* フォント */
        font-size: var(--size-20px);
    }

    .breadcrumb li.jp {
        /* フォント */
        font-family: var(--font-ryo-mincho);
        font-size: var(--size-16px);
    }
}

/* footerの上のbreadcrumb */
.footer_breadcrumb.section {
    padding: 0;
}


/* section_title */

.title_wrap {
    margin-bottom: var(--gutter-60px);
}

.title_wrap .section_title {
    /* フォント */
    font-family: var(--font-Garamond);
    font-weight: 500;
    font-size: var(--size-40px);
    line-height: 1;
    /* 余白など */
    margin-bottom: 14px;
}

.title_wrap .section_title_mini {
    font-family: var(--font-ryo-gothic);
    font-size: var(--size-12px);
    font-weight: 500;
    line-height: 1;
}

@media screen and (min-width:729px) {
    .title_wrap {
        margin-bottom: var(--gutter-80px);
    }

    .title_wrap .section_title {
        font-size: 48px;
    }

    .title_wrap .section_title_mini {
        font-size: var(--size-14px);
    }
}

/* page_section_title */
.page_title_wrap {
    margin-bottom: var(--gutter-60px);
    /* flex */
    display: flex;
    gap: var(--gutter-16px);
    align-items: end;
}

.page_title_wrap .page_section_title {
    /* フォント */
    font-family: var(--font-Garamond);
    font-weight: 500;
    font-size: var(--size-32px);
    line-height: 1;
}

.page_title_wrap .page_section_title_mini {
    font-family: var(--font-ryo-gothic);
    font-size: var(--size-12px);
    font-weight: 500;
    line-height: 2;
}

@media screen and (min-width:729px) {
    .page_title_wrap {
        margin-bottom: var(--gutter-80px);
    }

    .page_title_wrap .page_section_title {
        font-size: var(--size-40px);
    }
}


/* -----ボタンの設定----- */

/* ---button_mini--- */
.button_mini {
    transition: 0.5s;
    /* サイズ */
    padding-bottom: var(--gutter-16px);
    border-bottom: 1px solid var(--color-brown);
    margin-top: var(--gutter-40px);
    /* flex */
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* フォント */
    font-family: var(--font-Garamond), var(--font-ryo-mincho);
    font-size: var(--size-18px);
    font-weight: 500;
    line-height: 1;
}

.button_mini.jp {
    font-size: var(--size-16px);
}

.button_mini img {
    transition: 0.5s;
}

/* ミニボタンアニメーション */
.button_mini:hover {
    opacity: 0.5;
}

.button_mini:hover img {
    transform: translateX(3px);
}

@media screen and (min-width:729px) {
    .button_mini {
        margin-top: var(--gutter-60px);
        font-size: var(--size-20px);
    }

    .button_mini.jp {
        font-size: var(--size-18px);
    }
}


/* ---button--- */
.button {
    transition: 0.5s;
    position: relative;
    display: block;
    /* サイズなど */
    width: 253px;
    padding: 20px 0 20px;
    border: 1px solid var(--color-brown);
    border-radius: 50px;
    margin-top: var(--gutter-60px);
    /* フォント */
    font-family: var(--font-Garamond);
    font-size: var(--size-18px);
    line-height: 1;
    color: var(--color-brown);
    text-align: center;
}

.button::after {
    transition: 0.5s;
    position: absolute;
    right: -43px;
    top: 11px;
    content: url(../../img/icon_arron_big.svg);
}

/* ボタン白バージョン */

.button.white {
    border: 1px solid var(--color-white);
    color: var(--color-white);
}

.button.white::after {
    content: url(../../img/icon_arron_big_white.svg);
}

/* ボタンアニメーション */

.button:hover {
    opacity: 0.5;
}

.button.white:hover {
    opacity: 1;
    background-color: rgba(255, 255, 255, 0.3);
}

.button:hover.button::after {
    right: -63px;
}

@media screen and (min-width:729px) {
    .button {
        width: 313px;
        padding: 22px 0 22px;
        margin-top: var(--gutter-80px);
        margin-left: auto;
        font-size: var(--size-20px);
    }

    .button::after {
        top: 15px;
    }
}


/* -----アニメーション----- */


/* 焦点が合うアニメーション */
.blur {
    animation-name: blurAnime;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

@keyframes blurAnime {
    from {
        filter: blur(10px);
        transform: scale(1.02);
        opacity: 0;
    }

    to {
        filter: blur(0);
        transform: scale(1);
        opacity: 1;
    }
}

.blurTrigger {
    opacity: 0;
}

/* zoom */

.zoom img {
    transition: 0.8s ease;
}

.zoom img:hover {
    transform: scale(1.1);
}


/* -----header----- */

header {
    width: 100%;
    padding: 0px;
}

/* オンラインショップ */

/* header_online_pc */
.header_online_pc {
    /* 位置など */
    display: none;
}

@media screen and (min-width:729px) {
    .header_online_pc {
        transition: 0.5s;
        /* 位置 */
        position: fixed;
        z-index: 100;
        right: var(--gutter-60px);
        top: 50px;
        /* flex */
        display: flex;
        gap: var(--gutter-8px);
        align-items: center;
        /* サイズ */
        padding: var(--gutter-16px) var(--gutter-48px);
        border: 1px solid var(--color-white);
        border-radius: 50px;
        /* フォント */
        font-family: var(--font-Garamond);
        font-size: var(--size-20px);
        color: var(--color-white);
        line-height: 1;
    }

    .icon_wrap {
        width: 26px;
        height: 26px;
        position: relative;
    }

    .icon_wrap .icon_cart_white {
        position: absolute;
    }

    .icon_wrap .icon_cart {
        transition: 0.5s;
        position: absolute;
        opacity: 0;
        width: 26px;
    }

    /* カーソルを合わせた時 */
    .header_online_pc:hover {
        background-color: var(--color-white);
        /* フォント */
        color: var(--color-brown);
    }

    .header_online_pc:hover .icon_wrap .icon_cart {
        opacity: 1;
    }

    /* ヘッダーにblackが付いたら */
    header.black .header_online_pc {
        /* background-color: rgba(255, 255, 255, 0.3); */
        backdrop-filter: blur(5px);
        border: 1px solid var(--color-brown);
        /* フォント */
        color: var(--color-brown);
    }

    header.black .icon_wrap .icon_cart {
        opacity: 1;
    }
}


/* header_lp_box */

.header_lp_box {
    /* 位置 */
    position: fixed;
    z-index: 100;
    bottom: 0;
    /* サイズなど */
    width: 100%;
    height: 60px;
    /* flex */
    display: flex;
}

.header_lp_box li {
    width: 50%;
    background-color: var(--color-ac-beige);
}

.header_lp_box li:last-child {
    border-left: 1px solid rgba(189, 182, 174, 20%);
}

.header_online_lp,
.header_contact_lp {
    display: flex;
    gap: var(--gutter-8px);
    font-size: var(--size-18px);
    font-family: var(--font-Garamond);
    justify-content: center;
    line-height: 60px;
}

@media screen and (min-width:729px) {
    .header_lp_box {
        display: none;
    }
}

/* ハンバーガーメニュー */
header .hum_menu {
    position: fixed;
    z-index: 999;
    top: var(--gutter-8px);
    right: var(--gutter-32px);
    cursor: pointer;
    padding-top: 24px;
}

header .hum_menu::after {
    content: "Menu";
    font-family: var(--font-Garamond);
    font-size: var(--size-18px);
    color: var(--color-white);
    display: block;
    margin-top: 24px;
    text-align: center;
}

header .hum_menu .hum_menu_line::before,
header .hum_menu .hum_menu_line::after {
    content: "";
    display: block;
    height: 1px;
    width: 40px;
    background-color: var(--color-white);
    transition: 0.3s;
}

header .hum_menu .hum_menu_line::before {
    transform: translateY(6px);
}

header .hum_menu .hum_menu_line::after {
    transform: translateY(24px);
}

/* ヘッダーにonが付いたら */

header.on .hum_menu::after {
    content: "Close";
    color: var(--color-brown);
}

header.on .hum_menu .hum_menu_line::before {
    transform: translateY(6px) rotate(45deg);
    background-color: var(--color-brown);
}

header.on .hum_menu .hum_menu_line::after {
    transform: translateY(6px) rotate(-45deg);
    background-color: var(--color-brown);
}

/* ヘッダーにblackが付いたら */
header.black .hum_menu::after {
    color: var(--color-brown);
}

header.black .hum_menu .hum_menu_line::before,
header.black .hum_menu .hum_menu_line::after {
    background-color: var(--color-brown);
}

@media screen and (min-width:729px) {
    header .hum_menu {
        top: 30px;
        right: auto;
        left: var(--gutter-60px);
    }

    header .hum_menu::after {
        font-size: var(--size-20px);
        margin-top: var(--gutter-24px);
    }

    header .hum_menu .hum_menu_line::before,
    header .hum_menu .hum_menu_line::after {
        width: 60px;
    }
}

/* ナビゲーション */
header nav {
    opacity: 0;
    transition: 0.3s;
    visibility: hidden;
    /* 位置 */
    position: fixed;
    top: 0;
    /* サイズ */
    width: 100%;
    height: 100vh;
    padding: 0 var(--gutter-60px);
    background-color: var(--color-beige);
    background-image: url(../../img/back_texture.png);
    background-repeat: repeat;
    z-index: 900;
}

header .nav_back {
    opacity: 0;
    transition: 0.5s;
    visibility: hidden;
    /* サイズ */
    width: 100%;
    height: 100vh;
    backdrop-filter: blur(10px);
    /* 位置 */
    position: fixed;
    z-index: 800;

}

header .nav_inner {
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
    margin-top: var(--gutter-80px);
}

header nav img {
    width: 264px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: var(--gutter-24px);
}

header nav ul {
    line-height: 1;
    /* フォント */
    font-family: var(--font-Garamond);
    font-size: var(--size-20px);
    border-top: 1px solid var(--color-brown);
    /* サイズ */
    border-bottom: 1px solid var(--color-brown);
}

header nav ul li:first-child {
    margin-top: var(--gutter-32px);
}

header nav ul li {
    transition: 0.5s;
    margin-bottom: var(--gutter-32px);
}

header nav .button {
    width: 266px;
    text-align: center;
    margin-top: var(--gutter-40px);
}

/* カーソルを合わせたら */
header nav ul li:hover {
    opacity: 0.5;
}

/* headerにonがついたら */
header.on nav {
    opacity: 1;
    visibility: visible;
}

@media screen and (min-width:729px) {
    header nav {
        width: 480px;
    }

    header.on .nav_back {
        opacity: 1;
        visibility: visible;
    }

    header nav .button {
        margin-right: auto;
        margin-left: 0;
    }
}



/* -----footer----- */
footer {
    /* 背景画像 */
    background-image: url(../../img/footer_image.jpg);
    background-color: rgba(189, 182, 174, 100%);
    background-size: cover;
    background-position: center;
    background-blend-mode: multiply;
    /* サイズ */
    width: 100%;
    padding: 80px 0;
    overflow: hidden;
}

.footer_inner {
    padding: var(--gutter-32px);
    color: var(--color-white);
}

@media screen and (min-width:729px) {
    footer {
        padding: 160px 0;
    }

    .footer_inner {
        padding: var(--gutter-60px);
        max-width: 1320px;
        margin-left: auto;
        margin-right: auto;
        /* flex */
        display: flex;
        /* gap: var(--gutter-60px); */
        justify-content: space-between;
        align-items: center;
    }

    .footer_flex_wrap {
        display: flex;
        gap: var(--gutter-60px);
    }

    .footer_info_wrap {
        width: 330px;
    }

    .footer_info_wrap a:first-child {
        margin-top: 0;
    }
}

/* footer_caption */

footer .footer_caption {
    margin-bottom: var(--gutter-40px);
}

footer .footer_caption h1 {
    max-width: 366px;
    margin-left: auto;
    margin-right: auto;
}

footer .footer_caption p {
    font-size: var(--size-24px);
    font-weight: 500;
    font-family: var(--font-ryo-mincho);
    color: var(--color-white);
    text-align: center;
}

@media screen and (min-width:729px) {
    footer .footer_caption h1 {
        max-width: 565px;
        margin-left: 0;
    }

    footer .footer_caption p {
        font-size: var(--size-32px);
        text-align: left;
    }
}

/* footer ナビ */

footer ul {
    width: 100%;
    /* flex */
    display: flex;
    flex-wrap: wrap;
    gap: var(--gutter-8px) var(--gutter-32px);
    justify-content: flex-start;
    align-items: center;
    /* フォント */
    font-family: var(--font-Garamond);
    font-size: var(--size-20px);
}

footer nav ul li {
    transition: 0.5s;
}

/* カーソルを合わせたら */
footer nav ul li:hover {
    opacity: 0.5;
}

@media screen and (min-width:729px) {
    footer ul {
        display: block;
        line-height: 1;
    }

    footer ul li:not(:last-child) {
        margin-bottom: var(--gutter-32px);

    }
}

/* foooter　ボタン */
footer .button_mini {
    color: var(--color-white);
    font-size: var(--gutter-16px);
    border-bottom: 1px solid var(--color-white);
}

/* footer sns周り */
footer .footer_info_wrap p {
    margin: var(--gutter-40px) 0 var(--gutter-16px);
    /* フォント */
    font-family: var(--font-Garamond);
    font-size: var(--size-18px);
    font-weight: 500;
    text-align: center;
    line-height: 1;
}

/* footer_icon_wrap */
footer .footer_icon_wrap {
    display: flex;
    gap: var(--gutter-24px);
    justify-content: center;
}

footer .footer_icon_wrap img {
    display: block;
    width: 32px;
}

@media screen and (min-width:729px) {
    footer .footer_info_wrap p {
        margin: var(--gutter-60px) 0 var(--gutter-16px);
        /* フォント */
        font-size: var(--size-20px);
        text-align: left;
    }

    footer .footer_icon_wrap {
        justify-content: left;
    }
}