@charset "UTF-8";



@import url('https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Noto+Serif+JP:wght@200..900&display=swap');



/*

font-family: 'Roboto', sans-serif;

font-family: 'Noto Sans JP', sans-serif;

font-family: 'Noto Serif JP', serif;

*/



/* ---------------------------------------------------------------------------

//  base

--------------------------------------------------------------------------- */

* { margin: 0; padding: 0; box-sizing: border-box; }

*::before,

*::after { box-sizing: border-box; }

html, body { width: 100%; height: 100%; }

img, iframe { border: 0; vertical-align: bottom; }

ul, ol { list-style-type: none; }

a { text-decoration: none; }

mark { font-weight: bold; color: inherit; background-color: transparent; }

em { font-style: normal; }

address { font-style: normal; }

table { border-collapse: collapse; border-spacing: 0; }

input, select { vertical-align: baseline; }



.cf::after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }



/* ---------------------------------------------------------------------------

//  all

--------------------------------------------------------------------------- */

html { font-size: 62.5%; }



body {

  line-height: 1.8;

  background: #F5F3ED;

}

h1, h2, h3, h4, h5, h6 { font-weight: normal; line-height: 1.4; }



a { transition: .3s; color: inherit; }

@media screen and (min-width: 767.8px) {

  a:hover { opacity: .7; }

}

.preload a { transition: none !important; }



.wrap { min-width: 1000px; margin: 0 auto; overflow: hidden; }

.inner { max-width: 1280px; height: 100%; margin: 0 auto; position: relative; padding: 0 40px; }

ul.indent li { text-indent: -1em; padding-left: 1em; }

ul.dot li::before { content: "・"; }

ol.num { counter-reset: li; }

ol.num > li { text-indent: -1.2em; padding-left: 1.2em; }

ol.num > li:before { content: counter(li) "."; counter-increment: li; padding-right: 5px; }

ol.brackets { counter-reset: li; }

ol.brackets > li { text-indent: -1.55em; padding-left: 1.55em; }

ol.brackets > li:nth-child(n+10) { text-indent: -2.1em; padding-left: 2.1em; }

ol.brackets > li:before { content: "(" counter(li) ")"; counter-increment: li; padding-right: 5px; }

hr { display: block; height: 1px; border: none; border-top: 1px solid rgba(255,255,255,0.2); margin: 1em 0; }

img { max-width: 100%; height: auto; }

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

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

.text-overflow { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }

.sml { font-size: 80%; }

.t-center { text-align: center; }

.t-right { text-align: right; }

.pc-center { text-align: center; }

.bold { font-weight: 700; }



.flex { display: flex; justify-content: space-between; }

.flex.jstart { justify-content: flex-start; }

.flex.jend { justify-content: flex-end; }

.flex.jcenter { justify-content: center; }

.flex.fwrap { flex-wrap: wrap; }

.flex.fwrap.bottom > * { margin-bottom: 20px; }

.flex.istart { align-items: flex-start; }

.flex.iend { align-items: flex-end; }

.flex.icenter { align-items: center; }

.flex.half > * { width: 48.5%; }

.flex.half50 > * { width: 50%; }

.flex.third > * { width: 32%; }

.flex.quarter > * { width: 24%; }

.flex.reverse { flex-flow: row-reverse; }

.flex.third.fwrap::after { content: ""; width: 32%; display: block; }

.flex.quarter.fwrap::before { content: ""; width: 24%; display: block; order: 1; }

.flex.quarter.fwrap::after { content: ""; width: 24%; display: block; }



.pc-flex { display: flex; justify-content: space-between; }



a.scale { overflow: hidden; }

a.scale img { transition: .3s; }

@media screen and (min-width: 767.8px) {

  a.scale:hover img { transform: scale(1.05); }

}



/* ---------------------------------------------------------------------------

//  header

--------------------------------------------------------------------------- */

