/*!
Theme Name: minette
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: minette
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

minette is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments

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

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/

:root {
	--fz70: calc(70 / 16 * 1rem);
	--fz60: calc(60 / 16 * 1rem);
	--fz48: calc(48 / 16 * 1rem);
	--fz42: calc(42 / 16 * 1rem);
	--fz40: calc(40 / 16 * 1rem);
	--fz35: calc(35 / 16 * 1rem);
	--fz34: calc(34 / 16 * 1rem);
	--fz32: calc(32 / 16 * 1rem);
	--fz30: calc(30 / 16 * 1rem);
	--fz29: calc(29 / 16 * 1rem);
	--fz28: calc(28 / 16 * 1rem);
	--fz27: calc(27 / 16 * 1rem);
	--fz26: calc(26 / 16 * 1rem);
	--fz25: calc(25 / 16 * 1rem);
	--fz24: calc(24 / 16 * 1rem);
	--fz23: calc(23 / 16 * 1rem);
	--fz22: calc(22 / 16 * 1rem);
	--fz21: calc(21 / 16 * 1rem);
	--fz20: calc(20 / 16 * 1rem);
	--fz19: calc(19 / 16 * 1rem);
	--fz18: calc(18 / 16 * 1rem);
	--fz17: calc(17 / 16 * 1rem);
	--fz16: calc(16 / 16 * 1rem);
	--fz15: calc(15 / 16 * 1rem);
	--fz14: calc(14 / 16 * 1rem);
	--fz13: calc(13 / 16 * 1rem);
	--fz12_5: calc(12.5 / 16 * 1rem);
	--fz12: calc(12 / 16 * 1rem);
	--fz11: calc(11 / 16 * 1rem);
	--fz10: calc(10 / 16 * 1rem);
	--fz9: calc(9 / 16 * 1rem);
	--fz8: calc(8 / 16 * 1rem);

/*	--red: #CF372C;*/
/*	--red: #d82d24;*/
	--red: #e0201d;
	--yellow: #efc659;

}

@media (max-width: 768px) {
	:root {
		--fz70: clamp(10px, 19.0vw, 70px);
		--fz60: clamp(10px, 17.0vw, 60px);
		--fz48: clamp(10px, 14.31vw, 48px);
		--fz42: clamp(10px, 12.31vw, 42px);
		--fz40: clamp(10px, 11.31vw, 40px);
		--fz35: clamp(10px, 9.31vw, 35px);
		--fz34: clamp(10px, 9.0vw, 34px);
		--fz30: clamp(10px, 8.54vw, 32px);
		--fz30: clamp(10px, 7.99vw, 30px);
		--fz29: clamp(10px, 7.74vw, 29px);
		--fz28: clamp(10px, 7.43vw, 28px);
		--fz27: clamp(10px, 7.19vw, 27px);
		--fz26: clamp(10px, 6.92vw, 26px);
		--fz25: clamp(10px, 6.66vw, 25px);
		--fz24: clamp(10px, 6.40vw, 24px);
		--fz23: clamp(10px, 6.13vw, 23px);
		--fz22: clamp(10px, 5.84vw, 22px);
		--fz21: clamp(10px, 5.43vw, 21px);
		--fz20: clamp(10px, 5.33vw, 20px);
		--fz19: clamp(10px, 5.05vw, 19px);
		--fz18: clamp(10px, 4.78vw, 18px);
		--fz17: clamp(10px, 4.54vw, 17px);
		--fz16: clamp(10px, 4.25vw, 16px);
		--fz15: clamp(10px, 4.0vw, 15px);
		--fz14: clamp(10px, 3.72vw, 14px);
		--fz13: clamp(10px, 3.47vw, 13px);
		--fz12_5: clamp(10px, 3.32vw, 12.5px);
		--fz12: clamp(10px, 3.19vw, 12px);
		--fz11: clamp(10px, 2.94vw, 11px);
		--fz10: clamp(9px, 2.70vw, 10px);
		--fz9: clamp(8px, 2.5vw, 9px);
		--fz8: clamp(7px, 2.2vw, 8px);
	}
}


/* Normalize
--------------------------------------------- */

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
	 ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
	line-height: 1.15;
	-webkit-text-size-adjust: 100%;
}

/* Page遷移時のアニメーション
--------------------------------------------- */
body{
	animation: fadein 1.5s forwards;
}
@keyframes fadein {
	0% {opacity: 0}
	100% {opacity: 1}
}

body, button, input, select, optgroup, textarea {
    color: #000;
    font-size: var(--fz15);
    font-family: sans-serif;
    font-weight: 400;
    font-style: normal;
    line-height: 1.8;
    letter-spacing: 0.1em;
}


/* Common / Parts
--------------------------------------------- */

dl{
	margin:0;
}

dt {
	font-weight: 400;
}

dd {
	margin: 0;
}

