@charset "UTF-8";
@-webkit-keyframes spin-slow {
		from {
				-webkit-transform: rotate(0deg);
				        transform: rotate(0deg);
		}
		to {
				-webkit-transform: rotate(360deg);
				        transform: rotate(360deg);
		}
}
@keyframes spin-slow {
		from {
				-webkit-transform: rotate(0deg);
				        transform: rotate(0deg);
		}
		to {
				-webkit-transform: rotate(360deg);
				        transform: rotate(360deg);
		}
}
nav {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 2000;
}
nav.nav-hidden {
		-webkit-transform: translateY(-100%);
		        transform: translateY(-100%);
}

.nav-menu {
		position: fixed;
		top: 0;
		right: -100%;
		width: 70%;
		height: 100vh;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		    -ms-flex-direction: column;
		        flex-direction: column;
		-webkit-box-pack: start;
		    -ms-flex-pack: start;
		        justify-content: flex-start;
		-webkit-box-align: start;
		    -ms-flex-align: start;
		        align-items: flex-start;
		list-style: none;
		margin: 0;
		padding: 7em 2em;
		-webkit-box-sizing: border-box;
		        box-sizing: border-box;
		background: repeating-linear-gradient(90deg, transparent, transparent 30px, rgba(48, 173, 255, 0.4117647059) 30px, rgba(48, 173, 255, 0.1607843137) 31px);
		background-color: #A1D9FE;
		backdrop-filter: blur(20px);
		gap: 0;
		-webkit-transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
		transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
		z-index: 2001;
}
.nav-menu.mobile-active {
		right: 0;
}
.nav-menu li {
		width: 100%;
		margin: 0;
		opacity: 0;
		-webkit-transform: translateX(30px);
		        transform: translateX(30px);
		-webkit-transition: all 0.3s ease;
		transition: all 0.3s ease;
}
.nav-menu li:last-child {
		border-bottom: none;
}
.nav-menu a {
		display: block;
		width: 100%;
		padding: 1em 0;
		text-decoration: none;
		color: #333;
		font-weight: 500;
		text-align: left;
		position: relative;
		-webkit-transition: all 0.3s ease;
		transition: all 0.3s ease;
		cursor: pointer;
}
.nav-menu a::before {
		content: "";
		position: absolute;
		left: -30px;
		top: 0;
		height: 100%;
		width: 4px;
		background: #007bff;
		-webkit-transform: scaleY(0);
		        transform: scaleY(0);
		-webkit-transition: -webkit-transform 0.3s ease;
		transition: -webkit-transform 0.3s ease;
		transition: transform 0.3s ease;
		transition: transform 0.3s ease, -webkit-transform 0.3s ease;
}

.nav-title-en {
		display: block;
		font-family: "Chango", sans-serif;
		font-size: 1.2em;
		line-height: 1.2;
		margin-bottom: 2px;
		color: #FEFFF8;
}

.nav-title-jp {
		display: block;
		font-family: "Zen Maru Gothic", sans-serif;
		font-size: 0.9em;
		line-height: 1.2;
		color: #FEFFF8;
}

.sp-nav-icons {
		position: fixed;
		width: auto;
		top: 0;
		right: 0;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		gap: 0;
		-webkit-box-pack: end;
		    -ms-flex-pack: end;
		        justify-content: flex-end;
		z-index: 2002;
		-webkit-transition: -webkit-transform 0.3s ease-in-out;
		transition: -webkit-transform 0.3s ease-in-out;
		transition: transform 0.3s ease-in-out;
		transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
}
.sp-nav-icons.nav-hidden {
		-webkit-transform: translateY(-100%);
		        transform: translateY(-100%);
}

.online-shop-icon, .sp-instagram-icon, .hamburger-icon {
		border-radius: 0 0 50% 50%;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		width: 2em;
		height: 2em;
}

.online-shop-icon {
		position: fixed;
		bottom: 0.5em;
		right: 0.2em;
		width: 6em;
		height: 5em;
		z-index: 100;
		cursor: pointer;
		-webkit-box-align: center;
		    -ms-flex-align: center;
		        align-items: center;
		-webkit-box-pack: center;
		    -ms-flex-pack: center;
		        justify-content: center;
		-webkit-transition: all 0.3s ease;
		transition: all 0.3s ease;
}
.online-shop-icon img {
		width: 100%;
		height: 100%;
		-o-object-fit: contain;
		   object-fit: contain;
		-webkit-transition: all 0.3s ease;
		transition: all 0.3s ease;
}
.online-shop-icon img.spin {
		-webkit-animation: spin-slow 20s linear infinite;
		        animation: spin-slow 20s linear infinite;
}
.online-shop-icon img.text {
		width: 45%;
		position: absolute;
		top: 53%;
		left: 50%;
		transform: translate(-50%, -50%);
		-webkit-transform: translate(-50%, -50%);
		z-index: 2;
}

.sp-instagram-icon {
		cursor: pointer;
		background: #A1D9FE;
		padding: 1em;
		-webkit-box-align: center;
		    -ms-flex-align: center;
		        align-items: center;
		-webkit-box-pack: center;
		    -ms-flex-pack: center;
		        justify-content: center;
}
.sp-instagram-icon:hover {
		background: rgb(255, 255, 255);
}
.sp-instagram-icon img {
		width: 100%;
		height: 100%;
		-o-object-fit: contain;
		   object-fit: contain;
		-webkit-transition: all 0.3s ease;
		transition: all 0.3s ease;
		-webkit-filter: brightness(0) invert(1);
		        filter: brightness(0) invert(1);
}

.telephone {
		cursor: pointer;
		background: #6bc4ff;
		padding: 1em;
		-webkit-box-align: center;
		    -ms-flex-align: center;
		        align-items: center;
		-webkit-box-pack: center;
		    -ms-flex-pack: center;
		        justify-content: center;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		border-radius: 0 0 50% 50%;
		width: 2em;
		height: 2em;
		overflow: hidden;
		/* SVGタグ直埋め対応（imgタグでなくSVGタグの場合） */
}
.telephone:hover {
		background: rgb(255, 255, 255);
}
.telephone img {
		width: 75%;
		height: 100%;
		margin-left: 0.2em;
		-o-object-fit: contain;
		   object-fit: contain;
		display: block;
		-webkit-transition: all 0.3s ease;
		transition: all 0.3s ease;
		/* ↓↓↓ SVGのviewBoxが正しく設定されていない場合の対策 */
		max-width: 100%;
		max-height: 100%;
}
.telephone svg {
		width: 100%;
		height: 100%;
		display: block;
		-o-object-fit: contain;
		   object-fit: contain;
		max-width: 100%;
		max-height: 100%;
}

