@charset "UTF-8";
/* media query */
/* SP縦から */
/* SP横から */
/* タブレット縦から */
/* フルワイド */
@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+JP&display=swap");
@import url(https://fonts.googleapis.com/earlyaccess/notosansjapanese.css);
body, html, #wrapper {
  overflow: visible !important;
}

.u_page {
  overflow: visible;
}

.u_page section {
  padding: 0 !important;
}

h2:after {
  display: none !important;
}

.side_nav {
  display: none !important;
}

.cv_btn {
  max-width: 500px;
  width: 100%;
  margin: 50px auto 0 auto;
}
.cv_btn.cross a {
  background-color: #8A7B42;
}
.cv_btn a {
  display: block;
  text-align: center;
  color: #fff;
  padding: 30px;
  box-sizing: border-box;
  background-color: #26014B;
  position: relative;
  font-size: 20px;
  line-height: 1.5;
}
@media all and (max-width: 480px) {
  .cv_btn a {
    padding: 20px;
    font-size: 16px;
  }
}
.cv_btn a:after {
  content: "▶";
  position: absolute;
  right: 20px;
  top: calc(50% - 12px);
}

.fixed_nav {
  position: -webkit-sticky;
  position: sticky;
  top: 126px;
  left: 0;
  z-index: 10;
  margin-bottom: 50px;
}
@media all and (max-width: 896px) {
  .fixed_nav {
    top: 50px;
  }
}
.fixed_nav ul {
  display: flex;
  width: 100%;
}
.fixed_nav ul li {
  width: 33.333%;
  padding: 15px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fixed_nav ul li.custom {
  background-color: #340060;
}
.fixed_nav ul li.fun {
  background-color: #2D3E15;
}
.fixed_nav ul li.tanto {
  background-color: #7C2731;
}
.fixed_nav ul li a {
  display: flex;
  align-items: center;
}
.fixed_nav ul li a img {
  width: 60%;
  margin: 0 auto;
}
.fixed_nav ul li:nth-child(2) a img {
  width: 65%;
}
@media all and (max-width: 480px) {
  .fixed_nav ul li:nth-child(2) a img {
    width: 80%;
  }
}

.side_cv {
  position: fixed;
  right: 0;
  top: 230px;
  z-index: 100;
}
@media all and (max-width: 480px) {
  .side_cv {
    right: 0;
    left: 0;
    top: auto;
    bottom: 0;
    width: 100%;
    display: flex;
  }
}
.side_cv a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 70px;
  height: 230px;
  text-align: center;
  writing-mode: vertical-rl;
  font-size: 18px;
  color: #fff;
  letter-spacing: 3px;
  font-weight: bold;
  transition: 0.5s;
  box-sizing: border-box;
}
@media all and (max-width: 480px) {
  .side_cv a {
    border-bottom: none;
    border-right: 5px solid #EB490B;
    width: 50%;
    font-size: 16px;
    letter-spacing: 1px;
  }
}
.side_cv a:hover {
  opacity: 0.6;
}
@media all and (max-width: 480px) {
  .side_cv a {
    width: 100%;
    height: 60px;
    -webkit-writing-mode: horizontal-tb;
    -ms-writing-mode: lr-tb;
    writing-mode: horizontal-tb;
  }
}
.side_cv a:first-child {
  background: #EC830D;
  border-top: 5px solid #EB490B;
  border-left: 5px solid #EB490B;
  border-bottom: 5px solid #EB490B;
}
.side_cv a:last-child {
  background: #78B3BB;
  margin-top: 20px;
  border-top: 5px solid #3b8e99;
  border-left: 5px solid #3b8e99;
  border-bottom: 5px solid #3b8e99;
}
@media all and (max-width: 480px) {
  .side_cv a:last-child {
    margin-top: 0;
    border-right: 5px solid #3b8e99;
  }
}

