@charset "UTF-8";

:root {
  --lpSetSize: (100vw / 1400);
}
html {
  scroll-behavior: smooth;
}
.area-header {
  width: 100%;
}
.feature {
  width: 100%;
  font-feature-settings: "palt";
  font-family: "Noto Sans JP", "Noto Sans", Meiryo, '游ゴシック体', 'YuGothic', '游ゴシック Medium', 'Yu Gothic', メイリオ, sans-serif;
  font-weight: 400;
  font-style: normal;
  color: #CE7470;
  background-color: #F5F0EB;
}
.feature * {
  margin: 0;
  box-sizing: border-box;
}
.feature img {
  width: 100%;
  height: auto;
  vertical-align: top;
}
.feature a {
  display: block;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}


/* .f_main
----------------------------- */
.feature .f_main {
  width:  calc(1400 * var(--lpSetSize));
  margin: 0 auto;
  padding: 0 calc(100 * var(--lpSetSize));
}

/* .hero
----------------------------- */
.feature .hero {
  text-align: center;
  padding: calc(40 * var(--lpSetSize)) 0 0 0;
}
.feature .hero h2 {
  margin-bottom: calc(54 * var(--lpSetSize));
}
.feature .hero p.hero__catch {
  font-size: calc(20 * var(--lpSetSize));
  letter-spacing: 0.26em;
  line-height: 1.0;
  margin-bottom: calc(20 * var(--lpSetSize));
}
.feature .hero p.hero__catch strong {
  font-weight: 400;
}
.feature .hero p.hero__lead {
  font-size: calc(16 * var(--lpSetSize));
  line-height: 2.0;
  letter-spacing: 0.16em;
}


/* .sec
----------------------------- */
.feature .sec {
  position: relative;
  height: calc(490 * var(--lpSetSize));
}
.feature .sec .itemlist li {
  position: absolute;
  width: calc(220 * var(--lpSetSize));
  height: calc(220 * var(--lpSetSize));
  overflow: hidden;
}
.feature .sec .itemlist li a {
  position: relative;
  width: calc(220 * var(--lpSetSize));
  height: calc(220 * var(--lpSetSize));
  z-index: 1;
}
.feature .sec .itemlist li img {
  position: absolute;
  z-index: 2;
}
.feature .sec .itemlist li span {
  position: absolute;
  font-family: "altesse-std-24pt", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: calc(32 * var(--lpSetSize));
  z-index: 3;
}
.feature .sec .itemlist li::after {
  content: '';
  width: calc(164 * var(--lpSetSize));
  height: calc(164 * var(--lpSetSize));
  background: #FFFFFF;
  border-radius: 50%;
  position: absolute;
  z-index: 0;
}

.feature .sec .itemlist li.itemlist_a {
  top: calc(40 * var(--lpSetSize));
  left: calc(620 * var(--lpSetSize));
}
.feature .sec .itemlist li.itemlist_a img {
  top: calc(-14 * var(--lpSetSize));
  left: calc(28 * var(--lpSetSize));
  width: calc(166.5 * var(--lpSetSize));
}
.feature .sec .itemlist li.itemlist_a span {
  top: calc(139 * var(--lpSetSize));
  left: calc(72 * var(--lpSetSize));
  color:#9CAFC4;
}
.feature .sec .itemlist li.itemlist_a::after {
  top: calc(27 * var(--lpSetSize));
  left: calc(28 * var(--lpSetSize));
}

.feature .sec .itemlist li.itemlist_b {
  top: calc(10 * var(--lpSetSize));
  left: calc(942 * var(--lpSetSize));
}
.feature .sec .itemlist li.itemlist_b img {
  top: calc(39 * var(--lpSetSize));
  left: calc(39 * var(--lpSetSize));
  width: calc(126.5 * var(--lpSetSize));
}
.feature .sec .itemlist li.itemlist_b span {
  top: calc(42 * var(--lpSetSize));
  left: calc(2 * var(--lpSetSize));
  color:#D39999;
}
.feature .sec .itemlist li.itemlist_b::after {
  top: calc(27 * var(--lpSetSize));
  left: calc(28 * var(--lpSetSize));
}

