@charset "utf-8";

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

@media screen and (max-width: 800px) {
.mov-topimg {
  min-height: initial;
  height: 650px;
}
}

@media screen and (max-width: 568px) {
.mov-topimg {
  height: 400px;
}
}

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

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

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

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

@media screen and (max-width: 1580px) {
#player {
  width: 120%;
  margin:0 0 0 -10%;
}
}

@media screen and (max-width: 1280px) {
#player {
  width: 140%;
  margin:0 0 0 -20%;
}
}

@media screen and (max-width: 800px) {
#player {
  width: 180%;
  margin:0 0 0 -40%;
}
}


@media screen and (max-width: 568px) {
#player {
  width: 200%;
  margin:0 0 0 -50%;
}
}

.topimg .block {
  padding:0;
  width:100%;
  height: 100%;
  position: relative;
}


#top_row {
  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;
  background: rgb(0, 0, 0, 0.01);
  background-image: url(../images/raster.png);
}

#top_row h1{
  font-size:3em;
  line-height:1.5;
  color:#FFF;
  font-family:YuGothic, "Yu Gothic Medium", "Yu Gothic", sans-serif;
  text-align: center;
  font-weight:normal;
  font-family: 'Noto Serif JP', serif;
  font-weight:400;
  margin-bottom:40px;
}

@media screen and (max-width: 800px) {
#top_row h1{
  font-size:2.4em;
  margin-bottom:25px;
  padding-top:5px;
}
}

@media screen and (max-width: 568px) {
#top_row h1{
  padding-top:0;
  font-size:1.5em;
  margin-bottom:15px;
}
}

#top_row .catch{
  color:#FFF;
  text-align: center;
  line-height:2;
}

@media screen and (max-width: 800px) {
#top_row .catch{
  font-size:14px;
}
}

@media screen and (max-width: 568px) {
#top_row .catch{
  font-size:13px;
}
}

.flag{
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 2;
  width:25%;
  max-width:512px;
}

@media screen and (max-width: 568px) {
.flag{
  width:35%;
}
}

.flag img{
  width:100%;
  height:auto;
}

.scroll {
 font-family: 'Jost', sans-serif;
 font-size:0.9em;
 letter-spacing:.05em;
 text-transform: uppercase;
}

.scroll a {
  padding-top: 55px;
  color:#FFF;
}

.scroll a {
  position: absolute;
  bottom: 0;
  left: 50%;
  margin-left: -27px;
  z-index: 2;
  display: inline-block;
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
  text-decoration: none;
}

@media only screen and  (max-width:800px) {
.scroll a {
  display:none;
}
}

.scroll a span {
  position: absolute;
  top: 0;
  left: 50%;
  width: 30px;
  height: 50px;
  margin-left: -15px;
  border: 2px solid #FFF;
  border-radius: 50px;
  box-sizing: border-box;
}

.scroll a span::before {
  position: absolute;
  top: 10px;
  left: 50%;
  content: '';
  width: 6px;
  height: 6px;
  margin-left: -3px;
  background-color: #FFF;
  border-radius: 100%;
  -webkit-animation: sdb 2s infinite;
  animation: sdb 2s infinite;
  box-sizing: border-box;
}


