@import url(//use.fontawesome.com/releases/v5.0.11/css/all.css);
@import url("https://fonts.googleapis.com/css?family=Sawarabi+Mincho&display=swap");
@import url("normalize.css");
@import url("nav.css");
@media screen and (min-width: 768px) {
	.pc-none {
		display: none !important;
	}
}

@media screen and (max-width: 768px) {
	.sp-none {
		display: none !important;
	}
}

.ff-swarabimin {
	font-family: "Sawarabi Mincho", sans-serif;
}

.fc-green {
	color: #486652;
}

body {
	font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Yu Gothic", YuGothic, Verdana, Meiryo, sans-serif;
	font-size: 14px;
	font-size: 1.4rem;
	color: #111;
	box-sizing: border-box;
	height: 100%;
}

a:link,
a:visited {
	color: #111;
	text-decoration: none;
}

a:hover {
	color: #3dace2;
	text-decoration: none;
	opacity: 0.85;
}

a {
	transition: opacity 0.3s ease-out;
}

h1,
h2,
h3,
h4 {
	font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
}

/* ========================================================================== */
/* layout
/* ========================================================================== */

/* flexbox
   ========================================================================== */
.f-container {
	display: flex;
}

.f-container_sp {
	display: flex;
}

.f-container .f-d-col {
	flex-direction: column;
}

.f-jc-sb {
	justify-content: space-between;
}

.f-jc-c {
	justify-content: center;
}

/* header
   ========================================================================== */
header {
	width: 100%;
	padding: 14px 40px;
	display: flex;
	position: absolute;
	z-index: 900;
}

ul.head-add {
	font-size: 20px;
	padding: 14px 50px 0;
	font-family: "Sawarabi Mincho", sans-serif;
	text-align: right;
}

ul.head-add li {
	display: inline-block;
	padding: 0 0.5em;
	color: #486652;
}

ul.head-add li i {
	padding-right: 0.3em;
}

ul.head-add li a:link,
ul.head-add li a:visited {
	color: #486652;
	text-decoration: none;
}

ul.head-add li a:hover {
	color: #3dace2;
	text-decoration: none;
}

/* footer
   ========================================================================== */
footer {
	width: 100%;
	margin: 88px 0 0;
}

.footer-h2 {
	width: 40%;
	max-width: 360px;
	margin: 0 auto;
}

.footer-h2 img {
	width: 100%;
	text-align: center;
}

ul.footer-add {
	font-size: 16px;
	text-align: center;
	padding: 32px 0;
}

ul.footer-add li {
	display: inline-block;
	text-align: center;
	padding: 0 0.5em;
}

.footer-time-wrap{
	display: flex;
	justify-content: center;
	gap: 1em;
	font-size: 16px;
	padding: 0 0 32px;
}
.footer-time{
	display: block;
}

.copyright {
	width: 100%;
	margin: 0;
	font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Yu Gothic", YuGothic, Verdana, Meiryo, sans-serif;
	font-size: 10px;
	color: #fff;
	padding: 10px;
	background-color: #486652;
	text-align: center;
}

.copyright a:link,
.copyright a:visited {
	color: #fff;
	text-decoration: none;
}

.copyright a:hover {
	color: #3dace2;
	text-decoration: none;
}

#page_top {
	width: auto;
	height: 100px;
	position: fixed;
	right: 20px;
	bottom: -40px;
	z-index: 999;
	transform: translate3d(0, 0, 0);
}

#page_top img {
	height: 100%;
	width: auto;
}

/* main title
/* ========================================================================== */

.main-title_wrap {
	width: 100%;
	height: 100vh;
	max-height: 680px;
	margin: 0 auto;
	position: relative;
	background-size: cover;
	background-position: center center;
}

.bg-item {
	background-image: url("../img/item/main_ttlbg.jpg");
}

.bg-kissa {
	background-image: url("../img/store/main_ttlbg_shiratama.jpg");
}

.bg-access {
	background-image: url("../img/access/main_ttlbg.jpg");
}

.bg-history {
	background-image: url("../img/history/main_ttlbg.jpg");
}

/* 塩豆大福 */
.bg-season.shiomame-daihuku { background-image: url("../img/season/shiomamedaifuku.png");}

/* ハート最中 */
.bg-season.heart-monaka { background-image: url("../img/season/h_monaka.jpg");}

/* いちご大福 */
.bg-season.ichigo-daifuku { background-image: url("../img/season/ichigo_daifuku.jpg");}

/* 桜餅 */
.bg-season.sakura-mochi { background-image: url("../img/season/main_ttlbg_sakura_202402.jpg");}

/* 柏もち */
.bg-season.kashiwa-mochi { background-image: url("../img/season/header_kashiwa.jpg");}

/* わらび餅 */
.bg-season.warabi-mochi { background-image: url("../img/season/header_warabi_202305.jpg");}

