@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700;900&display=swap');

/* ------------------------------------------------
KAIBUTSUEN / layout css
------------------------------------------------ */

* {margin: 0;padding: 0;}
html {font-size: 62.5%;width: 100%;}

body{
font-size: 1.7rem;
font-family:'Noto Sans JP', sans-serif;
overflow-y:auto !important;
overflow-x:hidden !important;
background:#000 url(../../img/common/header_bg.jpg) 0 0 repeat;
color:#fff;
line-height:1.7;
width: 100%;
position: relative;
}

.clearfix::after {content: "";display: block;clear: both;}

img {vertical-align:top;}

/*
a:hover img{
opacity: 0.6;
filter: alpha(opacity=60);
-moz-opacity:0.6;
}*/

a {color:#fff;}
a:visited {color:#fff;}

#container {background:#000;}
#container .inner {width:1100px;margin:auto;padding:50px 0;}

h1 {text-align:center;font-size:12rem;font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif;line-height:1.2;}
h1 img {width:400px;}

#sec1 {border:1px solid #ccc;padding:50px;margin:20px 0 20px 0;}
#sec2 {border:1px solid #ccc;padding:50px;margin:20px 0 20px 0;}
#sec3 {border:1px solid #ccc;padding:50px;margin:20px 0 40px 0;}

p.en {text-align:center;font-weight:900;font-size:3rem;}
p.red {color:#900;font-weight:900;font-size:2.4rem;}
p.kikan {color:#900;font-weight:900;font-size:2.4rem;margin:30px 0;text-align:center;}
p.note {color:#900;font-weight:900;font-size:2rem;margin:10px 0;text-align:center;}

h2 {font-size:3rem;text-align:center;border-bottom:1px solid #fff;padding:0 0 10px 0;margin:0 0 1em 0;}

.jkt {display:block;width:50%;max-width:800px;margin:20px auto 30px auto;}

.flex {display:flex;flex-wrap: wrap;justify-content: space-between;margin:0 0 20px 0;}
.flex .ptn {width:calc(33% - 1em);border-right:1px solid #ccc;padding:0 1em 0 0;font-size:1.5rem;}
.flex .ptn:nth-child(3) {border:none;padding:0;}

.flex .ptn strong {display:block;font-size:1.6rem;}

.presentlist {width:70%;border:1px solid #666;padding:20px;margin:10px auto 20px auto ;text-align:center;}


.btn1 {display:block;width:50%;background:#900;text-decoration:none;padding:10px 0;margin:0 auto;text-align:center;}
.btn1:hover {background:#f00;} 

.logo {display:block;margin:0 auto;}


#footer {height:126px;border-top:1px solid #333;}
#footer_inner{z-index:10;position:relative;width:1000px;margin:0 auto;}

#footer ul{font-size:11px;list-style:none;height:126px;}
#footer ul li{display:inline;}

#footer #copy{padding:50px 0 0 0;text-align:center;font-size:11px;letter-spacing:1px;color:#ccc;font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;}

#footer a{color: #999;text-decoration:underline;}
#footer a:visited{color:#999;text-decoration:underline;}
#footer a:hover{color: #fff; text-decoration:underline;}


.pagetop {display: none;position: fixed;bottom: 50px;right: 50px;z-index:100;}
.pagetop a {display: block;}
.pagetop img {width:62px;}




/* effect
------------------------------------------------ */

 .fadein {
  opacity: 0;
  transform : translate(0, 50px);
  transition : all 600ms;
}

.fadein.scrollin{
  opacity: 1;
  transform: translate(0, 0);
}

/* 2つ目の要素に200msのdelayをかける */
.effect > .fadein:nth-of-type(2) {
-moz-transition-delay:200ms;
-webkit-transition-delay:200ms;
-o-transition-delay:200ms;
-ms-transition-delay:200ms;
}
/* 3つ目の要素に400msのdelayをかける */
.effect > .fadein:nth-of-type(3) {
-moz-transition-delay:400ms;
-webkit-transition-delay:400ms;
-o-transition-delay:400ms;
-ms-transition-delay:400ms;
}
/* 4つ目の要素に600msのdelayをかける */
.effect > .fadein:nth-of-type(4) {
-moz-transition-delay:600ms;
-webkit-transition-delay:600ms;
-o-transition-delay:600ms;
-ms-transition-delay:600ms;
}



/* sidebar [SP MENU]
------------------------------------------------------------- */

#sidebar {
font-size: 1.7rem;
padding-top: 80px;background: #fff;text-align: center;
display:block;
position: fixed;
right: -400px;
top: 0;
height: 100%;
width: 400px;
color: #000;
transition: .35s ease-in-out;
overflow-y:auto;}

#nav_sp {margin:0 0 100px 0;}
#nav_sp ul {list-style: none;margin-left: 0;}
#nav_sp > ul > li {position: relative;}
#nav_sp a {color: #000 !important;text-decoration: none !important;display: block;padding: 15px 0;border-bottom:1px solid #666;transition: background-color .3s linear;}
#nav_sp a:hover {text-decoration:none !important;background: #f60;color:#000 !important;}

/* sub-menu */
#nav_sp .sub-menu-nav {
position: fixed;
background: #033560;
color: #fff;
top: 0;
padding-top: 20px;
left: 400px;
width: 0;
height: 100%;
overflow: hidden;
transition: width .2s ease-out;
}
#nav_sp .sub-menu-nav a,
#nav_sp .sub-menu:hover .sub-menu-nav {
width: 400px;
}

/* nav-toggle */
#nav-toggle {position: fixed;top: 22px;right: 30px;height: 32px;cursor:pointer;}
#nav-toggle > div {position: relative;width: 50px;}
#nav-toggle span {width: 100%;height: 4px;left: 0;display: block;background: #f60;position: absolute;transition: .35s ease-in-out;}

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

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


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

/* nav open */
.open {/*overflow: hidden;*/}
.open #overlay {display: block;}
.open #sidebar  {transform: translate3d(-400px,0,0);}

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

/* z-index */
#overlay {z-index: 2;}
#sidebar {z-index: 300;}
#nav-toggle {z-index: 400;}