@charset"utf-8";
/* =================================
common
==================================== */
:root{
    --primary-white:#FFF;
    --primary-beige:#DFBA9C;
    --primary-darkbrown:#673B23;
    --primary-green:#4D7254;
    --primary-red:#BF1818;
    --primary-lightGray:#F4F0ED;
}

html{
    font-size: 62.5%;
}

body{
    font-family:
        "Noto Sans JP",
        Arial,
        sans-serif;
        font-style: normal;
        font-size: 1.6rem;
        color: var(--primary-darkbrown);
        background-color: var(--primary-white);
        line-height: 1.5; 
}
img{
    max-width: 100%;
    height: auto;
}

/* =================================
header
==================================== */
.logo{
    width: 89px;
    height: 61px;
    aspect-ratio: 89/61;
    display: block;
}
.header{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000; /* 他の要素の下に隠れるのを防ぐ */
    background-color: var(--primary-white);
}

.header__bar{
    display: flex;
    width: 100%;
    height: 75px;
    padding: 8px 4.6% 8px 2.6%;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 200;
}
.menu-trigger {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    outline: none;
    margin-top: 10px;
    width: 48px;
}

/* アイコン（2本の線）のコンテナ */
.hamburger-icon {
    width: 25px; 
    height: 10px; 
    display: flex;
    flex-direction: column;
    justify-content: space-between; 
    margin-bottom: 10px; 
    position: relative;
}

/* 線自体のスタイル */
.hamburger-btn-bar{
    display: block;
    width: 100%;
    height: 0.8px; 
    background-color:var(--primary-darkbrown);
    transition: all 0.3s; /* アニメーション用 */
    position: absolute;
    top: auto;
    left: 0;
}
.menu-trigger.active .hamburger-btn-bar:nth-of-type(1){
    transform: translateY(5px) rotate(-45deg);
}
.menu-trigger.active .hamburger-btn-bar:nth-of-type(2){
    transform: translateY(-5px) rotate(45deg);
}
.hamburger-icon span:nth-of-type(2){
    top: 10px;
}

/* PC表示 */
@media screen and (min-width:1259px) {
    .menu-trigger{
        display: none;
}
    .logo{
        width: 133px;
        height: 92px;
        aspect-ratio: 133/92;
}
    .header {
        height: 96px;
        padding: 0;
        position: static;
}
    .header__inner {
        display: flex;
        justify-content: space-between;
        align-items: center;
        /* gap: 40px; */
        height: 100%;
        padding-left: 3%;
        align-items: stretch; 
}
    .header__bar {
        gap: 0;
        padding: 0;
        width: fit-content;
        display: flex;
        align-items: center; /* ロゴだけ上下中央にする */
        height: 100%;
}
}
/* =================================
nav
==================================== */
.nav__sp{
    background-color: rgba(255, 255, 255, 0.9); ;
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    transform: translateX(-100%);
    transition: transform 0.3s;
}
.nav__sp.active{
    transform: translateX(0);
}
.nav__menu{
    display: flex;
    flex-direction: column;
    gap: 25px;
    margin: 68px auto 0;
    padding-top: 60px;
    text-align: center;
}
.nav__item{
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 25px;
}
.download__btn{
    display: none;
}
.nav__pc{
    display: none;
}
.menu-trigger .menu-close{
    display: none;
}
.menu-trigger.active .menu-close {
    display: inline;
}
.menu-trigger.active .menu-open {
    display: none;
}
.menu-open,.menu-close{
    font-size: 12px;
}


