@charset "UTF-8";
/* CSS Document */

/* =====
 * LAYOUT :: ALL DEVICE
=================================================================== */
#Breadcrumb ul li:first-child svg {display: block;width: 1em;}
.block-index-02 {padding: 5em 0;}
.block-index-02 .container {width: 90%;max-width: calc(1100px + 4em);margin: 0 auto;position: relative;overflow: hidden;}
.block-index-02 .container h3 {max-width: 520px;margin: 0 auto;}
.block-index-02 .container h3 + p {font-size: 87.5%;text-align: center;margin: 2.5em 0 0;}
.block-index-02 .container .swiper {margin-top: 2.5em;padding: 0 2em;position: relative;}
.block-index-02 .container .swiper ul {margin: 0;}
.block-index-02 .container .swiper-button-next,
.block-index-02 .container .swiper-button-prev {width: 2.5em;height: 2.5em;border-radius: 50%;background: linear-gradient(to bottom,#fff 50%,#f5f7f9);box-shadow: 0 0 7px rgba(61,61,61,0.22);}
.block-index-02 .container .swiper-button-next {right: 0.2em;}
.block-index-02 .container .swiper-button-prev {left: 0.2em;}
.block-index-02 .container .swiper-button-next::after,
.block-index-02 .container .swiper-button-prev::after {font-size: 81.25%;font-weight: bold;}
.block-index-02 .btn-style-04 {margin: 0 2em;}
#exterior-01 .block-index-02 {background: #f5fbfb;}
#exterior-01 .block-index-02 .btn-style-04 a {color: var(--exterior-color);}
#exterior-01 .block-index-02 .container .swiper-button-next::after,
#exterior-01 .block-index-02 .container .swiper-button-prev::after {color: var(--exterior-color);}
#exterior-02 .block-index-02 {padding-bottom: 1em;background: #f8f6f5;position: relative;z-index: 1;}
#exterior-02 .block-index-02 .btn-style-04 a {color: #93867e;}
#exterior-02 .block-index-02 .container .swiper-button-next::after,
#exterior-02 .block-index-02 .container .swiper-button-prev::after {color: #93867e;}
#exterior-03 .block-index-02 {padding-top: 9em;background: var(--exterior-grad2);position: relative;}
#exterior-03 .block-index-02 > svg {color: #f8f6f5;width: 100%;height: auto;position: absolute;top: -5em;left: 0;right: 0;pointer-events: none;}
#exterior-03 .block-index-02 .swiper-worries {margin: 0 2em;}
#exterior-03 .block-index-02 .swiper-worries ul {margin: 0;}
#exterior-03 .block-index-02 .swiper-worries ul li {margin: 0;border-radius: 3em;overflow: hidden;position: relative;}
#exterior-03 .block-index-02 .swiper-worries ul li p {color: var(--exterior-color);font-size: 125%;font-weight: bold;line-height: 2;letter-spacing: 0.1em;text-align: center;position: absolute;top: 50%;left: 11em;z-index: 1;transform: translate(-50%,-50%);}
#exterior-03 .block-index-02 .swiper-worries ul li p::after {display: block;content: '';width: 27em;height: 27em;border-radius: 50%;background: #fff;position: absolute;top: 50%;left: 50%;z-index: -1;transform: translate(-50%,-50%);}
#exterior-03 .block-index-02 .swiper-worries ul li p span {opacity: 1;transition: opacity 0.6s ease-out .2s;}
#exterior-03 .block-index-02 .swiper-worries ul li:not(.swiper-slide-active) p span {opacity: 0;}
#exterior-03 .block-index-02 .container h4 {color: var(--exterior-color);font-size: 156.25%;font-weight: bold;text-align: center;margin-top: 2em;}
#exterior-03 .block-index-02 .container h4 + p {font-size: 87.5%;text-align: center;margin: 2em 0 0;}
#exterior-03 .block-index-02 .container .swiper-button-next::after,
#exterior-03 .block-index-02 .container .swiper-button-prev::after {color: var(--exterior-color);}
#exterior-03 .block-index-02 .btn-style-04 a {color: var(--exterior-color);}
/* =====
* LAYOUT :: PC
=================================================================== */
@media only screen and (max-width: 1550px) {
  #exterior-03 .block-index-02 .swiper-worries ul li p {font-size: 112.5%;}
}
@media only screen and (max-width: 1450px) {
  .nav-style-01 ul::before,
  .nav-style-01 ul::after {display: none;}
  .nav-style-01 ul li + li a::before {display: block;}
}
@media only screen and (min-width: 769px) {.nav-style-01 {max-width: 1000px;}}
@media only screen and (max-width: 1300px) {
  .nav-style-01 ul li {width: 33.33%;}
  .nav-style-01 ul li a {padding: 1.5em 0.75em;}
  .nav-style-01 ul li + li a::before {display: block;}
  .nav-style-01 ul li a span {width: 10em;}
}
@media only screen and (min-width: 1100px) {}
/* =====
* LAYOUT :: TAB
=================================================================== */
@media only screen and (max-width: 1024px) {}
/* =====
* LAYOUT :: SP
=================================================================== */
@media only screen and (max-width: 768px) {
  .block-index-01 figure {height: 16em;}
  .block-index-01 figure img {height: 100%;object-fit: cover;}    
  .block-index-02 {padding: 2em 0 1em;}
  .block-index-02 .container h3 {width: 90%;}
  .block-index-02 .container h3 + p {font-size: 100%;}
  .block-index-02 .container .swiper {margin-top: 2em;}
  .block-index-02 .container .swiper-button-next,
  .block-index-02 .container .swiper-button-prev {width: 3.5em;height: 3.5em;}
  .block-index-02 .container .swiper-button-next {right: 1.6em;}
  .block-index-02 .container .swiper-button-prev {left: 1.6em;}
  .block-index-02 .btn-style-04 {text-align: center;margin: 0;}
  #exterior-02 .block-index-02 {padding-bottom: 0;}
  #exterior-03 .block-index-02 {padding: 5em 0 3em;}
  #exterior-03 .block-index-02 > svg {width: 100%;height: 4em;top: -2em;}
  #exterior-03 .block-index-02 .swiper-worries {margin: 0;}
  #exterior-03 .block-index-02 .swiper-worries ul li {border-radius: 2em;}
  #exterior-03 .block-index-02 .swiper-worries ul li p {font-size: 118.75%;width: 100%;top: 1.25em;left: 50%;bottom: auto;transform: translateX(-50%);}
  #exterior-03 .block-index-02 .swiper-worries ul li p::after {width: 85em;height: 85em;top: auto;bottom: -1.75em;transform: translate(-50%,0);}
  #exterior-03 .block-index-02 .swiper-worries ul li figure {padding-top: 70%;}
  #exterior-03 .block-index-02 .swiper-worries ul li figure img {width: 200%;position: absolute;right: -2em;bottom: -2.5em;}  
  #exterior-03 .block-index-02 .container h4 {font-size: 137.5%;}
  #exterior-03 .block-index-02 .container h4 + p {font-size: 100%;margin-top: 1.5em;}
}
@media only screen and (max-width: 768px) and (orientation: landscape) {}
@media only screen and (max-width: 640px) {}
@media only screen and (max-width: 480px) {}