@charset "UTF-8";
/*--------------------------------------------------

ここからがbase

--------------------------------------------------*/
* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.out-wrapper {
  overflow: hidden;
}
/*--------------------------------------------------

ここからがスマホの時の設定

--------------------------------------------------*/
@media screen and (max-width: 519px) {
  .s-phone-none {
    display: none;
  }

  .full-width {
    margin-left: -10.6666vw;
    margin-right: -10.6666vw;
    padding-left: 5.3333vw;
    padding-right: 5.3333vw;
  }
}
@media screen and (min-width: 520px) and (max-width: 959px) {
  .tb-none {
    display: none;
  }
}
@media screen and (min-width: 960px) {
  .pc-none {
    display: none;
  }

  .wrapper {
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
  }

  .full-width {
    margin-left: -10.6666vw;
    margin-right: -10.6666vw;
    padding-left: 5.3333vw;
    padding-right: 5.3333vw;
  }

  .wrapper .inner {
    padding-left: 3.125%;
    padding-right: 3.125%;
  }
}
/*--------------------------------------------------

ここからがbody

--------------------------------------------------*/
/*

header

*/
body {
  background: #f9f9f9;
  color: #333;
  line-height: 1.4;
  letter-spacing: 0.1rem;
  font-size: 16px;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
}

.main-header {
  top: 0;
  left: 0;
  width: 100%;
  height: 80px;
  background: #fff;
}
.main-header .global-navi {
  top: 0;
  left: 0;
  width: 100%;
  height: 80px;
  background: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.main-header .global-navi .logo {
  margin-left: 20px;
  margin-top: 20px;
  line-height: 80px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #03325e;
}
.main-header .global-navi .title {
  margin-left: 1.25rem;
  margin-right: 1.25rem;
  line-height: 80px;
  font-weight: bold;
}

/*

ハンバーガーメニュー

*/
.hb-menu {
  width: 80px;
  height: 80px;
  position: absolute;
  top: 0;
  right: 0;
  position: fixed;
  z-index: 101;
}
.hb-menu a {
  display: block;
  height: 100%;
}
.hb-menu a::before, .hb-menu a::after {
  content: "";
  display: block;
  width: 40px;
  height: 2px;
  background-color: #073763;
  position: absolute;
  top: 50%;
  margin-top: -9px;
  left: 20px;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.hb-menu a::after {
  margin-top: 5px;
}

.hb-deg {
  width: 80px;
  height: 80px;
  position: absolute;
  top: 0;
  right: 0;
  position: fixed;
  z-index: 101;
}
.hb-deg a {
  display: block;
  height: 100%;
}
.hb-deg a::before, .hb-deg a::after {
  content: "";
  display: block;
  width: 40px;
  height: 2px;
  background-color: #03325e;
  position: absolute;
  top: 50%;
  margin-top: -9px;
  left: 20px;
  -webkit-transition: 0.4s;
  transition: 0.4s;
  margin-top: 0;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
.hb-deg a::after {
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}

#js-nav {
  -webkit-transform: translateX(100%);
          transform: translateX(100%);
  -webkit-transition: 0.3s;
  transition: 0.3s;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 98;
  overflow-y: scroll;
  background-color: #fff;
  padding-top: 64px;
}
#js-nav.hb-show {
  -webkit-transform: translateX(0);
          transform: translateX(0);
  -webkit-transition: 0.4s;
  transition: 0.4s;
}
#js-nav #header-nav {
  width: 100%;
  height: 100%;
  background-color: #fff;
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 99;
  position: fixed;
}
#js-nav #header-nav ul {
  padding: 2rem;
}
#js-nav #header-nav ul li {
  margin-bottom: 4rem;
  font-size: 1.125rem;
}
#js-nav #header-nav ul li a {
  text-decoration: none;
  color: #333;
}

/*
//ロードした時にこのクラスを与えて要素が消えるようにしています
//transform で100px下に要素の位置を下げています
*/

.hide {
  opacity: 0;
  -webkit-transform: translateY(80px);
          transform: translateY(80px);
}

/*
opacity1で表示されるようにしています
transformで0にすることで
要素の位置までスクロールした時にこのクラスを指定して1秒かけて
80px下から元の位置まで戻ることでふわっと浮き上がるように見える
*/

.show {
  opacity: 1;
  -webkit-transition: 1s;
  transition: 1s;
  -webkit-transform: translateY(0px);
          transform: translateY(0px);
}


@media screen and (min-width: 960px) {
  .main-header {
    width: 100%;
  }
  .main-header .global-navi .title {
    width: 31.6666%;
    font-size: 1.25rem;
  }
  .main-header .global-navi .global-navi-menu {
    width: 58.3333%;
    position: relative;
  }
  .main-header .global-navi .global-navi-menu ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    padding-top: 2rem;
  }
  .main-header .global-navi .global-navi-menu ul li {
    font-size: 1.125rem;
    font-weight: bold;
  }
  .main-header .global-navi .global-navi-menu ul li a {
    text-decoration: none;
    color: #333;
  }
}
/*--------------------------------------------------

ここからがelements

--------------------------------------------------*/
h1, h2, h3, h4, h5, h6 {
  font-size: 1rem;
  font-weight: normal;
  line-height: 1.4;
  margin-bottom: 0.5rem;
}