.hamburger-icon {
		cursor: pointer;
		background: #30ADFF;
		padding: 1em;
		position: relative;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		    -ms-flex-align: center;
		        align-items: center;
		-webkit-box-pack: center;
		    -ms-flex-pack: center;
		        justify-content: center;
		-webkit-transition: all 0.3s ease;
		transition: all 0.3s ease;
}
.hamburger-icon::before, .hamburger-icon::after {
		content: "";
		position: absolute;
		width: 1.6em;
		height: 2px;
		background: #FEFFF8;
		opacity: 0;
		left: 50%;
		top: 50%;
		-webkit-transform: translate(-50%, -50%);
		        transform: translate(-50%, -50%);
		-webkit-transform-origin: center;
		        transform-origin: center;
		border-radius: 2px;
		-webkit-transition: all 0.3s ease;
		transition: all 0.3s ease;
}
.hamburger-icon::before {
		-webkit-transform: translate(-50%, -50%) rotate(45deg);
		        transform: translate(-50%, -50%) rotate(45deg);
}
.hamburger-icon::after {
		-webkit-transform: translate(-50%, -50%) rotate(-45deg);
		        transform: translate(-50%, -50%) rotate(-45deg);
}
.hamburger-icon.active {
		background: #FEFFF8;
}
.hamburger-icon.active img {
		opacity: 0;
		-webkit-transform: scale(0);
		        transform: scale(0);
}
.hamburger-icon.active::before, .hamburger-icon.active::after {
		opacity: 1;
		background: #30ADFF;
}
.hamburger-icon img {
		width: 100%;
		height: 100%;
		-o-object-fit: contain;
		   object-fit: contain;
		-webkit-transition: all 0.3s ease;
		transition: all 0.3s ease;
}

.mobile-overlay {
		position: fixed;
		top: 0;
		right: 0;
		width: 100vw;
		height: 100vh;
		background: rgba(0, 0, 0, 0.4);
		opacity: 0;
		visibility: hidden;
		-webkit-transition: all 0.3s ease;
		transition: all 0.3s ease;
		z-index: 1999;
}
.mobile-overlay.active {
		opacity: 1;
		visibility: visible;
}

.nav-menu.mobile-active li {
		opacity: 1;
		-webkit-transform: translateX(0);
		        transform: translateX(0);
}

.nav-menu.mobile-active li:nth-child(1) {
		-webkit-transition-delay: 0.1s;
		        transition-delay: 0.1s;
}

.nav-menu.mobile-active li:nth-child(2) {
		-webkit-transition-delay: 0.2s;
		        transition-delay: 0.2s;
}

.nav-menu.mobile-active li:nth-child(3) {
		-webkit-transition-delay: 0.3s;
		        transition-delay: 0.3s;
}

.nav-menu.mobile-active li:nth-child(4) {
		-webkit-transition-delay: 0.4s;
		        transition-delay: 0.4s;
}

.nav-menu.mobile-active li:nth-child(5) {
		-webkit-transition-delay: 0.5s;
		        transition-delay: 0.5s;
}

.nav-menu.mobile-active li:nth-child(6) {
		-webkit-transition-delay: 0.6s;
		        transition-delay: 0.6s;
}

.nav-instagram {
		margin-top: 1em;
		text-align: center;
}
.nav-instagram .follow-text {
		color: #FEFFF8;
		font-size: 1.2em;
		display: block;
}
.nav-instagram .follow-text .chango-text {
		font-family: "Chango", sans-serif;
}
.nav-instagram .instagram-icon {
		width: 3em;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: start;
		    -ms-flex-align: start;
		        align-items: flex-start;
		-webkit-box-pack: center;
		    -ms-flex-pack: center;
		        justify-content: center;
		margin: 0 auto;
		-webkit-transition: all 0.3s ease;
		transition: all 0.3s ease;
		cursor: pointer;
}
.nav-instagram .instagram-icon svg, .nav-instagram .instagram-icon img {
		width: 100%;
		height: 100%;
}

@media (min-width: 760px) and (max-width: 1599px) {
		.hamburger-icon,
		.online-shop-icon,
		.sp-instagram-icon,
		.telephone {
				width: 4em;
				height: 4em;
		}
		.nav-menu {
				width: 50%;
		}
		.nav-title-jp {
				font-size: 0.7em;
		}
		.nav-title-en {
				font-size: 1em;
		}
}
@media (min-width: 1600px) {
		.sp-nav-icons {
				display: none !important;
		}
		.telephone {
				display: none !important;
		}
		.mobile-overlay {
				display: none;
		}
		nav {
				top: 0;
				left: 0;
				right: 0;
				padding: 0;
				background-color: transparent;
				-webkit-transition: -webkit-transform 0.3s ease-in-out;
				transition: -webkit-transform 0.3s ease-in-out;
				transition: transform 0.3s ease-in-out;
				transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
		}
		nav.nav-hidden {
				-webkit-transform: translateY(-100%);
				        transform: translateY(-100%);
		}
		.nav-menu {
				position: relative;
				top: 0;
				width: 80%;
				left: 0;
				height: auto;
				margin: 0 auto;
				-webkit-box-orient: horizontal;
				-webkit-box-direction: normal;
				    -ms-flex-direction: row;
				        flex-direction: row;
				-webkit-box-pack: center;
				    -ms-flex-pack: center;
				        justify-content: center;
				-webkit-box-align: center;
				    -ms-flex-align: center;
				        align-items: center;
				padding: 0 15px;
				gap: 0.3em;
				border-radius: 0 0 80px 80px;
				z-index: auto;
		}
		.nav-menu.mobile-active {
				right: auto;
		}
		.nav-menu li {
				width: auto;
				border-bottom: none;
				opacity: 1;
				-webkit-transform: translateX(0);
				        transform: translateX(0);
				-webkit-transition: all 0.3s ease;
				transition: all 0.3s ease;
		}
		.nav-menu a {
				display: inline-block;
				width: auto;
				padding: 10px 15px;
				text-align: center;
				border-radius: 25px;
				position: relative;
				-webkit-transition: all 0.3s ease;
				transition: all 0.3s ease;
				background-color: #A1D9FE;
		}
		.nav-menu a:hover {
				background: rgba(161, 217, 254, 0.3);
		}
		.nav-menu a:hover .nav-title-en,
		.nav-menu a:hover .nav-title-jp {
				color: #30ADFF;
				-webkit-transition: color 0.3s ease;
				transition: color 0.3s ease;
		}
		.nav-menu a::before {
				display: none;
		}
		.nav-menu a::after {
				display: none;
		}
		.nav-menu .nav-instagram {
				margin-left: 2em;
				margin-top: 0.4em;
				background-color: #A1D9FE;
				border-radius: 25px;
				padding: 0 15px;
				-webkit-transition: all 0.3s ease;
				transition: all 0.3s ease;
		}
		.nav-menu .nav-instagram:hover {
				background: rgba(161, 217, 254, 0.3);
		}
		.nav-menu .nav-instagram:hover .follow-text {
				color: #30ADFF;
				-webkit-transition: color 0.3s ease;
				transition: color 0.3s ease;
		}
		.nav-menu .nav-instagram:hover .follow-text .chango-text {
				color: #30ADFF;
		}
		.nav-menu .nav-instagram:hover .instagram-icon svg, .nav-menu .nav-instagram:hover .instagram-icon img {
				-webkit-filter: brightness(0) saturate(100%) invert(27%) sepia(96%) saturate(7471%) hue-rotate(201deg) brightness(97%) contrast(101%);
				        filter: brightness(0) saturate(100%) invert(27%) sepia(96%) saturate(7471%) hue-rotate(201deg) brightness(97%) contrast(101%);
		}
		.nav-menu .nav-instagram .follow-text {
				font-size: 1em;
				margin-bottom: 0;
				color: #FEFFF8;
				-webkit-transition: color 0.3s ease;
				transition: color 0.3s ease;
		}
		.nav-menu .nav-instagram .follow-text .chango-text {
				color: #FEFFF8;
				-webkit-transition: color 0.3s ease;
				transition: color 0.3s ease;
		}
		.nav-menu .nav-instagram .instagram-icon {
				width: 2em;
				height: 2em;
				-webkit-box-align: center;
				    -ms-flex-align: center;
				        align-items: center;
		}
		.nav-menu .nav-instagram .instagram-icon svg, .nav-menu .nav-instagram .instagram-icon img {
				width: 2em;
				height: 2em;
				-webkit-filter: brightness(0) invert(1);
				        filter: brightness(0) invert(1);
				-webkit-transition: -webkit-filter 0.3s ease;
				transition: -webkit-filter 0.3s ease;
				transition: filter 0.3s ease;
				transition: filter 0.3s ease, -webkit-filter 0.3s ease;
		}
		.nav-title-en {
				font-size: 1em;
				color: #FEFFF8;
				-webkit-transition: color 0.3s ease;
				transition: color 0.3s ease;
		}
		.nav-title-jp {
				font-size: 1em;
				color: #FEFFF8;
				-webkit-transition: color 0.3s ease;
				transition: color 0.3s ease;
		}
}
html {
		scroll-behavior: smooth;
}

