@charset "UTF-8";
/* Scss Document */
/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */
html {
  line-height: 1.15;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%; }

body {
  margin: 0; }

article,
aside,
footer,
header,
nav,
section {
  display: block; }

figcaption,
figure,
main {
  display: block; }

figure {
  margin: 1em 40px; }

hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible; }

pre {
  font-family: monospace, monospace;
  font-size: 1em; }

a {
  background-color: transparent;
  -webkit-text-decoration-skip: objects; }

abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  text-decoration: underline dotted; }

b,
strong {
  font-weight: inherit;
  font-weight: bolder; }

code,
kbd,
samp {
  font-family: monospace, monospace;
  font-size: 1em; }

dfn {
  font-style: italic; }

mark {
  background-color: #ff0;
  color: #000; }

small {
  font-size: 80%; }

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline; }

sub {
  bottom: -0.25em; }

sup {
  top: -0.5em; }

audio,
video {
  display: inline-block; }

audio:not([controls]) {
  display: none;
  height: 0; }

img {
  border-style: none; }

svg:not(:root) {
  overflow: hidden; }

button,
input,
optgroup,
select,
textarea {
  font-family: sans-serif;
  font-size: 100%;
  line-height: 1.15;
  margin: 0; }

button,
input {
  overflow: visible; }

button,
select {
  text-transform: none; }

button,
html [type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button; }

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0; }

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText; }

fieldset {
  padding: 0.35em 0.75em 0.625em; }

legend {
  box-sizing: border-box;
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal; }

progress {
  display: inline-block;
  vertical-align: baseline; }

textarea {
  overflow: auto; }

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box;
  padding: 0; }

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto; }

[type="search"] {
  -webkit-appearance: textfield;
  outline-offset: -2px; }

[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none; }

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit; }

details,
menu {
  display: block; }

summary {
  display: list-item; }

canvas {
  display: inline-block; }

template {
  display: none; }

[hidden] {
  display: none; }

/*---------------------------------------------------
		base
----------------------------------------------------*/
html {
  font-size: 62.5%;
  scroll-behavior: smooth; }

body {
  position: relative;
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 1.0rem;
  color: #000;
  line-height: 1.6;
  background: #fff;
  font-feature-settings: "palt"; }

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: normal; }

a:link,
a:hover,
a:active,
a:visited {
  text-decoration: none; }

