@charset "utf-8";

/* ==============================
Smartphone cafe layout
Site Name: SULK;
Date: 2025.01;
================================= */

/* list
--------------------------------- */
.shop__list {
	margin-top: -16px;
	margin-bottom: 96px;
}
.shop__list li {
	font-size: 12px;
	margin-top: 64px;
}
@media only screen and (max-width: 639px){
	.shop__list li {
		width: 100%;
	}
}
@media only screen and (min-width: 640px){
	.shop__list li {
		width: calc(50% - 12px);
	}
	.shop__list li:nth-child(odd) {
		margin-right: 24px;
	}
}
.shop__list .photo {
	margin-bottom: 28px;
}
.shop__list img {
	width: 100%;
}
.shop__list h3 {
	font-size: 16px;
	font-weight: 900;
	line-height: 1.6;
	margin-bottom: 14px;
}
.shop__list .tg {
	font-weight: 900;
	margin-top: 16px;
	margin-bottom: 24px;
}
.shop__list .txts {
	position: relative;
}
.shop__list .ig {
	font-size: 16px;
	position: absolute;
	top: -2px;
	right: 0;
}
.shop__list .ig a {
	color: #666;
}

/* common
--------------------------------- */
.link a {
	align-items: center;
	box-sizing: border-box;
	color: #333;
	display: flex;
	justify-content: center;
	text-align: center;
	border: 1px solid #333;
	width: 100%;
	height: 64px;
}
.link a:hover {
	color: #aaa;
	text-decoration: none;
}

/* hero
--------------------------------- */
.hero,
.hero__slider,
.hero__slider li {
	width: 100%;
}
@media only screen and (max-width: 749px){
	.hero,
	.hero__slider,
	.hero__slider li {
		height: calc(132vw - 16px - 24px);/* warning */
	}
	#sakai #hero__slider01 {
		background: url(../img/cafe/photo_hero01_sp.jpg) center no-repeat;
		background-size: 100%;
	}
	#osaka #hero__slider01 {
		background: url(../img/cafe/photo_hero_osaka_sp.jpg) center no-repeat;
		background-size: 100%;
	}
}
@media only screen and (min-width: 750px){
	.hero,
	.hero__slider,
	.hero__slider li {
		height: calc(100vw - 16px - 24px);/* warning */
	}
	#sakai #hero__slider01 {
		background: url(../img/cafe/photo_hero01_tl.jpg) center no-repeat;
		background-size: 100%;
	}
	#osaka #hero__slider01 {
		background: url(../img/cafe/photo_hero_osaka_tl.jpg) center no-repeat;
		background-size: 100%;
	}
}
/* news */
#hero__news {
	text-align: center;
	line-height: 1.3;
	position: absolute;
/*	top: 112px;*/
	top: 80px;
	left: 22px;
	z-index: 900;
	width: 80px;
	height: 88px;
}
#hero__news p {
	font-size: 12px;
	font-weight: 700;
}
#hero__news time {
	font-size: 10px;
}
#hero__news a {
	background: url(../img/home/bg_news.svg) 0 0 no-repeat;
	background-size: 80px;
	box-sizing: border-box;
	color: #777;
	display: block;
	transition: color .5s;
	padding-top: 31px;
	height: 88px;
}
#hero__news a:hover {
	color: #eb67a2;
	text-decoration: none;
}

/* concept
--------------------------------- */
/* intro */
#concept__intro {
	margin-top: 72px;
	margin-bottom: 0;
}
#concept__intro h2 {
	margin-bottom: 40px;
}
#concept__intro summary {
	padding-top: 24px;
}
#concept__intro details[open] summary {
	display: none;
}
#concept__intro .link {
	margin-top: 48px;
}
#concept__intro .link li {
	line-height: 1.6;
}
@media only screen and (max-width: 639px){
	#concept__intro .link li {
		width: 50%;
	}
	#concept__intro .link li:nth-child(n+3) a {
		border-top: none;
	}
	#concept__intro .link li:nth-child(even) a {
		border-left: none;
	}
}
@media only screen and (min-width: 640px){
	#concept__intro .link li {
		width: 50%;
	}
	#concept__intro .link li:nth-child(n+2) a {
		border-left: none;
	}
}
.marquee {
	color: #f7f7f7;
	display: flex;
	font-size: 64px;
	font-weight: 900;
	gap: 1rem;
	overflow: hidden;
	white-space: nowrap;
	margin-top: 28px;
	margin-bottom: 36px;
}
.marquee-inner {
	margin-right: 40px;
	animation: marquee 40s linear infinite;
}
@keyframes marquee {
	0% { translate: 0; }
	100% { translate: calc(-100% - 1rem); }
}
/* main */
#concept__main {
	padding-top: 64px;
	padding-bottom: 8px;
}
#concept__main .photo img {
	width: 100%;
}
#concept__main .txts {
	margin: 48px 48px 72px;
}
#concept__main h3 {
	font-size: 24px;
	letter-spacing: .1em;
	line-height: 1.3;
	margin-bottom: 28px;
}
#concept__main .photo {
	max-width: 900px;
}
#concept__furniture .photo,
#concept__food .photo,
#concept__green .photo {
	margin-right: auto;
}
#concept__cafe .photo,
#concept__sweets .photo,
#concept__flower .photo {
	margin-left: auto;
}

