@charset "UTF-8";
/* 追従ボタン */
.follow-nav {
  width: 100%;
  z-index: 100;
}

@media only screen and (max-width: 768px) {
  .follow-nav {
    position: relative;
  }
}

.follow-nav__list {
  background-color: #fff;
  max-width: 950px;
  margin: 0 auto;
  padding: 20px 0;
}

.follow-nav__content {
  font-size: 12px;
  font-size: 0.75rem;
  display: inline-block;
  margin-right: 7px;
  position: relative;
}

.follow-nav__content a {
  color: #004098;
  display: block;
  border: 1px solid #004098;
  padding: 8px 30px 8px 10px;
}

.follow-nav__content a:hover {
  text-decoration: none;
  opacity: 0.7;
  transition: 0.3s;
}

.follow-nav__content a:hover + span {
  transition: 0.3s;
  opacity: 0.7;
  transform: translateY(3px) rotate(135deg);
}

.follow-nav__arrow {
  transform: rotate(135deg);
  position: absolute;
  top: 36%;
  right: 10px;
  width: 8px;
  height: 8px;
  border-top: 2px solid #004098;
  border-right: 2px solid #004098;
  transition: 0.3s;
  display: inline-block;
}

@media only screen and (max-width: 768px) {
  .follow-nav__head {
    background-color: #004098;
    width: 100%;
    height: auto;
    box-sizing: border-box;
    padding: 16px 16px 16px 0;
  }
  .follow-nav__head .hum {
    width: 30px;
    height: 26px;
    margin-left: auto;
    position: relative;
  }
  .follow-nav__head .hum .humbar {
    display: block;
    width: 30px;
    padding: 1px 0;
    background-color: #fff;
    position: absolute;
  }
  .follow-nav__head .hum .humbar:nth-child(1) {
    top: 0;
    transition: 0.4s;
  }
  .follow-nav__head .hum .humbar:nth-child(2) {
    top: 12px;
    transition: 0.4s;
  }
  .follow-nav__head .hum .humbar:nth-child(3) {
    top: 24px;
    transition: 0.4s;
  }
  .follow-nav__head .hum.hum_active .humbar:nth-child(1) {
    transform: rotate(45deg);
    transition: 0.6s;
    top: 10px;
  }
  .follow-nav__head .hum.hum_active .humbar:nth-child(2) {
    transform: translateX(-60px) scale(0);
    opacity: 0;
    transition: 0.5s;
  }
  .follow-nav__head .hum.hum_active .humbar:nth-child(3) {
    transform: rotate(-45deg);
    transition: 0.6s;
    top: 10px;
  }
  .follow-nav__list {
    background-color: #004098;
    margin: 0 auto;
    padding: 0 0 40px;
    box-sizing: border-box;
    position: absolute;
    top: -46;
    right: 0;
    width: 100%;
    display: none;
  }
  .follow-nav__content {
    font-size: 14px;
    font-size: 0.875rem;
    display: block;
    margin: 16px 20px 0;
    position: relative;
  }
  .follow-nav__content a {
    color: #fff;
    display: block;
    border: none;
    border-bottom: 1px dashed #fff;
    text-align: center;
    padding: 12px 0;
  }
  .follow-nav__content a:hover {
    text-decoration: none;
    opacity: 0.7;
    transition: 0.3s;
  }
  .follow-nav__content a:hover + span {
    transition: 0.3s;
    opacity: 0.7;
    transform: translateY(3px) rotate(135deg);
  }
}

.follow-nav.active {
  position: fixed;
  top: 0;
  left: 0;
  height: 76px;
  box-shadow: 0px 0px 6px 2px rgba(150, 150, 150, 0.4);
  background-color: #fff;
}

@media only screen and (max-width: 768px) {
  .follow-nav.active {
    bottom: 0;
    left: 0;
    width: 100%;
    height: 58px;
    overflow-x: unset;
  }
}

@media only screen and (min-width: 769px) {
  .follow-nav.active .follow-nav__list {
    padding: 20px 0;
  }
}

/* タイマー */
.timer_btn {
  display: inline-block;
  padding: 8px 12px;
  border: 1px solid #004098;
  color: #004098;
  transition: 0.3s;
}

@media only screen and (min-width: 769px) {
  .timer_btn:hover {
    cursor: pointer;
    background-color: #004098;
    color: #fff;
    transition: 0.3s;
  }
}

.timer_note {
  margin-top: 6px;
}

.timer_txt {
  text-align: center;
  font-weight: bold;
  font-size: 18px;
  font-size: 1.125rem;
  color: #f00;
  margin: 0 auto 10px auto;
  padding: 15px 10px;
  border: 5px solid #f00;
}

/* pagetopスクロール */
#Wrapper {
  position: relative;
}

/* slick.js */
.slider {
  width: 50%;
  margin: 0 auto;
}

.slick-slide {
  margin: 0px 20px;
  -webkit-transition: all ease-in-out .3s;
  transition: all ease-in-out .3s;
}