section {
		scroll-margin-top: 80px;
		position: relative;
}

@media (min-width: 769px) {
		section {
				scroll-margin-top: 100px;
		}
}
@-webkit-keyframes slideInFromRight {
		from {
				opacity: 0;
				-webkit-transform: translateX(30px);
				        transform: translateX(30px);
		}
		to {
				opacity: 1;
				-webkit-transform: translateX(0);
				        transform: translateX(0);
		}
}
@keyframes slideInFromRight {
		from {
				opacity: 0;
				-webkit-transform: translateX(30px);
				        transform: translateX(30px);
		}
		to {
				opacity: 1;
				-webkit-transform: translateX(0);
				        transform: translateX(0);
		}
}
@-webkit-keyframes fadeIn {
		from {
				opacity: 0;
		}
		to {
				opacity: 1;
		}
}
@keyframes fadeIn {
		from {
				opacity: 0;
		}
		to {
				opacity: 1;
		}
}
to {
		opacity: 1;
		-webkit-transform: translateX(0);
		        transform: translateX(0);
}

@keyframes fadeIn {
		from {
				opacity: 0;
		}
		to {
				opacity: 1;
		}
}
@-webkit-keyframes pulse {
		0%, 100% {
				-webkit-transform: scale(1);
				        transform: scale(1);
				opacity: 1;
		}
		50% {
				-webkit-transform: scale(1.1);
				        transform: scale(1.1);
				opacity: 0.8;
		}
}
@keyframes pulse {
		0%, 100% {
				-webkit-transform: scale(1);
				        transform: scale(1);
				opacity: 1;
		}
		50% {
				-webkit-transform: scale(1.1);
				        transform: scale(1.1);
				opacity: 0.8;
		}
}
@keyframes pulse {
		0%, 100% {
				-webkit-transform: scale(1);
				        transform: scale(1);
				opacity: 1;
		}
		50% {
				-webkit-transform: scale(1.1);
				        transform: scale(1.1);
				opacity: 0.8;
		}
		50% {
				-webkit-transform: scale(1.1);
				        transform: scale(1.1);
				opacity: 0.8;
		}
}
@-webkit-keyframes floater {
		0% {
				-webkit-transform: translateY(0);
				        transform: translateY(0);
		}
		50% {
				-webkit-transform: translateY(-15px);
				        transform: translateY(-15px);
		}
		100% {
				-webkit-transform: translateY(0);
				        transform: translateY(0);
		}
}
@keyframes floater {
		0% {
				-webkit-transform: translateY(0);
				        transform: translateY(0);
		}
		50% {
				-webkit-transform: translateY(-15px);
				        transform: translateY(-15px);
		}
		100% {
				-webkit-transform: translateY(0);
				        transform: translateY(0);
		}
}
@-webkit-keyframes bounceInLoop {
		0% {
				-webkit-transform: scale(1);
				        transform: scale(1);
				opacity: 1;
		}
		40% {
				-webkit-transform: scale(0.9);
				        transform: scale(0.9);
		}
		80% {
				-webkit-transform: scale(1.02);
				        transform: scale(1.02);
		}
		100% {
				-webkit-transform: scale(1);
				        transform: scale(1);
		}
}
@keyframes bounceInLoop {
		0% {
				-webkit-transform: scale(1);
				        transform: scale(1);
				opacity: 1;
		}
		40% {
				-webkit-transform: scale(0.9);
				        transform: scale(0.9);
		}
		80% {
				-webkit-transform: scale(1.02);
				        transform: scale(1.02);
		}
		100% {
				-webkit-transform: scale(1);
				        transform: scale(1);
		}
}
@-webkit-keyframes cloudmove {
		0% {
				background-position: top 1vh left -20vw, top 25vh left -80vw, top 45vh right 50vw, bottom 45vh left -65vw, bottom 20vh left -80vw, bottom 1vh left -95vw; /* L6: いちばん遅れて登場 */
		}
		100% {
				background-position: top 1vh left 100vw, top 25vh left 105vw, top 45vh left 130vw, bottom 45vh left 120vw, bottom 20vh left 110vw, bottom 1vh left 100vw; /* L6: 距離短い=最遅 */
		}
}
@keyframes cloudmove {
		0% {
				background-position: top 1vh left -20vw, top 25vh left -80vw, top 45vh right 50vw, bottom 45vh left -65vw, bottom 20vh left -80vw, bottom 1vh left -95vw; /* L6: いちばん遅れて登場 */
		}
		100% {
				background-position: top 1vh left 100vw, top 25vh left 105vw, top 45vh left 130vw, bottom 45vh left 120vw, bottom 20vh left 110vw, bottom 1vh left 100vw; /* L6: 距離短い=最遅 */
		}
}
html, body, img, h1, h2, h3, h4, p, ul, li, dl, dd, dt, span, a, textarea, input {
		margin: 0;
		padding: 0;
		line-height: 1;
		-webkit-box-sizing: border-box;
		        box-sizing: border-box;
		overflow-x: clip;
}

img {
		vertical-align: bottom;
		max-width: 100%;
		-webkit-box-sizing: border-box;
		        box-sizing: border-box;
}

li {
		list-style: none;
}

a {
		text-decoration: none;
		color: inherit;
		display: block;
		-webkit-transition: -webkit-transform 0.2s ease-in-out;
		transition: -webkit-transform 0.2s ease-in-out;
		transition: transform 0.2s ease-in-out;
		transition: transform 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out;
}

p {
		font-size: 1em;
		line-height: 2;
		margin-bottom: 1em;
		z-index: 5;
		position: relative;
		font-family: sans-serif;
}

body {
		position: relative;
		background-color: #FAFBF3;
}
body::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: repeating-linear-gradient(90deg, transparent, transparent 30px, rgba(102, 76, 65, 0.2) 30px, rgba(102, 76, 65, 0.2) 31px);
		z-index: -4;
		border-radius: 8px;
}

.bold {
		font-weight: 700;
}

section {
		padding: 4.5em 2em;
}

.body_link {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		padding: 20px 30px;
		-webkit-box-pack: center;
		    -ms-flex-pack: center;
		        justify-content: center;
		-webkit-box-align: center;
		    -ms-flex-align: center;
		        align-items: center;
		gap: 10px;
		border-radius: 100px;
		border: 1px solid #714B3D;
		background: url(../img/body_link_bg.jpg) repeat top left/50% 50%;
		-webkit-box-shadow: 6px 7px 0px 0px #FFF, 7px 8px 0px 0px #714B3D;
		        box-shadow: 6px 7px 0px 0px #FFF, 7px 8px 0px 0px #714B3D;
		font-family: "Zen Maru Gothic", sans-serif;
		color: #ffffff;
}

