/* 
font-family: 'Noto Serif Display', serif;
font-family: 'Poppins', sans-serif;
font-family: noto-sans-cjk-jp, sans-serif;


font-family: "source-han-serif-japanese", serif;
font-weight: 600;
font-style: normal;
*/


/* base style */
.main-area,
.main_inner {
  overflow-x: hidden;
  width: 100%;
  margin: 0 auto;
  -webkit-font-feature-settings: normal;
  font-feature-settings: normal;
  color: #000;
  font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "Yu Gothic", "Open Sans", "メイリオ", sans-serif;
  font-style: normal;
  font-weight: normal;
  letter-spacing: 0.05em;
  text-align: left;
}


.main-area *,
.main_inner * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  list-style: none;
}

.main-area *::before,
.main-area *::after,
.main_inner *::before,
.main_inner *::after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.main-area img,
.main-area svg,
.main_inner img,
.main_inner svg {
  height: auto;
  width: 100%;
}

#main-container picture {
  display: block;
}

.main-area a {
  display: inline-block;
}

/* View_All */
#main-container .view_all {
  margin: calc(80 * (100vw / 390)) auto calc(61 * (100vw / 390));
  font-family: 'Poppins', sans-serif;
}

#main-container .viewall__btn a {
  display: inline-block;
}

@media only screen and (min-width: 560px) {

  /* ===========================
  * Style of Tablet-view *
  =========================== */
  #main-container {
    padding: 0;
    padding-top: calc(40 * (100vw / 1400));
  }

  #main-container .item-content {
    margin: auto;
  }

  .main-area,
  .main_inner {
    padding: 0;
  }
}

@media screen and (max-width: 767px) {
  .pc_only {
    display: none !important;
  }
}

@media screen and (min-width: 768px) {
  .sp_only {
    display: none !important;
  }
}

@media only screen and (min-width: 1400px) {

  /* ===========================
* Style of Tablet-view *
=========================== */
  #main-container {
    padding: 0;
    padding-top: 40px;
  }
}





/*========================================================
breadcrumb
========================================================*/
/* ----------[ breadcrumb SP ]---------- */
#main-container .cateList {
  width: 89%;
  margin: calc(78 * (100vw / 390)) auto 0;
  padding: 0 0 calc(15 * (100vw / 390));
  font-family: noto-sans-cjk-jp, sans-serif;
  font-style: normal;
  font-weight: normal;
  font-size: calc(10 * (100vw / 390));
  letter-spacing: 0.01em;
  line-height: calc(20 * (100vw / 390));
  color: #4d4d4d;
  /* white-space: nowrap; */
  text-align: left;
}

/* ----------[ breadcrumb table ]---------- */
@media only screen and (min-width: 560px) {
  #main-container .cateList {
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    -webkit-box-align: center;
    -ms-flex-align: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: calc(1280 * (100vw / 1400));
    max-width: 1280px;
    height: calc(50 * (100vw / 1400));
    max-height: 50px;
    margin: 0 auto;
    padding: calc(131* (100vw / 1400)) calc(40 * (100vw / 1400)) calc(49 * (100vw / 1400)) 0;
    font-size: calc(13 * (100vw / 1400));
    letter-spacing: 0.01em;
    line-height: normal;
    color: #4d4d4d;
  }

  #main-container .cateList span {
    padding: 0 calc(5 * (100vw / 1400));
  }
}

/* ----------[ breadcrumb PC ]---------- */
@media only screen and (min-width: 1400px) {
  #main-container .cateList {
    margin: auto;
    padding: 131px 40px 49px 0;
    font-size: 13px;
    height: 50px;
    font-family: noto-sans-cjk-jp, sans-serif;
    font-style: normal;
    font-weight: normal;
  }

  #main-container .cateList span {
    padding: 0 5px;
  }
}









/*========================================================
mainvisual
========================================================*/
.maivsiual {
  position: relative;
  padding-top: calc(50* (100vw /750));
}

