@charset "utf-8";

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

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

/*
■Helvetica LT Pro Roman（テキスト）
  font-family: "helvetica-lt-pro", sans-serif;
  font-weight: 400;
  font-style: normal;

■Helvetica LT Pro Bold(見出し)
  font-family: "helvetica-lt-pro", sans-serif;
  font-weight: 700;
  font-style: normal;

■DNP ShueiGoGinStd M
  font-family: "dnp-shuei-gothic-gin-std", sans-serif;
  font-weight: 500;
  font-style: normal;
*/

/*
google fonts [Sawarabi Gothic]
*/

@font-face {
  font-family: 'Sawarabi Gothic';
  font-weight: 400;
  font-style: normal;
  src: url('../font/Sawarabi_Gothic/SawarabiGothic-Regular.ttf') format('truetype');
}


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

html {
}

body {
  height: 100vh;
  -webkit-text-size-adjust: 100%;
  position: relative;
  overflow: hidden;
}
body.fv-end {
  height: auto;
  overflow: visible;
}

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

main * {
  margin: 0;
  padding: 0;
  vertical-align: top;
  box-sizing: border-box;
  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: 500;
}

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;
}

@media print, screen and (min-width:731px) {
  .contents_area_ {
    padding-top: 71px;
  }
  
  main {
    padding-top: 0;
    padding-bottom: 0;
  }
  
  a[href^="tel:"] {
    pointer-events: none;
  }
  
  .wrapper_ {
    overflow: visible;
  }
  #footer {
    overflow: hidden;
  }
}

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

/* -------------------------------------------------
  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-video {
  position: relative;
  z-index: 4;
}
#fv-video video {
  width: 100%;
}

#fv-mask {
  width: 100%;
  height: 100vh;
  background: #000;
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1100;
  transition: opacity 1.2s cubic-bezier(.61,.14,.83,.36) 1s; /* ここ、jsと連動数値 */
}
#fv-video img {
  width: 161px;
}

body.fv-start #fv-mask {
  opacity: 0;
}
body.fv-end #fv-mask {
  display: none;
  left: -100%;
}

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

/* -------------------------------------------------
  main .bg-area
------------------------------------------------- */

main .bg-area {
  padding: 120px 0 105px;
  background: #E5E5E5;
}

@media screen and (max-width:730px) {
  main .bg-area {
    padding: calc(110 var(--spv)) 0 calc(80 var(--spv));
  }
}

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

#lead {
  text-align: center;
}
#lead .title {
  font-size: 22px;
  line-height: calc(30 / 22);
}
#lead .desc {
  margin-top: 20px;
}
#lead .desc p {
  font-size: 14px;
  line-height: calc(23 / 14);
}
#lead .desc p + p {
  margin-top: 1.9em;
}

@media screen and (max-width:730px) {
  #lead .title {
    font-size: calc(22 var(--spv));
  }
  #lead .desc {
    margin-top: calc(20 var(--spv));
  }
  #lead .desc p {
    font-size: calc(14 var(--spv));
  }
}

/* -------------------------------------------------
  #about
------------------------------------------------- */

#about {
  width: 96%;
  max-width: 1000px;
  margin: 115px auto 0;
}
#about .head {
  padding: 20px 0;
  text-align: center;
  background: #929396;
}
#about .head .headline {
  font-size: 22px;
  line-height: 1;
  letter-spacing: 0.05em;
  font-weight: 500;
  color: #fff;
}
#about .head .desc {
  margin-top: 0.8em;
  font-size: 12px;
  line-height: calc(20 / 12);
  letter-spacing: 0.02em;
  color: #fff;
}
#about .body {
  padding: 22px 0;
  text-align: left;
  background: #DADBDD;
}

#about .slick-arrow {
  width: 14px;
  height: 28px;
  background: url("../img/arrow_01.svg") no-repeat 0 0 / 100% auto;
  position: absolute;
  top: 50%;
  z-index: 10;
  overflow: hidden;
  color: transparent;
  font-size: 1px;
  border: none;
  outline: none;
  cursor: pointer;
}
#about .slick-arrow.slick-prev {
  left: 20px;
  transform: translateY(-50%) rotateY(180deg);
}
#about .slick-arrow.slick-next {
  right: 20px;
  transform: translateY(-50%);
}

