@charset "utf-8";

/*========= Loading ===============*/

/* Loading背景画面設定　*/
#splash {
    /*fixedで全面に固定*/
	position: fixed;
	width: 100vw;/*%*/
	height: 100vh;/*%*/
	z-index: 999;
	background:#0080c7;/*#099ad2*/
	text-align:center;
	color:#fff;
}

/* Loading画像中央配置　*/
#splash_logo {
	position: absolute;
	top: 50%;/*%*/
	left: 50%;/*%*/
	transform: translate(-50%, -50%);
}

/* Loading アイコンの大きさ設定　*/
#splash_logo img {
	width:500px;/**/
}
@media screen and (max-width:768px) {
  #splash_logo img {
	width:200px;/*50vw*/}
}


/* fadeUpをするアイコンの動き */

.fadeUp{
animation-name: fadeUpAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;

}

@keyframes fadeUpAnime{
  from {
    
	transform: translateY(100px);
  }

  to {
    opacity: 1;
	transform: translateY(0);
  }
}



/*========= レイアウト ===============*/

#container{
    width:100%; 
    height: 100vh;
    /*background: #ccc;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;*/
}


#main{
    width:70%; /*80%*/
    margin:auto; 
}
  @media screen and (max-width:1400px) { /*1400,768*/
   #main{
    width:100%; 
    margin:0; }
}


/*========= 現在地表示 ===============*/

#header{
  position: fixed;/*header固定*/
  height: 70px;/*Headerの高さ設定*/
  width:100%; 
  display: flex;
  justify-content: space-between;
  align-items: center;
  background:#0080c7; /* #333 */
  color:#fff;
  text-align: center;
  padding: 20px;
  z-index:10;/*追加*/
}
@media screen and (max-width:768px) {
#header{
  padding: 10px;
  font-size:0.8rem;}
}
@media screen and (max-width:600px) {
#header{
  font-size:0.7rem;}
}








/*========= レイアウト ===============*/

h1{
  font-size:1.2rem;
}

h2{
  /*font-size:3.2rem;*/
  text-align: center;
  margin: 0 0 30px 0;
  /*color:#333;	  
	text-decoration:underline;*/
}

h2.h2txt{
  font-size:3.2rem;
}



/*section h2 img  {
	width:40vw;}*/

#message h2 img {width:16vw;}/*20 25　ごあいさつ*/
#history h2 img {width:7vw;}/*7 10　沿革*/
#vision  h2 img {width:12vw;}/*14 18　ビジョン*/
#archive h2 img {width:16vw;}/*18 23　アーカイブ*/

@media screen and (max-width:768px) {
#message h2 img {width:32vw;}/*20 25　ごあいさつ*/
#history h2 img {width:14vw;}/*7 10　沿革*/
#vision  h2 img {width:24vw;}/*14 18　ビジョン*/
#archive h2 img {width:32vw;}/*18 23　アーカイブ*/
}




div.history-year{
  margin: 30px 0 0 0;
}
span.year{
  font-size:3.0rem;/*6.0*/
  color:#666;
  margin: 0;
}