.maivsiual::before {
  content: "";
  position: absolute;
  background: url(../img/sp/bg01.jpg) center/cover no-repeat;
  width: 100%;
  height: calc(1677* (100vw /750));
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: -1;
}

.maivsiual .inner {
  position: relative;
  width: calc(650* (100vw /750));
  margin: auto;
}

.img-wrap {
  overflow: hidden;
}

.maivsiual .mvAnimation1,
.maivsiual .mvAnimation2 {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  left: 50%;
  transform: translateX(-50%);
}

.maivsiual .mvAnimation1 {
  width: calc(321* (100vw /750));
  top: calc(353* (100vw /750));
  transition-delay: 0.5s;
}

.maivsiual .mvAnimation2 {
  width: calc(578* (100vw /750));
  bottom: 0;
  transition-delay: 1s;
}

.maivsiual_tx {
  position: relative;
  width: calc(650* (100vw /750));
  margin: calc(106* (100vw /750)) auto 0;
  padding-bottom: calc(134* (100vw /750));
}

.maivsiual_tx .ttl {
  width: calc(574* (100vw /750));
  margin: auto;
}

.maivsiual_tx p {
  width: calc(550* (100vw /750));
  font-size: calc(24* (100vw /750));
  line-height: 2;
  letter-spacing: -0.02em;
  margin: calc(58* (100vw /750)) auto 0;
}

@media screen and (max-width: 767px) {
  .maivsiual_tx p span {
    font-feature-settings: "palt";
  }
}

.svg_wrap._line01 {
  top: calc(19*(100vw / 750));
  left: 50%;
  transform: translate(-50%);
  width: calc(650*(100vw / 750));
  height: calc(500*(100vw / 750));
}

@media screen and (min-width: 768px) {
  .maivsiual {
    padding-top: calc(50* (100vw /1280));
  }

  .maivsiual::before {
    background: url(../img/bg01.jpg) center/cover no-repeat;
    height: calc(1000* (100vw /1280));
  }

  .maivsiual .inner {
    width: calc(1180* (100vw /1280));
  }

  .maivsiual .mvAnimation1 {
    width: calc(700* (100vw /1280));
    top: calc(260*(100vw /1280));
  }

  .maivsiual .mvAnimation2 {
    width: calc(950* (100vw /1280));
  }

  .maivsiual_tx {
    width: calc(800*(100vw / 1280));
    margin: calc(80*(100vw / 1280)) auto 0;
    padding-bottom: calc(123*(100vw / 1280));
  }

  .maivsiual_tx .ttl {
    width: calc(570* (100vw /1280));
  }

  .maivsiual_tx p {
    width: initial;
    text-align: center;
    font-size: calc(14* (100vw /1280));
    line-height: 2.0714285714;
    letter-spacing: 0em;
    margin: calc(27*(100vw / 1280)) auto 0;
    padding-left: calc(6*(100vw / 1280));
  }

  .svg_wrap._line01 {
    top: calc(19*(100vw / 1280));
    width: calc(800*(100vw / 1280));
    height: calc(152*(100vw / 1280));
  }
}

@media screen and (min-width: 1440px) {
  .maivsiual {
    padding-top: 50px;
  }

  .maivsiual::before {
    height: 1000px;
  }

  .maivsiual .inner {
    width: 1180px;
  }

  .maivsiual .mvAnimation1 {
    width: 700px;
    top: 260px;
  }

  .maivsiual .mvAnimation2 {
    width: 950px;
  }

  .maivsiual_tx {
    width: 800px;
    margin: 80px auto 0;
    padding-bottom: 123px;
  }

  .maivsiual_tx .ttl {
    width: 570px;
  }

  .maivsiual_tx p {
    font-size: 14px;
    margin: 27px auto 0;
    padding-left: 6px;
  }

  .svg_wrap._line01 {
    top: 19px;
    width: 800px;
    height: 152px;
  }
}

/* ===============================================
* l--sec--1 *
=============================================== */
.l--sec h3 {
  position: relative;
  line-height: 0;
  font-size: 0;
  width: calc(465* (100vw /750));
  margin: calc(100* (100vw /750)) auto calc(90* (100vw /750));
}

