@charset "utf-8";

/* ===========================================
	common
============================================== */
.main {
	position: relative;
	background-image: url(../images/top/cloud_green04.png);
	background-position: right -10rem bottom -7.8rem;
	background-size: 58rem;
}

.main::before {
	position: absolute;
	z-index: -1;
	top: 68.5rem;
	left: -12.4rem;
	width: 52rem;
	height: 45.5rem;
	background-image: url(../images/top/cloud_green03.png);
	background-position: center;
	background-size: contain;
	content: '';
}

.under_ttl_area {
	padding-bottom: 1.24rem;
}

/* ============
	responsive
================ */
@media screen and (max-width: 767px) {
	.main{
		background-image: none;
	}
}

@media screen and (max-width: 640px) {
	.main::before {
		top: 56rem;
		left: -4.7rem;
		width: 27.4rem;
		height: 23.8rem;
	}
}

/* ===========================================
	SPlus
============================================== */
.single-splus .main {
	background-image: url(../images/common/cloud_orange_splus02.png);
	background-position: right -12.8rem bottom -6rem;
	background-size: 64.4rem;
}

.single-splus .main::before {
	position: absolute;
	top: 45.2rem;
	left: -36.7rem;
	z-index: -1;
	width: 77.1rem;
	height: 56.5rem;
	background-image: url(../images/common/cloud_orange_splus01.png);
}

._df_book{
	margin-top: 6rem;
}

.present_area {
	margin: 7.7rem -5rem -7.4rem;
	padding: 7rem 5rem 10rem;
	background-color: var(--light_orange_color);
}

.present_area,
.present_area p {
	color: #413529 !important;
	font-size: 1.6rem;
}

.present_area p {
	line-height: 1.875;
}

.present_area p + .flowpaper_wrap {
	margin-top: 5.4rem;
}

.present_ttl {
	display: inline-block;
	position: relative;
	margin-bottom: 2.35rem;
	padding: 1.85rem 4.4rem 1.85rem 5rem;
	border-top: solid 2px var(--orange_color);
	border-bottom: solid 2px var(--orange_color);
}

.present_ttl::before,
.present_ttl::after {
	position: absolute;
	bottom: 2.2rem;
	background-position: center;
	background-size: contain;
	content: '';
}

.present_ttl::before {
	left: 0;
	width: 3.4rem;
	height: 4.1rem;
	background-image: url(../images/post/present_ttl_img01.svg);
}

.present_ttl::after {
	right: 0;
	width: 3.7rem;
	height: 2.7rem;
	background-image: url(../images/post/present_ttl_img02.svg);
}

.present_ttl h2 {
	font-weight: 500;
	font-size: 2.3rem;
}

.present_ttl p + h2 {
	margin-top: 0;
}

.present_area p + h3 {
	margin-top: 6rem;
}

.present_area h3 {
	padding-bottom: 1rem;
	background-image: url(../images/common/dotted_line_orange.svg);
	background-position: center bottom;
	background-size: auto;
	font-weight: 500;
	font-size: 2.1rem;
}

.present_area h3 + p {
	margin-top: 2.3rem;
}

.present_area p + .wp-block-gallery {
	margin-top: 5.6rem;
}

.present_area .wp-block-gallery .wp-block-image img {
	border-radius: 0.8rem;
}

.present_area .wp-block-gallery .wp-block-image .wp-element-caption {
	padding-top: 0.7rem;
	padding-bottom: 0.7rem;
	border-radius: 0 0 0.8rem 0.8rem;
	background: rgba(65, 53, 41, 0.7);
}

/* ============
	responsive
================ */
@media screen and (max-width: 1024px) {
	.present_area {
		margin-bottom: -7rem;
	}
}

@media screen and (max-width: 768px) {
	.present_area {
		margin: 6rem -3rem -7rem;
		padding: 6rem 3rem 8rem;
	}
}

@media screen and (max-width: 767px) {
	.single-splus .main{
		background-image: none;
	}
	
	.single-splus .post_inner {
		grid-template-columns: 1fr;
	}

	.single-splus .post_sidebar {
		background-color: transparent;
	}

	.single-splus .post_sidebar_ttl,
	.single-splus .post_sidebar_list_wrap {
		background-color: #ffeec7;
	}
}