/* menu
--------------------------------- */
#menu {
	background-color: #f7f7f7;
	padding-top: 56px;
	padding-bottom: 80px;
}
.menu__inner {
	border-top: 1px solid #e0e0e0;
}
.menu__inner:last-child {
	border-bottom: 1px solid #e0e0e0;
}
#menu h2 {
	font-size: 32px;
	margin-bottom: 48px;
}
#menu h3 {
	cursor: pointer;
	padding-top: 14px;
	padding-bottom: 14px;
}
#menu h3::after {
	font-family: "Font Awesome 5 Pro";
	font-weight: 300;
	content: "\f067";
	display: inline-block;
	float: right;
}
#menu div.active h3::after {
	content: "\f068";
}
.menu__list {
	margin-bottom: 48px;
}
.menu__list dl {
	display: flex;
	flex-wrap: wrap;
	font-weight: 900;
	margin-top: 24px;
}
.menu__list dt {
	flex: 1;
}
.menu__list dd {
	margin-left: 4px;
}
.menu__list dd.price {
	text-align: right;
	width: 60px;
}
.menu__list dt em {
	color: #999;
	display: block;
	font-size: 10px;
	line-height: 1.6;
	padding-top: 5px;
}

/* plants
--------------------------------- */
#new-plants {
	padding-top: 80px;
	padding-bottom: 80px;
}
/* ttl */
#new-plants h2 {
	margin-bottom: 36px;
}
#new-plants h2 a {
	color: #333;
}
#new-plants .txts {
	margin-bottom: 24px;
}
#new-plants .btn {
	margin-bottom: 48px;
}
/* slider */
.plants__slider figure {
	width: 320px;
}
.plants__slider img {
	width: 100%;
	transition: opacity .5s;
}
.plants__slider .txts {
	position: absolute;
	left: 0;
	bottom: 0;
	padding: 24px;
}
.plants__slider h3 {
	font-weight: 900;
	line-height: 1.6;
	margin-bottom: 4px;
}
.plants__slider .term {
	font-size: 10px;
}
.plants__slider a {
	background-color: #eaea70;
	/*background-color: #555e6b;*/
	color: #ebf0f0;
	display: block;
	position: relative;
}
.plants__slider a:hover {
	color: #333;
}
.plants__slider a:hover img {
	opacity: .1;
}

/* shop
--------------------------------- */
#shop {
	background-color: #f7f7f7;
	margin-bottom: 48px;
}
/* photo */
#shop .photo {
	margin-bottom: 52px;
}
#shop .photo img {
	width: 100%;
}
/* txt */
#shop .txts {
	padding-bottom: 64px;
}
#shop .ttl03 {
	margin-top: 28px;
}
@media only screen and (min-width: 480px){
	#shop .hdn--pcmax {
		display: none;
	}
}

/* transportation
--------------------------------- */
#transportation {
	margin-bottom: 64px;
}
#transportation .item {
	border-bottom: 1px solid rgba(51,51,51,.15);
	margin-top: 40px;
	padding-bottom: 24px;
}
#transportation .ttl03 {
	font-size: 16px;
	margin-bottom: 16px;
}

