@charset "utf-8";

a {
	outline:none;
}
a:focus{
	outline:none;
}
*{ box-sizing:border-box; margin:0; padding:0; border:0; }
html { -webkit-text-size-adjust: 100%; font-size: 62.5%;}
@media screen and (max-width: 768px) {
html { font-size: 84%;  }
}


body, html { min-height: 100%;  font-family: 'Noto Sans JP', sans-serif; font-weight:300; line-height:1.6; }

body {
	height: 100%; font-family: 'Noto Sans JP', sans-serif !important; font-size:16px;
	font-size:1.6rem; font-weight:400;
}


#loader-bg { 
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  background-image: url("images/loading_bg.jpg"); background-size: cover; background-position: center;
  z-index: 19999;
}
#loader {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 100px;
  margin-top: -50px;
  margin-left: -100px;
  text-align: center;
  color:#25bbf0;
  z-index: 20000;
}

.loader { font-size: 0.8em;
  display: inline-block; margin-bottom: 1.5em;}
  
@-webkit-keyframes ball-scale-multiple {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 0; }
  5% {
    opacity: 1; }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 0; } }

@keyframes ball-scale-multiple {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 0; }
  5% {
    opacity: 1; }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 0; } }

.ball-scale-multiple {
  position: relative;
  -webkit-transform: translateY(-30px);
          transform: translateY(-30px); }
  .ball-scale-multiple > div:nth-child(2) {
    -webkit-animation-delay: -0.4s;
            animation-delay: -0.4s; }
  .ball-scale-multiple > div:nth-child(3) {
    -webkit-animation-delay: -0.2s;
            animation-delay: -0.2s; }
  .ball-scale-multiple > div {
    background-color: #25bbf0;
    width: 15px;
    height: 15px;
    border-radius: 100%;
    margin: 2px;
    -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
    position: absolute;
    left: -30px;
    top: 0px;
    opacity: 0;
    margin: 0;
    width: 60px;
    height: 60px;
    -webkit-animation: ball-scale-multiple 1s 0s linear infinite;
            animation: ball-scale-multiple 1s 0s linear infinite; }