/* PC表示 */
@media screen and (min-width:1259px) {
    .nav__sp{
        display: none;
}
    .nav__pc {
        display: flex;
        align-items: stretch; /* ナビゲーション自体の高さを100%に伸ばす */
        height: 100%;
}
    .nav__pc__menu{
        display: flex;
        align-items: center;
        height: 100%;
        list-style: none;
        margin: 0;
        padding: 0;
}
    .pc_menu_white .nav__pc__menu{
        gap: 45px;
        margin-right: 45px;
}
    .pc__item {
        font-size: 1.6rem;
        font-weight: 700;
        white-space: nowrap;
}
    .pc__item a {
        color: var(--primary-darkbrown);
        text-decoration: none;
}

    /* --- 色付きメニュー（右側3項目）のスタイル --- */
    .pc_menu_color .nav__pc__menu {
        gap: 0; 
}
    .pc_menu_color{
        position: relative;
}
    .color__item {
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.6rem;
        font-weight: 700;
        text-align: center;
        white-space: nowrap;
        padding: 0;
}

    /* 各項目の個別背景色と横幅の指定 */
    .color__item:nth-of-type(1) {
        background-color:#422616;
        color: var(--primary-white);
        width: 160px;
}
    .color__item:nth-of-type(2) {
        background-color: var(--primary-red);
        color: var(--primary-white);
        width: 160px;
}
    .color__item:nth-of-type(3) {
        background-color:#422616;
        color: var(--primary-white);
        width: 160px;
}
    .color__item a ,.download-btn {
        display: flex; /* フレックスボックスにする */
        align-items: center; /* 上下中央揃え */
        justify-content: center; /* 左右中央揃え */
        width: 100%; /* 横幅を四角い枠いっぱいに広げる */
        height: 100%; /* 高さを四角い枠いっぱいに広げる */
        color: #ffffff; /* 文字色を白にする */
        text-decoration: none; /* リンクの下線を消す */
        background: none;
        border: none;
        font: inherit;
        cursor: pointer;
        
        /* 左右にテキストが詰まりすぎないための余白 */
        padding: 0 20px; 
}
}

