@charset "UTF-8";

/*//////////////////////////////////////////////////

  MANIFESTO | Celvoke Website

//////////////////////////////////////////////////*/

html {
  font-size: calc(10 * (100vw/750));
}

@media (min-width: 1000px) {
  html {
    font-size: 62.5%;
  }
}


/* ========================================================
             * CV限定 header footer　設定 *
========================================================= */

#FooterWrap {
  position: relative;
  background-color: #fbfbfb;
  z-index: 0;
}

@media (min-width: 769px) {

  .header_inner {
    width: 100vw;
    max-width: 110rem;
  }

  #HeaderWrap {
    overflow-x: clip;
  }

  .nav-global,
  .header_utiliry {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.5rem 0;
    width: 71%;
  }

  #header_img_slider {
    margin: 0;
  }

  #FooterWrap {
    position: relative;
    z-index: 1;
  }

  .wrapTop,
  .wrapBottom {
    width: 100%;
  }

  #footer {
    background-color: #fbfbfb;
  }
}

@media only screen and (min-width: 768px) and (max-width: 1100px) {
  header {
    width: 100%;
    min-width: 100%;
  }

  .header_inner {
    margin: 0;
    padding-left: 2rem;
    max-width: 100vw;
  }

  #header_img_slider li img {
    width: 100%;
  }

  footer {
    min-width: 100%;
  }

  .footer_inner {
    flex-wrap: wrap;
    width: 100%;
  }
}

/* ========================================================
                      * root *
========================================================= */
:root {
  --rate: calc(var(--pcMainContentWidth) / var(--spWidth));

  /* PCデザインのメインコンテンツの横幅 */
  --pcMainContentWidth: 100vw;

  /* PCデザインの横幅 */
  --pcWidth: 1400;

  /* SPデザインの横幅 */
  --spWidth: 750;

  --color-lp_font: #000000;
  --color-lp_bg: #fafafa;
  --color-lp_white: #fff;
  --font_jp: "europa", "Noto Sans JP", sans-serif;
  --font_en: "adobe-garamond-pro", serif;
}

@media (min-width: 1000px) {
  :root {
    /* --rate: calc(var(--pcMainContentWidth) / var(--pcWidth)); */
  }
}

#Wrap {
  width: 100%;
}

#share {
  z-index: 111 !important;
  transition: all 0.6s 0.3s;
}

@media screen and (max-width: 768px) {
  #share.move {
    translate: 0 calc(-186 * (var(--rate)));
  }
}


/* ========================================================
                      * manifesto *
========================================================= */
.manifesto * {
  box-sizing: border-box;
  /* font-feature-settings: "palt"; */
  line-height: 2.25;
  letter-spacing: .04em;
  font-weight: 400;
}

.manifesto {
  width: 100rem;
  /* max-width: var(--pcMainContentWidth); */
  height: 100%;
  font-family: var(--font_jp);
  font-weight: 300;
  overflow-x: clip;
  color: var(--color-lp_font);
  background: var(--color-lp_white);
  margin: 0 auto;
  padding-bottom: 13rem;
}

@media (max-width: 1000px) {
  .manifesto {
    position: relative;
    width: 100%;
    max-width: 100vw;
    height: 100%;
    padding-bottom: calc(225* (var(--rate)));
  }
}

.manifesto .sp_only {
  display: none;
}

@media (max-width: 1000px) {
  .manifesto .sp_only {
    display: block !important;
  }
}

.manifesto img {
  width: 100%;
  height: auto;
  vertical-align: bottom;
}

.manifesto a {
  width: 100%;
  height: 100%;
  display: inline-block;
}

.manifesto a:hover {
  opacity: 1;
}

.manifesto_inner {
  position: relative;
  overflow: clip;
  background: var(--color-lp_white);
  padding-bottom: calc(200 * (var(--rate)));
}

.manifesto a,
.manifesto .btn_accordion {
  -webkit-tap-highlight-color: transparent;
  /* iOS Safari用 */
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  /* Android Chrome用 */
}


.manifesto section .inner {
  padding-inline: calc(60* (var(--rate))) calc(58* (var(--rate)));
}

@media (min-width: 1000px) {
  .manifesto section .inner {
    padding-inline: 10rem;
  }
}

/* ========================================================
                      * sec_lead *
========================================================= */

.sec_lead {
  padding-top: calc(80* (var(--rate)));
  padding-bottom: calc(202* (var(--rate)));
  position: relative;
  z-index: 1;
}

.sec_lead::before {
  content: "";
  width: calc(750* (var(--rate)));
  height: calc(750* (var(--rate)));
  background: url(../Contents/ImagesPkg/about/sec_lead_bg.jpg) no-repeat center / 100%;
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: -1;
}

.sec_lead .ttl {
  width: calc(630* (var(--rate)));
  margin: 0 auto;
}

.sec_lead .txt_wrap {
  margin-top: calc(144* (var(--rate)));
}

.sec_lead .txt {
  font-size: calc(26* (var(--rate)));
}

.sec_lead .txt:not(:first-of-type) {
  margin-top: calc(60* (var(--rate)));
}

