@charset "UTF-8";
@import url(/css/root.css);
#container #contents .slick-dots {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  grid-gap: 0.25rem 10px;
  bottom: var(--s16_28);
}
#container #contents .slick-dots li {
  position: relative;
  display: inline-block;
  width: var(--s10_14);
  height: var(--s10_14);
  margin: 0;
  padding: 0;
  cursor: pointer;
  border: 1px solid #000;
  border-radius: 100%;
  background-color: #fff;
}
#container #contents .slick-dots li button {
  font-size: 0;
  line-height: 0;
  display: block;
  width: var(--s6_10);
  height: var(--s6_10);
  padding: 5px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 100%;
}
#container #contents .slick-dots li button::before {
  content: "";
}
#container #contents .slick-dots li.slick-active button {
  background-color: var(--mainblack);
}

/* ----------------------------------------------
　PC設定
------------------------------------------------*/
@media all and (min-width: 769px) {
  #container #contents {
    margin-bottom: var(--s32_48);
  }
  #container #contents .green_bg {
    padding: 0.35em;
    margin-bottom: 1em;
    position: relative;
    z-index: 1;
    text-align: center;
    background-color: rgba(57, 181, 74, 0.6);
  }
  #container #contents .green_bg .tit {
    font-size: var(--s18_28);
    color: #fff;
    font-weight: normal;
  }
  #container #contents .contact_area {
    margin-bottom: var(--s32_48);
    background-color: rgba(0, 0, 0, 0.3);
    padding: var(--s16_32);
  }
  #container #contents .contact_area .wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    grid-gap: var(--s8_16);
  }
  #container #contents .contact_area .wrapper h2 {
    text-align: center;
    font-size: var(--s18_24);
    color: #fff;
    width: 100%;
  }
  #container #contents .contact_area .wrapper .contact_box {
    max-width: 750px;
    width: 100%;
    border: 1px solid var(--mainblack);
    padding: 0.5rem;
    background-color: #fff;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    grid-gap: 0.5rem var(--s8_16);
  }
  #container #contents .contact_area .wrapper .contact_box .top_txt {
    width: 100%;
    font-weight: bold;
    font-size: var(--s12_14);
  }
  #container #contents .contact_area .wrapper .contact_box .tel_flex {
    width: 100%;
  }
  #container #contents .contact_area .wrapper .contact_box .tel_flex a {
    display: flex;
    grid-gap: 0.25rem;
    align-items: center;
    justify-content: center;
  }
  #container #contents .contact_area .wrapper .contact_box .tel_flex a img {
    max-width: 23px;
  }
  #container #contents .contact_area .wrapper .contact_box .tel_flex a .txt {
    font-size: var(--s20_28);
    font-weight: bold;
    line-height: 1;
    white-space: nowrap;
  }
  #container #contents .contact_area .wrapper .contact_box .time_box {
    display: flex;
    flex-wrap: wrap;
    grid-gap: 0.25em 1em;
  }
  #container #contents .contact_area .wrapper .contact_box .time_box .br {
    font-size: var(--s10_12);
  }
  #container #contents .contact_area .wrapper .butotn_area {
    max-width: 750px;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: center;
    grid-gap: var(--s8_16);
  }
  #container #contents .contact_area .wrapper .butotn_area .button {
    width: calc(50% - var(--s8_16) / 2);
  }
  #container #contents .contact_area .wrapper .butotn_area .button a img {
    width: auto;
    height: auto;
    -o-object-fit: contain;
       object-fit: contain;
    max-width: 40px;
    max-height: 40px;
  }
  #container #contents .contact_area .wrapper .butotn_area .button a .txt .br {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    font-size: var(--s14_16);
  }
  #container #contents .contact_area .wrapper .butotn_area .button a .txt .br .link {
    font-size: var(--s10_12);
    padding: 0.25em 1em;
    display: flex;
    align-items: center;
    justify-content: space-between;
    grid-gap: 0.25rem;
    width: -moz-fit-content;
    width: fit-content;
    line-height: 1;
    background-color: #5e5e5e;
    transition: background-color 0.5s;
    color: #fff;
  }
  #container #contents .contact_area .wrapper .butotn_area .button a .txt .br .link::after {
    content: "";
    display: inline-block;
    width: 8px;
    aspect-ratio: 0.95/1;
    -webkit-clip-path: polygon(0 0, 0% 100%, 100% 50%);
            clip-path: polygon(0 0, 0% 100%, 100% 50%);
    background-color: #fff;
    transition: background-color 0.5s;
  }
  #container #contents .contact_area .wrapper .butotn_area .button a:hover .txt .br .link {
    background-color: #fff;
    color: #5e5e5e;
  }
  #container #contents .contact_area .wrapper .butotn_area .button a:hover .txt .br .link::after {
    background-color: #5e5e5e;
  }
  #container #contents .title_row {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    background: #fff;
    margin-bottom: var(--s32_48);
  }
  #container #contents .title_row .txt {
    display: flex;
    align-items: center;
    background-color: rgba(57, 181, 74, 0.6);
    padding: var(--s8_16) var(--s20_32) var(--s8_16) var(--s8_16);
    -webkit-clip-path: polygon(0 0, 100% 0%, calc(100% - var(--s14_20)) 100%, 0% 100%);
            clip-path: polygon(0 0, 100% 0%, calc(100% - var(--s14_20)) 100%, 0% 100%);
    font-size: var(--s18_24);
    color: #fff;
  }
  #container #contents .title_row .txt .num {
    font-size: var(--s18_24);
    color: #fff;
    margin-left: 1em;
  }
  #container #contents .title_row .tit {
    font-size: var(--s18_24);
    display: flex;
    align-items: center;
  }
  #container #contents .image_area {
    width: 100%;
    padding: var(--s16_24) var(--s24_32);
    background-color: #fff;
    margin-bottom: var(--s32_48);
  }
  #container #contents .image_area .slider_area {
    margin: 0 auto;
    max-width: 850px;
  }
  #container #contents .image_area .slider_area figure {
    aspect-ratio: 3/2;
    overflow: hidden;
  }
  #container #contents .image_area .slider_area figure img {
    -o-object-fit: contain;
       object-fit: contain;
    max-width: 100%;
    max-height: 100%;
    height: 100%;
  }
  #container #contents .image_area .slider_area .slider {
    margin-bottom: var(--s8_16);
    position: relative;
  }
  #container #contents .image_area .slider_area .thumb figure {
    margin: 0 var(--s4_8);
  }
  #container #contents .outline_area {
    margin-bottom: var(--s32_48);
  }
  #container #contents .outline_area .table_area {
    padding: var(--s8_16);
    background-color: #fff;
  }
  #container #contents .outline_area .table_area table {
    width: 100%;
    border-collapse: collapse;
  }
  #container #contents .outline_area .table_area table tr {
    border-bottom: 1px solid #ccc;
  }
  #container #contents .outline_area .table_area table tr th {
    vertical-align: middle;
    padding: 1em;
    background-color: var(--green06);
    font-weight: normal;
    font-size: var(--s14_16);
    width: clamp(7.5rem, 3.854rem + 7.59vw, 10.5rem); /*120~168px(768~1400px)*/
  }
  #container #contents .outline_area .table_area table tr td {
    vertical-align: middle;
    padding: 1em;
    font-size: var(--s14_16);
  }
  #container #contents .sales_slider {
    overflow: hidden;
    position: relative;
    padding-bottom: max(1vw, 1rem);
    margin-bottom: var(--s32_48);
  }
  #container #contents .access_area {
    margin-bottom: var(--s32_48);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    grid-gap: var(--s8_16) var(--s16_24);
  }
  #container #contents .access_area .left {
    width: 60%;
  }
  #container #contents .access_area .left .gmap {
    aspect-ratio: 740/460;
  }
  #container #contents .access_area .right {
    width: calc(40% - var(--s16_24));
    display: flex;
    flex-wrap: wrap;
    grid-gap: var(--s16_24);
  }
  #container #contents .access_area .right figure {
    width: calc(50% - var(--s16_24) / 2);
  }
  #container #contents .access_area .right figure .frame {
    aspect-ratio: 3/2;
    display: flex;
    justify-content: center;
    background-color: #fff;
  }
  #container #contents .access_area .right figure .frame img {
    -o-object-fit: contain;
       object-fit: contain;
    max-width: 100%;
    max-height: 100%;
    height: 100%;
  }
  #container #contents .access_area .right figure figcaption {
    display: block;
  }
  #container #contents .access_area .right figure figcaption .br {
    font-size: var(--s10_12);
  }
  #container #contents .other_area {
    margin-bottom: var(--s32_48);
  }
}
@media all and (min-width: 769px) and (max-width: 980px) {
  #container #contents .access_area .left {
    width: 100%;
  }
  #container #contents .access_area .right {
    width: 100%;
  }
}
/* ----------------------------------------------
　PAD以下設定
------------------------------------------------*/
@media all and (max-width: 768px) {
  #container #contents {
    margin-bottom: var(--s32_48);
  }
  #container #contents .green_bg {
    padding: 0.35em;
    margin-bottom: 1em;
    position: relative;
    z-index: 1;
    text-align: center;
    background-color: rgba(57, 181, 74, 0.6);
  }
  #container #contents .green_bg .tit {
    font-size: var(--s18_28);
    color: #fff;
    font-weight: normal;
  }
  #container #contents .contact_area {
    margin-bottom: var(--s32_48);
    padding: var(--s16_32);
    background-color: rgba(0, 0, 0, 0.3);
  }
  #container #contents .contact_area .wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    grid-gap: var(--s16_24);
  }
  #container #contents .contact_area .wrapper h2 {
    text-align: center;
    font-size: var(--s18_24);
    color: #fff;
    width: 100%;
  }
  #container #contents .contact_area .wrapper .contact_box {
    border: 1px solid var(--mainblack);
    padding: 0.5rem;
    background-color: #fff;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    grid-gap: 0.5rem var(--s8_16);
    width: 100%;
    max-width: 400px;
  }
  #container #contents .contact_area .wrapper .contact_box .top_txt {
    width: 100%;
    font-weight: bold;
    font-size: var(--s12_14);
  }
  #container #contents .contact_area .wrapper .contact_box .tel_flex a {
    display: flex;
    grid-gap: 0.25rem;
    align-items: center;
  }
  #container #contents .contact_area .wrapper .contact_box .tel_flex a img {
    max-width: 23px;
  }
  #container #contents .contact_area .wrapper .contact_box .tel_flex a .txt {
    font-size: var(--s20_28);
    font-weight: bold;
    line-height: 1;
    white-space: nowrap;
  }
  #container #contents .contact_area .wrapper .contact_box .time_box .br {
    font-size: var(--s10_12);
  }
  #container #contents .contact_area .wrapper .butotn_area {
    max-width: 400px;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: center;
    grid-gap: var(--s16_24);
  }
  #container #contents .contact_area .wrapper .butotn_area .button {
    width: 100%;
  }
  #container #contents .contact_area .wrapper .butotn_area .button a img {
    width: auto;
    height: auto;
    -o-object-fit: contain;
       object-fit: contain;
    max-width: 40px;
    max-height: 40px;
  }
  #container #contents .contact_area .wrapper .butotn_area .button a .txt .br {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    font-size: var(--s14_16);
  }
  #container #contents .contact_area .wrapper .butotn_area .button a .txt .br .link {
    font-size: var(--s10_12);
    padding: 0.25em 1em;
    display: flex;
    align-items: center;
    justify-content: space-between;
    grid-gap: 0.25rem;
    width: -moz-fit-content;
    width: fit-content;
    line-height: 1;
    background-color: #5e5e5e;
    transition: background-color 0.5s;
    color: #fff;
  }
  #container #contents .contact_area .wrapper .butotn_area .button a .txt .br .link::after {
    content: "";
    display: inline-block;
    width: 8px;
    aspect-ratio: 0.95/1;
    -webkit-clip-path: polygon(0 0, 0% 100%, 100% 50%);
            clip-path: polygon(0 0, 0% 100%, 100% 50%);
    background-color: #fff;
    transition: background-color 0.5s;
  }
  #container #contents .contact_area .wrapper .butotn_area .button a:hover .txt .br .link {
    background-color: #fff;
    color: #5e5e5e;
  }
  #container #contents .contact_area .wrapper .butotn_area .button a:hover .txt .br .link::after {
    background-color: #5e5e5e;
  }
  #container #contents .title_row {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    background: #fff;
    margin-bottom: var(--s32_48);
  }
  #container #contents .title_row .txt {
    display: flex;
    align-items: center;
    background-color: rgba(57, 181, 74, 0.6);
    padding: var(--s8_16) var(--s20_32) var(--s8_16) var(--s8_16);
    -webkit-clip-path: polygon(0 0, 100% 0%, calc(100% - var(--s14_20)) 100%, 0% 100%);
            clip-path: polygon(0 0, 100% 0%, calc(100% - var(--s14_20)) 100%, 0% 100%);
    font-size: var(--s18_24);
    color: #fff;
  }
  #container #contents .title_row .txt .num {
    font-size: var(--s18_24);
    color: #fff;
    margin-left: 1em;
  }
  #container #contents .title_row .tit {
    font-size: var(--s18_24);
    display: flex;
    align-items: center;
  }
  #container #contents .image_area {
    width: 100%;
  }
  #container #contents .image_area .slider_area {
    margin-bottom: var(--s16_24);
  }
  #container #contents .image_area .slider_area figure {
    aspect-ratio: 3/2;
    overflow: hidden;
  }
  #container #contents .image_area .slider_area figure img {
    -o-object-fit: contain;
       object-fit: contain;
    max-width: 100%;
    max-height: 100%;
    height: 100%;
  }
  #container #contents .image_area .slider_area .slider {
    margin-bottom: var(--s8_16);
    position: relative;
  }
  #container #contents .image_area .slider_area .thumb figure {
    margin: 0 var(--s4_8);
  }
  #container #contents .image_area .point_icon {
    padding-bottom: var(--s4_8);
    margin-bottom: var(--s4_8);
    border-bottom: 1px solid var(--mainblack);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    grid-gap: 0.25rem;
  }
  #container #contents .image_area .point_icon .tit {
    font-weight: bold;
    color: #fff;
    aspect-ratio: 1/1;
    padding: 0.5em 0.25em;
    background-color: var(--green03);
    border-radius: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transform: rotate(-10deg);
  }
  #container #contents .image_area .point_icon img {
    max-width: 50px;
  }
  #container #contents .image_area .attetion {
    display: flex;
    flex-wrap: wrap;
  }
  #container #contents .image_area .attetion dt, #container #contents .image_area .attetion dd {
    font-size: var(--s12_14);
    font-weight: normal;
  }
  #container #contents .image_area .attetion dd:not(:last-of-type) {
    margin-right: 1em;
  }
  #container #contents .access_area {
    margin-bottom: var(--s32_48);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    grid-gap: var(--s8_16) var(--s16_24);
  }
  #container #contents .access_area .left {
    width: 100%;
  }
  #container #contents .access_area .left .gmap {
    aspect-ratio: 740/460;
  }
  #container #contents .access_area .right {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    grid-gap: var(--s16_24);
  }
  #container #contents .access_area .right figure {
    width: calc(50% - var(--s16_24) / 2);
  }
  #container #contents .access_area .right figure .frame {
    aspect-ratio: 3/2;
    display: flex;
    justify-content: center;
    background-color: #fff;
  }
  #container #contents .access_area .right figure .frame img {
    -o-object-fit: contain;
       object-fit: contain;
    max-width: 100%;
    max-height: 100%;
    height: 100%;
  }
  #container #contents .access_area .right figure figcaption {
    display: block;
  }
  #container #contents .access_area .right figure figcaption .br {
    font-size: var(--s10_12);
  }
  #container #contents .sales_slider {
    overflow: hidden;
    position: relative;
    padding-bottom: max(1vw, 1rem);
    margin-bottom: var(--s32_48);
  }
  #container #contents .outline_area {
    margin-bottom: var(--s32_48);
  }
  #container #contents .outline_area .table_area {
    padding: var(--s8_16);
    background-color: #fff;
  }
  #container #contents .outline_area .table_area table {
    width: 100%;
    border-collapse: collapse;
    display: block;
  }
  #container #contents .outline_area .table_area table tbody {
    display: block;
  }
  #container #contents .outline_area .table_area table tr {
    display: block;
    border-bottom: 1px solid #ccc;
  }
  #container #contents .outline_area .table_area table tr th {
    display: block;
    width: 100%;
    padding: 1em;
    background-color: var(--green06);
    font-weight: normal;
    font-size: var(--s14_16);
  }
  #container #contents .outline_area .table_area table tr td {
    display: block;
    width: 100%;
    padding: 1em;
    font-size: var(--s14_16);
  }
  #container #contents .other_area {
    margin-bottom: var(--s32_48);
  }
}
/* ----------------------------------------------
　SP調整
------------------------------------------------*/
@media all and (max-width: 620px) {
  #container #contents {
  }
  #container #contents .title_row {
    flex-direction: column-reverse;
    justify-content: center;
  }
  #container #contents .title_row .sale_box {
    width: 90%;
    margin: 0 auto;
  }
  #container #contents .title_row .sale_box .txt {
    -webkit-clip-path: unset;
            clip-path: unset;
    background: url(/images/catalog/sale_box.png) center/100% no-repeat;
    padding: 0.15em 1.5em;
    justify-content: center;
  }
  #container #contents .title_row .tit {
    width: 100%;
    padding: 0.5rem;
    justify-content: center;
  }
}
@media all and (max-width: 620px) {
  #container #contents .title_row .button_area .button a .txt {
    font-size: 12px;
  }
  /* #container #contents .outline_area .table_area {
    width: 100%;
    overflow: scroll;
    white-space: nowrap;
  } */
}