@media screen and (max-width: 640px) {
	.single-splus .main::before {
		top: 39.5rem;
		left: -11.4rem;
		width: 26.2rem;
		height: 19.2rem;
	}
}

/* ===========================================
	single
============================================== */
.post_inner {
	grid-template-rows: 20rem auto auto 12rem;
}

.article_area {
	grid-column: 1 / 2;
	grid-row: 2 / 3;
	padding: 5.6rem 0 7.4rem;
	background-color: #fff;
}

.single-post .article_area,
.single-splus .article_area {
	padding-right: 5rem;
	padding-left: 5rem;
}

.post_sidebar {
	grid-column: 2 / 3;
	grid-row: 2 / 3;
}

.blog_date {
	display: block;
	margin-bottom: 2rem;
	color: #8e8e8e;
	font-weight: 500;
	font-size: 1.5rem;
	font-family: 'Roboto', sans-serif;
}

.blog_ttl_h1 {
	margin-bottom: 3.5rem;
	padding-left: 1.9rem;
	border-left: solid 1.3rem var(--orange_color);
	font-weight: 500;
	font-size: 3.2rem;
	line-height: 1.27;
}

.blog_cat {
	display: inline-block;
	margin-bottom: 1.8rem;
	padding-left: 0.8rem;
	padding-right: 0.8rem;
	background-color: var(--green_color);
	color: #fff;
	font-weight: 500;
	font-size: 1.6rem;
	line-height: 2.7rem;
}

.salasa_color {
	background-color: var(--orange_color);
}

.kirakira_color {
	background-color: var(--pink_color);
}

.project_color {
	background-color: var(--navy_color);
}

.eye_catch_wrap {
	margin-bottom: 3.2rem;
}

/* ============
	responsive
================ */
@media screen and (max-width: 1024px) {
	.post_inner {
		grid-template-rows: 13.5rem auto auto 12rem;
		border-radius: 5rem 5rem 0 0;
	}

	.article_area {
		padding: 5rem 0 7rem;
	}

	.blog_date,
	.blog_cat {
		font-size: 1.5rem;
	}

	.blog_ttl_h1 {
		margin-bottom: 1.6rem;
		padding-left: 1.2rem;
		font-size: 2.2rem;
		border-width: 1rem;
	}

	.blog_cat {
		margin-bottom: 3.6rem;
	}
}

@media screen and (max-width: 768px) {
	.blog_ttl_area {
		padding-right: 3rem;
		padding-left: 3rem;
	}

	.single-post .article_area,
	.single-splus .article_area {
		padding-right: 3rem;
		padding-left: 3rem;
	}
}

@media screen and (max-width: 767px) {
	.post_inner {
		grid-template-columns: 1fr;
		grid-template-rows: 13.5rem auto auto 12rem auto;
		box-shadow: none;
	}

	.post_sidebar {
		grid-column: 1 / 2;
		grid-row: 5 / 6;
		padding: 5rem 0 0;
		background-color: transparent;
	}

	.post_sidebar_item + .post_sidebar_item {
		margin-top: 3rem;
	}

	.post_sidebar_ttl,
	.post_sidebar_list_wrap {
		padding: 2.1rem 2.3rem 1.8rem;
		background-color: #eaf7d2;
	}

	.post_sidebar_ttl {
		margin-bottom: 0;
	}

	.post_sidebar_ttl::before {
		content: none;
	}

	.post_sidebar_ttl::after {
		position: absolute;
		top: 0;
		right: 0.5rem;
		bottom: 0;
		width: 3rem;
		height: 3rem;
		margin: auto;
		color: var(--orange_color);
		font-weight: 700;
		font-size: 3rem;
		content: '＋';
	}

	.post_sidebar_list_wrap {
		padding-top: 1rem;
	}

	.article_post_wrap {
		grid-column: 1 / 2;
		grid-row: 3 / 4;
	}

	.pagination_area {
		grid-row: 4 / 5;
	}
}

@media screen and (max-width: 480px) {
	.post_sidebar {
		padding-right: 3rem;
		padding-left: 3rem;
	}
}