/* 水まんじゅう */
.bg-season.mizu-manju { background-image: url("../img/season/header_mizumanju_202505.jpg");}

/*かき氷*/
.bg-season.kakigoori { background-image: url("../img/season/main_ttlbg_kakigoori_202311.jpg");}

/*栗蒸し羊羹*/
.bg-season.kurimushi-yokan{ background-image: url("../img/season/main_ttlbg.jpg");}

/*栗きんとん*/
.bg-season.kuri-kinton{ background-image: url("../img/season/main_ttlbg20201116.jpg");}

/*青玉ぜんざい*/
.bg-season.aotama-zenzai{ background-image: url("../img/season/main_ttlbg_aotama_202602.jpg");}

/*花びら餅*/
.bg-season.hanabira-mochi{ background-image: url("../img/season/hanabiramochi.jpg");}

.main-title {
	width: 100%;
	height: 100%;
	max-width: 1100px;
	margin: 0 auto 0;
}

.main-title h1 {
	font-size: 40px;
	font-weight: bold;
	color: #486652;
	width: 100%;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

.main-title h1.white {
	font-size: 40px;
	font-weight: bold;
	color: #fff;
	width: 100%;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.75);
}

/* Pankuzu(historyページのみhistory.css内に記述)
/* ========================================================================== */
ul.pankuzu {
	font-size: 12px;
	color: #486652;
	padding: 12px 0;
	margin: 0 auto 52px;
}

ul.pankuzu li {
	display: inline-block;
	padding-right: 0.5em;
}

/* option commonparts
/* ========================================================================== */
.wrap1100 {
	width: 100%;
	max-width: 1100px;
	margin: 0 auto;
	box-sizing: border-box;
}

.wrap-washi {
	width: 100%;
	margin: 0 auto;
	background: url("../img/common/washi_bg.jpg");
	padding: 80px 0;
}

h2.center-h2 {
	width: 100%;
	text-align: center;
	font-size: 36px;
	line-height: 1.65;
	margin-bottom: 1em;
}

/* page-nav
/* ========================================================================== */
#page-nav {
	margin: 0 auto 80px;
}

#page-nav ul {
	width: 100%;
	flex-wrap: wrap;
}

#page-nav ul li {
	width: calc((100% / 2) - 10px);
	margin-bottom: 20px;
}

#page-nav ul li img {
	width: 100%;
}

#page-nav ul li figure {
	margin-bottom: 10px;
}

/* ========================================================================== */
/* SP
/* ========================================================================== */

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

	/* flexbox
   ========================================================================== */
	.f-container {
		flex-direction: column;
	}

	.f-container .f-d-col {
		flex-direction: column;
	}

	.f-jc-sb {
		justify-content: space-between;
	}

	.f-jc-c {
		justify-content: center;
	}

	/* header
   ========================================================================== */
	header {
		width: 100%;
		padding: 14px 20px;
	}

	.head-logo img {
		height: 44px;
		width: auto;
	}

	ul.head-add {
		font-size: 20px;
		padding: 14px 50px 0;
	}

	/* footer
   ========================================================================== */
	footer {
		width: 100%;
		margin: 40px 0 0;
	}

	ul.footer-add {
		font-size: 14px;
		padding: 20px 0;
	}

	ul.footer-add li {
		display: block;
		width: 100%;
	}

	.footer-time-wrap{
		font-size: 14px;
		padding: 0 0 20;
	}

	/* main title
/* ========================================================================== */

	.main-title_wrap {
		height: 50vh;
	}

	.main-title h1 {
		top: auto;
		bottom: 15px;
		font-size: 28px;
		padding-left: 20px;
		color: #fff;
		/*スマホ時white*/
	}

	.main-title h1.white {
		top: auto;
		bottom: 15px;
		font-size: 28px;
		padding-left: 20px;
	}

	/* Pankuzu(historyページのみhistory.css内に記述)
/* ========================================================================== */
	ul.pankuzu {
		margin: 0 auto 20px;
		padding: 12px;
	}

	/* option commonparts
/* ========================================================================== */
	.wrap1100 {
		padding: 0 16px;
	}

	.wrap-washi {
		padding: 40px 0;
	}

	h2.center-h2 {
		width: 100%;
		text-align: center;
		font-size: 28px;
		line-height: 1.65;
		margin-bottom: 1em;
	}

	/* page-nav
/* ========================================================================== */
	#page-nav {
		margin: 0 auto 36px;
	}

	#page-nav ul li {
		width: calc((100% / 2) - 5px);
		margin-bottom: 10px;
	}

	/* page_top
/* ========================================================================== */
	#page_top {
		width: auto;
		height: 70px;
		position: fixed;
		right: 10px;
		bottom: -30px;
	}
}