/* accessmap
--------------------------------- */
#accessmap {
	margin-bottom: 80px;
}
#maps {
	position: relative;
	margin-top: 32px;
}
.gmaps {
	position: absolute;
	top: 0;
	width: 100%;
	z-index: 1;
}
.gmap {
	width: 100%;
	height: 360px;
	background: #333;
}
.active {
	z-index: 100;
}
#gmap__tab {
	font-size: 10px;
}
#gmap__tab a {
	cursor: pointer;
}
a.select {
	border-color: #eb67a2;
	color: #eb67a2;
	text-decoration: none;
}
/* txt */
.gmaps .txts {
	background-color: #f7f7f7;
	padding: 24px 24px 40px;
}
.gmaps .ttl03 i {
	margin-right: 12px;
}
.gmap__list {
	align-content: flex-start;
	font-size: 11px;
	line-height: 1.6;
}
.gmap__list li {
	list-style: none;
	margin-bottom: 5px;
}
.gmap__list a {
	color: #eb67a2;
}
@media only screen and (max-width: 519px) {
	#maps {
		height: 724px;
	}
	.gmap__list {
		height: 270px;
	}
	.gmap__list li {
		width: 100%;
	}
}
@media only screen and (min-width: 520px) and (max-width: 767px) {
	#maps {
		height: 594px;
	}
	.gmap__list {
		height: 140px;
	}
	.gmap__list li {
		width: calc(50% - 10px);
	}
}
@media only screen and (min-width: 768px){
	#maps {
		height: 544px;
	}
	.gmap__list {
		height: 90px;
	}
	.gmap__list li {
		width: calc(33.333% - 5px);
	}
}

/* news
--------------------------------- */
#new-blog {
	background-color: #f7f7f7;
	padding-top: 64px;
	padding-bottom: 64px;
}
#cafe #new-blog {
	background-color: white;
	padding-top: 0;
	padding-bottom: 80px;
}
/* ttl */
#new-blog h2 {
	margin-bottom: 52px;
}
#new-blog h2 a {
	color: #333;
}
#new-blog .sns {
	align-items: flex-start;
}
/* list */
#new-blog__list {
	margin-top: -16px;
}
#new-blog__list article {
	border-bottom: 1px solid rgba(51,51,51,.15);
	clear: left;
	font-size: 11px;
}
@media only screen and (max-width: 749px){
	#new-blog__list article {
		width: 100%;
	}
}
@media only screen and (min-width: 750px){
	#new-blog__list article {
		width: calc(50% - 12px);
	}
}
#new-blog__list .photo {
	float: left;
	margin-right: 16px;
	margin-bottom: 16px;
	width: 92px;
}
#new-blog__list img {
	width: 100%;
}
#new-blog__list .meta {
	margin-bottom: 8px;
}
#new-blog__list h3 {
	font-size: 11px;
	font-weight: 900;
	line-height: 1.6;
	margin-bottom: 16px;
}
#new-blog__list a {
	color: #333;
	display: block;
	padding-top: 16px;
}

/* sns
--------------------------------- */
#official,
#faq {
	margin-bottom: 80px;
}
#official h2,
#faq h2 {
	margin-bottom: 36px;
}
#official h3,
#faq h3 {
	font-weight: 900;
	margin-bottom: 24px;
}
#official h3:not(:first-of-type),
#faq h3:not(:first-of-type) {
	margin-top: 40px;
}
#official .link li {
	font-size: 11px;
	line-height: .75;
}
#official .link i {
	display: block;
	font-size: 20px;
}
@media only screen and (max-width: 639px){
	#official .link li {
		font-size: 11px;
		line-height: .75;
		width: 33.333%;
	}
	#official .link li:nth-child(n+4) a {
		border-top: none;
	}
	#official .link li:nth-child(2) a,
	#official .link li:nth-child(3) a,
	#official .link li:nth-child(5) a,
	#official .link li:nth-child(6) a {
		border-left: none;
	}
}
@media only screen and (min-width: 640px){
	#official .link li {
		font-size: 11px;
		line-height: .75;
		width: 20%;
	}
	#official .link li:nth-child(n+2) a {
		border-left: none;
	}
}

/* faq
--------------------------------- */
#faq h3 + details {
	border-top: 1px solid #e1e6e6;
}
#faq details {
	border-bottom: 1px solid #e1e6e6;
	padding: 0 40px 12px 0;
}
#faq details[open] {
	padding-bottom: 24px;
}
#faq summary {
	cursor: pointer;
	display: block;
	font-weight: 900;
	list-style: none;
	padding: 24px 0 12px;
}
#faq summary::-webkit-details-marker {
	display: none;
}
#faq summary:before {
	content: "\f067";
	font-family: "Font Awesome 5 Pro";
	font-size: 20px;
	font-weight: 300;
	margin-top: -8px;
	position: absolute;
	right: 24px;
}
#faq details[open] summary:before,
#faq summary details[open] summary:before {
	content: "\f068";
}