@charset "utf-8";

html {
  width: 100%;
  height:100%;
  padding: 0px;
  margin: 0px;
}

body {
  font-size: 14px;

/*###  font-size: 16px;###*/
  width: 100%;
  height:100%;
  padding: 0px;
  margin: 0px;
  background-color: #000000;
  background-attachment: fixed; 
  line-height: 2.0;
  font-family:"Roboto Slab", Garamond, "Times New Roman", "游明朝", "Yu Mincho", "游明朝体", "YuMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "HiraMinProN-W3", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
  letter-spacing: 0.5pt;
  color: black;
  text-align: justify;
  text-justify: inter-ideograph;
}

#masterwrapper {
  max-width: 560px;

/*###  max-width: 850px;###*/
  margin: 0 auto;
  text-align: justify;
  text-justify: inter-ideograph;
}
/*========== Video ==========*/
/* Disable Video border on iPad*/
video {
    filter: drop-shadow(0px 0px #000);
}

#video-area{
    position: fixed;
    z-index: -1000;
    top: 0;
    right:0;
    left:0;
    bottom:0;
    overflow: hidden;
    width: 100%;
    height: 100%;
}

#video {
    position: absolute;
    z-index: -1000;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 177.77777778vh;
    height: 56.25vw;
    width: 100%;
    height: 100%;
    min-height: 100%;
    min-width: 100%;
}
/*========== Arrow ==========*/
.scrolldown4{
/*位置*/
  position:absolute;
  bottom:20px;
  right:40px;
/*動作*/
  animation: arrowmove 1s ease-in-out 4;
}
@keyframes arrowmove{
  0%{bottom:20px;}
  50%{bottom:3%;}
 100%{bottom:20px;}
 }
/*テキスト*/
.scrolldown4 span{
/*位置*/
  position: absolute;
  left:-20px;
  bottom:10px;
/*形状*/
  color: #a0d8ef;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  -ms-writing-mode: tb-rl;
  -webkit-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
}
/*矢印*/
.scrolldown4:before {
  content: "";
/*位置*/
  position: absolute;
  bottom: 0;
  right: -6px;
/*形状*/
  width: 1px;
  height: 20px;
  background: #a0d8ef;
  transform: skewX(-31deg);
}

.scrolldown4:after{
  content:"";
/*位置*/
  position: absolute;
  bottom:0;
  right:0;
/*形状*/
  width:1px;
  height: 50px;
  background:#a0d8ef;
}

/*========= Main Contents ===============*/
#topheader{
  width:100%;
  height: 100vh;
  position: relative;
} 

#topheader:before{
  content: '';
  position:fixed;
  top:0;
  left:0;
  z-index:0;
  width:100%;
  height: 100vh;
/*背景*/
  background:url("") no-repeat center;
  background-size:cover;
}

@media screen and (max-width:768px){
  #topheader,
  #topheader:before{
    height: 90vh;
  }
}

/*========== スライドヘッダー ==========*/
#headerbanner{
display: none;

/*###
  position: fixed;
  height: 80px;
  width:100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background:#1D315E;
  opacity:0;
  color:#fff;
  text-align: center;
  padding: 20px;
  z-index:100;
###*/
}

/*###
#headerbanner.UpMove{
  animation: UpAnime 0.5s forwards;
}

@keyframes UpAnime{
  from {
    opacity: 1;
  transform: translateY(0);
  }
  to {
    opacity: 0;
  transform: translateY(-100px);
  }
}
###*/

/*========== メニュー ==========*/
#g-nav.panelactive{
  position:fixed;
  z-index: 999;
  top: 0;
  width:100%;
  height: 100vh;
}

.circle-bg{
  position: fixed;
  z-index:998;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: rgb(0, 123, 187, 0.97);
  transform: scale(0);  right:-50px;
  top:-50px;
  transition: all .3s;/*Duration*/
}

.circle-bg.circleactive{
  transform: scale(50);
}

#g-nav-list{
  display: none;
  position: fixed;
  z-index: 999; 
  width: 100%;
  height: 100vh;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

#g-nav.panelactive #g-nav-list{
     display: block;
}

#g-nav ul {
  opacity: 0;
  position: absolute;
  z-index: 999;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
}

#g-nav.panelactive ul {
  opacity:1;
}

