@charset "utf-8";

/*-------------------- MV */
#mainvis {
  position: relative;
  width: 100%;
  height: 95vh;
  margin: 0 auto;
  overflow: hidden;
}
#mainvis #bg {
position: fixed;
z-index: -1;
top: 0;
width: 100%;
height:95vh;
background: url("../img/top/mv-min.jpg") center center / cover no-repeat;
transform-origin:center;
}
#mainvis a span {
  font-size: .7em;
  letter-spacing: .2em;
}

@keyframes sactive {
  0% {
    right: 100%;
  }
  100% {
    right: 0
  }
}

#mainvis h1 {
  width: auto;
  font-size: 1.4em;
  margin-bottom: 1em;
  text-align: left;
}
#mainvis h2:after {
  display: none;
}

/*-------------------- pankuzu */
#pankuzu {
  display: none;
}

/*-------------------- contents */
.sticky {
  width: 100%;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}
h2 {
  margin: 0 auto;
}

/*-------------------- mf1 */
#mf1 {
  padding: 3vw 0;
  background: #fff;
}
#mf1 .mf-inner {
  text-align: center;
  margin: 0 auto 3vw;
  display: flex;
  justify-content: center;
  align-items: center;
}
#mf1 ul {
    border-top: 1px solid #0b528d;
    border-bottom: 1px solid #0b528d;
    padding: .6em 1em;
    width: 700px;
    height: 3em;
}
#mf1 .cat {
  display: inline-block;
  width: 5em;
  background: #0b528d;
  color: #fff;
  line-height: 1.6;
  text-align: center;
  margin: 0 2em .6em 0;
}
#mf1 .mon {
  display: inline-block;
  margin-right: 1em;
}

#idNews{
    margin:0 auto;
    text-align:left;
}
#idNews ul {
  overflow: hidden;
}
#idNews li {
    list-style-position:inside;
    list-style-type:none;
}

/*-------------------- mf2 */
#mf2 {
  background: #fff;
  padding: 3vw 0;
  z-index: 2;
}
#mf2 .cbox {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 80vw;
  margin: 5vw auto;
}
#mf2 .cbox figure {
  margin-right: 3%;
  width: 40%;
}
#mf2 .cbox figure img {
  width: 100%;
}
#mf2 .cbox .btn {
  margin: 2em 0 0 0;
}
#mf2 .cbox .btn a {
  display: block;
  width: 200px;
  line-height: 2.5em;
  border: 2px solid #e43c5c;
  margin: 0 auto;
  color: #e43c5c;
  text-align: center;
  font-family: 'Caveat', cursive;
  font-size: 1.4em;
}
.btn a:hover {
  box-shadow: 10px 10px 13px rgba(180, 233, 241, .3);
}

/*-------------------- mf3 */
#mf3 {
  background: #fff;
  z-index: 2;
  padding: 5vw 0;
}
#mf3 .cbox {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 80vw;
  margin: 5vw auto 0;
}
#mf3 .cbox figure {
  margin-left: 3%;
  width: 40%;
}
#mf3 .cbox figure img {
  width: 100%;
}
#mf3 .cbox .btn {
  margin: 2em 0 0 0;
}
#mf3 .cbox .btn a {
  display: block;
  width: 200px;
  line-height: 2.5em;
  border: 2px solid #e43c5c;
  margin: 0 auto;
  color: #e43c5c;
  text-align: center;
  font-family: 'Caveat', cursive;
  font-size: 1.4em;
}

/*-------------------- mf4 */
#mf4 {
  background: #fff;
  padding: 3vw 0;
  z-index: 2;
}
#mf4 .mf-frame {
width: auto;
padding: 3vw 0;
background: #e43c5c;
color: #fff;
text-align: center;
}
#mf4 h2 {
color: #fff;
font-size: 2.5em;
margin: 0 auto 1.5em;
}
#mf4 h2 span {
position: static;
font-size: 2em;
color: transparent;
-webkit-text-fill-color: #fff;
line-height: 1;
}
#mf4 h2:after {display: none;}

#mf4 p {
font-size: 1.2em;
}

/*-------------------- mf5 */
#mf5 {
  background: #fff;
  padding: 3vw 0;
  z-index: 2;
}
#mf5 .cbox {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 80vw;
  margin: 5vw auto;
  text-align: center;
  font-size: 1.2em;
  font-weight: bold;
}
#mf5 p {
margin-bottom: 1em;
}





@media screen and (max-width: 1400px) {
  .frame {
    width: auto;
  }
  .inner {
    width: 1000px;
  }
  #mainvis, #mainvis #bg {
    height: 85vh;
  }
  .mf2 {
    padding: 4vw 0 0;
  }
  .mf2 .cbox {
    background-position: left bottom 100px;
    height: 450px;
  }
  .mf3 .ibox {
    width: 45vw;
  }
  .mf3 li {
    margin: 2.5em 0 1em;
  }
}

@media screen and (max-width: 1024px) {
  body {
    font-size: 2.8vw;
  }
  #mainvis, #mainvis #bg {
    width: 100%;
    height: 47vh !important;
  }
  #mainvis #bg {
    background-size: cover;
    background-position-x: 10%;
  }
  #mf1 .mf-inner {
    width: 90vw;
    padding: 3em 0;
  }
  #mf1 ul {
    width: 90vw;
    height: 5em;
  }
  #mf2 .cbox,
  #mf3 .cbox {
    display: block;
    width: 100%;
    margin: 10vw auto;
  }
  #mf2 .cbox figure,
  #mf3 .cbox figure{
    width: 100%;
    margin: 0;
  }
  #mf2 .cbox .cboxs,
  #mf3 .cbox .cboxs {
    margin: 1em 0 0;
  }
  #mf2 .cbox .btn a,
  #mf3 .cbox .btn a {
    margin: 0 auto  0 0;
    width: 30vw;
  }
  #mf4 .mf-frame {
    padding: 8vw 5vw;
    text-align: left;
  }
  #mf4 h2 {
    font-size: 5vw;
  }
  #mf4 h2 span {
    font-size: 10vw;
  }
  #mf4 p {
    font-size: 3.5vw;
  }
  #mf5 .cbox {
    text-align: left;
  }
}

@media screen and (max-width: 768px) {
  #mainvis #bg {
    margin-top: 10vw;
    top: 0;
    width: 100%;
    height:100vh !important;
    background: url("../img/top/mvs.jpg") center top / cover no-repeat;
    transform-origin:center;
  }
  #mainvis {
    width: 100%;
    height: 100vh !important;
  }
}

@media screen and (max-width: 540px) {
  body {
    font-size: 3.4vw;
    line-height: 1.5;
  }
  #mainvis,
  #mainvis #bg {
    height: 80vh !important;
  }
  #mainvis #bg {
    margin-top: 0;
    background: url("../img/top/mvs.jpg") center top / contain no-repeat;
  }
  #mf1 ul {
    font-size: 3.2vw;
    padding: .6em .3em;
  }
  
  #mf5 p {
    margin: 1em 0;
    text-align: left;
    font-size: 3.6vw;
  }

  footer .cbox {
    width: 85vw;
  }
  footer img {
    width: 35vw;
  }
  footer .fbtn a {
    width: 42vw;
    line-height: 3.5;
    font-size: 2.6vw;
  }
  footer p {
    font-size: 1.8vw;
  }
}