@media (min-width: 1000px) {

  .sec_lead {
    padding-top: 15.6rem;
    padding-bottom: 14.5rem;
  }

  .sec_lead::before {
    width: 75rem;
    height: 75rem;
    bottom: auto;
    top: 0;
  }

  .sec_lead .ttl {
    width: 39rem;
    margin-left: 0;
    margin-right: auto;
  }

  .sec_lead .txt_wrap {
    margin-top: 8rem;
  }

  .sec_lead .txt {
    font-size: 1.6rem;
  }

  .sec_lead .txt:not(:first-of-type) {
    margin-top: 3.5rem;
  }
}

/* ========================================================
                      * sec_manifesto *
========================================================= */

.sec_manifesto * {}

.sec_manifesto {
  padding-top: calc(49* (var(--rate)));
}

.sec_manifesto:nth-child(odd) {
  text-align: right;
}

.sec_manifesto.manifesto_02 {
  padding-top: calc(130* (var(--rate)));
}

.sec_manifesto.manifesto_03 {
  padding-top: calc(130* (var(--rate)));
}

.sec_manifesto.manifesto_04 {
  padding-top: calc(130* (var(--rate)));
}

.sec_manifesto.manifesto_05 {
  padding-top: calc(130* (var(--rate)));
}

.sec_manifesto .ttl {
  font-size: calc(148* (var(--rate)));
  font-style: italic;
  font-family: var(--font_en);
  opacity: .2;
  line-height: calc(56/148);
}

.sec_manifesto .ttl_sub {
  font-size: calc(36* (var(--rate)));
  margin-top: calc(36* (var(--rate)));
  position: relative;
  padding-bottom: 0.5rem;
}

.sec_manifesto .ttl_sub::after {
  content: "";
  width: calc(690* (var(--rate)));
  height: 1px;
  background: var(--color-lp_font);
  position: absolute;
  bottom: 0;
  left: 0;
}

.sec_manifesto:nth-child(odd) .ttl_sub::after {
  left: auto;
  right: 0;
}

.sec_manifesto .lead {
  font-size: calc(34* (var(--rate)));
  margin-top: calc(66* (var(--rate)));
  margin-left: calc(-17* (var(--rate)));
  line-height: calc(64.6/34);
}

.sec_manifesto:nth-child(odd) .lead {
  margin-top: calc(69* (var(--rate)));
  margin-right: calc(-17* (var(--rate)));
}

.sec_manifesto.manifesto_04 .lead {
  margin-right: calc(0* (var(--rate)));
}

.sec_manifesto.manifesto_05 .lead {
  margin-left: calc(0* (var(--rate)));
}

.sec_manifesto .txt {
  font-size: calc(26* (var(--rate)));
  margin-top: calc(26* (var(--rate)));
}

.sec_manifesto:nth-child(odd) .txt {
  margin-top: calc(27* (var(--rate)));
  margin-right: calc(-13* (var(--rate)));
}



/* ========================================================
                         * PC *
========================================================= */


@media (min-width: 1000px) {
  .sec_manifesto * {}

  .sec_manifesto {
    padding-top: 2rem;
  }

  .sec_manifesto:nth-child(odd) {}

  .sec_manifesto.manifesto_02 {
    padding-top: 8.2rem;
  }

  .sec_manifesto.manifesto_03 {
    padding-top: 7.9rem;
  }

  .sec_manifesto.manifesto_04 {
    padding-top: 8.2rem;
  }

  .sec_manifesto.manifesto_05 {
    padding-top: .6rem;
  }

  .sec_manifesto .ttl {
    font-size: 10rem;
  }

  .sec_manifesto .ttl_sub {
    font-size: 2.4rem;
    margin-top: 2.5rem;
  }

  .sec_manifesto .ttl_sub::after {
    width: 80rem;
    left: 0;
    right: 0;
  }

  .sec_manifesto.manifesto_03 .ttl_sub::after,
  .sec_manifesto.manifesto_05 .ttl_sub::after {
    bottom: -.4rem;
  }

  .sec_manifesto:nth-child(odd) .ttl_sub::after {}

  .sec_manifesto .lead {
    font-size: 2.2rem;
    margin-top: 4.6rem;
    margin-left: -1.2rem
  }

  .sec_manifesto:nth-child(odd) .lead {
    margin-top: 4rem;
    margin-right: -1.4rem;
  }

  .sec_manifesto.manifesto_04 .lead {
    margin-right: 0;
  }

  .sec_manifesto.manifesto_05 .lead {
    margin-left: 0;
  }

  .sec_manifesto .txt {
    font-size: 1.6rem;
    margin-top: 1.9rem;
  }

  .sec_manifesto:nth-child(odd) .txt {
    margin-top: 2rem;
    margin-right: -.8rem;
  }


}

/* ========================================================
                      * Animation *
========================================================= */

.manifesto .js-fade-blur {
  opacity: 0.4;
  filter: blur(10px);
  will-change: opacity, filter;
}

.manifesto .js-fade-blur.is-active {
  animation: fade-blur .8s ease-out forwards;
}

/* -- keyframes -- */
@keyframes fade-blur {
  0% {
    opacity: 0.4;
    filter: blur(10px);
  }

  100% {
    opacity: 1;
    filter: blur(0);
  }
}