header {

  display: block;

  position: fixed;

  left: 0;

  top: 0;

  width: 100%;

  z-index: 999;

  padding: 1rem 2.5rem;

  background: rgba(255,255,255,0.4);

  font-family: 'Noto Serif JP', "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;

}

header .head {

  height: 100%;

}

header .logo {

  width: 15.3rem;

}

header nav li {

  margin-left: 2em;

  position: relative;

}

header nav a {

  font-size: min(1.2vw, 1.6rem);

}

header nav .btn a {

  border: 1px solid #74624C;

  padding: .8rem 2rem;

  font-size: min(1vw, 1.4rem);

  display: block;

  border-radius: 3px;

}

header nav .btn.login a {

  background: #74624C;

  color: #fff;

}

header nav .btn.login a::before {

  content: "";

  display: inline-block;

  background: url(../img/icon-door-w.png) center center / contain no-repeat;

  width: 1.7rem;

  height: 2rem;

  margin-right: 1rem;

  vertical-align: -.6rem;

}



header nav .btn.cart {

  margin-left: .5em;

}

header nav .btn.cart a {

  background: #fff;

  color: #74624C;

}

header nav .btn.cart a::before {

  content: "";

  display: inline-block;

  background: url(../img/icon-cart-b.png) center center / contain no-repeat;

  width: 1.9rem;

  height: 2rem;

  margin-right: .5rem;

  vertical-align: -.6rem;

}

header nav a {

  color: #1E1D1D;

}

header nav a:hover {

  text-decoration: none;

}



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

  header .logo { width: 11rem; }

  header nav li { margin-left: 1em; }

} /*@*/



/* ---------------------------------------------------------------------------

//  nav

--------------------------------------------------------------------------- */







/* ---------------------------------------------------------------------------

//  aside

--------------------------------------------------------------------------- */

.navigation {

  padding: 8rem 0;

}



.navigation-items {

  gap: 0 4rem;

}

.navigation h2 {

  padding-bottom: 1rem;

  margin-bottom: 2rem;

  border-bottom: 1px solid #A9A69F;

  font-size: 2.2rem;

  color: #625F4F;

  font-weight: 700;

}

.navigation h2 span {

  font-family: 'Noto Sans JP', "Yu Gothic", "YuGothic", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;

  font-size: 1.3rem;

  font-weight: 400;

  margin-left: 1rem;

}



.navigation-item1 {

  flex: 1;

}

.navigation-item2 {

  flex: 2;

}



.navigation li {

  margin-bottom: .3rem;

}

.navigation a {

  font-family: 'Noto Sans JP', "Yu Gothic", "YuGothic", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;

  font-size: 1.4rem;

  font-weight: 400;

}



/* ---------------------------------------------------------------------------

//  footer

--------------------------------------------------------------------------- */

footer {

  background: #74624C;

  color: #fff;

  padding: 9rem 0;

}

footer .logo {

  width: 20rem;

  margin: 0 auto 5rem;

}

footer .sns {

  gap: 0 3rem;

  margin-bottom: 4rem;

}

footer .sns a {

  width: 3.8rem;

}

footer .menu1 {

  gap: 0 3rem;

  margin-bottom: 4rem;

}

footer .menu1 a {

  font-family: 'Noto Sans JP', "Yu Gothic", "YuGothic", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;

  color: #fff;

}

footer .menu2 li {

  border-left: 1px solid #fff;

  padding: 0 1em;

  line-height: 1;

}

footer .menu2 li:last-child {

  border-right: 1px solid #fff;

}

footer .menu2 a {

  font-family: 'Noto Sans JP', "Yu Gothic", "YuGothic", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;

  color: #fff;

}









/* /////////////////////////////////////////////////////////////////////////// */

/* /////////////////////////////////////////////////////////////////////////// */

/* /////////////////////////////////////////////////////////////////////////// */





header .trigger,

.sp-only,

.sp-only-inline { display: none; }

