@charset "UTF-8";

.fadein {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity .8s ease, transform .8s ease;
}
.fadein.active {
	opacity: 1;
	transform: translateY(0);
}

body:before {
	content: none;
}

#journey p {
	margin: 0 0 3rem 0;
	line-height: 2;
}
#journey p:last-child {
	margin-bottom: 0;
}

.block {
	padding: 120px 0;
}
.block-flex {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
}
.block-flex .block-flex___title {
	order: 1;
	width: 27%;
    max-width: 310px;
	display: flex;
	justify-content: center;
	
	position: sticky;
    top: 10rem;
}
.block-flex .block-flex___title:before {
	content: "";
	display: inline-block;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
    top: -150px;
    background: url(../images/journey/2.0/tree1.webp) no-repeat;
    background-size: 100%;
    width: 250px;
    height: 250px;
}
.live-happily .block-flex .block-flex___title:before {
	background: url(../images/journey/2.0/tree2.webp) no-repeat;
    background-size: 100%;
}
.block-flex .block-flex___contents {
	order: 2;
	width: 70%;
	max-width: 810px;
	padding-left: 90px;
}

@media screen and (max-width: 1194px) {
	.block-flex .block-flex___contents {
		width: 65%;
		padding-left: 42px;
	}
}
@media screen and (max-width: 768px) {
	.block {
		padding: 90px 0;
	}
	.block-flex .block-flex___contents {
		padding-left: 30px;
	}
}
@media screen and (max-width: 559px) {
	.block {
		padding: 75px 0;
	}
	.block-flex {
		flex-direction: column;
	}
	.block-flex .block-flex___title {
		width: 100%;
		max-width: 100%;
		position: static;
		top: auto;
		justify-content: center;
	}
	.block-flex .block-flex___title:before {
		top: -74px;
		width: 90px;
		height: 90px;
	}
	.block-flex .block-flex___contents {
		width: 100%;
		max-width: 100%;
		padding: 0;
	}
}
@media screen and (max-width: 430px) {
	.block-flex .block-flex___title:before {
		top: -90px;
		width: 90px;
		height: 90px;
	}
}
@media screen and (max-width: 320px) {
	.block {
		padding: 45px 0;
	}
}


#journey {
	position: relative;
}
#journey .outline {
	margin-top: 120px;
}
#journey .text {
	font-size: 1.3em;
}
#journey .text:not(:first-child) {
	margin-top: 42px;
}
#journey .text.dark {
	color: #666;
	text-shadow: 1px 1px 2px #ccc;
}
#journey .text.clear {
	color: #000;
	text-shadow: 1px 1px 2px #ccc;
}


#journey .sec_title {
	padding-top: 0;
    color: #006003;
	font-size: 4.6rem;
	font-family: 'kaisei-tokumin', sans-serif;
}
#journey .sec_title.vr {
	text-align: left;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	font-size: 7rem;
	color: #E4007F;
}
#journey .sec_title span {
	font-size: 100%;
}
#journey .sec_title:before {
	content: none;
}
#journey img.circle {
	display: block;
    width: 45px;
    margin: 0 auto 18px;
}

@media screen and (max-width: 768px) {
	#journey .outline {
		margin-top: 90px;
	}
	#journey .sec_title.vr {
		font-size: 5.2rem;
		line-height: 1.2;
	}
}
@media screen and (max-width: 559px) {
	#journey .outline {
		margin-top: 75px;
	}
	#journey .sec_title {
		font-size: 4.2rem;
	}
	#journey .sec_title.vr {
		font-size: 7.2vw;
	}
	#journey .sec_title ruby rt {
		margin-left: 0;
	}
	#journey .sec_title.vr {
		-ms-writing-mode: lr-tb;
		writing-mode: horizontal-tb;
		text-align: center;
	}
	#journey .text {
		font-size: 1.1em;
	}
}
@media screen and (max-width: 430px) {
	#journey .sec_title {
		font-size: 7.8vw;
	}
	#journey .sec_title.vr {
		font-size: 7.2vw;
	}
}



