@charset "UTF-8";

html {
  font-size: 62.5%;
}
.F0217  {
  color: #58595b;
}
.F0217 img {
  width: 100%;
  height: auto;
  image-rendering: -webkit-optimize-contrast;
}
@media only screen and (max-width: 767px) {
  #breadcrumb .cateList {
    display: flex;
    flex-wrap: wrap;
    margin-top: 0 !important;
  }
}
@media only screen and (max-width: 1400px) {
  .win .FI230123 section {
    width: 100%;
}
}
/********* ▽ font ▽ *********/
@font-face {
font-family: 'Noto Serif JP', serif;
  font-weight: 400;
  src: url("../font/NotoSerifCJKjp-Regular.otf");
}
@font-face {
font-family: 'Noto Serif JP', serif;
  font-weight: 500;
  src: url("../font/NotoSerifCJKjp-Medium.otf");
}
@font-face {
font-family: 'Noto Serif JP', serif;
  font-weight: 600;
  src: url("../font/NotoSerifJP-SemiBold.otf");
}
@font-face {
  font-family: 'eb-garamond, serif';
  src: url("../font/EBGaramond-Regular.ttf");
}
.F0217 .font-type-ja {
  font-family: "ten-mincho-text", serif;
  font-weight: 400;
  font-style: normal;
  font-feature-settings: "palt";
  text-align: center;
}
.F0217 .font-type-en {
  font-family: "grad", serif;
  font-weight: 400;
  font-style: normal;
  font-feature-settings: "palt";
  text-align: center;
}
/********* △ font △ *********/