.l--sec h3 .js-line {
  width: calc(210*(100vw / 750));
  top: calc(-20*(100vw / 750));
  left: calc(144*(100vw / 750));
  display: block;
}

.sec--inner {
  position: relative;
  padding-top: calc(50* (100vw /750));
}

.sec--inner::before {
  position: absolute;
  content: "";
  background: url(../img/sp/bg02.jpg) center/cover no-repeat;
  width: 100%;
  height: calc(2990* (100vw /750));
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: -1;
}

.sec--grid {
  width: calc(650* (100vw /750));
  margin: auto;
  padding-bottom: calc(112* (100vw /750));
}

.sec--item,
.sec--item .--inner {
  position: relative;
}

.sec--item .credit,
.sec--item .--inner .credit {
  position: absolute;
  font-family: "Abril Fatface", serif;
  font-weight: 400;
  font-style: normal;
  font-size: calc(20* (100vw /750));
  letter-spacing: 0.05em;
  line-height: 1;
  bottom: calc(16*(100vw / 750));
  right: calc(19*(100vw / 750));
}

.sec--item .credit.--left,
.sec--item .--inner .credit.--left {
  right: initial;
  left: calc(19* (100vw /750));
}

.sec--item.--tx .tx--ttl {
  font-family: "Abril Fatface", serif;
  font-weight: 400;
  font-style: normal;
  font-size: calc(42* (100vw /750));
  line-height: 1;
  letter-spacing: 0;
  margin: calc(43* (100vw /750)) 0 calc(45* (100vw /750));
}

.sec--item.--tx .js-line {
  width: 100%;
}

.sec--item.--tx .tx--detail {
  font-size: calc(24* (100vw /750));
  letter-spacing: 0.05em;
  margin-top: calc(85*(100vw / 750));
  line-height: 2;
  font-feature-settings: "palt";
}

.sec--item.--3 {
  position: relative;
  width: calc(600* (100vw /750));
  margin: calc(87* (100vw /750)) auto 0;
}

.js-show.--line {
  opacity: 1;
  position: relative;
  width: calc(8* (100vw /750));
  height: calc(8* (100vw /750));
  background: #000;
  border-radius: 50%;
  margin: calc(50* (100vw /750)) auto 0;
}

.js-show.--line::before,
.js-show.--line::after {
  content: "";
  position: absolute;
  background: #000;
  left: 50%;
  transform: translateX(-50%) translateY(0);
  transition: all 1s;
}

.js-show.--line::before {
  width: calc(8* (100vw /750));
  height: calc(8* (100vw /750));
  background: #000;
  border-radius: 50%;
}

.js-show.onView.--line::before {
  transform: translateX(-50%) translateY(calc(190* (100vw /750)));
}

.js-show.--line::after {
  width: 0.75px;
  height: 0;
}

.js-show.onView.--line::after {
  height: calc(195* (100vw /750));
}

.l--sec--1 .sec--item.--4 {
  width: calc(577*(100vw / 750));
  margin: calc(254*(100vw / 750)) auto 0;
}

.l--sec--1 .sec--item.--4 .img-wrap {
  border-radius: 50%;
}

.svg_wrap._line02 {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(600*(100vw / 750));
  height: calc(600*(100vw / 750));
}

