@charset "UTF-8";

/*
=====================================
全体設定
=====================================
*/
body {
	background-color: #cc83b3;
	font-size: 14px;
}

img {
	width: 100%;
	vertical-align: bottom;
}

main {
	max-width: 1280px;
	position: relative;
	font-family: "Yu Mincho", "Noto Serif JP", serif;
	margin: auto;
	padding: 61px 0 9%;
}

main .wrap {
	position: relative;
	background-color: #fff;
	width: 88%;
	margin: 0 auto 7%;
}

main .wrap::before {
	position: absolute;
	top: -4.5vw;
	left: -3%;
	background-image: url('../images/flower_sp.svg');
	background-size: contain;
	background-repeat: no-repeat;
	content: "";
	width: 13.334%;
	height: 9.6vw;
}

@media screen and (min-width: 700px) {
	.spbr {
		display: none;
	}

	.pcbr {
		display: block;
	}
}

@media screen and (min-width: 768px) {
	main {
		padding: 74px 0 9%;
	}

	main .wrap {
		width: 85.937%;
		margin: 0 auto 5.4%;
	}

	main .wrap::before {
		top: -0.18%;
		left: -1.8%;
		width: 7.455%;
		height: 5.2vw;
	}
}

@media screen and (min-width: 1024px) {
	body {
		font-size: 16px;
	}
}

@media screen and (min-width: 1280px) {
	main .wrap::before {
		width: 82px;
		height: 67px;
	}
}

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

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

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

/*
=====================================
								FV
=====================================
*/
#fv {
	padding: 49px 0 0;
}

#fv h2 {
	width: 63.9%;
	margin: 0 auto 4.3%;
}

#fv h3 {
	position: relative;
	width: 82.4%;
	margin: 0 auto 0 10%;
	z-index: 10;
}

#fv .wrap_fv {
	position: relative;
}

#fv picture.fv_img img {
	position: relative;
	display: block;
	width: 88%;
	margin: -1.9% auto 8.4%;
	z-index: 5;
}

#fv section {
	width: 80%;
	margin: 0 auto 8.5%;
}

#fv section h4 {
	color: #f5e44c;
	font-size: 2.0715em;
	font-weight: 600;
	text-align: center;
	line-height: 1.3;
	letter-spacing: 0.02em;
	margin: 0 auto 0.5em;
}

#fv section h4 span {
	font-size: 0.7241em;
	letter-spacing: 0.05em;
}

#fv section p {
	color: #FFF;
	font-size: 1.0714em;
	font-weight: 600;
	line-height: 2;
	width: 90%;
	margin: auto;
}

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

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

@media screen and (min-width: 700px) {
	#fv {
		padding: 77px 0 0;
	}

	#fv h2 {
		width: 39%;
		margin: 0 auto 2.75%;
	}

	#fv h3 {
		width: 71.5%;
		margin: 0 auto 0 22.3%;
	}

	#fv picture.fv_img img {
		width: 73%;
		margin: -1.5% auto 4%;
	}

	#fv .fv_tiny img {
		top: -4.5%;
		left: -1.5%;
		right: 0;
		bottom: initial;
		width: 47.5%;
		margin: 0 auto;
	}


	#fv section {
		width: 86%;
		margin: 0 auto 7.3%;
	}

	#fv section h4 {
		font-size: 3.4375em;
		line-height: 1.15;
		letter-spacing: 0.015em;
	}

	#fv section h4 span {
		font-size: 0.65454em;
		letter-spacing: 0.05em;
	}

	#fv section p {
		font-size: 1.6875em;
		line-height: 1.89;
		width: 81.054%;
	}
}

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

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

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

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

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

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

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

/*
=====================================
本文記事　共通設定
=====================================
*/

#wrap>section {
	padding: 0 7.5%;
}

#wrap>section a {
	text-decoration: underline;
}

