@charset "UTF-8";


/* メインビジュアル *
 * **************************************/

.mainview_area {
	padding: 0;
	position: relative;
	z-index: -1;
}



/* 最初 *
 * **************************************/

.introduction .introduction-text {
	text-align: center;
}
.introduction .introduction-text.ma {
	margin-top: 45px;
	font-size: 1.1em;
}

.introduction .introduction-character-flex {
	display: flex;
	gap: 5em;
	margin: 42px 0;
}
.introduction .introduction-characters {
	display: none;
}


@media screen and (max-width: 1194px) {
	.introduction .introduction-character-flex {
		gap: 2em;
	}
}
@media screen and (max-width: 768px) {
	.introduction .introduction-character-flex {
		gap: 0;
	}
}
@media screen and (max-width: 559px) {
	.introduction .introduction-character-flex {
		display: none;
	}
	.introduction .introduction-characters {
		display: block;
		margin: 30px 0;
	}
}



/* 理想の人生・重要性 *
 * **************************************/

.message {
	padding-top: 0;
	position: relative;
}
.message:before {
	content: '';
    position: absolute;
	bottom: 0;
	left: 0;
	background: url(../images/front-page/2.0/messageBg.webp) no-repeat;
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
	width: 100%;
	height: 100%;
	z-index: -1;
}
.message svg.message-svg-top {
	-webkit-filter: drop-shadow(0 -5px 3px rgba(102, 102, 102, 0.15));
    filter: drop-shadow(0 -5px 3px rgba(102, 102, 102, 0.15));
}
.message svg.message-svg-botom {
	-webkit-filter: drop-shadow(0 5px 3px rgba(102, 102, 102, 0.15));
    filter: drop-shadow(0 5px 3px rgba(102, 102, 102, 0.15));
}
.message .message-outline {

}
.message .message-title {
	text-align: center;
	margin-bottom: 60px;
}
.message .message-text {
	max-width: 720px;
	width: 60%;
	margin: 0 auto;
	padding: 60px;
	text-align: center;
	background: #FFFFFF;
	box-shadow: 0 0 14px rgba(102, 102, 102, 0.2);
	border-radius: 12px;
	position: relative;
	z-index: -1;
}
.message .message-text:not(:first-child) {
	margin-top: 60px;
}
.message .message-text.top:before {
	content: '';
    position: absolute;
	bottom: 0;
	left: 0;
	background: url(../images/front-page/2.0/message-textBg-top.webp) no-repeat;
    background-size: cover;
    background-position: bottom center;
	width: 100%;
	height: 100%;
    z-index: -1;
}
.message .message-text.middle:before {
	content: '';
    position: absolute;
	bottom: 0;
	left: 0;
	background: url(../images/front-page/2.0/message-textBg-middle.webp) no-repeat;
    background-size: cover;
    background-position: bottom center;
	width: 100%;
	height: 100%;
    z-index: -1;
}
.message .message-text > div p {
	font-size: 1.1em;
	margin-bottom: 1.6em;
}

@media screen and (max-width: 1194px) {
	.message .message-text {
		max-width: 720px;
		width: 80%;
	}
}
@media screen and (max-width: 768px) {
	.message .message-text {
		width: 100%;
		padding: 45px;
	}
}
@media screen and (max-width: 559px) {
	.message:before {
		content: none;
	}
	.message .message-text {
		padding: 60px 30px;
		box-shadow: none;
		width: calc(100% + 90px);
		margin-left: -45px;
	}
	.message .message-text:not(:first-child) {
		margin-top: 30px;
	}
	.message .message-text.top:before {
		background: url(../images/front-page/2.0/message-textBg-top_sp.webp) no-repeat;
		background-size: cover;
		background-position: bottom center;
	}
	.message .message-text.middle:before {
		background: url(../images/front-page/2.0/message-textBg-middle_sp.webp) no-repeat;
		background-size: cover;
		background-position: bottom center;
	}
	.message .message-title {
		margin-bottom: 30px;
		font-size: 2.8rem;
	}
}
@media screen and (max-width: 430px) {
	.message .message-text {
		padding: 60px 30px;
		box-shadow: none;
		width: calc(100% + 60px);
		margin-left: -30px;
	}
	.message .message-title {
		font-size: 2.6rem;
	}
	
}



/* メインビジュアル *
 * **************************************/

