@charset "utf-8";

:root {
  --pcv: / 1440 * 100vw;
  --pcp: / 1440 * 100%;
  
  --spv: / 375 * 100vw;
  --spp: / 375 * 100%;
}

/* -------------------------------------------------
  font
------------------------------------------------- */

/*
google fonts [Roboto] ※タレント名
*/

@font-face {
  font-family: 'Roboto';
  font-weight: 400;
  font-style: normal;
  src: url('../../font/Roboto/static/Roboto-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'Roboto';
  font-weight: 700;
  font-style: normal;
  src: url('../../font/Roboto/static/Roboto-Bold.ttf') format('truetype');
}

/*
google fonts [Atkinson Hyperlegible Mono] ※クレジット
*/

@font-face {
  font-family: 'Atkinson Hyperlegible Mono';
  font-weight: 400;
  font-style: normal;
  src: url('../font/Atkinson_Hyperlegible_Mono/static/AtkinsonHyperlegibleMono-Regular.ttf') format('truetype');
}

/*
google fonts [Zen Kaku Gothic New] ※リード日本文
*/

@font-face {
  font-family: 'Zen Kaku Gothic New';
  font-weight: 500;
  font-style: normal;
  src: url('../../font/Zen_Kaku_Gothic_New/ZenKakuGothicNew-Medium.ttf') format('truetype');
}
@font-face {
  font-family: 'Zen Kaku Gothic New';
  font-weight: 700;
  font-style: normal;
  src: url('../../font/Zen_Kaku_Gothic_New/ZenKakuGothicNew-Bold.ttf') format('truetype');
}

/* -------------------------------------------------
  reset
------------------------------------------------- */

html {
}

body {
  -webkit-text-size-adjust: 100%;
  position: relative;
}

main {
  padding: 0 0 195px;
  display: block;
  font-family: 'Zen Kaku Gothic New', "ヒラギノ角ゴPro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif;
  font-weight: 400;
  text-align: left;
}

main * {
  margin: 0;
  padding: 0;
  vertical-align: top;
  box-sizing: border-box;
  color: #000;
  line-height: 1;
  letter-spacing: 0;
}

main p,
main h2,
main h3,
main h4,
main th,
main td,
main li,
main dt,
main dd,
main figcaption {
  font-weight: 400;
}

main img {
  border: none;
  max-width: 100%;
  height: auto;
}

main iframe {
  border: none;
}

main a {
  text-decoration: none;
}
main a:hover {
  
}

main ul, main ol {
  list-style-type: none;
}

.footer_contents,
#footer {
  position: relative;
  z-index: 50;
}

@media print, screen and (min-width:731px) {
  a[href^="tel:"] {
    pointer-events: none;
  }
  .contents_area_ {
    padding-top: 71px;
  }
}

@media screen and (max-width:730px) {
  .contents_area_ {
    padding-top: 41px;
  }
  main {
    padding: 0 0 110px;
  }
}

/* -------------------------------------------------
  responsive
------------------------------------------------- */

@media print, screen and (min-width:731px) {
  .pc-none {
    display: none !important;
  }
}

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

/* -------------------------------------------------
  #fv
------------------------------------------------- */

#fv {
  position: relative;
  z-index: 50;
}
#fv .pic {
  width: 100%;
}
#fv .logo {
  width: calc(306 var(--pcp));
  position: absolute;
  z-index: 4;
  left: calc(160 var(--pcp));
  top: calc(340 / 860 * 100%);
}

@media screen and (max-width:730px) {
  #fv {
    text-align: center;
  }
  #fv .pic {
    
  }
  #fv .logo {
    width: calc(340 var(--spp));
    position: static;
    margin-top: calc(-26 var(--spv));
  }
}

/* -------------------------------------------------
  #lead
------------------------------------------------- */

#lead {
  margin-top: 115px;
  text-align: center;
}
#lead .title {
  margin-bottom: 1em;
  font-size: 20px;
  font-family: 'Zen Kaku Gothic New';
  font-weight: 700;
}
#lead .desc p {
  font-size: 13px;
  font-family: 'Zen Kaku Gothic New';
  font-weight: 500;
  line-height: calc(19 / 13);
}
#lead .desc p + p {
  margin-top: 1.46em;
}

#lead video {
  width: 100%;
  max-width: 1240px;
  margin: 105px auto 0;
}

@media screen and (max-width:730px) {
  #lead {
    margin-top: calc(105 var(--spv));
  }
  #lead .title {
    font-size: calc(20 var(--spv));
  }
  #lead .desc p {
    font-size: calc(13 var(--spv));
  }
  
  #lead video {
    margin: calc(100 var(--spv)) auto 0;
  }
}

/* -------------------------------------------------
  #looks .name
------------------------------------------------- */

#looks .artist {
  margin-top: 160px;
  position: relative;
}
#looks .artist.mt-short {
  margin-top: 130px;
}

#looks .artist .name {
  width: calc(1120 var(--pcp));
  margin: 0 auto 12px;
}
#looks .artist .name span {
  font-family: 'Roboto';
  display: inline-block;
  vertical-align: baseline;
  font-weight: 700;
}
#looks .artist .name .large {
  font-size: 40px;
}
#looks .artist .name .middle {
  font-size: 23px;
}
#looks .artist .name .small {
  margin-left: 0.5em;
  font-size: 17px;
  font-weight: 400;
}

