@charset "UTF-8";
/* CSS Document */

/* --------------------
base
--------------------- */
html {
	width: 100%;
	height: 100%;
	font-size: 10px;
	overscroll-behavior-y: none;
}
body {
	position: relative;
	overflow-x: hidden;
	height: 100%;
	text-align: center;
	line-height: 1.7;
	font-family: "こぶりなゴシック W3 JIS2004","Koburina Gothic W3 JIS2004","中ゴシックBBB","Gothic Medium BBB", "メイリオ", Meiryo, "ヒラギノ丸ゴ Pro", "Hiragino Maru Gothic Pro", "ＭＳ Ｐゴシック", "Lucida Grande", "Lucida Sans Unicode", Arial, Verdana, sans-serif;
	font-size: 1.4rem;
	font-style: normal;
	font-weight: normal;
	color: #2b2b2b;
	background: #fff;
}
body * {
	outline: none;
}
img {
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
}

/*  */
.u-mb_xs {
	margin-bottom: 10px!important;
}
.u-mb_s {
	margin-bottom: 20px!important;
}
.u-mb_m {
	margin-bottom: 40px!important;
}
.u-mb_l {
	margin-bottom: 60px!important;
}
.u-mt_xs {
	margin-top: 10px!important;
}
.u-mt_s {
	margin-top: 20px!important;
}
.u-ps_s {
	font-size: 0.875em;
}
.u-line_h_l {
	line-height: 2.2;
}
.u-text_align_l {
	text-align: left!important;
}
.u-text_align_c {
	text-align: center!important;
}
.u-text_bold {
	font-family: "こぶりなゴシック W6 JIS2004", "Koburina Gothic W6 JIS2004", "中ゴシックBBB", "Gothic Medium BBB";
	font-weight: bold;
}
.u-text_bold_blue {
	font-family: "こぶりなゴシック W6 JIS2004", "Koburina Gothic W6 JIS2004", "中ゴシックBBB", "Gothic Medium BBB";
	font-weight: bold;
	color: #5d7f69;
}
.u-attention {
	margin-top: 30px;
	padding-left: 1em;
	text-align: left;
	text-indent: -1em;
	font-size: 0.85em;
	color: #6a6a6a;
}
.u-attention.-mt10 {
	margin-top: 10px;
}
.u-attention.no_indent {
	padding-left: 0;
	text-indent: 0;
}
.u-inline__link {
	text-decoration: underline;
	font-family: "こぶりなゴシック W6 JIS2004", "Koburina Gothic W6 JIS2004", "中ゴシックBBB", "Gothic Medium BBB";
	font-weight: bold;
	color: #30869f;
}

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

	.u-sp {
		display: none;
	}

}

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

	.u-pc {
		display: none;
	}
	
}

/* --------------------
style
--------------------- */
.wrapper {
	overflow: hidden;
	position: relative;
	display: flex;
	min-height: 100%;
}
.wrapper_inner_l,
.wrapper_inner_r {
	flex:1;
}
.wrapper_inner_l {
	position: relative;
}
.wrapper_inner_r {
	max-width: 495px;
	background: #fff url("../img/bg_mv.jpg") no-repeat 0 0;
	background-size: 100% auto;
	opacity: 1;
}
.wrapper_inner_r.on {
	opacity: 0;
	transition: opacity 0.5s;
}

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

	.wrapper_inner_l {
		background: url("../img/bg.jpg") no-repeat;
		background-size: 100% auto;
		background-attachment: fixed;
		background-position: 0 0;
	}

}

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

	.wrapper {
		display: block;
	}
	.wrapper_inner_l {
		z-index: 999;
		position: fixed;
		display: none;
		width: 100vw;
		height: 100vh;
		top: 0;
		left: 0;
	}
	.wrapper_inner_l.on {
		display: block;
	}
	.wrapper_inner_r {
		max-width: none;
	}

}

