/*
 Theme Name:   Shop Child
 Description:  TwentyTwentythree Child Theme
 Template:     twentytwentythree
*/

/* == 全　体 == */
:root {
	--base--color : #156965;

	/* フォントサイズ */
	--wp--preset--font-size--large : 22px;
	--wp--preset--font-size--x-large : 35px;
	--wp--preset--font-size--xx-large : clamp(2rem, calc(2.5rem + ((1vw - 0.48rem) * 8.4135)), 2.75rem);
 }
html {scroll-behavior: smooth;}
* {box-sizing: border-box;}

/* 背景画像ランダム表示 */
body {
	background-image: url("/shop/cmswp-shop/wp-content/uploads/2025/07/body-bg01.webp");
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	background-attachment: fixed;
	line-height: 1.4;
}
.background1 {background-image: url("/shop/cmswp-shop/wp-content/uploads/2025/07/body-bg02.webp");}
.background2 {background-image: url("/shop/cmswp-shop/wp-content/uploads/2025/07/body-bg03.webp");}
.background3 {background-image: url("/shop/cmswp-shop/wp-content/uploads/2025/07/body-bg04.webp");}
.background4 {background-image: url("/shop/cmswp-shop/wp-content/uploads/2025/07/body-bg05.webp");}

/* 細々 */
a, a:hover {text-decoration: none;}
iframe {
	max-width: 100%;
	min-width: auto !important;
}
.eapps-instagram-feed {
	margin-top: 0;
}
.nowrap {display: inline-block;}
.font-mincho {font-family: var(--wp--preset--font-family--source-serif-pro);}
time {
	display: block;
	min-width: 6.5em;
	color: var(--base--color);
}
time::before {
	content: "●";
}
/* ボタン */
.wp-block-button a {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--base);
	border-radius: 30px;
	padding: .2em 1em;
}