/* ===========================================
	comment
============================================== */
.blog_comments_area {
	grid-column: 1 / 3;
	grid-row: 3 / 4;
	padding-top: 10rem;
	padding-bottom: 10rem;
	border-left: solid 5rem var(--orange_color);
	background-color: var(--light_orange_color);
}

.blog_comments_ttl_wrap .en_sub,
.blog_comments_ttl {
	text-align: center;
}

.blog_comments_ttl_wrap .en_sub {
	margin-bottom: 1.5rem;
	letter-spacing: 0.05em;
}

.blog_comments_ttl {
	position: relative;
	margin-bottom: 6.5rem;
	font-weight: 500;
	font-size: 3.8rem;
	letter-spacing: -0.07em;
}

.blog_comments_ttl::before,
.blog_comments_ttl::after {
	color: var(--orange_color);
	font-weight: 400;
	font-size: 4rem;
	font-family: 'Font Awesome 5 Free';
}

.blog_comments_ttl::before {
	margin-right: 1.5rem;
	content: '\f086';
}

.blog_comments_ttl::after {
	margin-left: 1.5rem;
	content: '\f075';
}

.commentlist,
.comment-respond {
	max-width: 62.5rem;
	width: 100%;
	margin-right: auto;
	margin-left: auto;
}

.commentlist {
	margin-bottom: 9rem;
	padding-left: 0;
	counter-reset: mycounter 0;
}

.commentlist > .comment {
	position: relative;
	counter-increment: mycounter;
}

.commentlist > .comment:before {
	position: absolute;
	top: 5.6rem;
	left: 3.3rem;
	z-index: 1;
	color: #ffeec7;
	font-weight: 500;
	font-size: 4.8rem;
	font-family: 'Roboto', sans-serif;
	content: counter(mycounter, decimal-leading-zero);
}

.comment + .comment {
	margin-top: 4.6rem;
}

.children {
	margin-top: 2.2rem;
}

.comment-body {
	position: relative;
	padding: 7.8rem 7.7rem 5.8rem 9.8rem;
	border-radius: 4rem;
	box-shadow: 0 0 3rem #f4dcb2;
	background-color: #fff;
}

.children .comment-body {
	width: calc(100% - 9.8rem);
	margin-left: auto;
	padding-top: 7rem;
}

.comment-body::before {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 100%;
	width: 0;
	height: 0;
	margin: auto;
	border-style: solid;
	border-width: 22px 0 22px 38.1px;
	border-color: transparent transparent transparent #fff;
	content: '';
}

.children .comment-body::before {
	right: 100%;
	left: auto;
	transform: scale(-1, 1);
}

.comment-author,
.comment-meta,
.comment-body p,
.comment-reply-link {
	font-size: 1.6rem;
	line-height: 1.5625;
}

.comment-author,
.comment-meta {
	display: flex;
	align-items: center;
}

.comment-author {
	margin-bottom: 1.5rem;
}

.fn {
	margin-right: 0.5em;
}

.fn,
.fn > a {
	font-style: normal;
}

.comment-meta {
	margin-bottom: 2.8rem;
	color: #8e8e8e;
	font-weight: 400;
	font-family: 'Roboto', sans-serif;
	letter-spacing: -0.025em;
}

.comment-meta > a {
	color: #8e8e8e;
}

.comment-meta::before {
	margin-right: 0.7rem;
	font-weight: 400;
	font-family: 'Font Awesome 6 Free';
	content: '\f017';
}

.comment-body p {
	margin-bottom: 3.8rem;
}

.comment-body p > a,
.logged-in-as > a {
	display: inline-block;
	color: var(--orange_color);
	text-decoration: underline;
}

.comment-reply-link {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	width: 10.4rem;
	height: 3.7rem;
	padding-right: 1.9rem;
	border-radius: 0.3rem;
	background-color: var(--orange_color);
	color: #fff;
}

.comment-reply-link:hover,
.form-submit > input:hover {
	opacity: 0.7;
}

.comment-reply-link::before,
.form-submit::before {
	position: absolute;
	font-weight: 900;
	font-family: 'Font Awesome 6 Free';
	content: '\f0a9';
}