.slick-slide img {
  width: 100%;
}

.slick-prev:before,
.slick-next:before {
  color: black;
}

.slick-active {
  opacity: 1;
}

.slick-current {
  opacity: 1;
}

.regular {
  margin-top: 30px;
  padding-top: 50px;
}

@media only screen and (max-width: 768px) {
  .slider {
    width: 100%;
  }
}

/* modaal.js */
.modal_btn {
  display: inline-block;
  padding: 8px 12px;
  color: #004098;
  border: 1px solid #004098;
  transition: 0.3s;
}

@media only screen and (min-width: 769px) {
  .modal_btn:hover {
    background-color: #044098;
    color: #fff;
    transition: 0.3s;
  }
}

.modal_img {
  width: 150px;
  height: auto;
  margin-top: 30px;
  display: block;
  transition: 0.3s;
}

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

.modal_img:hover {
  opacity: 0.7;
  transition: 0.3s;
}

.modaal-noscroll {
  padding-right: 0px !important;
}

/* validate.js */
form {
  width: 50%;
}

@media only screen and (max-width: 768px) {
  form {
    width: 100%;
  }
}

.error {
  color: #ff0000;
}

@media (max-width: 768px) {
  .modaal-inner-wrapper {
    width: 60%;
  }
}

.form {
  width: 100%;
}

.form__list {
  width: 40%;
}

.form__content {
  padding: 6px 0;
  font-size: 16px;
  font-size: 1rem;
}

.form__content input {
  border: 1px solid #555;
  padding: 6px 0;
}

.form__content textarea {
  resize: vertical;
  max-height: 800px;
  outline: 0;
  border: 1px solid #555;
}

.form__content input:focus, .form__content textarea:focus {
  outline: 0;
  border: 1px solid #004098;
}

.form__submit-btn {
  width: 150px;
  border: none;
  padding: 12px 0;
  margin-top: 20px;
  font-weight: bold;
  transition: 0.3s;
  background-color: #efefef;
  color: #ddd;
}

.form__submit-btn.active {
  background-color: #ddd;
  color: #555;
}

.form__submit-btn.active:hover {
  opacity: 0.7;
  transition: 0.3s;
  cursor: pointer;
}

@media only screen and (max-width: 768px) {
  .form__list {
    width: 100%;
  }
}

/* アイソトープ */
.btn {
  text-align: center;
  min-height: 50px;
  display: flex;
  justify-content: space-between;
  width: 400px;
  margin: 30px auto;
  font-size: 0px;
  font-size: 0rem;
}

.btn .color_btn {
  display: inline-block;
  cursor: pointer;
  background-color: transparent;
  border: none;
  outline: none;
  padding: 0;
  appearance: none;
  padding: 10px 16px;
  border-bottom: 1px solid #666;
  transition: 0.3s;
}

@media only screen and (min-width: 769px) {
  .btn .all_btn:hover {
    border-bottom: 4px solid #111;
    transition: 0.2s;
    color: #111;
  }
  .btn .red_btn:hover {
    border-bottom: 4px solid #b80312;
    transition: 0.2s;
    color: #b80312;
  }
  .btn .green_btn:hover {
    border-bottom: 4px solid #0da000;
    transition: 0.2s;
    color: #0da000;
  }
  .btn .blue_btn:hover {
    border-bottom: 4px solid #0d0099;
    transition: 0.2s;
    color: #0d0099;
  }
  .btn .yellow_btn:hover {
    border-bottom: 4px solid #b3a403;
    transition: 0.2s;
    color: #b3a403;
  }
}

@media only screen and (max-width: 768px) {
  .btn {
    min-height: 30px;
    width: 90%;
  }
  .btn .color_btn {
    margin-right: 0;
    padding: 4px;
  }
  .btn .all_btn {
    border-bottom: 4px solid #111;
    color: #111;
  }
  .btn .red_btn {
    border-bottom: 4px solid #b80312;
  }
  .btn .green_btn {
    border-bottom: 4px solid #0da000;
  }
  .btn .blue_btn {
    border-bottom: 4px solid #0d0099;
  }
  .btn .yellow_btn {
    border-bottom: 4px solid #b3a403;
  }
}

.outer {
  min-height: 280px;
}

.outer .setbox {
  width: 420px;
  margin: 0 auto;
  clear: both;
  box-sizing: border-box;
  font-size: 0px;
}

.outer .setbox .setbox_list {
  list-style-type: none;
  width: 120px;
  height: 120px;
  float: left;
  margin: 10px;
  color: #fff;
  text-align: center;
  font-size: 1.4rem;
  line-height: 120px;
}

.outer .setbox .red {
  background-color: #b80312;
}

.outer .setbox .green {
  background-color: #0da000;
}

.outer .setbox .blue {
  background-color: #0d0099;
}

.outer .setbox .yellow {
  background-color: #b3a403;
}