@-webkit-keyframes sdb {
  0% {
    -webkit-transform: translate(0, 0);
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  80% {
    -webkit-transform: translate(0, 20px);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes sdb {
  0% {
    transform: translate(0, 0);
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  80% {
    transform: translate(0, 20px);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}


/* .top-info
================================================== */
.top-info {
  width: 100%;
  margin:0 auto;
  padding:4% 2%;
  box-sizing: border-box;
  position: relative;
  text-align: center;
}

.top-info h2{
  font-family: 'Noto Serif JP', serif;
  font-weight:300;
  font-size:2.2em;
  margin-bottom:40px;
  color:#000;
}

@media screen and (max-width: 800px) {
.top-info h2{
  font-size:2em;
  margin-bottom:15px;
  line-height:1.5;
}
}

@media screen and (max-width: 568px) {
.top-info h2{
  font-size:1.4em;
  margin-bottom:10px;
}
}

.top-info p{
  letter-spacing:0em;
  font-size:0.95em;
  color:#000;
  line-height:2;
}

@media screen and (max-width: 568px) {
.top-info p{
  text-align: left;
  line-height:1.6;
  font-size:13px;
}
}

/* top-photo
================================================== */
.top-photo{
  padding:0 0 5%;
  margin:0 auto;
  width:100%;
  max-width:1280px;
  text-align: center;
}

.top-photo li{
  display:inline-block;
  width:25%;
}

.top-photo li img{
  height:auto;
  width:100%;
}

/* top-movie
================================================== */
.top-movie{
  padding:0 2% 2%;
  box-sizing: border-box;
  margin:0 auto;
  width:100%;
  max-width:1280px;
  text-align: center;
}

@media screen and (max-width: 800px) {
.top-movie{
  padding:0 0;
}
}
.youtube {
  width: 100%;
  aspect-ratio: 16 / 9;
}

.youtube iframe {
  width: 100%;
  height: 100%;
}

/* fullphoto
================================================== */
#fullphoto{
  padding:0;
  width:100%;
}

#fullphoto img{
  width:100%;
  height:auto;
}

.left-top {
  width:50%;
  display: inline-block;
  vertical-align: top;
}

@media screen and (max-width: 568px) {
.left-top {
  width:55%;
  margin-right:-5%;
}
}

.right-bottom {
  width:55%;
  margin-left:-5%;
  display: inline-block;
  vertical-align: top;
  padding-top:3%;
}

@media screen and (max-width: 568px) {
.right-bottom {
  width:55%;
  padding-top:20px;
}
}

.left-bottom {
  padding-top:3%;
  width:55%;
  margin-right:-5%;
  display: inline-block;
  vertical-align: top;
}

@media screen and (max-width: 568px) {
.left-bottom {
  width:55%;
  padding-top:20px;
  
}
}

.right-top {
  width:50%;
  display: inline-block;
  vertical-align: top;
}

@media screen and (max-width: 568px) {
.right-top {
  width:55%;
  margin-left:-5%;
}
}

/* bg
================================================== */
.bgry{
  background:#F2EDE9;
  background: -moz-linear-gradient(left, #F2EDE9 10%, #FFF);
  background: -webkit-linear-gradient(left, #F2EDE9 10%, #FFF);
  background: linear-gradient(to right, #F2EDE9 10%, #FFF);
}

.bgwht{
  background:#FFF;
}

.bginsta{
  background: #21b3e6 url(../images/bg_bottom.gif) repeat-x 0 100%;
}

#wave_slide {
  background: url("../images/bg_wave.gif") repeat-x left top transparent;
  height: 79px;
  position: absolute;
  top: 0px;
  width: 100%;
}

/* seisan-info
================================================== */
#seisan-info {
  padding:4% 0 4%;
  width:100%;
  text-align: center;
}

#seisan-info h3{
  font-family: 'Noto Serif JP', serif;
  font-weight:300;
  font-size:2.2em;
  margin-bottom:40px;
  color:#000;
}

@media screen and (max-width: 800px) {
#seisan-info h3{
  font-size:2em;
  margin-bottom:15px;
  line-height:1.5;
}
}

@media screen and (max-width: 568px) {
#seisan-info h3{
  font-size:1.4em;
  margin-bottom:10px;
}
}

#seisan-info p{
  letter-spacing:0em;
  font-size:0.95em;
  color:#000;
  line-height:2;
}

@media screen and (max-width: 568px) {
#seisan-info p{
  text-align: left;
  line-height:1.6;
  font-size:13px;
}
}

/* other-info
================================================== */
#other-info {
  padding:5% 0 4%;
  width:100%;
}

#other-info .online-pro{
  text-align: center;
  width:100%;
  max-width:1280px;
  margin:2% auto;
}

.online-pro li{
  display:inline-block;
  width:49%;
  margin:0 0.5%;
}

@media screen and (max-width: 800px) {
.online-pro li{
  width:50%;
  margin:0;
}
}

.online-pro li img{
  height:auto;
  width:100%;
}

#other-info dl{
  text-align: center;
  width:100%;
  max-width:1100px;
  margin:0 auto;
}

@media screen and (max-width: 800px) {
#other-info dl{
  padding:0 2%;
  box-sizing: border-box;
}
}

#other-info dt {
  width:30%;
  text-align: left;
  display: inline-block;
  vertical-align: top;
}

#other-info dd {
  width:65%;
  display: inline-block;
  vertical-align: top;
  text-align: left;
}


#other-info dt h4{
  font-size:4em;
  font-family: "Sawarabi Mincho"; 
  font-weight:600;
  margin:0 auto 20px;
  line-height:1;
  letter-spacing:0.02em;
}

@media screen and (max-width: 800px) {
#other-info dt h4{
  width:55px;
  margin:5px 0 20px 35px;
}
}

@media screen and (max-width: 568px) {
#other-info dt h4{
  margin:5px 0 10px 7px;
}
}

