@charset "utf-8";

*{ box-sizing: border-box;font-feature-settings: "palt";word-break: break-all;}

/* =base
------------------------------------------------------------------------------------------*/
body {
	text-align: center;
	font-family: 'Noto Sans JP', sans-serif;
    font-weight: 500;
	font-size: 16px;
	line-height: 1.5em;
	color: #1f3364;
	background-color: #000;
	margin: 0;
	min-height:100%;
}

.sp_only{display: none;}
.pc_only{display: initial;}

@media only screen and (max-width: 768px){
.sp_only{display: initial;}
.pc_only{display: none!important;}
}

html {overflow-y:scroll; height:100%;}
a {  text-decoration: none;  cursor: pointer;color:#1b76b3; outline:none;transition:0.3s; }
a:link {  text-decoration: none; }
a:hover {  color: #2292dd;  text-decoration: none;}
a:active {  text-decoration: none;}
a img { outline:none;}
a:hover img {  opacity: .9;  -webkit-opacity: .9;  -moz-opacity: .9;  filter: alpha(opacity=90);  -ms-filter: "alpha(opacity=90)";}

.arrow{ position:relative;}
.arrow::after {
    content: "";
    position: absolute;
    top: calc(50% - 3px);
    right: 4%;
    width: 4px;
    height: 4px;
    border: 1px solid;
    border-color: transparent #061f58 #061f58 transparent;
    transform: rotate(-45deg);
}


/* border
------------------------------------------------------ */
.l-border { pointer-events: none; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 100000;}
.l-border__elm { position: absolute; background-color: #fff;}
.l-border__elm--bottom, .l-border__elm--top { height: 1vw; right: 0; left: 0;}
.l-border__elm--left, .l-border__elm--right { width: 1vw; top: 0; bottom: 0;}
.l-border__elm--top { top: 0;}
.l-border__elm--right { right: 0;}
.l-border__elm--bottom { bottom: 0;}
.l-border__elm--left { left: 0;}

@media only screen and (max-width: 768px){
.l-border__elm--bottom, .l-border__elm--top { height: 2vw; }
.l-border__elm--left, .l-border__elm--right { width: 2vw; }
}


/* =fade
/********************** fade *******************************/
#js_fade2 {position : fixed;top : 0;left : 0;width: 100%; height : 100%; /*background-color: #000;background-image : url( ../images/loading_b.gif );*/ background-repeat : no-repeat; background-position : 50% 50%; z-index:99;}

/********************** header *******************************/
header{ width: 100%; margin-bottom: calc(65px + 5vw);}
header img{ width:100%;}

header h1{ width: 29vw; margin: 3.5vw auto 1.5vw;}
header h2{ width: 68.5vw; margin: 0 auto;}

@media only screen and (max-width: 768px){
header{ margin-bottom: calc(25px + 5vw);}

header h1{ width: 80%; margin: 10vw auto 1vw;}
header h2{ width: 86%;}
}


/* =foot
-----------------------------------------------------------------------------------------*/
footer{ padding:30px 0; background-color: #fff; color: #1b76b3; font-size:12px;}
footer small{ font-size:inherit;}


@media only screen and (max-width: 768px){
footer{ padding:12px 0; font-size:12px; line-height:1.5em;}
}



/* =ページトップ
------------------------------------------------------------------------------------------*/
.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:#c3a368; 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:#d1b582; text-decoration:none;}


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


/* =clearfix
------------------------------------------------------------------------------------------*/
.clearfix:after{clear:both;display:block;height:0;line-height:0;visibility:hidden;font-size:0.1em;content:".";}


/* = parallax
------------------------------------------------------------------------------------------*/

.fadeInUp {
 -webkit-animation-fill-mode:both;
 -ms-animation-fill-mode:both;
 animation-fill-mode:both;
 -webkit-animation-duration:1.5s;
 -ms-animation-duration:1.5s;
 animation-duration:1.5s;
 -webkit-animation-name: fadeInUp;
 animation-name: fadeInUp;
 visibility: visible !important;
}
@-webkit-keyframes fadeInUp {
 0% { opacity: 0; -webkit-transform: translateY(100px); }
 100% { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes fadeInUp {
 0% { opacity: 0; -webkit-transform: translateY(100px); -ms-transform: translateY(100px); transform: translateY(100px); }
 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}



.fadeInRight {
 -webkit-animation-fill-mode:both;
 -ms-animation-fill-mode:both;
 animation-fill-mode:both;
 -webkit-animation-duration:1.5s;
 -ms-animation-duration:1.5s;
 animation-duration:1.5s;
 -webkit-animation-name: fadeInRight;
 animation-name: fadeInRight;
 visibility: visible !important;
}
@-webkit-keyframes fadeInRight {
 0% { opacity: 0; -webkit-transform: translateX(30px); }
 100% { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes fadeInRight {
 0% { opacity: 0; -webkit-transform: translateX(30px); -ms-transform: translateX(30px); transform: translateX(30px); }
 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}

.fadeInDown {
 -webkit-animation-fill-mode:both;
 -ms-animation-fill-mode:both;
 animation-fill-mode:both;
 -webkit-animation-duration:1.5s;
 -ms-animation-duration:1.5s;
 animation-duration:1.5s;
 -webkit-animation-name: fadeInDown;
 animation-name: fadeInDown;
 visibility: visible !important;
}
@-webkit-keyframes fadeInDown {
 0% { opacity: 0; -webkit-transform: translateY(-50px); }
 100% { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes fadeInDown {
 0% { opacity: 0; -webkit-transform: translateY(-50px); -ms-transform: translateY(-50px); transform: translateY(-50px); }
 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}

.fadeInLeft {
 -webkit-animation-fill-mode:both;
 -ms-animation-fill-mode:both;
 animation-fill-mode:both;
 -webkit-animation-duration:1.5s;
 -ms-animation-duration:1.5s;
 animation-duration:1.5s;
 -webkit-animation-name: fadeInLeft;
 animation-name: fadeInLeft;
 visibility: visible !important;
}
@-webkit-keyframes fadeInLeft {
 0% { opacity: 0; -webkit-transform: translateX(-20px); }
 100% { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes fadeInLeft {
 0% { opacity: 0; -webkit-transform: translateX(-20px); -ms-transform: translateX(-20px); transform: translateX(-20px); }
 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}