.w1600 {
	width: 1600px;
	max-width: 88%;
	margin-left: auto;
	margin-right: auto;
}
.w1500 {
	width: 1500px;
	max-width: 88%;
	margin-left: auto;
	margin-right: auto;
}
.w1400 {
	width: 1400px;
	max-width: 88%;
	margin-left: auto;
	margin-right: auto;
}
.w1300 {
	width: 1300px;
	max-width: 88%;
	margin-left: auto;
	margin-right: auto;
}
.w1200 {
	width: 1200px;
	max-width: 88%;
	margin-left: auto;
	margin-right: auto;
}
.w1100 {
	width: 1100px;
	max-width: 88%;
	margin-left: auto;
	margin-right: auto;
}
.content-width-wide{
	width: 1060px;
	max-width: 88%;
	margin-left: auto;
	margin-right: auto;
}
.w1000,
.content-width {
	width: 1000px;
	max-width: 88%;
	margin: 0 auto;
}
.w900,
.w-narrow {
	width: 900px;
	max-width: 88%;
	margin-left: auto;
	margin-right: auto;
}
.w-narrow {
	max-width: 80%;
}
.w800 {
	width: 800px;
	max-width: 88%;
	margin-left: auto;
	margin-right: auto;
}
.content-width-narrow,
.w780 {
	width: 780px;
	max-width: 88%;
	margin-left: auto;
	margin-right: auto;
}
.w100p{
	width:100%;
}

.content-width-wide .content-width{
	max-width:100%;
}


.small{
	font-size:0.87em;
	letter-spacing:0;
	margin:0;
}
.medium{

}

.heading{
/* 	line-height:1.3; */
}

.white{
	color:#fff;
}

.right{
	text-align: right;
}



@media (min-width: 769px) {
	.pc-none{
		display:none;
	}
	.pc-flex{
		display:flex;
	}
	
	.font-script{
		font-size:72px;
	}

}
@media (max-width: 768px) {
	.sp-none{
		display:none;
	}
	.sp-flex{
		display:flex;
	}

	.main-header {
		margin-bottom: 30px;
	}
	.main-title {
		font-size: var(--fz16);
	}
	.main-title + p {
		width:80%;
		text-align:left;
		margin: 1.5em auto 0;
	}

	.title-wrap {
	    margin-bottom: 30px;
	}

	.content-block > .inner{
		padding:50px 0 80px;
	}
	
	.btn-wrap a{
		font-size:var(--fz15);
	}
	.btn-wrap a span.btn-inner{
		padding: 5px 20px;
	}
	
	.btn-arrow{
		margin-top:1em;
	}
	.btn-arrow > *{
		margin-left: 0;
		margin-right: auto;
	}
	
	.btn-arrow2 > *{
		font-size: inherit;
	}
	
	.font-script{
		font-size:var(--fz44);
	}
	
}


/* Layout
--------------------------------------------- */

#masthead{
	display:flex;
	justify-content: space-between;
	width:100%;
	padding: 20px 3% 0;
	position:fixed;
	top:0;
	left:0;
	z-index:4;
	transition: all 0.3s ease-in-out 0s;
}
.home #masthead.hav-onword{
/* 	padding-top:40px; */
}
.home #masthead.hav-onword .hamburger-overlay{
/* 	top: 35px; */
}

#masthead .site-branding{
	width:56px;
	position: relative;
    z-index: 2;
}
#masthead .site-branding img{
	width:100%;
}

main#primary{
	padding:0px 0 200px;
}


.fixed-menu{
	font-size: var(--fz13);
    position: fixed;
    top: 90px;
    right: 32px;
    transition: all 0.3s ease-in-out 0s;
}
.fixed-menu a,
.footer-sns-link a{
	display:flex;
	justify-content: center;
	align-items:center;
	width:38px;
	min-height:38px;
	text-align:center;
    border:1px solid var(--red);
    background:transparent;
    border-radius:19px;
    padding: 6px;
    margin-bottom:10px;
}
.fixed-menu a:hover,
.footer-sns-link a:hover{
	color:#fff;
    background:var(--red);
}
.fixed-menu a.insta-link{
    padding: 10px 5px;
}
.fixed-menu a img,
.fixed-menu a svg,
.footer-sns-link a svg{
	width:100%;
	max-width:19px;
	margin: auto;
}
.fixed-menu a.shopping-link img,
.fixed-menu a.shopping-link svg,
.footer-sns-link a.shopping-link svg{
	max-width:24px;
	position:relative;
	left:-2px;
}
.fixed-menu a.insta-link .tategaki{
	line-height:1;
    margin:0.75em auto 0;
}
svg .line{
	fill:none;
	stroke:var(--red);
	stroke-width:0.8496;
	stroke-miterlimit:10;
    transition: all 0.3s ease-in-out 0s;
}
svg .paint{
	fill:var(--red);
    transition: all 0.3s ease-in-out 0s;
}
.fixed-menu a:hover svg .line,
.footer-sns-link a:hover svg .line,
.nav-overlay.active + .fixed-menu a svg .line{
	stroke:#fff;
}
.fixed-menu a:hover svg .paint,
.footer-sns-link a:hover svg .paint,
.nav-overlay.active + .fixed-menu a svg .paint{
	fill:#fff;
}