h3{
  font-size:2.7rem;
  margin: 0;
  color:#0080c7;
}
@media screen and (max-width:768px) {
h3{
  font-size:1.9rem;
  margin: 0;
  color:#0080c7;}
}

h3.h-vision, h3.h-archive{
  font-size:2.2rem;
  /*text-align: center;*/
	  color:#666;
}
@media screen and (max-width:768px) {
h3.h-vision, h3.h-archive{
  font-size:1.5rem;/*1.7*/
  /*text-align: center;*/}
}

h4{
  font-size:1.8rem;
  margin: 0;
  color:#0080c7;
}

h4.title{
  font-size:1.8rem;
  margin: 10px 0 0 0 ;
  color:#0080c7;
}
@media screen and (max-width:768px) {
h4.title{
  font-size:1.5rem;
  margin: 5px 0 0 0 ;}
}



h5{
  font-size:1.2rem;/**/
  margin: 0 ;
}


p{
  margin:0;  
}


.mt10 {margin-top:   10px;}
.mb10 {margin-bottom:10px;}
.ml10 {margin-left:  10px;}
.mr10 {margin-right: 10px;}

.mt20 {margin-top:   20px;}
.mb20 {margin-bottom:20px;}
.ml20 {margin-left:  20px;}
.mr20 {margin-right: 20px;}

.mt30 {margin-top:   30px;}
.mb30 {margin-bottom:30px;}
.ml30 {margin-left:  30px;}
.mr30 {margin-right: 30px;}

.mt50 {margin-top:   50px;}
.mb50 {margin-bottom:50px;}
.ml50 {margin-left:  50px;}
.mr50 {margin-right: 50px;}



/*footer*/
small{
  background:#0080c7;/*#333*/
  color:#fff;
  display: block;
  text-align: center;
  padding:20px;
}



/*header*/
#header img.logojae{
  width:100px;/*200*/
	vertical-align: middle;
}
@media screen and (max-width:768px) {
#header img.logojae{
  width:80px;}/*80*/
}
@media screen and (max-width:600px) {
#header img.logojae{
  width:40px;}/*80*/
}


#header img.logo70th{
  width:45px;/*200*/
	vertical-align: middle;
}
@media screen and (max-width:768px) {
#header img.logo70th{
  width:35px;}/**/	
}	
@media screen and (max-width:600px) {
#header img.logo70th{
  width:20px;}/**/	
}	
	
nav ul{
  list-style: none;
  display: flex;
  justify-content: center;
}

nav ul li a{
  display: block;
  text-decoration: none;
  color: #fff; /*#666*/
  padding:10px;
  transition:all 0.3s;
}

nav ul li.current a,
nav ul li a:hover{
  color:#fff; 
}
@media screen and (max-width:768px) {
  nav ul li a:hover{    
    color: #fff; /*#666*/
  }
  nav ul li.current a {
    color:#fff; 
  }
}

/*section{
  margin:0 0 50px 0;
  padding: 10px;
}*/

div.end{
 margin:0 0 100px 0; }
    @media screen and (max-width: 768px) {
      div.end {
        margin:0 0 50px 0; }
}

div.banner {
 width: 100%;
 text-align: center; 
}

div.banner img {
 width: 100%;
 margin: 100px auto 20px auto; }
  @media screen and (max-width:768px) {
   div.banner img { 
	   margin: 70px 0 20px 0; }
}

div.banner p {
 font-size:1.9rem;
	text-align: center;
 color:#666;
margin: 0 0 50px 0;}
  @media screen and (max-width:768px) {
   div.banner p { 
    font-size:1.5rem;
    /*text-align: left;*/
    margin: 0 0 50px 0;}
}

/* message：ご挨拶
   history：沿革
   vision ：ビジョン
   archive：会社紹介動画 */



/* message：ご挨拶 -------------------------------------------------*/

div.message {
 width: 50vw;/*50*/
 margin:auto; }
    @media screen and (max-width: 1000px){ /*767,1000*/
      div.message {
       width: 85vw;
       margin:auto; }
}
    @media screen and (max-width: 1400px){ /*767,1000*/
      div.message {
       width: 100vw;
       margin:auto; }
}
.b-message{
  display:flex; 
  width: 100%;
  height:auto;
  padding:10px;
}
 @media screen and (max-width:768px) { /*768*/
  .b-message{
   display:flex; 
   flex-direction:column; }
}

.b-message_item__pic {
  text-align: center;
  padding:15px 40px; } 
   @media screen and (max-width:768px) {
    .b-message_item__pic{
      text-align: center; }
}


   @media screen and (max-width:768px) {
    .b-message_item__pic img{
      width: 60vw; }
}



.b-message_item__text {
  text-align: left;
  line-height: 2.1;
  padding:15px 40px; } 
   @media screen and (max-width:768px) {
    .b-message_item__text {
       text-align: left; }
}