.topbg { background-color: #fff; background-image: url("img/top-swipe-bg2.jpg"); background-position: top center; background-repeat: repeat-x; background-size: 100% 100%;  }

#header { display: block; text-align: center; line-height: 0; margin:0; padding:15px 0 10px; }
#header img { display: block; margin:auto; width:50%; max-width:300px; }
#wrapper {  }

.slider {max-width: 1000px; padding:0.75em; border:1px solid #87c7fc; background: #fff; margin:0 auto 1em !important;}

.slider-thumbnail { display: block; max-width: 1300px; line-height: 0;  padding: 0 0.25em 0.75em; background: #fff; }

.slider-thumbnail .swiper-slide { opacity: .6; transition: opacity .25s; width: 13% !important; line-height: 0; margin: 0; padding:0; cursor:pointer; }
.slider-thumbnail .swiper-slide img { height: auto; width: 100%; padding:4px 0; display: block; }
.slider-thumbnail .swiper-slide.swiper-slide-thumb-active { opacity: 1; }

.swiper { width: 100%; margin: 0 auto; line-height: 0;  }
.swiper-slide img { height: auto; width: 100%; line-height: 0; }
.swiper-area {  margin: 0 auto 50px; padding:0.5em;}

.swiper-wrapper { overflow: hidden; }
.swiper-bar1 { display: block; line-height: 1; border-bottom: 5px solid #266db5; border-top: 2px solid #3d7ec0; padding-top:2px; margin:2px auto; }
.swiper-bar2 { display: block; line-height: 1; border-bottom: 2px solid #3d7ec0; border-top: 5px solid #266db5; padding-top:2px; margin:2px auto 3em; }

.swipebg { background-color: #fff; background-image: url("images/top-swipe-bg2.jpg"); background-position: top center; background-size: cover; }

.thumbnail { display: flex; flex-wrap: wrap; width: 100%;  margin: 0 auto 2em; justify-content: space-around; padding:15px 0; }
.thumbnail .thumb-image { width:14%; text-align: center; height: auto; overflow: hidden; margin-bottom: 1.5em; }
.thumbnail .thumb-image .thumb { width:100%; height: auto; overflow: hidden; }
.thumbnail .thumb-image img { width: 100%; height: auto; transition: transform .3s ease; }
.thumbnail .thumb-image  .thumb:hover img { transform: scale(1.1);}

.swiper-button-white { --swiper-navigation-color: #fff; filter: drop-shadow(1px 1px 10px rgba(0, 0, 0, 0.9)); }

.flex6 { width:100%; margin: auto; display: flex !important; flex-wrap: wrap !important; justify-content: space-between!important; padding:0.25em 0;}

@media screen and (max-width: 1100px) {
.slider-thumbnail .swiper-slide { width: 23.6% !important; padding:0; margin: 0 4px 1em !important; }
.flex6 { justify-content: center !important; }
}

@media screen and (max-width: 800px) {
.thumbnail .thumb-image { width:30%; text-align: center; height: auto; overflow: hidden; }

}



@media screen and (max-width: 767px) {
.slider-thumbnail .swiper-slide { opacity: .6; transition: opacity .25s; width: 32% !important;  margin-bottom: 1em; }
.slider-thumbnail {  padding: 0 0.75em 0em;}
.flex6 { justify-content: flex-start !important; }
}

#mainarea { display: flex; min-width:1000px; }
.leftside { width:320px; min-width:320px; height: auto; padding: 10px; }
.mainv { flex: 1; width: auto; max-width:1200px; min-width:600px; height: auto; position: relative; }
.mainv img { width: 100%; }

@media screen and (max-width: 767px) {
#mainarea { display: block; min-width: inherit; }
.leftside { display: none; }
.mainv {  width: 100%; max-width:1200px; height: auto; position: relative; }
}


img.bg {
  position: relative;
  margin: 0 auto;
  width:100%;
display:block;
}


.news  { display: block; width: 100%; text-align: left; margin: 1.5em auto; padding:0;}
.news-title { max-width: 1000px; margin:1em auto 0.6em; font-size: 2.3em; font-weight: 300; line-height: 1em; font-family: "Noto Serif JP", serif; letter-spacing: 0.2em; color:#12439d; padding:0 0.2em 0; text-align: center;} 
.news-title img { width:8em; height:auto; }
.news-waku { padding:1em 0.5em 0; background: #e9f1f7; } 
.news-area {  padding:0; display: flex; flex-wrap: wrap; justify-content: space-between;  max-width: 1100px; margin:0 auto;} 
.news-block { line-height: 1.3em; padding:1em; font-family: 'Noto Sans JP', sans-serif; width:31%; border: 1px solid #a9e2fd; margin-bottom: 1.5em; height: auto; border-radius: 0.4em; box-shadow: 1px 1px 5px rgba(0,0,0,0.2); background: #fff; transition: background 0.3s ease;} 
.news-block:hover { opacity: 0.7; background: #edfbfe; } 
.news-area::after { display: block; content:""; width:31%; }


.news-block .pic {margin:0 0 0.35em; border: 1px solid #dfedf3; line-height: 0;} 
.news-block .pic img { width:100%; height: auto;} 
.news-block a { text-decoration: none; } 

.news-btn { text-align: center; padding:1em 0 2em;}
.news-btn a { text-align: center; padding:0.25em 1.5em; color:#fff; font-family: 'Noto Sans JP', sans-serif; letter-spacing: 0.2em; line-height: 1em; font-size:1em; font-weight:600; border-radius: 2em; background: #5f94d2; text-decoration: none; transition: background 0.3s ease;}
.news-btn a:hover { background: #89afdb; }

@media screen and (max-width: 800px) {
.news-area {  justify-content:flex-start; } 
.news-block { width:46%; margin: 0 1.5% 1.5em; }
.news-area::after { display: block; content:""; width:46%; }
}

#right-side { width: 720px; position: absolute; bottom: 35px; right: 0px; border-top: #1cbeff 1px solid; border-bottom: #1cbeff 1px solid; background: #fff; z-index: 300; box-sizing: content-box !important; min-height:30px;  }
.ticker { display: block;
	text-align: left;
	padding: 0px !important;
	width: 100%;
	overflow: hidden; height: 30px; box-sizing: content-box !important;
}
.flol { z-index: 1000; position: absolute; top: 0; left:0;  }
ul.topicsul { list-style:none; width: 100%; position: relative; margin-left: 110px; box-sizing: content-box !important; }
ul.topicsul li { color:#333; width: 100%; display: none; vertical-align: baseline; box-sizing: content-box !important; height: 30px; padding: 1em 0;}
ul.topicsul li a { font-size:1.2em!important;  line-height: 1em; min-height: 3em !important; text-decoration: none; white-space: nowrap; padding: 1em 0; box-sizing: content-box !important; }

.bunner { width: 200px; position: absolute; bottom: 70px; right: 10px; z-index: 300; box-sizing: content-box !important; height:40px; }


.bnr_area { display: block; text-align: center; width: 100%; padding: 0.5em}
.aria_bnr { display: flex; flex-wrap: wrap; justify-content: center; width: 100%; max-width: 1100px; text-align: center; margin: 0 auto; padding:0; line-height: 1; }
.aria_bnr a { margin: 0.25em; }
.aria_bnr a:hover { opacity: 0.7; }

.aria_bnr-l { display: flex; width: 100%; max-width: 1100px; text-align: center; margin: 0 auto; padding:0.5em 0; flex-wrap: wrap;  justify-content: center; line-height: 0;  }
.aria_bnr-l a { margin:0.5em 0.5em 1em; display: block; width: 31%; height: auto; line-height: 1;  text-decoration: none;}
.aria_bnr-l a .btit { display: block; height: auto; line-height: 1.2; font-size: 0.8em; color:#336699; font-family: 'Noto Sans JP', sans-serif; font-weight:600; padding:0.25em; }
.aria_bnr-l a .btit span { display: inline-block; }


.aria_bnr-l a img { width: 100%; height: auto; box-shadow: 2px 2px 0px rgba(0,0,0,0.3); }
.aria_bnr-l a:hover { opacity: 0.7; }

@media screen and (max-width: 800px) {
.aria_bnr-l { justify-content: space-between; }
.aria_bnr-l a { width: 47%; }
}


.mlogo {position: absolute; bottom:15px; right:0; height: auto; width: 60%; z-index: 2000; }
.mlogo img {width:100%; margin: 0; text-align: right; }

#sp-comment {display:none;}




#pc-comment { position: absolute; z-index: 400; bottom:25px; left:20px; clear : both; background: none; width: 300px; padding: 0; display: block; }
#pc-comment img {width:100%;}

@media screen and (min-width: 1050px) {
#pc-comment { bottom:25px;  }
}

.l-logo {margin-bottom: 1.5em;}
.l-logo img { width:100%; }
.l-bnr {margin-bottom:1.5em;}
.l-bnr a {margin:0.3em 0;}
.l-bnr img { width:100%; }

#pc-nenga { position: absolute; z-index: 400; bottom:110px; left:20px; clear : both; background: none; width: 300px; padding: 0; display: block; }
#pc-nenga img {width:100%;}


@media screen and (max-width: 767px) {
#mainv { min-height:0;}
img.bg { display:none; }
.mlogo { display: block; position: absolute; bottom:20px; right:0; }
.mlogo img {}


#sp-comment {display:block; text-align: center; padding: 10px 0;}
#sp-comment img { padding: 5px 0 0; width: 700px; }
#pc-comment {display:none;}
#pc-nenga {display:none;}
	

#right-side { display: none; }

}/*767*/



.opa:hover img { opacity: 0.8; }
.font12{ font-size:12px; }

#wap {
}
div.section {
	margin-top:20px;
	margin-bottom:20px;
	clear: both;
}
ul {
	list-style: none;
}

ul#nav2{
	margin-left: 12px;
}
ul#nav2 li { position: relative;
	margin-left: 0;
	width: 230px;
	height: 25px;
	overflow: hidden;
	margin-bottom: 10px;
}
ul#nav2 li img {
	position: absolute;
	top: 1px;
	height:50px;
}

div#container { margin: 0 auto; width: auto;
	height: auto;
	position: relative;
	padding: 15px;
	min-height: 380px;
}


div#subarea { margin: 0 auto; width: auto;
	height: auto;
	position: relative;
	padding: 15px;
	display: flex; align-items: flex-start;
}

div#subarea .twit_box { width:290px; margin: 0;  border:1px solid #0066cc; padding: 8px; }
div#subarea .news_box { flex: 1; flex-direction: column; }


div#subarea .news_box .infomation { display:block; margin: 0 0 3em; width: 100%;
	position: relative;
	padding: 0 0 0 2em; height: auto;
}

.leftside .infomation { display:block; margin: 0 5px 20px; width: auto;
	position: relative;
	padding: 15px; height: auto; background-color: rgba(255,255,255,0.8); border-radius: 10px;
}

.topics_title {border-bottom:1px solid #25bbf0; padding: 0; line-height: 0;}
.topics { z-index: inherit; position: relative;  background: #1cbeff; padding: 0;  }
ul.spcsul { list-style:none; width: 100%; position: relative; margin: 10px 0; box-sizing: content-box !important; }
ul.spcsul li { font-size:1.2em!important; color:#333; width: 100%; display: block;  box-sizing: content-box !important; height: auto; padding: 0.5em 0; border-bottom: 1px dotted #ccc;}
ul.spcsul li a { font-size:1.2em!important;  line-height: 1.3em; text-decoration: none;  padding: 0.3em 0.2em 0.2em; box-sizing: content-box !important; display: block; }

div#subarea .news_box .bnr_box { display:block; margin: 1em 0 2em; width: 100%;
	position: relative;
	padding: 0 0 0 2em; height: auto; text-align: center;
}


@media screen and (max-width: 767px) {
div#subarea { margin: 0 auto; width: auto;
	height: auto;
	position: relative;
	padding: 15px;
	display: block;
}
div#subarea .twit_box { width: 100%; margin: 0 auto 3em; border:1px solid #0066cc; padding: 8px; }
div#subarea .news_box { width: 100%; }
div#subarea .news_box .infomation { padding: 0 0 0 0; }
div#subarea .news_box .bnr_box { padding: 0 0 0 0; }
}



.twit_w { width:310px; margin: 0 0; height: 360px; position: absolute; top: 17px; left:15px; border:1px solid #0066cc; padding: 5px; }
.bnr_w { margin-left:330px; width: auto; }

div#side_left { position: fixed; z-index: 400; top:0; left:0; clear : both; height: 100%; min-height: 100vh; background: rgba(255,255,255,0.90); width: 100%; display: none; padding:40px 10px;}
ul#nav2 li { width: 368px; height: 40px; margin-bottom: 15px; }
ul#nav2 li img { height:80px; }

	
div#side_left.fin { 
  animation: fadein 1s linear 0s 1 normal;
}
div#side_left.fout { 
  animation: fadeout 1s linear 0s  1 normal;
}
.sponly { display: none !important;}
.pconly { display: block !important;}

#spnews { display: none; }


@media screen and (max-width: 767px) {
div#container { padding: 10px; }
.twit_w { display: none; }
.bnr_w { margin-left:0; width: auto; }
#spnews { display:block; margin: 0 auto 25px; width: auto;
	position: relative;
	padding: 10px; height: auto;
}
.topics { z-index: inherit; position: relative; background: #1cbeff; padding: 0;  }
ul.spcsul { list-style:none; width: 100%; position: relative; margin: 10px 0; box-sizing: content-box !important; }
ul.spcsul li { font-size:2.0em!important; color:#333; width: 100%; display: block;  box-sizing: content-box !important; height: auto; padding: 0.5em 0; border-bottom: 1px dotted #ccc;}
ul.spcsul li a { font-size:1.1em!important;  line-height: 1.3em; text-decoration: none;  padding: 0.3em 0.2em 0.2em; box-sizing: content-box !important; display: block; }

.sponly { display: block !important; }
.pconly { display: none !important; }
	
}/*767*/



@-webkit-keyframes fadein {
	0% {
        display: none;
        opacity: 0;
      }
 
      1% {
        display: block;
        opacity: 0;
      }
 
      100% {
        display: block;
        opacity: 1;
      }
}
@-webkit-keyframes fadeout {
	0%{ opacity:1; }
	100% { opacity:0; }
}

div#side_sns
{
		width:100%;
	margin-top:5px;
	margin-left:5px;
	margin-bottom:00px;

  clear : both;

}

div#side_l
{

width:300px;
float:left;
}

.twt{
	width:350px;
	margin: 0 10px;
}




div#side_r
{
  width:381px;
  float:right;

}

.day926{
	margin-bottom:10px;
	margin-right:10px;
}


div#topics{
	background-image: url(images/ARIA_topics.png);
	background-repeat:no-repeat;
	width:251px;
	height:217px;
	padding-top:8px;
	margin:10px;
	margin-left: 15px;

}
iframe{
	margin-top:10px;
	width:245px;
	height:200px;
	margin-left: 5px;	
	
}

/* フッターの背景 */
div#footer { width: 100%; clear : both; margin: 1em auto 0; }
div#footer .sns { text-align: center; padding:0.5em;}
div#footer .sns img { width:40px; height:auto; }
div#footer .sns img:hover { opacity: 0.7; }


ul.aria_br li { display:inline-block; padding:2px; }

div#footer_r {
 width:300px;
  float:right;

}
.footer_text { text-align:center; padding:15px 0; font-size: 0.8em; line-height: 1.4; }

.left{
    text-align: left;
}
.center{
    text-align: center;
}
.right{
    text-align: right;
}




#wrapper.fixed { position: fixed; width: 100%; height: 100%; left: 0; }


#popup { width:100%; height:100%; background-image: url(img/pop_bg.jpg); background-size: cover; position: fixed; z-index: 5000; display: none; background-position: center bottom; box-align: center; }
.popw { width:100%; height:100%; background-color: #fff; z-index: 52; }
#popup ul.popt { display: block; width: 100%; max-width: 1100px; position: relative; height: auto; margin: auto; z-index: 70; top:5%; left:0; bottom:0; right:0;}
#popup ul.popt li.popl { position: absolute; top:0; left:0; width: auto;  height: auto; display: none; z-index: 75; 
}
#popup ul.popt li.popl img { display: block; width: 100%; }	
	

#popup .close { display: block; width: 50px; height:50px; right: 5px; top: 5px; position: absolute; z-index: 50; background-image: url("img/controlx.png"); background-position: 0 0px; cursor: pointer; }
#popup .close:hover { background-position: 0 -50px; }


/* =======================================
	ClearFixElements
======================================= */
.clearfix:after {
	content: ".";
	height: 0;
	clear: both;
	display: block;
	visibility: hidden;
}

.clearfix {
	display: inline-block;
	overflow: hidden;
}


.overlay {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-color: rgba(255,255,255,0.98);
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  opacity: 0;
 transition: all .5s;
}
.overlay.open { display: block;
  width: 100%;
  height: 100%;
    z-index: 5000;
    opacity: 1;
	position: fixed;
    transition: opacity 1s;
}


.menu-trigger {
  display: inline-block;
width: 60px;
  height: 60px;
  vertical-align: middle;
  cursor: pointer;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 9999; background: rgba(255,255,255,0.60); 
/*   transform: translateX(0);
  transition: transform .5s;
 */}
/* .menu-trigger.active {
  transform: translateX(-250px);
}
 */.menu-trigger span {
  display: inline-block;
  box-sizing: border-box;
  position: absolute;
  left: 12px;
  width: 36px;
  height: 4px;
  background-color: #1cbeff;
  transition: all .25s;
}
.menu-trigger.active span {
  background-color: #1cbeff;
}
.menu-trigger span:nth-of-type(1) {
  top: 15px;
}
.menu-trigger.active span:nth-of-type(1) {
  transform: translateY(13px) rotate(-45deg);
}
.menu-trigger span:nth-of-type(2) {
  top: 28px;
}
.menu-trigger.active span:nth-of-type(2) {
  opacity: 0;
}
.menu-trigger span:nth-of-type(3) {
  bottom: 15px;
}
.menu-trigger.active span:nth-of-type(3) {
  transform: translateY(-13px) rotate(45deg);
}

nav { display: flex; flex-direction: column; 
  width: 100%;
  height: 100%;
  padding: 1em !important;
  position: fixed; overflow-y: auto; 
  top: 0;
  left: 0;
  z-index: 6000;
 opacity: 0;
    pointer-events: none;
  -webkit-transition: all 0.3s;
      -moz-transition: all 0.3s;
      -ms-transition: all 0.3s;
      -o-transition: all 0.3s;
      transition: all 0.3s;
    
}
nav.open { opacity: 1;
    transition: opacity 1s;
    pointer-events: auto;
}

nav.smn div { margin: 0 auto 0 !important; line-height:1em; 
  color: #fff;
  text-align: center;
  padding: 0.5em !important;
  width: 100%; max-width: 500px; display: block; line-height: 1; border-bottom: 1px dashed #1cbeff;
}

nav.smn div:last-child { border-bottom: none;
}


nav.smn div a { font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 600;
  font-style: normal; font-size: 1.3em; color:#fff; text-decoration: none;
  text-align: center; line-height: 1;
  padding: 10px 0 !important; letter-spacing: 0.1em;
  width: 100%; display: block; 
text-shadow:0 0 3px #1c9cff,0 0 3px #1c9cff,0 0 3px #1c9cff,0 0 3px #1c9cff,0 0 3px #1c9cff,0 0 3px #1c9cff,0 0 3px #1c9cff,0 0 3px #1c9cff,0 0 3px #1c9cff,0 0 3px #1c9cff,0 0 3px #1c9cff,0 0 3px #1c9cff,0 0 3px #1c9cff,0 0 3px #1c9cff,0 0 3px #1c9cff,0 0 3px #1c9cff; transition: color 0.3s ease;
}
nav.smn div a:hover { opacity:0.9; color:#c9f0fd; }





.fadeIn {
  opacity: 0;
  transition: 1s;
}
.fadeIn.is-show {
  opacity: 1;
}
.fadeIn_left {
  opacity: 0;
  transform: translate(-30%, 0);
  transition: 0.6s;
}
.fadeIn_left.is-show {
  transform: translate(0, 0);
  opacity: 1;
}
.fadeIn_up {
  opacity: 0;
  transform: translate(0, 5%);
  transition: 1s;
}
.fadeIn_up.is-show {
  transform: translate(0, 0);
  opacity: 1;
}
.fadeIn_down {
  opacity: 0;
  transform: translate(0, -5%);
  transition: 1s;
}
.fadeIn_down.is-show {
  transform: translate(0, 0);
  opacity: 1;
}
.fadeIn_right {
  opacity: 0;
  transform: translate(30%, 0);
  transition: 0.6s;
}
.fadeIn_right.is-show {
  transform: translate(0, 0);
  opacity: 1;
}