@charset "utf-8";


/* ---------- COMMON ---------- */




/* ---------- CUSTOM PROPERTY ---------- */

:root {
	--gradient1: linear-gradient(to right, #bffbff 0%, #fcbfff 50%, #c2bdff 100% );
	--gradient1b: linear-gradient(to bottom, #bffbff 0%, #fcbfff 50%, #c2bdff 100% );
	--gradient2: linear-gradient(to right, #e9fbff 0%, #f8e3fa 50%, #e6e5ff 100% );
	
	--gradientAnim1:linear-gradient(to right, #bffbff 0%, #fcbfff 33%, #c2bdff 66%, #bffbff 100% );
	--gradientAnim1b:linear-gradient(to bottom, #bffbff 0%, #fcbfff 33%, #c2bdff 66%, #bffbff 100% );
	
	--gradientAnim2:linear-gradient(to right, #e9fbff 0%, #f8e3fa 33%, #e6e5ff 66% , #e9fbff 100%);
	
	--wf_width: 10px;
	
	--main_padding: 3vw 0;
}

@media only screen and (max-width: 800px){
	:root{
		--wf_width: 0px;
		
		--main_padding: 30px 0;
	}
}

/* =base
------------------------------------------------------------------------------------------*/
*{box-sizing: border-box;}

body {
	text-align: center;
	color: #5f5f84;
	font-family:'Noto Sans JP','futura-pt',sans-serif, "メイリオ","Meiryo","MS PGothic","Osaka",Arial;
	font-size: 14px;
	line-height: 1.5em;
	height: 100%;
	
}
html {overflow-y:scroll; overflow-x: hidden; height:100%;}

a {color: #5f5f84;text-decoration: none; outline:none;}
a:hover {color: #5f5f84;text-decoration: none; opacity: 0.9;}
/*a:hover img{opacity:0.8;filter: alpha(opacity=80);}*/

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

}
@media print {
}

body.fixed {
	position: fixed;
	width: 100%;
	height: 100%;
	left: 0;
}

/* =window flame
------------------------------------------------------------------------------------------*/

.window_flame .wf { position: fixed; z-index: 8000; background: var(--gradientAnim1); background-size: 400% 400%; animation: 15s ease 0s infinite normal none running gradient;}
.window_flame .wfs { position: fixed; z-index: 8000; background: var(--gradientAnim1b); background-size: 400% 400%; animation: 15s ease 0s infinite normal none running gradient2;}

.window_flame .wf_top { top: 0; left: 0; width: 100%; height: var(--wf_width);}
.window_flame .wf_right { top: var(--wf_width); right: 0; width: var(--wf_width); height: calc(100% - var(--wf_width)*2);}
.window_flame .wf_under { bottom: 0; left: 0; width: 100%; height: var(--wf_width);}
.window_flame .wf_left { top: var(--wf_width); left: 0; width:var(--wf_width); height: calc(100% - var(--wf_width)*2);}



/* =change
------------------------------------------------------------------------------------------*/
.pc_only {display: block!important;}
.sp_only {display: none!important;}
@media only screen and (max-width: 800px){
	.pc_only {display: none!important;}
	.sp_only {display: block!important;}
}


/* =header
------------------------------------------------------------------------------------------*/
header{ position: relative;}

header .nav_logo {position: fixed;top: 20px;left: 20px;z-index: 9101}
header .nav_logo a{display: inline-block;}
header .nav_logo img {width: 100px;}

@media only screen and (max-width: 800px){
header .nav_logo {top: 15px; left: 15px;}
header .nav_logo img {width: 90px;}
}


/*============
nav
=============*/
nav {display: block;position: fixed;top: 0;right: -260px;bottom: 0;width: 260px;-webkit-overflow-scrolling: touch;transition: 0.5s;z-index: 9100;/*background: #000;*/}
.open nav {right: 0;}
nav .inner {position: absolute;top: 50%;right: 0px;transform: translateY(-50%);width: 100%;}
nav .inner ul {list-style: none;margin: 0;padding: 0;}
nav .inner ul li {position: relative;margin: 0;}
nav .inner ul li a {display: block;color: #5f5f84;padding: 0.8em 0em 0.8em 40px;text-decoration: none;transition: 0.2s;font-family: futura-pt, noto-sans , sans-serif;font-size: 26px;font-weight: 700;letter-spacing: 0.1em;text-align: left;line-height: 0.9em;}
nav .inner ul li a:hover {padding-left: 50px;text-shadow: 0px 0 10px rgba(247,128,231,0.3),0 0 15px rgba(149,242,215,0.3);}
.nav_gr{display: inline-block; margin-bottom: 0;}
/*nav .inner ul li a:hover .nav_gr {background:var(--gradient1);-webkit-background-clip: text;-webkit-text-fill-color: transparent;}*/

nav .inner div {text-align: left;padding: 2em 0em 1.2em 40px;display: flex;}
nav .inner div a {margin-right: 1.2em;margin-bottom: 10px; display: inline-block;}
nav .inner div a img {width: 24px;}


@media screen and (max-width: 800px) {
  nav {right: -100%;width: 100%; background: linear-gradient(to left, rgba(233,251,255,1) 0%, rgba(248,227,250,1) 50%, rgba(230,229,255,1) 100%);}
	nav .inner ul li a {padding: 0.5em 0em 0.5em 30px;}
	nav .inner ul li a:hover {padding-left: 40px;}
	nav .inner div {padding-left: 30px;}
}




/*============
.toggle_btn
=============*/
.toggle_btn {display: block;position: fixed;top: 20px;right: 20px;width: 50px;height: 40px;transform: translate(0, 0);transition: all .5s;cursor: pointer;z-index: 9101;}
.open .toggle_btn {right: -100px;}
.toggle_btn span {display: block;position: absolute;right: 0;width: 30px;height: 2px;background-color: #5f5f84;transition: all .5s;}
.toggle_btn span:nth-child(1) {top: 5px;width: 35px;}
.toggle_btn span:nth-child(2) {top: 15px;width: 20px;}
.toggle_btn span:nth-child(3) {top: 25px;width: 15px;}
.open .toggle_btn span {background-color: #5f5f84;width: 30px;}
.open .toggle_btn span:nth-child(1) {transform: translate(0, 10px) rotate(-45deg);animation: unset;}
.open .toggle_btn span:nth-child(2) {opacity: 0;animation: unset;}
.open .toggle_btn span:nth-child(3) {transform: translate(0, -10px) rotate(45deg);animation: unset;}
@media screen and (max-width: 800px) {
	.toggle_btn {top: 12px; right: 15px;}
	.open .toggle_btn {right:15px;}
}
/*============
#mask
=============*/
#mask {position: fixed;top: 0;right: 0;opacity: 0;height: 100%;width: 0%;transition: 0.7s;background: linear-gradient(to left, rgba(233,251,255,1) 0%, rgba(248,227,250,0.5) 50%, rgba(230,229,255,0) 100%); z-index: 9000;cursor: pointer;}
.open #mask {width: 100%;opacity: 1;}

/*============
#toggle_area
=============*/
#toggle_area {position: fixed;top: 0;right: 0;height: 100%;width: 100px;z-index: 9001;}


/* =navi CSS
------------------------------------------------------------------------------------------*/

/* =foot
-----------------------------------------------------------------------------------------*/
footer{padding: var(--main_padding); padding-bottom: 30px; }
footer p {text-align: center;}

footer .left_spacer {}
footer .container {margin-bottom: 30px;max-width: 900px;}

footer .flex {display: flex; justify-content: center;align-items: center;margin-bottom: 20px;}
footer .flex div , footer .flex a {width: 20%; display: block;margin-right: 25px;}
footer .flex a:last-of-type {margin-right: 0;}
footer .flex img  {width: 100%;}


footer .loopbox {padding-bottom: 25px;}
footer .imgloop { display: flex;width: 100%;height: 30px;overflow: hidden;}
footer .imgloop img {width: auto;height: 100%;}
footer .imgloop.loop2 img:first-child {animation: loop3 200s -100s linear infinite;}
footer .imgloop.loop2 img:last-child {animation: loop4 200s linear infinite;}

@media only screen and (max-width: 800px){
	footer{ }
	footer .flex {margin-bottom: 10px;}

	footer .flex div , footer .flex a {width: 30%;}

}






/* font
------------------------------------------------------ */



/*----- page fade -----*/

body::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color:#fff;  /* 背景カラー */
  z-index: 9999;  /* 一番手前に */
  pointer-events: none;  /* 他の要素にアクセス可能にするためにポインターイベントは無効に */
  opacity: 0;  /* 初期値では非表示 */
  -webkit-transition: opacity .8s ease; 
  -ms- transition: opacity .8s ease;
  -moz- transition: opacity .8s ease;
  transition: opacity .8s ease;
background-image: url("../images/bloom_logo_full.png");
background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: center;
	background-size: 30%;
}
 
/*body要素に.fadeoutセレクタがある場合には、レイヤーが表示されるようにopacityを１に設定します。*/
 
body.fadeout::after {
  opacity: 1;
}


@media only screen and (max-width: 768px){
	body::after {background-size: 60%;}
}



/* =fade
------------------------------------------------------------------------------------------*/
#js_fade2 {position : fixed;top : 0;left : 0;width: 100%; height : 100%;background-color: #fff;background-image : url( ../images/loading.gif );background-repeat : no-repeat; background-position : 50% 50%; z-index:100;}
/* =clearfix
------------------------------------------------------------------------------------------*/
.clearfix:after{clear:both;display:block;height:0;line-height:0;visibility:hidden;font-size:0.1em;content:".";}

/* =ページトップ
------------------------------------------------------------------------------------------*/
.page_top{text-align: right;margin: 0;  width:80px;  text-align:center;position:fixed; right:30px; bottom:40px;  z-index:10}
.page_top a{background-color:#000; display:block;border-radius: 50%;height:80px; width:80px; line-height:80px; color:#fff; font-family: 'Oswald';font-size:12px;}
.page_top a:hover{background-color:#cc0000; text-decoration:none;}


@media only screen and (max-width: 769px){
.page_top{ display:none;}
}