.outer .setbox .show {
  animation: 0.5s zoom;
}

@keyframes zoom {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}

.outer .setbox:after {
  clear: both;
  content: '';
  display: block;
}

@media only screen and (max-width: 768px) {
  .outer {
    min-height: 280px;
  }
  .outer .setbox {
    width: 280px;
    margin: 0 auto;
    box-sizing: border-box;
    font-size: 0px;
  }
  .outer .setbox .setbox_list {
    list-style-type: none;
    width: 120px;
    height: 120px;
    float: none;
    margin: 10px;
    font-size: 1.2rem;
    line-height: 120px;
    display: inline-block;
  }
  .outer .setbox .red {
    background-color: #b80312;
  }
  .outer .setbox .green {
    background-color: #0da000;
  }
  .outer .setbox .blue {
    background-color: #0d0099;
  }
  .outer .setbox .yellow {
    background-color: #b3a403;
  }
  .outer .setbox .show {
    animation: 0.5s zoom;
  }
  @keyframes zoom {
    0% {
      transform: scale(0);
    }
    100% {
      transform: scale(1);
    }
  }
}

/* もっと見る（cssのみ） */
.gradation__wrapper {
  position: relative;
  padding-bottom: 24px;
}

.gradation__wrapper .gradation-trigger {
  display: none;
}

.gradation__wrapper .gradation-trigger:checked ~ .gradation-button {
  bottom: -1.5em;
}

.gradation__wrapper .gradation-trigger:checked ~ .gradation-button::after {
  content: "閉じる";
}

.gradation__wrapper .gradation-trigger:checked ~ .gradation-button:hover {
  opacity: 0.4;
  transition: 0.3s;
}

.gradation__wrapper .gradation-trigger:checked ~ .gradation-content-area {
  height: auto;
}

.gradation__wrapper .gradation-trigger:checked ~ .gradation-content-area::before {
  display: none;
}

.gradation__wrapper .gradation-button {
  z-index: 2;
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 100px;
  cursor: pointer;
  line-height: 1;
  text-align: center;
  font-size: 14px;
  font-size: 0.875rem;
  color: #004098;
  transition: .2s ease;
  border: 1px solid #044098;
  padding: 8px;
}

.gradation__wrapper .gradation-button::after {
  content: "もっと見る";
}

.gradation__wrapper .gradation-button:hover {
  opacity: 0.4;
  transition: 0.3s;
}

.gradation__wrapper .gradation-content-area {
  position: relative;
  overflow: hidden;
  height: 150px;
}

.gradation__wrapper .gradation-content-area::before {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 150px;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), color-stop(70%, white), to(white));
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, white 70%, white 100%);
}

.gradation__wrapper .gradation-content-area .toggle_txt {
  font-size: 16px;
  font-size: 1rem;
}

/* もっと見る（jQuery） */
.gradation__wrapper2 {
  position: relative;
  text-align: center;
}

.gradation__wrapper2 .gradation-trigger2 {
  z-index: 2;
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 100px;
  cursor: pointer;
  line-height: 1;
  font-size: 14px;
  font-size: 0.875rem;
  text-align: center;
  transition: .2s ease;
  color: #004098;
  border: 1px solid #044098;
  padding: 8px;
}

.gradation__wrapper2 .gradation-trigger2::after {
  content: "もっと見る";
}

.gradation__wrapper2 .gradation-trigger2.is-show {
  bottom: -3em;
}

.gradation__wrapper2 .gradation-trigger2.is-show::after {
  content: "閉じる";
}

.gradation__wrapper2 .gradation-trigger2.is-show + .gradation-content-area2::before {
  display: none;
}

.gradation__wrapper2 .gradation-trigger2:hover {
  opacity: 0.4;
  transition: 0.3s;
}

.gradation__wrapper2 .gradation-content-area2 {
  position: relative;
  overflow: hidden;
  text-align: left;
}

.gradation__wrapper2 .gradation-content-area2::before {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 150px;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), color-stop(70%, white), to(white));
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, white 70%, white 100%);
}

.gradation__wrapper2 .gradation-content-area2.is-hide {
  height: 150px;
}

.gradation__wrapper2 .gradation-content-area2 .toggle_txt {
  font-size: 16px;
  font-size: 1rem;
}

/* 遅延ロード */
.lazy {
  box-sizing: border-box;
}

.lazy__box {
  width: 100%;
  text-align: center;
  margin-top: 30px;
}

.lazy__box img {
  width: 700px;
  height: 432px;
}

.lazy__box:first-child {
  margin-top: 60px;
}

.lazy__box:last-child {
  margin-bottom: 60px;
}

@media only screen and (max-width: 768px) {
  .lazy__box img {
    width: 100%;
    height: auto;
  }
}

.box-fadein img {
  opacity: 0;
  -webkit-transition: opacity 3s;
  transition: opacity 3s;
}

.box-fadein.lazyloaded img.lazyloaded {
  opacity: 1;
}