@charset "UTF-8";

/* ==================================================
   Base
================================================== */

* { box-sizing: border-box; }
html { font-size: 6.25%; scroll-behavior: smooth; }
body { margin: 0; color: #222; font-family: "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif; font-size: 16rem; line-height: 1.8; }
img { max-width: 100%; height: auto; }
a, button { color: inherit; text-decoration: none; transition: 0.4s }
a:hover, button:hover { opacity: 0.5 }

@media (max-width: 1023px) {
	body { font-size: 15rem; }
}
/* ==================================================
   Accessibility
================================================== */

.skip-link { position: fixed; z-index: 9999; top: 0; left: 16px; padding: 12px 16px; background: #fff; transform: translateY(-120%); }
.skip-link:focus { transform: none; }

/* ==================================================
   Header
================================================== */

.site-header { position: fixed; z-index: 999; color: #fff; width: 100%; background: linear-gradient(0deg,rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 60%); font-family: "Hiragino Mincho ProN", "Noto Serif JP", serif;}
.header-inner { display: flex; align-items: center; justify-content: space-between; width: 96%; height: 80px; margin: 0 auto; }
.brand { display: flex; align-items: center; min-width: 46px; height: 100%}
.brand img { display: block; width: auto; height: 50%; margin: 0 5px 0 15px;}
.brand img:nth-child(2) { height: 36%;}

.page-header {background-color: rgba(0,0,0,0.7)}

@media (max-width: 1023px) {
	.header-inner { height: 70px;  }
	.brand img { margin: 0 0 0 10px;}
}
	
/* ==================================================
   Global Navigation
================================================== */
.main-nav {width: 80%;}
.menu-link { display: flex; flex-wrap: wrap; justify-content: flex-end; column-gap: 2vw; list-style: none; padding: 0 }
.menu-link li {}
.menu-link li a { text-decoration: none;}
.menu-link li a img { display: inline-block; width: auto; height: 26px; margin: 0 10px; vertical-align: top;}

.menu-button { display: none;}


@media (max-width: 1023px) {
	.main-nav {display: block; position: fixed; top: 0; right: 0; width: 100%; max-width: 0; height: 100vh; padding-top: 80px; overflow: hidden; background-color: rgba(0,0,0,0.8); transition: 0.5s; z-index: 999;}
	.menu-link { display: block; width: 90vw; margin: 0 auto;}
	.menu-link li { display: block; border-bottom: 1px solid #999;}
	.menu-link li a { display: block; padding: 20px 20px; color: #fff;}
	.menu-insta img {}
	.menu-insta::before {content: '丹嘉 instagram'}

	.menu-button { display: block; position: fixed; top: 0; right: 2%; width: 50px; height: 70px; padding: 7px; border: 0; background: transparent; cursor: pointer; z-index: 999999}
	.menu-button span { display: block; width: 70%; height: 4px;  background: #fff; position:absolute; left: 15%; opacity: 1; transform-origin: center left; transition: 0.5s}
	.menu-button span:nth-child(1) { top: 30%}
	.menu-button span:nth-child(2) { top: 45%}
	.menu-button span:nth-child(3) { top: 60%; width: 35%; }
	.menu-button:hover span:nth-child(3) { width: 70% }
/* OPEN */
	.main-nav.menu-open {max-width: 100vw}
	.menu-button.menu-btn-open { }
	.menu-button.menu-btn-open span:nth-child(1) { top: 28%; transform: rotate(45deg)}
	.menu-button.menu-btn-open span:nth-child(2) { opacity: 0;}
	.menu-button.menu-btn-open span:nth-child(3) { top: 62%; width: 70%; transform: rotate(-45deg) }
}

/* ==================================================
   Hero
================================================== */

.hero { position: relative; height:100vh; min-height: 700px; background: #eee url("../assets/images/top-bg.png") bottom center / cover no-repeat; }

.hero-title { position: absolute; z-index: 2; top: 20%; right: 8vw; display: flex; align-items: center; width: auto; height: 50vh; min-height: 350px; margin: 0;}
.hero-title img { height: 100%; width: auto;}

.hero-copy { display: block; position: absolute; bottom: 0; left: 8%; font-size: 26rem; letter-spacing: 2px; line-height: 1.5; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.65); color: #fff; margin: 0; height: 21vh; min-height: 130px;  padding-left: 20px; font-family: serif}
.hero-copy span { display: block; font-size: 12rem;}
.hero-copy::before {content: ''; display: block; height: calc(100% - 10px); width: 1px; position: absolute; top: 10px; left: 0; background-color: #fff;}

/* ==================================================
   SLIDE SHOW
================================================== */
.hero-photo { position: absolute; top: 12vh; right: 25%; width: 75%; height: 70vh; min-height: 490px; }
.hero-slide { position: relative; width: 100%; height: 100%; margin: 0; padding: 0; list-style: none; }
.hero-slide li { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; animation: hero-fade 16s infinite; }
.hero-slide li:nth-child(1) { animation-delay: 0s; }
.hero-slide li:nth-child(2) { animation-delay: 4s; }
.hero-slide li:nth-child(3) { animation-delay: 8s; }
.hero-slide li:nth-child(4) { animation-delay: 12s; }
.hero-slide img { display: block; width: 100%; height: 100%; object-fit: cover; }

@keyframes hero-fade {
  0% { opacity: 0; }
  16.66% { opacity: 1; }
  25% { opacity: 1; }
  50% { opacity: 0; }
  100% { opacity: 0; }
}

@media (max-width: 1023px) {
	.hero { height:80vh; min-height: 0;}
	.hero-title {right: 5vw; height: 40vh;  min-height: 0;}
	.hero-photo {right: 20%; width: 80%; height: 50vh; min-height: 0;}
	.hero-copy { font-size: 24rem; }
	.hero-copy span { font-size: 11rem; letter-spacing: 1px;}
}

/* ==================================================
   Section Common
================================================== */

.section { position: relative; padding: 15vh 0; background: #f2f2ef; }
.section-inner { width: min(90%, 1100px); margin: auto; }
.section h2 { margin: 20px 0 24px; font-size: 34rem; font-weight: 500; line-height: 1.5; font-family: serif}
.section h3 { margin: 33.6px 0 16px; font-size: 18rem; }
.section p { font-size: 15rem; line-height: 1.8; margin: 0 auto 15px auto;}

.split { display: flex; justify-content: space-between; flex-wrap: wrap;}
.split .section-copy {width: 45%}
.split .sideimage { display: block; height: 100%; max-height: 100%; width: auto; max-width: 50%; }

@media (max-width: 1023px) {
	.section { padding: 10vh 0;}
	.section h2 { font-size: 26rem;}
	.split { display: block;}
	.split .section-copy {width: 100%; margin-bottom: 5vh;}
	.split .sideimage { max-width: 100%; height: auto; }
}

/* ==================================================
   Buttons
================================================== */

.button-row { display: flex; justify-content: center; gap: 40px; margin-top: 50px; margin-bottom: 20px;}
.button-row.compact { display: grid; justify-content: start; margin-top: 24px; gap: 12px; }

.button { display: inline-flex; align-items: center; justify-content: center; padding: 15px 50px 15px 30px; border: 1px solid #767676; background: rgba(255, 255, 255, 0.3); font-size: 14rem; position: relative;}
.button:hover, .button:focus-visible { background: rgba(0,0,0,0.3) }

.button::after { content:''; display: block; width: 24px; height: 12px; background: #666; clip-path: polygon(0 50%, 90% 50%, 65% 10%, 70% 10%, 100% 55%, 0 55%); position: absolute; right: 16px; top: calc(50% - 5px); transition: 0.5s}
.button:hover::after { right: 10px;}

.button.large { width: min(390px, 46%); min-height: 120px; font-family: "Hiragino Mincho ProN", "Noto Serif JP", serif; font-size: 22rem; border-color: #fff;}
.button.large:hover { opacity: 1; background-color: #fff; color: #333}
.button.large::after { background-color: #fff;}
.button.large:hover::after { opacity: 1; background-color: #333;}

.button-row-min { display: flex; justify-content: center; flex-wrap: wrap; column-gap: 20px; line-height: 1.4}
.button.btn-min { width: 30%; font-size: 15rem; border-color: #fff; margin-top: 20px;}
.button.btn-min::after { background-color: #fff;}
.button.btn-min:hover::after { opacity: 1; }

a.text-link {text-decoration: underline}
a.text-link:hover {text-decoration: none; opacity: 0.5}

.button.link-blank::before { content:''; display: block; width: 14px; height: 14px; background: #bbb; clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 90%, 10% 90%, 10% 0); position: absolute; right: 16px; top: calc(50% - 7px); }
.button.link-blank::after { content:''; display: block; width: 10px; height: 10px; background: #bbb; position: absolute; right: 16px; top: calc(50% - 7px); clip-path: none}

@media (max-width: 1023px) {
	.button-row { display: block; }
	.button.large {font-size: 20rem; width: 100%; min-height: 70px; margin-bottom: 10px}
	
	.button-row-min { display: block;}
	.button.btn-min { width: 100%; margin-top: 10px;}
}

/* ==================================================
   Purchase Section
================================================== */

.section-purchase { background: #eee url("../assets/images/top-img02.png") center / cover no-repeat; text-align: center; color: #fff;}
.centered { max-width: 860px; }

#page h2#purchase-title { font-size: 24rem; margin: 0;}
#page .section-purchase { padding: 8vh 0}
#page .button-row { margin-top: 30px; margin-bottom: 0 }
#page .button.btn-min {}





@media (max-width: 1023px) {
	.section-purchase { text-align: left; background-position: center right 20%;}
}

/* ==================================================
   Visit Section
================================================== */

.section-visit { }

/* ==================================================
   Contact Section
================================================== */

.section-contact { padding: 30px 0 58px; }
.section-contact address { font-style: normal; display: block; border-left: 1px solid #666; padding-left: 30px;}
.section-contact h2 { font-size: 28rem; }
.section-contact h3 { margin-bottom: 0; font-size: 28rem; font-family: "Hiragino Mincho ProN", "Noto Serif JP", serif; }
.section-contact p.telnum { font-size: 24rem; font-family: "Hiragino Mincho ProN", "Noto Serif JP", serif; }
.section-contact p strong{ font-size: 16rem; color: #666 }
@media (max-width: 1023px) {
	.section-contact address { padding-left: 20px;}
	.section-contact h2 { font-size: 25rem; }
}
/* ==================================================
   Map
================================================== */

.googlemap {width: 100%; height: 50vh;}
.googlemap iframe {width: 100%; height: 100%;}

@media (max-width: 1023px) {
}

/* ==================================================
   Footer
================================================== */

.site-footer { padding: 30px 0; background: #f2f2ef; font-size: 11rem; text-align: center; }

/* ==================================================
   Utility
================================================== */

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

/* ==================================================
   PAGE
================================================== */
.section-page { padding-bottom: 6vh}
.section-page .section-inner { border-bottom: 1px solid #ccc; padding-bottom: 60px}
.section-page h2 { margin-bottom: 45px}
.section-page .split { display: flex; justify-content: space-between; flex-wrap: wrap;}
.section-page .split .section-read {width: 50%}
.section-page .split .section-sidebox { display: block; height: auto; width: 45%; }
.section-page .split .section-sidebox img { display: block; height: auto; width: 100%; }

/* About */
.about-list {}
.about-list h3 { font-size: 22rem; text-align: left; margin-top: 60px;}
.list-imgtxt { display: block; list-style: none; margin: 30px auto; padding: 0;}
.list-imgtxt li { display: flex; justify-content: flex-start; flex-wrap: wrap; column-gap: 2%; margin-bottom: 20px;}
.list-imgtxt li figure { display: block; width: 23%; margin: 0 0 10px 0; }
.list-imgtxt li figure img { display: block; width: 100%; height: auto; }
.list-imgtxt li article { width: 75%}
.list-imgtxt li article h5 { font-family: serif; display: block; margin: 20px 0 10px 0; font-size: 18rem;}
.list-imgtxt li article p { font-size: 15rem; margin-bottom: 20px; line-height: 1.8 }

/* 商品リストNEW */
#eto-list { list-style: none; margin: 40px auto 0 auto; display: flex; justify-content: flex-start; flex-wrap: wrap; column-gap: 5%; padding: 0;}
#eto-list li { display: block; width: 30%; text-align: center; margin-bottom: 50px;}
#eto-list li a { display: flex; justify-content: center; align-items: center; width: 100%; margin-bottom: 10px;}
#eto-list li a img { display: block; max-width: 100%; height: auto;}
#eto-list li h6 { font-size: 16rem; font-weight: bold; color: #777; margin: 0;}
#eto-list li h6 strong { font-size: 20rem; font-weight: bold; display: inline-block; color: #111; font-family: serif; }
#eto-list li p { font-size: 15rem; display: block; margin-bottom: 0; color: #333; line-height: 1.6}
#eto-list li p.size{ }
#eto-list li p.price { font-weight: bold; font-size: 16rem; font-family: serif}
#eto-list li p.other { color: #A60022;}

#product-list h5 {font-size: 22rem; margin-bottom: 20px;}
ul.ningyou-list { list-style: none; margin: 40px auto 0 auto; display: flex; justify-content: flex-start; flex-wrap: wrap; column-gap: 4%; padding: 0;}
ul.ningyou-list li { display: block; width: 22%; text-align: center; margin-bottom: 50px;}
ul.ningyou-list li a { display: flex; justify-content: center; align-items: center; width: 100%; margin-bottom: 10px;}
ul.ningyou-list li a img { display: block; max-width: 100%; height: auto; max-height: 220px;}
ul.ningyou-list li h6 { font-size: 16rem; font-weight: bold; color: #777; margin: 0;}
ul.ningyou-list li h6 strong { font-size: 20rem; font-weight: bold; display: inline-block; color: #111; font-family: serif; }
ul.ningyou-list li p { font-size: 15rem; display: block; margin-bottom: 0; color: #333; line-height: 1.6}
ul.ningyou-list li p.size{ }
ul.ningyou-list li p.price { font-weight: bold; font-size: 17rem; font-family: serif}
ul.ningyou-list li p.other { color: #A60022}

/* 旧商品リスト */
#product-list { text-align: center; width: 100%; margin: 30px auto; border-width:1px 0 0 0; border-style: solid; border-color: #999;}
#product-list table {table-layout: fixed; margin: 30px auto; border-collapse: collapse; border: none}
#product-list table tbody { }
#product-list table tr {}
#product-list table tr td { border: none; padding: 0; line-height: 1.6; width: auto; overflow-wrap: anywhere;}
#product-list table tr td a { display: flex; align-items: center; }
#product-list table tr td a img { display: block; width: auto; height: auto; min-width: 200px; min-height: 200px; max-width: 360px; max-height: 360px; margin: 20px auto 5px auto; }

@media (max-width: 1023px) {
	.section-page { padding-top: 16vh}
	.section-page .split { display: block; }
	.section-page .split .section-read {width: 100%; margin-bottom: 40px;}
	.section-page .split .section-sidebox { width: 100%; }
	.section-page .split .section-sidebox img { }
	
	.about-list h3 { text-align: center}
	.list-imgtxt li { display: block; }
	.list-imgtxt li figure { display: block; width: 60%; margin: 0 auto 10px auto; }
	.list-imgtxt li figure img { }
	.list-imgtxt li article { width: 100%}
	.list-imgtxt li article h5 { text-align: center;}
	.list-imgtxt li article p { margin-bottom: 40px; }
	
	#eto-list { column-gap: 2%;}
	#eto-list li { width: 49%; margin-bottom: 50px;}
	#eto-list li h6 { font-size: 14rem; }
	#eto-list li h6 strong { font-size: 17rem; }
	#eto-list li p { font-size: 14rem; }
	#eto-list li p.size{ font-size: 12rem;}
	
	ul.ningyou-list { column-gap: 2%;}
	ul.ningyou-list li { width: 49%; margin-bottom: 25px;}
	ul.ningyou-list li a {margin-bottom: 5px;}
	ul.ningyou-list li a img {max-height: 140px;}
	ul.ningyou-list li h6 { font-size: 12rem; }
	ul.ningyou-list li h6 strong { font-size: 16rem; }
	ul.ningyou-list li p { font-size: 14rem; }
	ul.ningyou-list li p.size{ font-size: 12rem;}
	ul.ningyou-list li p.price { font-size: 15rem;}
	
	/* 旧商品リスト */
	#product-list table {table-layout: fixed; max-width: 100%; width: 100% }
	#product-list table tbody { width: 100%}
	#product-list table tr { width: 100%}
	#product-list table tr td {font-size: 14rem ; white-space: normal; word-break: break-word; width: 50%}
	#product-list table tr td a img {max-width: 160px; max-height: 160px; min-width: 80px; min-height: 80px; }
}

/* ==================================================
   Tablet / Mobile
================================================== */

@media (max-width: 1023px) {
  .sp-only { display: inline; }
  .pc-only { display: none; }
}

/* ==================================================
   Reduced Motion
================================================== */