.b-message p.sign{
       text-align: right; 
}

.b-message p.sign img{
       width: 220px; 
}
   @media screen and (max-width:768px) {
.b-message p.sign img{
       width: 120px; }
}


/* history：沿革 -------------------------------------------------*/

#history{
    width:90%; /*80%*/
    margin:auto; 
}
  @media screen and (max-width:768px) { 
   #history{
    width:90%; /*100*/
    margin:0 auto 0 auto; }
}


#history p.slogan{
  text-align: center;
}
#history p.slogan img{
  width:450px;
}
  @media screen and (max-width:768px) { 
   #history p.slogan img{
     width:60vw;}
}
  @media screen and (max-width:560px) { 
   #history p.slogan img{
     width:70vw;}
}

/*しろ写真右*/
.b-history00{
  display:flex; 
  width: 100%;
  /*line-height: 2.1;*/}
 @media screen and (max-width:768px) {
  .b-history00{
   display:flex; 
   flex-direction:column;
   /*line-height: 1.5;*/ }
}

.b-history_item__text00 {
  text-align: left;
	line-height: 2.1;
} 
   @media screen and (max-width:768px) {
    .b-history_item__text00 {
       text-align: left;
	   line-height: 1.5;}
}

.b-history_item__pic00 {
  text-align: center;/*right*/
/*line-height: 1;*/} 
   @media screen and (max-width:768px) {
    .b-history_item__pic00 {
      text-align: center; }
}

.b-history_item__pic00 img {
	padding-left:10px;
	width:200px;/*280*/
}
.b-history_item__pic00 img.flight {
	padding-left:10px;
	width:180px;/*280*/
}
.b-history_item__pic00 span{
    font-size:0.8rem;
}


/*しろ 2023- 写真3*/
.b-history99{
  display:flex; 
  /*width: 90vw;*/
  justify-content:center;}
 @media screen and (max-width:768px) {
  .b-history99{ width: 90vw;}
}
.b-history_item__pic99 {
  text-align: center;/*right*/
/*line-height: 1;*/} 
   @media screen and (max-width:768px) {
    .b-history_item__pic99 {
      text-align: center; }
}

.b-history_item__pic99 img {
	padding-left:10px;
	width:200px;/*280*/}
   @media screen and (max-width:768px) {
    .b-history_item__pic99 img {
      	width:120px;/*280*/}
}


.b-history_item__pic99 span{
    font-size:0.8rem;
}

span.cap{
    font-size:0.8rem;
}


/* 画像左右 */
div.story{
  display:flex; 
	justify-content:center; 
}

.b-story01{
  display:flex; 
	/*justify-content:center;*/
  width: 80%;/*100*/
  line-height: 2.1;
  background-color: #eeeeee;
	  align-content: center; 
padding:10px;}
 @media screen and (max-width:768px) {
  .b-story01{
   display:flex; 
   flex-direction:column;
   line-height: 1.5; }
}

