@charset "utf-8";

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

/* list
--------------------------------- */
.shop__list {
/*	margin-top: -64px;*/
	margin-bottom: 160px;
}
.shop__list li {
	font-size: 13px;
	margin-top: 64px;
}
.shop__list li {
	width: calc(50% - 32px);
}
.shop__list li:nth-child(odd) {
	margin-right: 64px;
}
.shop__list .photo {
	margin-bottom: 32px;
}
.shop__list .photo a {
	transition: opacity .5s;
}
.shop__list .photo a:hover {
	opacity: .3;
	text-decoration: none;
}
.shop__list img {
	width: 100%;
}
.shop__list h3 {
	font-size: 24px;
	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: 24px;
	position: absolute;
	top: 0;
	right: 0;
}
.shop__list .ig a {
	color: #666;
	transition: color .5s;
}
.shop__list .ig a:hover {
	color: #eb67a2;
	text-decoration: none;
}

/* common
--------------------------------- */
.link li:not(:first-of-type) a {
	border-left: none;
}
.link a {
	align-items: center;
	box-sizing: border-box;
	color: #333;
	display: flex;
	justify-content: center;
	text-align: center;
	transition: .5s;
	border: 1px solid #333;
	width: 100%;
	height: 96px;
}
.link a:hover {
	color: #aaa;
	text-decoration: none;
}

/* hero
--------------------------------- */
.hero,
.hero__slider,
.hero__slider li {
	width: 100%;
	height: calc(51vw - 16px);
}
#sakai #hero__slider01 {
	background: url(../img/cafe/photo_hero01.jpg) center no-repeat;
	background-size: 100%;
}
#osaka #hero__slider01 {
	background: url(../img/cafe/photo_hero_osaka.jpg) center no-repeat;
	background-size: 100%;
}
/* news */
#hero__news {
	text-align: center;
	line-height: 1.4;
	position: absolute;
/*	top: 160px;*/
	top: 120px;
	left: 36px;
	z-index: 900;
	width: 104px;
	height: 114px;
}
#hero__news p {
	font-size: 16px;
	font-weight: 700;
}
#hero__news time {
	font-size: 12px;
}
#hero__news a {
	background: url(../img/home/bg_news.svg) 0 0 no-repeat;
	box-sizing: border-box;
	color: #777;
	display: block;
	transition: color .5s;
	padding-top: 38px;
	height: 114px;
}
#hero__news a:hover {
	color: #eb67a2;
	text-decoration: none;
}

/* concept
--------------------------------- */
/* intro */
#concept__intro {
	margin-top: 144px;
	margin-bottom: 0;
}
#concept__intro .txts {
	margin-right: auto;
	margin-left: auto;
	width: 750px;
}
#concept__intro h2 {
	margin-bottom: 56px;
}
#concept__intro summary {
	padding-top: 24px;
}
#concept__intro details[open] summary {
	display: none;
}
#concept__intro .link {
	margin-top: 80px;
}
#concept__intro .link li {
	line-height: 1.6;
}
#sakai #concept__intro .link li {
	width: 20%;
}
#osaka #concept__intro .link li {
	width: 50%;
}
.marquee {
	color: #f7f7f7;
	display: flex;
	font-size: 120px;
	font-weight: 900;
	gap: 1rem;
	overflow: hidden;
	white-space: nowrap;
	margin-top: 32px;
	margin-bottom: 48px;
}
.marquee-inner {
	margin-right: 40px;
	animation: marquee 60s linear infinite;
}
@keyframes marquee {
	0% { translate: 0; }
	100% { translate: calc(-100% - 1rem); }
}
/* main */
#osaka #concept__main {
	padding-bottom: 0;
}
#concept__main {
	padding-top: 160px;
	padding-bottom: 160px;
}
#concept__main > div:not(:last-child) {
	padding-bottom: 120px;
}
#concept__main .photo img {
	width: 100%;
}
#concept__main .photo {
	margin-bottom: 64px;
}
#concept__main .txts {
	margin-right: 96px;
	margin-left: 96px;
}
#concept__main h3 {
	font-size: 28px;
	letter-spacing: .1em;
	line-height: 1.3;
	margin-bottom: 28px;
}
@media only screen and (max-width: 1259px){
	#concept__main .photo {
		width: calc(100% - 96px);
	}
	#concept__main .txts {
		width: calc(100% - 96px - 96px);
	}
	#concept__cafe .photo,
	#concept__sweets .photo,
	#concept__flower .photo {
		margin-left: 96px;
	}
}
@media only screen and (min-width: 1260px){
	#concept__main .photo {
		width: calc(100% - 300px);
	}
	#concept__main .txts {
		width: calc(100% - 300px - 96px);
	}
	#concept__cafe .photo,
	#concept__sweets .photo,
	#concept__flower .photo,
	#concept__cafe .txts,
	#concept__sweets .txts,
	#concept__flower .txts {
		margin-left: 300px;
	}
}

/* menu
--------------------------------- */
#menu {
	background-color: #f7f7f7;
	padding-top: 144px;
	padding-bottom: 144px;
}
.menu__inner {
	margin-bottom: 64px;
}
@media only screen and (max-width: 1259px){
	.menu__inner {
		width: calc(50% - 32px);
	}
	.menu__inner:not(:nth-child(2n)) {
		margin-right: 64px;
	}
}
@media only screen and (min-width: 1260px){
	.menu__inner {
		width: calc(33.333% - 37.333px);
	}
	.menu__inner:not(:nth-child(3n)) {
		margin-right: 56px;
	}
}
#menu h2 {
	margin-bottom: 80px;
}
#menu h3 {
	margin-bottom: 32px;
}
.menu__list dl {
	display: flex;
	flex-wrap: wrap;
	font-size: 13px;
	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;
	width: 100%;
}