.greeting {
	padding: 0;
}
.greeting svg.greeting-svg-top {
	-webkit-filter: drop-shadow(0 -5px 3px rgba(102, 102, 102, 0.15));
    filter: drop-shadow(0 -5px 3px rgba(102, 102, 102, 0.15));
}
.greeting svg.greeting-svg-bottom {
	-webkit-filter: drop-shadow(0 5px 3px rgba(102, 102, 102, 0.15));
    filter: drop-shadow(0 5px 3px rgba(102, 102, 102, 0.15));
}
.greeting .greeting-outline {
	padding-bottom: 180px;
	position: relative;
}
.greeting .greeting-outline img.love {
	position: absolute;
    right: 0;
    bottom: 2vw;
    width: 620px;
}
.greeting .greeting-text {
	text-align: center;
	margin-bottom: 60px;
	padding-top: 60px;
	font-family: ryo-display-plusn, serif;
    font-size: 1.8rem;
	position: relative;
}
.greeting .greeting-text:before {
	content: "";
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    background: url(../images/common/wing.webp) no-repeat;
    background-size: 100%;
    width: 58px;
    height: 28px;
}

@media screen and (max-width: 768px) {
	.greeting .greeting-outline {
		padding-bottom: 20vw;
	}
	.greeting .greeting-outline img.love {
		width: 480px;
		bottom: 6vw;
	}
}
@media screen and (max-width: 559px) {
	.greeting .greeting-outline {
		padding-bottom: 20vw;
	}
	.greeting .greeting-outline img.love {
		width: 55vw;
	}
	.greeting .greeting-text {
		font-size: 1.6rem;
		margin-bottom: 30px;
	}
}


/* 公式 LINE *
 * **************************************/

.line img.lineOfficial {
	display: block;
	width: 580px;
    margin: 0 auto;
}
.line .line-text {
	text-align: center;
	margin-top: 60px;
}
.line .line-add {
	margin-top: 18px;
}
.line .line-add ul.line-add-btn {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 45px;
}
.line .line-add ul.line-add-btn li {
	
}
.line .line-add img.lineQR {
	
}

@media screen and (max-width: 559px) {
	.line .line-add ul.line-add-btn {
		flex-direction: column;
	}
	.line .line-add ul.line-add-btn li.line-add-btn-code {
		display: none;
	}
}
@media screen and (max-width: 430px) {
	
	.line img.lineOfficial {
		width: 320px;
	}
	.line .line-text {
		margin-top: 30px;
	}
	
	.line .line_flex .line_flex___code img.lineOfficial {
		width: 200px;
	}
	.line .line_flex .line_flex___text div {
		font-size: 1.5rem;
	}
	.line .line_flex .line_flex___text div span {
		font-size: 1.6rem;
	}
}
@media screen and (max-width: 320px) {
}





/* メルマガ *
 * **************************************/

#newsletter {
	padding-top: 0;
	position: relative;
}
#newsletter .newsletter-outline {
	width: calc(100% - 120px);
	margin: 0 auto;
	padding: 60px 0;
	background: url(../images/parts/newsletter2.0/bg.webp) no-repeat;
	background-size: cover;
	background-position: top center;
	border-radius: 12px;
}
#newsletter .newsletter-outline img.infinity {
	position: absolute;
        right: 8vw;
    bottom: 5vw;
}
#newsletter .newsletter-text {
	text-align: left;
	color: #FFF;
	display: flex;
	align-items: center;
	position: relative;
	width: 980px;
	margin: 0 auto;
}
#newsletter .newsletter-text img.newsletterMark {
	margin-right: 45px;
}
#newsletter .newsletter-text .newsletter-text___main {
	width: 80%;
	max-width: 820px;
}

#newsletter .newsletter-form {
	margin-top: 30px;
}
#newsletter .form {
	padding: 0;
	background: none;
}
#newsletter .form .form-field-flex {
	display: flex;
    align-items: flex-start;
    justify-content: center;
	    gap: 30px;
}
#newsletter .form .form-field-flex .form-field-flex___name {
	width: 50%;
}
#newsletter .form .form-field-flex .form-field-flex___mail {
	width: 50%;
}
#newsletter .form .form-field label {
    text-align: right;
	display: flex;
    align-items: center;
	margin-bottom: 6px;
	color: #FFF;
}
#newsletter .form .form-field label span.inputname {
	display: inline-block;
	font-family: ryo-display-plusn, serif;
}
#newsletter .form .form-field label span.require {
	display: inline-block;
	font-size: .9rem;
	font-family: ryo-gothic-plusn, sans-serif;
	margin-left: 12px;
}
#newsletter .form .form-field-flex .form-field-flex___mail .mailNG {
	color: red;
    font-size: 1.2rem;
    margin-top: 9px;
}
#newsletter .form-button {
	margin-top: 18px;
}
#newsletter .form-button .form-consentto {
	text-align: center;
	color: #FFF;
}
#newsletter .form-button .form-consentto a {
	display: inline-block;
	color: #FFF;
	border-bottom: 1px solid #FFF;
}
#newsletter .form-button .form-submit {
	text-align: center;
	margin-top: 18px;
}