.b-story_item__pic01 {
  text-align: center;
  padding:10px;
  background-color: #eeeeee; } 
   @media screen and (max-width:768px) {
    .b-story_item__pic01 {
      text-align: center; }
}

.b-story_item__pic01 img.nu {
  width: 120px; 
	margin:0;
}
/*.b-story_item__pic01 img.ren {
  width: 230px;  
}
.b-story_item__pic01 img.shin {
  width: 230px;  
}*/

.b-story_item__pic01 img.h1roc {
  width: 130px;  /*150*/
}


.b-story_item__text01 {
  text-align: left; 
    font-size:0.95rem;
   line-height: 1.5;
padding:10px 0;} 
   @media screen and (max-width:768px) {
    .b-story_item__text01 {
       text-align: left; }
}

.b-story_item__pic012 {
  text-align: center;
  padding:10px;
  background-color: #eeeeee;} 
   @media screen and (max-width:768px) {
    .b-story_item__pic012 {
      text-align: center; }
}
.b-story_item__pic012 img {
  	vertical-align:middle;
	width: 200px;} 


/*画像２つ右側*/
.b-story02{
  display:flex; 
  width: 80%;/*100*/
	background-color: #eeeeee;
	padding:10px;
  /*line-height: 2.1;*/}/**/
 @media screen and (max-width:768px) {
  .b-story02{
   display:flex; 
   flex-direction:column;
   /*line-height: 1.5; */}
}

.b-story_item__text02 {
  text-align:left ;
    font-size:0.95rem;
   line-height: 1.5;
padding:10px 0;} 
   @media screen and (max-width:768px) {
    .b-story_item__text02 {
       text-align: left;
	   line-height: 1.5;}
}
.b-story_item__pic02{
      text-align: center; 
	padding:10px;
} 

.b-story_item__pic02a {
  display:flex; } 
   @media screen and (max-width:768px) {
    .b-story_item__pic02a {		
justify-content:center; }
}

.b-story_item__pic02a1 img {
	width:170px;/*180*/
	margin-left: 10px;
 } 
   @media screen and (max-width:768px) {
    .b-story_item__pic02a1 {
      text-align: center; }
}

.b-story_item__pic02a2 img {;
	width:190px;/*200*/
padding-left: 5px;}
   @media screen and (max-width:768px) {
    .b-story_item__pic2a2 {
      text-align: center; }
 }

.b-story_item__pic02 span{
    font-size:0.8rem;
}



/*入れ子*/
.b-story03{
  display:flex; 
  width: 80%;/*100*/
	background-color: #eeeeee;
	padding:10px;
	flex-direction:column;
  /*line-height: 2.1;*/}/**/
 @media screen and (max-width:768px) {
  .b-story03{
   display:flex; 
   flex-direction:column;
   /*line-height: 1.5; */}
}
.b-story_item__title03 {
  text-align:left ;
padding:10px 0 0 0;} 
   @media screen and (max-width:768px) {
    .b-story_item__title03 {
       text-align: left;}
}

.b-story_item__item03 {
     display:flex; 
   justify-content:center;} 
   @media screen and (max-width:768px) {
    .b-story_item__item03 {
		   flex-direction:column;
	   }
}
.b-story_item__text03 {
  text-align:left ;
    font-size:0.95rem;
   line-height: 1.5;
padding:10px 0;} 
   @media screen and (max-width:768px) {
    .b-story_item__text03 {
       text-align: left;
	   line-height: 1.5;}
}
.b-story_item__pic03{
      text-align: center; 
	padding:10px;
} 

.b-story_item__pic03a {
  display:flex; } 
   @media screen and (max-width:768px) {
    .b-story_item__pic03a {		
justify-content:center; }
}

.b-story_item__pic03a1 img {
	width:180px;
	margin-left: 10px;
 } 
   @media screen and (max-width:768px) {
    .b-story_item__pic03a1 {
      text-align: center; }
}

.b-story_item__pic03a2 img {;
	width:87px;/*120*/
padding-left: 5px;}
   @media screen and (max-width:768px) {
    .b-story_item__pic03a2 {
      text-align: center; }
 }

.b-story_item__pic03 span{
    font-size:0.8rem;
}







/*movie test中*/
.b-history_movie{
  display:flex; 
  width: 100%;}
 @media screen and (max-width:768px) {
  .b-history_movie{
   display:flex; 
   flex-direction:column; }
}
.b-history_movie_item {
  text-align: center; 
margin:10px;} 
   @media screen and (max-width:768px) {
    .b-history_movie_item {
       text-align: left; }
}
.b-history_movie_item img {
  width: 250px; } 
   @media screen and (max-width:768px) {
    .b-history_movie_item img {
 }
}


.b-history_movie2{
  display:flex; 
		justify-content:center; 
  width: 100%;
}
 @media screen and (max-width:768px) {
  .b-history_movie2{
   display:flex; 
   flex-direction:column; }
}

.b-history_movie2_item {
  text-align: center; 
margin:10px;
	 /* width: 45%;*/} 
   @media screen and (max-width:768px) {
    .b-history_movie2_item {
       text-align: left; }
}

.b-history_movie2_item img {
  width: 250px; } 
   @media screen and (max-width:768px) {
    .b-history_movie2_item img {
 }
}



.b-history_movie2{
  display:flex; 
  width: 100%;
  line-height: 2.1;
}
 @media screen and (max-width:768px) {
  .b-history_movie2{
   display:flex; 
   /*flex-direction:column;*/
   line-height: 1.5; }
}

.b-history_movie2_item {
  text-align: left; } 
   @media screen and (max-width:768px) {
    .b-history_movie2_item {
       text-align: left; }
}

/*movie test中*/



#history div.mori {
  text-align: center;
}

#history div.h_movie {
  text-align: center;
	  display:flex;
		justify-content:center;
}
   @media screen and (max-width:768px) {
    #history div.h_movie {
       	  display:flex;
		flex-wrap: wrap;
	   width:80%;
	     text-align: center;}
}