/* plants
--------------------------------- */
#new-plants {
	padding-top: 160px;
	padding-bottom: 130px;
}
/* txt  */
#new-plants h2 {
	margin-left: 50px;
	margin-bottom: 56px;
}
#new-plants h2 a {
	color: #333;
	transition: color .5s;
}
#new-plants h2 a:hover {
	color: #eb67a2;
	text-decoration: none;
}
#new-plants .txts {
	flex: 1;
}
#new-plants .txt {
	margin-left: 50px;
	margin-right: 50px;
	margin-bottom: 56px;
}
#new-plants .btn {
	text-align: right;
	width: 190px;
}
/* slider */
.plants__slider figure {
	width: 450px;
}
.plants__slider img {
	width: 100%;
	transition: color .5s, opacity .5s;
}
/*.plants__slider .txts {
	position: absolute;
	left: 0;
	bottom: 0;
	padding: 40px;
}
.plants__slider h3 {
	font-weight: 900;
	line-height: 1.6;
	margin-bottom: 8px;
}
.plants__slider .term {
	font-size: 12px;
}*/
.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 {
	margin-top: 160px;
	margin-bottom: 80px;
}
#shop h2 {
	margin-bottom: 16px;
}
/* photo */
#shop .photo {
	overflow: hidden;
	max-width: 838px;
	width: 55.8vw;
}
#shop .photo {
	height: 724px;
}
/* txts */
#shop .txts {
	align-items: center;
	box-sizing: border-box;
	padding: 0 70px;
	flex: 1;
}
#shop .ttl03.is-s {
	margin-top: 24px;
}
@media only screen and (min-width: 1400px){
	#shop .hdn--pcmax {
		display: none;
	}
}

/* transportation
--------------------------------- */
#transportation {
	margin-bottom: 80px;
}
#transportation .item {
	border-bottom: 1px solid rgba(51,51,51,.15);
	padding-bottom: 40px;
	width: calc((100% - 56px) / 2);
}
#transportation .ttl03 {
	margin-bottom: 24px;
}

/* accessmap
--------------------------------- */
#accessmap {
	margin-bottom: 160px;
}
#maps {
	position: relative;
	margin-top: 56px;
}
.gmaps {
	position: absolute;
	top: 0;
	width: 100%;
	z-index: 1;
}
.gmap {
	width: 100%;
	height: 720px;
	background: #333;
}
.active {
	z-index: 100;
}
#gmap__tab a {
	cursor: pointer;
}
a.select {
	color: #eb67a2;
	text-decoration: none;
}
a.select::after {
	border-bottom: 1px solid #eb67a2;
	padding-right: 32px;
	width: 100%;
	top: 9px;
	right: 0;
}
/* txt */
.gmaps .txts {
	background-color: #f7f7f7;
	padding: 40px;
}
.gmaps .ttl03 i {
	margin-right: 12px;
}
.gmap__list {
	align-content: flex-start;
	font-size: 13px;
	flex: 1;
	line-height: 1.6;
}
.gmap__list li {
	list-style: none;
	margin-bottom: 5px;
}
.gmap__list a {
	color: #eb67a2;
}
@media only screen and (max-width: 1279px){
	#maps {
		height: 950px;
	}
	.gmaps .ttl03 {
		width: 30%;
	}
	.gmap__list {
		height: 150px;
	}
	.gmap__list li {
		width: calc(50% - 20px);
	}
}
@media only screen and (min-width: 1280px){
	#maps {
		height: 900px;
	}
	.gmaps .ttl03 {
		width: 22%;
	}
	.gmap__list {
		height: 100px;
	}
	.gmap__list li {
		width: calc(33.333% - 10px);
	}
}

/* news
--------------------------------- */
#new-blog {
	background-color: #f7f7f7;
	padding-top: 120px;
	padding-bottom: 120px;
}
/* ttl */
#new-blog .ttls,
#official .ttls,
#faq .ttls {
	width: 240px;
}
#new-blog h2 {
	margin-bottom: 16px;
}
#new-blog h2 a {
	color: #333;
	transition: color .5s;
}
#new-blog h2 a:hover {
	color: #eb67a2;
	text-decoration: none;
}
/* list */
#new-blog__list,
#official__list,
#faq__list {
	flex: 1;
}
#new-blog__list {
	margin-top: -32px;
}
#new-blog__list article {
	clear: left;
	font-size: 12px;
	margin-top: 32px;
	width: calc(50% - 16px);
}
@media only screen and (max-width: 1279px){
	#cafe #new-blog__list article {
		width: 100%;
	}
}
@media only screen and (min-width: 1280px){
	#cafe #new-blog__list article {
		width: calc(50% - 16px);
	}
}
#new-blog__list .photo {
	float: left;
	margin-right: 24px;
	width: 140px;
}
#new-blog__list img {
	width: 100%;
}
#new-blog__list .meta {
	margin-bottom: 10px;
}
#new-blog__list h3 {
	font-size: 14px;
	font-weight: 900;
	line-height: 1.6;
}
#new-blog__list a {
	color: #333;
	display: block;
	transition: opacity .5s;
}
#new-blog__list a:hover {
	opacity: .3;
	text-decoration: none;
}

/* sns
--------------------------------- */
#official,
#faq {
	margin-bottom: 160px;
}
#official h3,
#faq h3 {
	font-weight: 900;
	margin-bottom: 36px;
}
#official h3:not(:first-of-type),
#faq h3:not(:first-of-type) {
	margin-top: 56px;
}
#official .link li {
	font-size: 13px;
	line-height: .8;
	width: 20%;
}
#official .link i {
	display: block;
	font-size: 28px;
}

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