.title_box {
		width: 100%;
		background-image: url("../img/title.svg");
		background-repeat: repeat-x;
		background-size: auto 150px;
		background-position: center;
		padding: 3em 0;
		text-align: center;
		position: relative;
		color: #714B3D;
		margin-bottom: 2em;
		-webkit-box-sizing: border-box;
		        box-sizing: border-box;
}
.title_box .title {
		position: relative;
		z-index: 1;
		margin: 0;
		padding: 0.5em 0.5em;
		background-color: #ffffff;
}
.title_box .title .english {
		font-family: "Chango", sans-serif;
		font-size: clamp(1.5rem, 5vw, 2.5rem);
		display: block;
		margin-bottom: 0.5rem;
		text-transform: uppercase;
		font-size: 1.5em;
}
.title_box .title .japanese {
		font-family: "Zen Maru Gothic", sans-serif;
		font-size: clamp(1rem, 3vw, 1.4rem);
		opacity: 0.9;
		display: block;
}

.description {
		margin-bottom: 3em;
}

.loading-screen {
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		z-index: 9999;
}
.loading-screen .curtain {
		position: absolute;
		top: 0;
		width: 20vw;
		height: 120vh;
		background-color: #A1D9FE;
		-webkit-transition: -webkit-transform 1.5s ease-in-out;
		transition: -webkit-transform 1.5s ease-in-out;
		transition: transform 1.5s ease-in-out;
		transition: transform 1.5s ease-in-out, -webkit-transform 1.5s ease-in-out;
}
.loading-screen .curtain.curtain-open {
		-webkit-transform: translateY(-100%);
		        transform: translateY(-100%);
}
.loading-screen .curtain-1 {
		left: 0;
		border-radius: 0 0 15em 15em;
}
.loading-screen .curtain-2 {
		left: 20vw;
		border-radius: 0 0 15em 15em;
}
.loading-screen .curtain-3 {
		left: 40vw;
		border-radius: 0 0 15em 15em;
}
.loading-screen .curtain-4 {
		left: 60vw;
		border-radius: 0 0 15em 15em;
}
.loading-screen .curtain-5 {
		left: 80vw;
		border-radius: 0 0 15em 15em;
}
.loading-screen .loading-logo {
		position: absolute;
		top: 50%;
		left: 50%;
		-webkit-transform: translate(-50%, -50%);
		        transform: translate(-50%, -50%);
		z-index: 10;
		-webkit-transition: opacity 1s ease-out, -webkit-transform 1s ease-out;
		transition: opacity 1s ease-out, -webkit-transform 1s ease-out;
		transition: opacity 1s ease-out, transform 1s ease-out;
		transition: opacity 1s ease-out, transform 1s ease-out, -webkit-transform 1s ease-out;
}
.loading-screen .loading-logo img {
		width: 200px;
		height: auto;
		-webkit-animation: pulse 2s ease-in-out infinite;
		        animation: pulse 2s ease-in-out infinite;
}
.loading-screen .loading-logo.logo-fade {
		opacity: 0;
}
.loading-screen .loading-logo.logo-fade img {
		-webkit-animation: none;
		        animation: none;
}