.feature .sec .itemlist li.itemlist_c {
  top: calc(10 * var(--lpSetSize));
  left: calc(42 * var(--lpSetSize));
}
.feature .sec .itemlist li.itemlist_c img {
  top: calc(-14 * var(--lpSetSize));
  left: calc(20 * var(--lpSetSize));
  width: calc(213 * var(--lpSetSize));
}
.feature .sec .itemlist li.itemlist_c span {
  top: calc(142 * var(--lpSetSize));
  left: calc(106 * var(--lpSetSize));
  color:#BF9477;
}
.feature .sec .itemlist li.itemlist_c::after {
  top: calc(27 * var(--lpSetSize));
  left: calc(28 * var(--lpSetSize));
}

.feature .sec .itemlist li.itemlist_d {
  top: calc(64 * var(--lpSetSize));
  left: calc(348 * var(--lpSetSize));
}
.feature .sec .itemlist li.itemlist_d img {
  top: calc(-9 * var(--lpSetSize));
  left: calc(20 * var(--lpSetSize));
  width: calc(192 * var(--lpSetSize));
}
.feature .sec .itemlist li.itemlist_d span {
  top: calc(125 * var(--lpSetSize));
  left: calc(146 * var(--lpSetSize));
  color:#DB8B98;
}
.feature .sec .itemlist li.itemlist_d::after {
  top: calc(27 * var(--lpSetSize));
  left: calc(28 * var(--lpSetSize));
}

.feature .sec .itemlist li.itemlist_e {
  top: calc(226 * var(--lpSetSize));
  left: calc(148 * var(--lpSetSize));
}
.feature .sec .itemlist li.itemlist_e img {
  top: calc(-26 * var(--lpSetSize));
  left: calc(18 * var(--lpSetSize));
  width: calc(223 * var(--lpSetSize));
}
.feature .sec .itemlist li.itemlist_e span {
  top: calc(127 * var(--lpSetSize));
  left: calc(96 * var(--lpSetSize));
  color:#959595;
}
.feature .sec .itemlist li.itemlist_e::after {
  top: calc(27 * var(--lpSetSize));
  left: calc(27 * var(--lpSetSize));
}

.feature .sec .itemlist li.itemlist_f {
  top: calc(226 * var(--lpSetSize));
  left: calc(780 * var(--lpSetSize));
}
.feature .sec .itemlist li.itemlist_f img {
  top: calc(13 * var(--lpSetSize));
  left: calc(-4 * var(--lpSetSize));
  width: calc(202 * var(--lpSetSize));
}
.feature .sec .itemlist li.itemlist_f span {
  top: calc(31 * var(--lpSetSize));
  left: calc(74 * var(--lpSetSize));
  color:#BF9477;
}
.feature .sec .itemlist li.itemlist_f::after {
  top: calc(27 * var(--lpSetSize));
  left: calc(28 * var(--lpSetSize));
}

.feature .btn {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  bottom: calc(114 * var(--lpSetSize));
  z-index: 0;
  text-align: center;
  width: calc(260 * var(--lpSetSize));
}
.feature .btn a {
  background: #FFFFFF;
  border-radius: calc(28 * var(--lpSetSize));
  color: #CE7470;
  font-family: "altesse-std-24pt", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: calc(38 * var(--lpSetSize));
  line-height: calc(54 * var(--lpSetSize));
  margin: 0 auto;
  padding: 0 calc(4 * var(--lpSetSize)) calc(4 * var(--lpSetSize)) 0;
}

/* animation
-------------------------------*/
.feature .sec .itemlist li {
  transition: opacity 0.3s;  
  opacity: 1;
}
.feature .sec .itemlist li:hover {
  opacity: .7;
}
.feature .sec .js-fade-in::after {
  opacity: 0;
  transform: translate3d(0, 0, 0) scale(0);
  transition: opacity 0.75s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s,
              transform 0.75s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s;
}
.feature .sec .js-fade-in.is-show::after {
  transform: translate3d(0, 0, 0) scale(1);
  opacity: 1;
}
.feature .sec .js-fade-in span,
.feature .sec .js-fade-in img {
  opacity: 0;
  visibility: hidden;
  transition: opacity 1s ease 1.3s;
  will-change: opacity;
}
.feature .sec .js-fade-in.is-show span,
.feature .sec .js-fade-in.is-show img {
  opacity: 1;
  visibility: visible;
}
.feature .btn a {
  transition: opacity 0.3s;  
}
.feature .btn a:hover {
  opacity: .7;
}


/* --------------------------------------------------- */

@media screen and (min-width: 1400px) {  
  :root {
    --lpSetSize: 1px;
  }
}