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

 2022.08.16

--------------------------------------------*/
/* ----------------------------------------------

 * タグの設定

---------------------------------------------- */
a {
	display: inline-block;
	outline:none;
	color: #000;
	cursor: pointer;
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
    transition: all .3s ease;
}
input,
input[type="submit"],
input[type="button"],
button {
	-webkit-box-sizing: content-box;
	-webkit-appearance: button;
	appearance: button;
	box-sizing: border-box;
	outline: none;
	font-style: normal;
	font-weight: 400;
	font-family:"Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
	cursor: pointer;
}
input[type="submit"]::-webkit-search-decoration,
input[type="button"]::-webkit-search-decoration {
	display: none;
}
input[type="button"],
input[type="text"],
input[type="submit"],
input[type="image"],
textarea {
   -webkit-appearance: none;
}
select {
	font-family:"Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
    -webkit-appearance: none;
	 -moz-appearance: none;
    appearance: none;
}
select::-ms-expand{
	font-family:"Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
	display: none;
}
/*------------------------------------------------*/
html {
	margin: 0;
	padding: 0;
	background: #fff;
	color: #000;
	font-style: normal;
	font-weight: 500;
	font-size: 62.5%;
	line-height: 2;
	font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
	-webkit-font-smoodting: antialiased;
	-moz-osx-font-smoodting: grayscale;
	word-break: break-all;
	user-select: none;
}
body {font-size: calc(14px + 4 * ((100vw - 320px) / 1600));line-height: 1.7;}
main {
	position: relative;
	z-index: 2;
	height: 100%;
	transition: transform .7s ease-in-out;
}
main.open {transform: translateX(-40%);}
h2,h3,h4,h5 {line-height: 1.5;}
p {font-size: calc(14px + 6 * ((100vw - 320px) / 1600));line-height: 2;}
ul,li,th,td,dt,dd,figcaption {line-height: 2;}
.RyoTextPlusNM {font-family: ryo-text-plusn, serif;font-weight: 500;font-style: normal;}
.YuGothic {font-family:"Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;font-weight: 400;}
.Helvetica {font-family: "Helvetica Neue" , Helvetica , Arial , Verdana;font-weight: 300;}
.inner {max-width: 1120px;margin: 0 auto;padding: 0 20px;}
.blank {padding-top: calc(60px + 57 * ((100vw - 320px) / 1600));padding-bottom: calc(60px + 70 * ((100vw - 320px) / 1600));}
.flexbox {display: flex;flex-wrap: wrap;justify-content: space-between;}
.flexbox2 {display: flex;flex-wrap: wrap;justify-content: space-around;}
.title {margin-bottom: calc(40px + 40 * ((100vw - 320px) / 1600));}
.title h2 {text-align: center;}
.title .en {
	display: inline-block;
	margin-bottom: .5em;
	font-size: calc(25px + 18 * ((100vw - 320px) / 1600));
	letter-spacing: .2em;
}
.title .jp {font-size: calc(14px + 10 * ((100vw - 320px) / 1600));text-align: center;}
.title_vertical {
	display: flex;
	justify-content: center;
    align-items: flex-start;
}
.title_vertical .UpAnime {display: flex;text-align: center;}
.title_vertical .UpAnime .UpAnime_in {writing-mode: vertical-rl;min-height: 3rem;line-height: 2.5;}
.title_vertical .UpAnime .UpAnime_in.en,
.title_vertical .UpAnime .UpAnime_in.jp {background: #685384;color: #fff;line-height: 1;}
.title_vertical .UpAnime .UpAnime_in.en {
	padding: .4em .2em;
	font-size: calc(23px + 20 * ((100vw - 320px) / 1600));
	letter-spacing: .2em;
}
.title_vertical .UpAnime .UpAnime_in.jp {
	padding: .7em .6em;
	font-size: calc(14px + 10 * ((100vw - 320px) / 1600));
	letter-spacing: .5em;
}
.title_vertical .UpAnime .UpAnime_in span {text-combine-upright: all;}
a[href^="tel:"] {pointer-events: none;}
.pc,.pc2 {display: block;}
.sp,.sp2 {display: none;}
@media only screen and ( max-width : 767px ) {
	a[href^="tel:"] {pointer-events: visible;}
	.pc {display: none;}
	.sp {display: block;}
}
@media only screen and ( max-width : 500px ) {
	.pc2 {display: none;}
	.sp2 {display: block;}
}
/*------------------------------------------------

    header

------------------------------------------------*/
header {
	position: fixed;
	top: 0;
	z-index: 9;
	width: 100%;
	height: 120px;
	background: #685384;
	transition: .3s;
}
header.scroll {height: 100px;}
header .left_content .logo {
	display: flex;
	align-items: center;
	position: absolute;
	bottom: 50%;
	left: calc(10px + 20 * ((100vw - 320px) / 1600));
	transform: translate(0, 50%);
	transition: .5s;
}
header .left_content .logo img {
	width: calc(140px + 200 * ((100vw - 320px) / 1600));
	margin-right: calc(10px + 5 * ((100vw - 320px) / 1600));
}
header .left_content .logo span {
	margin-top: calc(10px + 5 * ((100vw - 320px) / 1600));
	color: #fff;
	font-size: calc(10px + 6 * ((100vw - 320px) / 1600));
	letter-spacing: .4em;
}
header .right_content {
	position: absolute;
	bottom: 50%;
	right: calc(10px + 30 * ((100vw - 320px) / 1600));
	z-index: 11;
	transform: translate(0, 50%);
}
header .right_content p {
	z-index: 11;
	width: calc(60px + 50 * ((100vw - 320px) / 1600));
	margin-right: calc(40px + 60 * ((100vw - 320px) / 1600));
	border: 1px solid #fff;
}
header .right_content p a {
	display: block;
	padding: 10px 0;
	color: #fff;
	font-size: calc(10px + 2 * ((100vw - 320px) / 1600));
	letter-spacing: .2em;
	text-align: center;
}
header .right_content .button {
	position: absolute;
	bottom: 50%;
	right: 0;
	transform: translate(0, 50%);
	width: calc(30px + 26 * ((100vw - 320px) / 1600));
	height: 14px;
	cursor: pointer;
	transition: .3s;
}
header .right_content .button span {
	position: absolute;
	left: 0;
	width: 100%;
	height: 1px;
	background: #fff;
	transition: all .4s;
}
header .right_content .button span:nth-child(1) {top: 0;}
header .right_content .button span:nth-child(2) {bottom: 0;}
header .right_content .button.active span:nth-child(1) {top: 2px;transform: translateY(5px) rotateZ(45deg);}
header .right_content .button.active span:nth-child(2) {transform: translateY(-6px) rotateZ(-45deg);}
header nav {
	display: block;
	position: fixed;
	top: 0;
	right: 0;
	z-index: 10;
	transform: translateX(100%);
	width: 40%;
	height: 100%;
	padding: 0 10px;
	overflow-y: scroll;
	background-color: #F4EDFC;
	transition: transform .7s ease-in-out;
	mix-blend-mode: difference;
}
header nav.open {transform: translateX(0);transition: transform .7s ease-in-out;}
header nav ul {
	padding: 0;
	margin: 0;
	list-style: none;
	position: relative;
	margin-top: 150px;
	text-align: center;
}
header nav ul li {margin-bottom: 15px;opacity: 0;transform: translateY(-20px);text-align: center;}
header nav ul li:nth-child(1) {transition: all .7s .2s ease-in-out;}
header nav ul li:nth-child(2) {transition: all .7s .4s ease-in-out;}
header nav ul li:nth-child(3) {transition: all .7s .6s ease-in-out;}
header nav ul li:nth-child(4) {transition: all .7s .8s ease-in-out;}
header nav ul li:nth-child(5) {transition: all .7s 1s ease-in-out;}
header nav ul li:nth-child(6) {transition: all .7s 1.2s ease-in-out;}
header nav ul li:nth-child(7) {transition: all .7s 1.4s ease-in-out;}
header nav ul li:nth-child(8) {transition: all .7s 1.6s ease-in-out;}
header nav ul li:nth-child(9) {transition: all .7s 1.8s ease-in-out;}
header nav ul li:nth-child(10) {transition: all .7s 2s ease-in-out;}
header nav ul li:nth-child(11) {transition: all .7s 2.2s ease-in-out;}
header nav ul li:nth-child(12) {transition: all .7s 2.4s ease-in-out;}
header nav.open ul li {opacity: 1;transform: translateY(0px);}
header nav ul li a,
header nav ul li h4 {
	display: inline-block;
	position: relative;
	padding-bottom: 7px;
	font-size: calc(10px + 4 * ((100vw - 320px) / 1600));
	line-height: 1;
	text-align: center;
	text-transform: uppercase;
	cursor: pointer;
}
header nav ul li a::before {
	content: '';
	width: 0;
	height: 1px;
	position: absolute;
	bottom: 0;
	left: 0;
	background-color: #685384;
	transition: all .3s ease-in-out;
}
header nav ul li a:hover:before {width: 100%;}
header nav ul li a span,
header nav ul li h4 span {
	display: block;
	margin-bottom: 10px;
	font-size: calc(14px + 6 * ((100vw - 320px) / 1600));
	text-align: center;
}
header nav ul li.accordion .switch::before,
header nav ul li.accordion .switch::after {
	content: '';
	position: absolute;
	top: 7px;
	right: -24%;
	width: 10px;
	border-bottom: 1px solid #000;
	transition: .3s;
}
header nav ul li.accordion .switch::after {transform: rotate(90deg);}
header nav ul li.accordion .switch.open::after {display: none;}
header nav ul li.accordion ul.contentWrap {
	display: none;
	opacity: 1;
	margin-top: 0;
	background: #E1DAE8;
	transition: none;
}
header nav ul li.accordion ul.contentWrap li {position: relative;margin-bottom: 0;border-bottom: 1px solid #666;}
header nav ul li.accordion ul.contentWrap li:last-child {border-bottom: 0;}
header nav ul li.accordion ul.contentWrap li a {
	position: relative;
	width: 100%;
	padding: 15px 20px;
	font-size: calc(14px + 2 * ((100vw - 320px) / 1600));
	text-align: left;
}
header nav ul li .content {display: flex;justify-content: center;}
header nav ul li .content a {margin: 0 5px;}
@media only screen and ( max-width : 767px ) {
	header {height: 100px;}
	header.scroll {height: 80px;}
	header nav {width: 70%;}
	header nav ul {margin-top: 130px;}
}
/*------------------------------------------------

    ENTRY

------------------------------------------------*/
#entry {background: #E1DAE8;}
#entry .inner {max-width: 855px;}
#entry .flexbox2 a {
	width: 49%;
	padding: 3em 0;
	outline: .25px solid #685384;
	outline-offset: -.4em;
	background: #fff;
	color: #685384;
	font-weight: 600;
	font-size: calc(18px + 4 * ((100vw - 320px) / 1600));
	text-align: center;
	transition: .3s;
}
#entry .flexbox2 a:hover {outline-color: #fff;background: #685384;color: #fff;}
@media only screen and ( max-width : 767px ) {
	#entry .flexbox2 a {width: 100%;margin-bottom: 10px;}
	#entry .flexbox2 a:last-child {margin-bottom: 0;}
}
/*-----------------------------------------------

	404 Not Found

------------------------------------------------*/
#notfound {padding-top: 200px;}
#notfound h2 {margin-bottom: 50px;text-align: center;}
#notfound h2 span {display: block;font-size: 2.5em;text-align: center;}
#notfound p {margin-bottom: 40px;text-align: center;}
#notfound a {
	display: block;
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 300px;
	margin: 0 auto;
	padding: 15px;
	border: 1px solid #3C3C3C;
	background: #3C3C3C;
	color: #fff;
	font-size: 1.6rem;
	text-align: center;
}
#notfound a:hover {color: #3C3C3C;}
#notfound a::after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	transform-origin: right top;
	transform: scale(0, 1);
	transition: transform .3s;
	z-index: -5;
	background: #fff;
	color: #3C3C3C;
}
#notfound a:hover::after {transform-origin: left top;transform: scale(1, 1);}
#notfound a span {display: block;position: relative;text-align: center;}
@media only screen and ( max-width : 767px ) {
	#notfound {padding-top: 130px;}
}
/*------------------------------------------------

    footer

------------------------------------------------*/
footer {padding: 30px 0 36px;background: #685384;text-align: center;}
footer .logo {max-width: 220px;margin-bottom: 18px;}
footer small {
	display: block;
	color: #fff;
	font-size: calc(12px + 2 * ((100vw - 320px) / 1600));
	text-align: center;
}
/*--------------------------------------------------

　   back top

--------------------------------------------------*/
.wrapper {position: relative;}
#page-top {
	position: fixed;
	right: 0;
	bottom: 10px;
	z-index: 10;
	opacity: 0;
	transform: translateX(144px);
}
#page-top.LeftMove {animation: LeftAnime .3s forwards;}
@keyframes LeftAnime {
	from {
		opacity: 0;
		transform: translateX(144px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}
#page-top.RightMove {animation: RightAnime .3s forwards;}
@keyframes RightAnime {
	from {
		opacity: 1;
		transform: translateX(0);
	}
	to {
		opacity: 1;
		transform: translateX(144px);
	}
}
#page-top a {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	width: 144px;
	height: 100px;
	border-radius: 10px 0 0 10px;
	background: #685384;
	color: #fff;
	font-weight: 500;
	font-size: 1.4rem;
	letter-spacing: .1em;
	text-align: center;
	text-transform: uppercase; 
	text-decoration: none;
	transition: all .3s;
}
#page-top a span img {display: block;width: 30px;margin: 0 auto 10px;}
@media only screen and ( max-width : 1024px ) {
	#page-top a{width: 100px;}
}
@media only screen and ( max-width : 767px ) {
	#page-top a {width: 60px;height: 70px;font-size: 1rem;}
	#page-top a span img {width: 20px;margin-bottom: 5px;}
}