header {
		position: relative;
}
header::after {
		content: "";
		position: absolute;
		bottom: 2rem;
		left: 0.2em;
		width: clamp(80px, 56vw, 250px);
		height: clamp(80px, 40vw, 250px);
		background: url("../img/logo.svg") no-repeat center center;
		background-size: contain;
		z-index: 10;
}
header .mask {
		width: 100%;
		height: 80vh;
		-o-object-fit: cover;
		   object-fit: cover;
		clip-path: url(#svgPath);
		position: relative;
		z-index: 2;
}
header .shape {
		height: 0;
}
header .cloud-bg {
		position: absolute;
		bottom: -2.5em;
		left: 0em;
		width: 100%;
		height: 100%;
		aspect-ratio: 750/991.9;
		z-index: 1;
		overflow: hidden;
}
header .cloud-bg .shape_shadow {
		width: 100%;
		height: 100%;
		display: block;
}

section.intro {
		padding: 8em 0 0;
}

.intro {
		padding-top: 10em;
}
.intro .intro_outer {
		position: relative;
		padding-top: 3em;
		font-family: "Zen Maru Gothic", sans-serif;
}
.intro .intro_outer.bounceIn::before {
		content: "";
		position: absolute;
		top: -3.3em;
		right: 0;
		width: 25vh;
		height: 16vh;
		background: url("../img/intro_fuwa2.png") no-repeat center center;
		background-size: contain;
		z-index: 10;
		-webkit-animation: bounceInLoop 2s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
		        animation: bounceInLoop 2s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}
.intro .intro_outer.floater::after {
		content: "";
		position: absolute;
		top: -7em;
		left: 1em;
		width: 23vh;
		height: 13vh;
		background: url("../img/intro_mochi2.png") no-repeat center center;
		background-size: contain;
		z-index: 10;
		-webkit-animation: floater 3s ease-in-out infinite;
		        animation: floater 3s ease-in-out infinite;
}
.intro .intro_outer .title.new img {
		width: 50%;
		margin: 1em auto 0;
		display: block;
}
.intro .intro_outer .title.bagle {
		width: 90%;
		margin: 2em auto 0em;
}
.intro .intro_outer .intro_inner {
		background-image: url("../img/intro_togubagle_round.png");
		background-size: 120%;
		background-position: top center;
		background-repeat: no-repeat;
		position: relative;
		padding-top: 35vh; /* Add more padding to accommodate higher image */
}
.intro .intro_outer .box {
		background-color: #ffffff;
		position: relative;
		z-index: 1;
		padding: 2em;
		border-radius: 50px;
		margin: 0 2em 4.5em;
}
.intro .intro_outer .box:nth-child(1) {
		background-color: white;
}
.intro .intro_outer .box:nth-child(2) {
		background-color: #f2faff;
}
.intro .intro_outer .box:nth-child(3) {
		background-color: #e4f4ff;
}
.intro .intro_outer .box:nth-child(4) {
		background-color: #c9e9fe;
}
.intro .intro_outer .box img {
		margin: 0 auto;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		max-height: 27vh;
}
.intro .intro_outer .box.kind {
		padding: 0;
}
.intro .intro_outer .box.kind img {
		height: 26vh;
		-o-object-fit: contain;
		   object-fit: contain;
}
.intro .intro_outer .box.kind .explain {
		padding: 2em 2em 0;
}
.intro .intro_outer .box.kind .name {
		margin-bottom: 0 !important;
		text-align: center;
		margin-top: 0.5em;
		font-size: 0.8em;
		color: #714B3D;
		font-family: "Zen Maru Gothic", sans-serif;
		margin-bottom: 0;
}
.intro .intro_outer .box::after {
		content: "";
		position: absolute;
		top: -3.5em;
		left: 50%;
		-webkit-transform: translateX(-50%);
		        transform: translateX(-50%);
		width: 100%;
		height: 100px;
		background-repeat: no-repeat;
		background-position: center center;
		background-size: contain;
		z-index: 1;
}
.intro .intro_outer .box:first-child::after {
		background-image: url("../img/number1.png");
}
.intro .intro_outer .box:nth-child(2)::after {
		background-image: url("../img/number2.png");
}
.intro .intro_outer .box:nth-child(3)::after {
		background-image: url("../img/number3.png");
}
.intro .intro_outer .box:nth-child(4) {
		margin-bottom: 4.5em;
}
.intro .intro_outer .box:nth-child(4)::after {
		background-image: url("../img/number4.png");
}

.bagel_all_outer {
		width: 100%;
		margin: 0 auto;
		-webkit-box-sizing: border-box;
		        box-sizing: border-box;
}
.bagel_all_outer .bagel_grid {
		display: -ms-grid;
		display: grid;
		-ms-grid-columns: 1fr 0.3em 1fr;
		grid-template-columns: 1fr 1fr;
		-ms-grid-rows: auto 0.3em auto;
		grid-template-rows: auto auto;
		gap: 0.3em;
}
.bagel_all_outer .bagel_grid > *:nth-child(1) {
		-ms-grid-row: 1;
		-ms-grid-column: 1;
}
.bagel_all_outer .bagel_grid > *:nth-child(2) {
		-ms-grid-row: 1;
		-ms-grid-column: 3;
}
.bagel_all_outer .bagel_grid > *:nth-child(3) {
		-ms-grid-row: 3;
		-ms-grid-column: 1;
}
.bagel_all_outer .bagel_grid > *:nth-child(4) {
		-ms-grid-row: 3;
		-ms-grid-column: 3;
}
.bagel_all_outer .bagel_grid .bagel_main,
.bagel_all_outer .bagel_grid .bagel_sub {
		width: 100%;
		height: auto;
		-o-object-fit: cover;
		   object-fit: cover;
		display: block;
}
.bagel_all_outer .bagel_grid .bagel_main {
		grid-column: 1/-1;
		-ms-grid-row: 1;
		grid-row: 1;
}
.bagel_all_outer .bagel_grid .bagel_sub:nth-child(2) {
		-ms-grid-column: 1;
		grid-column: 1;
		-ms-grid-row: 2;
		grid-row: 2;
}
.bagel_all_outer .bagel_grid .bagel_sub:nth-child(3) {
		-ms-grid-column: 2;
		grid-column: 2;
		-ms-grid-row: 2;
		grid-row: 2;
}

.calendar {
		background-color: #fff2da;
		background-image: repeating-linear-gradient(0deg, transparent, transparent 20px, rgba(145, 110, 74, 0.116) 20px, rgba(145, 110, 74, 0.116) 21px), repeating-linear-gradient(90deg, transparent, transparent 20px, rgba(145, 110, 74, 0.116) 20px, rgba(145, 110, 74, 0.116) 21px);
}
.calendar .title_box {
		background-size: auto 140px;
}
.calendar .title_box .title {
		text-align: center;
}
.calendar .calendar_box {
		margin-bottom: 2em;
}
.calendar .calendar_box img {
		border-radius: 15px;
}
.calendar .market_info {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		    -ms-flex-align: center;
		        align-items: center;
		-webkit-column-gap: 0.8em;
		   -moz-column-gap: 0.8em;
		        column-gap: 0.8em;
}
.calendar .market_info .market_img {
		width: 40%;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: center;
		    -ms-flex-pack: center;
		        justify-content: center;
		-webkit-box-align: center;
		    -ms-flex-align: center;
		        align-items: center;
}
.calendar .market_info .market_img img {
		width: 100%;
		aspect-ratio: 1/1;
		-o-object-fit: cover;
		   object-fit: cover;
		border-radius: 50%;
		/* 必要に応じて枠線など追加可 */
}
.calendar .market_info p:not(.market_img) {
		width: 55%;
		margin: 0;
		font-size: 0.9em;
}

.store_info {
		background-color: #E7F4FF;
		position: relative;
		overflow: hidden;
}
.store_info .title_box {
		background-size: auto 160px;
}
.store_info .title_box .title {
		padding: 0.2em 0;
}
.store_info .title_box .title .english {
		font-size: 1.2em;
}
.store_info .store_info_inner p {
		line-height: 1.8;
}
.store_info .closingday {
		color: rgb(187, 0, 0);
}
.store_info .google_map {
		width: 100%;
		height: 50vh;
		position: relative;
		z-index: 10;
}
.store_info .google_map iframe {
		width: 100%;
		height: 100%;
		border: none;
}
.store_info h2, .store_info p {
		position: relative;
		z-index: 3;
}
.store_info::before, .store_info::after {
		content: "";
		position: absolute;
		width: 224px;
		height: 200px;
		background: url("../img/store_info_footprint.png") no-repeat center center;
		background-size: contain;
		z-index: 0;
}
.store_info::before {
		top: 0;
		left: -40px;
}
.store_info::after {
		bottom: 0px;
		right: -40px;
		-webkit-transform: rotate(180deg);
		        transform: rotate(180deg);
}

.lightbox {
		display: none;
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		background-color: rgba(0, 0, 0, 0.7);
		-webkit-box-pack: center;
		    -ms-flex-pack: center;
		        justify-content: center;
		-webkit-box-align: center;
		    -ms-flex-align: center;
		        align-items: center;
		z-index: 10000;
		padding: 20px;
		-webkit-box-sizing: border-box;
		        box-sizing: border-box;
}
.lightbox .lightbox-content {
		position: relative;
		max-width: 95vw;
		max-height: 95vh;
		background: white;
		border-radius: 8px;
		overflow: visible;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: center;
		    -ms-flex-pack: center;
		        justify-content: center;
		-webkit-box-align: center;
		    -ms-flex-align: center;
		        align-items: center;
}
.lightbox .lightbox-content img {
		width: auto;
		height: auto;
		max-width: 97vw;
		max-height: 95vh;
		-o-object-fit: contain;
		   object-fit: contain;
		display: block;
}
.lightbox .lightbox-content .lightbox-map-container {
		width: 80vw;
		height: 80vh;
		max-width: 1000px;
		max-height: 600px;
		display: none;
}
.lightbox .lightbox-content .lightbox-map-container iframe {
		width: 100%;
		height: 100%;
}
.lightbox .lightbox-close {
		position: absolute;
		top: 10px;
		right: 15px;
		font-size: 28px;
		font-weight: bold;
		color: #333;
		cursor: pointer;
		z-index: 10001;
		background: rgba(255, 255, 255, 0.8);
		border-radius: 50%;
		width: 40px;
		height: 40px;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		    -ms-flex-align: center;
		        align-items: center;
		-webkit-box-pack: center;
		    -ms-flex-pack: center;
		        justify-content: center;
}
.lightbox .lightbox-close:hover {
		background: rgb(255, 255, 255);
}

.lightbox-trigger {
		cursor: pointer;
		-webkit-transition: opacity 0.3s ease, -webkit-transform 0.2s ease-in-out;
		transition: opacity 0.3s ease, -webkit-transform 0.2s ease-in-out;
		transition: transform 0.2s ease-in-out, opacity 0.3s ease;
		transition: transform 0.2s ease-in-out, opacity 0.3s ease, -webkit-transform 0.2s ease-in-out;
}
.lightbox-trigger:hover {
		-webkit-transform: scale(0.9);
		        transform: scale(0.9);
		-webkit-transition: -webkit-transform 0.2s ease-in-out;
		transition: -webkit-transform 0.2s ease-in-out;
		transition: transform 0.2s ease-in-out;
		transition: transform 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out;
}

.online_shop {
		background: url(../img/online-shop_bg.jpg) repeat top left/50% 50%;
		font-family: "Zen Maru Gothic", sans-serif;
}
.online_shop .title_box {
		background-size: auto 137px;
}
.online_shop .title_box .title .english {
		font-size: 1.2em;
}
.online_shop .shop_items {
		display: -ms-grid;
		display: grid;
		-ms-grid-columns: 1fr 1.5em 1fr;
		grid-template-columns: repeat(2, 1fr);
		gap: 1.5em;
		margin: 2em 0;
		color: #ffffff;
}
.online_shop .shop_items .online_shop_item_link {
		border-radius: 200px 200px 30px 30px;
		-webkit-box-shadow: 6px 6px 0px 0px #FFF, 7px 7px 0px 0px #714B3D;
		        box-shadow: 6px 6px 0px 0px #FFF, 7px 7px 0px 0px #714B3D;
		display: -ms-grid;
		display: grid;
		-ms-grid-rows: subgrid;
		grid-template-rows: subgrid;
		border: 1px solid #714B3D;
		position: relative;
}
.online_shop .shop_items .online_shop_item_link .reserve-layer {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.35);
		z-index: 2;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		    -ms-flex-align: center;
		        align-items: center;
		-webkit-box-pack: center;
		    -ms-flex-pack: center;
		        justify-content: center;
		pointer-events: none;
		border-radius: inherit;
}
.online_shop .shop_items .online_shop_item_link .reserve-text {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 100%;
		-webkit-transform: translate(-50%, -50%);
		        transform: translate(-50%, -50%);
		color: #fff;
		font-size: 1em;
		font-weight: bold;
		border-radius: 2em;
		z-index: 3;
		pointer-events: none;
		letter-spacing: 0.05em;
		font-family: "Zen Maru Gothic", sans-serif;
		text-align: center;
}
.online_shop .shop_items .online_shop_item_link .item_img_box {
		border-radius: 200px 200px 30px 30px;
		color: #714B3D;
		background: #FEFFF8;
}
.online_shop .shop_items .online_shop_item_link .item_img_box .item_img_frame {
		width: 100%;
		height: 30vh;
		overflow: hidden;
		border-radius: 200px 200px 0 0;
		border-bottom: 1px solid #714B3D;
}
.online_shop .shop_items .online_shop_item_link .item_img_box .item_img_frame img {
		width: 100%;
		height: 100%;
		-o-object-fit: cover;
		   object-fit: cover;
		display: block;
}
.online_shop .shop_items .online_shop_item_link .item_img_box .item_name, .online_shop .shop_items .online_shop_item_link .item_img_box .item_price {
		margin-bottom: 0;
		line-height: 1.4;
		padding: 0.2em 1em 0;
		font-family: "Zen Maru Gothic";
}
.online_shop .shop_items .online_shop_item_link .item_img_box .item_name {
		padding-bottom: 0 !important;
}
.online_shop .shop_items .online_shop_item_link .item_img_box .item_price {
		padding-bottom: 0.2em;
}