/* -- ヘッダー ------------------------------------------ */
header {
	padding: 20px 0;
}
header .logo {
	position: absolute;
	transform: translateX(-50%);
	top: 0;
	left: 50%;
	z-index: 300;
	width: 12.5%;
	max-width: 200px;
	min-width: 120px;
	background-color: var(--base--color);
	border-radius: 0 0 15% 15%;
	text-align: center;
	padding: 10px 8px 13px;
}
header .logo img {
	width: 96%;
	max-width: 150px;
}
header nav ul.wp-block-navigation__container>li>a {
	background-image: url("/shop/cmswp-shop/wp-content/uploads/2025/07/flower-w.png");
	background-repeat: no-repeat;
	background-position: left -8px center;
	text-shadow: var(--base--color) 1px 1px 4px,var(--base--color) -1px 1px 4px,var(--base--color) 1px -1px 4px,var(--base--color) -1px -1px 4px;
	color: #fff !important;
	min-height: 40px;
	font-weight: 600;
	letter-spacing: .08em;
	padding: 9px 0 0 35px !important;
}
header nav ul.wp-block-navigation__container>li>a:hover,
header nav ul.wp-block-navigation__container>li.current-menu-item>a {
	background-image: url("/shop/cmswp-shop/wp-content/uploads/2025/07/flower-y.png");
	color: #FFFB93 !important;
}
.wp-block-navigation__responsive-container-close svg,
.wp-block-navigation__responsive-container-open svg {
	fill: var(--base--color);
	height: 45px;
	width: 45px;
	background: rgba(255, 255, 255, .8);
	border-radius: 10px;
}
.wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open {
    background-color: rgba(1,105,101,.9);
}
/* -- フッター ------------------------------------------ */
footer {
	margin: 0 !important;
	padding: 10px 0 5px;
}
footer .shop-info p,
footer .access,
footer .tel-no {
	background-color: var(--base--color);
	border-radius: 30px;
	line-height: 1.4;
	font-size: var(--wp--preset--font-size--small);
	color: #fff;
}
footer .shop-info p {
	display: inline-block;
	font-feature-settings: "palt";
	line-height: 1.2;
	padding: .3em 1.2em .2em;
}
footer .access a,
footer .tel-no a {
	display: block;
	height: 2.4em;
	color: #fff;
	padding: .5em 1em 0 1em;
}
footer .access a {
	background-image: url(/shop/cmswp-shop/wp-content/uploads/2025/07/icon-access.png);
	background-position: left 1em top 6px;
	background-repeat: no-repeat;
	padding-left: 2.6em;
}
footer .tel-no strong {
	font-size: var(--wp--preset--font-size--large);
	font-weight: 400;
	vertical-align: bottom;
	line-height: 1;
}
footer .wp-block-columns {
	margin: 0;
}
.copyright {
	font-size: var(--wp--preset--font-size--small);
	color: var(--base--color);
}
/* -- コンテンツ ---------------------------------------- */
.wp-site-blocks {
	width: 96%;
	max-width: 1480px;
	margin: auto;
	padding: 0;
}
main {
	position: relative;
	clip-path: polygon(45px 100%, 0 calc(100% - 45px), 0 45px, 45px 0, calc(100% - 45px) 0, 100% 45px, 100% calc(100% - 45px), calc(100% - 45px) 100%);
	background: rgba(242,245,234,.9);
	/*background: linear-gradient(135deg, transparent 35px, rgba(242,245,234,.9) 0) top left,
	linear-gradient(-135deg, transparent 35px, rgba(242,245,234,.9) 0) top right,
	linear-gradient(-45deg, transparent 35px, rgba(242,245,234,.9) 0) bottom right,
	linear-gradient(45deg, transparent 35px, rgba(242,245,234,.9) 0) bottom left;
	background-size: 50% 50%;
	background-repeat: no-repeat;*/
	margin: 0 !important;
	padding: 10px;
}
main::before {
	content: "";
	display: block;
	position: absolute;
	width: calc(100% - 20px);
	max-width: 1460px;
	height: calc(100% - 20px);
	top: 10px;
	background-color: var(--base--color);
	clip-path: polygon(40px 100%, 0 calc(100% - 40px), 0 40px, 40px 0, calc(100% - 40px) 0, 100% 40px, 100% calc(100% - 40px), calc(100% - 40px) 100%, calc(100% - 40px) calc(100% - 2px), calc(100% - 2px) calc(100% - 40px), calc(100% - 2px) 40px, calc(100% - 40px) 2px, 40px 2px, 2px 40px, 2px calc(100% - 40px), 40px calc(100% - 2px), calc(100% - 40px) calc(100% - 2px), calc(100% - 40px) 100%);
}
main .inner {
	scroll-behavior: smooth;
	position: relative;
	margin: 2px 0 !important;
	padding: 7.5% 45px 30px;
}
main .wp-block-columns:has(.title-area) {
	max-width: 1140px;
	margin: auto;
}
.title-area .wp-block-heading,
.title-area .wp-block-query-title,
.title-area .wp-block-post-title,
.main-copy {
	font-family: var(--wp--preset--font-family--source-serif-pro);
	font-feature-settings: "palt";
	color: var(--base--color);
}
.title-area .wp-block-heading,
.title-area .wp-block-query-title,
.title-area .wp-block-post-title {
	height: 110px;
	background-image: url("/shop/cmswp-shop/wp-content/uploads/2025/07/pagetitle_flower.png");
	background-repeat: no-repeat;
	background-position: left top;
	font-size: var(--wp--preset--font-size--x-large);
	text-align: left;
	padding: 45px 0 0 50px;
}
.entry-content>h2.wp-block-heading {
	font-size: var(--wp--preset--font-size--large);
	margin-top: 2em;
	margin-bottom: 5px;
}
.main-copy {
	font-size: var(--wp--preset--font-size--xx-large);
}
.scroll-link {
	background: url("/shop/cmswp-shop/wp-content/uploads/2025/07/scroll-link-bg.png") no-repeat center bottom;
	font-size: var(--wp--preset--font-size--small);
	text-align: center;
	color: var(--base--color);
	margin-top: 1em;
	padding-bottom: .5em;
}
/* -- トップページ -- */
body.home main .top-copy-area {
	text-align: center;
}
body.home main .top-copy-area p {
	margin-top: .5em;
}
body.home main .item-btn-list {
	gap: 5px;
	width: 90%;
	max-width: 1140px;
	margin: 1em auto;
}
body.home main .item-btn-list figcaption {
	font-size: var(--wp--preset--font-size--small);
	color: var(--base--color);
	margin: -.3em 0 0 0;
}
body.home main #news,
body.home main #instagram {
	padding-top: 8.5%;
}
/* アクセス */
.shop-address {
	font-size: var(--wp--preset--font-size--small);
	color: var(--base--color);
	margin-top: 0;
}
.shop-address strong {
	font-size: var(--wp--preset--font-size--medium);
}
/* お知らせリスト */
.news-list {
	border-top: solid 1px var(--base--color);
}
.news-list li {
	border-bottom: solid 1px var(--base--color);
	margin: 0;
	padding: 1em 0;
}
.news-list li h2 {
	font-family: var(--wp--preset--font-family--source-serif-pro);
	font-size: var(--wp--preset--font-size--large);
}
.news-list li h2 a {
	color: var(--wp--preset--color--contrast);
}
/*お知らせ投稿*/
body.single main .entry-content>figure {
	max-width: 640px;
}
iframe.instagram-media {
	margin-top: 1.5em !important;
}
/*-------------------------------------------------------------------
   Responsive
-------------------------------------------------------------------*/
@media screen and (min-width: 782px) {
	header .logo {
		padding: 1% 1% 1.2%;
	}
}
@media screen and (min-width: 1024px) {
	.pc_hidden {
		display: none;
	}
	/* -- フッター ------------------------------------------ */
	.copyright {
		position: fixed;
		transform: translateY(-50%);
		right: 1.5em;
		top: 50%;
		writing-mode: vertical-rl;
		width: auto !important;
	}
	footer .wp-block-columns.is-not-stacked-on-mobile figure {
		text-align: center;
	}
	/* -- コンテンツ ---------------------------------------- */
	.wp-site-blocks {
		width: 88%;
	}
	main {
		height: calc(100vh - 185px);
	}
	main .inner {
		overflow-y: scroll;
		height: calc(100% - 4px);
	}
	main .inner::-webkit-scrollbar {
		width: 5px;
	}
	main .inner::-webkit-scrollbar-track {
		background: none;
		margin: 40px 0;
	}
	main .inner::-webkit-scrollbar-thumb {
		background-color: var(--base--color);
	}
	.title-area {
		position: relative;
		min-height: calc(100vh - 360px);
		flex-basis: 25% !important;
		flex-grow: inherit !important;
		min-width: 250px;
		max-width: 320px;
	}
	.title-area .wp-block-heading,
	.title-area .wp-block-query-title,
	.title-area .wp-block-post-title {
		position: sticky;
		top: 28%;
		left: 0;
	}
	body.home .title-area .wp-block-heading {
		position: absolute;
	}
}
@media screen and (max-width: 1023px) {
	.sp_hidden {
		display: none;
	}
	/*バーガーメニューのブレイクポイント変更*/
	.wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: block;
	}
	.wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
		align-items: center;
	}
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container {
		flex-direction: row;
	}
	main .inner {
		padding: 50px 30px; 
	}
	main .wp-block-columns:has(.title-area) {
		display: block;
	}
	.title-area,
	.contents-area {
		display: table;
		width: 640px;
		max-width: 100%;
		margin: auto !important;
	}
	.contents-area .wp-block-buttons {
		justify-content: center;
	}
	.title-area .wp-block-heading,
	.title-area .wp-block-query-title,
	.title-area .wp-block-post-title {
		background-position: center top;
		background-size: 60px;
		text-align: center;
		padding-left: 0;
	}
	.scroll-link {
		display: none;
	}
}
@media screen and (max-width: 880px) {
	footer .wp-block-columns {
		flex-wrap: wrap !important;
	}
	footer .wp-block-columns>.wp-block-column {
		flex-basis: auto;
		flex-basis: 100% !important;
	}
	footer .shop-info {
		text-align: center;
	}
	footer .wp-block-column .wp-block-group {
		justify-content: center;
	}
	/*TOP取扱商品リスト*/
	body.home main .item-btn-list {
		width: 100%;
		flex-wrap: wrap;
		justify-content: center;
	}
	body.home main .item-btn-list figure {
		width: calc((100% - 10px)/3);
	}
}
@media screen and (max-width: 480px) {
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
		align-items: center;
	}
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container {
		flex-direction: column;
		align-items: flex-start;
	}
	footer .wp-block-column .wp-block-group {
		flex-wrap: wrap;
	}
	footer .wp-block-columns.is-not-stacked-on-mobile {
		flex-wrap: wrap !important;
		gap: 10px;
		text-align: center;
		margin-top: 1em;
	}
	footer .wp-block-columns.is-not-stacked-on-mobile .has-text-align-right {
		text-align: center;
	}
	.news-list .wp-block-group {
		display: grid;
		gap: 10px;
	}
	/*TOP取扱商品リスト*/
	body.home main .item-btn-list figure {
		width: calc((100% - 5px)/2);
	}
}

/*スクロールしたらにふわっと表示*/
@media screen and (min-width: 1024px) {
	.fadein-area {
		opacity: 0;
		/*transform: translateY(100px);*/
		transition: all 4000ms;
	}
	.fadein-area.scroll-in  {
		opacity: 1;
		transform: translateY(0);
	}
}
/*ページ読み込み時にふわっと表示*/
main .inner {
	animation-name: first-fadein;
	animation-duration: 2s;
}
@keyframes first-fadein {
	from {
		opacity: 0;
		/*transform: translateY(100px);*/
	}
	to {
		opacity: 1;
		/*transform: translateY(0);*/
	}
}