.comment-reply-link::before {
	right: 1.9rem;
	font-size: 1.8rem;
}

.comment-respond {
	padding: 6.4rem 7rem 7rem;
	border: solid 0.8rem var(--orange_color);
	border-radius: 4.7rem 4.7rem 0 0;
	background-color: #ffeec7;
}

.comment-reply-title {
	margin-bottom: 4.5rem;
	font-weight: 500;
	font-size: 3.2rem;
	text-align: center;
}

.comment-reply-title::before {
	font-weight: 400;
	font-family: 'Font Awesome 6 Free';
	content: '\f044';
}

.comment-reply-title > a,
.comment-reply-title a[rel='nofollow'] {
	color: var(--orange_color);
	text-decoration: underline;
}

.comment-reply-title > a {
	display: inline;
}

.comment-reply-title a[rel='nofollow'] {
	margin-top: 1.6rem;
}

.comment-respond p.logged-in-as,
.comment-respond p.comment-notes {
	line-height: 1.5;
}

.required-field-message {
	display: block;
}

.comment-respond p {
	font-size: 1.6rem;
	line-height: 1.375;
}

.comment-respond p + p {
	margin-top: 2.1rem;
}

.comment-notes {
	margin-bottom: 3rem;
}

label {
	display: inline-block;
	margin-bottom: 1.2rem;
}

input[type='text'],
textarea {
	display: block;
	padding-left: 2.1rem;
	padding-right: 2.1rem;
	width: 100%;
	border: solid 0.2rem #b9b9b9;
	border-radius: 0.8rem;
	background-color: #fff;
}

input[type='text'] {
	padding-top: 0.6rem;
	padding-bottom: 0.7rem;
}

textarea {
	padding-top: 2.1rem;
	padding-bottom: 2.1rem;
}

.comment-form-cookies-consent {
	display: flex;
	align-items: flex-start;
	column-gap: 1rem;
}

#wp-comment-cookies-consent {
	width: 2rem;
	height: 2rem;
	margin-top: 0.3rem;
}

label[for='wp-comment-cookies-consent'] {
	width: calc(100% - 3rem);
	line-height: 1.375;
}

.form-submit,
.form-submit > input {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 22rem;
	height: 6rem;
}

.form-submit {
	position: relative;
}

.form-submit > input {
	padding-right: 2.5rem;
	border-radius: 0.3rem;
	background-color: var(--orange_color);
	color: #fff;
}

.form-submit::before {
	right: 2.6rem;
	color: #fff;
	font-size: 2.3rem;
}

input[type='submit'] {
	font-size: 1.8rem;
}

/* ============
	responsive
================ */
@media screen and (max-width: 1024px) {
	.blog_comments_area {
		padding-top: 4rem;
		padding-bottom: 7.8rem;
		border-width: 3rem;
	}

	.blog_comments_ttl_wrap .en_sub {
		margin-bottom: 0.5rem;
		font-size: 1.5rem;
	}

	.blog_comments_ttl {
		margin-bottom: 3rem;
		font-size: 2.2rem;
	}

	.blog_comments_ttl::before,
	.blog_comments_ttl::after {
		font-size: 2.5rem;
	}

	.commentlist {
		margin-bottom: 6.2rem;
	}

	.commentlist > .comment:before {
		top: 4.6rem;
		left: 2.7rem;
		font-size: 3rem;
	}

	.children {
		margin-top: 3rem;
	}

	.comment-body {
		padding-top: 7rem;
		padding-bottom: 4rem;
		box-shadow: 0 0 2rem #f4dcb2;
		border-radius: 3rem;
	}

	.comment-body::before {
		top: 5rem;
		bottom: auto;
		border-width: 16.5px 0 16.5px 19px;
	}

	.children .comment-body {
		padding-top: 4rem;
	}

	.comment-author,
	.comment-meta,
	.comment-body p,
	.comment-reply-link {
		font-size: 1.5rem;
	}

	.comment-author {
		margin-bottom: 1.3rem;
	}

	.comment-meta {
		margin-bottom: 2.5rem;
	}

	.comment-respond {
		padding: 4.7rem 2.4rem 4rem;
		border-radius: 3rem 3rem 0 0;
		border-width: 0.4rem;
	}

	.comment-reply-title {
		margin-bottom: 2.5rem;
		font-size: 2.2rem;
	}

	.comment-reply-title::before {
		font-size: 2.5rem;
	}

	p.comment-notes,
	label[for='wp-comment-cookies-consent'] {
		font-size: 1.4rem;
	}

	.comment-notes {
		margin-bottom: 2rem;
	}

	.form-submit,
	.form-submit>input {
		width: 19.5rem;
	}

	.form-submit::before {
		right: 2.1rem;
	}

	input[type='submit'] {
		font-size: 1.6rem;
	}
}