@media screen and (min-width: 768px) {
  .l--sec h3 {
    width: calc(388* (100vw /1280));
    margin: calc(74* (100vw /1280)) auto calc(62* (100vw /1280));
  }

  .l--sec h3 .js-line {
    width: calc(176*(100vw / 1280));
    top: calc(-17*(100vw / 1280));
    left: calc(120*(100vw / 1280));
    margin: 0;
  }

  .sec--inner {
    padding-top: calc(100* (100vw /1280));
    padding-bottom: calc(9* (100vw /1280));
  }

  .sec--inner::before {
    background: url(../img/bg02.jpg) center/cover no-repeat;
    height: calc(1400* (100vw /1280));
  }

  .sec--grid {
    display: grid;
    grid-template-columns: calc(120*(100vw / 1280)) calc(520*(100vw / 1280)) calc(246*(100vw / 1280)) auto;
    grid-template-rows: calc(57* (100vw /1280)) calc(420* (100vw /1280)) calc(279* (100vw /1280)) calc(129* (100vw /1280)) auto;
    width: calc(1280* (100vw /1280));
    padding-bottom: calc(100* (100vw /1280));
  }

  .sec--item.--1 {
    grid-area: 1/1/2/2;
    width: calc(570* (100vw /1280));
    height: calc(720* (100vw /1280));
  }

  .sec--item.--2 {
    grid-area: 5/2/6/3;
    width: calc(470* (100vw /1280));
  }

  .sec--item .credit,
  .sec--item .--inner .credit {
    font-size: calc(14* (100vw /1280));
    bottom: calc(18*(100vw / 1280));
    right: calc(20*(100vw / 1280));
  }

  .sec--item .credit.--left,
  .sec--item .--inner .credit.--left {
    left: calc(20*(100vw / 1280));
  }

  .sec--item.--tx .tx--ttl {
    font-size: calc(28* (100vw /1280));
    margin: 0 0 calc(25* (100vw /1280));
  }

  .sec--item.--tx .js-line {
    width: 97%;
  }

  .sec--item.--tx .tx--detail {
    font-size: calc(14* (100vw /1280));
    margin-top: calc(46*(100vw / 1280));
    line-height: 2.0714285714;
    letter-spacing: 0.02em;
    white-space: nowrap;
  }

  .sec--item.--3 {
    grid-area: 2/3/3/4;
    width: calc(500* (100vw /1280));
    height: calc(400* (100vw /1280));
    margin: 0;
  }

  .js-show.--line {
    grid-area: 3/4/4/5;
    width: calc(8* (100vw /1280));
    height: calc(8* (100vw /1280));
    margin: calc(30* (100vw /1280)) 0 0 0;
  }

  .js-show.--line::before {
    width: calc(8* (100vw /1280));
    height: calc(8* (100vw /1280));
  }

  .js-show.onView.--line::before {
    transform: translateX(-50%) translateY(calc(195* (100vw /1280)));
  }

  .js-show.--line::after {
    width: calc(1* (100vw /1280));
  }

  .js-show.onView.--line::after {
    height: calc(195* (100vw /1280));
  }

  .l--sec--1 .sec--item.--4 {
    grid-area: 4 / 3 / 5 / 4;
    width: calc(500*(100vw / 1280));
    height: calc(500*(100vw / 1280));
    margin: 0;
  }

  .svg_wrap._line02 {
    width: calc(510*(100vw / 1280));
    height: calc(510*(100vw / 1280));
  }
}

@media screen and (min-width: 1440px) {
  .l--sec h3 {
    width: 388px;
    margin: 74px auto 62px;
  }

  .l--sec h3 .js-line {
    width: 176px;
    top: -17px;
    left: 120px;
  }

  .sec--inner {
    padding-top: 100px;
    padding-bottom: 9px;
  }

  .sec--inner::before {
    height: 1400px;
  }

  .sec--grid {
    grid-template-columns: 120px 520px 246px auto;
    grid-template-rows: 57px 420px 279px 129px auto;
    width: 1280px;
    padding-bottom: 100px;
  }

  .sec--item.--1 {
    width: 570px;
    height: 720px;
  }

  .sec--item.--2 {
    width: 470px;
  }

  .sec--item .credit,
  .sec--item .--inner .credit {
    font-size: 14px;
    bottom: 18px;
    right: 20px;
  }

  .sec--item .credit.--left,
  .sec--item .--inner .credit.--left {
    left: 20px;
  }

  .sec--item.--tx .tx--ttl {
    font-size: 28px;
    margin: 0 0 25px;
  }

  .sec--item.--tx .tx--detail {
    font-size: 14px;
    margin-top: 46px;
  }

  .sec--item.--3 {
    width: 500px;
    height: 400px;
  }

  .js-show.--line {
    width: 8px;
    height: 8px;
    margin: 30px 0 0 0;
  }

  .js-show.--line::before {
    width: 8px;
    height: 8px;
  }

  .js-show.onView.--line::before {
    transform: translateX(-50%) translateY(195px);
  }

  .js-show.--line::after {
    width: 1px;
  }

  .js-show.onView.--line::after {
    height: 195px;
  }

  .l--sec--1 .sec--item.--4 {
    width: 500px;
    height: 500px;
  }

  .svg_wrap._line02 {
    width: 510px;
    height: 510px;
  }
}

