@charset "utf-8";

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video{
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section{
	display: block;
}
body{
	line-height: 1.5;
}
ol, ul{
	list-style: none;
}
blockquote, q{
	quotes: none;
}
blockquote::before, blockquote::after,
q::before, q::after{
	content: '';
	content: none;
}
table{
	border-collapse: separate;
	border-spacing: 1.5vw;
}

html{
      -webkit-text-size-adjust: 100%;
}

img{
     border: 0;
     max-width: 100%;
     height: auto;
     vertical-align: bottom;
}

iframe{
     border: 0;
     max-width: 100%;
     max-height: 100%;
}

/*========================   END  Reset css  =========*/



/*=======================  Base Layout =======================*/

/* all and smart phone*/


/*画面全体の設定*/

body,html{                                                                                                              
   height: 100%; 
   margin: 0 auto;
	color: rgb(252, 252, 252);
   background-color: rgb(0, 0, 0);
	font-size: 12px;
   font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}



span {
   display: inline-block;
}


.wf-sawarabigothic {
   font-family: "Sawarabi Gothic"; 
}
.wf-sawarabimincho { font-family: "Sawarabi Mincho"; 
}
.wf-notosansjapanese {
    font-family: "Noto Sans JP"; 
}
.wf-bangers {
    font-family: 'Encode Sans SC', sans-serif;
}


a{
   color: rgb(255, 255, 255);
   transition: 0.6s;
   cursor: url(img/cursor.png), pointer;
   text-decoration: none;
}


a:hover{
   color: lightseagreen;
}



.text-white{
   color: rgb(255, 255, 255);
}
.text-blue{
   color: lightseagreen;
}
.fontlarge16{
   font-size: 1.6em;
}
.fontlarge13{
   font-size: 1.3em;
}
.fontsmall08{
   font-size: 0.8em;
}
.fontsmall05{
   font-size: 0.4em;
}
.fontbold{
	font-weight: 900;
}
.fontbottom{
	vertical-align: bottom;
}
.fontmiddle{
	vertical-align: middle;
}
.letterspace{
	letter-spacing: 3px;
}

.gyoukan{
   margin: 1.1em 0;
}


.black{
   color: #ffffff;
   background-color: #000;
}
.black a{
   color: #fff;
}

.black a:hover{
   color: lightseagreen;
}

.white{
   color: rgb(0, 0, 0);
   background-color: rgb(255, 255, 255);
}

.borderbottom{
   border-bottom: solid 3px #ffa500;
}


.space10{
   height: 10vw;
}
.space30{
   height: 30vw;
}
.space60{
   height: 60vw;
}
.space60_black_line{
   height: 60vh;
   background-color: rgb(0, 0, 0);
   border-top: 5px solid rgb(255, 255, 255);
   border-bottom: 5px solid rgb(255, 255, 255);
}
.space120{
   height: 120vh;
}


.centering_m{
	margin: 0 auto;
}
.centering_t{
	text-align: center;
}
.right{
   text-align: right;
}
.left{
   text-align: left;
}


.margins10{
   margin: 10vw 0;
}
.margins2{
   margin: 2vw 0;
}
.margins1{
   margin: 1vw 0;
}
.marginsb10{
   margin: 0 0 10vw 0;
}


.imgsize65{
   width: 65%;
   height: auto;
}


/* アニメーションのスタイル */

.animation-scrollUpY {
   -webkit-transform: translateY(80px);
   transform: translateY(80px);
   opacity: 0;
   -webkit-transition: 0.8s;
   transition: 0.8s;
}
.animation-scrollUpY.is-animated {
   -webkit-transform: translateY(0);
   transform: translateY(0);
   opacity: 1;
}
.animation-scrollUpX {
   -webkit-transform: translateX(100px);
   transform: translateX(100px);
   opacity: 0;
   -webkit-transition: 0.8s;
   transition: 0.8s;
}
.animation-scrollUpX.is-animated {
   -webkit-transform: translateX(0);
   transform: translateX(0);
   opacity: 1;
}
.animation-scrollUpX2 {
   -webkit-transform: translateX(50vw);
   transform: translateX(50vw);
   opacity: 0;
   -webkit-transition: 1.2s;
   transition: 1.2s;
}
.animation-scrollUpX2.is-animated {
   -webkit-transform: translateX(0);
   transform: translateX(0);
   opacity: 1;
}

.animation-scrollUpY3 {
   -webkit-transform: translateY(20vw);
   transform: translateY(20vw);
   opacity: 0;
   -webkit-transition: 2s;
   transition: 2s;
}
.animation-scrollUpY3.is-animated {
   -webkit-transform: translateX(0);
   transform: translateX(0);
   opacity: 1;
}

.animation-zoomin1 {
   -webkit-transform: rotateX(-60deg);
   transform: rotateX(-60deg);
   opacity: 0;
   -webkit-transition: 1.8s;
   transition: 1.8s;
}
.animation-zoomin1.is-animated {
   -webkit-transform: rotateX(0deg);
   transform: rotateX(0deg);
   opacity: 1;
}

/*<<<<<<<<<<<<<<<<<<<<<< << over 640px Base Layout  =================*/
@media screen and (min-width: 640px){

body{
   font-size: 16px;
}
}



/*<<<<<<<<<<<<<<<<<<<<<<<< Grid system  ========================*/
.container2-0{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
   box-sizing:border-box;
}
.container2-gg5{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
   grid-gap: 5vw;
   padding: 0 5vw;
   box-sizing:border-box;
}
.container3-0{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
   box-sizing:border-box;
}
.container4-0{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
   box-sizing:border-box;
}
.container4-gg1{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
   grid-gap: 1vw;
   margin: 0 10vw;
   box-sizing:border-box;
}
.container4-gg5{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
   grid-gap: 5vw;
   box-sizing:border-box;
}

.container6-0{
	display: grid;
	grid-template-columns: repeat(6, 1fr);
   box-sizing:border-box;
}
.container6-gg5{
	display: grid;
	grid-template-columns: repeat(6, 1fr);
   grid-gap: 5vw;
   padding: 0 5vw;
   box-sizing:border-box;
}
.c-1{
   grid-column: span 2;
   overflow: hidden;
   box-sizing:border-box;
}
.c-1-black{
   grid-column: span 2;
   overflow: hidden;
   box-sizing:border-box;
   margin: 5vw 0;
   padding: 1vw;
   background-color: #000000;
}
.c-1-black-p0{
   grid-column: span 2;
   overflow: hidden;
   box-sizing:border-box;
   margin: 5vw 0;
   background-color: #000000;
}
.c-1-gnav{
   grid-column: span 1;
   overflow: hidden;
   box-sizing:border-box;
}
.c-2{
   grid-column: span 3;
   overflow: hidden;
   box-sizing:border-box;
}
.c-2-black{
   grid-column: span 2;
   overflow: hidden;
   box-sizing:border-box;
   margin: 5vw 0;
   padding: 1vw;
   background-color: #000000;
}
.c-3{
   grid-column: span 3;
   overflow: hidden;
   box-sizing:border-box;
}
.c-4{
   grid-column: span 4;
   overflow: hidden;
   box-sizing:border-box;
}

.c-6{
   grid-column: span 6;
   overflow: hidden;
   box-sizing:border-box;
}
.c-6-same{
   grid-column: span 6;
   overflow: hidden;
   box-sizing:border-box;
}

/*<<<<<<<<<<<<<<<<<<<<<<<< over 640px Grid system  ========================*/
@media screen and (min-width: 640px){
   .c-1{
      grid-column: span 1;
      overflow: hidden;
   }
   .c-1-black{
      grid-column: span 1;
      overflow: hidden;
      padding: 2vw;
      background-color: #000000;
   }
   .c-1-black-p0{
      grid-column: span 1;
      overflow: hidden;
      background-color: #000000;
   }
   .c-2{
      grid-column: span 2;
      overflow: hidden;
   }

   .c-3{
      grid-column: span 3;
      overflow: hidden;
   }

   .c-6{
      grid-column: span 2;
      overflow: hidden;
   }
   .c-6-same{
      grid-column: span 6;
      overflow: hidden;
   }
}
/*<<<<<<<<<<<<<<<<<<<<<< << END 640px Grid system  =============*/
/*=======================  END  Base Layout =======================*/


/*<<<<<<<<<<<<<<<<<<<<<<<< palalax000 =======================*/

.parallax000 {
   position: relative;
   height: auto; 
   min-height: 100vh;
   background-attachment: fixed;
   background-position: center;
   background-size: cover;
   background-repeat: no-repeat;
   z-index: +1;
}

.parallax070 {
   position: relative;
   height: auto; 
   min-height: 70vh;
   background-attachment: fixed;
   background-position: center;
   background-size: cover;
   background-repeat: no-repeat;
   z-index: +1;
}
.parallax050 {
   position: relative;
   height: 50vh;
   background-attachment: fixed;
   background-position: center;
   background-size: cover;
   background-repeat: no-repeat;
   z-index: +1;
}
.parallax030 {
   position: relative;
   height: 30vh;
   background-attachment: fixed;
   background-position: center;
   background-size: cover;
   background-repeat: no-repeat;
   z-index: +1;
}

.parallax000-white {
   background-color: rgb(255, 255, 255);
   color: rgb(0, 0, 0);
   padding: 8vw 10vw;
   font-size: 1.3em;
}
.parallax000-white a {
   color: #000;
}
.parallax000-black {
   background-color: rgb(0, 0, 0);
   color: rgb(255, 255, 255);
   padding: 8vw 10vw;
   font-size: 1.3em;
}
.parallax000-black-p5 {
   background-color: rgb(0, 0, 0);
   color: rgb(255, 255, 255);
   padding: 5vw;
   font-size: 0.9em;
}
.parallax000-1 {
   background-image: url('img/img_top01.JPG');
   padding: 8vw 10vw;
   font-size: 1.3em;
}
.parallax000-2 {
   background-image: url('img/img_top02.JPG');
}
.parallax000-3 {
   background-image: url('img/img_top03.JPG');
}
.parallax000-4 {
   background-image: url('img/img_top04.png');
}
.parallax000-5 {
   background-image: url('img/img_top05.JPG');
}


/*   parallax000 コンテンツ areaのクラス指定   */
.headline01 {
   position: relative;
   padding: 0 10vw;
   z-index: +2;
   height: 25vh;
   background: rgb(255, 255, 255);
   color:  rgb(0, 0, 0);
   border-top: solid 3px #ffa500;
	border-bottom: solid 3px #ffa500;
   font-size: 4em;
   letter-spacing: 1.1vw;
}

.bg_toumei {
   position: relative;
   z-index: +2;
   height: 120vh;
   background-color: black(0,0,0,0);
   font-size: 4em;
   text-align : center;
}
.bg_black {
   position: relative;
   z-index: +2;
   height: auto;
   max-width: 100%;
   background: rgb(0, 0, 0);
   color: rgb(255, 255, 255);
   font-size: 1.3em;
}

.bg_white {
   position: relative;
   z-index: +2;
   height: auto;
   max-width: 100%;
   background: rgb(255, 255, 255);
   color: rgb(0, 0, 0);
   border-top: solid 3px #ffa500;
	border-bottom: solid 3px #ffa500;
   padding: 8vw 10vw;
   font-size: 1.3em;
}



/*<<<<<<<<<<<<<<<<<<<<<<<< over 640px Grid system  ========================*/
@media screen and (min-width: 640px){
   .parallax000-1 {
      background-image: url('img/img_top01.JPG');
   }
     .headline01 {
      font-size: 6em;
      height:30vh;
      line-height: 30vh;
      letter-spacing: 1.5vw;
   } 
}



/*================  スマホ対策　=================*/
@media screen and (max-width: 736px) {
	.parallax000 {
		background-size: cover;
		background-attachment: scroll;
	}
}


/*<<<<<<<<<<<<<<<<<<<<<<<< END palalax000 =======================*/




/*================  Header=================*/

#gototop{
   width: 10vh;
   height: 4vh;
   font-size: 1em;
   font-weight: bold;
   border-radius: 3px;
   padding: 0px;
   text-align: center;
   background-color: rgb(255, 128, 0);
   color: rgb(255, 255, 255);
   max-width: 150px;
   max-height: 60px;
   position: fixed;
   left: 10px;
   bottom: 15px;
   z-index: +10;
}