#wrap>section h5 {
	border-bottom: solid 1px #cc83b3;
	font-size: 1.2142em;
	font-weight: 600;
	text-align: center;
	letter-spacing: -0.03em;
	margin: 0 auto 1em;
	padding: 1.5em 0 0.3em;
}

#wrap>section p {
	color: #231815;
	font-size: 1.0714em;
	letter-spacing: -0.05em;
	font-weight: 500;
	line-height: 1.8;
	text-align: justify;
	margin: 0 auto 9.5%;
}

#wrap .img_wrap {
	display: flex;
	flex-direction: column;
}

#wrap .img_wrap>div {
	display: contents;
}

#wrap .img_wrap>div>div {
	display: contents;
}

#wrap>section div.images {
	margin: 0 auto 1em;
}

#wrap>section div.caption p {
	position: relative;
	font-size: 0.8571em;
	font-weight: 500;
	line-height: 1.583;
	letter-spacing: 0.05em;
	text-indent: 1em;
	margin: 0;
}

#wrap>section div.caption p::before {
	position: absolute;
	left: -1em;
	content: "●";
}

/* きっかけは、素敵なヨガの先生とサロンの心地よさ */
#wrap .chance picture:first-of-type {
	order: 1;
	margin-bottom: 1em;
}

#wrap .chance picture:last-of-type {
	order: 3;
	margin-bottom: 1em;
}

#wrap .chance .caption {
	display: block;
	order: 2;
	margin-bottom: 1em;
}

/* 「毎日、木が見えて最高なんですよ。毎日感動です」 */

#wrap .impressed .img_wrap picture,
#wrap .impressed .img_wrap>div.caption p {
	margin-bottom: 1em;
}

#wrap .impressed .img_wrap picture.img_01 {
	order: 1;
}

#wrap .impressed .img_wrap picture.img_02 {
	order: 3;
}

#wrap .impressed .img_wrap picture.img_03 {
	order: 5;
}

#wrap .impressed .img_wrap picture.img_04 {
	order: 7;
}

#wrap .impressed .img_wrap>div.caption {
	display: contents;
}

#wrap .impressed .img_wrap>div.caption p.p_01 {
	order: 2;
}

#wrap .impressed .img_wrap>div.caption p.p_02 {
	order: 4;
}

#wrap .impressed .img_wrap>div.caption p.p_03 {
	order: 6;
}

#wrap .impressed .img_wrap>div.caption p.p_04 {
	order: 8;
	margin-bottom: 2em;
}

#wrap .impressed .img_wrap.img_wrap_02 p.p_02 {
	margin-bottom: 2em;
}

/* 「この木材は、人もつなげてくれるんだなーって思います」 */

#wrap .connect .img_wrap picture,
#wrap .connect .img_wrap>div.caption p {
	margin-bottom: 1em;
}

#wrap .connect .img_wrap picture.img_01 {
	order: 1;
}

#wrap .connect .img_wrap picture.img_02 {
	order: 3;
}

#wrap .connect .img_wrap picture.img_03 {
	order: 5;
}

#wrap .connect .img_wrap>div.caption p.p_01 {
	order: 2;
}

#wrap .connect .img_wrap>div.caption p.p_02 {
	order: 4;
}

#wrap .connect .img_wrap>div.caption p.p_03 {
	order: 6;
	margin-bottom: 2em;
}


/* エピローグ */
#wrap>section.epilogue {
	margin: auto;
	padding: 0 7.5% 1%;
}

#wrap>section.epilogue p {
	/* color: #752e05; */
	font-size: 1.0714em;
	font-weight: 600;
	line-height: 2;
	text-align: left;
	margin: 0 auto 9%;
}

#wrap>section.epilogue .epilogue_info p {
	font-size: 0.75em;
}

#wrap>section.epilogue .epilogue_info span {
	position: relative;
	display: block;
	font-size: 1.45em;
	letter-spacing: 0.1em;
	text-indent: 1.2em;
}

#wrap>section.epilogue .epilogue_info span::before {
	position: absolute;
	left: -1.2em;
	content: "●";
}

