@charset "utf-8";

/**************************************************
 *	HTML5 CSS Reset
 **************************************************/
*,::before,::after{box-sizing:border-box;border-style:solid;border-width:0;}html{line-height:1.15;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;}body{margin:0;}main{display:block;}p,table,blockquote,address,pre,iframe,form,figure,dl{margin:0;}h1,h2,h3,h4,h5,h6{font-size:inherit;line-height:inherit;font-weight:inherit;margin:0;}ul,ol{margin:0;padding:0;list-style:none;}dt{font-weight:bold;}dd{margin-left:0;}hr{box-sizing:content-box;height:0;overflow:visible;border-top-width:1px;margin:0;clear:both;color:inherit;}pre{font-family:monospace,monospace;font-size:inherit;}address{font-style:inherit;}a{background-color:transparent;text-decoration:none;color:inherit;}abbr[title]{text-decoration:underline;text-decoration:underlinedotted;}b,strong{font-weight:bolder;}code,kbd,samp{font-family:monospace,monospace;font-size:inherit;}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sub{bottom:-0.25em;}sup{top:-0.5em;}img,embed,object,iframe{vertical-align:bottom;}button,input,optgroup,select,textarea{-webkit-appearance:none;appearance:none;vertical-align:middle;color:inherit;font:inherit;background:transparent;padding:0;margin:0;outline:0;border-radius:0;text-align:inherit;}[type="checkbox"]{-webkit-appearance:checkbox;appearance:checkbox;}[type="radio"]{-webkit-appearance:radio;appearance:radio;}button,input{overflow:visible;}button,select{text-transform:none;}button,[type="button"],[type="reset"],[type="submit"]{cursor:pointer;-webkit-appearance:none;appearance:none;}button[disabled],[type="button"][disabled],[type="reset"][disabled],[type="submit"][disabled]{cursor:default;}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0;}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText;}select::-ms-expand{display:none;}option{padding:0;}fieldset{margin:0;padding:0;min-width:0;}legend{color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline;}textarea{overflow:auto;}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto;}[type="search"]{outline-offset:-2px;}[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}label[for]{cursor:pointer;}details{display:block;}summary{display:list-item;}[contenteditable]{outline:none;}table{border-collapse:collapse;border-spacing:0;}caption{text-align:left;}td,th{vertical-align:top;padding:0;}th{text-align:left;font-weight:bold;}template{display:none;}[hidden]{display:none;}

/**************************************************
 *	initial settings
 **************************************************/
html,body{
	height:100%;
	min-height: 100vh;
	padding:0;
	margin: 0;
	scroll-behavior: smooth;
}
body{
	font-family:"Meiryo","メイリオ","Helvetica Neue", "Helvetica", "Hiragino Kaku Gothic ProN", "HiraKakuPro-W3", "Arial", "Yu Gothic", sans-serif;
	font-size:13px;
	letter-spacing:0.5px;
	line-height:1.4;
	color:#333;
	background:#fff;
	-webkit-text-size-adjust: 100%;
	-moz-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	text-size-adjust: 100%;
	animation:bodyFadeIn 1s linear 1;
}
@keyframes bodyFadeIn{
	0%{opacity:0;}
	100%{opacity:1;}
}

body a{
	transition: color 0.3s ease, opacity 0.3s ease, text-decoration-color 0.3s ease;
}

