@charset "utf-8";
@import url(//fonts.googleapis.com/css?family=Noto+Serif+JP);
@import url(//fonts.googleapis.com/earlyaccess/notosansjapanese.css);


/* .topimg
================================================== */
.topimg {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 500px;
  overflow:hidden;
  margin:0;
}

@media screen and (max-width: 810px) {
.topimg {
  width: 100%;
  padding-top:60px;
  height: auto;
  box-sizing: border-box;
  overflow:initial;
}
}

#mov-box {
  position: relative;
  width: 50%;
  height: 100%;
  display: inline-block;
  vertical-align: top;
  overflow:hidden;
}

@media screen and (max-width: 1580px) {
#mov-box {
  width: 45%;
}
}

@media screen and (max-width: 1280px) {
#mov-box {
  width: 40%;
}
}

@media screen and (max-width: 810px) {
#mov-box {
  width: 100%;
  height: 450px;
  display: block;
  min-height: initial;
}
}

@media screen and (max-width: 568px) {
#mov-box {
  width: 100%;
  height: 350px;
  display: block;
}
}

.mov-topimg img {
  width:100%;
  height:auto;
}


#vdo {
  width: 100%;
  height: auto;
  margin:auto;
}

#video {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width:100%;
  height:100%;
  z-index:0;
  display:block;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url(../images/topimg.jpg);
}

#player {
  width: auto;
  height: 100%;
  margin:auto;
  transition: .5s;
}


#dot {
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  /* background-image: url(../images/raster.png); */
}

#mov-box .mv-text{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  padding:80px 5% 0;
  z-index: 2;
  box-sizing: border-box;
}

@media screen and (max-width: 810px) {
#mov-box .mv-text{
  padding:0 5% 0;
}
}

#mov-box .mv-text p{
  font-family: 'Noto Sans Japanese', sans-serif;
  font-weight: 600;
  font-size:2.4em;
  line-height:1.8;
  letter-spacing: 0.05em;
  color:#FFF;
  text-shadow:2px 2px 1px #2E3092;
}

@media screen and (max-width: 1580px) {
#mov-box .mv-text p{
  font-size:2.2em;
}
}

@media screen and (max-width: 1280px) {
#mov-box .mv-text p{
  font-size:1.8em;
}
}

@media screen and (max-width: 1150px) {
#mov-box .mv-text p{
  font-size:1.6em;
}
}

@media screen and (max-width: 568px) {
#mov-box .mv-text p{
  font-size:1.35em;
}
}

#mov-box .mv-text img{
  width:100%;
  height:auto;
  max-width:400px;
  margin-top:5%;
}

@media screen and (max-width: 1280px) {
#mov-box .mv-text img{
  max-width:300px;
}
}

@media screen and (max-width: 568px) {
#mov-box .mv-text img{
  max-width:240px;
  margin-top:3%;
}
}

#top_row {
  position: relative;
  width: 50%;
  height: 100%;
  display: inline-block;
  vertical-align: top;
  padding-top:80px;
  box-sizing: border-box;
  background-color:#2E3092;
}

@media screen and (max-width: 1580px) {
#top_row {
  width: 55%;
}
}

@media screen and (max-width: 1280px) {
#top_row {
  width: 60%;
}
}

@media screen and (max-width: 810px) {
#top_row {
  width: 100%;
  padding-top:0px;
  display: block;
}
}

#top_row .ashiba{
  position: relative;
  width: 100%;
  height: 50%;
  box-sizing: border-box;
  border-bottom:1px solid #2E3092;
  overflow:hidden;
}

@media screen and (max-width: 810px) {
#top_row .ashiba{
  width: 50%;
  height: auto;
  display:inline-block;
  vertical-align:top;
}
}

#top_row .ashiba:after {
position: absolute;
content: "";
display: block;
width: 100%;
height: 100%;
top: 0;
background: url(../images/bg-ashiba.jpg) no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-ms-background-size: cover;
background-size: cover;
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-ms-transition: all .3s ease-out;
transition: all .3s ease-out;
z-index:0;
opacity: .9;
}

#top_row .ashiba:hover:after {
opacity: .8;
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
}