#history div.h_movie img {
	/*width:200px;*/
	padding:10px;
}



/* vision：ビジョン -------------------------------------------------*/

#vision{
    width:90%; /*80%*/
    margin:auto; 
}
  @media screen and (max-width:768px) { 
   #vision{
    width:90%; 
    margin:0 auto 0 auto; }
}

#vision div {
  text-align: center;
}


/* archive: アーカイブ -------------------------------------------------*/

#archive{
    width:90%; /*80%*/
    margin:auto; 
}
  @media screen and (max-width:768px) { 
   #archive{
    width:90%; 
    margin:0 auto 0 auto; }
}




/*SNS*/
div.snsArea {
  text-align: center;
  /*width: 50vw;*/
}
div.snsArea img {
 width: 50px;
 padding:0 5px 0 0;	
}

@media screen and (max-width: 767px) {
  div.snsArea {
  text-align: center;
  width: 90vw;
}
div.snsArea img {
 width: 25px;
 padding:0 0 0 0;}
}




@media screen and (min-width: 768px) {
  .is-pc {
    display: block; } }

@media screen and (max-width: 767px) {
  .is-pc {
    display: none; } }

@media screen and (min-width: 768px) {
  .is-sp {
    display: none; } }

/*-------------------------------------------*/
/*utility---------------------------------*/
/*-------------------------------------------*/
/*layout---------------------------------*/
/*.l-footer {
  margin: 13rem 0 0 0; }
  @media screen and (max-width: 767px) {
    .l-footer {
      margin: 27rem 0 0 0; } }

.l-wrap {
  position: relative;
  width: 100vw;
  padding: 0 0 3rem 0;
  overflow: hidden; }
  @media screen and (max-width: 767px) {
    .l-wrap {
      padding: 0 0 5rem 0; } }*/



/*component---------------------------------*/

/*.vision-movie img{
    width: 65vw;
}*/
    @media screen and (max-width: 767px) {
      .vision-movie img {
        width: 90vw; }
}

/* 708 x 399 px */
.c-movie {
  position: relative; }
  .c-movie__thumbnail {
    display: block;
    z-index: -1;/*追加*/ }

/*.c-movie__thumbnail img {
    width: 700px; }
    @media screen and (max-width: 767px) {
      .c-movie__thumbnail img {
        width: 90vw;} 
}*/


 /* .p-vision__play {
    position: absolute;
    top: 36%;
    right: 42%;
    width: 11vw; }
    @media screen and (max-width: 767px) {
      .p-vision__play {
        width: 17vw; } }*/




.c-movie__play {
    position: absolute;
    top: 30%; /*32*/
    left: 45%; /*50*/
    width: 8vw;
    /*transform: translate(-50%, 0); */}
    @media screen and (max-width: 767px) {
      .c-movie__play {
        top: 30%;/*30*/
        left: 40%;/*40*/
        width: 8vw;/*18*/ } }



