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

/* --------------------
color
--------------------- */
:root {
	--brown: #9b8564;
	--dk_brown: #7f6238;
}

/* --------------------
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: 2;
	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.6rem;
	font-style: normal;
	font-weight: normal;
	letter-spacing: 0.075em;
	color: #000;
	background: #fff;
}
body * {
	outline: none;
}
img {
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
}

/*  */
.u-mb_xs {
	margin-bottom: 0.5em!important;
}
.u-mb_s {
	margin-bottom: 1em!important;
}
.u-mb_m {
	margin-bottom: 2em!important;
}
.u-mb_l {
	margin-bottom: 3em!important;
}
.u-mb_xl {
	margin-bottom: 5em!important;
}
.u-mt_xs {
	margin-top: 0.5em!important;
}
.u-mt_s {
	margin-top: 1em!important;
}
.u-ps_s {
	font-size: 0.875em;
}
.u-text_align_l {
	text-align: left!important;
}
.u-text_align_c {
	text-align: center!important;
}
.u-height_l {
	line-height: 2.5;
}
.u-text_bold {
	font-family: "こぶりなゴシック W6 JIS2004", "Koburina Gothic W6 JIS2004", "中ゴシックBBB", "Gothic Medium BBB";
	font-weight: bold;
}
.u-text_bold_brown {
	font-family: "こぶりなゴシック W6 JIS2004", "Koburina Gothic W6 JIS2004", "中ゴシックBBB", "Gothic Medium BBB";
	font-weight: bold;
	color: var(--brown);
	text-decoration: underline;
}
.u-attention {
	margin-top: 1em;
	padding-left: 1em;
	text-align: left;
	text-indent: -1em;
	font-size: 0.8em;
	color: #6a6a6a;
	letter-spacing: 0;
}
.u-attention.no_indent {
	padding-left: 0;
	text-indent: 0;
}
.u-label__slash {
	position: relative;
	display: inline-block;
	margin: 0.25em 0;
	font-size: 1.1em;
	color: var(--dk_brown);
}
.u-label__slash::before, 
.u-label__slash::after {
	content: '';
	position: absolute;
	display: block;
	top: calc(50% - 0.6em);
	width: 1px;
	height: 1.2em;
	background: var(--dk_brown);
}
.u-label__slash::before {
	left: -0.75em;
	transform: rotate(-15deg);
}
.u-label__slash::after {
	right: -0.75em;
	transform: rotate(15deg);
}
.u-label__slash.-l2 {
	line-height: 1.5;
}
.u-label__slash.-l2::before, 
.u-label__slash.-l2::after {
	top: calc(50% - 1.2em);
	height: 2.4em;
}
.u-ls_s {
	letter-spacing: 0.1em;
}
.u-marker {
	font-family: "こぶりなゴシック W6 JIS2004", "Koburina Gothic W6 JIS2004", "中ゴシックBBB", "Gothic Medium BBB";
	font-weight: bold;
	color: var(--dk_brown);
	background: linear-gradient(to top, #ebe7e0 40%, transparent 40%);
}

@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;
	padding-bottom: 62px;
	background: #fff;
	border-right: solid 10px #aa977b;
}
.wrapper_inner_r.on {
	opacity: 0;
	transition: opacity 0.5s;
}

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

	.wrapper_inner_l {
		background: url("../img/bg.webp");
		background-size: 775px auto;
		background-attachment: fixed;
		background-position: 50% 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;
		border-left: solid 10px #aa977b;
	}

}

