@charset "UTF-8";
* {
  margin: 0;
  padding: 0;
  list-style-type: none;
  border: none;
  box-sizing: border-box;
}

body {
  font-size: 16px;
}

h1, h2, h3, h4, h5, h6 {
  font-size: 16px;
  font-weight: 400;
}

img {
  width: 100%;
  display: block;
  border: none;
  -webkit-backface-visibility: hidden;
  image-rendering: -webkit-optimize-contrast;
}

.shippori {
  font-family: "Shippori Mincho", serif;
}

.notosans {
  font-family: "Noto Sans JP", sans-serif;
}

.marcellus {
  font-family: "Marcellus", serif;
}

.arsenal {
  font-family: "Arsenal", sans-serif;
}

.font_size_10 {
  font-size: 10px;
}

.font_size_12 {
  font-size: 12px;
}

.font_size_14 {
  font-size: 14px;
}

.font_size_16 {
  font-size: 16px;
}

.font_size_18 {
  font-size: 18px;
}

.font_size_20 {
  font-size: 20px;
}

.font_size_22 {
  font-size: 22px;
}

.font_size_24 {
  font-size: 24px;
}

.font_size_26 {
  font-size: 26px;
}

.font_size_28 {
  font-size: 28px;
}

.font_size_30 {
  font-size: 30px;
}

.font_size_32 {
  font-size: 32px;
}

.font_size_34 {
  font-size: 34px;
}

.font_size_36 {
  font-size: 36px;
}

.font_size_38 {
  font-size: 38px;
}

.font_size_40 {
  font-size: 40px;
}

.font_size_42 {
  font-size: 42px;
}

.font_size_44 {
  font-size: 44px;
}

.font_size_46 {
  font-size: 46px;
}

.font_size_48 {
  font-size: 48px;
}

.text_align_cl {
  text-align: center;
}
@media screen and (max-width: 768px) {
  .text_align_cl {
    text-align: left;
  }
}

.text_align_rl {
  text-align: right;
}
@media screen and (max-width: 768px) {
  .text_align_rl {
    text-align: left;
  }
}

.pdg_10 {
  padding: 10px;
}

.pdg_20 {
  padding: 20px;
}

.pdg_40 {
  padding: 40px;
}
@media screen and (max-width: 768px) {
  .pdg_40 {
    padding: 20px;
  }
}

.pdg_60 {
  padding: 60px;
}
@media screen and (max-width: 768px) {
  .pdg_60 {
    padding: 30px;
  }
}

.pdg_lr_10 {
  padding: 0 10px;
}

.pdg_lr_20 {
  padding: 0 20px;
}

.pdg_lr_25 {
  padding: 0 25px;
}

.pdg_lr_40 {
  padding: 0 40px;
}
@media screen and (max-width: 768px) {
  .pdg_lr_40 {
    padding: 0 20px;
  }
}

.pdg_lr_60 {
  padding: 0 60px;
}
@media screen and (max-width: 768px) {
  .pdg_lr_60 {
    padding: 0 30px;
  }
}

.pdg_tb_40 {
  padding: 40px 0;
}
@media screen and (max-width: 768px) {
  .pdg_tb_40 {
    padding: 20px 0;
  }
}

.pdg_tb_60 {
  padding: 60px 0;
}
@media screen and (max-width: 768px) {
  .pdg_tb_60 {
    padding: 30px 0;
  }
}

.pdg_tb_80 {
  padding: 80px 0;
}
@media screen and (max-width: 768px) {
  .pdg_tb_80 {
    padding: 80px 0;
  }
}

.pdg_tb_100 {
  padding: 100px 0;
}
@media screen and (max-width: 768px) {
  .pdg_tb_100 {
    padding: 100px 0;
  }
}

.mgn_10 {
  margin: 0 0 10px 0;
}

.mgn_20 {
  margin: 0 0 20px 0;
}

.mgn_40 {
  margin: 0 0 40px 0;
}
@media screen and (max-width: 768px) {
  .mgn_40 {
    margin: 0 0 20px 0;
  }
}

.mgn_60 {
  margin: 0 0 60px 0;
}
@media screen and (max-width: 768px) {
  .mgn_60 {
    margin: 0 0 30px 0;
  }
}

.mgn_80 {
  margin: 0 0 80px 0;
}
@media screen and (max-width: 768px) {
  .mgn_80 {
    margin: 0 0 40px 0;
  }
}

.mgn_100 {
  margin: 0 0 100px 0;
}
@media screen and (max-width: 768px) {
  .mgn_100 {
    margin: 0 0 50px 0;
  }
}