@media screen and (max-width: 768px) {
	.blog_comments_area {
		padding-right: 3rem;
		padding-left: 1.5rem;
	}

	.comment-body {
		padding-right: 3rem;
		padding-left: 3rem;
	}

	.children .comment-body {
		width: calc(100% - 1.8rem);
	}
}

@media screen and (max-width: 540px) {
	.comment-reply-link {
		margin-left: auto;
	}

	.form-submit {
		margin-right: auto;
		margin-left: auto;
	}
}

/* ===========================================
	post_nav_area
============================================== */
.post_nav_area {
	grid-column: 1 / 3;
	grid-row: 4 / 5;
	border: solid 0.2rem var(--orange_color);
	background-color: #fff;
}

.post_nav_inner {
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 12rem;
}

.post_prev_wrap,
.post_next_wrap {
	width: 9rem;
}

.post_prev,
.home_back,
.post_next {
	padding: 1rem;
	font-weight: 500;
	font-size: 1.6rem;
	color: #333;
}

.post_prev,
.post_next {
	justify-content: center;
	align-items: center;
	position: relative;
}

.single-splus .post_prev {
	justify-content: flex-start;
}

.post_prev {
	padding-left: 0;
}

.single-splus .post_next {
	justify-content: flex-end;
}

.post_next {
	padding-right: 0;
}

.post_prev::before,
.post_next::before,
.post_prev::after,
.post_next::after {
	position: absolute;
	content: '';
}

.post_prev::before,
.post_next::before {
	width: 3.6rem;
	height: 3.6rem;
	border-radius: 9999px;
	background-color: #f4dcb2;
}

.post_prev::before {
	left: -4.6rem;
}

.post_next::before {
	right: -4.6rem;
}

.post_prev::after,
.post_next::after {
	width: 1.2rem;
	height: 1.17rem;
	background-image: url(../images/common/icon_arrow_right_brown.svg);
	background-position: center;
	background-size: contain;
}

.post_prev::after {
	left: -3.4rem;
	transform: scale(-1, 1);
}

.post_next::after {
	right: -3.4rem;
}

.home_back_wrap {
	margin-right: 7.9rem;
	margin-left: 7.9rem;
}

.home_back {
	text-align: center;
}

.home_back_inner {
	padding-bottom: 0.1rem;
	border-bottom: solid 1px var(--orange_color);
}

/* ============
	responsive
================ */
@media screen and (max-width: 1024px) {
	.post_prev,
	.home_back,
	.post_next {
		font-size: 1.4rem;
	}
}

@media screen and (max-width: 768px) {
	.home_back_wrap {
		margin-right: 1.9rem;
		margin-left: 1.9rem;
	}
}

@media screen and (max-width: 540px) {
	.post_prev,
	.post_next {
		padding-top: 4rem;
	}

	.post_prev::before,
	.post_next::before {
		top: 0;
	}

	.post_prev::before {
		left: 0;
	}

	.post_next::before {
		right: 0;
	}

	.post_prev::after,
	.post_next::after {
		top: 1.2rem;
	}

	.post_prev::after {
		left: 1.2rem;
	}

	.post_next::after {
		right: 1.2rem;
	}
}

/* ===========================================
	carehome
============================================== */
.under_ttl_area.custom_ttl_area {
	padding-bottom: 0;
}

/* ============
	responsive
================ */
@media screen and (max-width: 781px) {
	.features_wrap .is-layout-flow + .is-layout-flow {
		margin-top: 6rem;
	}
}