/* 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: 0 45px 0 35px;
	line-height: 1.25;
	font-size: 1.15em;
	background: #fff url("../img/bg_arrow_d.svg") no-repeat right 10px top 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 var(--brown);
	opacity: 0.8;
}
.menu > ul a span._small {
	font-size: 0.875em;
}
.menu__banner {
	padding-top: 1em;
}
.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 {
		font-size: 0.9em;
	}
	.menu > ul li + li {
		margin-top: 1.5%;
	}
	.menu > ul a {
		height: 46px;
	}
	.menu__banner {
		padding-top: 1%;
	}
	.menu__banner .u-label__slash.u-mt_s {
		margin-top: 5px!important;
	}
	
}

@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;
		transform: translateY(0);
	}
	.wrapper_inner_l.on .menu {
		animation: menu_fadeIn 0.5s forwards;
	}
	
	.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__banner {
		padding-top: 0;
	}

}

@keyframes menu_fadeIn {
	from {
		opacity: 0;
		top: 10px;
		background: transparent
	}
	to {
		opacity: 1;
		top: 0;
		background: #f0ede8
	}
}

/*.header */
header {
	padding: 0 0.5em 0 1.5em;
	background: #fff;
}
.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 var(--dk_brown);
		border-bottom: solid 1px var(--dk_brown);
		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: var(--dk_brown);
	}

}

/* 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: 2.25em;
	border: solid 1px var(--brown);
	border-top: solid 2px #000;
	line-height: 1.3;
	font-family: "こぶりなゴシック W6 JIS2004", "Koburina Gothic W6 JIS2004", "中ゴシックBBB", "Gothic Medium BBB";
	font-size: 0.9em;
	/*font-weight: 500;*/
	background: #fff url("../img/bg_arrow_fwd.svg") no-repeat right 12px top 50%;
	background-size: 20px;
	letter-spacing: 0;
}
.btn_back,
.btn_fwd {
	display: inline-block;
	line-height: 1.15;
}
.btn_back {
	padding-left: 40px;
	background: url("../img/bg_arrow_back.svg") no-repeat 0 50%;
	background-size: 26px;
}
.btn_fwd {
	padding: 6px 45px 10px 10px;
	border-bottom: solid 1px var(--brown);
	font-size: 0.9em;
	background: url("../img/bg_arrow_fwd_l.svg") no-repeat right 10px top 0;
	background-size: 26px;
}
.btn_l {
	height: 62px;
	font-size: 1.2em;
	font-family: 'NOW-MM', serif;
	letter-spacing: 0.125em;
	background-image: url("../img/bg_arrow_d.svg");
	background-size: 16px;
	background-position: right 20px top 50%;
}
/*.キャンペーン */
#campaign .btn_fwd {
	padding-left: 45px;
	background-image: url("../img/bg_arrow_fwd_l.svg"), url("../img/logo_instagram_s_black.webp");
	background-repeat: no-repeat, no-repeat;
	background-position: right 10px top 0, 10px 0;
	background-size: 26px, 26px;
}
/* 第54回アロマテラピー検定 */
#examination .btn {
	max-width: 260px;
}
/* AEAJ認定アロマブレンドデザイナー */
#designer .btn {
	max-width: 240px;
}

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

/* heading */
h2 {
	margin-bottom: 40px;
	font-size: min(1.3em, 2vw);
	font-family: 'NOW-MM', serif;
	font-weight: bold;
}
h2 span {
	display: block;
	font-size: 0.8em;
	color: var(--brown);
}
.h2_line {
	position: relative;
	padding-top: 50px;
	z-index: 1;
}
.h2_line::before, 
.h2_line::after {
	content: '';
	position: absolute;
	display: block;
	top: 0;
	left: 30px;
	width: calc(100% - 60px);
	height: 1px;
	background: var(--brown);
}
.h2_line::after {
	top: 4px;
	left: 40px;
	width: calc(100% - 80px);
	height: 0.5px;
	background: var(--dk_brown);
}
h3 {
	margin-bottom: 30px;
	font-family: 'NOW-MM', serif;
	font-weight: bold;
	color: var(--brown);
}
.h3_line {
	position: relative;
	display: inline-block;
}
.h3_line::before, 
.h3_line::after {
	content: '';
	position: absolute;
	display: block;
	top: 50%;
	width: 2em;
	height: 1px;
	background: var(--brown);
}
.h3_line::before {
	left: -2.5em;
}
.h3_line::after {
	right: -2.5em;
}
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);
	}

}