#other-info dt p{
  display: block;
   font-family: 'Playfair Display', serif;
   font-weight: 800;
   font-size:1.6em;
   padding-left:2%;
}

@media screen and (max-width: 568px) {
#other-info dt p{
  font-size:1em;
  padding-left:0;
  font-weight: 600;
}
}

#other-info dt p span{
  color:#BD9F77;
}

#other-info dd .other-tx{
  text-align: left;
  font-size:14px;
  line-height:2;
}

@media screen and (max-width: 568px) {
#other-info dd .other-tx{
  line-height:1.6;
  font-size:13px;
}
}

.other-buttons{
  margin-top:50px;
  text-align: center;
}

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

@media screen and (max-width: 568px) {
.other-buttons{
  margin-top:15px;
  margin-bottom:5px;
}
}

.other-button{font-size:14px;border:none;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
.other-button.c-button--ghost{background-color:#000;display:inline-table;padding:10px 20px;border:2px solid #000;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}
.other-buttons a{text-decoration:none;}
.other-buttons a:hover{text-decoration:none;display:inline-table;background-color:#fff;color:#222;text-shadow:0 0 0 #FFF;}

/* online-shop
================================================== */
#online-shop {
  padding:20px;
  box-sizing: border-box;
  width:100%;
  background:url(../images/bg-gray.gif) repeat center top;
  position: relative;
}

.online-s-syousai {
  border:3px solid #000;
  width:100%;
  box-sizing: border-box;
  padding:20px;
}

.online_ph{
  width:60%;
  display:inline-block;
  margin-left:-15%;
  padding-top:5px;
}

@media screen and (max-width: 800px) {
.online_ph{
  width:100%;
  display:block;
  margin-right:0;
}
}

.online_ph img{
  width:100%;
  height:auto;
  margin:0;
}

.online_tx{
  width:55%;
  display:inline-block;
  padding:5% 2%;
  box-sizing: border-box;
  color:#000;
  vertical-align:top;
}

@media screen and (max-width: 800px) {
.online_tx{
  width:100%;
  display:block;
  padding:5% 8%;
}
}

@media screen and (max-width: 568px) {
.online_tx{
  padding:5% 7% 7%;
}
}

.online_tx .cmtx01{
  font-size:6em;
  font-family: "Sawarabi Mincho"; 
  font-weight:600;
  margin:0 auto;
  line-height:1;
  padding-left:1%;
  letter-spacing:0.02em;
}


@media screen and (max-width: 568px) {
.online_tx .cmtx01{
  font-size:2.8em;
}
}

.online_tx .cmtx02{
  padding:10px 0 30px;
  font-family: 'Poppins', sans-serif;
  font-weight:500;
  font-size:1.2em;
  padding-left:5%;
  text-transform: uppercase;
}

@media screen and (max-width: 800px) {
.online_tx .cmtx02{
  padding:10px 0 20px;
}
}

@media screen and (max-width: 568px) {
.online_tx .cmtx02{
  font-size:1.3em;
   padding:5px 0 10px;
}
}

.online_tx .cmtx03{
  line-height:1.8;
  font-family: 'Noto Sans Japanese', sans-serif;
  font-weight:400;
  font-size:1em;
}

@media screen and (max-width: 568px) {
.online_tx .cmtx03{
  font-size:1em;
  line-height:1.8;
}
}

.on-buttons{
  margin-top:30px;
  margin-left:1%;
  text-shadow:0 0 0 #FFF;
}

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

@media screen and (max-width: 568px) {
.on-buttons{
  margin-top:15px;
  margin-bottom:5px;
}
}

.on-button{font-size:14px;border:none;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
.on-button.c-button--ghost{background-color:#000;display:inline-table;padding:10px 20px;border:2px solid #000;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}
.on-buttons a{text-decoration:none;}
.on-buttons a:hover{text-decoration:none;display:inline-table;background-color:#fff;color:#222;text-shadow:0 0 0 #FFF;}


/* insta-info
================================================== */
#insta-info {
  padding:5% 0 5%;
  width:100%;
  text-align: center;
  position: relative;
}

#insta-container{
  width:100%;
  max-width:1200px;
  box-sizing: border-box;
  padding:0 2%;
  margin:0 auto;
}

@media screen and (max-width: 568px) {
#insta-container {
  padding: 0 5px;
}
}

.zind2{
  z-index:2;
  position: relative;
}

#insta-info h5{
  font-family: 'Courgette', serif;
  font-weight:300;
  font-size:2.2em;
  margin-bottom:30px;
  color:#FFF;
}

@media screen and (max-width: 800px) {
#insta-info h5{
  font-size:2em;
  margin-bottom:15px;
  line-height:1.5;
}
}