@media print, screen and (min-width:731px) {
  #about .for-pc .col2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  #about .for-pc .texts {
    width: calc(590 / 1000 * 100%);
    margin-left: calc(60 / 1000 * 100%);
  }
  #about .for-pc .pic {
    width: calc(258 / 1000 * 100%);
    margin-right: calc(60 / 1000 * 100%);
  }
  
  #about .for-pc .history li {
    display: flex;
  }
  #about .for-pc .history li .y {
    width: 45px;
    padding-top: 8px;
    font-size: 14px;
    letter-spacing: 0.03em;
  }
  #about .for-pc .history li .y.wide {
    width: 81px;
  }
  #about .for-pc .history li .detail {
    width: calc(100% - 45px);
    font-size: 12px;
    line-height: calc(29 / 12);
    letter-spacing: 0.02em;
  }
  #about .for-pc .history li y.wide + .detail {
    width: calc(100% - 81px);
  }
}

@media screen and (max-width:730px) {
  #about {
    width: calc(340 var(--spp));
    margin: calc(45 var(--spv)) auto 0;
  }
  #about .head {
    padding: calc(24 var(--spv)) 0 calc(18 var(--spv));
  }
  #about .head .headline {
    font-size: calc(25 var(--spv));
  }
  #about .head .desc {
    margin-top: 0.9em;
    font-size: calc(11 var(--spv));
    line-height: calc(16 / 11);
    letter-spacing: 0;
  }
  #about .body {
    padding: calc(34 var(--spv)) 0 calc(36 var(--spv));
  }
  
  #about .for-sp .col2 {
    width: calc(304 / 340 * 100%);
    margin: 0 auto;
  }
  #about .for-sp .col2 .texts {
    padding: 0 calc(7 var(--spv));
  }
  
  #about .for-sp .history li {
    display: flex;
  }
  #about .for-sp .history li + li {
    margin-top: calc(20 var(--spv));
  }
  #about .for-sp .history li .y {
    width: calc(45 var(--spv));
    padding-top: 1.1vw;
    font-size: calc(14 var(--spv));
    letter-spacing: 0.03em;
  }
  #about .for-sp .history li .y.wide {
    width: calc(69 var(--spv));
  }
  #about .for-sp .history li .detail {
    width: calc(238 var(--spv));
    font-size: calc(11 var(--spv));
    line-height: calc(19 / 11);
    letter-spacing: -0.03em;
  }
  #about .for-sp .history li y.wide + .detail {
    width: calc(223 var(--spv));
  }
  #about .for-sp .history li .detail .nowrap {
    white-space: nowrap;
  }
  #about .for-sp .pic {
    margin-top: calc(25 var(--spv));
  }
  
  #about .slick-arrow {
    width: calc(8 var(--spv));
    height: calc(16 var(--spv));
    background: url("../img/arrow_01.svg") no-repeat 0 0 / 100% auto;
    top: calc(164 var(--spv));
  }
  #about .slick-arrow.slick-prev {
    left: calc(8 var(--spv));
    transform: translateY(0) rotateY(180deg);
  }
  #about .slick-arrow.slick-next {
    right: calc(8 var(--spv));
    transform: translateY(0);
  }
  
  #about .slick-dots {
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 0 6px;
    position: absolute;
    left: 0;
    bottom: calc(-62 var(--spv));
  }
  #about .slick-dots li {
    width: calc(9 var(--spv));
    height: calc(9 var(--spv));
    background: #fff;
    border: solid 2px #000;
    border-radius: 50%;
    overflow: hidden;
    box-sizing: border-box;
  }
  #about .slick-dots li.slick-active {
    background: #000;
  }
  #about .slick-dots li button {
    width: 100%;
    height: 100%;
    opacity: 0;
  }
}

/* -------------------------------------------------
  #looks
------------------------------------------------- */

#looks {
  text-align: left;
}
#looks .pic {
  width: 100%;
  overflow: hidden;
  position: relative;
}
#looks .pic img {
  width: 100%;
}
#looks .pic img:nth-child(2) {
  opacity: 0;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 4;
  animation: fade1 8s ease-out 0s infinite;
}

#looks > .sp-none .sticky-group {
  position: sticky;
}
#looks > .sp-none .bottom-group {
  position: relative;
  z-index: 4;
  background: #E5E5E5;
}