@media screen and (max-width: 810px) {
#top_row .ashiba:after {
  content: none;
}
}

#top_row .solar{
  position: relative;
  width: 100%;
  height: 50%;
  overflow:hidden;
}

@media screen and (max-width: 810px) {
#top_row .solar{
  width: 50%;
  height: auto;
  display:inline-block;
  vertical-align:top;
}
}


#top_row .solar:after {
position: absolute;
content: "";
display: block;
width: 100%;
height: 100%;
top: 0;
background: url(../images/bg-solar.jpg) no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-ms-background-size: cover;
background-size: cover;
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-ms-transition: all .3s ease-out;
transition: all .3s ease-out;
z-index:0;
opacity: .9;
}

@media screen and (max-width: 810px) {
#top_row .solar:after {
  content: none;
}
}

#top_row .solar:hover:after {
opacity: .8;
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
}

#top_row .mc-ovly{
  position: relative;
  width: 100%;
  height: 100%;
  display: block;
  background: rgb(0, 60, 138, 0.1);
  z-index:1;
}

#top_row .mc-text{
  width: 50%;
  height: 100%;
  background: rgb(22, 24, 111, 0.85);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  padding:0 5%;
}

@media screen and (max-width: 1350px) {
#top_row .mc-text{
  padding:0 3%;
}
}

@media screen and (max-width: 810px) {
#top_row .mc-text{
  position: relative;
  width: 100%;
  height: auto;
  padding:5%;
}
}

#top_row .mc-text2{
  width: 50%;
  height: 100%;
  background: rgb(22, 24, 111, 0.85);
  position: absolute;
  top: 0;
  left: 50%;
  right: 0;
  bottom: 0;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  padding:0 5%;
}

@media screen and (max-width: 1580px) {
#top_row .mc-text2{
  padding:0 3%;
}
}

@media screen and (max-width: 810px) {
#top_row .mc-text2{
  position: relative;
  width: 100%;
  height: auto;
  padding:5%;
  left:0%;
}
}

#top_row .mc-text-box{
  display: block;
  color:#FFF;
  text-align: left;
}

#top_row .mc-text-box h2{
  font-family: 'Noto Sans Japanese', sans-serif;
  font-weight: 600;
  font-size:1.65em;
  line-height:1.5;
  letter-spacing: 0.05em;
}

@media screen and (max-width: 1580px) {
#top_row .mc-text-box h2{
  font-size:1.5em;
  font-weight: 500;
}
}

@media screen and (max-width: 1350px) {
#top_row .mc-text-box h2{
  font-size:1.4em;
}
}

@media screen and (max-width: 1180px) {
#top_row .mc-text-box h2{
  font-size:1.3em;
}
}

@media screen and (max-width: 810px) {
#top_row .mc-text-box h2{
  text-align: center;
}
}

@media screen and (max-width: 568px) {
#top_row .mc-text-box h2{
  font-size:1.2em;
}
}

#top_row .mc-text-box .mctx{
  padding:25px 5px;
  font-size:14px;
  line-height:2;
}

@media screen and (max-width: 1350px) {
#top_row .mc-text-box .mctx{
  padding:20px 5px;
  font-size:13px;
  line-height:1.8;
}
}

@media screen and (max-width: 568px) {
#top_row .mc-text-box .mctx{
  padding:10px 5px;
}
}

.about-buttons{
  margin-top:10px;
  text-align: center;
  font-weight:400;
  font-family: 'Noto Sans Japanese', sans-serif;
}

@media screen and (max-width: 810px) {
.about-buttons{
  text-align:center;
  margin-left:auto;
}
}

@media screen and (max-width: 568px) {
.about-buttons{
  margin-top:5px;
  margin-bottom:5px;
  font-size:0.95em;
}
}