.bg_w {
  padding: 5vw 15px;
  background-color: #fff;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
@media all and (max-width: 480px) {
  .bg_w {
    padding: 5vw 0;
  }
}
.bg_w.pt0 {
  padding-top: 0;
}
.bg_w.gray {
  background-color: #96988E;
}
.bg_w.pink {
  background-color: #FAF1F1;
}
.bg_w ul {
  display: flex;
  justify-content: center;
  margin-top: 50px;
}
@media all and (max-width: 896px) {
  .bg_w ul {
    flex-wrap: wrap;
  }
}
@media all and (max-width: 480px) {
  .bg_w ul {
    margin-top: 20px;
  }
}
.bg_w ul li {
  margin: 10px;
  max-width: 500px;
}

.tokuten_flex {
  display: flex;
  justify-content: center;
  margin-top: 30px;
  max-width: 1000px;
}
@media all and (max-width: 480px) {
  .tokuten_flex {
    flex-wrap: wrap;
  }
}
.tokuten_flex li {
  margin: 10px;
}

.tokuten_caption {
  margin: 0 auto;
  max-width: 1250px;
  width: 100%;
}
.tokuten_caption.w1000 {
  max-width: 1000px;
}
.tokuten_caption p {
  font-size: 1.2rem;
  text-align: center;
}

.column {
  overflow: visible !important;
}
.column .area_door, .column .relative {
  position: relative;
}
.column .area_door .sec_txt, .column .relative .sec_txt {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 15px;
  box-sizing: border-box;
  background: rgba(23, 25, 71, 0.7);
  text-align: center;
  color: #fff;
  width: 100%;
}
@media all and (max-width: 480px) {
  .column .area_door .sec_txt, .column .relative .sec_txt {
    position: relative;
  }
}
.column .area_door .sec_txt h2, .column .relative .sec_txt h2 {
  font-size: 5rem;
  margin: 0 auto;
  text-align: center;
  font-weight: normal;
  line-height: 1.8;
}
@media all and (max-width: 480px) {
  .column .area_door .sec_txt h2, .column .relative .sec_txt h2 {
    font-size: 2.5rem;
  }
}
.column .area_door.relative .sec_txt, .column .relative.relative .sec_txt {
  background: rgba(138, 124, 64, 0.7);
}
.column .area_wankure {
  padding: 50px 0;
  overflow: visible !important;
}
.column .area_wankure dl {
  margin-top: 30px;
}
.column .area_wankure dl dt {
  padding: 15px 50px 15px 15px;
  text-align: center;
  background-color: #7C2731;
  color: #fff;
  font-weight: bold;
  font-size: 2.5rem;
  line-height: 1.6;
  cursor: pointer;
  position: relative;
}
@media all and (max-width: 480px) {
  .column .area_wankure dl dt {
    font-size: 1.8rem;
    text-align: left;
  }
}
.column .area_wankure dl dt:before {
  content: "\f055";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  position: absolute;
  top: 15px;
  right: 15px;
}
.column .area_wankure dl dt.active:before {
  content: "\f056";
}
.column .area_wankure dl dd {
  display: none;
}
.column .area_detail {
  background-color: #33005F;
  padding: 50px 0;
}
.column .area_detail.yellow {
  background-color: #8A7C40;
}
@media all and (max-width: 480px) {
  .column .area_detail.yellow {
    padding: 0;
  }
}
.column .area_detail.yellow dl {
  margin-top: 0;
}
.column .area_detail.yellow dl > div dt {
  background-color: #fff;
}
.column .area_detail.yellow dl > div dd {
  text-align: center;
  padding: 30px 10px;
  line-height: 2;
}
.column .area_detail.yellow dl > div dd span {
  font-size: 2.2rem;
  display: block;
  line-height: 1.5;
  margin-bottom: 15px;
}
.column .area_detail dl {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 50px;
}
.column .area_detail dl > div {
  width: calc(33.333% - 20px);
  margin: 10px;
  background-color: #fff;
}
@media all and (max-width: 480px) {
  .column .area_detail dl > div {
    width: 100%;
    margin: 0 0 50px 0;
  }
}
.column .area_detail dl > div dt {
  color: #fff;
  text-align: center;
  font-size: 2.5rem;
  line-height: 1.8;
  background-color: #33005F;
}
@media all and (max-width: 480px) {
  .column .area_detail dl > div dt {
    font-size: 2rem;
  }
}
.column .area_detail dl > div dd {
  padding: 15px;
  box-sizing: border-box;
  background-color: #fff;
}
.column .area_detail .caption {
  font-size: 1.2rem;
  margin-top: 30px;
  color: #fff;
}
@media all and (max-width: 480px) {
  .column .area_detail .caption {
    margin-top: 0;
  }
}
.column .area_variation {
  padding: 50px 0;
}
.column .area_variation .slick-slide {
  height: auto !important;
}
.column .area_variation .slick-slide img {
  max-width: none !important;
  width: 100% !important;
  padding: 10px;
  box-sizing: border-box;
}
.column .area_variation .thumb-item-nav, .column .area_variation .thumb-item-nav02 {
  margin: 30px auto 0 auto;
  max-width: 90%;
}
.column .area_variation .thumb-item-nav li, .column .area_variation .thumb-item-nav02 li {
  height: 50px;
  border: 3px solid #fff;
  box-sizing: border-box;
  cursor: pointer;
}
@media all and (max-width: 480px) {
  .column .area_variation .thumb-item-nav li, .column .area_variation .thumb-item-nav02 li {
    height: 30px;
  }
}
.column .area_variation .thumb-item-nav li:hover, .column .area_variation .thumb-item-nav02 li:hover {
  opacity: 0.7;
  transition: 0.3s;
}
.column .area_variation .thumb-item-nav li.slide01, .column .area_variation .thumb-item-nav02 li.slide01 {
  background: #DFE5E8;
}
.column .area_variation .thumb-item-nav li.slide02, .column .area_variation .thumb-item-nav02 li.slide02 {
  background: #000000;
}
.column .area_variation .thumb-item-nav li.slide03, .column .area_variation .thumb-item-nav02 li.slide03 {
  background: #44494C;
}
.column .area_variation .thumb-item-nav li.slide04, .column .area_variation .thumb-item-nav02 li.slide04 {
  background: #56477F;
}
.column .area_variation .thumb-item-nav li.slide05, .column .area_variation .thumb-item-nav02 li.slide05 {
  background: #4A9DB2;
}
.column .area_variation .thumb-item-nav li.slide06, .column .area_variation .thumb-item-nav02 li.slide06 {
  background: #1E4254;
}
.column .area_variation .thumb-item-nav li.slide07, .column .area_variation .thumb-item-nav02 li.slide07 {
  background: #A42C2F;
}
.column .area_variation .thumb-item-nav li.slide08, .column .area_variation .thumb-item-nav02 li.slide08 {
  background: #EEF2F3;
}
.column .area_variation .thumb-item-nav li.slide09, .column .area_variation .thumb-item-nav02 li.slide09 {
  background: #A42C2F;
}
.column .area_variation .thumb-item-nav li.slide_01, .column .area_variation .thumb-item-nav02 li.slide_01 {
  background: #769094;
}
.column .area_variation .thumb-item-nav li.slide_02, .column .area_variation .thumb-item-nav02 li.slide_02 {
  background: #BBA971;
}
.column .area_variation .thumb-item-nav li.slide_03, .column .area_variation .thumb-item-nav02 li.slide_03 {
  background: #586843;
}
.column .area_variation .thumb-item-nav li.slide_04, .column .area_variation .thumb-item-nav02 li.slide_04 {
  background: #C13629;
}
.column .area_variation .thumb-item-nav li.slide_05, .column .area_variation .thumb-item-nav02 li.slide_05 {
  background: #EAEEF1;
}
.column .area_variation .thumb-item-nav li.slide_06, .column .area_variation .thumb-item-nav02 li.slide_06 {
  background: #000000;
}
.column .area_variation .thumb-item-nav li.slide_07, .column .area_variation .thumb-item-nav02 li.slide_07 {
  background: #2A2F32;
}
.column .area_variation .thumb-item-nav li.slide_08, .column .area_variation .thumb-item-nav02 li.slide_08 {
  background: #27596E;
}
.column .area_variation .thumb-item-nav li.slide_09, .column .area_variation .thumb-item-nav02 li.slide_09 {
  background: #769094;
}
.column .area_variation .thumb-item-nav li.slide_10, .column .area_variation .thumb-item-nav02 li.slide_10 {
  background: #A42C2F;
}
.column .area_variation .thumb-item-nav li.slide_11, .column .area_variation .thumb-item-nav02 li.slide_11 {
  background: #BBA971;
}
.column .area_variation .thumb-item-nav li.slide_12, .column .area_variation .thumb-item-nav02 li.slide_12 {
  background: #586843;
}
.column .area_variation .thumb-item-nav li.slide_13, .column .area_variation .thumb-item-nav02 li.slide_13 {
  background: #EAEEF1;
}
.column .area_variation .thumb-item-nav li.half, .column .area_variation .thumb-item-nav02 li.half {
  position: relative;
}
.column .area_variation .thumb-item-nav li.half:before, .column .area_variation .thumb-item-nav02 li.half:before {
  content: "";
  display: block;
  width: 100%;
  height: 50%;
  background-color: #000;
  position: absolute;
  top: 0;
  left: 0;
}
@media all and (max-width: 480px) {
  .column .area_variation .thumb-item-nav .slick-slide {
    width: 20% !important;
  }
}
.column .area_variation .thumb-item-nav02 .slick-slide {
  width: 12.5% !important;
}
@media all and (max-width: 480px) {
  .column .area_variation .thumb-item-nav02 .slick-slide {
    width: 20% !important;
  }
}
.column .area_bgred {
  background: #FAF1F1;
  text-align: center;
}
.column .area_bgred h2 {
  font-size: 3rem;
  color: #fff;
  line-height: 1.5;
  margin-bottom: 20px;
  text-align: center;
}

.cv_foot {
  display: flex;
}

.cv {
  background: #AE1123;
  padding: 30px 0;
}
.cv ul {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.cv ul li {
  width: calc(25% - 20px);
  margin: 10px;
}
@media all and (max-width: 896px) {
  .cv ul li {
    width: calc(50% - 20px);
  }
}
@media all and (max-width: 480px) {
  .cv ul li {
    width: calc(50% - 10px);
    margin: 5px;
  }
}
.cv ul li a {
  display: block;
  width: 100%;
  padding: 20px 15px;
  box-sizing: border-box;
  text-align: center;
  background: #fff;
  color: #AE1123;
}
@media all and (max-width: 480px) {
  .cv ul li a {
    padding: 15px;
  }
}