@keyframes fade1 { /* 3sウェイト 1sフェード */
  0% { opacity: 0; }
  37.5% { opacity: 0; }
  50% { opacity: 1; }
  87.5% { opacity: 1; }
  100% { opacity: 0; }
}

/* .items3 */
#looks .pic.item3 img:nth-child(2),
#looks .pic.item3 img:nth-child(3) {
  opacity: 0;
  position: absolute;
  left: 0;
  top: 0;
}
#looks .pic.item3 img:nth-child(2) {
  z-index: 4;
  animation: fade2 12s ease-out 0s infinite;
}
#looks .pic.item3 img:nth-child(3) {
  z-index: 8;
  animation: fade2 12s ease-out 4s infinite;
}
@keyframes fade2 { /* 3sウェイト 1sフェード */
  0% { opacity: 0; }
  25% { opacity: 0; }
  33% { opacity: 1; }
  58.3% { opacity: 1; }
  67% { opacity: 0; }
}

@media print, screen and (min-width:731px) {
  #looks .col2 {
    display: flex;
    justify-content: center;
  }
  
  #looks .col2.type1 {
    gap: 0 calc(50 var(--pcp));
  }
  #looks .col2.type1 > *:first-child {
    width: calc(500 var(--pcp));
    margin-top: calc(62 var(--pcv));
  }
  #looks .col2.type1 > *:last-child {
    width: calc(600 var(--pcp));
  }
  
  #looks .col2.type2 {
    gap: 0 calc(100 var(--pcp));
    justify-content: flex-start;
  }
  #looks .col2.type2 > *:first-child {
    width: calc(500 var(--pcp));
    margin-left: calc(147 var(--pcp));
  }
  #looks .col2.type2 > *:last-child {
    width: calc(500 var(--pcp));
  }
  
  #looks .col2.type3 {
    gap: 0 calc(50 var(--pcp));
  }
  #looks .col2.type3 > *:first-child {
    width: calc(600 var(--pcp));
  }
  #looks .col2.type3 > *:last-child {
    width: calc(500 var(--pcp));
    margin-top: calc(70 var(--pcv));
  }
  
  #looks .lk1-2 {
    margin-top: calc(107 var(--pcv));
  }
  #looks .lk3-4 {
    margin-top: calc(85 var(--pcv));
  }
  #looks .lk5-6 {
    margin-top: calc(95 var(--pcv));
  }
  #looks .lk7-8 {
    margin-top: calc(80 var(--pcv));
  }
  #looks .lk8 {
    margin-top: calc(75 var(--pcv));
  }
  #looks .lk9 {
    margin-top: calc(80 var(--pcv));
  }
  
  #looks .lk10-11 {
    margin-top: calc(35 var(--pcv));
    gap: 0 calc(72 var(--pcp));
  }
  #looks .lk10 {
    width: calc(449 var(--pcp));
    margin-top: calc(85 var(--pcv));
  }
  #looks .lk11 {
    width: calc(629 var(--pcp));
  }
  
  #looks .lk12-13 {
    margin-top: calc(93 var(--pcv));
  }
  #looks .lk14 .credit-wrap {
    width: calc(600 var(--pcp));
    margin: calc(100 var(--pcv)) auto 0;
  }
  
  #looks .lk15-16 {
    margin-top: calc(100 var(--pcv));
    gap: 0 calc(55 var(--pcp));
  }
  #looks .lk15 {
    width: calc(600 var(--pcp));
  }
  #looks .lk16 {
    width: calc(495 var(--pcp));
    margin-top: calc(194 var(--pcv));
  }
  
  #looks .lk17-18 {
    margin-top: calc(60 var(--pcv));
  }
  #looks .col2.type3.lk17-18 > *:last-child {
    margin-top: calc(136 var(--pcv));
  }
}