#wrap>section.epilogue a {
	word-break: break-all;
	text-decoration: none;
}

#wrap>section.epilogue figure {
	margin: 0 auto 3%;
}

#wrap>section.epilogue figcaption {
	position: relative;
	font-size: 0.9333em;
	line-height: 1.5714;
	text-indent: 1em;
	margin: 0 auto 13%;
}

#wrap>section.epilogue figcaption::before {
	position: absolute;
	left: -1em;
	content: "＊";
}

#wrap>section.epilogue div.enjoy_more {
	width: 96.42%;
	margin: auto;
}

#wrap>section.epilogue div.enjoy_more>picture img {
	display: block;
	width: 66.6%;
	margin: 0 auto 4%;
}

#wrap>section.epilogue div.enjoy_more a {
	display: block;
	margin: 0 auto 5%;
}

#wrap>section.epilogue div.enjoy_more p.umai {
	color: #231815;
	font-size: 0.9em;
	line-height: 1.583;
	margin: 0 auto 12%;
}


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

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

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

	#wrap>section h5 {
		font-size: 2em;
		margin: 0 auto 2.1em;
		letter-spacing: 0.05em;
		padding: 3.2em 0 0.25em;
	}

	#wrap>section p {
		font-size: 1.6em;
		letter-spacing: 0.05em;
		font-weight: 500;
		line-height: 2.1;
		margin: 0 auto 11.4%;
		width: 88.877%;
	}

	#wrap .img_wrap>div,
	#wrap .img_wrap>div.caption {
		display: block;
	}

	#wrap .img_wrap>div.images {
		display: flex;
	}

	#wrap>section div.caption p {
		display: inline;
		font-size: 0.95em;
		line-height: 2;
		width: auto;
		padding-left: 1em;
	}

	/* きっかけは、素敵なヨガの先生とサロンの心地よさ */
	#wrap .chance .img_wrap {
		margin-bottom: 11.4%;
	}

	#wrap .chance .img_wrap.img_wrap_02 {
		margin-bottom: 0;
	}

	#wrap .chance .img_wrap>div.images {
		gap: 3%;
	}

	#wrap .chance picture:first-of-type,
	#wrap .chance picture:last-of-type,
	#wrap .chance .caption {
		order: initial;
		margin-bottom: 0;
	}

	#wrap .chance .caption>div {
		display: flex;
		justify-content: flex-start;
		gap: 1em;
	}

	/* 「毎日、木が見えて最高なんですよ。毎日感動です」 */
	#wrap .impressed .img_wrap {
		margin-bottom: 5.7%;
	}

	#wrap .impressed .img_wrap.img_wrap_02 {
		margin-bottom: 11.4%;
	}

	#wrap .impressed .img_wrap_04 {
		margin-bottom: 0;
	}

	#wrap .impressed .img_wrap picture,
	#wrap .impressed .img_wrap>div.caption {
		margin-bottom: 0;
	}

	#wrap .impressed .img_wrap>div.caption {
		display: block;
	}

	#wrap .impressed .img_wrap picture.img_01,
	#wrap .impressed .img_wrap picture.img_02,
	#wrap .impressed .img_wrap picture.img_03,
	#wrap .impressed .img_wrap picture.img_04,
	#wrap .impressed .img_wrap>div.caption p.p_01,
	#wrap .impressed .img_wrap>div.caption p.p_02,
	#wrap .impressed .img_wrap>div.caption p.p_03,
	#wrap .impressed .img_wrap>div.caption p.p_04 {
		order: initial;
		margin-bottom: 0;
	}

	#wrap .img_wrap>div.images {
		display: flex;
		gap: 2%;
	}

	#wrap .img_wrap>div.images>div {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	/* 「この木材は、人もつなげてくれるんだなーって思います」 */
	#wrap .connect .img_wrap {
		margin-bottom: 11.4%;
	}

	#wrap .connect .img_wrap picture,
	#wrap .connect .img_wrap>div.caption {
		margin-bottom: 0;
	}

	#wrap .connect .img_wrap>div.caption {
		display: block;
	}

	#wrap .connect picture.img_01,
	#wrap .connect picture.img_02,
	#wrap .connect picture.img_03,
	#wrap .connect picture.img_04,
	#wrap .connect .img_wrap p.p_01,
	#wrap .connect .img_wrap p.p_02,
	#wrap .connect .img_wrap p.p_03,
	#wrap .connect .img_wrap p.p_04 {
		order: initial;
		margin-bottom: 0;
	}

	/* エピローグ */
	#wrap>section.epilogue {
		background-color: #cc83b3;
		box-sizing: border-box;
		font-size: 1.375em;
		line-height: 2.09;
		font-weight: 600;
		width: 100%;
		margin: auto;
		padding: 9% 7.5% 1%;
	}

	#wrap>section.epilogue p {
		color: #fff;
		line-height: 1.95;
		width: 92%;
		margin: 0 auto 7%;
	}

	#wrap>section.epilogue .epilogue_info p {
		font-size: 1em;
	}
	
	#wrap>section.epilogue .epilogue_info span {
		position: relative;
		display: block;
		font-size: 1em;
		letter-spacing: 0.1em;
		text-indent: 1.2em;
	}
	
	#wrap>section.epilogue .epilogue_info span::before {
		position: absolute;
		left: -1.2em;
		content: "●";
	}
	
	#wrap>section.epilogue a {
		word-break: break-all;
		text-decoration: none;
	}
	

	#wrap>section.epilogue a {
		color: #fff;
	}

	#wrap>section.epilogue figure {
		width: 66%;
		margin: 0 auto 2%;
	}

	#wrap>section.epilogue figcaption {
		color: #fff;
		font-size: 0.9333em;
		letter-spacing: 0.05em;
		line-height: 1.8;
		text-indent: 1em;
		width: 66%;
		margin: 0 auto 7.5%;
	}

	#wrap>section.epilogue div.enjoy_more>picture img {
		width: 30%;
		margin: 0 auto 2.4%;
	}

	#wrap>section.epilogue div.enjoy_more a {
		margin: 0 auto 1.4%;
		width: 50%;
	}

	#wrap>section.epilogue div.enjoy_more p.umai {
		color: #fff;
		font-size: 0.8em;
		line-height: 1.583;
		margin: 0 auto 12%;
		width: 70%;
	}

}

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

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

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

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

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

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

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