/*.site_end */
.site_end {
	position: relative;
	padding: 2.5em 0;
	background: #fdfdfc;
}
.site_end::before {
	content: '';
	position: absolute;
	display: block;
	top: 0;
	left: 30px;
	width: calc(100% - 60px);
	height: 1px;
	background: var(--brown);
}
.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: #404040 url("../img/bg_arrow_u.svg") no-repeat 50% 50%;
	background-size: 14px;
	text-indent: -999px;
}
.siteFooter.on {
	position: relative;
}
.siteFooter.on .pageTop a {
	position: absolute;
	bottom: 100%;
	right: -10px;
	transition: bottom 0.25s;
}

/*.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.on {
	bottom: 0;
}
.floating_button a {
	position: relative;
	display: block;
	line-height: 62px;
	font-size: 1.2em;
	border-top: solid 2px #000;
	background: #fff;
}
.floating_button a::after {
	content: '';
	position: absolute;
	display: block;
	top: calc(50% - 10px);
	right: 15px;
	width: 18px;
	height: 18px;
	background: url("../img/bg_arrow_d.svg") no-repeat;
	background-size: 18px;
	transition: transform 0.5s;
}
.floating_button a.on::after {
	transform: rotate(180deg);
}

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

	.floating_button {
		max-width: none;
		width: calc(50% + 5px);
		font-size: 1.5vw;
	}

}

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

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

}

/* トップ・星座 */
.check_explanation {
	position: relative;
	margin: 1em 0.5em;
	padding: 3em 1em;
	background: #faf9f7;
}
.check_explanation::before,
.check_explanation::after {
	content: '';
	position: absolute;
	display: block;
	left: -0.5em;
	width: calc(100% + 1em);
	height: 16%;
}
.check_explanation::before {
	top: -0.75em;
	background: url("../img/bg_frame_u.svg") no-repeat 0 0;
}
.check_explanation::after {
	bottom: -0.75em;
	background: url("../img/bg_frame_d.svg") no-repeat 0 100%;
}
.check_explanation h3 {
	font-size: min(1.3em, 2vw);
	font-family: 'NOW-MM', serif;
	font-weight: bold;
	color: #000;
}

@media screen and (max-width: 767px) { 
	
	.check_explanation {
		margin-left: -10px;
		margin-right: -10px;
		padding-bottom: 2em;
	}
	.check_explanation::before,
	.check_explanation::after {
		height: 16vw;
	}
	.check_explanation h3 {
			font-size: min(1.3em, 5vw);
	}
	
}
/*.キャンペーン */
.campaign__step li + li {
	padding-top: 4em;
	background: url("../img/bg_arrow_d.svg") no-repeat 50% 1em;
	background-size: 18px;
}
.campaign__step h4 {
	position: relative;
	display: inline-block;
	margin-bottom: 1em;
	padding: 1px 0.75em;
	line-height: 1.5;
	font-size: 0.9em;
	background: #404040;
	color: #fff;
	letter-spacing: 0;
}
.campaign__step h4::before, 
.campaign__step h4::after {
	content: '';
	position: absolute;
	display: block;
	top: 0;
	width: 1px;
	height: 100%;
	background: #404040;
}
.campaign__step h4::before {
	left: -2px;
}
.campaign__step h4::after {
	right: -2px;
}

/* 第53回アロマテラピー検定 */
.kentei_tbl {
	margin: 0 auto;
	border-collapse: separate;
	border-spacing: 10px;
	line-height: 2.5;
}
.kentei_tbl th,
.kentei_tbl td {
	padding: 14px 0 20px;
	font-size: 0.95em;
	font-weight: normal;
	border-bottom: solid 1px #bfbfbf;
}
.kentei_tbl th {
	white-space: nowrap;
	text-align: right;
	padding-right: 0.5em;
}
.kentei_tbl td {
	text-align: left;
}
#kentei .btn {
	max-width: 220px;
	font-size: 0.875em;
}

/*.クローズド */
.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);
}