.cafe_menu {
		background-color: #E7F4FF;
		position: relative;
		background-image: url("../img/cafe_menu_cloud_one.png"), url("../img/cafe_menu_cloud_one.png"), url("../img/cafe_menu_cloud_one.png"), url("../img/cafe_menu_cloud_one.png"), url("../img/cafe_menu_cloud_one.png"), url("../img/cafe_menu_cloud_one.png");
		background-repeat: no-repeat;
		background-size: auto 80px;
		animation: cloudmove 20s linear infinite;
		-webkit-animation: cloudmove 20s linear infinite;
		-moz-animation: cloudmove 20s linear infinite;
}
.cafe_menu .title_box {
		background-size: auto 137px;
}
.cafe_menu .title_box .title .english {
		font-size: 1.1em;
}
.cafe_menu .cafe_items {
		position: relative;
		z-index: 1;
}
.cafe_menu .cafe_items .cafe_item {
		position: relative;
}
.cafe_menu .cafe_items .cafe_item .cafe_frame {
		width: 100%;
		height: 22vh;
		border-radius: 180px;
		overflow: hidden;
		margin-bottom: 4em;
}
.cafe_menu .cafe_items .cafe_item .cafe_frame img {
		width: 100%;
		height: 100%;
		-o-object-fit: cover;
		   object-fit: cover;
		display: block;
}
.cafe_menu .cafe_items .cafe_item .cafe_label {
		position: absolute;
		bottom: -1.5em;
		right: 0;
		background-color: rgba(91, 45, 0, 0.5);
		backdrop-filter: blur(3px);
		color: white;
		padding: 1em 1.5em;
		border-radius: 10em;
		font-size: 1em;
		text-align: center;
		border: 1px solid #FEFFF8;
		font-family: "Zen Maru Gothic", sans-serif;
}

.other_services {
		padding-bottom: 8em;
		overflow: hidden;
}
.other_services .title_box {
		background-size: auto 137px;
}
.other_services .title_box .title {
		padding: 0.4em 0;
}
.other_services .title_box .title .english {
		font-size: 1.1em;
}
.other_services .other_services_inner {
		display: -ms-grid;
		display: grid;
		-ms-grid-columns: 1fr 1em 1fr;
		grid-template-columns: repeat(2, 1fr);
		gap: 1em;
		margin-bottom: 2em;
		max-width: 100%;
		-webkit-box-sizing: border-box;
		        box-sizing: border-box;
}
.other_services .other_services_box {
		position: relative;
		background-color: #714B3D;
		border-radius: 10px;
}
.other_services .other_services_box.full {
		grid-column: 1/-1;
}
.other_services .other_services_box .case_title {
		background-color: #FEFFF8;
		color: #714B3D;
		margin: 1em 1em 0 1em;
		font-size: 0.85em;
		padding: 0.5em 1em;
		display: inline-block;
		border-radius: 10em;
		font-family: "Zen Maru Gothic", sans-serif;
}
.other_services .other_services_box .other_services_frame {
		width: 100%;
}
.other_services .other_services_box .other_services_frame img {
		width: 100%;
		height: 20vh;
		-o-object-fit: cover;
		   object-fit: cover;
		display: block;
		border-radius: 10px 10px 0 0;
}
.other_services .other_services_box .text {
		padding: 0.6em 1em;
		max-width: calc(100% - 1em);
		color: #FEFFF8;
		padding: 0.5em 1.5em 0 1.5em;
		font-size: 0.8em;
		font-family: "Zen Maru Gothic", sans-serif;
}

.footer_inner {
		text-align: center;
		background-color: #E7F4FF;
}
.footer_inner .logo {
		width: 50%;
		margin: 3em auto 2em;
}
.footer_inner .footer-icons {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: center;
		    -ms-flex-pack: center;
		        justify-content: center;
		gap: 2em;
		margin-bottom: 2em;
}
.footer_inner .footer-icons .footer-instagram-icon,
.footer_inner .footer-icons .footer-online-shop-icon {
		width: 2em;
		height: 2em;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		    -ms-flex-align: center;
		        align-items: center;
		-webkit-box-pack: center;
		    -ms-flex-pack: center;
		        justify-content: center;
		-webkit-transition: all 0.3s ease;
		transition: all 0.3s ease;
}
.footer_inner .footer-icons .footer-instagram-icon:hover,
.footer_inner .footer-icons .footer-online-shop-icon:hover {
		-webkit-transform: scale(1.1);
		        transform: scale(1.1);
		background: #30ADFF;
}
.footer_inner .footer-icons .footer-instagram-icon img,
.footer_inner .footer-icons .footer-online-shop-icon img {
		width: 100%;
		height: 100%;
		-o-object-fit: contain;
		   object-fit: contain;
}
.footer_inner .copyright {
		font-size: 0.6em;
		margin-bottom: 0;
		color: rgba(69, 56, 46, 0.4901960784);
}

