@charset "UTF-8";

.feature {
  --lpSetSize: (100vw / 1400) * 0.8666666;
}
html {
  scroll-behavior:smooth;
}
.l-container {
  width:100%;
}
.feature {
  width:100%;
  font-family: "ryo-text-plusn", serif;
  font-weight: 400;
  font-style: normal;
  color: #000000;
}
.feature * {
  margin: 0;
  padding: 0;
  box-sizing:border-box;
  list-style: none;
}
.feature h1,
.feature h2,
.feature h3,
.feature h4,
.feature strong {
  font-weight: normal;
}
.feature img {
  width:100%;
  height:auto;
  vertical-align:top;
  display:block;
}
.feature a { 
  display: block;
  color: inherit;
  text-decoration: none;  
}

/*****************************************************
.feature (PC)
*****************************************************/

/* 共通
----------------------------- */
html { scroll-padding-top: 80px;}
.feature a { transition: opacity 0.3s;}
.feature a:hover { cursor: pointer; opacity: .7;}
.feature .sec__img {/* background: #eae9e5; */}
.l-footer { padding-top: 0 !important;}
.pc-footer { margin-top: 0 !important;}

/* .feature（大枠）
----------------------------- */
.feature {
  display: flex;
}

/* .f_left
----------------------------- */
.feature .f_left {
  width: calc(750 * (100vw / 1400));
  background: #000000;
}
.feature .f_left .f_left__box {
  position: relative;
  height: 100%;
}
.feature .f_left .f_left__box .f_left__title {
  position: sticky;
  top: 80px;
  max-height: calc(100vh - 80px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap:calc(30 * ((100vh - 80px) / 790));
}
.feature .f_left .f_left__box .f_left__title .hero__txt01 {
  height: calc(64.9951 * ((100vh - 80px) / 790));
  padding-top: calc(30 * ((100vh - 80px) / 790));
}
.feature .f_left .f_left__box .f_left__title figure img {
  height: calc(568.5723 * ((100vh - 80px) / 790));
  object-fit: cover;
  object-position: center top;
}
.feature .f_left .f_left__box .f_left__title .hero__txt02 {
  height: calc(87.1785 * ((100vh - 80px) / 790));
  padding-bottom: calc(40 * ((100vh - 80px) / 790));
}

/* .f_main
----------------------------- */
.feature .f_main {
  width: calc(650 * (100vw / 1400));
}

/*****************************************************
.feature (PC・SP共通)
*****************************************************/

/* .wrap_lead
----------------------------- */
.feature .wrap_lead {
  padding: calc(90 * var(--lpSetSize)) 0 calc(110 * var(--lpSetSize));
}
.feature .wrap_lead p {
  text-align: center;
  font-size: calc(18 * var(--lpSetSize));
  line-height: 1.88;
}

/* .sec
----------------------------- */

/* .sec__credit */
.feature .sec .sec__credit{
  width: fit-content;
  border: calc(1 * var(--lpSetSize)) solid #000000;
}
.feature .sec .sec__credit .credit {
  display:flex;
  gap: calc(16 * var(--lpSetSize)) calc(12 * var(--lpSetSize));
  flex-wrap: wrap;
}
.feature .sec .sec__credit .credit li {
  font-family: "cinzel", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: calc(18 * var(--lpSetSize));
  line-height: 1.0;
}
.feature .sec .sec__credit .credit li {
  position: relative;
}
.feature .sec .sec__credit .credit li,
.feature .sec .sec__credit .credit a {
  display: flex;
  gap: calc(10 * var(--lpSetSize));
  flex-direction: column;
}

/* .item_color */
.feature .sec .item_color ul {
  display: flex;
  gap: calc(6 * var(--lpSetSize));
}
.feature .sec .item_color li {
  width: calc(60 * var(--lpSetSize));
  height: calc(60 * var(--lpSetSize));
  border-radius: 50%;
}

/* .img01 */
.feature .sec .img01 {
  position:relative;
  margin-bottom: calc(30 * var(--lpSetSize));
}
.feature .sec .img01 > .sec__img {
  width: calc(540 * var(--lpSetSize));
  margin: 0 auto calc(18.5 * var(--lpSetSize));
}
.feature .sec .img01 .sec__credit {
  margin: 0 0 calc(20 * var(--lpSetSize)) calc(24 * var(--lpSetSize));
  padding: calc(12 * var(--lpSetSize)) calc(20 * var(--lpSetSize)) calc(8 * var(--lpSetSize));
}
.feature .sec .img01 .item_list {
  display: flex;
  margin: 0 0 0 calc(24 * var(--lpSetSize));
}
.feature .sec .img01 .item_list > .sec__img {
  width: calc(245 * var(--lpSetSize));
}
.feature .sec .img01 .item_list > .sec__img img {
  border: calc(1 * var(--lpSetSize)) solid #000000;
}
.feature .sec .img01 .item_list > .sec__img:last-of-type {
   margin-left: calc(-1 * var(--lpSetSize));
}
.feature .sec .img01 .item_color {
  position:absolute;
  left: calc(533 * var(--lpSetSize));
  bottom: 0;
}
.feature .sec .img01 .item_color li:nth-of-type(1) {
  background: #e5ddd1;
}
.feature .sec .img01 .item_color li:nth-of-type(2) {
  background: #000000;
}
.feature .sec .img01 .item_color li:nth-of-type(3) {
  background: #7f7a79;
}
 
/* .slide01 */
.feature .sec .slide01 {
  margin: 0 auto calc(135 * var(--lpSetSize));
}
.feature .sec .slide01,
.feature .sec .slide01 img {
  width: calc(540 * var(--lpSetSize));
}

/* .img04 */
.feature .sec .img04 {
  margin-bottom: calc(70  * var(--lpSetSize));
}
.feature .sec .img04 .flex_wrap:first-child {
  display: flex;
  gap:calc(10 * var(--lpSetSize));
  width: fit-content;
  margin: 0 auto calc(20  * var(--lpSetSize));
}
.feature .sec .img04 .flex_wrap > .sec__img {
  width: calc(440 * var(--lpSetSize));
}
.feature .sec .img04 .flex_wrap:last-child {
  display: flex;
  width: calc(695 * var(--lpSetSize));
  margin: 0 auto;
  justify-content: space-between;
}
.feature .sec .img04 .sec__credit {
  padding: calc(12 * var(--lpSetSize)) calc(47 * var(--lpSetSize)) calc(8 * var(--lpSetSize)) calc(50 * var(--lpSetSize));
}
.feature .sec .img04 .item_list {
  width: calc(245 * var(--lpSetSize));
  display: flex;
  flex-direction: column;
  gap:calc(20 * var(--lpSetSize));
  margin-top: calc(-36 * var(--lpSetSize));
}
.feature .sec .img04 .item_list > .sec__img {
  width: calc(245 * var(--lpSetSize));
}
.feature .sec .img04 .item_list > .sec__img img {
  border: calc(1 * var(--lpSetSize)) solid #000000;
}
.feature .sec .img04 .item_color {
  margin-top: calc(6 * var(--lpSetSize));
}
.feature .sec .img04 .item_color li:nth-of-type(1) {
  background: #e5ddd1;
}
.feature .sec .img04 .item_color li:nth-of-type(2) {
  background: #000000;
}
.feature .sec .img04 .item_color li:nth-of-type(3) {
  background: #7f7a79;
}

/* .img05 */
.feature .sec .img05 {
  width: calc(540 * var(--lpSetSize));
  margin: 0 auto calc(100 * var(--lpSetSize));
}

/* .img06 */
.feature .sec .img06 {
  position:relative;
  margin-bottom:calc(70 * var(--lpSetSize));
}
.feature .sec .img06 .flex_wrap {
  display:flex;
  flex-direction: row-reverse;
  gap:calc(16 * var(--lpSetSize));
  width: fit-content;
  margin: 0 auto;
}
.feature .sec .img06 .flex_wrap > .sec__img {
  width: calc(440 * var(--lpSetSize));
  margin-top: calc(37 * var(--lpSetSize));
}
.feature .sec .img06 .sec__credit {
  margin-left: calc(24 * var(--lpSetSize));
  padding: calc(12 * var(--lpSetSize)) calc(50 * var(--lpSetSize)) calc(8 * var(--lpSetSize)) calc(18 * var(--lpSetSize));
}
.feature .sec .img06 .item_list {
  display: flex;
  flex-direction: column;
  gap:calc(20 * var(--lpSetSize));
  margin-bottom: calc(63 * var(--lpSetSize));
}
.feature .sec .img06 .item_list > .sec__img {
  width: calc(245 * var(--lpSetSize));
}
.feature .sec .img06 .item_list > .sec__img img {
  border: calc(1 * var(--lpSetSize)) solid #000000;
}
.feature .sec .img06 .item_color {
  position:absolute;
  bottom: calc(84 * var(--lpSetSize));
  left: calc(284 * var(--lpSetSize));
}
.feature .sec .img06 .item_color li:nth-of-type(1) {
  background: #b6adac
}
.feature .sec .img06 .item_color li:nth-of-type(2) {
  background: #000000;
}
.feature .sec .img06 .item_color li:nth-of-type(3) {
  background: #504439;
}

/* .slide02 */
.feature .sec .slide02 {
  margin: 0 auto calc(96 * var(--lpSetSize));
}
.feature .sec .slide02,
.feature .sec .slide02 img {
  width: calc(540 * var(--lpSetSize));
}

/* .img09 */
.feature .sec .img09 {
  margin-bottom:calc(44 * var(--lpSetSize));
}
.feature .sec .img09 .item_list {
  display: flex;
  justify-content: center;
  gap:calc(20 * var(--lpSetSize));
  margin-bottom:calc(38 * var(--lpSetSize));
}
.feature .sec .img09 .flex_wrap {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap:calc(20 * var(--lpSetSize));
  width:fit-content;
  margin-left: calc(86 * var(--lpSetSize));
  margin-bottom: calc(20 * var(--lpSetSize));
} 
.feature .sec .img09 .flex_wrap > .sec__img {
  width: calc(510 * var(--lpSetSize));
}
.feature .sec .img09 .sec__credit {
  margin-left: calc(360 * var(--lpSetSize));
  padding: calc(12 * var(--lpSetSize)) calc(20 * var(--lpSetSize)) calc(8 * var(--lpSetSize)) calc(18 * var(--lpSetSize));
}

.feature .sec .img09 .item_list > .sec__img {
  width: calc(245 * var(--lpSetSize));
}
.feature .sec .img09 .item_list > .sec__img img {
  border: calc(1 * var(--lpSetSize)) solid #000000;
}
.feature .sec .img09 .item_color ul {
  display:flex;
  flex-direction: column;
}
.feature .sec .img09 .item_color li:nth-of-type(1) {
  background: #ffffff;
  border: calc(1 * var(--lpSetSize)) solid #000000;
}
.feature .sec .img09 .item_color li:nth-of-type(2) {
  background: #000000;
}
.feature .sec .img09 .item_color li:nth-of-type(3) {
  background: #cfdad9;
}
 
/* .slide03 */
.feature .sec .slide03 {
  margin: 0 auto calc(73 * var(--lpSetSize));
}
.feature .sec .slide03,
.feature .sec .slide03 img {
  width: calc(540 * var(--lpSetSize));
}

/* .img12 */
.feature .sec .img12 {
  margin-bottom: calc(100 * var(--lpSetSize));
}
.feature .sec .img12 .flex_wrap:first-child {
  display: flex;
  gap: calc(12 * var(--lpSetSize));
  width: fit-content;
  margin: 0 auto calc(19 * var(--lpSetSize));
}
.feature .sec .img12 .flex_wrap > .sec__img {
  width: calc(440 * var(--lpSetSize));
  margin-top:calc(36 * var(--lpSetSize));
}
.feature .sec .img12 .flex_wrap:last-child {
  display: flex;
  gap: calc(12 * var(--lpSetSize));
  width: calc(697 * var(--lpSetSize));
  margin: 0 auto;
  justify-content: space-between;
}
.feature .sec .img12 .sec__credit {
  padding: calc(12 * var(--lpSetSize)) calc(20 * var(--lpSetSize)) calc(8 * var(--lpSetSize)) calc(50 * var(--lpSetSize));
}
.feature .sec .img12 .item_list {
  display: flex;
  flex-direction: column;
  gap: calc(20 * var(--lpSetSize));
}
.feature .sec .img12 .item_list > .sec__img {
  width: calc(245 * var(--lpSetSize));
}
.feature .sec .img12 .item_list > .sec__img img {
  border: calc(1 * var(--lpSetSize)) solid #000000;
}
.feature .sec .img12 .item_color {
  margin-left:calc(4 * var(--lpSetSize));
  margin-top:calc(8 * var(--lpSetSize));
}
.feature .sec .img12 .item_color li:nth-of-type(1) {
  background: #000000;
}
.feature .sec .img12 .item_color li:nth-of-type(2) {
  background: #f2f0e7;
}

/* .slide04 */
.feature .sec .slide04 {
  margin: 0 auto;
}
.feature .sec .slide04,
.feature .sec .slide04 img {
  width: calc(540 * var(--lpSetSize));
}

/* .sec_bottom
----------------------------- */
.feature .sec_bottom {
  padding: calc(120 * var(--lpSetSize)) 0;
}
.feature .sec_bottom .sec__btn {
  text-align: center;
  width: fit-content;
  margin: 0 auto;
}
.feature .sec_bottom .sec__btn a {
  font-family: "cinzel", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: calc(26 * var(--lpSetSize));
  line-height: 1.0;
  display:flex;
  align-items: center;
  justify-content: center;
  gap: calc(4 * var(--lpSetSize));
  flex-direction: column;
}
.feature .sec_bottom .sec__btn a::after {
  content: "";
  display: block;
  width: calc(180 * var(--lpSetSize));
  height: calc(1 * var(--lpSetSize));
  background: #000000;
}

/*****************************************************
animation
*****************************************************/

/* .js_fadein
----------------------------- */
.feature .js_anime.js_fadein {
  opacity: 0;
  transition: opacity 1s ease-in;
}
.feature .js_anime.js_fadein.is_show {
  opacity: 1;
}
.feature .js_anime.js_fadein.--1.is_show {
  transition-delay: 0.6s;
}
.feature .js_anime.js_fadein.--2.is_show {
  transition-delay: 1.2s;
}

/* .js_fadeup
----------------------------- */
.feature .js_anime.js_fadeup {
  opacity: 0;
  transform: translateY(25px);
  transition: transform 0.7s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.7s ease-out;
  will-change: transform, opacity;
}
.feature .js_anime.js_fadeup.is_show  {
  opacity: 1;
  transform: translateY(0);
}