/*! Writen  by SCSS */
.lead {
  font-size: clamp(15px, 1.69vw, 22px);
  color: #333;
  letter-spacing: 0.1em; }
  @media screen and (max-width: 480px) {
    .lead {
      letter-spacing: 0; } }

.sec01 {
  background: #fff url("../images/charm/bg.jpg") top center/contain no-repeat;
  padding-bottom: clamp(40px, 5%, 60px); }

.sec01_main_wrap {
  position: relative;
  margin-bottom: clamp(30px, 4.17%, 50px); }
  .sec01_main_wrap .sec01_main_head {
    position: absolute;
    inset: 0;
    width: fit-content;
    height: fit-content;
    margin: auto;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 3.75vw;
    line-height: 1;
    padding: 0.5em 0.83em; }
    @media screen and (max-width: 480px) {
      .sec01_main_wrap .sec01_main_head {
        font-size: 20px; } }
    .sec01_main_wrap .sec01_main_head .text {
      position: relative;
      z-index: 2; }
    .sec01_main_wrap .sec01_main_head .min {
      display: block;
      font-size: 0.6em;
      letter-spacing: 0.05em;
      margin-bottom: 0.4em; }
      @media screen and (max-width: 480px) {
        .sec01_main_wrap .sec01_main_head .min {
          font-size: 0.7em; } }
    .sec01_main_wrap .sec01_main_head::before {
      content: "";
      display: block;
      position: absolute;
      inset: 0;
      mix-blend-mode: multiply;
      background: #936f29; }
  .sec01_main_wrap img {
    width: 100%; }

.sec01_head {
  max-width: 624px;
  width: 52%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 20px; }
  @media screen and (max-width: 480px) {
    .sec01_head {
      width: 90%; } }

.sec01_top_lead_01 {
  margin-bottom: clamp(30px, 4.17%, 50px); }

.sec01_view_image {
  margin-top: clamp(30px, 4.17%, 50px); }

.sec01_outer_image {
  margin-top: clamp(50px, 6.67%, 80px); }

.sec01_south_image {
  margin-top: clamp(25px, 3.34%, 40px);
  background: #fff;
  padding: 20px 1.66%;
  margin-bottom: clamp(40px, 5.84%, 70px);
  box-shadow: 10px 10px 5px rgba(175, 207, 229, 0.3); }

.sec01_b_head {
  font-size: clamp(18px, 2.25vw, 28px);
  line-height: 1.72;
  text-align: center;
  color: #48678d;
  margin-bottom: clamp(25px, 3.34%, 40px); }

.sec01_bg_head {
  background: #000;
  color: #fff;
  text-align: center;
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
  font-size: clamp(16px, 1.69vw, 21px);
  margin-bottom: 20px;
  line-height: 1;
  padding: 0.71em 0.2em;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px; }

.sec01_b_image_wrap {
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: clamp(30px, 4.17%, 50px);
  align-items: flex-start;
  justify-content: center;
  gap: 0 2.6%; }
  @media screen and (max-width: 480px) {
    .sec01_b_image_wrap {
      flex-direction: column;
      align-items: center;
      gap: 20px;
      width: 90%; } }
  .sec01_b_image_wrap .image_box_left {
    max-width: 427px;
    width: 44.48%; }
    @media screen and (max-width: 480px) {
      .sec01_b_image_wrap .image_box_left {
        width: 94.89%; } }
  .sec01_b_image_wrap .image_box_right {
    max-width: 451px;
    width: 46.98%; }
    @media screen and (max-width: 480px) {
      .sec01_b_image_wrap .image_box_right {
        width: 100%; } }

.sec01_list {
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 30px 3.22%; }
  @media screen and (max-width: 480px) {
    .sec01_list {
      flex-direction: column;
      gap: 20px 0; } }
  .sec01_list .item {
    position: relative;
    z-index: 2;
    width: 48.13%;
    display: flex;
    background: #fff;
    box-shadow: 10px 10px 5px rgba(175, 207, 229, 0.3); }
    @media screen and (max-width: 480px) {
      .sec01_list .item {
        width: 100%; } }
    .sec01_list .item::after {
      content: "";
      display: block;
      position: absolute;
      z-index: -1;
      width: 25.98%;
      height: fit-content;
      aspect-ratio: 1 / 1;
      background: rgba(152, 194, 232, 0.4);
      right: -2.16%;
      bottom: -4.4%; }
    .sec01_list .item .item_image {
      max-width: 260px;
      width: 56.28%; }
      .sec01_list .item .item_image img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center; }
    .sec01_list .item .text_box {
      background: #fff;
      width: 43.73%;
      padding: 3.89%;
      display: flex;
      flex-direction: column;
      justify-content: center; }
      .sec01_list .item .text_box .item_head {
        font-size: clamp(13px, 1.45vw, 18px);
        color: #6088b9;
        line-height: 1.17;
        margin-bottom: 1em; }
      .sec01_list .item .text_box .item_text {
        font-size: clamp(10px, 1.04vw, 13px);
        line-height: 1.62; }

.view_outer {
  margin-top: clamp(50px, 6.67%, 80px); }

.view_wrap_sp {
  position: relative; }

.view_image img {
  width: 100%; }

@media screen and (max-width: 480px) {
  .pano_image {
    width: 100%;
    height: 300px;
    position: relative;
    text-align: center;
    overflow: auto; } }
.pano_image img {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  max-width: none;
  height: 100%; }

@media screen and (max-width: 480px) {
  .view_swipe,
  .view_swipe02 {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
    z-index: 1;
    animation: horizontal 1s ease-in-out infinite alternate; }
    .view_swipe img,
    .view_swipe02 img {
      display: block;
      max-width: 184px;
      margin: 0 auto; } }

@keyframes horizontal {
  0% {
    transform: translate(-15%, 0); }
  100% {
    transform: translate(15%, 0); } }
.swiper-pagination-bullet {
  border-radius: 0 !important; }

/*# sourceMappingURL=charm.css.map */