a {
  transition: .5s;
  color: #000; }

a:hover {
  opacity: 0.7; }

img {
  max-width: 100%;
  height: auto; }

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

li {
  list-style: none; }

p,
ul,
li,
dl,
dt,
dd,
h1,
h2,
h3,
h4,
h5 {
  margin: 0;
  padding: 0; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

*:focus {
  outline: none; }

@media screen and (max-width: 768px) {
  a {
    transition: 0; }

  a:hover {
    opacity: 1; } }
[data-ruby] {
  position: relative; }

[data-ruby]::before {
  content: attr(data-ruby);
  position: absolute;
  top: -1em;
  left: 0;
  right: 0;
  margin: auto;
  font-size: 0.4em;
  width: max-content; }

_::-webkit-full-page-media, _:future, :root [data-ruby]::before {
  top: -0.6em !important; }

/*---------------------------------------------------
		common
----------------------------------------------------*/
main {
  max-width: 750px;
  margin: 0 auto; }

.bg_white {
  background: url(../img/bg_stripe_white.png) repeat 0 0; }

.color_white {
  color: #fff; }

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

.back_margin {
  margin-top: -2vw; }

p {
  font-size: 24px; }
  @media screen and (max-width: 768px) {
    p {
      font-size: 14px; } }

.center {
  text-align: center; }

h1, h2, h3 {
  font-size: 0; }

footer {
  background: #eee;
  padding: 6vw 0 0;
  text-align: center; }
  @media screen and (max-width: 768px) {
    footer {
      padding: 40px 0 0; } }
  footer .bnr {
    margin-bottom: 40px; }
    @media screen and (max-width: 768px) {
      footer .bnr {
        padding: 0 6%; } }
  footer .line_title {
    width: 30vw;
    margin: 0 auto 2vw; }
    @media screen and (max-width: 768px) {
      footer .line_title {
        width: 70vw; } }
  footer .line_bnr {
    margin-bottom: 60px; }
    @media screen and (max-width: 768px) {
      footer .line_bnr {
        margin: 0 20px 30px; } }
  footer .sns_title {
    width: 18vw;
    margin: 0 auto 2vw; }
    @media screen and (max-width: 768px) {
      footer .sns_title {
        width: 40vw; } }
  footer .sns {
    display: flex;
    justify-content: space-between;
    max-width: 540px;
    margin: 0 auto 80px; }
    @media screen and (max-width: 768px) {
      footer .sns {
        max-width: 90%;
        margin-bottom: 0; } }
    footer .sns li {
      width: 31%; }
  footer .footer_bottom {
    background: #000;
    color: #fff;
    font-size: 1.4rem;
    padding: 20px 0; }
    @media screen and (max-width: 768px) {
      footer .footer_bottom {
        font-size: 1.2rem; } }

header {
  background: #000;
  border-bottom: 1px solid #FFF;
  padding: 6px 10px 6px 10px;
  overflow: hidden !important;
  text-align: left; }
  header .header_logo {
    line-height: 1; }

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

.all_bg {
  background: url(../img/bg.jpg) center center no-repeat;
  background-size: cover;
  background-attachment: fixed;
  width: 100%; }
  @media screen and (max-width: 768px) {
    .all_bg {
      background: none; } }

/*---------------------------------------------------
		contents
----------------------------------------------------*/
#event {
  padding-bottom: 6vw;
  background: #fff; }
  @media screen and (max-width: 768px) {
    #event {
      font-family: "Hiragino Sans", "Helvetica Neue", sans-serif; } }
  #event .search {
    padding-bottom: 2vw;
    background: #f7e3d5; }
    #event .search .title {
      background: #4c2400;
      margin: 0 0 3vw;
      padding: 25px 5vw; }
      @media screen and (max-width: 768px) {
        #event .search .title {
          padding: 15px 5vw;
          margin-bottom: 16px; } }
    #event .search h3 {
      margin-bottom: 1.6vw;
      font-size: 5rem;
      font-weight: bold; }
      @media screen and (max-width: 768px) {
        #event .search h3 {
          margin-bottom: 10px;
          font-size: 2rem; } }
    #event .search ul {
      display: flex;
      flex-wrap: wrap; }
      @media screen and (max-width: 768px) {
        #event .search ul:nth-child(2) {
          margin-bottom: 20px; } }
      #event .search ul:nth-child(4) {
        margin-bottom: 30px; }
    #event .search li {
      width: 50%;
      margin-bottom: 1vw;
      font-size: 2.4rem;
      position: relative;
      padding-left: 50px; }
      @media screen and (max-width: 768px) {
        #event .search li {
          font-size: 1.6rem;
          padding-left: 35px;
          margin-bottom: 10px; } }
      #event .search li::before {
        content: '';
        background: url(../img/check_off.webp) 0 0 no-repeat;
        background-size: contain;
        width: 40px;
        height: 40px;
        position: absolute;
        left: 0; }
        @media screen and (max-width: 768px) {
          #event .search li::before {
            width: 28px;
            height: 28px; } }
      #event .search li.on::before {
        content: '';
        background: url(../img/check_on.webp) 0 0 no-repeat;
        background-size: contain; }
    #event .search .search_area li {
      width: 100%; }
    @media screen and (max-width: 768px) {
      #event .search .sp_oneline li {
        width: 100%; } }
    #event .search .btn_search {
      width: 80%;
      margin: 2vw auto 1vw; }
      @media screen and (max-width: 768px) {
        #event .search .btn_search {
          width: 90%;
          margin: 6vw auto 3vw; } }
    #event .search .btn_reset {
      width: 20vw;
      margin: 0 auto 2vw; }
      @media screen and (max-width: 768px) {
        #event .search .btn_reset {
          width: 50vw; } }
  #event .event_list {
    padding-top: 4vw;
    max-width: 640px;
    margin: 0 auto; }
    @media screen and (max-width: 768px) {
      #event .event_list {
        max-width: 90%;
        padding-top: 40px; } }
    #event .event_list li {
      margin-bottom: 8vw; }
      @media screen and (max-width: 768px) {
        #event .event_list li {
          margin-bottom: 60px; } }
      #event .event_list li .category span {
        font-weight: 600;
        font-size: 2rem;
        margin-bottom: 1vw;
        display: inline-block;
        padding: 10px 20px;
        color: #fff; }
        @media screen and (max-width: 768px) {
          #event .event_list li .category span {
            font-size: 1.3rem;
            margin-bottom: 15px;
            padding: 5px 10px; } }
      #event .event_list li h4 {
        font-weight: 800;
        font-size: 4rem;
        padding-bottom: 1vw;
        margin-bottom: 2vw;
        line-height: 1.3;
        border-bottom: 4px dotted #000; }
        @media screen and (max-width: 768px) {
          #event .event_list li h4 {
            font-size: 2rem;
            margin-bottom: 15px;
            border-bottom: 2px dotted #000; } }
      #event .event_list li .time {
        font-weight: 700;
        font-size: 3rem;
        margin-bottom: 2vw; }
        @media screen and (max-width: 768px) {
          #event .event_list li .time {
            font-size: 1.6rem;
            margin-bottom: 15px; } }
      #event .event_list li .img {
        margin-bottom: 24px; }
        @media screen and (max-width: 768px) {
          #event .event_list li .img {
            margin-bottom: 16px; } }
      #event .event_list li p {
        margin-bottom: 24px; }
        @media screen and (max-width: 768px) {
          #event .event_list li p {
            line-height: 1.8;
            margin-bottom: 16px; } }
      #event .event_list li .discription {
        border: 2px solid #000;
        padding: 20px;
        font-size: 1.8rem;
        margin-bottom: 24px; }
        @media screen and (max-width: 768px) {
          #event .event_list li .discription {
            font-size: 1.4rem;
            padding: 12px; } }
      #event .event_list li .reservation {
        font-size: 1.6rem;
        text-align: center; }
        @media screen and (max-width: 768px) {
          #event .event_list li .reservation {
            margin-top: 30px; } }
      #event .event_list li .profile {
        background: #eee3c7;
        padding: 20px;
        margin-bottom: 24px; }
        #event .event_list li .profile .leader_name {
          font-size: 2rem;
          text-align: center;
          margin-bottom: 16px; }
        #event .event_list li .profile .profile_text {
          font-size: 1.6rem;
          margin-top: 16px; }
    #event .event_list .cate_chikyu {
      background: #0054af; }
    #event .event_list .cate_mizu {
      background: #006fad; }
    #event .event_list .cate_kaze {
      background: #ef6600; }
    #event .event_list .cate_hi {
      background: #c6001d; }
    #event .event_list .cate_chi {
      background: #6b3d00; }
    #event .event_list .cate_other {
      background: #2c7000; }
    #event .event_list .cate_sora {
      background: #451296; }
    #event .event_list .cate_tokusetu {
      background: #e7194a; }
    #event .event_list .cate_tokubetu {
      background: #ffb600; }
    #event .event_list .cate_suku {
      background: #ea86ae; }