#gototop:hover{
   background-color: lightseagreen;
   animation: rumble01 0.2s linear infinite;
}

/*<< 震えるアニメーション */
@keyframes rumble01{
	0%	{transform:rotate(0deg)	translate(0,0);}
	12.5%	{transform:rotate(0.4deg)	translate(2px,-2px);}
	25%	{transform:rotate(0.8deg)	translate(0px,2px);}
	37.5%	{transform:rotate(0.4deg)	translate(-2px,0);}
	50%	{transform:rotate(0deg)	translate(0,0);}
	62.5%	{transform:rotate(-0.4deg)	translate(2px,0);}
	75%	{transform:rotate(-0.8deg)	translate(0,2px);}
	87.5%	{transform:rotate(-0.4deg)	translate(-2px,-2px);}
	100%	{transform:rotate(0deg)	translate(0,0);}
}



/*<<<<<<<<<<<<<<<<<<<<<< << 640px  header  =================*/
@media screen and (min-width: 640px){

   #gototop{
   width: 20vw;
   height: 4vh;
   max-width: 250px;
   max-height: 60px;
   }

}
/*================END  Header=================*/



/*====================  nav  ====================*/

/*====================  nav  ====================*/
#gnav{
	position: fixed;
	top: 0;
	z-index: +10;
	background: rgb(255, 255, 255,0);
	width: 100%;
	height: 10vh;
   line-height: 0.8em;
}