/********* ▽ animation ▽ *********/
.F0217 .fade_up {
  opacity: 0;
  will-change: transform;
  -webkit-transition: ease-in, opacity 1000ms, -webkit-transform 1000ms;
  transition: ease-in, opacity 1000ms, -webkit-transform 1000ms;
  -o-transition: ease-in, opacity 1000ms, transform 1000ms;
  transition: ease-in, opacity 1000ms, transform 1000ms;
  transition: ease-in, opacity 1000ms, transform 1000ms, -webkit-transform 1000ms;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
.F0217 .fade_up.active {
  opacity: 1;
}
@media only screen and (min-width: 768px) {}
@media only screen and (max-width: 767px) {}
/********* △ animation △ *********/


/********* ▽ firstview ▽ *********/
.F0217 .firstview-image {
  width: 100%;
}
.F0217 .firstview-lead {
  line-height: 2;
  letter-spacing: 0.12em;
}
@media only screen and (min-width: 768px) {
  .F0217 .firstview {
    width: 120rem;
  }
  .F0217 .firstview-lead {
    margin-block-start: 7.4rem;
    font-size: 1.3rem;
  }
}
@media only screen and (max-width: 767px) {
  .F0217 .firstview {
    width: calc(750*100vw/750);
  }
  .F0217 .firstview-lead {
    margin-block-start: calc(107*100vw/750);
    font-size: calc(26*100vw/750);
  }
}
/********* △ firstview △ *********/

/********* ▽ image ▽ *********/
@media only screen and (min-width: 768px) {
  .F0217 .model-image101,
  .F0217 .model-image102,
  .F0217 .model-image401,
  .F0217 .model-image402 {
    width: 56rem;
  }
  .F0217 .model-image201,
  .F0217 .model-image202,
  .F0217 .model-image203,
  .F0217 .model-image301,
  .F0217 .model-image302,
  .F0217 .model-image303 {
    width: 46rem;
  }
  .F0217 .model-image202,
  .F0217 .model-image302 {
    margin-inline: 1rem;
  }
}
@media only screen and (max-width: 767px) {
  .F0217 .model-image102,
  .F0217 .model-image402 {
    margin-block-start: calc(20*100vw/750);
  }
  .F0217 .model-image201,
  .F0217 .model-image203,
  .F0217 .model-image301,
  .F0217 .model-image302 {
    width: calc(365*100vw/750);;
  }
  .F0217 .model-image202 {
    margin-block-start: calc(20*100vw/750);
    order: 3;
  }
  .F0217 .model-image303 {
    margin-block-end: calc(20*100vw/750);
    order: -1;
  }
}
/********* △ image △ *********/

/********* ▽ text ▽ *********/
.F0217 .section-title {
  line-height: 1;
  letter-spacing: 0.06em;
  color: #000;
}
.F0217 .section-lead {
  line-height: 2;
}
.F0217 .item-credit {
  font-size: 1.2rem;
  line-height: 1.75;
  letter-spacing: 0.06em;
}
.F0217 .item-credit li {
  display: inline-block;
}
@media only screen and (min-width: 768px) {
  .F0217 .section-title {
    font-size: 2.4rem;
  }
  .F0217 .section-lead {
    margin-block-start: 3.3rem;
    font-size: 1.4rem;
    letter-spacing: 0.16em;
  }
  .F0217 .item-credit {
    margin-block-start: 3.2rem;
    font-size: 1.2rem;
  }
}
@media only screen and (max-width: 767px) {
  .F0217 .section-title {
    font-size: calc(36*100vw/750);
  }
  .F0217 .section-lead {
    margin-block-start: calc(68*100vw/750);
    font-size: calc(24*100vw/750);
    letter-spacing: 0.12em;
  }
  .F0217 .item-credit {
    margin-block-start: calc(60*100vw/750);
    font-size: calc(23*100vw/750);
  }
}
/********* △ text △ *********/

/********* ▽ common ▽ *********/
.F0217 .section {
  margin-inline: auto;
}
.F0217 .section-wrap {
  display: flex;
  margin-inline: auto;
  justify-content: space-between;
}
.F0217 .all-item-btn {
  width: fit-content;
  margin-inline: auto;
  letter-spacing: 0.08em;
  border-block-end: double 3px #58595B;
  color: #000;
}
.F0217 .staff-text {
  margin-inline: auto;
  letter-spacing: 0.06em;
  text-align: center;
}
@media only screen and (min-width: 768px) {
  .F0217 .sp-only {
    display: none;
  }
  .F0217 .all-item-btn {
    font-size: 2rem;
    line-height: 1.4;
    margin-block-start: 13rem;
    padding-block-end: 0.4rem;
  }
  .F0217 .staff-text {
    margin-block-start: 13.5rem;
    font-size: 1.4rem;
    line-height: 1.7142857143;
    padding-block-end: 13.6rem;
    width: 110rem;
    border-block-end: solid 1px #58595B;
  }
}
@media only screen and (max-width: 767px) {
  .F0217 .pc-only {
    display: none;
  }
  .F0217 .section-wrap {
    flex-wrap: wrap;
  }
  .F0217 .all-item-btn {
    margin-block-start: calc(145*100vw/750);
    padding-block-end: calc(10*100vw/750);
    font-size: calc(40*100vw/750);
    line-height: 1.25;
  }
  .F0217 .staff-text {
    margin-block-start: calc(150*100vw/750);
    font-size: calc(24*100vw/750);
    line-height: 1.75;
    padding-block-end: calc(150*100vw/750);
    width: calc(710*100vw/750);
  }
}
/********* △ common △ *********/

/********* ▽ section_01 ▽ *********/
@media only screen and (min-width: 768px) {
  .F0217 .section_01 {
    margin-block-start: 15.4rem;
  }
  .F0217 .section_01 .section-wrap,
  .F0217 .section_04 .section-wrap {
    margin-block-start: 3.7rem;
    flex-direction: row-reverse;
    width: 113rem;
  }
}
@media only screen and (max-width: 767px) {
  .F0217 .section_01 {
    margin-block-start: calc(145*100vw/750);
  }
  .F0217 .section_01 .section-wrap,
  .F0217 .section_04 .section-wrap {
    margin-block-start: calc(56*100vw/750);
  }
}
/********* △ section_01 △ *********/

/********* ▽ section_02 ▽ *********/
@media only screen and (min-width: 768px) {
  .F0217 .section_02,
  .F0217 .section_03 {
    margin-block-start: 19.7rem;
  }
  .F0217 .section_02 .section-wrap,
  .F0217 .section_03 .section-wrap {
    margin-block-start: 3.7rem;
    width: 140rem;
  }
}
@media only screen and (max-width: 767px) {
  .F0217 .section_02 {
    margin-block-start: calc(230*100vw/750);
  }
  .F0217 .section_02 .section-wrap,
  .F0217 .section_03 .section-wrap {
    margin-block-start: calc(56*100vw/750);
  }
}
/********* △ section_02 △ *********/

/********* ▽ section_03 ▽ *********/
@media only screen and (min-width: 768px) {}
@media only screen and (max-width: 767px) {
  .F0217 .section_03 {
    margin-block-start: calc(232*100vw/750);
  }
}
/********* △ section_03 △ *********/

/********* ▽ section_04 ▽ *********/
@media only screen and (min-width: 768px) {
  .F0217 .section_04 {
    margin-block-start: 19.5rem;
  }
}
@media only screen and (max-width: 767px) {
  .F0217 .section_04 {
    margin-block-start: calc(232*100vw/750);
  }
}
/********* △ section_04 △ *********/



/*******************************************************************************************
margin-top: calc(0*100vw/750);
margin-left: calc(0*100vw/750);
margin-right: calc(0*100vw/750);
margin-bottom: calc(0*100vw/750);
top: calc(0*100vw/750);
left: calc(0*100vw/750);
right: calc(0*100vw/750);
bottom: calc(0*100vw/750);
font-size: calc(0*100vw/750); 
*******************************************************************************************/
@media only screen and (max-width: 1399px) and (min-width: 767px) {
  html {
      font-size: calc(10* (100vw / 1400));
  }   
}
@media only screen and (max-width: 1400px){
  .win .F0217 section {
    width: 100%;
  }
  .win .F0217 .section_02 .section-wrap, .F0217 .section_03 .section-wrap {
    width: 100%;
  }
}