@charset "utf-8";
.writer-page{
	max-width: 840px;
	margin: 0 auto;
	background-color: #FDFAF4;
	padding: 40px 40px 1px;
}
@media screen and (min-width: 768px) {
	.writer-page{
		background: url(/images/sakka/back-texture.jpg);
		background-size: 100% auto; 
	}
	.section-mg{
		margin-bottom: 90px;
	}
	.writer-inner{
		max-width: 640px;
		margin-left: auto;
		margin-right: auto;
	}
}
@media screen and (max-width: 767px) {
	.writer-page{
		background: url(/images/sakka/back-texture-sp.jpg);
		background-size: 100% auto; 
		padding: 30px 5% 1px;
	}
	.section-mg{
		margin-bottom: 60px;
	}
}
.intro-img{
	max-width: 710px;
	margin: 0 auto;
}
.intro-title{
	position: relative;
	text-align: center;
	line-height: 1;
	margin-top: 40px;
}
.intro-title .jp{
	font-size: 25px;
	display: block;
}
.intro-title .en{
	font-size: 15px;
	display: block;
	margin-top: 10px;
}
.intro-title::after{
	content: "";
	position: absolute;
	top: calc(50% + 5px);
	left: 50%;
	transform: translate(-50%, -50%);
	width: 150px;
	height: 100%;
	background: url(/images/sakka/title-deco.svg) no-repeat center / contain;
}
.intro-text{
	margin-top: 40px;
}
.eat-area::before{
	content: '';
	display: block;
	background: url(/images/sakka/dot-border.svg) no-repeat center / contain;
	max-width: 230px;
	height: 6px;
	width: 100%;
	margin: 60px auto;
}
.eat-text{
	margin-top: 20px;
}
.youtube-wrap{
	background-color: #fff;
}
.eat-youtube {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
.eat-youtube iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}
.sakka-2img .eat-img:nth-of-type(n+2) {
  margin-top: 30px;
}
@media screen and (min-width: 768px) {
	.youtube-wrap{
		margin-top: 60px;
		padding: 40px;
		border-radius: 30px;
	}
	.sakka-2img{
		margin-top: 60px;
	}
}
@media screen and (max-width: 767px){
	.youtube-wrap{
		margin-top: 40px;
		padding: 20px;
		border-radius: 20px;
	}
	.sakka-2img{
		margin-top: 40px;
	}
}
.section-title{
	text-align: center;
	font-size: 25px;
	position: relative;
}
.section-title::after{
	content: "";
	display: block;
	width: 112px;
	height: 10px;
	background: url(/images/sakka/title-border.svg) no-repeat center / contain;
	margin: 0 auto;
}
/*
.section-title::before{
	content: "";
	display: block;
	width: 176px;
	height: 176px;
	background: url(/images/sakka/title-circle.svg) no-repeat center / contain;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateY(-50%);
}
*/
.product-area{
	margin-top: 60px;
	max-width: 540px;
	margin-left: auto;
	margin-right: auto;
}
.product-area h3{
	font-size: 22px;
	text-align: center;
}
.product-list{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	row-gap: 40px;
	margin-top: 40px;
}
.product-list li{
	width: 48%;
}
.product-list li a{
	display: block;
}
.product-list .name{
	margin-top: 10px;
}
.product-list .price{
	margin-top: 5px;
	text-align: right;
	font-size: 18px;
}
.product-list .price span{
	font-size: 0.7em;
}
.product-section h2::before,
.cat-section h2::before{
	background: none;
}

@media screen and (max-width: 767px) {
	.section-title{
		font-size: 22px;
	}
	.product-area{
		margin-top: 40px;
	}
	.product-area h3{
		font-size: 19px;
	}
	.product-list{
		margin-top: 25px;
	}
	.product-list .price{
		font-size: 16px;
	}
}
.cat-section{
	background-color: #fff;
	border-radius: 30px;
	padding: 60px 5% 40px;
}
.cat-img img{
	border-radius: 15px;
}
.cat-section h3{
	font-size: 22px;
	color: #895040;
}
.profile-box h4{
	font-weight: 500;
}
.profile-box p::before{
	content: '';
	background: url(/images/sakka/border-dashed.svg) repeat-x left center / contain;
	display: block;
	height: 4px;
	width: 100%;
	margin: 4px 0;
}
.episode-text{
	margin-top: 10px;
}
@media screen and (min-width: 768px) {
	.cat-flex{
		display: flex;
		margin-top: 50px;
		margin-bottom: 20px;
	}
	.cat-img{
		width: 50%;
		margin-right: 40px;
	}
	.profile-area{
		flex: 1;
	}
	.profile-box{
		margin-top: 20px;
	}
}
@media screen and (max-width: 767px) {
	.cat-section h3{
		font-size: 19px;
		margin-top: 20px;
	}
	.cat-flex{
		margin-top: 50px;
	}
	.profile-box{
		margin-top: 10px;
	}
}
.gallery-list{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
	margin-top: 40px;
	position: relative;
}

@media screen and (max-width: 767px) {
	.gallery-list{
		grid-template-columns: repeat(3, 1fr);
	}
}
.history-title{
	text-indent: 1em;
}
.history-title::after{
	content: "";
	display: block;
	width: 100%;
	height: 8px;
	background: url(/images/sakka/wave-border.svg) no-repeat center left / contain;
	margin: 0 auto;
}
.history-list{
	margin-top: 10px;
}
.history-list li{
	display: flex;
}
.history-list h3{
	flex-shrink: 0;
	margin-right: 20px;
}