#gnav li{
   padding: 1vw;
   font-size: 1.1em;
}

#gnav a{
	color: rgb(255, 255, 255);
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   -webkit-transition: all .3s;
   transition: all .3s;
}

#gnav a:hover{
   color: lightseagreen;
   letter-spacing: 6px;
}

/*<<<<<<<<<<<<<<<<<<<<<< << 640px  nav  =================*/
@media screen and (min-width: 640px){

   #gnav{
      height: 8vh;
   }
   #gnav li{
      padding-top: 3vh;
      padding-right: 0.5vh;
      padding-left: 2vh;
   }
}
/*<<<<<<<<<<<<<<<<<<<<<< << END 640px  nav  =================*/
/*====================  END  nav  =================*/





/*+++++++++++++++++ top画像のアニメーション 固定のアニメーション　=================*/
.rat{
   position: absolute;
   bottom: 20vh;
   left: 5vw;
   width: 15vw;
   z-index: +20;
   animation: updown 3s .2s ease-out infinite alternate;
 }



 @keyframes updown{
   0%{
     transform: translateY(0);
   }
   100%{
     transform: translateY(8vh);
   }
 }

 @keyframes rightleft{
   0%{
     transform: translateX(0);
   }
   100%{
     transform: translateX(8vh);
   }
 }

 @keyframes yurayura {
   0% , 100%{
       transform: rotate(10deg);
   }
   50%{
       transform: rotate(-10deg);
   }
  }
 