@media screen and (max-width: 568px) {
#insta-info h5{
  margin-bottom:10px;
  margin-top:30px;
}
}

#insta-info .insta-tx{
  letter-spacing:0em;
  font-size:0.95em;
  color:#FFF;
  margin-bottom:2%;
}

@media screen and (max-width: 568px) {
#insta-info .insta-tx{
  font-size:13px;
}
}

#insta-info h5 .fa{
  margin-right:15px;
}

.insta{
  width:100%;
  padding:2% 0;
  box-sizing: border-box;
}

.insta-buttons{
  margin-top:20px;
  text-align: center;
}

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

@media screen and (max-width: 568px) {
.insta-buttons{
  margin-top:15px;
  margin-bottom:5px;
}
}

.insta-button{font-size:14px;border:none;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
.insta-button.c-button--ghost{display:inline-table;padding:10px 20px;border:2px 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}
.insta-buttons a{text-decoration:none;}
.insta-buttons a:hover{text-decoration:none;display:inline-table;background-color:#fff;color:#222;}


/* marine-container
================================================== */
#marine-container{
  width:100%;
  max-width:1200px;
  box-sizing: border-box;
  padding:0 2% 5%;
  margin:0 auto;
  z-index:2;
  position: relative;
}


@media screen and (max-width: 800px) {
#marine-container{
  padding: 3% 5% 3%;
}
}

@media screen and (max-width: 568px) {
#marine-container{
  padding: 3% 0 3%;
}
}

.marine-ttl{
  font-family: 'Courgette', serif;
  font-weight:300;
  font-size:2.2em;
  margin-bottom:30px;
  color:#FFF;
}

@media screen and (max-width: 800px) {
.marine-ttl{
  font-size:2em;
  margin-bottom:15px;
  line-height:1.5;
}
}

@media screen and (max-width: 568px) {
.marine-ttl{
  margin-bottom:10px;
  margin-top:30px;
}
}

.marine-ttl .fa{
  margin-right:15px;
}

#marine-container .marine-tx{
  letter-spacing:0.02em;
  color:#FFF;
  margin-bottom:4%;
  text-shadow:1px 1px 1px #59AFD7;
  font-family: 'Noto Sans Japanese', sans-serif;
}

@media screen and (max-width: 568px) {
#marine-container .marine-tx{
  font-size:0.95em;
}
}

.marine-info{
  width:100%;
  margin:1% auto;
}

.marine-ph{
  width:50%;
  display:inline-block;
  vertical-align:middle;
}

@media screen and (max-width: 800px) {
.marine-ph{
  width:100%;
  display:block;
  margin-right:0;
}
}

.marine-ph li{
  width:50%;
  display:inline-block;
  margin:0;
}

.marine-ph img{
  width:100%;
  height:auto;
  margin:0;
}

.marine-text{
  width:50%;
  display:inline-block;
  vertical-align:middle;
  padding:0 0 0 5%;
  box-sizing: border-box;
}

@media screen and (max-width: 800px) {
.marine-text{
  width:100%;
  display:block;
  padding:5% 8%;
}
}

@media screen and (max-width: 568px) {
.marine-text{
  padding:5% 7% 3%;
}
}

.mttl{
  font-family: "Sawarabi Mincho"; 
  font-weight:500;
  font-size:1.4em;
  color:#000;
  line-height:1.6;
  text-align: left;
  margin-bottom:3%;
  color:#FFF;
  text-shadow:1px 1px 1px #59AFD7;
}

@media screen and (max-width: 800px) {
.mttl{
  font-size:1.3em;
  margin-bottom:1%;
}
}

@media screen and (max-width: 568px) {
.mttl{
  font-size:1.15em;
}
}

.mttl span{
  color:#F5526D;
}


.mtx{
  color:#FFF;
  text-align: left;
  padding-bottom:3%;
  font-weight:400;
  line-height:1.8;
  text-shadow:1px 1px 1px #59AFD7;
  font-family: 'Noto Sans Japanese', sans-serif;
  letter-spacing:0.02em;
}

@media screen and (max-width: 568px) {
.mtx{
  font-size:0.95em;
  line-height:1.6;
}
}

/* .tabiiro
================================================== */
.tabiiro{
  width:100%;
  max-width:1150px;
  margin:2% auto 5%;
}

.tabiiro img{
  width:100%;
  height:auto;
}