#g-nav.panelactive ul li{
  animation-name:gnaviAnime;
  animation-duration:1s;
  animation-delay:.2s;/*Delay*/
  animation-fill-mode:forwards;
  opacity:0;
}
@keyframes gnaviAnime{
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

#g-nav li{
  padding: 10px;
  font-size: 14px;

/*###
  padding:20px;
  font-size: 16px;
###*/
  text-align: center; 
  list-style: none;
  font-weight: bold;
  letter-spacing: 0.1em;
}

#g-nav li a{
  color: #a0d8ef;
  text-decoration: none;
  display: block;
}

.hovact a:hover {
  color: #ffffff !important;
}

.hovact a:active {
  color: #ffffff !important;
}

li.herenow a {
  color: #fff !important; /*現在地color*/
}

li.notyet {
  color: #274a78; /*メニュー準備中color*/
  list-style: none;
}

/*========== メニューボタン ==========*/
.openbtn1{
  top: 3px;
  right: 0px;

/*###
  top:13px;
  right: 10px;
###*/
  width: 50px;
  height:50px;
  position:fixed;
  z-index: 1000;
  cursor: pointer;
}

.openbtn1 span{
  display: inline-block;
  transition: all .4s;
  position: absolute;
  left: 14px;
  height: 3px;
  border-radius: 2px;
  background-color: #a0d8ef;
  width: 45%;
}

.openbtn1 span:nth-of-type(1) {
  top:15px; 
}
.openbtn1 span:nth-of-type(2) {
  top:23px;
}
.openbtn1 span:nth-of-type(3) {
  top:31px;
}
.openbtn1.active span:nth-of-type(1) {
  top: 18px;
  left: 18px;
  transform: translateY(6px) rotate(-45deg);
  width: 30%;
  background-color: #a0d8ef;
}
.openbtn1.active span:nth-of-type(2) {
  opacity: 0;
}
.openbtn1.active span:nth-of-type(3){
  top: 30px;
  left: 18px;
  transform: translateY(-6px) rotate(45deg);
  width: 30%;
  background-color: #a0d8ef;
}

/*========== Logo ==========*/
img#topbannerlogo { /*### 追加 ###*/
width: 240px;
}

.logobox {
display: none;

/*###
  position: fixed;
  top: 15px;
  left: 60px;
  z-index: 101;
  opacity: 0;
###*/
}

/*========== JP/EN ==========*/
.text_box_top_right {
  top: 15px;
  right: 45px;
  font-size: 12px;

/*###
  top: 20px;
  right: 70px;
 ###*/
  position: fixed;
  z-index:101;
}

.lang_box li {
  display: inline-block;
  color: #a0d8ef !important;
}

.lang_link {
margin: 0 10px 0 0;

/*###
  margin: .15em;
  display: block;
  width: 30px;
  height: 30px;
  line-height: 30px;
  border-radius: 50%;
  text-align: center;
  position: relative;
  font-size: 1.0rem;
###*/
  text-decoration: none;
}

/*========== SNSアイコン ==========*/
/* Link Color */
a:link { color: #a0d8ef; }
a:visited { color: #a0d8ef; }
a:hover { color: #007bbb; }
a:active { color: #a0d8ef; }

.text_box_bottom_left {
bottom: 15px;
left: 5px;

/*###
  bottom: 30px;
  left: 30px;
###*/
  position: fixed;
  z-index:101;
}

.sns_box li {
  display: inline-block;
}

.sns_link {
margin: 0px;

/*###  margin: .15em;###*/
  display: block;
  width: 30px;
  height: 30px;
  line-height: 30px;
  border-radius: 50%;
  text-align: center;
  position: relative;
  font-size: 1.0rem;
  background: rgba(39, 74, 120, 0);
  transition: transform ease-out 0.2s;
  color: #a0d8ef !important;
}

/*========== Twitter ==========*/
.fab.fa-twitter {
  display: inline-block;
}

.icon_twitter::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  transform: scale(1);
  opacity: 0 !iportant;
}

.icon_twitter:hover {
  background: #00b0ed;
  transform: scale(1.1);
  color: #fff !important;
}

/*========== Instagram ==========*/
.fab.fa-instagram {
  display: inline-block;
}

.icon_instagram::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  transform: scale(1);
}

.icon_instagram:hover {
  background: radial-gradient(
    circle farthest-corner at 32% 106%,
    rgb(255, 225, 125) 0%,
    rgb(255, 205, 105) 10%,
    rgb(250, 145, 55) 28%,
    rgb(235, 65, 65) 42%,
    transparent 82%
    ),
  linear-gradient(135deg, rgb(35, 75, 215) 12%, rgb(195, 60, 190) 58%);
  transform: scale(1.1);
  color: #fff !important;
}

/*========== トップボタン ==========*/
#re-top {
bottom: 10px;
right: 10px;

/*###
  bottom:45px;
  right:30px;
###*/
  display: none ;
  position:fixed;
  z-index:101;
  background:transparent
  transform: scale(1);
}

#re-top:hover #re-topButton {
  background: #007bbb; /*トップボタンhover color*/
  color: #ffffff !important;
  transform: scale(1.1);
}