.intro-swiper {
		margin: 1em 0;
		padding: 0 0 2em 0;
		width: 100%;
		-webkit-box-sizing: border-box;
		        box-sizing: border-box;
		/* はみ出し抑止（clip対応＋フォールバック） */
		overflow: hidden;
}
@supports (overflow: clip) {
		.intro-swiper {
				overflow: clip;
		}
}
.intro-swiper .swiper-wrapper {
		-webkit-box-align: center;
		    -ms-flex-align: center;
		        align-items: center;
		will-change: transform;
}
.intro-swiper .swiper-slide {
		-webkit-transition: -webkit-transform 0.3s ease;
		transition: -webkit-transform 0.3s ease;
		transition: transform 0.3s ease;
		transition: transform 0.3s ease, -webkit-transform 0.3s ease;
		-webkit-box-sizing: border-box;
		        box-sizing: border-box;
		overflow: hidden;
}
.intro-swiper .swiper-slide img {
		display: block;
		width: 100%;
		height: 180px;
		-o-object-fit: contain;
		   object-fit: contain;
		border-radius: 10px;
		-webkit-transition: opacity 0.3s ease, -webkit-transform 0.3s ease;
		transition: opacity 0.3s ease, -webkit-transform 0.3s ease;
		transition: opacity 0.3s ease, transform 0.3s ease;
		transition: opacity 0.3s ease, transform 0.3s ease, -webkit-transform 0.3s ease;
}
.intro-swiper .swiper-slide:not(.swiper-slide-active) img {
		opacity: 0.8;
		-webkit-transform: scale(0.9);
		        transform: scale(0.9);
}
.intro-swiper .swiper-slide:not(.swiper-slide-active) p {
		opacity: 0;
}
.intro-swiper .swiper-slide.swiper-slide-active img {
		opacity: 1;
		-webkit-transform: scale(1);
		        transform: scale(1);
}
.intro-swiper .swiper-slide.swiper-slide-active p {
		opacity: 1;
}
.intro-swiper .swiper-slide .name {
		min-height: 2.8em;
		display: block;
		text-align: center;
		margin-top: 0.5em;
		font-size: 0.8em;
		color: #714B3D;
		font-family: "Zen Maru Gothic", sans-serif;
		margin-bottom: 0;
		line-height: 1.4;
		overflow-wrap: break-word;
		word-break: break-all;
}
.intro-swiper .swiper-pagination {
		position: relative;
		bottom: auto;
		margin: 1.5em auto 1em;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: center;
		    -ms-flex-pack: center;
		        justify-content: center;
		gap: 0.2em;
}
.intro-swiper .swiper-pagination .swiper-pagination-bullet {
		width: 6px;
		height: 6px;
		border-radius: 50%;
		background: #714B3D;
		opacity: 0.3;
		cursor: pointer;
		-webkit-transition: all 0.3s ease;
		transition: all 0.3s ease;
}
.intro-swiper .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
		opacity: 1;
		background: #30ADFF;
		-webkit-transform: scale(1.2);
		        transform: scale(1.2);
}