/* ボタン */
#newsletter .formBtnUniverse {
	width: 192px !important;
	height: 62px !important;
	margin: 0 auto !important;
	padding: 0 !important;
	border: none !important;
	color: #FFF !important;
	background: url('../images/common/formBtnUniverse.webp') no-repeat !important;
	background-size: contain !important;
	filter: grayscale(100%); /* グレー */
	font-family: 'kaisei-tokumin', sans-serif;
	font-size: 2.6rem;
	transition: filter 0.3s ease;
}
#newsletter .formBtnUniverse:hover {
	filter: grayscale(0%); /* カラー表示 */
}


@media screen and (max-width: 1194px) {
	#newsletter .newsletter-text {
		width: 100%;
	}
}
@media screen and (max-width: 960px) {
	#newsletter {
        background: url(../images/parts/newsletter2.0/bg_tb.webp) no-repeat;
        background-size: contain;
        background-position: top center;
        padding-top: 120px;
        position: relative;
    }
	#newsletter:after {
		content: "";
		position: absolute;
		bottom: 0;
		background: #093a69;
		width: 100%;
		height: 60%;
		z-index: -1;
	}
	#newsletter .newsletter-outline {
		width: 100%;
		background: none;
		padding: 0;
	}
	#newsletter .newsletter-outline img.infinity {
		position: absolute;
		right: 4vw;
		bottom: -10vw;
	}
	#newsletter .newsletter-text {
		flex-direction: column;
	}
	#newsletter .newsletter-text img.newsletterMark {
		width: 120px;
		margin: 0 0 18px 0;
	}
	#newsletter .newsletter-text .newsletter-text___main {
		width: 100%;
	}
}
@media screen and (max-width: 834px) {
	/* ボタン */
	#newsletter .formBtnUniverse {
		width: 260px !important;
		height: 74px !important;
		font-size: 2.6rem !important;
		background: url('../images/common/formBtnUniverse_tb.webp') no-repeat !important;
		background-size: contain !important;
	}
}
@media screen and (max-width: 768px) {
	#newsletter .newsletter-outline img.infinity {
		width: 220px;
        bottom: -8vw;
	}
	
	#newsletter .form .form-field-flex {
		flex-direction: column;
	}
	#newsletter .form .form-field-flex .form-field-flex___name {
		width: 100%;
	}
	#newsletter .form .form-field-flex .form-field-flex___mail {
		width: 100%;
	}
}
@media screen and (max-width: 559px) {
	#newsletter {
		background: url(../images/parts/newsletter2.0/bg_sp.webp) no-repeat;
		background-size: contain;
		background-position: top center;
		padding-top: 90px;
		margin-bottom: 18vw;
		position: relative;
	}
	#newsletter:after {
		content: "";
		position: absolute;
		left: 0;
		bottom: 0;
		background: #093A69;
		width: 100%;
		height: 95%;
		z-index: -1;
	}
	#newsletter .newsletter-outline img.infinity {
		width: 220px;
		right: auto;
		left: 50%;
        bottom: -18vw;
		transform: translateX(-50%);
	}

	/* ボタン */
	#newsletter .formBtnUniverse {
		width: 260px !important;
		height: 74px !important;
		font-size: 2.2rem !important;
		background: url('../images/common/formBtnUniverse_tb.webp') no-repeat !important;
		background-size: contain !important;
	}
	
}
@media screen and (max-width: 430px) {
	#newsletter .newsletter-outline img.infinity {
		width: 180px;
		right: auto;
		left: 50%;
        bottom: -18vw;
		transform: translateX(-50%);
	}
	
	/* ボタン */
	#newsletter .formBtnUniverse {
		width: 260px !important;
		height: 62px !important;
		font-size: 2rem !important;
		background: url('../images/common/formBtnUniverse_sp.webp') no-repeat !important;
		background-size: contain !important;
		filter: grayscale(0);
	}
}
@media screen and (max-width: 380px) {
	#newsletter {
		padding-bottom: 30px;
	}
	#newsletter img.title_newsletter {
		width: 220px;
	}
	#newsletter .newsletter_flex .newsletter_flex___form img.infinity {
		display: none;
	}
	.newsletterForm {
		background: none;
		box-shadow: none;
		margin: 30px auto 0;
	}
	.newsletterForm:before,
	.newsletterForm:after {
		content: none;
	}
	.newsletterForm .newsletterForm_form {
		margin-top: 12px;
	}
	.newsletterForm .newsletterForm_titlebox {
		margin-top: 30px;
	}
	.newsletterForm .newsletterForm_titlebox .newsletterForm_title span {
		color: #FFF;
	}
	.form {
		padding: 0;
		background: none;
	}
	.form .form_field label {
		color: #FFF;
	}
	.form .form_field input:focus {
		background: #FFF;
		color: #093A69;
	}
	
	.form .form_consentto,
	.form .form_consentto a {
		color: #FFF;
	}
	
	/* 不可ドメイン */
	.form .form_field .mailNG {
		color: yellow;
	}
}
@media screen and (max-width: 320px) {
	#newsletter img.title_newsletter {
		width: 180px;
	}
}