/* ===============================================
* l--sec--2 *
=============================================== */

.sec--item .--item--detail .tx--ttl {
  position: relative;
  width: fit-content;
  font-size: calc(21* (100vw /750));
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.06em;
}

@media screen and (max-width: 767px) {
  .l--sec--2 .sec--inner::before {
    background: url(../img/sp/bg03.jpg) center/cover no-repeat;
    height: calc(3957* (100vw /750));
  }

  .l--sec--2 h3 {
    width: calc(478* (100vw /750));
  }

  .l--sec--2 h3 .js-line {
    top: calc(-21*(100vw / 750));
  }

  .l--sec--2 .sec--item.--3 {
    width: calc(650* (100vw /750));
  }

  .sec--item .--item--detail {
    position: relative;
    margin: calc(52* (100vw /750)) 0 0 calc(14* (100vw /750));
  }

  .sec--item .--item--detail .tx--ttl::before {
    content: "";
    position: absolute;
    width: 116%;
    height: calc(33*(100vw / 750));
    background: #fff;
    z-index: -1;
    top: calc(-5*(100vw / 750));
    left: calc(-8*(100vw / 750));
  }

  .sec--item .--item--detail .tx--detail {
    font-size: calc(21* (100vw /750));
    line-height: 2.0714285714;
    letter-spacing: 0.04em;
    margin-top: calc(11* (100vw /750));
    font-feature-settings: "palt";
    white-space: nowrap;
  }

  /* .iphone .sec--item .--item--detail .tx--detail {
    transform: scale(0.96);
    transform-origin: center left;
  } */

  .svg_wrap._line03 {
    top: calc(10*(100vw / 750));
    left: calc(-15* (100vw /750));
    width: calc(587*(100vw / 750));
    height: calc(174*(100vw / 750));
  }

  .l--sec--2 .sec--item.--4 {
    margin-top: calc(120* (100vw /750));
  }

  .l--sec--2 .sec--item.--5 {
    margin-top: calc(103* (100vw /750));
  }

  .l--sec--2 .sec--item.--5 .--item--detail {
    margin: calc(57*(100vw / 750)) 0 0 calc(14*(100vw / 750));
  }

  .l--sec--2 .sec--item.--5 .--item--detail .tx--detail {
    letter-spacing: 0;
  }

  .l--sec--2 .sec--item.--5 .--item--detail .tx--ttl::before {
    width: 121%;
  }

  .svg_wrap._line04 {
    top: calc(2*(100vw / 750));
    left: calc(-15* (100vw /750));
    width: calc(650*(100vw / 750));
    height: calc(142*(100vw / 750));
  }
}