/* 一日の終わりに、心を癒す7分間
 * ********************************************* */

.seven-minutes {
	background: url(../images/journey/2.0/seven-minutes-bg.webp) repeat;
    background-size: contain;
    background-attachment: fixed;
}
.seven-minutes .seven-minutes-title span {
	position: relative;
    -webkit-box-reflect: below -10px -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, .2));
}
.seven-minutes .youtube {
	margin: 30px auto 0;
    max-width: 780px;
    width: 100%;
	position: relative;
    z-index: 3;
}

@media screen and (max-width: 768px) {
	.seven-minutes {
		clip-path: inset(0);
		background: none;
	}
	.seven-minutes:before {
		content: "";
		z-index: -1;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		background: url(../images/journey/2.0/seven-minutes-bg_sp.webp) repeat;
		background-size: contain;
	}
}
@media screen and (max-width: 559px) {
	.seven-minutes .youtube {
		width: calc(100% + 90px);
		margin-left: -45px;
	}
	.seven-minutes .youtube iframe {
		border: none;
		border-radius: 0;
		box-shadow: none;
	}
}
@media screen and (max-width: 430px) {
	.seven-minutes .youtube {
		width: calc(100% + 60px);
		margin-left: -30px;
		aspect-ratio: 16 / 11;
	}
}


/* 癒しは、自分を大切にすることから
 * ********************************************* */

.big-bg {
	padding-bottom: 0;
	background: linear-gradient(180deg, #FFF 0%, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0) 70%, #FFF 100%), url(../images/journey/2.0/bg.webp);
	background-position: center;
	background-attachment: fixed;
	position: relative;
}

.self-care img.tree {
	display: block;
	max-width: 220px;
    width: 50%;
    margin: 0 auto 90px;
}

@media screen and (max-width: 768px) {
	.big-bg {
		clip-path: inset(0);
		background: none;
	}
	.big-bg:before {
		content: "";
		z-index: -1;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		background: linear-gradient(180deg, #FFF 0%, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0) 70%, #FFF 100%), url(../images/journey/2.0/bg_sp.webp);
		background-position: center;
		background-size: cover;
	}
}
@media screen and (max-width: 559px) {
}
@media screen and (max-width: 430px) {
}



/* そして、人を大切にする
 * ********************************************* */

.care-for-others {
	
}


@media screen and (max-width: 559px) {
}



/* 誰かを責めることからも、自分を自由にしていく
 * ********************************************* */

.free-yourself {
	
}

@media screen and (max-width: 559px) {
}



/* 幸せに生きるために
 * ********************************************* */

.live-happily {
	
}
.live-happily {
	background: url(../images/journey/2.0/seven-minutes-bg.webp) repeat;
    background-size: contain;
    background-attachment: fixed;
}
.live-happily .text {
	text-shadow: 1px 1px 2px #ccc;
}
.live-happily img.tree {
	display: block;
	max-width: 220px;
    width: 50%;
    margin: 120px auto 0;
	animation: floating-y 1.2s ease-in-out infinite alternate-reverse;
}
@keyframes floating-y {
	0% { transform: translateY(-6px); }
	100% { transform: translateY(6px); }
}

@media screen and (max-width: 768px) {
	.live-happily {
		clip-path: inset(0);
		background: none;
	}
	.live-happily:before {
		content: "";
		z-index: -1;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		background: url(../images/journey/2.0/seven-minutes-bg_sp.webp) repeat;
		background-size: contain;
	}
}
@media screen and (max-width: 559px) {
	.live-happily .text p:first-letter {
		color: #006003;
		font-size: 1.3em;
	}
	.live-happily img.tree {
		margin: 90px auto 0;
	}
}
@media screen and (max-width: 430px) {
	.live-happily {
		padding-top: 90px;
	}
	.live-happily img.tree {
		margin: 60px auto 0;
	}
}