#goods {
  color: #fff; }
  @media screen and (max-width: 768px) {
    #goods {
      font-family: "Hiragino Sans", "Helvetica Neue", sans-serif; } }
  #goods .life {
    background: #ea86ae;
    clip-path: polygon(0 1%, 100% 0, 100% 100%, 0% 100%);
    padding: 130px 0 100px;
    margin-top: -55px;
    position: relative; }
    @media screen and (max-width: 768px) {
      #goods .life {
        clip-path: polygon(0 1%, 100% 0, 100% 100%, 0% 100%);
        padding: 62px 0 100px;
        margin-top: -25px; } }
    #goods .life .illust {
      position: absolute;
      right: 20px;
      top: 20px; }
      @media screen and (max-width: 768px) {
        #goods .life .illust {
          width: 100px;
          right: 10px; } }
    #goods .life h2 {
      width: 68%;
      margin-bottom: 24px; }
      @media screen and (max-width: 768px) {
        #goods .life h2 {
          margin-bottom: 16px; } }
  #goods .living {
    background: #f4ba5b;
    clip-path: polygon(0 1%, 100% 0, 100% 100%, 0% 100%);
    padding: 130px 0 100px;
    margin-top: -120px; }
    @media screen and (max-width: 768px) {
      #goods .living {
        clip-path: polygon(0 1%, 100% 0, 100% 100%, 0% 100%);
        padding: 100px 0 80px; } }
    #goods .living h2 {
      width: 78%;
      margin-bottom: 24px; }
      @media screen and (max-width: 768px) {
        #goods .living h2 {
          margin-bottom: 16px; } }
  #goods .nature {
    background: #5dc187;
    clip-path: polygon(0 1%, 100% 0, 100% 100%, 0% 100%);
    padding: 130px 0 60px;
    margin-top: -80px; }
    @media screen and (max-width: 768px) {
      #goods .nature {
        padding: 80px 0 60px; } }
    #goods .nature h2 {
      width: 78%;
      margin-bottom: 24px; }
      @media screen and (max-width: 768px) {
        #goods .nature h2 {
          margin-bottom: 16px; } }
  #goods .container {
    max-width: 640px;
    margin: 0 auto; }
    @media screen and (max-width: 768px) {
      #goods .container {
        max-width: 94%; } }
  #goods ul li {
    margin: 0 auto 64px; }
  #goods ul .bland {
    background: #fff;
    color: #000;
    font-weight: 600;
    font-size: 2.6rem;
    margin-bottom: 1vw;
    display: inline-block;
    padding: 8px 16px; }
    @media screen and (max-width: 768px) {
      #goods ul .bland {
        font-size: 1.4rem;
        margin-bottom: 15px;
        padding: 5px 10px; } }
  #goods ul .img {
    margin-bottom: 32px; }
    @media screen and (max-width: 768px) {
      #goods ul .img {
        margin-bottom: 16px; } }
  @media screen and (max-width: 768px) {
    #goods ul p {
      line-height: 1.8; } }
  #goods ul h4 {
    font-weight: 800;
    font-size: 5rem;
    padding-bottom: 1vw;
    margin-bottom: .1em;
    line-height: 1.3; }
    @media screen and (max-width: 768px) {
      #goods ul h4 {
        font-size: 2.6rem;
        margin-bottom: 8px; } }
  #goods ul dl {
    display: flex;
    flex-wrap: wrap;
    font-size: 2.4rem;
    margin-top: 2vw; }
    @media screen and (max-width: 768px) {
      #goods ul dl {
        font-size: 1.4rem;
        margin-top: 16px; } }
    #goods ul dl dt {
      width: 19%;
      position: relative;
      margin-right: 1%; }
      #goods ul dl dt::after {
        content: '：';
        position: absolute;
        right: 0; }
    #goods ul dl dd {
      width: 70%; }
  #goods .kansei_title {
    margin-top: -64px; }