/*
=====================================

=====================================
*/
@media screen and (min-width: 480px) {}

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

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

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

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

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

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

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

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

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

/*
=====================================

=====================================
*/
@media screen and (min-width: 480px) {}

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

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

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

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

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

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

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

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

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

/*
=====================================

=====================================
*/
@media screen and (min-width: 480px) {}

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

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

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

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

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

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

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

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

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

/*
=====================================

=====================================
*/
@media screen and (min-width: 480px) {}

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

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

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

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

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

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

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

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

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

/*
=====================================

=====================================
*/
@media screen and (min-width: 480px) {}

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

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

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

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

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

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

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

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

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

/*
=====================================

=====================================
*/
@media screen and (min-width: 480px) {}

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

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

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

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

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

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

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

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

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

/*
=====================================

=====================================
*/
@media screen and (min-width: 480px) {}

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

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

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

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

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

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

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

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

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



/*
=====================================
pager
=====================================
*/
.pager ul {
	display: flex;
	justify-content: space-between;
	box-sizing: border-box;
	width: 80%;
	max-width: 950px;
	/* padding: 50px 0px; */
	font-size: 1em;
	margin: auto;
}

.pager ul li {
	width: 49.8%;
}

.pager ul li:last-of-type {
	text-align: right;
}

.pager ul li a {
	color: #fff;
}


.pager ul li a:hover {
	color: #f5e44c;
}