@charset "utf-8";
@import url("https://use.fontawesome.com/releases/v5.6.1/css/all.css");
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans&family=Noto+Sans+JP:wght@400;700&display=swap');
/* -----------------------------------------
 reset.css
----------------------------------------- */
html,body,h1,h2,h3,h4,h5,h6,p,div,
ul,ol,li,dl,dt,dd,
table,caption,th,td,
form,button,label,address,blockquote,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border:0;
	outline:0;
	font-size: 100%;
	font-weight: normal;
}

html {
	font-size: 62.5%;
	overflow: auto;
}

html,
body {
	height: 100%;
}

body {
	font-size: 140%;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-webkit-text-size-adjust: 100%;
	line-height: 1.5;
	font-family: 'Noto Sans JP',"ヒラギノ丸ゴ ProN",
    "Hiragino Maru Gothic ProN",メイリオ,Meiryo,serif;
}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section{ 
	display:block;
}
nav ul {
	list-style:none;
}
hr {
	display: none;
}
img,abbr {
	border: none;
	vertical-align: bottom;
}
ul,ol,li {
	list-style: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
th,td {
	text-align: left;
}
a {
	color: #000000;
	text-decoration: none;
}
a:hover {
	color: #000000;
	text-decoration: none;
}
a:focus {
	outline: none;
}
input:focus, 
select:focus, 
textarea:focus {
	outline: none;
}
img {
	width: 100%;
	height: auto;
}

ol, ul, dl {
    		list-style: none;
			font-style: normal;
		}

*,
*:before,
*:after {
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
}
p{
	letter-spacing: .08em;
}

/* ------------------------------------------------------------------ */
/* loading */
/* ------------------------------------------------------------------ */

#loading{
    position: absolute;
    left: 50%;
    top: 30%;
}

#loader-bg {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    background: #fff;
    z-index: 1000000000;
}

/* ------------------------------------------------------------------ */
/* header */
/* ------------------------------------------------------------------ */

header{
	width: 100%;
	height: 65px;
}

/*サイドmenu
----------------------------------------- */
#global-nav ul {
	list-style: none;
	margin-left: 0;
}
#global-nav > ul > li {
	position: relative;
}

#global-nav a {
	color: #333;
	text-decoration: none;
	display: block;
	padding: 15px 0;
	-moz-transition: background-color .3s linear;
	-webkit-transition: background-color .3s linear;
	transition: background-color .3s linear;
	text-align: left;
    padding-left: 30px;
}
#global-nav .sub-menu.is-active > a,
#global-nav a:hover {
	color: #fff;
	background: #000;
}
#global-nav li>ul >li a{
	padding-left: 45px;
	background-color: #fafafa;
} 
#global-nav .sub-menu-nav a,
#global-nav .sub-menu:hover .sub-menu-nav {
	width: 230px;
}

/* sub-menu icon */
#global-nav .sub-menu-head {
	position: relative;
}
#global-nav .sub-menu-head:after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	right: 18px;
	margin: auto;
	vertical-align: middle;
	width: 8px;
	height: 8px;
	border-top: 1px solid #033560;
	border-right: 1px solid #033560;
	-moz-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}
#global-nav .sub-menu-head2:after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	right: 18px;
	margin: auto;
	vertical-align: middle;
	width: 8px;
	height: 8px;
	border-top: 1px solid #033560;
	border-right: 1px solid #033560;
	-moz-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

/* nav-toggle */
#nav-toggle {
	top: 26px;
	right: 40px;
	height: 60px;
	width: 60px;
	z-index: 400;
	position: fixed;
	background: rgba(255,255,255,.8);
	padding: 20px;
	border-radius: 40px;
}

#nav-toggle > div {
	position: relative;
}
#nav-toggle span {
	width: 100%;
	height: 3px;
	left: 0;
	display: block;
	background: #333;
	position: absolute;
	-webkit-transition: .35s ease-in-out;
	-moz-transition: .35s ease-in-out;
	transition: .35s ease-in-out;
}

