@charset "utf-8";

/* CSS INFORMATION -====================================================
File name : topics.css
Description :
===================================================================== */

/* =====================================================================
*    topics_top
* =================================================================== */
.topics {
	padding: calc(120 / 750 * 100%) 0 calc(160 / 750 * 100%);
}

.topics::before {
	content: "";
	display: block;
	width: calc(233 / 750 * 100%);
	padding-top: calc(551 / 750 * 100%);
	background: url(../images/common/bg_deco1.webp) no-repeat center top;
	background-size: cover;
	position: absolute;
	top: 0;
	right: 0;
	margin: calc(158 / 750 * 100%) 0 0;
}

.topics::after {
	content: "";
	display: block;
	width: calc(268 / 750 * 100%);
	padding-top: calc(513 / 750 * 100%);
	background: url(../images/common/bg_deco2.webp) no-repeat center top;
	background-size: cover;
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 2;
	margin: 0 0 calc(-103 / 750 * 100%);
}

.topics .inner {
	z-index: 3;
}

.topics_box {
	width: calc(580 / 650 * 100%);
	margin: 0 auto calc(60 / 650 * 100%);
	background-color: #f5f5f5;
	-webkit-box-shadow: 0.7rem 0.7rem 0 0 #a6e4ff;
	box-shadow: 0.7rem 0.7rem 0 0 #a6e4ff;
	-webkit-transform: skewX(-4deg);
	transform: skewX(-4deg);
	overflow: hidden;
}

.topics_box:last-of-type {
	margin-bottom: 0;
}

.topics_box dt {
	width: calc(630 / 580 * 100%);
	margin: 0 0 0 calc(-25 / 580 * 100%);
	-webkit-transform: skewX(4deg);
	transform: skewX(4deg);
}

.topics_box .txt {
	padding: 1em 2em;
	-webkit-transform: skewX(4deg);
	transform: skewX(4deg);
}

.topics_box .date {
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	font-size: 2rem;
	color: #c29dff;
	margin: 0.5em 0 0;
}

.topics_box .date span {
	padding-left: .9em;
	margin-left: .5em;
}

.topics_box .date span::before {
	content: '/';
	position: absolute;
	width: .8em;
	top: -.05em;
	bottom: 0;
	left: 0;
	margin: auto;
}

.topics_box a {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 1;
}

.topics_more_btn {
	margin-top: calc(80 / 650 * 100%);
}

@media screen and (min-width: 768px) {
	.topics {
		padding: calc(100 / 1400 * 100%) 0 calc(150 / 1400 * 100%);
		background-color: transparent;
	}

	.topics::before {
		width: calc(233 / 1400 * 100%);
		padding-top: calc(551 / 1400 * 100%);
		margin: calc(-80 / 1400 * 100%) 0 0;
	}

	.topics::after {
		width: calc(268 / 1400 * 100%);
		padding-top: calc(513 / 1400 * 100%);
		margin: 0 0 calc(-140 / 1400 * 100%);
	}

	.topics_list {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		width: calc(1020 / 1200 * 100%);
		margin: 0 auto;
	}

	.topics_list li,
	.topics_box:last-of-type {
		width: calc(320 / 1020 * 100%);
		margin: 0 calc(30 / 1020 * 100%) calc(60 / 1020 * 100%) 0;
	}

	.topics_list li:nth-child(3n) {
		margin-right: 0;
	}

	.topics_box {
		top: 0;
		left: 0;
		-webkit-transition: 0.3s ease;
		transition: 0.3s ease;
	}

	.topics_box:hover {
		-webkit-box-shadow: none;
		box-shadow: none;
		top: .7rem;
		left: .7rem;
	}

	::-webkit-full-page-media,
	:future,
	:root .topics_box:hover {
		-webkit-box-shadow: 0.7rem 0.7rem 0 0 transparent;
		box-shadow: 0.7rem 0.7rem 0 0 transparent;
	}

	.topics_box .txt {
		padding: 1.5em 2em;
		font-size: 1.5rem;
		line-height: 1.5;
	}

	.topics_box .date {
		margin: 1.2em 0 0;
		font-size: 1.2rem;
	}

	.topics_more_btn {
		margin-top: 0;
	}
}