br.pc { display: block; }

br.sp { display: none; }

a[href^="tel:"] { pointer-events: none; cursor: default; }



/* /////////////////////////////////////////////////////////////////////////// */



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



html > * { -webkit-tap-highlight-color: rgba(0,0,0,0); }

html { overflow-y: visible; }

body { min-width: 100%; overflow-x: hidden; }

body.fixed { position: fixed; width: 100%; height: 100%; }



.sp-only { display: block; }

.sp-only-inline { display: inline; }

.pc-only { display: none; }

br.pc { display: none; }

br.sp { display: block; }

a[href^="tel:"] { pointer-events: auto; cursor: pointer; }



.wrap { min-width: 380px; margin: 0 auto; padding-top: 70px; }

.inner { width: 100%; padding-left: 20px; padding-right: 20px; }



.flex:not(.alw) { flex-flow: column nowrap; }

.flex.ijstart:not(.alw),

.flex.iend:not(.alw),

.flex.icenter:not(.alw) { align-items: stretch; }

.flex.half:not(.alw) > * { width: 100%; }

.flex.half50:not(.alw) > * { width: 100%; }

.flex.third:not(.alw) > * { width: 100%; }

.flex.quarter:not(.alw) > * { width: 100%; }

.flex.reverse:not(.alw) { flex-flow: column nowrap; }

/*

.flex:not(.alw) > * { margin-bottom: 20px; }

.flex:not(.alw) > *:last-child { margin-bottom: 0; }

*/

.flex.sp-half > * { width: 48%; }

.flex.sp-half50 > * { width: 50%; }

.flex.sp-wrap { flex-wrap: wrap; }



.pc-center { text-align: left; }

.sp-center { text-align: center; }



.table-wrapper { overflow: auto; white-space: nowrap; }

.table-wrapper table { width: auto; }



html { font-size: 55%; }



/* --------------------------------------------------------------------------- */





.navigation-item1 {

  margin-bottom: 3rem;

}



/* --------------------------------------------------------------------------- */



footer .sns a {

  width: 3.2rem;

}

footer .menu1 li {

  font-size: 1.6rem;

  text-align: center;

  margin-bottom: .5rem;

}

footer .menu2 li {

  font-size: 1.25rem;

}





} /*@*/



/* /////////////////////////////////////////////////////////////////////////// */



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

header {

  height: 70px;

  background: #F5F3ED;

}

header .logo {

  width: 10rem;

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

}

header .trigger {

  order: 1;

  display: block;

  width: 4rem;

  height: 4rem;

  background: url(../img/trigger-on.png) center center / contain no-repeat;

}

header .trigger.active {

  background: url(../img/trigger-off.png) center center / contain no-repeat;

}

header .icon-btns {

  order: 2;

  display: flex;

  align-items: center;

  gap: 0 2rem;

}

header .icon-btns .login {

  width: 2.1rem;

}

header .icon-btns .cart {

  width: 2.4rem;

}



.sp-nav-scroll {

  width: 100%;

  height: 100%;

  overflow-y: auto;

}



.sp-nav {

  display: none;

  position: absolute;

  top: 70px;

  left: 0;

  width: 100%;

  background: rgba(247,246,240,0.9);

}



header nav {

  padding: 25px 30px 60px;

}

header nav li {

  margin: 0;

  border-bottom: 1px solid #A0917A;

}



header nav li a {

  display: block;

  font-size: 1.6rem;

  padding: 12px 0;

  position: relative;

}

header nav li a::after {

  content: "❯";

  font-size: 12px;

  position: absolute;

  top: 50%;

  right: 1rem;

  transform: translateY(-50%);

}



header nav .btn {

  margin-top: 2rem;

  border-bottom: none;

}

header nav .btn a {

  padding: 1rem;

  font-size: 1.4rem;

  text-align: center;

}

header nav .btn.cart {

  margin-left: 0;

}



} /*@*/