@media screen and (max-width:730px) {
  #looks .box-sp250 {
    width: calc(250 var(--spp));
    margin: 0 auto;
  }
  #looks .box-sp280 {
    width: calc(280 var(--spp));
    margin: 0 auto;
  }
  #looks .box-sp310 {
    width: calc(310 var(--spp));
    margin: 0 auto;
  }
  
  #looks .block1 {
    margin-top: calc(117 var(--spv));
  }
  #looks .block2 {
    margin-top: calc(60 var(--spv));
  }
  #looks .block2 img.size-fix {
    width: auto;
    height: 100%;
    border-left: solid calc(31.25 var(--spv)) #E5E5E5;
    border-right: solid calc(31.25 var(--spv)) #E5E5E5;
  }
  #looks .block3 {
    margin-top: calc(52 var(--spv));
  }
  #looks .block4 {
    margin-top: calc(78 var(--spv));
  }
  #looks .block4 img.size-fix {
    border-top: solid calc(26.87 var(--spv)) #E5E5E5;
  }
  #looks .block5 {
    margin-top: calc(45 var(--spv));
  }
  #looks .block6 {
    margin-top: calc(90 var(--spv));
  }
  #looks .block7 {
    margin-top: calc(75 var(--spv));
  }
  #looks .block8 {
    margin-top: calc(55 var(--spv));
  }
  #looks .block9 {
    margin-top: calc(120 var(--spv));
  }
  #looks .block10 {
    margin-top: calc(70 var(--spv));
  }
}

/* -------------------------------------------------
  #looks .credit
------------------------------------------------- */

#looks .credit-title + .credit {
  margin-top: 0;
}
#looks .credit li a {
  text-decoration: underline;
}

@media print, screen and (min-width:731px) {
  #looks .credit {
    margin-top: 18px;
  }

  #looks .credit + .credit-title {
    margin-top: 18px;
  }
  
  #looks .credit-title,
  #looks .credit li,
  #looks .credit li a {
    font-size: 11px;
    line-height: calc(20 / 11);
    letter-spacing: 0.08em;
  }
  #looks .credit li a:hover {
    opacity: 0.5;
  }
  
  #looks .lk9 .credit-wrap2 {
    width: calc(1150 var(--pcp));
    margin: 20px auto 0;
  }
  
  #looks .lk18 .credit-wrap2 {
    margin-top: 20px;
  }
}

@media screen and (max-width:730px) {
  #looks .credit {
    margin-top: calc(18 var(--spv));
  }

  #looks .credit + .credit-title {
    margin-top: calc(18 var(--spv));
  }
  
  #looks .credit-title,
  #looks .credit li,
  #looks .credit li a {
    font-size: calc(11 var(--spv));
    line-height: calc(20 / 11);
  }
  
  #looks .block2 .credit {
    width: calc(310 var(--spp));
    margin-left: auto;
    margin-right: auto;
  }
  #looks .block3 .credit {
    transform: translateX( calc(-16 var(--spv)) );
  }
  #looks .block5 .credit-wrap2 {
    width: calc(310 var(--spp));
    margin: calc(20 var(--spv)) auto 0;
  }
  #looks .block7 .credit {
    margin-left: calc(47 var(--spp));
  }
  #looks .block10 .credit-wrap2 {
    margin-top: calc(20 var(--spv));
  }
}

/* -------------------------------------------------
  #items
------------------------------------------------- */

#items .anniversary {
  position: relative;
}
#items .anniversary img {
  width: 100%;
}
#items .anniversary .text {
  font-size: 37px;
  line-height: 1;
  display: inline-block;
  white-space: nowrap;
  color: #fff;
  letter-spacing: 0.08em;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  z-index: 4;
}

#items .item-box {
  margin-top: 75px;
}

#items .headline {
  font-size: 37px;
  letter-spacing: 0.08em;
  text-align: center;
  font-weight: 500;
}

#items .items {
  margin-top: 25px;
  display: flex;
  flex-wrap: wrap;
}
#items .item {
  cursor: pointer;
}
#items .item a {
  display: block;
  position: relative;
}
#items .item img {
  width: 100%;
  transition: opacity 0.2s ease-out;
}
#items .item .title {
  width: 100%;
  font-size: 12px;
  line-height: 1;
  position: absolute;
  left: 0;
  bottom: 23px;
  z-index: 4;
  text-align: center;
}
#items .item .for-modal {
  display: none;
}

@media print, screen and (min-width:731px) {
  #items .item {
    width: 25%;
  }
  #items .item a:hover img {
    opacity: 0.7;
  }
}

@media screen and (max-width:730px) {
  #items .anniversary img {
    width: 100%;
  }
  #items .anniversary .text {
    font-size: calc(22 var(--spv));
  }

  #items .item-box {
    margin-top: calc(35 var(--spv));
  }

  #items .headline {
    font-size: calc(22 var(--spv));
  }

  #items .items {
    display: flex;
    margin-top: calc(17 var(--spv));
  }
  #items .item {
    width: 33.33%;
  }
  #items .item .title {
    font-size: calc(12 var(--spv));
    line-height: calc(16 / 12);
    bottom: 50%;
    transform: translateY(50%);
    color: #fff;
  }
  #items .item a::after {
    width: 100%;
    height: 100%;
    display: block;
    content: "";
    background: #000;
    opacity: 0.1;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
  }
}