@media screen and (min-width: 1400px) {
	.topics {
		padding: 100px 0 150px;
	}

	.topics::before {
		width: 233px;
		padding-top: 551px;
		margin: -80px 0 0;
	}

	.topics::after {
		width: 268px;
		padding-top: 513px;
		margin: 0 0 -140px;
	}
}


/* =====================================================================
*    topics_sub
* =================================================================== */
.topics_sub_ttl {
	margin: 0 0 calc(50 / 650 * 100%);
}

.topics_sub_ttl h3 {
	padding: 0 0 1.4em;
	border-bottom: 1px solid #b3adb9;
	font-size: 2.6rem;
	font-weight: 700;
	line-height: 1.846;
}

.topics_sub_date {
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	font-size: 2rem;
	color: #c29dff;
	margin: 0.8em 0 0;
}

.topics_sub_date span {
	padding-left: .9em;
	margin-left: .5em;
}

.topics_sub_date span::before {
	content: '/';
	position: absolute;
	width: .8em;
	top: -.05em;
	bottom: 0;
	left: 0;
	margin: auto;
}

.topics_sub_body {
	width: calc(580 / 650 * 100%);
	margin: 0 auto;
	font-size: 2.6rem;
	line-height: 2;
	letter-spacing: 0;
}

.topics_sub_body > figure {
	border: 2px solid #ffec9c;
}

.topics_sub_body > * {
	margin: 0 0 5rem;
}

.topics_sub_body > p {
	margin-top: -0.4em;
}

.topics_sub_btn a {
	width: calc(530 / 580 * 100%);
	margin: 8rem auto 0;
	padding: 1.4em 0;
	/* background: url(../images/common/btn_txt.png) no-repeat center center;
	background-size: 100% 100%; */
	-webkit-box-shadow: 0 1.2rem 2.9rem 0 rgba(50, 0, 92, 0.22);
	box-shadow: 0 1.2rem 2.9rem 0 rgba(50, 0, 92, 0.22);
	border-radius: 6rem;
	color: #fff;
	font-size: 2.4rem;
	line-height: 1;
	text-align: center;
	background-color: #C29DFF;
    border: solid #C18AFF 2px;
}

.topics_sub_share {
	margin: calc(120 / 650 * 100%) 0 0;
	padding: calc(40 / 650 * 100%) 0;
	border-top: 1px solid #b3adb9;
	border-bottom: 1px solid #b3adb9;
}

.topics_sub_share dt {
	width: calc(76 / 650 * 100%);
	margin: 0 auto calc(40 / 650 * 100%);
}

.story_sns_share_list {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
}

.story_sns_share_list li {
	width: calc(180 / 650 * 100%);
	margin-right: calc(35 / 650 * 100%);
}

.story_sns_share_list li:last-child {
	margin-right: 0;
}

.story_sns_share_list li a {
	padding: calc(22 / 180 * 100%) 0;
	background-color: #383440;
}

.story_sns_share_list li img {
	width: calc(38 / 180 * 100%);
	margin: 0 auto;
}

.banner_list {
	margin-top: calc(100 / 650 * 100%);
}