#nav-toggle span:nth-child(1) {
	top: 0;
}
#nav-toggle span:nth-child(2) {
	top: 8px;
}
#nav-toggle span:nth-child(3) {
	top: 16px;
}

/*-----------------------------------------
メニューバーがスクロールで変色
-------------------------------------------*/

#overlay {
	display: none;
	position: fixed;
	background: rgba(0,0,0,.6);
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 200;
}


/* サブメニューは開けない */
	#global-nav .sub-menu-head:after,
	#global-nav .sub-menu-nav {
		display: none;
	}

/* nav open */
	.open {
		overflow: hidden;
	}
	.open #overlay {
		display: block;
	}

/* #nav-toggle close */
	.open #nav-toggle span:nth-child(1) {
		top: 11px;
		-webkit-transform: rotate(45deg);
		-moz-transform: rotate(45deg);
		transform: rotate(45deg);
		background: #333 !important;
	}
	.open #nav-toggle span:nth-child(2) {
		width: 0;
		left: 50%;
		background: #333 !important;
	}
	.open #nav-toggle span:nth-child(3) {
		top: 11px;
		-webkit-transform: rotate(-45deg);
		-moz-transform: rotate(-45deg);
		transform: rotate(-45deg);
		background: #333 !important;
	}


/* sub-menu icon */
#global-nav .sub-menu-head {
	position: relative;
}
#global-nav .sub-menu-head a::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	right: 25px;
	margin: auto;
	vertical-align: middle;
	width: 8px;
	height: 8px;
	border-top: 1px solid #333;
	border-right: 1px solid #333;
	-moz-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}
#global-nav .sub-menu-head a:hover::after{
		border-top: 1px solid #FFFFFF;
	border-right: 1px solid #FFFFFF;
}
/*メニューバー*/
#sidebar {
		position: fixed;
		right: -50%;
		top: 0;
		height: 100%;
		width: 50%;
		color: #333;
		background: #fff;
		-webkit-transition: .3s ease-in-out;
		transition: .3s ease-in-out;
		z-index: 300;
		padding-top: 75px;
		text-align: center;
	}

.open #sidebar  {
		-webkit-transform: translate3d(-100%,0,0);
		transform: translate3d(-100%,0,0);
	}

.sidebar {
		position: fixed;
		top: -100%;
		height: 100%;
		width: 50%;
		color: #fff;
		background: #000;
		-webkit-transition: .3s ease-in-out;
		transition: .3s ease-in-out;
		z-index: 300;
		padding-top: 75px;
		text-align: center;
	}

.open .sidebar  {
		-webkit-transform: translate3d(0,100%,0);
		transform: translate3d(0,100%,0);
	}
/*
--------------------------------------------------------------------------------------
1024px以上
--------------------------------------------------------------------------------------
*/
@media screen and (min-width:1024px) {
.pc {
	display: block !important;
}

.sp {
	display: none !important;
}
	
}

/*
--------------------------------------------------------------------------------------
769pxから1024pxまで
--------------------------------------------------------------------------------------
*/
@media screen and (min-width:768px) and ( max-width:1024px) {
	.head-h1{
	position: absolute;
	bottom:5% !important;
	left: 2rem !important;
	color: #fff;
	font-size: 1.2rem;
	display: inline-block;
}
}
	
/*
--------------------------------------------------------------------------------------
768px以下
--------------------------------------------------------------------------------------
*/
@media screen and (max-width: 768px) {
.pc{
	display: none !important;
}
.sp {
  display: block !important;
}

.head-h1{
	position: absolute;
	bottom:2em ;
	left: 2rem;
	color: #fff;
	font-size: 1.4rem;
	display: inline-block;
}
.head-h1-rayer{
	position: absolute;
	top:2px ;
	left: 2rem;
	font-size: .8rem;
	display: inline-block;
	}
}
@media screen and (min-width: 1024px) {
.head-h1{
	position: absolute;
	top:10px;
	left: 3rem;
	color: #fff;
}
	.head-h1-rayer{
	position: absolute;
	top:2px ;
	left: 2rem;
	font-size: 1.2rem;
	display: inline-block;
	}
}