/* -------------------------------------------------
  modal
------------------------------------------------- */

#modal-base {
  width: 100%;
  height: 100vh;
  position: fixed;
  z-index: 1100;
  left: 0;
  top: 0;
  background: #000;
  opacity: 0.8;
  display: none;
}

#modal-cont {
  width: 90%;
  opacity: 0;
  max-width: 960px;
  position: fixed;
  z-index: 1200;
  left: -200%;
  top: 50%;
  transform: translate(-50%,-50%);
  background: #fff;
  transition: opacity 0.4s ease-out;
}
#modal-cont:not(.on-pos) {
  height: 0;
}
#modal-cont.on-pos {
  left: 50%;
}
#modal-cont.op1 {
  opacity: 1;
}
#modal-cont .pic img {
  width: 100%;
}
#modal-cont .texts {
  background: #EDEDED;
}
#modal-cont .texts .group ul li {
  font-size: 14px;
  line-height: calc(22 / 14);
}
#modal-cont .texts .group .buy {
  margin-top: 50px;
  display: inline-block;
  font-size: 16px;
  line-height: 1;
  text-decoration: underline;
}
#modal-cont .texts .group .buy.no-link {
  text-decoration: none;
  cursor: default;
}
#modal-cont .texts .group .buy.no-link:hover {
  opacity: 1 !important;
}

#modal-cont .close {
  width: 45px;
  height: 45px;
  position: absolute;
  right: 0;
  top: 0;
  background: transparent url("../img/close.svg") no-repeat center center / 25px auto;
  cursor: pointer;
  border: none;
}

#modal-cont .slick-arrow {
  width: 6px;
  height: 12px;
  background: url("../img/arrow_01.svg") no-repeat 0 0 / 100% auto;
  position: absolute;
  top: 50%;
  z-index: 10;
  overflow: hidden;
  color: transparent;
  font-size: 1px;
  border: none;
  outline: none;
  cursor: pointer;
}
#modal-cont .slick-arrow.slick-prev {
  left: 13px;
  transform: translateY(-50%) rotateY(180deg);
}
#modal-cont .slick-arrow.slick-next {
  right: 13px;
  transform: translateY(-50%);
}

@media print, screen and (min-width:731px) {
  #modal-cont .col2 {
    display: flex;
  }
  #modal-cont .pic {
    width: calc(400 / 960 * 100%);
  }
  #modal-cont .texts {
    width: calc(560 / 960 * 100%);
    display: flex;
    align-items: center;
  }
  #modal-cont .texts .group {
    margin-left: calc(100 / 560 * 100%);
  }
  #modal-cont .texts .group .buy:hover {
    opacity: 0.5;
  }
}

@media screen and (max-width:730px) {
  #modal-cont {
    width: calc(320 var(--spp));
    max-height: 90%;
    margin-left: calc(27 var(--spp));
    transform: translate(0,-50%);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }
  #modal-cont.on-pos {
    left: 0;
  }
  #modal-cont .texts {
    padding: calc(20 var(--spv)) 0;
  }
  #modal-cont .texts .group {
    width: calc(240 var(--spv));
    margin: 0 auto;
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  #modal-cont .texts .group ul li {
    font-size: calc(12 var(--spv));
    line-height: calc(18 / 12);
  }
  #modal-cont .texts .group .buy {
    margin-top: 0;
    font-size: calc(14 var(--spv));
  }
  #modal-cont .texts .group .buy.no-link {
    font-size: calc(10 var(--spv));
    white-space: nowrap;
  }

  #modal-cont .close {
    width: calc(45 var(--spv));
    height: calc(45 var(--spv));
    background-size: calc(25 var(--spv)) auto;
  }
  
  #modal-cont .slick-arrow.slick-prev {
    left: 8px;
  }
  #modal-cont .slick-arrow.slick-next {
    right: 8px;
  }
}

/* -------------------------------------------------
  
------------------------------------------------- */

@media print, screen and (min-width:731px) {
  
}

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