/* =================================
Download menu
==================================== */
.download-menu {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 9999; 
    background-color:#422616;
    color: var(--primary-white);
    box-shadow: 0 4px 6px rgba(0,0,0,0.1); 
    padding: 40px 11.1%;
    width: 100%;
    border-top: var(--primary-white) solid 1px;
    background-image: url(../images/外枠.png);
    background-size: 92% 94%;      
    background-position: center; 
    background-repeat: no-repeat;
    opacity: 0;                         
    visibility: hidden;                 
    transform: translateX(30px);
    transition: opacity 0.5s ease, transform 0.5s ease, visibility 0.5s; /* 0.5秒かけて変化 */
}
.js-download-menu.is-open {
    opacity: 1;                         
    visibility: visible;                
    transform: translateX(0);           
}
.download-menu h2{
    text-align: center;
    font-family: "Poiret One";
    font-size: 4rem;
    padding-bottom: 5px;
    border-bottom: var(--primary-white) solid 1px;
}
.download__shops{
    display: flex;
    flex-direction: column;
    gap: 80px;
    margin-top: 40px;
    padding-bottom: 54.5px;
}
.download-menu h3{
    font-size: 2rem;
    font-weight: 700;
}
.download-menu__item{
    margin-top:25px ;
    padding-bottom: 3px;
    border-bottom: var(--primary-white) solid 1px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.download-menu__item:first-child{
    margin-top: 15px;
}
.download-menu__item::before{
    content: '';
    display: inline-block;
    width: 15px;
    height: 1px;
    background-color: var(--primary-white);
}


/* =================================
Btn（Googleフォーム遷移ボタン以外）
==================================== */
.btn{
    display: block;
    width: 73%;
    padding: 8px 5%;
    text-align: center;
    align-items: center;
    border-radius: 20px;
    font-weight: 700;
    line-height: 25px;
    position: relative;
    
}

/* PC表示 */
@media screen and (min-width:769px) {
    .btn{
        width: 40%;
        font-size: 2.4rem;
        padding: 20px 0;
        border-radius: 50px;
}
}
/* =================================
Btn（Googleフォーム遷移ボタン）
==================================== */
.Btn__TXTset{
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: center;
}
.Btn{
    display: block;
    width: 53.3%;
    min-width: 200px;
    padding: 8px 8%;
    background-color: var(--primary-red);
    color: var(--primary-white);
    text-align: center;
    border-radius: 30px;
    font-weight: 700;
    line-height: 25px;
    cursor: pointer;
    box-shadow: 0 5px 0 #422616;
    transition: transform 0.3s, box-shadow 0.3s;
}
.Btn:hover {
    transform: translateY(4px);
    box-shadow: none;
}
.Btn__TXTset p{
    font-size: 1.4rem;
}

/* PC表示 */
@media screen and (min-width:769px) {
    .Btn__TXTset{
        gap: 11px;
}
    .Btn{
        width: 30%;
        font-size: 2rem;
        padding: 23px 2%;
        border-radius: 50px;
}
    .Btn__TXTset p{
        font-size: 1.6rem;
}
}
/* =================================
体験・見学
==================================== */
.experience{
    position: relative;
}
.btn--on{
    position: absolute;
    bottom: 50%;
    right: 15%;
}
.img__pc{
    display: none;
}


/* PC表示 */
@media screen and (min-width:769px) {
    .img__pc{
        display: block;
}
    .img__sp{
        display: none;
}
    .btn--on{
        bottom: 25%;
        right: 45%;
}
}
/* =================================
footer
==================================== */
.footer{
    margin-top: 63px;
    display: flex;
    flex-direction: column;
    background-color: var(--primary-darkbrown);
}
.footer__menu{
    padding: 30px 8%;
    display: flex;
    flex-wrap: wrap;
    gap: 20px 40px;
}
.footer__item{
    color: var(--primary-white);
    width: 36.8%;
    text-align: center;
    margin: 0 auto;
    font-size: 1.4rem;
}
.footer__logo{
    background-color: var(--primary-white);
}
.footer img{
    display: block;
    width: 67.4%;
    padding: 10px 10%;
    margin: 0 auto;
}
.copy{
    display: block;
    margin: 0 auto;
    text-align: center;
    background-color: var(--primary-white);
    width: 100%;
}
/* PC表示 */
@media screen and (min-width:769px) {
    .footer{
        padding: 60px 5% 60px; 
        position: relative;
}
    .footer__group {
        display: flex;
        justify-content: space-between; 
        align-items: center; 
        max-width: 1440px; 
        margin: 0 auto;
}
.footer__item{
        width: 36.8%;
        font-size: 2.4rem;
}
.footer__menu{
        padding: 30px 0;
        gap: 60px 0px;
}
.footer__logo{
        background-color: var(--primary-darkbrown);
}
.footer img{
        margin: 0 auto;
        padding: 0 0
}
.copy{
        margin: 0 auto;
        text-align: right;
        background-color: var(--primary-darkbrown);
        color: var(--primary-white);
}
}
/* =================================
page__title
==================================== */
.page__title{
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    margin-top: 80px;
}
.page__title h2{
    color: var(--primary-white);
    font-weight: 700;
    text-align: center;
    position: absolute;
    top: 50%;
    right: 35%;
    left: 35%;
    transform:translateY(-50%);
    font-size: 2rem;
    width: 32%;
}
.line-pc{
    display: none;
}
/* PC表示 */
@media screen and (min-width:769px) {
    .line-sp{
        display: none;
}
    .line-pc{
        display: block;
}
.page__title h2{
        top: 50%;
        right: 34%;
        left: 34%;
        transform:translateY(-50%);
        font-size: 3.6rem;
        width: 32%;
}
.page__title{
    margin-top: 0px;
}
}

/* =================================
page__title 下の最初のテキスト
==================================== */
.first--txt{
    padding: 10px 2% 20px;
    border-bottom: 1px solid var(--primary-darkbrown);
    /* margin: 5px 2.6% 50px 2.6%; */
}

/* PC表示 */
@media screen and (min-width:769px) {
    .first--txt{
        font-size: 2.4rem;
        padding: 10px 1% 20px;
}
    .br__none{
        display: none;
}
}

/* =================================
form系
==================================== */
.form{
    border:var(--primary-beige) 16px solid;
    margin: 20px auto 0;
    padding: 20px 2.6% 45px;
    display: flex;
    justify-content:flex-start;
}
.form-title {
    font-size: 1.8rem;
    margin-top: 0;
    margin-bottom: 30px;
    font-weight: 700;
}
.title__brown{
    background-color: var(--primary-darkbrown);
    color: var(--primary-white);
    display: block;
    width: 46%;
    padding: 5px 20px;
    border-radius: 8px;
}

.form-group {
    margin-bottom: 29px;
}


@keyframes mainVisualFadeIn {
    from {
    opacity: 0;
    transform: translateX(-50%);
    }
    to {
    opacity: 1;
    transform: translateX(-50%);
    }
}