@charset "utf-8";

html {font-size: 100%; scroll-behavior: smooth;}
body {background-color: #80411b; color: #ffffff; }
a {text-decoration: none; color: #ffffff; transition: all 0.6s ease;}
img {max-width: 100%;}
ul {list-style: none;}
h2 {text-align: center; font-size: 39px; font-family: serif;}
a:hover {opacity: 0.8;}
p {font-size: 13px; }
h3 {text-align: center; font-size: 31px; font-family: serif; margin: 200px auto 100px;}
h4 {font-size: 24px; font-family: serif; margin-bottom: 30px;}
span {font-size: 20px; font-family: serif; }


/*‐-------ヘッダー--------*/
#title {text-align: center; margin: 8px auto 0px;}
.header  {margin: 0 auto; height: 90px; width: 100%;}
.header-pc ul {margin: 0 auto; width: 100%; max-width: 1366px; display: flex; height: 26px; align-items: flex-end;}
.header-pc li {margin-left: 114px; font-family: serif; font-size: 15px;}
.header-pc li:first-child {margin-left: 220px;}
.header-pc li:last-child {margin-left: 5px; }
.header .shop {align-items: center;}
.header li img {width: 100%;}
#header-sp {display: none;}



/*‐-------メインビジュアル--------*/
#slick { width: 100%; height: calc(100vh - 90px);}
#slick img {width: 100%; object-fit: cover;}
#slick-sp {display: none;}



/*‐-------indexアバウト--------*/
#about h2 {margin:200px 0 100px;}
#about .content {margin: 0 auto;  width: 100%; height: 685px; background-color: #a03114; }
#about .box {margin: 0 auto; width: 100%; max-width: 844px; display: flex; flex-direction: row-reverse; }
#about .text-box {width: 100%; max-width: 273px; }
#about .detail {font-size: 13px; line-height: 39px; padding: 80px 0px 170px; }
#about .view-more {width: 100%; max-width: 160px; font-size: 24px; font-family: serif; display: block; 
                    border-bottom: 1px solid #ffffff; margin-left: 120px;}
#about .image {margin: 50px 0; width: 100%; max-width: 571px; position: relative; height: 580px; }
#about .left {width: 100%; max-width: 310px; position: absolute; }
#about .right {width: 100%; max-width: 310px; position: absolute;  left: 259px; bottom: -10px;}


/*‐-------indexメニュー--------*/
#menu h2 {margin: 200px 0 100px;}
#menu .content {margin: 0 auto;  width: 100%; height: 700px; background-color: #a07014; }
#menu .box {margin: 0 auto; width: 100%; max-width: 878px; display: flex; justify-content: space-between; position: relative;}
#menu .text-box {width: 100%; max-width: 390px; padding-top: 115px;}
#menu .detail {font-size: 13px; line-height: 39px; }
#menu .view-more {width: 100%; max-width: 160px; margin-top: 150px; font-size: 24px; font-family: serif; display: block; 
                margin-right: 235px; border-bottom: 1px solid #ffffff;}
#menu .image {margin: 54px 0; width: 100%; max-width: 575px; position: relative; height: 585px; display: flex; }
#menu .right {width: 100%; max-width: 310px; position: absolute; right: 0px;}
#menu .left {width: 100%; max-width: 310px; position: absolute; left: -90px; bottom: 0px;}




/*登場アニメーション*/
/*登場する前*/
.scroll-block {opacity: 0.1; transform: translateY(100px); transition: 0.6s;}
/*登場する前はtranslateYを使って本来の位置よりも100px下に表示する*/

/*登場する時*/
.scroll-block.entry {transform: translateY(0); opacity: 1;}


/*‐-------ニュース--------*/
#news h2 {margin: 200px 0 100px;}
#news .news {margin: 0 auto ; width: 100%; max-width: 632px; font-size: 13px;}
#news li {display: flex; margin-bottom: 45px; }
#news li:last-child {margin-bottom: 0px;}
#news time {margin-right: 84px; border-bottom: 1px solid; border-color: #ffffff;}
#news p {border-bottom: 1px solid; border-color: #ffffff; width: 477px;}



/*‐-------アクセス--------*/
#access h2 {margin: 200px 0 100px;}
.access {margin: 0 auto; width: 100%; max-width: 550px;}
.info {margin: 0 auto 32px; width: 440px; font-size: 13px; display: flex; flex-wrap: wrap;}
.info dt {width: 30%; margin-bottom: 24px;}
.info dd {width: 70%; margin-bottom: 24px;}
.map {margin: 0 auto; margin-bottom: 150px;}
.map iframe {width: 100%; max-width: 1366px; text-align: center;}



/*‐-------バナー--------*/
.banner {width: 100%; max-width: 419px; height: 131px; text-align: center; margin: 0 auto 130px;}



/*‐-------トップへ戻るボタン--------*/
.page_top{
    margin-right: 30px;
    margin-bottom: -20px;
    width: 86px;
    height: 86px;
    position: relative;
    background: #fbedbc;
    border-radius: 50%;
    align-items: center;
    }

.page_top a {
    color: #000000;
    font-size: 13px;
    font-family: serif;
    position: absolute;
    width: 50px;
    height: 50px;
    top: 34px;
    bottom: 34px;
    right: 0;
    left: 0;
    margin: 0 auto;
    text-align: center;
}



/*‐-------フッター--------*/
.footer {font-family: serif;}
.footer .footer-box {position: relative;}
.footer .button {margin-left: 50px; margin-bottom: 40px;}
.footer .logo {margin-right: 16px;}
.footer-nav {display: flex; justify-content: space-between; }
.page_top {position: absolute; right: 0;  bottom: 0px;}
.footer-nav ul {display: flex; margin-bottom: 35px;}
.footer-nav li {margin-left: 50px; font-size: 12px;}
.footer-nav li:first-child {margin-left: 50px;}
.footer-nav li:last-child {margin-left: 5px;}
.copyright {text-align: center; padding-bottom: 10px;}




/*‐-------about.htmlメインビジュアル--------*/
.about-main-visual {text-align: center; width: 100%; height: 540px; 
                    background-image: url(img/about-main.jpg); background-size:cover; background-repeat: no-repeat; padding-top: 228px;}



/*‐-------about.html--------*/
#about1 .content {width: 100%; height: 685px; background-color: #9d5428;}
#about1 .box {margin: 0 auto; width: 100%; max-width: 625px; line-height: 30px; padding: 50px 0;}
#about1 .box img {margin-bottom: 15px; width: 100%; max-width: 576px;}
#about1 .box .image {text-align: center;}

#about2 .content {width: 100%; height: 1200px; background-color: #9f673f; margin-bottom: 150px;}
#about2 .text-box {width: 100%; max-width: 430px;}

.first {margin: 0 auto; width: 850px; height: 500px; display: flex; flex-direction: row-reverse;}
.first .image {width: 100%; max-width:312px; margin: 80px 130px 0 0;}
.first .text-box {padding-top: 230px; }
#about2 .text-box p {line-height: 32px;}

.second {margin: 0 auto; width: 100%; max-width: 850px; height: 450px; display: flex; }
.second .image {width: 100%; max-width:312px; margin: 230px 0px 245px 130px;}
.second .text-box {padding-top: 370px;}




/*‐-------menu.htmlメインビジュアル--------*/
.menu-main-visual {text-align: center; width: 100%; height: 540px; 
                    background-image: url(img/menu-main.jpg); background-size: cover; background-repeat: no-repeat; padding-top: 228px;}




/*‐-------menu.html--------*/
#menu-menu .content {width: 100%; height: 1252px; background-color: #a07014; margin-bottom: 150px;}
#menu-menu .box {margin: 0 auto; width: 100%; max-width: 900px; padding-top: 50px;}
#menu-menu ul {display: flex; flex-wrap: wrap; justify-content: space-between;}
#menu-menu h4 {margin: 16px 0;}
#menu-menu li {margin-bottom: 120px; text-align: center;}
.link {text-align: center; font-size: 24px; font-family: serif; border-bottom:1px solid #ffffff; margin: 0 250px;}
.link a {color: #faf100;}



@media screen and (max-width: 600px)
 {

    #slick {display: none;}
    #slick-sp {display: block; height: 500px;}
    #slick-sp img {height: 400px; object-fit: cover;}



/*‐-------indexアバウト--------*/
    #about .content {width: 100%; height: 650px;}
    #about .box {width: 100%; max-width: 600px; height: 650px; position: relative;}
    #about .text-box {position: absolute; bottom: 30px; right: 10px; width: 100%; max-width: 340px;}
    #about .detail {padding: 0; margin-bottom: 20px;}
    #about .detail p {font-size: 16px; line-height: 39px;}
    #about .view-more {margin:0px 180px 0px 0px;}
    #about .image {margin: 0; width: 100%; max-width: 600px; height: 350px;}
    #about .image .left {position: absolute; top: 30px; padding-left: 10px;}
    #about .image .right {display: none;}



/*‐-------indexメニュー--------*/
    #menu .content {width: 100%; height: 730px;}
    #menu .box {width: 100%; max-width: 600px; height: 650px; position: relative;}
    #menu .text-box {position: absolute; left: 10px; top: 250px; width: 100%; max-width: 330px;}
    #menu .detail {margin-bottom: 20px;}
    #menu .detail p {font-size: 16px; line-height: 39px; }
    #menu .view-more {width: 100%; max-width: 160px; margin: 0;}
    #menu .image {margin: 0; width: 100%; max-width: 600px; height: 350px;}
    #menu .image .right {position: absolute; top: 30px; right: 10px; }
    #menu .image .left {display: none;}



/*‐-------indexニュース--------*/
    #news .news {margin: 0 auto ; width: 100%; max-width: 560px; font-size: 16px;}
    #news li {display:block; padding: 0 10px;}
    #news li:last-child {margin-bottom: 0px;}
    #news time {border-bottom: 1px solid; border-color: #ffffff;}
    #news p {font-size: 16px; border-bottom: 1px solid; border-color: #ffffff; width: 100%; max-width: 550px; display: block; padding-top: 10px;}



/*‐-------indexアクセス--------*/
    .access {margin: 0 auto; width: 100%; max-width: 580px;}
    .info {margin: 0 auto; padding: 0 10px; width: 100%; max-width: 580px; font-size: 16px; display: block; text-align: center;}
    .info dt {width: 100%; margin-bottom: 8px; }
    .info dd {width: 100%; margin-bottom: 30px; border-bottom: 1px solid #ffffff; padding-bottom: 30px;}
    .info dd:last-child {border-bottom: none; margin-bottom: 0px;}
    .map iframe {width: 100%; max-width: 600px; text-align: center;}


    .banner {width: 100%; max-width: 500px}


/*‐-------indexフッター--------*/
    .footer .footer-box {width: 100%; max-width: 600px;}
    .footer .button {margin-left: 15px;}
    .footer-nav {width: 100%;  position: relative; display: none;}
    .footer-nav ul {width: 100%; max-width: 600px; display: flex; justify-content: space-between;}
    .footer-nav li {margin-left: 40px; font-family: serif; font-size: 13px;}
    .footer-nav li:first-child {margin-left: 15px;}
    .footer-nav li:last-child {margin-left: 5px; margin-right: 15px;}
    .page_top {position: absolute; bottom: 30px; margin-right: 15px;}



/*‐-------about.html--------*/
    .about-main-visual {height: 500px; background-position: -100px -30px; padding-top: 200px;}    
    #about1 .content {width: 100%; height: 710px; background-color: #9d5428;}
    #about1 .box {margin: 0 auto; width: 100%; max-width: 600px; line-height: 30px; padding: 30px 0;}
    #about1 .box img {margin-bottom: 15px; width: 100%; max-width: 500px;}
    #about1 .box .image {text-align: center;}
    #about1 .text-box {width: 100%; max-width: 500px; margin: 0 auto;}
    #about1 p {font-size: 16px; display: block; padding: 0 10px;}

    #about2 .content {width: 100%; height: 1550px; background-color: #9f673f; margin-bottom: 150px;}

    .first {margin: 0 auto; width: 100%; max-width: 600px; height: 700px; display: flex; flex-direction: row-reverse; position: relative;}
    .first .image {width: 100%; max-width:312px; height: 312px; position: absolute; margin: 0; left: 10px; top: 30px;}
    .first .text-box {width: 100%; max-width: 580px; padding-top: 0; margin-top: 350px; margin-left: 25px; margin-right: 10px;}
    #about2 .text-box p {line-height: 32px; font-size: 16px; }

    .second {margin: 100px auto 0; width: 100%; max-width: 600px; height: 500px; display: flex; position: relative;}
    .second .image {width: 100%; max-width:312px; margin: 0; position: absolute; right: 10px; top: 30px;}
    .second .text-box {padding-top: 0px; margin-top: 350px; margin-left: 10px; margin-right: 20px; width: 100%; max-width: 550px;}



/*‐-------menu.html--------*/
    .menu-main-visual {height: 500px; padding-top: 200px; 
                        background-image: url(img/sp-menu.jpg); background-position: -60px 0px;}
    #menu-menu .content {width: 100%; height: 2350px; background-color: #a07014}

    #menu-menu ul {display: block;}
    #menu-menu li {text-align: center;}
    .link {margin: 0 100px;}




/*---ヘッダーここから---*/
#header-pc {display: none;}

#header-sp {display: block}

.header-sp .wrapper {height: 80px; display: flex; justify-content: space-between; align-items: center; margin: 0 20px}

.header-sp .site-title a {font-family: "Rubik Bubbles", cursives; font-size: 32px; font-weight: normal; text-decoration: none;}

.header-navi {position: fixed; top: 0; 
	/*.openが付与されるまで隠しておく*/
	left: -300px; padding: 36px 42px; transition: 0.5s; z-index: 30;}

/*.openが付与された時に登場する*/
.open .header-navi {left: 0; }

.header-navi li {margin-bottom: 16px; }

.header-navi li a {color: #ffffff;}

/*トグルボタン*/
.toggle-button {position: relative; width: 30px; height: 30px; cursor: pointer; z-index: 30;}

.toggle-button span {position: absolute; display: block; width: 30px; height: 2px; border-radius: 4px; 
	background-color: #ffffff; transition: 0.5s;}

.toggle-button span:first-child {top: 10px; }

.toggle-button span:last-child {bottom: 10px; }

.open .toggle-button span {background-color: #ffffff;}

.open .toggle-button span:first-child {transform: translateY(4px) rotate(45deg);} /*バーガーメニューが×に変わる*/

.open .toggle-button span:last-child {transform: translateY(-4px) rotate(-45deg);} /*バーガーメニューが×に変わる*/


/*.openの時に登場する黒い背景*/
.nav-background {display: none; background-color: rgba(0, 0, 0, 0);}

.open .nav-background {display: block; position: fixed; width: 100%; height: 100%; top: 0; left: 0; background-color: rgba(0, 0, 0, 0.8); z-index: 20; }

  
}