@media screen and (max-width:730px) {
  #looks .artist {
    margin-top: calc(60 var(--spv));
    padding-bottom: calc(45 var(--spv));
  }
  #looks .artist.mt-short {
    margin-top: calc(60 var(--spv));
  }
  #looks .artist.pb1 {
    padding-bottom: calc(28 var(--spv));
  }
  #looks .artist.sp-credit-static {
    padding-bottom: 0;
  }
  
  #looks .artist .name {
    width: auto;
    margin: 0 auto calc(14 var(--spv));
    text-align: center;
  }
  #looks .artist .name span {
    display: block;
  }
  #looks .artist .name .large {
    font-size: calc(32 var(--spv));
  }
  #looks .artist .name .middle {
    margin-top: 0.1em;
    font-size: calc(20 var(--spv));
  }
  #looks .artist .name .small {
    margin: 0.3em 0 0;
    font-size: calc(16 var(--spv));
  }
  #looks .artist .name .middle + .small {
    margin-top: 0.5em;
  }
}

/* -------------------------------------------------
  #looks ルックレイアウト
------------------------------------------------- */

#looks .look img {
  filter: saturate(0%);
  transition: filter 0.2s ease-out;
}

#looks .credit {
  width: calc(1120 var(--pcp));
  margin: 12px auto 0;
}
#looks .credit li {
  font-size: 14px;
  line-height: calc(20 / 14);
  font-family: 'Atkinson Hyperlegible Mono';
  font-weight: 400;
  letter-spacing: -0.03em;
}
#looks .credit li a {
  text-decoration: underline;
}

@media print, screen and (min-width:731px) {
  #looks .look img:hover {
    filter: saturate(100%);
  }
  
  #looks .credit li a:hover {
    opacity: 0.5;
  }
  
  #looks .pc-col2 {
    width: calc(1120 var(--pcp));
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
  }
  #looks .pc-col2.pc-reverse {
    flex-direction: row-reverse;
  }
  #looks .pc-col2 .look {
    width: calc(550 / 1120 * 100%);
  }
  
  #looks .pc-wide {
    margin-top: 80px;
  }
  
  #looks .pc-col1 {
    width: calc(770 var(--pcp));
    margin: 80px auto 0;
  }
}

@media screen and (max-width:730px) {
  #looks .credit {
    width: calc(315 var(--spp));
    margin: calc(12 var(--spv)) auto 0;
  }
  
  #looks .pc-col2 .sp-small {
    width: calc(335 var(--spp));
    margin: calc(48 var(--spv)) auto 0;
  }
  
  #looks .pc-wide {
    margin-top: calc(40 var(--spv));
  }
  
  #looks .pc-col1 {
    margin-top: calc(40 var(--spv));
  }
  
  #looks .credit-wrap {
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
  }
  #looks .sp-credit-static .credit-wrap {
    position: static;
  }
  
  /* animation */
  #looks .look img {
    /*animation: lookimg 8s ease-out 0s infinite;*/
    animation: lookimg 6s ease-out 0s infinite;
  }
  #looks .pc-col2 .look:last-child img {
    animation-delay: 2s;
  }
  #looks .pc-wide img,
  #looks .pc-col1 img {
    animation-delay: 4s;
  }
}
/*
@keyframes lookimg {
  0% { filter: saturate(0%); }
  37.5% { filter: saturate(0%); }
  50% { filter: saturate(100%); }
  87.5% { filter: saturate(100%); }
  100% { filter: saturate(0%); }
}
*/
@keyframes lookimg {
  0% { filter: saturate(0%); }
  49% { filter: saturate(0%); }
  50% { filter: saturate(100%); }
  99% { filter: saturate(100%); }
  100% { filter: saturate(0%); }
}

/* -------------------------------------------------
  #bottom-buttons
------------------------------------------------- */

@media print, screen and (min-width:731px) {
  #bottom-buttons {
    margin: 125px auto 0;
    display: flex;
    justify-content: center;
    gap: 0 77px;
  }
}

@media screen and (max-width:730px) {
  #bottom-buttons {
    margin-top: calc(95 var(--spv));
    text-align: center;
  }
  #bottom-buttons a {
    display: inline-block;
  }
  #bottom-buttons img {
    width: calc(193 var(--spv));
  }
  #bottom-buttons li + li {
    margin-top: calc(20 var(--spv));
  }
}

/* -------------------------------------------------
  #side-nav
------------------------------------------------- */

#side-nav {
  position: fixed;
  right: 0;
  top: 90px;
  z-index: 40;
}
#side-nav li + li {
  margin-top: 5px;
}
#side-nav li a {
  display: inline-block;
}

@media screen and (max-width:730px) {
  #side-nav {
    position: fixed;
    right: 0;
    top: 60px;
    z-index: 40;
  }
  #side-nav li {
    width: calc(40 var(--spv));
  }
  #side-nav li + li {
    margin-top: calc(7 var(--spv));
  }
  #side-nav li a,
  #side-nav li img {
    width: 100%;
  }
}

@media screen and (max-width:730px) and (orientation:landscape) {
  #side-nav li {
    width: calc(16 var(--spv));
  }
}