@charset "utf-8";
/* CSS Document */

/* base
-----------------------------------------------*/
/* ========== base style ========== */

/* common parts
-----------------------------------------------*/
/* ========== text ========== */
/* ========== border ========== */
/* ========== float ========== */
/* ========== display ========== */
/* ========== position ========== */
/* ========== overflow ========== */
/* ========== width ========== */
/* ========== margin ========== */
/* ========== background ========== */
/* ========== device displaying ========== */
/* ========== animation for ScrollTrigger.min.js  ========== */

/* other style
-----------------------------------------------*/
body.static .wrapper {margin-top: 0!important;}

/* ========== device displaying ========== */
.sp_none{ display: none; }
img.sp_none{ display: none; }
.sp_only{ display: block; }
img.sp_only{ display: block; }
@media (min-width:768px){
	.sp_none{display: block;}
	img.sp_none{display: block;}
	.tab_none { display: none; }
	img.tab_none { display: none; }
	.sp_only{display: none;}
	img.sp_only{display: none;}
	.sp_only{display: none;}
	img.sp_only{display: none;}
}
.spc_none{ display: block; }
@media (min-width:720px){.pc_none{display: block;}}
.pc_only{ display: none; }
@media (min-width:721px){.pc_none{display: none;}
.pc_only{display: block;}
.tab_none{ display: block; }
}

/* ========== animation for ScrollTrigger.min.js  ========== */
.invisible {
transition: opacity 1s ease;
opacity: 0.0;
}
.visible {
transition: opacity 1s ease;
opacity: 1.0;
}

.anime-a {
  transition: opacity 0.8s ease, visibility 0.8s ease;
}
.anime-a.visible {
  opacity: 1;
  visibility: visible;
}

/* font
-----------------------------------------------*/
.main-hero__title,
.main-hero__subtitle,
.look-nav__title,
.main-contents__txt,
.look__title,
.look__second-txt,
.credit,
.profile__name-txt--en,
.outro__nav {
  font-family: classico-urw, sans-serif;
  font-style: normal;
  font-weight: 400;
}
.main-hero__copy,
.main-hero__desc,
.profile__name-txt--jp,
.profile__txt {
  font-family: zen-old-mincho, sans-serif;
  font-style: normal;
  font-weight: 400;
}


/* other style
-----------------------------------------------*/
body {
  margin: 0;
  color: #000;
}
img{vertical-align: top;}
picture {
  display: block;
}