/* menu */
.menu {
	position: fixed;
	display: inline-block;
	top: 50%;
	right: 515px;
	margin-left: 20px;
	padding: 15px 10px;
	background: rgba(255,255,255,0.7);
	transform: translateY(-50%);
}
.menu::before,
.menu::after {
	content: '';
	position: absolute;
	display: block;
	left: 0;
	width: 100%;
	height: 3px;
	background: rgba(255,255,255,0.7);
}
.menu::before {
	top: -5px;
}
.menu::after {
	bottom: -5px;
}
.menu > ul li + li {
	margin-top: 20px;
}
.menu > ul a {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 52px;
	padding-right: 1.5em;
	line-height: 1.25;
	font-size: 1.15em;
	background: #fff url("../img/bg_arrow_d.png") no-repeat 93% 50%;
	background-size: 14px;
}
.menu > ul a::after {
	content: '';
	position: absolute;
	display: block;
	left: 2px;
	top: 2px;
	width: calc(100% - 4px);
	height:  calc(100% - 4px);
	border: solid 1px #aabcb0;
}
.menu > ul a span._small {
	font-size: 0.875em;
}
.menu__banner {
	padding-top: 50px;
}
.menu .header__sns {
	display: none;
}
.menu__banner a {
	display: block;
}
.menu__banner a + a {
	margin-top: 1em;
}

@media screen and (min-width: 768px) and (max-height: 686px) {

	.menu > ul li + li {
		margin-top: 2%;
	}
	.menu__banner {
		padding-top: 10%;
	}
	
}

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

	.menu {
		right: calc(50% + 20px);
	}

}

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

	.menu {
		overflow: auto;
		position: relative;
		display: block;
		height: 100%;
		top: auto;
		right: auto;
		margin-left: 0;
		padding: 50px 20px 20px;
		background: rgba(255,255,255,1);
		transform: translateY(0);
	}
	.wrapper_inner_l.on .menu {
		animation: menu_fadeIn 0.5s;
	}
	@keyframes menu_fadeIn {
		from {
			opacity: 0;
			top: 10px;
		}
		to {
			opacity: 1;
			top: 0;
		}
	}
	.menu::before,
	.menu::after {
		content: none;
	}
	.menu > ul li + li {
		margin-top: 5px;
	}
	.menu .header__sns {
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		margin-top: 10px;
	}
	.menu .header__sns p {
		/*display: none;
		width: 100%;*/
	}
	.menu__banner {
		padding-top: 0;
	}

}

/*.header */
header {
	padding: 0 0.5em 0 1.5em;
	background: rgba(255,255,255,0.5);
}
.header__inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 80px;
}
.header__logo {
	padding-right: 16px;
}
.header__sns {
	display: flex;
	justify-content: flex-end;
	align-items: center;
}
.header__sp-menu {
	display: none;
}
.header__sp-menu-close {
	display: none;
}

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

	header {
		z-index: 100;
		position: fixed;
		width: 100%;
		top: 0;
		left: 0;
	}
	.header__inner {
		height: 50px;
	}
	.header__logo img {
		width: 100px;
	}
	.header__sns {
		display: none;
	}
	.header__sp-menu, 
	.header__sp-menu-close {
		position: relative;
		display: block;
		overflow: hidden;
		text-indent: -999px;
		width: 50px;
		height: 50px;
	}
	.header__sp-menu-close {
		position: absolute;
		top: 0;
		right: 0.5em;
	}
	.header__sp-menu::before,
	.header__sp-menu::after, 
	.header__sp-menu-close::after {
		content: '';
		position: absolute;
		display: block;
		top: 0;
		left: 0;
		width: 24px;
	}
	.header__sp-menu::before,
	.header__sp-menu-close::after {
		height: 25px;
		top: 13px;
		left: 13px;
		border-top: solid 1px #999;
		border-bottom: solid 1px #999;
		transition: 0.5s;
	}
	.header__sp-menu.on::before,
	.header__sp-menu-close::after {
		height: 1px;
		top: 25px;
	}
	.header__sp-menu::after {
		height: 1px;
		top: 25px;
		left: 13px;
		background: #999;
	}

}

/* main */
main {
	
}

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

	main {
		padding-top: 50px;
	}

}