#re-top:active #re-topButton {
  background: #a0d8ef; /*トップボタンactive color*/
  color: #ffffff !important;
  transform: scale(1);
}

#re-topButton {
  background: rgb(38, 72, 117, 0.97); /*トップボタン color*/

/*###  background: rgb(17, 53, 99, 0.97); ###*/
  display:block; 
  color: #a0d8ef !important;
  position:relative;
  opacity: 100%;
  text-decoration:none;
  font-weight:bold;
  font-size:12px;
  font-family:"Arial", "Avenir", "YuGothic", "Yu Gothic","游ゴシック","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ","Meiryo",sans-serif !important;
  width:40px;
  height:40px;
  border-radius: 50%;
  text-align:center;
  line-height:24px;
  padding-top:30px;
  box-sizing:border-box;
}

#re-topButton:before {
  content:'\02227';
  position:absolute;
  top:50%;
  transform: scale(2, 1) translate(0, -50%);
  left:0;
  width:100%;
  text-align:center;
  font-size:20px;
}

/*========= フッター ===============*/
#article {
	margin-bottom: 0px;
}

#footer {
	overflow: hidden;
	position: fixed;
	margin: 0;
	padding: 0;
	width: 100%;
	bottom: 0;
	z-index: -10; <!-- important in accordance with pagenation -->
}

#slidebar {
	height: 200px;

/*###
	height: 400px;
	background-image: url(mt.png);
###*/
	background: #113565;
	color: #fff;
	width: 100%;
	background-repeat: no-repeat center bottom;
	background-size: cover;
	background-image: url(mt_s.png);/* phone */
}


#slidebar-in {
	padding: 0px;
}

#footer a {
	color: #a0d8ef;
	text-decoration: none;
	cursor: pointer;
}

a.herenow {
  color: #fff !important; /*現在地color*/
}

div.notyet {
  color: #007bbb; /*メニュー準備中color*/
}

#footer a:hover {
  color: #ffffff !important;
}

#footer a:active {
  color: #ffffff !important;
}


#foottable {
	height: 180px;
	max-width: 560px;
	margin: 0;

/*###
	height: 360px;
	max-width: 850px;
	margin: 0 20px;
###*/
}

.footcell1 {
display: none;

/*###	width: 50%;
	height: auto;
	padding: 0 10px 30px 0;
	text-align: left;
	vertical-align: bottom;
###*/
}

.footcell2 {
	padding: 0 50px 0 0;
	text-align: right;

/*###
	padding: 0 0 50px 10px;
	text-align: right;
###*/
	width: 50%;
	height: auto;
	vertical-align: bottom;
	font-size: 13px;
	color: #a0d8ef;
}

#mountainslogo {
margin-bottom: 10px;

/*###margin-bottom: 20px;###*/
/*###margin-right: 20px; EN版のみ###*/
}

#copyright {
	color: #007bbb;
	font-size: 8px;/*phone版のみ*/
	text-align: center;
	vertical-align:bottom;
	height: 40px;
}
/*========= レイアウトのためのCSS ===============*/
#imgcontainer {
  position: relative;
  z-index: 0;
  color:#fff
}

#imgheader h1{
  color: #fff;
  font-size: 3rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -997;/*#header-imgよりも手前に配置*/
}

.maxwrapper {
  max-width: 560px;

/*###  max-width: 850px;###*/
  margin: 0 auto;
  text-align: justify;
  text-justify: inter-ideograph;
}

div.maintext { /*### EN版のみ追加 ###*/
text-align: justify !important;
text-justify: inter-ideograph !important;
}

img#tokinpic {/*### 追加 ###*/
width: 150px;

/*###width: 300px;###*/
}

p.tokin {
margin: 40px 0 0;

/*###  margin: 80px 0 0 0;###*/
  display: flex;
  justify-content: flex-end;
}

#fortopimg { /*### 追加 ###*/
height: 80px;
background: #000;
}