@media screen and (max-width: 1240px) {

  .main-hero {
    padding: 12.308vw 0 17.179vw;
    text-align: center;
  }
  .main-hero__title {
    margin: 0;
    font-size: 8.205vw;
    line-height: 1.25;
    letter-spacing: 0;
  }
  .main-hero__subtitle {
    margin: 8.205vw 0 0;
    font-size: 3.077vw;
    line-height: 1;
    letter-spacing: 0.03em;
  }
  .main-hero__visual {
    display: none;
  }
  .main-hero__visual--sp {
    display: block;
    margin: 10.256vw 0 0;
  }
  .main-hero__visual-img {
    height: auto;
    width: 100%;
  }
  .main-hero__logo {
    margin: 5.128vw auto 0;
    width: 26.154vw;
  }
  .main-hero__logo-img {
    width: 26.154vw;
    height: 4.359vw;
  }
  .main-hero__copy {
    margin: 17.179vw 0 0;
    font-size: 4.872vw;
    line-height: 1;
    letter-spacing: 0.05em;
  }
  .main-hero__desc {
    margin: 7.692vw 0 0;
    font-size: 3.333vw;
    line-height: 2.15;
    letter-spacing: 0.05em;
  }
  .look-nav__list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .look-nav__item {
    padding: 10.769vw 9.231vw;
  }
  .look-nav__item--look01 { background: #52595C; }
  .look-nav__item--look02 { background: #7B93B7; }
  .look-nav__item--look03 { background: #A790A0; }
  .look-nav__item--look04 { background: #505469; }
  .look-nav__wrapper {
    position: relative;
  }
  .look-nav__title {
    position: absolute;
    bottom: -1.282vw;
    left: 50%;
    transform: translateX(-50%);
    font-size: 5.128vw;
    line-height: 1;
    letter-spacing: 0.03em;
    color: #fff;
  }
  .look-nav__visual-img {
    display: block;
    width: 100%;
    height: auto;
  }

  .main-contents {
  }

  .main-contents__txt-wrapper {
    display: none;
  }

  .look {
    padding: 10.769vw 0 21.282vw;
  }
  #look01 { background: #52595C; }
  #look02 { background: #7B93B7; }
  #look03 { background: #A790A0; }
  #look04 { background: #505469; }
  .look__title {
    margin: 0;
    text-align: center;
    color: #fff;
  }
  .look__title-txt {
    display: block;
    font-size: 3.077vw;
    line-height: 1;
    letter-spacing: 0.03em;
  }
  .look__title-num {
    display: block;
    margin: 1.538vw 0 0;
    font-size: 8.205vw;
    line-height: 1;
    letter-spacing: 0.03em;
  }
  .look__first-wrapper {
    margin: 7.692vw 0 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5.128vw;
  }
  .look__first-txt {
    writing-mode: vertical-rl;
    text-orientation: sideways;
    white-space: nowrap;
    margin: 0;
    font-size: 3.077vw;
    line-height: 1;
    letter-spacing: 0.03em;
  }
  .look__first-txt--left {
    transform: rotate(180deg); 
  }
  .look__first-txt--right {
  }
  .look__first-img {
    display: block;
    width: 69.231vw;
    height: 92.308vw;
  }
  .look__second-wrapper {
    margin: 21.282vw 0 0;
    width: 100%;
  }
  .look__second-img-wrapper {
    position: relative;
  }
  .look__second-img {
    display: block;
    width: 100%;
    height: auto;
  }
  .look__second-txt {
    width: 100%;
    position: absolute;
    bottom: 5.897vw;
    left: 0;
    margin: 0;
    text-align: center;
    font-size: 3.077vw;
    line-height: 1;
    letter-spacing: 0.05em;
    color: #fff;
  }
  .credit {
    margin: 5.128vw 0 0 15.385vw;
    padding: 0;
    list-style: none;
    font-size: 3.077vw;
    line-height: 1;
    letter-spacing: 0.1em;
  }
  .credit__item + .credit__item {
    margin-top: 3.846vw;
  }
  a.credit__link {
    position: relative;
    display: inline-flex;
    gap: 3.333vw;
    color: #fff;
    text-decoration: none;
  }
  a.credit__link::before {
    position: absolute;
    bottom: -0.256vw;
    left: 0;
    content: "";
    width: 100%;
    height: 1px;
    background: #fff;
  }
  a.credit__link:hover::before {
    display: none;
  }
  .all-items {
    padding: 10.256vw;
    background: #DDD;
  }
  .all-items__link {
    display: block;
    width: 100%;
    margin: 0 auto;
  }
  .all-items__img {
    display: block;
    width: 100%;
    height: auto;
  }
  .profile {
    margin: 15.385vw 0 0;
  }
  .profile__visual {
    width: 45.128vw;
    margin: 0 auto;
  }
  .profile__visual-img {
    display: block;
    width: 45.128vw;
    height: 56.41vw;
  }
  .profile__name {
    margin: 3.846vw 0 0;
  }
  .profile__name-txt {
    margin: 0;
    text-align: center;
  }
  .profile__name-txt--en {
    font-size: 5.128vw;
    line-height: 1;
    letter-spacing: 0.05em;
  }
  .profile__name-txt--jp {
    margin: 3.077vw 0 0;
    font-size: 2.821vw;
    line-height: 1;
    letter-spacing: 0;
  }
  .profile__txt {
    width: 76.923vw;
    margin: 8.974vw auto 0;
    font-size: 2.821vw;
    line-height: 1.9;
    letter-spacing: 0;
  }
  .outro {
    width: 89.744vw;
    margin: 15.385vw auto 0;
    padding: 12.821vw 0 16.41vw;
    border-top: 1px solid #DDD;
  }
  .outro__nav {
    margin: 0;
    font-size: 3.077vw;
    line-height: 1;
    letter-spacing: 0.05em;
  }
  .outro__nav-item + .outro__nav-item {
    margin-top: 7.692vw;
  }
  .outro__nav-title {
    text-align: center;
  }
  .outro__nav-contents {
    margin: 2.564vw 0 0;
  }
  .outro__nav-list {
    display: flex;
    justify-content: center;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .outro__nav-list-item {
    position: relative;
    padding: 0 5.128vw 0;
  }
  .outro__nav-list-item:not(:last-child)::after {
    position: absolute;
    top: 0;
    right: 0;
    content: "";
    width: 1px;
    height: 2.564vw;
    background: #000;
  }
  a.outro__nav-list-link {
    text-decoration: none;
    color: #000;
  }
  a.outro__nav-list-link:hover {
    text-decoration: underline;
  }
  .outro__sns {
    display: flex;
    justify-content: center;
    gap: 2.564vw;
    list-style: none;
    margin: 19.487vw 0 0;
    padding: 0;
  }
  .outro__sns-item {}
  .outro__sns-link {}
  .outro__sns-img {
    display: block;
    width: 10.256vw;
    height: 10.256vw;
  }
  .outro__logo {
    margin: 7.692vw auto 0;
    width: 30.769vw;
  }
  .outro__logo-img {
    display: block;
    width: 30.769vw;
    height: 5.128vw;
  }
}

@media screen and (min-width: 1241px) {
  
  .main-hero {
    padding: 68px 0 104px;
    text-align: center;
  }
  .main-hero__title {
    margin: 0;
    font-size: 48px;
    line-height: 1.25;
    letter-spacing: 0;
  }
  .main-hero__subtitle {
    margin: 40px 0 0;
    font-size: 18px;
    line-height: 1;
    letter-spacing: 0.03em;
  }
  .main-hero__visual {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: 50px 0 0;
  }
  .main-hero__visual--sp {
    display: none;
  }
  .main-hero__visual-item {
    width: 473px;
  }
  .main-hero__visual-img {
    width: 473px;
    height: 629px;
  }
  .main-hero__logo {
    margin: 30px auto 0;
  }
  .main-hero__logo-img {
    display: block;
    width: 152px;
    height: 26px;
    margin: 0 auto;
  }
  .main-hero__copy {
    margin: 103px 0 0;
    font-size: 28.5px;
    line-height: 1.42;
    letter-spacing: 0.05em;
  }
  .main-hero__desc {
    margin: 30px 0 0;
    font-size: 16px;
    line-height: 2.25;
    letter-spacing: 0.05em;
  }
  .look-nav__list {
    display: flex;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .look-nav__item {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 372px;
  }
  .look-nav__item--look01 { background: #52595C; }
  .look-nav__item--look02 { background: #7B93B7; }
  .look-nav__item--look03 { background: #A790A0; }
  .look-nav__item--look04 { background: #505469; }
  .look-nav__wrapper {
    position: relative;
  }
  .look-nav__title {
    position: absolute;
    bottom: -17px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 30px;
    line-height: 1;
    letter-spacing: 0.03em;
    color: #fff;
  }
  .look-nav__visual-img {
    display: block;
    width: 185px;
    height: 245px;
  }

  .main-contents {
    position: relative;
  }

  .main-contents__txt-wrapper {
    position: absolute;
    top: 50vh;
    z-index: 10;
  }
  .main-contents__txt-wrapper--left {
    left: 88px;
  }
  .main-contents__txt-wrapper--right {
    right: 88px;
  }

  .main-contents__txt {
    position: absolute;
    top: 0;
    left: 0;
    white-space: nowrap;
    line-height: 1;
    margin: 0;
  }

  .main-contents__txt--left {
    transform: translate(-50%, -50%) rotate(-90deg);
  }

  .main-contents__txt--right {
    transform: translate(-50%, -50%) rotate(90deg);
  }

  .look {
    padding: 100px 0 84px;
  }
  #look01 { background: #52595C; }
  #look02 { background: #7B93B7; }
  #look03 { background: #A790A0; }
  #look04 { background: #505469; }
  .look__title {
    margin: 0;
    text-align: center;
    color: #fff;
  }
  .look__title-txt {
    display: block;
    font-size: 18px;
    line-height: 1;
    letter-spacing: 0.03em;
  }
  .look__title-num {
    display: block;
    margin: 10px 0 0;
    font-size: 48px;
    line-height: 1;
    letter-spacing: 0.03em;
  }
  .look__first-wrapper {
    margin: 50px auto 0;
    width: 405px;
  }
  .look__first-txt {
    display: none;
  }
  .look__first-img {
    display: block;
    width: 405px;
    height: 540px;
  }
  .look__second-wrapper {
    margin: 70px auto 0;
    width: 582px;
  }
  .look__second-img-wrapper {
    position: relative;
  }
  .look__second-img {
    display: block;
    width: 582px;
    height: 776px;
  }
  .look__second-txt {
    width: 100%;
    position: absolute;
    bottom: 20px;
    left: 0;
    margin: 0;
    text-align: center;
    font-size: 14px;
    line-height: 1;
    letter-spacing: 0.05em;
    color: #fff;
  }
  .credit {
    margin: 20px 0 0;
    padding: 0;
    list-style: none;
    font-size: 12px;
    line-height: 1;
    letter-spacing: 0.1em;
  }
  .credit__item + .credit__item {
    margin-top: 15px;
  }
  a.credit__link {
    position: relative;
    display: inline-flex;
    gap: 13px;
    color: #fff;
    text-decoration: none;
  }
  a.credit__link::before {
    position: absolute;
    bottom: -1px;
    left: 0;
    content: "";
    width: 100%;
    height: 1px;
    background: #fff;
  }
  a.credit__link:hover::before {
    display: none;
  }
  .all-items {
    padding: 67px;
    background: #DDD;
  }
  .all-items__link {
    display: block;
    width: 918px;
    margin: 0 auto;
  }
  .all-items__img {
    display: block;
    width: 918px;
    height: 306px;
  }
  .profile {
    margin: 80px 0 0;
  }
  .profile__visual {
    width: 264px;
    margin: 0 auto;
  }
  .profile__visual-img {
    display: block;
    width: 264px;
    height: 330px;
  }
  .profile__name {
    margin: 20px 0 0;
  }
  .profile__name-txt {
    margin: 0;
    text-align: center;
  }
  .profile__name-txt--en {
    font-size: 30px;
    line-height: 1;
    letter-spacing: 0.05em;
  }
  .profile__name-txt--jp {
    margin: 20px 0 0;
    font-size: 16.5px;
    line-height: 1;
    letter-spacing: 0;
  }
  .profile__txt {
    width: 430px;
    margin: 45px auto 0;
    font-size: 13px;
    line-height: 1.92;
    letter-spacing: 0;
  }
  .outro {
    width: 1040px;
    margin: 88px auto 0;
    padding: 50px 0 70px;
    border-top: 1px solid #DDD;
  }
  .outro__nav {
    margin: 0;
    font-size: 12px;
    line-height: 1;
    letter-spacing: 0.05em;
  }
  .outro__nav-item + .outro__nav-item {
    margin-top: 36px;
  }
  .outro__nav-title {
    text-align: center;
  }
  .outro__nav-contents {
    margin: 10px 0 0;
  }
  .outro__nav-list {
    display: flex;
    justify-content: center;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .outro__nav-list-item {
    position: relative;
    padding: 0 20px 0;
  }
  .outro__nav-list-item:not(:last-child)::after {
    position: absolute;
    top: 0;
    right: 0;
    content: "";
    width: 1px;
    height: 10px;
    background: #000;
  }
  a.outro__nav-list-link {
    text-decoration: none;
    color: #000;
  }
  a.outro__nav-list-link:hover {
    text-decoration: underline;
  }
  .outro__sns {
    display: flex;
    justify-content: center;
    gap: 10px;
    list-style: none;
    margin: 76px 0 0;
    padding: 0;
  }
  .outro__sns-item {}
  .outro__sns-link {}
  .outro__sns-img {
    display: block;
    width: 40px;
    height: 40px;
  }
  .outro__logo {
    margin: 30px auto 0;
    width: 120px;
  }
  .outro__logo-img {
    display: block;
    width: 120px;
    height: 20px;
  }
  
}