/* button */
.btn {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 52px;
	max-width: 370px;
	margin-left: auto;
	margin-right: auto;
	padding-right: 0.75em;
	line-height: 1.3;
	font-size: 1.15em;
	/*font-weight: 500;*/
	background: #aabcb0 url("../img/bg_arrow_fwd.png") no-repeat 95% 50%;
	background-size: 26px 10px;
}
.btn::after {
	content: '';
	position: absolute;
	display: block;
	top: 2px;
	left: 2px;
	width: calc(100% - 4px);
	height: calc(100% - 4px);
	border: solid 1px #fff;
}
.btn_l {
	height: 62px;
	font-size: 1.2em;
	background-image: url("../img/bg_arrow_fwd_xl.png");
	background-size: 36px 12px;
}
.btn_back,
.btn_fwd {
	display: inline-block;
	line-height: 1.15;
	font-size: 1.15em;
}
.btn_back {
	padding-left: 40px;
	background: url("../img/bg_arrow_back.png") no-repeat 0% 100%;
	background-size: 26px 10px;
}
.btn_fwd {
	padding-right: 40px;
	background: url("../img/bg_arrow_fwd.png") no-repeat 100% 100%;
	background-size: 26px 10px;
}

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

	.btn_sp_s {
		font-size: min(16px, 3.5vw);
	}

}

/* img */
.img__frame {
	position: relative;
}
.img__frame::after {
	content: '';
	position: absolute;
	display: block;
	top: 2px;
	left: 2px;
	width: calc(100% - 4px);
	height: calc(100% - 4px);
	border: solid 2px #fff;
}

/* section */
.has_space {
	padding: 0 30px;
}

/* heading */
h2 {
	margin-bottom: 40px;
	font-size: 1.5em;
}
h2 span {
	display: block;
	margin-bottom: 5px;
	font-size: 0.7em;
}
.h2_img {
	padding-top: 110px;
	background-repeat: no-repeat;
	background-position: 50% 0;
	background-size: 150px 100px;
}
.h2_line {
	position: relative;
	padding-top: 60px;
	z-index: 1;
}
/*.h2_line::before,*/ 
.h2_line::after {
	content: '';
	position: absolute;
	display: block;
}
.h2_line::before {
	top: 0;
	left: 50%;
	width: 100%;
	height: 6px;
	max-width: 370px;
	border-top: double 6px #abced8;
	transform: translateX(-50%);
}
.h2_line::after {
	z-index: -1;
	width: 100%;
	top: 12px;
	text-align: center;
	font-family: "shelby", sans-serif;
	font-size: 2.2em;
	font-weight: normal;
	color: #ebeef2;
	transform: rotate(-5deg);
}
h3,
h4 {
	margin-bottom: 30px;
	font-family: "こぶりなゴシック W6 JIS2004", "Koburina Gothic W6 JIS2004", "中ゴシックBBB", "Gothic Medium BBB";
	font-weight: bold;
}
.h3_ex_instagram {
	padding-top: 50px;
	font-family: 'NOW-MM', serif;
	font-size: 1.4em;
	background: url("../img/logo_instagram_s_black.png") no-repeat 50% 0;
	background-size: 60px;
}

@media screen and (max-width: 768px) { /* タブレットから */

	h2 {
		margin-bottom: 25px;
		font-size: min(20px, 5vw);
	}
	.h3_ex_instagram {
		margin-bottom: 25px;
		font-size: min(18px, 4.5vw);
	}

}

/* mv */
.mv {
	padding: 10px 20px;
}
.mv__lead {
	margin-bottom: 25px;
	font-size: 1.2em;
}
.mv__leadinn {
	margin-top: 20px;
}
.mv__title {

}
.mv__title_s {
	margin-bottom: 1.5em;
}

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

	.mv__mark {
		width: 25%;
		margin: 0 auto;
	}
	.mv__lead {
		margin-bottom: 15px;
	}
	.mv__title {
		width: 80%;
		margin: 0 auto 20px;
	}
	.mv .btn {
		margin-bottom: 15px;
	}
	
}