/*<<<<<<<<<<<<<<<<<<<<<< << 640px  menu  =================*/
@media screen and (min-width: 640px){
   .rat{
      bottom: 8vh;
      left: 5vw;
      width: 10vw;
    } 
}
/*====================  END anime  =================*/






/*++++++++++++++++++++++ home main=================*/

/* opning logo*/

.fadeinbg{
   width: 60vw;
   height: 85vh;
   position: fixed;
   z-index: +5;
   top: 15vh;
   right: 0;
   background-color: black;
   opacity: 0.8;
   animation-name: fadein01;
   animation-duration: 5s;
   animation-iteration-count: none;
}

.fadein{
   animation-name: fadein02;
   animation-duration: 4s;
   animation-iteration-count: none;
   font-size: 3em;
   line-height: 1.2em;
   z-index: +6;
}

#logotop{
   width: 14vw;
   height: 14vw;
   animation-name: fadein02;
   animation-duration: 4s;
   animation-iteration-count: none;

   bottom: 15vh;
   right: 20vh;
   position: fixed;
   z-index: +7;
}


@keyframes fadein01 {
from {
   opacity: 0;
   transform: translateY(80px);
}
to {
   opacity: 0.8;
   transform: translateY(0);
}
}

@keyframes fadein02 {
   from {
      opacity: 0;
      transform: translateY(80px);
   }
   to {
      opacity: 1;
      transform: translateY(0);
   }
   }

#ikuo{
   max-width: 60%;
}





/*<<<<<<<<<<<<<<<<<<<<<< << 640px   =================*/
@media screen and (min-width: 640px){
   .fadeinbg{
      width: 40vw;
   }
   .fadein{
      font-size: 4em;
   }
   .fadein{
      animation-name: fadein02;
      animation-duration: 4s;
      animation-iteration-count: none;
      font-size: 3em;
      line-height: 1.2em;
      margin: 6vh 0 0 18vw;
      z-index: +6;
   }
   #logotop{
      width: 10vw;
      height: 10vw;
      animation-name: fadein02;
      animation-duration: 4s;
      animation-iteration-count: none;
      bottom: 5vh;
      right: 55vh;
      position: fixed;
      z-index: +7;
   }
}
/*<<<<<<<<<<<<<<<<<<<<<< << END 640px    =================*/






/*====================  Map  =================*/

#map{
   width: 95vw;
   max-width: 100vw;
   height:70vh;
}