.mgn_120 {
  margin: 0 0 120px 0;
}
@media screen and (max-width: 768px) {
  .mgn_120 {
    margin: 0 0 60px 0;
  }
}

.mgn_auto_10 {
  margin: 0 auto 10px auto;
}

.mgn_auto_20 {
  margin: 0 auto 20px auto;
}

.mgn_auto_40 {
  margin: 0 auto 40px auto;
}
@media screen and (max-width: 768px) {
  .mgn_auto_40 {
    margin: 0 auto 20px auto;
  }
}

.mgn_auto_60 {
  margin: 0 auto 60px auto;
}
@media screen and (max-width: 768px) {
  .mgn_auto_60 {
    margin: 0 auto 30px auto;
  }
}

.mgn_auto_80 {
  margin: 0 auto 80px auto;
}
@media screen and (max-width: 768px) {
  .mgn_auto_80 {
    margin: 0 auto 40px auto;
  }
}

.mgn_auto_100 {
  margin: 0 auto 100px auto;
}
@media screen and (max-width: 768px) {
  .mgn_auto_100 {
    margin: 0 auto 50px auto;
  }
}

.mgn_auto {
  margin: auto;
}

.span_block > span {
  display: block;
}

.br_break {
  display: none;
}
@media screen and (max-width: 768px) {
  .br_break {
    display: block;
  }
}

.br_break_2 {
  display: block;
}
@media screen and (max-width: 768px) {
  .br_break_2 {
    display: none;
  }
}

.kv {
  aspect-ratio: 12/5;
  color: #fff;
  display: grid;
  align-items: center;
  position: relative;
  margin: 0 0 80px 0;
}
@media screen and (max-width: 768px) {
  .kv {
    aspect-ratio: 10/8;
    margin: 0 0 40px 0;
  }
}
.kv div {
  padding: 0 0 0 100px;
}
@media screen and (max-width: 768px) {
  .kv div {
    padding: 0 0 0 20px;
  }
}
.kv div h2 {
  font-family: "Marcellus", serif;
  font-size: 74px;
}
@media screen and (max-width: 768px) {
  .kv div h2 {
    font-size: 44px;
  }
}
.kv div p {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 16px;
}
@media screen and (max-width: 768px) {
  .kv div p {
    font-size: 14px;
  }
}
.kv ul {
  font-size: 14px;
  display: flex;
  position: absolute;
  right: 100px;
  bottom: 50px;
}
@media screen and (max-width: 768px) {
  .kv ul {
    font-size: 10px;
    right: 20px;
    bottom: 20px;
  }
}
.kv ul li a {
  color: #fff;
  text-decoration: underline;
}
.kv ul li a:hover {
  text-decoration: none;
}
.kv ul li span {
  padding: 0 0 0 10px;
}
.kv ul li span::before {
  content: " - ";
}

.headline {
  font-family: "Shippori Mincho", serif;
  font-size: 40px;
  text-align: center;
  margin: 0 0 80px 0;
  position: relative;
}
@media screen and (max-width: 768px) {
  .headline {
    font-size: 22px;
  }
}
.headline::before {
  content: "";
  width: 70px;
  position: absolute;
  border-bottom: 1px solid rgba(26, 26, 26, 0.4);
  bottom: -30px;
  left: 50%;
  transform: translate(-50%, 0);
}

.title span {
  font-family: "Marcellus", serif;
  font-size: 14px;
  color: #0E285E;
}
.title h2 {
  font-family: "Shippori Mincho", serif;
  font-size: 40px;
}
@media screen and (max-width: 768px) {
  .title h2 {
    font-size: 22px;
  }
}

.viewmore {
  font-family: "Marcellus", serif;
  font-size: 0.9em;
  color: #fff;
  text-decoration: none;
  padding: 10px 25px;
  border-radius: 20px;
  background-color: #0E285E;
}
.viewmore:hover {
  opacity: 0.7;
  transition: 0.3s;
}
.viewmore span::after {
  content: " →";
}