@media screen and (min-width: 768px) {
  .l--sec--2 .sec--inner {
    padding-top: calc(105* (100vw /1280));
    padding-bottom: 0;
  }

  .l--sec--2 .sec--inner::before {
    background: url(../img/bg03.jpg) center/cover no-repeat;
    height: calc(1907* (100vw /1280));
  }

  .l--sec--2 h3 {
    width: calc(402*(100vw / 1280));
    padding-left: calc(8*(100vw / 1280));
  }

  .l--sec--2 .sec--grid {
    width: calc(1280* (100vw /1280));
    grid-template-columns: calc(100* (100vw /1280)) calc(540* (100vw /1280)) calc(70* (100vw /1280)) auto;
    grid-template-rows: calc(195 * (100vw /1280)) calc(56* (100vw /1280)) calc(700* (100vw /1280)) calc(63* (100vw /1280)) auto;
    padding-bottom: calc(130*(100vw / 1280));
  }

  .l--sec--2 .sec--item.--1 {
    grid-area: 2/4/3/5;
    width: calc(570* (100vw /1280));
  }

  .l--sec--2 .sec--item.--2 {
    grid-area: 1/2/2/3;
    width: calc(626*(100vw / 1280));
  }

  .l--sec--2 .sec--item.--3 {
    grid-area: 3/2/4/3;
    width: calc(500* (100vw /1280));
  }

  .sec--item .--item--detail {
    position: relative;
    margin: calc(70*(100vw / 1280)) 0 0 auto;
    width: calc(384* (100vw /1280));
  }

  .sec--item .--item--detail .tx--ttl {
    font-size: calc(14* (100vw /1280));
  }

  .sec--item .--item--detail .tx--ttl::before {
    content: "";
    position: absolute;
    width: 116%;
    height: calc(22* (100vw /1280));
    background: #fff;
    z-index: -1;
    top: calc(-4*(100vw / 1280));
    left: calc(-4*(100vw / 1280));
  }

  .sec--item .--item--detail .tx--detail {
    font-size: calc(14* (100vw /1280));
    line-height: 2.0714285714;
    letter-spacing: 0.03em;
    margin-top: calc(7*(100vw / 1280));
    font-feature-settings: "palt";
  }

  .svg_wrap._line03 {
    top: calc(6*(100vw / 1280));
    left: calc(-10*(100vw / 1280));
    width: calc(394*(100vw / 1280));
    height: calc(117*(100vw / 1280));
  }

  .l--sec--2 .sec--item.--4 {
    grid-area: 4 / 1 / 6 / 3;
    margin-top: 0;
    width: calc(570* (100vw /1280));
  }

  .l--sec--2 .sec--item.--5 {
    grid-area: 5/3/6/5;
    margin-top: 0;
    width: calc(500* (100vw /1280));
  }

  .l--sec--2 .sec--item.--5 .--item--detail {
    margin: calc(69*(100vw / 1280)) 0 0 auto;
    width: calc(435* (100vw /1280));
  }

  .l--sec--2 .sec--item.--5 .--item--detail .tx--ttl::before {
    width: 121%;
  }

  .svg_wrap._line04 {
    top: calc(3*(100vw / 1280));
    left: calc(-10*(100vw / 1280));
    width: calc(445* (100vw /1280));
    height: calc(90* (100vw /1280));
  }
}

@media screen and (min-width: 1440px) {
  .l--sec--2 .sec--inner {
    padding-top: 105px;
  }

  .l--sec--2 .sec--inner::before {
    height: 1907px;
  }

  .l--sec--2 h3 {
    width: 402px;
    padding-left: 8px;
  }

  .l--sec--2 .sec--grid {
    width: 1280px;
    grid-template-columns: 100px 540px 70px auto;
    grid-template-rows: 195px 56px 700px 63px auto;
    padding-bottom: 130px;
  }

  .l--sec--2 .sec--item.--1 {
    width: 570px;
  }

  .l--sec--2 .sec--item.--2 {
    width: 626px;
  }

  .l--sec--2 .sec--item.--3 {
    width: 500px;
  }

  .sec--item .--item--detail {
    margin: 70px 0 0 auto;
    width: 384px;
  }

  .sec--item .--item--detail .tx--ttl {
    font-size: 14px;
  }

  .sec--item .--item--detail .tx--ttl::before {
    height: 22px;
    top: -4px;
    left: -4px;
  }

  .sec--item .--item--detail .tx--detail {
    font-size: 14px;
    margin-top: 7px;
  }

  .svg_wrap._line03 {
    top: 6px;
    left: -10px;
    width: 394px;
    height: 117px;
  }

  .l--sec--2 .sec--item.--4 {
    width: 570px;
  }

  .l--sec--2 .sec--item.--5 {
    width: 500px;
  }

  .l--sec--2 .sec--item.--5 .--item--detail {
    margin: 67px 0 0 auto;
    width: 435px;
  }

  .svg_wrap._line04 {
    top: 3px;
    left: -10px;
    width: 445px;
    height: 90px;
  }
}