.about-button{border:none;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
.about-button.c-button--ghost{display:inline-table;padding:12px 20px;border:1px solid #FFF;color:#fff;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;-moz-transition-duration:0.2s;-o-transition-duration:0.2s;-webkit-transition-duration:0.2s;transition-duration:0.2s}
.about-button.c-button--ghost:hover{border:1px solid #E23535;}
.about-buttons a{text-decoration:none;}
.about-buttons a:hover{text-decoration:none;display:inline-table;background-color:#E23535;color:#FFF;text-shadow:none;}

#top_row .mc-photo{
  display:none;
}

@media screen and (max-width: 810px) {
#top_row .mc-photo{
  display:block;
  width:100%;
  margin:0;
  position: relative;
}

#top_row .mc-photo img{
  width:100%;
  height:auto;
}

.ashiba img {
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
  -webkit-transition: -webkit-transform 400ms;
  transition: transform 400ms;
}

.ashiba:hover img {
  -webkit-transform: scale3d(1.1, 1.1, 1);
  transform: scale3d(1.1, 1.1, 1);
}

.solar img {
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
  -webkit-transition: -webkit-transform 400ms;
  transition: transform 400ms;
}

.solar:hover img {
  -webkit-transform: scale3d(1.1, 1.1, 1);
  transform: scale3d(1.1, 1.1, 1);
}
}

/* .top-info
================================================== */
.top-info {
  width: 100%;
  margin:0 auto;
  padding:0;
  text-align: center;
}

.top-info .yashi{
  width: 100%;
  padding:3% 0 4%;
  margin:0 auto;
  box-sizing: border-box;
  position: relative;
  background-image: url(../images/bg_yashi.png);
  background-repeat: no-repeat;
  background-size: 100% auto;
}

@media screen and (max-width: 568px) {
.top-info .yashi{
  background-image: url(../images/bg_yashi_sp.png);
}
}

.letter_box {
  width:100%;
  padding:1.5% 0 3%;
}

.letter_box .tor-tit{
  text-align: center;
  font-size: 2em;
  font-weight:500;
  text-transform: uppercase;
  margin:0 0 3%;
  color:#2E3092;
  font-family: 'Alata', sans-serif;
  font-weight: 300;
  letter-spacing:0.05em;
}

@media screen and (max-width: 810px) {
.letter_box .tor-tit{
  font-size: 2em;
  margin:2% 0 0;
}
}

.letter-list{
  width:96%;
  max-width:750px;
  margin:3% auto 0;
  text-align: left;
}

@media screen and (max-width: 810px) {
.letter-list{
  width:90%;
  margin:1% auto 5%;
}
}

.letter-list li{
  width:100%;
  box-sizing: border-box;
  padding:15px 10px 20px 20px;
  border-bottom:1px dotted #ccc;
  margin-top:5px;
}

@media screen and (max-width: 810px) {
.letter-list li{
  padding:10px;
}
}

.letter-list li dl{
  width:100%;
  display:block;
}

.letter-list li dt{
  display:inline-block;
  width:12%;
  font-family: 'Roboto', sans-serif;
  font-weight:400;
  font-size:1em;
  vertical-align:middle;
  padding-top:2px;
}

@media screen and (max-width: 810px) {
.letter-list li dt{
  display:block;
  font-size:1em;
  width:100%;
}
}

.letter-list li dd{
  display:inline-block;
  vertical-align:middle;
}

.letter-list li dd .nxt{
  display:inline-block;
  font-family: 'Noto Sans Japanese', sans-serif;
  font-weight: 400;
  font-size:1.05em;
  vertical-align:middle;
}

.letter-list li dd .catek{
  display:inline-block;
  padding:6px 5px 4px;
  font-size:13px;
  vertical-align:middle;
  background:#2E3092;
  color:#FFF;
  line-height:1;
  margin-right:10px;
  margin-top:2px;
}

.letter-list li dd .cates{
  display:inline-block;
  padding:5px;
  font-size:13px;
  vertical-align:middle;
  background:#E23535;
  color:#FFF;
  line-height:1;
  margin-right:10px;
  margin-top:2px;
}

@media screen and (max-width: 810px) {
.letter-list li dd{
  margin-top:5px;
  display:block;
}
}

@media screen and (max-width: 568px) {
.letter-list li dd{
  font-size:0.95em;
}
}

.letter-list li dd a{text-decoration:underline;color:#2E3092;}
.letter-list li dd a:hover{color: #E23535;transition: .5s;text-decoration:none;}