a:link   {color:#333;text-decoration:none;}
a:visited{color:#333;text-decoration:none;}
a:active {color:#333;text-decoration:none;}
a:hover  {color:#333;text-decoration:none;}


/* ================================================
   ページ全体のレイアウト
================================================ */
body.site,
.site-header,
.site-main,
.site-footer {
  width: 100%;
  margin: 0 auto;
  position: relative;
  display: block;
}

/* CSS変数（高さ管理） */
:root {
  --header-height: 180px;
  --footer-height: 60px;
}

/* ヘッダー */
.site-header {
  min-height: var(--header-height);
}

/* メイン */
.site-main {
  height: auto;
  min-height: calc(100vh - (var(--header-height) + var(--footer-height)));
  display: flex;
}

/* メインのインナー */
.main__inner {
  min-height: 0;
  margin: auto;
  padding:0 0 50px 0;
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
}

/* フッター */
.site-footer {
  min-height: var(--footer-height);
}


/**************************************************
 *	共通
 **************************************************/
.container{
	 width:100%;
 }
.font-Q{
	font-family:"Questrial";
}


/* =========================================
   site-header
   ========================================= */

.site-header {
    width: 100%;
}

/* サイトタイトル
   ---------------------------------------- */
.site-header__title {
    width: 100%;
    margin: 30px auto;
    text-align: center;
}

.site-title {
    width: 100%;
    margin: 0 auto 10px;
    font-size: 30px;
    line-height: 1.1;
    display: block;
}

.site-title > span {
    display: block;
}

.site-title > span:nth-child(2) {
    font-size: 24px;
}

@media (max-width: 340px) {
    .site-title {
        font-size: 26px;
    }
}

/* サイトブランド
   ---------------------------------------- */
.site-brand > a {
    text-decoration: underline 1px dotted #ccc;
    text-underline-offset: 2px;
    transition: all 0.5s linear;
}

.site-brand > a:hover {
    text-decoration: underline 1px dotted #000;
}

/* カテゴリーナビ
-------------------------------------*/
.category-nav__list{
	width:96%;
	max-width:1000px;
	margin:0 auto 30px auto;
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	align-items:center;
	gap:10px;
	padding:0;
	list-style:none;
}
.category-nav__item{
	text-align:center;
	flex:0 0 calc( (100% - 10px * 4) / 5 );
}
.category-nav__link{
	display:block;
	padding:8px 12px;
	font-size:13px;
	line-height:1.1;
	letter-spacing:0.3px;
	text-decoration:none;
	border:1px solid rgba(0,0,0,0.18);
	border-radius:8px;
	background:rgba(255,255,255,0.85);
	opacity:0.9;
	transition: opacity 0.2s ease, transform 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}
.category-nav__link:hover{
	opacity:1;
	transform:translateY(-1px);
	border-color:rgba(0,0,0,0.35);
	background:rgba(255,255,255,1);
	text-decoration:none;
}
.category-nav__link--current{
	opacity:1;
	border-color:rgba(0,0,0,0.55);
	background:rgba(0,0,0,0.06);
}
@media (max-width: 768px){
	.category-nav__list{
		gap:8px 10px;
	}
	.category-nav__link{
		padding:10px 12px;
		font-size:12px;
		border-radius:7px;
	}
}
@media (max-width: 500px){
	.category-nav__list{
		width:90%;
		margin:0 auto 30px auto;
		gap:8px 10px;
	}
	.category-nav__item{
		flex:1 1 96%;
		text-align:center;
	}
}

/* =========================================
   site-main
   ========================================= */
.site-main {
    width: 100%;
}

/* ページ見出し
   ---------------------------------------- */
.page-heading {
    margin: 0 auto 30px auto;
    text-align: center;
}

.page-heading__title {
    font-size: 20px;
    line-height: 1.6;
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
}

.page-heading__label {
    display: block;
}

/* パンくず
   ---------------------------------------- */
.breadcrumb {
    margin-bottom: 10px;
    padding: 10px 30px;
    font-size: 12px;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
	background:#f9f9f9;
}

/**************************************************
 *	footer
  **************************************************/
.footer__inner{
	padding:30px 0 0 0;
	border-top:1px solid #ddd;
	background:#f9f9f9;
  }
.store-link{
	text-align: center;
	margin: 0 auto 10px auto;
}
.store-link__name{
	font-size: 30px;
}
.store-link__desc{
	font-size:12px;
}
/* フッターナビ
-------------------------------------*/
.footer-nav{
	width: 100%;
	margin: 0 auto;
	padding: 12px 0;
}
.footer-nav__list{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 10px 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.footer-nav__list > li{
	display: block;
}
.footer-nav__link{
	display: block;
	padding: 8px 12px;
	font-size: 13px;
	line-height: 1.1;
	letter-spacing: 0.3px;
	text-decoration: none;
	border: 1px solid rgba(0,0,0,0.18);
	border-radius: 8px;
	background: rgba(255,255,255,0.85);
	opacity: 0.9;
	transition: opacity 0.2s ease, transform 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}
.footer-nav__link:hover{
	opacity: 1;
	transform: translateY(-1px);
	border-color: rgba(0,0,0,0.35);
	background: rgba(255,255,255,1);
}
@media (max-width: 768px){
	.footer-nav{
		padding: 10px 0;
	}
	.footer-nav__list{
		gap: 8px 10px;
	}
	.footer-nav__link{
		padding: 10px 12px;
		font-size: 12px;
		border-radius: 7px;
	}
}

/* コピーライト
-------------------------------------*/
div.footer__copyright {
	width: 100%;
	padding: 10px 0 5px 0;
	text-align: center;
	font-size: 12px;
	line-height: 1.1;
}

/**************************************************
 *	UI
 **************************************************/

/* トップへスクロール
-------------------------------------*/
.jg-scroll-top {
	position: fixed;
	right: 20px;
	bottom: 20px;
	width: 52px;
	height: 52px;
	background: #e91e63;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	box-shadow: 0 6px 15px rgba(0,0,0,0.25);
	opacity: 0;
	visibility: hidden;
	transform: translateY(15px);
	transition: all 0.3s ease;
	z-index: 9999;
}
.jg-scroll-top.is-show {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.jg-scroll-top__arrow {
	position: relative;
	width: 14px;
	height: 14px;
	border-left: 3px solid #fff;
	border-top: 3px solid #fff;
	transform: rotate(45deg);
	margin-top: 6px;
}
.jg-scroll-top:hover {
	background: #c2185b;
	transform: translateY(-4px);
	box-shadow: 0 8px 18px rgba(0,0,0,0.3);
}
@media (max-width: 768px) {
	.jg-scroll-top {
		right: 15px;
		bottom: 15px;
		width: 46px;
		height: 46px;
	}
	.jg-scroll-top__arrow {
		width: 12px;
		height: 12px;
		border-width: 3px;
	}
}