/* ===============================================
* l--foot *
=============================================== */
.l--foot .btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(600* (100vw /750));
  height: calc(105* (100vw /750));
  font-family: "Abril Fatface", serif;
  font-weight: 400;
  font-style: normal;
  font-size: calc(42* (100vw /750));
  line-height: 1;
  letter-spacing: 0;
  color: #fff;
  background: #000;
  margin: calc(105* (100vw /750)) auto 0;
  border-radius: calc(52.5* (100vw /750));
}

.l--foot .staff {
  width: calc(500*(100vw / 750));
  margin: calc(196*(100vw / 750)) auto 0;
  font-size: calc(20* (100vw /750));
  letter-spacing: 0.05em;
  line-height: 1.5;
  padding-left: calc(60* (100vw /750));
  font-feature-settings: "palt";
}

.--brand--about .--logo {
  width: calc(312* (100vw /750));
  margin: calc(186* (100vw /750)) auto 0;
}

.--brand--about .js-line {
  width: calc(312* (100vw /750));
  margin: calc(74* (100vw /750)) auto 0;
  height: 1px;
}

.--brand--about p {
  width: calc(650* (100vw /750));
  margin: calc(64*(100vw / 750)) auto 0;
  line-height: 2;
  font-size: calc(19.5* (100vw /750));
  letter-spacing: 0.02em;
  font-feature-settings: "palt";
}

@media screen and (min-width: 768px) {
  .l--foot .btn {
    width: calc(600* (100vw /1280));
    height: calc(70* (100vw /1280));
    font-size: calc(28* (100vw /1280));
    margin: calc(150*(100vw / 1280)) auto 0;
    border-radius: calc(35* (100vw /1280));
  }

  .l--foot .staff {
    width: calc(300*(100vw / 1280));
    margin: calc(96*(100vw / 1280)) auto 0;
    font-size: calc(13* (100vw /1280));
    letter-spacing: 0.05em;
    line-height: 1.38;
    padding-left: calc(26*(100vw / 1280));
    font-feature-settings: "palt";
  }

  .--brand--about .--logo {
    width: calc(208* (100vw /1280));
    margin: calc(93*(100vw / 1280)) auto 0;
  }

  .--brand--about .js-line {
    width: calc(208* (100vw /1280));
    margin: calc(50* (100vw /1280)) auto 0;
    height: 1px;
  }

  .--brand--about p {
    width: calc(750*(100vw / 1280));
    margin: calc(42*(100vw / 1280)) auto 0;
    font-size: calc(13* (100vw /1280));
    letter-spacing: 0.01em;
  }
}

@media screen and (min-width: 1440px) {
  .l--foot .btn {
    width: 600px;
    height: 70px;
    font-size: 28px;
    margin: 150px auto 0;
    border-radius: 35px;
  }

  .l--foot .staff {
    width: 300px;
    margin: 96px auto 0;
    font-size: 13px;
    padding-left: 26px;
  }

  .--brand--about .--logo {
    width: 208px;
    margin: 93px auto 0;
  }

  .--brand--about .js-line {
    width: 208px;
    margin: 50px auto 0;
  }

  .--brand--about p {
    width: 750px;
    margin: 42px auto 0;
    font-size: 13px;
  }
}

/* ===============================================
* parallax *
=============================================== */
.parallax {
  width: 100%;
  margin: calc(90* (100vw /750)) 0 0 0;
  height: calc(400* (100vw /750));
  overflow: hidden;
  position: relative;
  display: block !important;
}

#parallax-item {
  width: 100%;
  will-change: transform;
  transition-duration: 0.2s;
  -webkit-transition-duration: 0.2s;
  transition-delay: 0s;
  -webkit-transition-delay: 0s;
  transition-timing-function: ease-out;
  -webkit-transition-timing-function: ease-out;
  z-index: 1;

  position: absolute;
  left: 0;
}

