@charset 'utf-8';

/* ---------------------------------
	インナー制御
--------------------------------- */

@media (max-width: 1280px) {
	
	.content-inner {
		padding-right: 0.5rem;
		padding-left: 0.5rem;
	}
	
	.content-inner-full {
		padding-right: 0;
		padding-left: 0;
	}
	
	.header-inner {
		padding-right: 0.5rem;
		padding-left: 0.5rem;
	}

	.breadcrumbs ol {
		padding: 0.5rem 1rem;
	}

	.reservation-inner {
		padding-right: 0.5rem;
		padding-left: 0.5rem;
	}

}

/* ---------------------------------
	PC & タブレット
--------------------------------- */

@media (min-width: 641px) {

	.only-sp {
		display: none;
	}

	.content-columns {
		gap: 0;
		grid-template-columns: repeat(2, 1fr);
	}

	.menu-price span {
		padding: 0.5rem 1rem;
	}

	.sns-button-list {
		grid-template-columns: repeat(2, 1fr);
		gap: 0.5rem;
	}

	.sns-button-list em {
		font-size: 1.5em;
	}

	.sns-button-list svg {
		margin-bottom: 0.5rem;
	}

	/* Header */

	.header-logo img {
		width: 10rem;
	}
	
	/* Footer */

	.footer-columns {
		padding-bottom: 2rem;
		grid-template-columns: repeat(2, 1fr);
	}

	.footer-sns-links {
		justify-content: flex-start;
	}

	/* Reservation */

	.reservation-content {
		padding: 5rem;
	}

	.reservation-buttons {
		grid-template-columns: repeat(2, 1fr);
	}
	
	/* Post & Page */
	
	.post-header-columns {
		grid-template-columns: 1fr repeat(3, calc(80rem / 3)) 1fr;
	}
	
	.post-header-columns::before {
		content: '';
		background: var(--color-white);
	}
	
	.post-header-columns::after {
		grid-column: 3 / 6;
	}
	
	.post-header-content {
		padding: 15rem 0 10rem;
	}

	.post-case-photo-list {
		grid-template-columns: repeat(2, 1fr);
	}

	.recommend-menu .content-columns {
		gap: 2.5rem;
	}
	
	.menu-list {
		gap: 2.5rem;
		grid-template-columns: repeat(4, 1fr);
	}
	
	.feature-list {
		grid-template-columns: repeat(2, 1fr);
	}

	.content-arrange-inner {
		margin-bottom: 1rem;
	}
	
	.menu-details {
		padding: 2.5rem;
	}

	.faq-list {
		padding: 2.5rem;
	}

}

/* ---------------------------------
	スマートフォン
--------------------------------- */

@media (max-width: 640px) {

	body {
		font-size: 14px;
	}
	
	.only-pc {
		display: none;
	}
	
	.content-inner {
		padding: 5rem 0.5rem;
	}
	
	.content-inner-small {
		padding: 2.5rem 0.5rem;
	}
	
	.content-inner-full {
		padding-right: 0;
		padding-left: 0;
	}
	
	.content-headline {
		margin-bottom: 3.5rem;
	}

	.content-headline-menu-price {
		margin-top: 3.5rem;
	}

	.sns-button-list a {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 1rem;
	}

	/* Post & Page */
	.post-header-content h1 {
		width: max-content;
		max-width: 100vw;
		padding: 0.5rem;
		position: absolute;
		top: 50%;
		left: 0rem;
		transform: translateY(-25%);
		background: rgba(255, 255, 255, 0.5);
	}

	.post-header-content h1 em {
		display: block;
		font-size: 1.75em;
	}

	.content-arrange {
		display: grid;
		gap: 0.5rem;
	}

	.content-arrange picture {
		grid-row: 1;
	}

}