.nav-overlay.active + .fixed-menu a{
	color:#fff;
	border-color:#fff;
}

#shop-info{
	color:#fff;
	background-color: var(--red);
	padding:160px 0 180px;
}
#shop-info .logo{
	width:113px;
	margin-bottom:40px;
}
#shop-info .shop-name-tel{
	margin-bottom:60px;
}
#shop-info .shop-name-tel .shop-name{
	font-size: var(--fz23);
	margin-bottom:0.5em;
}
#shop-info .shop-name-tel .tel-num{
	font-size: var(--fz21);
	letter-spacing: 0.3em;
}
#shop-info .shop-name-tel .tel-num span,
#shop-info .shop-name-tel .tel-num a{
	color:#fff;
	border-bottom: 1px solid #fff;
	display: inline-block;
	white-space:nowrap;
}
#shop-info .shop-name-tel .tel-num span img,
#shop-info .shop-name-tel .tel-num a img{
    max-width: 21px;
    display: inline-block;
    margin-right: 1em;
}
#shop-info .shop-data dl{
	display:flex;
}
#shop-info .shop-data{
	margin-bottom:90px;
}
#shop-info .shop-data dl{
	display:flex;
	flex-wrap:wrap;
	margin-bottom:60px;
}
#shop-info .shop-data dl dt{
	width:185px;
	font-size: var(--fz20);
}
#shop-info .shop-data dl dd{
	width:calc(100% - 185px);
}

#access-map{
	
}
#access-map iframe{
	width:100%;
	height:470px;
}

footer#colophon{
	color: var(--red);
	background:#fff;
	padding:85px 0 45px;
}
footer#colophon a{
	color:var(--blue);
	box-sizing: border-box;
}
footer#colophon .inner{
	text-align:center;
}
footer#colophon .logo{
	max-width:112px;
	margin:0 auto 40px;
}

.footer-sns-link{
	display:flex;
	justify-content: center;
	gap:10px;
	margin-bottom:40px;
}
.footer-sns-link a {
    width: 40px;
    min-height: 40px;
    border-radius: 20px;
    margin:0;
}
.footer-sns-link a svg {
    max-width: 20px;
}
.footer-sns-link a.shopping-link svg {
    max-width: 26px;
}

footer#colophon nav *{
	display:flex;
	justify-content: center;
	align-items:center;
}
footer#colophon nav ul{
	padding:0;
	margin:0;
	list-style:none;
}
footer#colophon nav > ul > li{
	font-size: var(--fz24);
}
footer#colophon nav > ul > li + li::before{
	content:"／";
	margin-right:0.25em;
}
footer#colophon nav > ul > li ul{
	font-size: var(--fz15);
	margin-left:1em;
	margin-top:0.4em;
}
footer#colophon nav > ul > li + li{
	margin-left:0.25em;
}
footer#colophon nav > ul ul > li + li{
	margin-left:1em;
}

footer#colophon nav > ul.footer-sub-nav{
	gap: 40px;
	margin-top:60px;
}
footer#colophon nav > ul.footer-sub-nav li{
	font-size: var(--fz15);
	margin: 0;
}
footer#colophon nav > ul.footer-sub-nav li + li::before{
	display:none;
}

footer#colophon .site-info{
	margin-top:100px;
}
footer#colophon address{
	font-size: var(--fz13);
	line-height: 1.5;
}

@media (min-width: 769px) {

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

	#shop-info{
		padding: 90px 0 0px;
	}
	#shop-info .logo {
	    width: 100px;
	    margin-bottom: 30px;
	}
	#shop-info .shop-name-tel {
	    margin-bottom: 40px;
	}
	#shop-info .shop-name-tel .shop-name {
	    font-size: var(--fz16);
	    margin-bottom: 0.3em;
	}
	#shop-info .shop-name-tel .tel-num {
	    letter-spacing: 0.2em;
	}
	#shop-info .shop-data dl{
		display:block;
		margin-bottom: 3em;
	}
	#shop-info .shop-data dl dt,
	#shop-info .shop-data dl dd{
		width:100%;
	}
	#shop-info .shop-data dl dt {
	    font-size: var(--fz16);
	}
	#access-map{
		max-width: 100%;
	}
	#access-map iframe {
	    height: 65vw;
	}
	
	footer#colophon{
		padding: 60px 0 80px;
	}
	footer#colophon .logo {
	    max-width: 100px;
	}
	footer#colophon nav *{
		display:block;
	}
	footer#colophon nav .footer-sub-nav{
		display:flex;
	}
	footer#colophon nav > ul > li {
	    font-size: var(--fz20);
	}
	footer#colophon nav > ul > li + li {
	    margin-top:2em;
	}
	footer#colophon nav > ul > li + li::before {
	    display:none;
	}
	footer#colophon nav > ul > li ul {
	    font-size: var(--fz14);
	    margin: 0;
	}
	footer#colophon .site-info {
	    margin-top: 50px;
	}
}