@charset "utf-8";

/* ------------------------------------------------------------ common */
:root{
	--main-color: #ff9c9c;
	--sub-color: #e91a5e;
}

body{ position: relative; background: #FF9D9D; font-family: 'Noto-Sans-JP-Light'; }
body:before{ opacity: 0.5; position: fixed; content: ""; top: 0; left: 0; width: 100%; height: 100vh; background: url(../images/common/bg-color.jpg) center/cover no-repeat; }
a:hover{ opacity: 0.8; }

.js-fade{ opacity: 0; transform: translateY(10px); transition: all 0.9s; }
.js-load{ opacity: 0; transition: all 0.9s; }
.js-fade.is-animated{ opacity: 1; transform: translateY(0); transition: all 0.9s; }
.js-load.is-animated{ opacity: 1; }

/* #flex-wrapper{ display: flex; align-items: flex-start; justify-content: space-between; } */
.main-title{ padding: 0 0 30px; color: var(--main-color); text-align: center; }
.main-title .en{ font-size: 50px; font-family: 'Butler_Ultra_Light'; }
.main-title .ja{ font-size: 15px; font-family: "yu-mincho-pr6n", sans-serif; font-weight: 400; font-style: normal; letter-spacing: 0.26em; }

.btns{ display: flex; align-items: center; flex-direction: column; gap: 10px; }
.btn{ width: 100%; }
.btn-link{ position: relative; display: flex; align-items: center; justify-content: space-between; height: 55px; padding: 0 15px; border-radius: 100px; }
.btn-pink{ background: linear-gradient(109deg,rgba(184, 24, 76, 1) 0%, rgba(233, 26, 94, 1) 100%); }
.btn-blue{ background: linear-gradient(109deg,rgba(34, 57, 162, 1) 0%, rgba(44, 70, 190, 1) 100%); }

.btn__icon{ position: absolute; left: 20px; width: 30px; text-align: center; }
.btn__text{ width: 100%; text-align: center; color: #fff; font-size: 16px; font-family: 'Noto-Sans-JP-Regular'; }
.arrow{ transform: rotate(45deg); width: 10px; height: 10px; border-top: 2px solid #fff; border-right: 2px solid #fff; }


/* ------------------------------------------------------------ header */
header{ position: relative; padding: 20px 1%; }
header h1{ width: 208px; }
header h1 img{ width: 100%; height: auto; }

.burger{ display: none; }


/* ------------------------------------------------------------ main */
main{ position: relative; /* height: calc(100vh - 90px); overflow-y: scroll; */ width: 320px; margin: 0 auto; background: #fff; border-radius: 17px; box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.2); }


/* ------------------------------------------------------------ menu */
#menu{ position: fixed; right: 0; top: 80px; overflow: hidden; height: calc(100vh - 90px); /* width: 570px; */ width: 36vw; border-radius: 20px 0 0 20px; font-family: "linotype-didot", serif; font-weight: 400; font-style: normal; }

.menu-wrapper { height: 100%; border-radius: 20px 0 0 20px; }
.menu-head { background: #E9195F; color: #fff; font-size: 26px; letter-spacing: 0.08em; padding: 20px 32px 18px; border-radius: 20px 0 0 0; }
.menu-blocks{ overflow-y: scroll; height: 100%; padding: 7% 5%; background: rgba(255,255,255,0.6); border-radius: 0 0 0 20px; }
.menu-block { margin-bottom: 36px; }

.menu-title { display: flex; align-items: baseline; gap: 14px; color: #E9195F; font-size: 26px; padding-bottom: 10px; border-bottom: 1px solid #E9195F; margin-bottom: 20px; }
.menu-title a { display: flex; align-items: baseline; gap: 14px; color: #E9195F; text-decoration: none; width: 100%; }
.menu-title .en { font-size: 26px; letter-spacing: 0.05em; }
.menu-title .jp { font-size: 14px; letter-spacing: 0.15em; }

.menu-list { list-style: none; padding: 0; margin: 0; }
.menu-list__item { margin-bottom: 14px; }
.menu-list__item a { position: relative; padding-left: 22px; color: #E9195F; text-decoration: none; font-size: 16px; letter-spacing: 0.1em; }
.menu-list__item a::before { content: "―"; position: absolute; left: 0; top: 50%; transform: translateY(-50%); color: #E9195F; }


/* ------------------------------------------------------------ footer */
footer{ padding: 60px 0 50px; text-align: center; }
footer .contact_box p.mini{text-align: center; line-height: 200%;font-family: 'Noto-Sans-JP-Regular'; padding: 10px 0 20px; font-size: 12px;}
.foot-logo{ width: 41%; margin: 0 auto 25px; }
.foot-logo img{ width: 100%; height: auto; }
.copy{ font-size: 11px; font-family: 'Noto-Sans-JP-Light'; }


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

	#menu{ width: 33vw; }
	aside{ width: 31vw; }
	
}

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

	aside{ width: 30vw; }
	
}

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

	main{ margin: 0 5%; }
	#menu{ width: 45vw; }
	aside{ display: none; }
	
}

/* ------------------------------------------------------------ mobile ------------------------------------------------------------ */
@media only screen and (max-width: 768px) {

/* ------------------------------------------------------------ common */
	.no-scroll{ overflow: hidden; }


/* ------------------------------------------------------------ header */
	header { display: flex; align-items: center; justify-content: space-between; padding: 10px 3%; background: #fff; }
	header h1 { width: 160px; }
	
	.burger{ cursor: pointer; position: relative; display: block; width: 25px; height: 20px; }
	.burger span{ transition: all 0.9s; position: absolute; width: 100%; height: 1px; background: var(--main-color); }
	.burger span:nth-of-type(1) { top: 5px; }
	.burger span:nth-of-type(2) { top: 10px; }
	.burger span:nth-of-type(3) { top: 15px; }
	
	.burger.is-active span{ transition: all 0.9s; }
	.burger.is-active span:nth-of-type(1) { transform: rotate(45deg); top: 10px; }
	.burger.is-active span:nth-of-type(2) { opacity: 0; }
	.burger.is-active span:nth-of-type(3) { transform: rotate(-45deg); top: 10px; }
	

/* ------------------------------------------------------------ main */
	main { height: auto; min-width: 320px; margin: 0; border-radius: 0; width: 100%; }


/* ------------------------------------------------------------ menu */
	#menu{ transition: all 0.9s; opacity: 0; visibility: hidden; overflow-y: scroll; height: 100dvh; width: 100%; border-radius: 0; position: fixed; z-index: 100; top: 50px; padding-bottom: 10%; }
	#menu.is-active{ transition: all 0.9s; opacity: 1; visibility: visible; }
	
	.menu-head { border-radius: 0; display: none; }
	.menu-blocks { border-radius: 0; background: #fff; }
	.menu-wrapper { height: 100%; }


}