@media screen and (min-width: 768px) {
	.topics_sub_ttl {
		width: calc(1000 / 1200 * 100%);
		margin: 0 auto calc(60 / 1200 * 100%);
	}

	.topics_sub_ttl h3 {
		font-size: 1.8rem;
		line-height: 1.778;
	}

	.topics_sub_date {
		margin: 0.9em 0 0;
		font-size: 1.2rem;
	}

	.topics_sub_body {
		width: calc(880 / 1200 * 100%);
		font-size: 1.6rem;
		line-height: 1.75;
	}

	.topics_sub_body > figure {
		width: calc(640 / 880 * 100%);
		margin-left: auto;
		margin-right: auto;
	}

	.topics_sub_body > p {}

	.topics_sub_body > * {
		margin-bottom: 4.5rem;
	}

	.topics_sub_btn a {
		width: calc(400 / 880 * 100%);
		margin: 5rem auto 0;
		padding: 1.4em 0;
		font-size: 1.6rem;
		-webkit-box-shadow: 0 1rem 2rem 0 rgba(50, 0, 92, 0.15);
		box-shadow: 0 1rem 2rem 0 rgba(50, 0, 92, 0.15);
		top: 0;
	}

	.topics_sub_btn a:hover {
		-webkit-box-shadow: 0 1.4rem 3rem 0 rgba(50, 0, 92, 0.2);
		box-shadow: 0 1.4rem 3rem 0 rgba(50, 0, 92, 0.2);
		top: -1rem;
	}

	.topics_sub_share {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		width: calc(1000 / 1200 * 100%);
		margin: calc(110 / 1200 * 100%) auto 0;
		padding: calc(30 / 1200 * 100%) 0;
	}

	.topics_sub_share dt {
		width: calc(255 / 1000 * 100%);
		margin: 0;
	}

	.topics_sub_share dt img {
		width: calc(51 / 255 * 100%);
		margin: 0 0 0 auto;
	}

	.topics_sub_share dd {
		width: calc(650 / 1000 * 100%);
	}

	.story_sns_share_list li {
		width: calc(120 / 650 * 100%);
		margin-right: calc(25 / 650 * 100%);
	}

	.story_sns_share_list li a {
		padding: calc(10 / 120 * 100%) 0;
	}

	.story_sns_share_list li.twitterShare a:hover {
		background-color: #8ccaff;
	}

	.story_sns_share_list li.facebookShare a:hover {
		background-color: #91a5ff;
	}

	.story_sns_share_list li.lineShare a:hover {
		background-color: #7cd588;
	}

	.story_sns_share_list li img {
		width: calc(21 / 120 * 100%);
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
	}

	.banner_list {
		margin-top: calc(80 / 1200 * 100%);
	}

	.banner_list li {
		margin: 0 calc(90 / 1200 * 100%) !important;
	}
}

@media screen and (min-width: 1400px) {}


/* =====================================================================
*    delivery 
* =================================================================== */
.delivery {
	margin: calc(100 / 650 * 100%) 0 0;
}

.delivery h3 {
	width: calc(501 / 650 * 100%);
	margin: 0 auto calc(40 / 650 * 100%);
}

.delivery_list {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	width: calc(750 / 650 * 100%);
	padding: calc(60 / 650 * 100%) 0;
	margin: 0 0 0 calc(-50 / 650 * 100%);
	background-color: #f5f5f5;
}

.delivery_list::before {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	background-image: rgba(255, 246, 189, 0.4) 100%);
	position: absolute;
	top: 0;
	left: 0;
}

.delivery_list li {
	width: calc(320 / 750 * 100%);
}

.delivery_list li:not(:last-child) {
	margin-right: calc(50 / 750 * 100%);
}

@media screen and (min-width: 768px) {
	.delivery {
		margin: calc(100 / 1200 * 100%) 0 0;
	}

	.delivery h3 {
		width: calc(353 / 1200 * 100%);
		margin-bottom: calc(40 / 1200 * 100%);
	}

	.delivery_box {
		padding: calc(40 / 1400 * 100%) calc(50 / 1400 * 100%);
	}

	.delivery_box::before {
		margin: calc(-324 / 1400 * 100%) auto 0;
		width: calc(468 / 1400 * 100%);
		padding-top: calc(468 / 1400 * 100%);
	}

	.delivery_list {
		width: 100%;
		margin: 0;
		padding: calc(50 / 1200 * 100%) 0;
	}

	.delivery_list li {
		width: calc(320 / 1200 * 100%);
	}

	.delivery_list li:not(:last-child) {
		margin-right: calc(100 / 1200 * 100%);
	}
}