#leader main {
  border-top: 20px solid #754813;
  padding: 24px 0 40px; }
  @media screen and (max-width: 768px) {
    #leader main {
      padding: 8px 0 40px; } }
#leader h1 {
  margin-bottom: 24px; }
#leader .container {
  max-width: 90%;
  margin: 0 auto 40px; }
#leader .photo {
  margin-bottom: 24px; }
  @media screen and (max-width: 768px) {
    #leader .photo {
      margin-bottom: 8px; } }
#leader p {
  margin-bottom: 80px; }
  @media screen and (max-width: 768px) {
    #leader p {
      margin-bottom: 40px; } }
#leader .img {
  margin-bottom: 20px;
  position: relative; }
  @media screen and (max-width: 768px) {
    #leader .img {
      margin-bottom: 24px; } }
#leader ul {
  margin-bottom: 40px; }
  #leader ul li {
    font-size: 0; }

#top {
  text-align: center; }
  #top h1 {
    font-size: 0; }
  #top .kv_text {
    font-size: 3rem;
    color: #fff;
    background: #0091c4;
    padding: 32px 0; }
    @media screen and (max-width: 768px) {
      #top .kv_text {
        font-size: 1.7rem; } }
  #top .section01 {
    background-image: url(../img/top_section01_bg.webp), linear-gradient(90deg, #b0e9fc, #87c8e6);
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center top;
    padding: 40px 0 160px; }
    @media screen and (max-width: 768px) {
      #top .section01 {
        padding-top: 20px; } }
    #top .section01 p {
      font-weight: 700;
      font-size: 3.2rem;
      margin-top: -80px;
      margin-bottom: 40px; }
      @media screen and (max-width: 768px) {
        #top .section01 p {
          font-size: 1.8rem;
          margin-top: -30px;
          margin-bottom: 20px; } }
      #top .section01 p .big {
        font-size: 130%; }
    @media screen and (max-width: 768px) {
      #top .section01 .map {
        width: 90%;
        margin: 0 auto; } }
  #top .section02 {
    background: url(../img/top_section02_bg.webp) top center no-repeat;
    background-size: cover;
    padding-top: 80px;
    padding-bottom: 120px;
    margin-top: -120px; }
    #top .section02 .category {
      margin-bottom: 24px; }
      @media screen and (max-width: 768px) {
        #top .section02 .category {
          width: 70%;
          margin: 0 auto; } }
    #top .section02 > p {
      color: #fff;
      font-weight: 700;
      font-size: 3rem; }
      @media screen and (max-width: 768px) {
        #top .section02 > p {
          font-size: 1.8rem; } }
    #top .section02 #slick_event {
      margin: 40px 0; }
      @media screen and (max-width: 768px) {
        #top .section02 #slick_event {
          margin: 32px 0 24px; } }
      #top .section02 #slick_event li {
        background: #fff;
        border-radius: 20px;
        border: 4px solid #0d54ba;
        padding: 24px;
        height: 610px; }
        @media screen and (max-width: 768px) {
          #top .section02 #slick_event li {
            padding: 24px 16px;
            height: 440px; } }
        #top .section02 #slick_event li .area {
          width: 300px;
          margin: 0 auto 16px; }
          @media screen and (max-width: 768px) {
            #top .section02 #slick_event li .area {
              width: 80%; } }
        #top .section02 #slick_event li .img {
          margin-bottom: 16px; }
        #top .section02 #slick_event li p {
          font-size: 3rem;
          margin-bottom: 16px;
          text-align: left;
          font-weight: bold;
          line-height: 1.5; }
          @media screen and (max-width: 768px) {
            #top .section02 #slick_event li p {
              font-size: 1.8rem; } }
        #top .section02 #slick_event li .date {
          background: #002a91;
          color: #fff;
          border-radius: 100px;
          padding: 4px 3em;
          display: inline-block;
          font-size: 3rem;
          font-weight: bold; }
          @media screen and (max-width: 768px) {
            #top .section02 #slick_event li .date {
              font-size: 1.8rem; } }
      #top .section02 #slick_event .slick-slide {
        width: 100%;
        max-width: 500px;
        margin: 0 16px; }
        @media screen and (max-width: 768px) {
          #top .section02 #slick_event .slick-slide {
            max-width: 320px;
            margin: 0 10px; } }
        #top .section02 #slick_event .slick-slide img {
          width: 100%; }
    #top .section02 .btn {
      width: 80%;
      margin: 0 auto; }
  #top .section03 {
    background: #eee3c7;
    position: relative;
    padding-bottom: 40px;
    padding-top: 40px; }
    @media screen and (max-width: 768px) {
      #top .section03 {
        margin-top: -50px; } }
    #top .section03::before {
      content: '';
      width: 100%;
      height: 300px;
      background: url(../img/top_section03_bg.webp) top center no-repeat;
      background-size: 100% auto;
      position: absolute;
      top: -80px;
      left: 0; }
      @media screen and (max-width: 768px) {
        #top .section03::before {
          top: -40px; } }
    #top .section03 .category {
      position: relative;
      z-index: 2; }
    #top .section03 h2 {
      margin-top: -50px; }
      @media screen and (max-width: 768px) {
        #top .section03 h2 {
          margin-top: -20px; } }
    #top .section03 .step01 {
      max-width: 96%;
      margin: -40px auto 24px; }
      @media screen and (max-width: 768px) {
        #top .section03 .step01 {
          max-width: 94%;
          margin-top: -24px;
          margin-bottom: 16px; } }
      @media screen and (max-width: 768px) {
        #top .section03 .step01 p {
          font-size: 1.7rem; } }
      #top .section03 .step01 h4 {
        max-width: 80%;
        margin: 24px auto 0; }
        @media screen and (max-width: 768px) {
          #top .section03 .step01 h4 {
            max-width: 100%; } }
      #top .section03 .step01 .container {
        background: #fff;
        padding: 40px 24px 16px; }
        @media screen and (max-width: 768px) {
          #top .section03 .step01 .container {
            padding: 32px 16px 16px; } }
      #top .section03 .step01 li {
        margin-bottom: 24px; }
        @media screen and (max-width: 768px) {
          #top .section03 .step01 li {
            margin-bottom: 16px; } }
    #top .section03 .arrow {
      margin-bottom: 24px; }
      @media screen and (max-width: 768px) {
        #top .section03 .arrow {
          width: 20%;
          margin: 0 auto 8px; } }
    #top .section03 .step02 {
      max-width: 96%;
      margin: 0 auto 24px; }
      @media screen and (max-width: 768px) {
        #top .section03 .step02 {
          max-width: 94%;
          margin-bottom: 16px; } }
      #top .section03 .step02 .container {
        background: #fff;
        padding: 40px 24px 24px; }
        @media screen and (max-width: 768px) {
          #top .section03 .step02 .container {
            padding: 32px 16px 24px; } }
        #top .section03 .step02 .container p {
          margin-bottom: 24px; }
          @media screen and (max-width: 768px) {
            #top .section03 .step02 .container p {
              font-size: 1.7rem; } }
    #top .section03 .step03 {
      max-width: 96%;
      margin: 0 auto 24px; }
      @media screen and (max-width: 768px) {
        #top .section03 .step03 {
          max-width: 94%; } }
      #top .section03 .step03 .container {
        background: #fff;
        padding: 0 24px 60px; }
        @media screen and (max-width: 768px) {
          #top .section03 .step03 .container {
            padding: 0 16px 24px; } }
        #top .section03 .step03 .container p {
          margin-bottom: 24px; }
          @media screen and (max-width: 768px) {
            #top .section03 .step03 .container p {
              font-size: 1.6rem; } }
  #top .section04 {
    background: url(../img/top_section04_bg.webp) 0 0 no-repeat;
    background-size: cover;
    padding: 80px 0 140px; }
    @media screen and (max-width: 768px) {
      #top .section04 {
        padding-bottom: 100px; } }
    @media screen and (max-width: 768px) {
      #top .section04 .category {
        width: 70%;
        margin: 0 auto; } }
    #top .section04 p {
      margin-top: -40px;
      margin-bottom: 40px; }
      @media screen and (max-width: 768px) {
        #top .section04 p {
          font-size: 1.8rem;
          margin-top: 0; } }
    #top .section04 .btn01 {
      width: 80%;
      margin: 0 auto 60px; }
      @media screen and (max-width: 768px) {
        #top .section04 .btn01 {
          margin-bottom: 32px; } }
    #top .section04 .img {
      max-width: 94%;
      margin: 0 auto 40px; }
      @media screen and (max-width: 768px) {
        #top .section04 .img {
          margin-bottom: 24px; } }
    @media screen and (max-width: 768px) {
      #top .section04 .cta {
        max-width: 94%;
        margin: 0 auto; } }
    #top .section04 .btn02 {
      width: 90%;
      margin: 0 auto; }
  #top .section05 {
    position: relative;
    padding-top: 50px; }
    #top .section05::before {
      content: '';
      background: url(../img/top_section05_bg.webp) 0 0 no-repeat;
      background-size: 100% auto;
      width: 100%;
      height: 200px;
      top: -80px;
      left: 0;
      position: absolute; }
      @media screen and (max-width: 768px) {
        #top .section05::before {
          top: -40px; } }
    #top .section05 .category {
      position: relative;
      z-index: 2; }
    #top .section05 h2 {
      margin-top: -20px;
      position: relative;
      z-index: 2; }
      @media screen and (max-width: 768px) {
        #top .section05 h2 {
          margin-top: -10px; } }
    #top .section05 .life {
      background: #ea86ae;
      clip-path: polygon(0 5%, 100% 0, 100% 95%, 0% 100%);
      padding: 130px 0;
      margin-top: -120px; }
      @media screen and (max-width: 768px) {
        #top .section05 .life {
          clip-path: polygon(0 4%, 100% 0, 100% 96%, 0% 100%);
          padding: 62px 0 100px;
          margin-top: -60px; } }
      #top .section05 .life .container {
        max-width: 670px;
        margin: 0 auto; }
        @media screen and (max-width: 768px) {
          #top .section05 .life .container {
            max-width: 90%; } }
      #top .section05 .life h3 {
        width: 55%;
        margin-left: 40px; }
        @media screen and (max-width: 768px) {
          #top .section05 .life h3 {
            margin-left: 16px; } }
    #top .section05 .living {
      background: #f4ba5b;
      clip-path: polygon(0 5%, 100% 0, 100% 95%, 0% 100%);
      padding: 130px 0;
      margin-top: -40px; }
      @media screen and (max-width: 768px) {
        #top .section05 .living {
          clip-path: polygon(0 4%, 100% 0, 100% 96%, 0% 100%);
          padding: 62px 0 100px; } }
      #top .section05 .living .container {
        max-width: 670px;
        margin: 0 auto; }
        @media screen and (max-width: 768px) {
          #top .section05 .living .container {
            max-width: 90%; } }
      #top .section05 .living h3 {
        width: 70%;
        margin-left: 40px; }
        @media screen and (max-width: 768px) {
          #top .section05 .living h3 {
            margin-left: 16px; } }
    #top .section05 .nature {
      background: #5dc187;
      clip-path: polygon(0 5%, 100% 0, 100% 100%, 0% 100%);
      padding: 130px 0;
      margin-top: -50px; }
      @media screen and (max-width: 768px) {
        #top .section05 .nature {
          padding: 80px 0; } }
      #top .section05 .nature .container {
        max-width: 670px;
        margin: 0 auto; }
        @media screen and (max-width: 768px) {
          #top .section05 .nature .container {
            max-width: 90%; } }
      #top .section05 .nature h3 {
        width: 80%;
        margin-left: 40px; }
        @media screen and (max-width: 768px) {
          #top .section05 .nature h3 {
            margin-left: 16px; } }
      #top .section05 .nature .btn {
        max-width: 90%;
        margin: 40px auto 0; }
    #top .section05 .slick_goods li {
      border: 8px solid #fff;
      border-radius: 20px; }
      #top .section05 .slick_goods li img {
        border-radius: 10px; }