.scroll_1,
.scroll_2,
.scroll_3,
.scroll_4,
.scroll_5 {
  overflow-x: auto;
  white-space: nowrap;
  cursor: default;
  position: relative;
}
@media screen and (max-width: 768px) {
  .scroll_1,
  .scroll_2,
  .scroll_3,
  .scroll_4,
  .scroll_5 {
    cursor: grab;
  }
}
.scroll_1 .scroll_area_1,
.scroll_1 .scroll_area_2,
.scroll_1 .scroll_area_3,
.scroll_1 .scroll_area_4,
.scroll_1 .scroll_area_5,
.scroll_2 .scroll_area_1,
.scroll_2 .scroll_area_2,
.scroll_2 .scroll_area_3,
.scroll_2 .scroll_area_4,
.scroll_2 .scroll_area_5,
.scroll_3 .scroll_area_1,
.scroll_3 .scroll_area_2,
.scroll_3 .scroll_area_3,
.scroll_3 .scroll_area_4,
.scroll_3 .scroll_area_5,
.scroll_4 .scroll_area_1,
.scroll_4 .scroll_area_2,
.scroll_4 .scroll_area_3,
.scroll_4 .scroll_area_4,
.scroll_4 .scroll_area_5,
.scroll_5 .scroll_area_1,
.scroll_5 .scroll_area_2,
.scroll_5 .scroll_area_3,
.scroll_5 .scroll_area_4,
.scroll_5 .scroll_area_5 {
  display: none;
}
@media screen and (max-width: 768px) {
  .scroll_1 .scroll_area_1,
  .scroll_1 .scroll_area_2,
  .scroll_1 .scroll_area_3,
  .scroll_1 .scroll_area_4,
  .scroll_1 .scroll_area_5,
  .scroll_2 .scroll_area_1,
  .scroll_2 .scroll_area_2,
  .scroll_2 .scroll_area_3,
  .scroll_2 .scroll_area_4,
  .scroll_2 .scroll_area_5,
  .scroll_3 .scroll_area_1,
  .scroll_3 .scroll_area_2,
  .scroll_3 .scroll_area_3,
  .scroll_3 .scroll_area_4,
  .scroll_3 .scroll_area_5,
  .scroll_4 .scroll_area_1,
  .scroll_4 .scroll_area_2,
  .scroll_4 .scroll_area_3,
  .scroll_4 .scroll_area_4,
  .scroll_4 .scroll_area_5,
  .scroll_5 .scroll_area_1,
  .scroll_5 .scroll_area_2,
  .scroll_5 .scroll_area_3,
  .scroll_5 .scroll_area_4,
  .scroll_5 .scroll_area_5 {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    display: grid;
    align-items: center;
    justify-items: center;
    z-index: 1;
  }
  .scroll_1 .scroll_area_1 div,
  .scroll_1 .scroll_area_2 div,
  .scroll_1 .scroll_area_3 div,
  .scroll_1 .scroll_area_4 div,
  .scroll_1 .scroll_area_5 div,
  .scroll_2 .scroll_area_1 div,
  .scroll_2 .scroll_area_2 div,
  .scroll_2 .scroll_area_3 div,
  .scroll_2 .scroll_area_4 div,
  .scroll_2 .scroll_area_5 div,
  .scroll_3 .scroll_area_1 div,
  .scroll_3 .scroll_area_2 div,
  .scroll_3 .scroll_area_3 div,
  .scroll_3 .scroll_area_4 div,
  .scroll_3 .scroll_area_5 div,
  .scroll_4 .scroll_area_1 div,
  .scroll_4 .scroll_area_2 div,
  .scroll_4 .scroll_area_3 div,
  .scroll_4 .scroll_area_4 div,
  .scroll_4 .scroll_area_5 div,
  .scroll_5 .scroll_area_1 div,
  .scroll_5 .scroll_area_2 div,
  .scroll_5 .scroll_area_3 div,
  .scroll_5 .scroll_area_4 div,
  .scroll_5 .scroll_area_5 div {
    width: 100px;
  }
}

.off {
  opacity: 0;
  transition: 0.3s;
}

#customer_nav {
  width: min(1200px, 100%);
  margin: 0 auto 80px auto;
}
@media screen and (max-width: 768px) {
  #customer_nav {
    margin: 0 auto 40px auto;
  }
}
#customer_nav ul {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
@media screen and (max-width: 768px) {
  #customer_nav ul {
    grid-template-columns: repeat(1, 1fr);
  }
}
#customer_nav ul li a {
  padding: 20px;
  display: block;
  border-radius: 10px;
  color: #fff;
  position: relative;
}
#customer_nav ul li a:hover {
  opacity: 0.7;
  transition: 0.3s;
}
#customer_nav ul li a p {
  font-family: "Marcellus", serif;
  font-size: 24px;
}
#customer_nav ul li a span {
  font-size: 14px;
  font-family: "Noto Sans JP", sans-serif;
}
@media screen and (max-width: 768px) {
  #customer_nav ul li a span {
    font-size: 12px;
  }
}
#customer_nav ul li a::after {
  content: "→";
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translate(0, -50%);
}
#customer_nav ul li a.color_brown {
  background-color: #936227;
}
#customer_nav ul li a.color_green {
  background-color: #0a4c3b;
}
#customer_nav ul li a.color_navy {
  background-color: #0e285e;
}/*# sourceMappingURL=style.css.map */