@media (min-width: 760px) and (max-width: 1199px) {
		p {
				font-size: 1.3em;
		}
		.intro .intro_outer .intro_inner {
				padding-top: 44vh;
		}
		.cafe_menu .cafe_items {
				width: 70%;
				margin: 0 auto;
		}
		.cafe_menu .cafe_items .cafe_item .cafe_frame {
				height: 30vh;
		}
}
@media (min-width: 1200px) {
		p {
				font-size: 1.1em;
		}
		a:hover {
				-webkit-transform: scale(0.9);
				        transform: scale(0.9);
				-webkit-transition: -webkit-transform 0.2s ease-in-out;
				transition: -webkit-transform 0.2s ease-in-out;
				transition: transform 0.2s ease-in-out;
				transition: transform 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out;
		}
		.body_link {
				padding: 1.5em;
				width: 30%;
				margin: 0 auto;
				font-size: 1.4em;
		}
		section .title .english {
				font-size: 1.4em !important;
		}
		header .mask {
				height: 80vh;
		}
		header::after {
				width: 30vw;
				height: 30vh;
				bottom: 0rem;
		}
		section {
				padding: 10em 6em;
		}
		#calendar, #store_info {
				padding: 6em;
		}
		.title_box .title .japanese {
				font-size: 0.7em;
		}
		.title_box .title .english {
				font-size: 1.2em;
		}
		#intro {
				padding-top: 0;
		}
		.intro .intro_outer::before {
				top: 0.7em;
				right: 5vw;
				width: 28vh;
				height: 18vh;
		}
		.intro .intro_outer::after {
				top: 7em;
				left: 3vw;
				width: 23vw;
				height: 22vh;
		}
		.intro .intro_outer .box {
				margin: 0;
		}
		.intro .intro_outer .title.new img {
				width: 14vw;
		}
		.intro .intro_outer .title.bagle {
				width: 40%;
		}
		.intro .intro_outer .intro_inner {
				background-size: 50%;
				width: 90%;
				margin: 0 auto 10vh;
				display: -ms-grid;
				display: grid;
				-ms-grid-columns: 1fr 20px 1fr;
				grid-template-columns: repeat(2, 1fr);
				gap: 20px;
				padding-top: 40vh;
		}
		.intro .intro_outer .intro_inner p {
				font-size: 1.1em;
		}
		.intro .intro_outer .bagel_all_outer {
				padding: 0;
		}
		.intro .intro_outer .bagel_all_outer img {
				opacity: 0.9;
				border-radius: 0;
		}
		.calendar_box {
				text-align: center;
				height: auto;
		}
		.calendar_box img {
				height: 80vh;
		}
		.lightbox .lightbox-content img {
				max-width: calc(95vw - 40px);
				max-height: calc(95vh - 40px);
		}
		.store_info p {
				margin-bottom: 0;
				font-size: 1.1em;
		}
		.store_info .title_box {
				background-size: auto 140px !important;
		}
		.store_info .title_box .title {
				padding: 0.5em 0;
		}
		.store_info .google_map_outer .google_map {
				height: 40vh;
		}
		.online_shop p {
				text-align: center;
				font-size: 1.3em;
		}
		.online_shop .shop_items {
				gap: 4em;
				margin-bottom: 4em;
				-ms-grid-columns: 1fr 4em 1fr 4em 1fr 4em 1fr;
				grid-template-columns: repeat(4, 1fr);
		}
		.online_shop .shop_items .item_img_frame {
				height: 40vh;
		}
		.online_shop .shop_items .item_img_box .item_name {
				padding: 0 1em 0.2em;
		}
		.cafe_menu p {
				text-align: center;
				font-size: 1.3em;
		}
		.cafe_menu .cafe_items {
				display: -ms-grid;
				display: grid;
				-ms-grid-columns: 1fr 20px 1fr;
				grid-template-columns: repeat(2, 1fr);
				gap: 20px;
		}
		.cafe_menu .cafe_items .cafe_item .cafe_frame {
				height: 40vh;
		}
		.cafe_menu .cafe_items .cafe_item .cafe_label {
				bottom: 2em;
				right: 0;
				font-size: 1.4em;
		}
		.other_services p {
				font-size: 1.3em;
		}
		.other_services .description {
				text-align: center;
		}
		.other_services .case_title {
				text-align: center;
		}
		.other_services .other_services_inner {
				display: -ms-grid;
				display: grid;
				-ms-grid-columns: 1fr 1.5em 1fr 1.5em 1fr;
				grid-template-columns: repeat(3, 1fr);
				gap: 1.5em;
				margin-bottom: 5em;
		}
		.other_services .other_services_inner .other_services_box {
				margin-bottom: 3em;
		}
		.other_services .other_services_inner .other_services_box.full {
				grid-column: auto;
		}
		.other_services .other_services_inner .other_services_box .other_services_frame {
				height: 24vh;
		}
		.other_services .other_services_inner .other_services_box .other_services_frame img {
				width: 100%;
				height: 100%;
				overflow: hidden;
				-o-object-fit: cover;
				   object-fit: cover;
				border-radius: 10px;
		}
		.other_services .other_services_inner .other_services_box p {
				bottom: 0em;
				right: 0.3em;
				font-size: 0.9em;
				padding: 0.8em 1.2em;
				max-width: calc(100% - 1em);
		}
		.footer_inner .logo {
				width: 20%;
		}
}
@media (min-width: 1200px) {
		section {
				padding: 6em 10em;
		}
		.container {
				display: -ms-grid;
				display: grid;
				-ms-grid-columns: 1fr 0 1fr;
				grid-template-columns: repeat(2, 1fr);
				gap: 0;
		}
		.intro, .online_shop, .cafe_menu, .other_services {
				grid-column: 1/-1;
		}
		.calendar, .store_info {
				-ms-grid-column-span: 1;
				grid-column: span 1;
		}
		.calendar .market_info {
				-webkit-column-gap: 1.3em;
				   -moz-column-gap: 1.3em;
				        column-gap: 1.3em;
		}
		.calendar .market_info .market_img {
				width: 50%;
		}
		.calendar .market_info p:not(.market_img) {
				font-size: 1em;
				width: auto;
		}
		.store_info p {
				font-size: 1em;
				line-height: 1.7;
		}
		.store_info .google_map_outer {
				margin-top: 1em;
		}
		.store_info .google_map_outer .google_map {
				height: 50vh;
		}
		.intro .intro_outer.floater::after {
				top: 8em;
				left: 10em;
				width: 33vh;
				height: 21vh;
		}
		.intro .intro_outer.bounceIn::before {
				top: 8em;
				right: 11.2em;
				width: 36vh;
				height: 26vh;
		}
		.intro .intro_outer .intro_inner {
				-ms-grid-columns: (1fr)[4];
				grid-template-columns: repeat(4, 1fr);
		}
		.intro .intro_outer::before {
				left: auto;
				right: 22em;
				top: 8vh;
		}
		.intro .intro_outer::after {
				right: auto;
				left: 16em;
				width: 17vw;
				height: 16vh;
		}
		.intro .bagel_all_outer .bagel_grid {
				-ms-grid-columns: 1fr 1fr 1fr;
				grid-template-columns: 1fr 1fr 1fr;
				-ms-grid-rows: 1fr;
				grid-template-rows: 1fr;
		}
		.intro .bagel_all_outer .bagel_grid > *:nth-child(1) {
				-ms-grid-row: 1;
				-ms-grid-column: 1;
		}
		.intro .bagel_all_outer .bagel_grid > *:nth-child(2) {
				-ms-grid-row: 1;
				-ms-grid-column: 2;
		}
		.intro .bagel_all_outer .bagel_grid > *:nth-child(3) {
				-ms-grid-row: 1;
				-ms-grid-column: 3;
		}
		.intro .bagel_all_outer .bagel_grid .bagel_main {
				-ms-grid-column: 1;
				grid-column: 1;
				-ms-grid-row: 1;
				grid-row: 1;
		}
		.intro .bagel_all_outer .bagel_grid .bagel_sub:nth-child(2) {
				-ms-grid-column: 2;
				grid-column: 2;
				-ms-grid-row: 1;
				grid-row: 1;
		}
		.intro .bagel_all_outer .bagel_grid .bagel_sub:nth-child(3) {
				-ms-grid-column: 3;
				grid-column: 3;
				-ms-grid-row: 1;
				grid-row: 1;
		}
		.online_shop {
				/* 4枚横並び（幅に応じて折り返し可） */
				/* グリッドのセル全体を使う */
		}
		.online_shop .shop_items {
				display: -ms-grid;
				display: grid;
				-ms-grid-columns: minmax(0, 1fr) clamp(12px, 1.5vw, 24px) minmax(0, 1fr) clamp(12px, 1.5vw, 24px) minmax(0, 1fr) clamp(12px, 1.5vw, 24px) minmax(0, 1fr);
				grid-template-columns: repeat(4, minmax(0, 1fr));
				gap: clamp(12px, 1.5vw, 24px);
				-webkit-box-align: stretch;
				    -ms-flex-align: stretch;
				        align-items: stretch; /* 行内で各カードの高さを揃える */
		}
		.online_shop .online_shop_item_link {
				display: block;
				height: 100%;
				text-decoration: none;
				color: inherit;
				/* ★画像(固定) + テキスト(残り全部) の2行グリッドにする */
		}
		.online_shop .online_shop_item_link .item_img_box {
				display: -ms-grid;
				display: grid;
				-ms-grid-rows: auto 1fr;
				grid-template-rows: auto 1fr; /* 上=画像, 下=テキストが残り高さを取る */
				height: 100%;
				width: 100%;
				/* 画像は比率固定でトリミング */
				/* テキスト部は各カードで同じ高さになり、上下中央配置 */
		}
		.online_shop .online_shop_item_link .item_img_box .item_price {
				padding: 0;
		}
		.online_shop .online_shop_item_link .item_img_box .item_img_frame {
				aspect-ratio: 4/3; /* 必要なら変更 */
				overflow: hidden;
		}
		.online_shop .online_shop_item_link .item_img_box .item_img_frame img {
				width: 100%;
				height: 100%;
				-o-object-fit: cover;
				   object-fit: cover;
				display: block;
		}
		.online_shop .online_shop_item_link .item_img_box .item_text_frame {
				display: -webkit-box;
				display: -ms-flexbox;
				display: flex;
				-ms-flex-wrap: wrap;
				    flex-wrap: wrap;
				-webkit-box-align: center;
				    -ms-flex-align: center;
				        align-items: center; /* 上下中央 */
				-webkit-box-pack: center;
				    -ms-flex-pack: center;
				        justify-content: center; /* 左右中央 */
				padding: 1em 0.5em;
				text-align: center;
				min-height: 0;
				margin-bottom: 0; /* grid内のはみ出し防止 */
				/* 背景や枠があればここで指定 */
				/* 余計な上下marginでズレないように */
		}
		.online_shop .online_shop_item_link .item_img_box .item_text_frame .item_name {
				padding: 0;
				width: 100%;
				line-height: 1.2;
		}
		.online-shop-icon {
				display: none;
		}
		.online-shop-icon img {
				width: 70%;
				height: 70%;
				-o-object-fit: contain;
				   object-fit: contain;
				display: block;
		}
		.other_services .other_services_inner {
				margin-bottom: 2em;
		}
		.footer_inner {
				padding: 6em 0 1em;
		}
		.footer_inner .logo {
				width: 15%;
				margin: 0 auto 4em;
		}
}
@media (min-width: 769px) {
		.intro-swiper {
				display: none;
		}
		.box img {
				margin: 0 auto;
				display: -webkit-box;
				display: -ms-flexbox;
				display: flex;
				max-height: 20vh;
		}
		.box.kind .name {
				display: none;
		}
}