/* campaign__sns */
.campaign__sns {
	margin: 2em 0;
	text-align: left;
	font-family: "こぶりなゴシック W6 JIS2004", "Koburina Gothic W6 JIS2004", "中ゴシックBBB", "Gothic Medium BBB";
	font-size: 0.9em;
	font-weight: bold;
	word-wrap: break-word;
	overflow-wrap: break-word;
}
.campaign__sns li {
	display: flex;
	align-items: center;
	min-height: 60px;
	padding-left: 80px;
}
.campaign__sns li:first-of-type {
	background: url("../img/logo_x_s_black.png") no-repeat 0 50%;
	background-size: 60px;
}
.campaign__sns li:last-of-type {
	background: url("../img/logo_instagram_s_black.png") no-repeat 0 calc(50% + 0.5em);
	background-size: 60px;
}
.campaign__sns li + li {
	margin-top: 1em;
	padding-top: 1em;
	border-top: solid 1px #e7e7e7;
}
.campaign__sns a {
	text-decoration: none;
}

/*.site_end */
.site_end {
	padding: 2.5em 0;
	background: #fdfdfc;
}
.site_end__banner a {
	display: block;
}
.site_end__banner a + a {
	margin-top: 1em;
}
.site_end__totoppage,
.site_end__inquiry {
	padding: 2em 1em;
}

/* footer */
.siteFooter {
	/*padding: 15px 0 80px 0;*/
	padding: 15px 0 20px 0;
	color: #ffffff;
	font-family: "ヒラギノ角ゴ W3 JIS2004", "Hiragino Kaku Gothic W3 JIS2004", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ヒラギノ丸ゴ Pro", "Hiragino Maru Gothic Pro", "ＭＳ Ｐゴシック", "Lucida Grande", "Lucida Sans Unicode", Arial, sans-serif;
	background: #8e918f none;
}
.copyright {
	text-align: center;
	font-size: 10px;
	font-family: Arial, sans-serif;
}
.footerMenu01 {
	text-align: center;
	line-height: 1;
}
.footerMenu01 li {
	display: inline-block;
	padding: 0 5px 0 5px;
	font-size: 10px;
}
.footerMenu01 li + li {
	border-left: 1px solid #ffffff;
}
.footerMenu01 a {
	color: inherit;
}
.pageTop a {
	overflow: hidden;
	position: fixed;
	display: none;
	right: 0;
	bottom: 80px;
	width: 50px;
	height: 50px;
	background: #ccd7d0 url("../img/bg_arrow_u.png") no-repeat 50% 50%;
	background-size: 14px;
	text-indent: -999px;
}
.siteFooter.on {
	position: relative;
}
.siteFooter.on .pageTop a {
	position: absolute;
	bottom: 100%;
}

/*.floating_button */
.floating_button {
	z-index: 100;
	position: fixed;
	right: 0;
	bottom: -62px;
	width: 100%;
	max-width: 495px;
	transition: bottom 0.5s 1s;
}
.floating_button a {
	display: block;
	line-height: 62px;
	font-size: 1.2em;
	background: #abced8 url("../img/bg_arrow_r.png") no-repeat 96% 50%;
	background-size: 14px;
}
.floating_button.on {
	bottom: 0;
}

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

	.floating_button {
		max-width: none;
		width: 50%;
		font-size: 1.5vw;
	}

}

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

	.floating_button {
		width: 100%;
	}
	.floating_button a {
		font-size: min(4.3vw, 18px);
	}

}

/*.クローズド */
.closed {
	position: relative;
	display: inline-block;
	top: -2em;
	margin: 0 0 1em;
	padding: 0.35em 5em;
	border: solid 2px #c00;
	color: #c00;
	transform: rotate(-2.5deg);
}


/*.color */
.INTJ {color: #6d5a8d;}
.INTP {color: #5a7d9a;}
.ENTJ {color: #8c1e3f;}
.ENTP {color: #8ac926;}
.INFJ {color: #a6a1d6;}
.INFP {color: #d9a5b3;}
.ENFJ {color: #a64253;}
.ENFP {color: #f4c542;}
.ISTJ {color: #6b7280;}
.ISFJ {color: #bfa58a;}
.ESTJ {color: #b5472a;}
.ESFJ {color: #e6728e;}
.ISTP {color: #568ea6;}
.ISFP {color: #88a67d;}
.ESTP {color: #00b2a9;}
.ESFP {color: #ff6b4a;}