.modal-video {
  background-color: rgba(0, 0, 0, 0.78) !important; }
  @media screen and (max-width: 767px) {
    .modal-video {
      background-color: rgba(0, 0, 0, 0.8) !important; } }


/*--------------------------------------映像追加------*/
/*1961- 1973年ビデオ w300 (森)*/
.c-movie2 {
  position: relative; }
  .c-movie2__thumbnail {
    display: block;
    z-index: -1;/*追加*/ }
  .c-movie2__play {
    position: absolute;
    top: 27%;/*32*/
    left:46.5%;/*50*/
    width:4.5vw;/*8vw*/
    /*transform: translate(-50%, 0); */}
    @media screen and (max-width: 767px) {
      .c-movie2__play {
        top: 30%;
        left: 45%;/*50*/
        width: 9vw; } }/*18*/

/*1977年、200w x4 */
.c-movie3 {
  position: relative; }
  .c-movie3__thumbnail {
    display: block;
    z-index: -1;/*追加*/ }
  .c-movie3__play {
    position: absolute;
    top: 22%;/*32*/
    left:32%;/*50*/
    width:4vw;/*5vw*/
    /*transform: translate(-50%, 0); */}
    @media screen and (max-width: 767px) {
      .c-movie3__play {
        top: 24%;
        left: 35%;
        width: 9vw; } }/*18*/


/*==================================================
スライダー
===================================*/
div .slider {
	height:200px;
    margin:10px auto 30px auto;
}

.slider {/*横幅94%で左右に余白を持たせて中央寄せ*/
   width:90%;
    margin:0 auto;
}


.slider img {
    width:100%;/*300px スライダー内の画像を横幅100%に*/
    height:auto;/*169px auto*/
}
/*
.slider img.koukoku {
    width:300px;
    height:182px;auto
}*/


/*slickのJSで書かれるタグ内、スライド左右の余白調整*/

.slider .slick-slide {
    margin:0 10px;
}

/*矢印の設定*/

/*戻る、次へ矢印の位置*/
.slick-prev, 
.slick-next {
    position: absolute;/*絶対配置にする*/
    top: 42%;
    cursor: pointer;/*マウスカーソルを指マークに*/
    outline: none;/*クリックをしたら出てくる枠線を消す*/
    border-top: 2px solid #666;/*矢印の色*/
    border-right: 2px solid #666;/*矢印の色*/
    height: 15px;
    width: 15px;
}

.slick-prev {/*戻る矢印の位置と形状*/
    left: -1.5%;
    transform: rotate(-135deg);
}

.slick-next {/*次へ矢印の位置と形状*/
    right: -1.5%;
    transform: rotate(45deg);
}

/*ドットナビゲーションの設定*/

.slick-dots {
    text-align:center;
	margin:20px 0 0 0;
}

.slick-dots li {
    display:inline-block;
	margin:0 5px;
}

.slick-dots button {
    color: transparent;
    outline: none;
    width:8px;/*ドットボタンのサイズ*/
    height:8px;/*ドットボタンのサイズ*/
    display:block;
    border-radius:50%;
    background:#ccc;/*ドットボタンの色*/
}

.slick-dots .slick-active button{
    background:#333;/*ドットボタンの現在地表示の色*/
}

/*
.slider img{
  height: 169px;133 30vw 30%
width: 300px;236
  max-height: 400px;
  min-height: 350px;
}*/
 
/*english*/
#english 
h2{
  font-size:2.8rem;/*3.2*/
}

.b-message p.sign img{
       width: 260px; /*220*/
}
   @media screen and (max-width:768px) {
.b-message p.sign img{
       width: 200px; }/*120*/
}

span.cap{
  line-height: 1.2;
}




/*chinese*/
#chinese 
h2{
  font-size:3.2rem;
}