p {
  text-align: justify;
}

img {
  vertical-align: bottom;
}

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

/*--------------------------------------------------

mv

--------------------------------------------------*/
.main-visual {
  width: 100%;
  height: 100vw;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background-image: url(../images/main.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
  margin: 0 auto;
}
.main-visual .main-visual-box .main-box h1 {
  font-size: 1.75rem;
  font-weight: bold;
}
.main-visual .main-visual-box .main-box P {
  font-size: 1.125rem;
}

@media screen and (min-width: 960px) {
  .main-visual {
    height: 600px;
    width: 100%;
  }
  .main-visual .main-visual-box {
    width: 100%;
  }
  .main-visual .main-visual-box .main-box {
    width: 100%;
  }
  .main-visual .main-visual-box .main-box h1 {
    font-size: 2.5rem;
    font-weight: bold;
    width: 100%;
  }
  .main-visual .main-visual-box .main-box p {
    font-size: 1.25rem;
    width: 100%;
  }
}
/*--------------------------------------------------

top main-contents

--------------------------------------------------*/
.main-wrapper {
  padding-left: 5.3333vw;
  padding-right: 5.3333vw;
}

/*--------------------------------------------------

ここから about

--------------------------------------------------*/
.top-about-wrapper {
    background-color: #f1f5f9;
    padding-top: 104px;
    padding-bottom: 104px;
    margin-left: -5.3333vw;
    margin-right: -5.3333vw;
    padding-left: 5.3333vw;
    padding-right: 5.3333vw;
    }
.top-about {
  margin-top: 104px;
  width: 100%;
  
}
.top-about h2 {
  font-size: 1.25rem;
  font-weight: bold;
}

.top-about .top-about-container{
   margin-top: 40px;
}


.top-about .top-about-container .top-about-box {
  margin-bottom: 2rem;
}
.top-about .top-about-container .top-about-box figure {
  width: 100%;
}
.top-about .top-about-container .top-about-box figure img {
  display: block;
  width: 100%;
  margin-bottom: 1rem;
}
.top-about .top-about-container .top-about-box h3 {
  margin-top: 24px;
  font-size: 1.125rem;
  font-weight: bold;
}
.top-about .top-about-container .top-about-box p {
  font-size: 1rem;
}

.top-about .top-about-container .top-about-box p span{
  font-weight: bold;
}

.top-about .top-about-container .top-about-box p:nth-of-type(1) {
  padding-top: 24px;
}

.top-about .top-about-container .top-about-box p:nth-of-type(n+2) {
  padding-top: 8px;
}

.top-about .js-btn {
  position: relative;
  display: block;
  width: 43.4782%;
  background-color: #ddd;
  text-align: center;
  position: relative;
  margin: 0 auto;
  height: 2.5rem;
  line-height: 2.5rem;
  font-weight: bold;
  font-size: 0.875rem;
  letter-spacing: 0;
  border-radius: 0.3125rem;
}
.top-about .js-btn a {
  text-decoration: none;
  color: #333;
}

@media screen and (min-width: 960px) {

  .top-about-wrapper {
    padding-top: 164px;
    }


  .top-about {
    margin-top: 164px;
    width: 100%;
  }
  .top-about h2 {
    font-size: 1.625rem;
    margin-bottom: 2rem;
  }
  .top-about .top-about-container {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  .top-about .top-about-container .top-about-box {
    width: 48.3333%;
    margin-bottom: 3rem;
  }
  .top-about .top-about-container .top-about-box:nth-of-type(1) {
    margin-right: 3.3333%;
  }
  .top-about .js-btn {
    width: 33.3333%;
  }


  .top-about .top-about-container .top-about-box h3 {
  margin-top: 32px;
  font-size: 1.5rem;
  font-weight: bold;
}
.top-about .top-about-container .top-about-box p {
    font-size: 1.25rem;

}

.top-about .top-about-container .top-about-box p span{
    font-weight: bold;

}

.top-about .top-about-container .top-about-box p:nth-of-type(1) {
  padding-top: 40px;
}

.top-about .top-about-container .top-about-box p:nth-of-type(n+2) {
  padding-top: 16px;
}
}
/*--------------------------------------------------

ここからがnews

--------------------------------------------------*/
.top-news {
  margin-top: 104px;
  width: 100%;
}
.top-news h2 {
  font-size: 1.25rem;
  font-weight: bold;
}
.top-news .top-news-container {
  margin-top: 40px;
}

.top-news .top-news-container .top-news-box {
  margin-bottom: 2rem;
}
.top-news .top-news-container .top-news-box figure {
  width: 100%;
}
.top-news .top-news-container .top-news-box figure img {
  display: block;
  width: 100%;
  margin-bottom: 1rem;
}
.top-news .top-news-container .top-news-box h3 {
  margin-top: 24px;
  font-size: 1.25rem;
  font-weight: bold;
}
.top-news .top-news-container .top-news-box p {
  font-size: 1rem;
}
.top-news .js-btn {
  position: relative;
  display: block;
  width: 43.4782%;
  background-color: #ddd;
  text-align: center;
  position: relative;
  margin: 0 auto;
  height: 2.5rem;
  line-height: 2.5rem;
  font-weight: bold;
  font-size: 0.875rem;
  letter-spacing: 0;
  border-radius: 0.3125rem;
}
.top-news .js-btn a {
  text-decoration: none;
  color: #333;
}

@media screen and (min-width: 960px) {
  .top-news {
    margin-top: 164px;
    width: 100%;
  }
  .top-news h2 {
    font-size: 1.625rem;
    margin-bottom: 2rem;
  }
  .top-news .top-news-container {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  .top-news .top-news-container .top-news-box {
    width: 31.1111%;
    margin-bottom: 3rem;
  }
  .top-news .top-news-container .top-news-box:nth-of-type(1n) {
    margin-right: 3.3333%;
  }
  .top-news .top-news-container .top-news-box:last-of-type {
    margin-right: 0;
  }
  .top-news .js-btn {
    width: 33.3333%;
  }

  .top-news .top-news-container .top-news-box h3 {
  margin-top: 32px;
  font-size: 1.25rem;
  font-weight: bold;
}
.top-news .top-news-container .top-news-box p {
  font-size: 1.25rem;
}
}
/*--------------------------------------------------

ここからがtheme

--------------------------------------------------*/
.top-theme {
  margin-top: 104px;
  width: 100%;
}
.top-theme h2 {
  font-size: 1.25rem;
  font-weight: bold;
}

.top-theme .top-theme-container {
  margin-top: 40px;
}

.top-theme .top-theme-container .top-theme-box {
  margin-bottom: 2rem;
}
.top-theme .top-theme-container .top-theme-box figure {
  width: 100%;
}
.top-theme .top-theme-container .top-theme-box figure img {
  display: block;
  width: 100%;
  margin-bottom: 1rem;
}
.top-theme .top-theme-container .top-theme-box h3 {
  margin-top: 24px;
  font-size: 1.25rem;
  font-weight: bold;
}
.top-theme .top-theme-container .top-theme-box p {
  font-size: 1rem;
}

.top-theme .top-theme-container .top-theme-box p span {
  font-weight: bold;
}


.top-theme .top-theme-container .top-theme-box p:nth-of-type(1) {
  padding-top: 24px;
}

.top-theme .top-theme-container .top-theme-box p:nth-of-type(n+2) {
  padding-top: 8px;
}

.top-theme .js-btn {
  position: relative;
  display: block;
  width: 43.4782%;
  background-color: #ddd;
  text-align: center;
  position: relative;
  margin: 0 auto;
  height: 2.5rem;
  line-height: 2.5rem;
  font-weight: bold;
  font-size: 0.875rem;
  letter-spacing: 0;
  border-radius: 0.3125rem;
}
.top-theme .js-btn a {
  text-decoration: none;
  color: #333;
}

@media screen and (min-width: 960px) {
  .top-theme {
    margin-top: 164px;
    width: 100%;
  }
  .top-theme h2 {
    font-size: 1.625rem;
    margin-bottom: 2rem;
  }
  .top-theme .top-theme-container {
    width: 100%;
    margin-top:64px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  .top-theme .top-theme-container .top-theme-box {
    width: 48.3333%;
    margin-bottom: 3rem;
  }
  .top-theme .top-theme-container .top-theme-box:nth-of-type(odd) {
    margin-right: 3.3333%;
  }
  .top-theme .js-btn {
    width: 33.3333%;
  }
  .top-theme .top-theme-container .top-theme-box h3 {
  margin-top:32px;
  font-size: 1.5rem;
  font-weight: bold;
}

.top-theme .top-theme-container .top-theme-box p {
  font-size: 1.25rem;
}

.top-theme .top-theme-container .top-theme-box p:nth-of-type(1) {
  padding-top: 40px;
}

.top-theme .top-theme-container .top-theme-box p:nth-of-type(n+2) {
  padding-top: 16px;
}
}
/*--------------------------------------------------

footer

--------------------------------------------------*/
.main-footer {
  padding-top: 2rem;
  padding-bottom: 2rem;
  margin-left: -5.3333vw;
  margin-right: -5.3333vw;
  padding-left: 5.3333vw;
  padding-right: 5.3333vw;
  background-color: #03325e;
  color: #fff;
}
.main-footer a {
  text-decoration: none;
  color: #fff;
}
.main-footer .footer-container .footer-top-link dl dt {
  font-weight: bold;
  font-size: 1.25rem;
  margin-bottom: 1rem;
}
.main-footer .footer-container .footer-top-link dl dd {
  font-size: 1.125rem;
  margin-bottom: 0.625rem;
}
/*# sourceMappingURL=style.css.map */