#forfooter{
  height: 400px;
  background:white;
  background:url("pause.jpg") no-repeat center;
  background-size: cover;
}

/*========= テキストアニメーション ===============*/
.eachTextAnime span{
font-size: 14px;
/*###font-size: 28px;###*/

opacity: 0;

text-shadow: #000 1.5px 1.5px 3px;
/*text-shadow: #000 2px 1px 4px;*/
}

.eachTextAnime.appeartext span{ animation:text_anime_on 1s ease-out forwards; }
@keyframes text_anime_on {
  0% {opacity:0;}
  100% {opacity:1;}
}

/*========= テキストアニメーション改行版 ===============*/

p.ta2 {
  font-size: 14px;
  text-align: left;


/*###
  text-align: center;
  font-size: 24px;
###*/
  margin: 0;
}

p.ta2s {
  font-size: 12px;

/*###  font-size: 18px;###*/
  text-align: right;
  margin: 0;
}


.ta2line {
  display: block;
}

.ta2lineEN {	/*EN版のみ*/
  margin: 0 0 14px; /*### phone版のみ追加 ###*/
  display: block;
}

.txtInner {
  animation-name: show;
  animation-duration: 1s;
  animation-fill-mode: backwards;
}

.txtInnerEN {	/*EN版のみ*/
  animation-name: show;
  animation-duration: 0.3s;
  animation-fill-mode: backwards;
}

@keyframes show {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/*========= ページネーション ===============*/
.boxcolor1{
  color: #000;
  padding: 40px;
  display:flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.boxcolor2{
  color: #fff;
  padding: 40px;
  display:flex;
  justify-content: center;
  align-items: center;
  text-align: justify;
  text-justify: inter-ideograph;
}

#box1{
  background:white;
  background:url("sayagata_new.gif");
}

#box2{
  background:white;
  background:url("top_unkai.jpg") no-repeat center;
  background-size: cover;
}

#box3{
  background:white;
  background:url("sanko.jpg") no-repeat center;
  background-size: cover;
}

#box4{
  background:white;
  background:url("top_tsukiyo.jpg") no-repeat center;
  background-size: cover;
}

#box5{
  background:white;
  background:url("rinpo.jpg") no-repeat center;
  background-size: cover;
}

.pagination {
  position:fixed;
  right:20px;
  top: 50%;
  transform: translateY(-50%);
  font-size:1em;
  z-index: 1;
  list-style: none;
}

/*========= WP埋め込みエリア ===============*/

p.upd_title {
font-size: 14px;
padding: 10px 0;

/*###
font-size: 28px;
padding: 40px 0;
###*/
color: #274a78 !important;
}

table#wpnews {
table-layout: fixed;
width: 100%;
}
.newsrow:hover .news_link {
color: #007bbb !important;
}

td.wpnewstitle {
font-size: 14px;
width: 70%;

/*###
font-size: 20px;
width: 50%;
###*/
text-align: left;
vertical-align: middle;
}

td.wpnewstitle a {
display: block;
text-decoration: none;
color: #000 !important;
padding: 0 0 0 0px;
}

td.wpnewsdate {
font-size: 12px;
sidth: 30%;

/*###
font-size: 18px;
width: 50%;
###*/
text-align: right;
vertical-align: middle;
}

td.wpnewsdate a {
display: block;
text-decoration: none;
color: #000 !important;
padding: 0 0px 0 0;
}

td.tableline {
height: 20px;
vertical-align: middle;
}

div.gradline {
  max-width: 560px;

/*###  max-width: 850px;###*/
  background-image: linear-gradient(to right, transparent, #274a78 50%, transparent);
  background-repeat: no-repeat;
  content: "";
  height: 1px;
  left: 0;
  margin-inline: auto;
  position: absolute;
  right: 0;
  width: 100%;
}

.news_go {
	float: right;
	position: relative;
	padding: 40px 0 0;
}

.news_btn {
	font-size:14px;
	width: 100px;

/*###
	font-size: 1rem;*/
	width:150px;
###*/
	font-family:"Arial", "Avenir", "YuGothic", "Yu Gothic", "Meiryo",sans-serif !important;
	font-weight: 500;
	line-height: 1;
	position: relative;
	display: inline-block;
	padding: 0.5rem 1rem;
	cursor: pointer;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	letter-spacing: 0.2em;
	border-radius: 0.2rem;
}

.news_btn {
	background: #274a78;
	color: #a0d8ef !important;
}
.news_btn:hover {
	background: #007bbb;
	color: #ffffff !important;
}