.parallax p {
  position: absolute;
  text-align: center;
  white-space: nowrap;
  top: calc(107*(100vw / 750));
  left: 50%;
  transform: translateX(-50%);
  font-family: "Abril Fatface", serif;
  font-weight: 400;
  font-style: normal;
  font-size: calc(50* (100vw /750));
  line-height: 1.75;
  z-index: 2;
  letter-spacing: 0;
}

@media screen and (min-width: 768px) {
  .parallax {
    margin: calc(92*(100vw / 1280)) 0 0 0;
    height: calc(300*(100vw / 1280));
  }

  .parallax p {
    top: calc(102*(100vw / 1280));
    font-size: calc(50* (100vw /1280));
    letter-spacing: 0.007em;
  }
}

@media screen and (min-width: 1440px) {
  .parallax {
    margin: 92px 0 0 0;
    height: 300px;
  }

  .parallax p {
    top: 102px;
    font-size: 50px;
  }
}

/*========================================================
js-line
========================================================*/
.js-line {
  position: relative;
}

.js-line::after {
  content: '';
  position: absolute;
  width: 100%;
  height: calc(1* (100vw /750));
  background: #000;
  transition: all .75s;
  transform: scale(0, 1);
  transform-origin: left top;
}

.js-line.onView::after {
  transform: scale(1, 1);
}

@media screen and (min-width: 768px) {
  .js-line::after {
    height: 1px;
  }
}


/*========================================================
animation
========================================================*/

.js-show,
.fade-mv {
  opacity: 0;
  will-change: opacity;
}

.js-show.onView,
.fade-mv .onView {
  transition-property: opacity, transform;
  transition-duration: 1s;
  opacity: 1;
}

/* zoomout___________________________*/
.img-wrap .fade-zoomout {
  opacity: 0;
  transform: translate3d(0, 0, 0) scale(1.1);
  transition: opacity 0.75s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.75s cubic-bezier(0.25, 0.46, 0.45, 0.94), scale 0.75s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.img-wrap .fade-zoomout.onView {
  transform: translate3d(0, 0, 0) scale(1);
  opacity: 1;
}

/* fade-bottom ___________________________*/
.fade-bottom {
  opacity: 0;
  transform: translateY(calc(100* (100vw /750)));
  transition: opacity 0.75s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.75s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.fade-bottom.onView {
  opacity: 1;
  transform: translateY(0);
}

@media screen and (min-width: 768px) {
  .fade-bottom {
    transform: translateY(7rem);
  }
}

/* ===============================================
* line *
=============================================== */
.svg_wrap svg,
.svg_wrap {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: initial;
  pointer-events: none;
}

.lineitem {
  stroke: #000;
  fill: none;
  fill-opacity: 0;
  stroke-width: 1;
  stroke-width: 1px;
  stroke-dasharray: 2000;
  stroke-dashoffset: 2000;
}

@media screen and (min-width: 768px) {
  .lineitem {
    stroke-width: 1px;
  }
}

.js-show.onView .lineitem {
  -webkit-animation: animeLINE 2s ease-out forwards;
  animation: animeLINE 2s ease-out forwards;
}

@media screen and (min-width: 768px) {
  .js-show.onView .lineitem {
    -webkit-animation: animeLINE 3s ease-out forwards;
    animation: animeLINE 3s ease-out forwards;
  }
}

@keyframes animeLINE {
  0% {
    stroke-dashoffset: 2000;
    fill-opacity: 0;
  }

  30% {
    fill-opacity: 0;
  }

  35% {
    fill-opacity: 1;
  }

  100% {
    stroke-dashoffset: 0;
    fill-opacity: 1;
  }
}

@-webkit-keyframes animeLINE {
  0% {
    stroke-dashoffset: 2000;
    fill-opacity: 0;
  }

  30% {
    fill-opacity: 0;
  }

  35% {
    fill-opacity: 1;
  }

  100% {
    stroke-dashoffset: 0;
    fill-opacity: 1;
  }
}

@media screen and (min-width: 768px) and (max-width: 1440px) {
  html {
    font-size: calc((10 * (100vw / 1440)));
  }
}