@charset "UTF-8";
/*------------------------------
 Common
------------------------------*/
img { 
	aspect-ratio: attr(width)/attr(height); /* アスペクト比をブラウザ側が理解でき、画像が読み込まれる前にwidth とheight 属性に基づいて表示サイズを計算するようになる */
}
.container { width: 100%;}
.main-wrapper { color: #000000; overflow: hidden;}
.main-wrapper .sp { display: none;}
.main-inner { width: 100%; margin: 0 auto;}

/*------------------------------
 24SS DENIM
------------------------------*/
.content           { width: 100%; margin: 0 auto 120px;}
.content-inner     { width: 1120px; margin: 0 auto;}
.content-section   { position: relative;}
.content-image-box { font-size: 0; line-height: 0;}

.img01               { position: relative;}
.content-image-box   { text-align: center; box-sizing: border-box; position: relative;}
.content-number      { position: absolute;}
.content-number img  { vertical-align: top;}

.credit-title        { font-size: 17px; font-style: italic; font-weight: 600; font-family: "Barlow Condensed", sans-serif; letter-spacing: 1px; text-align: left; margin-bottom: 11px;}
.credit-inner        { width: 100%;}
.credit-item-box     { width: 100%;}
.credit-item         { margin-bottom: 12px;}
.credit-item:last-child { margin-bottom: 0;}
.credit-item-inner   { display: flex; flex-flow: row wrap; align-items: flex-end;}
.credit-buy-button   { width: 35px; margin: -1px 0 0 16px;}
.credit-buy-link     { display: block; width: 100%; color: #000000; font-family: "Barlow Condensed", sans-serif; font-size: 18px; font-weight: 600; line-height: 20px; letter-spacing: 1px; text-align: center; text-decoration: none; border: 1px solid #000000; box-sizing: border-box;}
.credit-name         { font-family: "Barlow Condensed", sans-serif; font-style: italic; font-size: 19px; font-weight: 400; line-height: 22px; letter-spacing: 1px; text-align: left;}
.credit-brand        { font-family: "Barlow Condensed", sans-serif; font-style: italic; font-size: 16px; font-weight: 400; line-height: 16px; letter-spacing: 1px; margin-top: 6px; color: #656565;}

/* MainVisual
------------------------------*/
.main-visual-position { position: relative; overflow-y: hidden;}
.main-visual-position img.main-visual-base { width: 100%; vertical-align: top;}
.main-visual-position .main-visual-slider  { width: 100%; position: absolute; top: 0; left: 0;}
.main-visual .slider-item h1  { padding: 0; margin: 0; border: none;}
.main-visual .slider-item img { width: 100%; vertical-align: top;}
.main-visual-caption { padding: 130px 0 90px 0; font-family: "Noto Sans JP", sans-serif; font-size: 18px; font-weight: 500; line-height: 36px; text-align: center; position: relative; background: #fff;}

/* Content
------------------------------*/
#no00        { z-index: 2;}
#no00 .img01 { width: 900px; margin: 0 auto 50px;}
#no00 .img02 { width: 900px; margin: 0 auto 180px;}
#no00 .img03 { width: 520px; margin: 0 0 0 410px;}
#no01 .img01 { width: 710px; padding: 0 0 0 190px; margin: 0 auto 130px 0;}
#no01 .img01 img { position: relative; top: -40px;}
#no01 .img01 .content-number { bottom: 21.5px; right: 17.7px;}
#no01 .img02 { width: 520px; margin: 0 auto 180px;}
#no02 .img01 { width: 600px; margin: 0 auto 122px;}
#no02 .img01 .content-number { top: 21.9px; right: 13px;}
#no02 .content-section-frame { width: 480px; margin: 0 auto 180px;}
#no02 .credit { margin: 0 -20px 0 0; display: flex; justify-content: space-between;}
#no02 .credit .credit-inner { width: 50%;}
#no02 .img02 { width: 480px; margin: 0 auto 25px;}
#no03 .img01 { width: 600px; margin: 0 auto 130px;}
#no03 .img01 .content-number { top: 21.9px; right: 13.5px;}
#no03 .img02 { width: 520px; margin: 0 auto 30px 0;;}
#no03 .content-section-frame { margin: 0 0 180px 0; display: flex; align-items: flex-end;}
#no03 .img03 { width: 370px; min-width: 370px; margin: 0 30px 0 0;}
#no04 .img01 { width: 900px; margin: 0 auto 50px;}
#no04 .img01 .content-number { top: 20.8px; left: 11.7px;}
#no04 .img02 { width: 900px; margin: 0 auto 120px;}
#no04 .content-section-frame { padding: 0 0 0 300px; margin: 0 0 180px 0; display: flex; align-items: flex-end;}
#no04 .img03 { width: 520px; min-width: 520px; margin: 0 30px 0 0;}
#no04 .img04 { width: 900px; margin: 0 auto 120px;}
#no04 .img05 { width: 900px; margin: 0 auto 100px;}
#no05 .img01 { width: 600px; margin: 0 auto 70px;}
#no05 .img01 .content-number { top: 21.9px; right: 12.9px;}
#no05 .img02 { width: 480px; margin: 0 auto 120px;}
#no06 .img01 { width: 600px; margin: 0 auto 70px;}
#no06 .img01 .content-number { top: 21.9px; right: 13px;}
#no06 .content-section-frame { width: 480px; margin: 0 auto 230px;}
#no06 .img02 { width: 480px; margin: 0 auto 25px;}
#no06 .credit { display: flex; justify-content: space-between;}
#no06 .credit .credit-inner { width: 50%;}
#no07 .img01 { width: 600px; margin: 0 auto 120px;}
#no07 .img01 .content-number { top: 21.9px; left: 11.1px;}
#no07 .img02 { width: 420px;}
#no07 .content-section-frame { display: flex; flex-direction: row-reverse; justify-content: flex-start; align-items: flex-end; position: relative; top: -400px;}
#no07 .img03 { width: 520px; min-width: 520px; margin: 0 0 0 30px;}

/* Variation
------------------------------*/
.variation-main    { width: 1120px; margin: 0 auto; background: #FFF;}
.variation-inner   { width: 1120px; padding: 50px 0 75px 0; margin: 0 auto 120px; background: #FAFAFA;}
.variation-caption { font-family: "Noto Sans JP", sans-serif; font-size: 18px; font-weight: 500; line-height: 36px; text-align: center;}
.variation-section { width: 895px; padding: 85px 0; margin: 0 auto;}
.variation-section + .variation-section { border-top: #000000 1px solid;}
.variation-sub-title { margin: 0 0 20px 0; text-align: center;}
.variation-sub-title span { font-family: "Barlow Condensed", sans-serif; font-style: normal; font-size: 23px; font-weight: 400; text-decoration: underline; line-height: 22px; letter-spacing: 1px; text-align: center;}
.variation-title       { margin: 0 0 60px 0; text-align: center;}
.variation-image.img01 { margin: 0 0 50px 0; text-align: center;}
.variation-image.img02 { width: 627px; margin: 0 auto; text-align: center; position: relative;}
.variation-image.img02 .memo { font-family: "Barlow Condensed", sans-serif; font-style: normal; font-size: 23px; font-weight: 400; text-decoration: none; line-height: 22px; letter-spacing: 1px; text-align: center; position: absolute; top: 0; right: 0;}
.variation-mark        { margin: 0 0 20px 0; text-align: center;}
.variation-mark span   { padding: 5px 18px; border: 1px solid #000000; font-family: "Barlow Condensed", sans-serif; font-style: normal; font-size: 28px; font-weight: 600; line-height: 1.0; letter-spacing: 1px; text-align: center; text-decoration: none; color: #000000; box-sizing: border-box; display: inline-block;}
.variation-desc        { width: 455px; margin: 0 auto 55px;}
.variation-desc-title  { margin: 0 0 15px 0; font-family: "Noto Sans JP", sans-serif; font-size: 20px; font-weight: bold; text-align: center;}
.variation-desc-text   { font-family: "Noto Sans JP", sans-serif; font-size: 14px; font-weight: normal; line-height: 1.8; text-align: justify;}
.variation-credit .credit-item-box           { margin: 0 auto; display: flex; justify-content: center;}
.variation-credit .credit-item-box > li + li { margin-left: 30px;}
.variation-photo       { margin: 0 0 40px 0;}
.variation-photo ul    { display: flex; justify-content: center;}
.variation-photo ul li { width: 202px; min-width: 202px; padding: 0 10px; text-align: center; box-sizing: border-box;}
.variation-photo-comment { font-family: "Barlow Condensed", sans-serif; font-style: normal; font-size: 24px; font-weight: 400; letter-spacing: 1.5px; text-align: center;}

#m02 .variation-image.img01  { padding-right: 40px;}
#m03 .variation-image.img01  { margin: 0 0 30px 0;}
#m03 .variation-image-text   { width: 570px; margin: 0 auto 50px; display: flex; justify-content: space-between; align-items: center; box-sizing: border-box;}
#m03 .variation-image-text p { font-family: "Barlow Condensed", sans-serif; font-style: normal; font-size: 28px; font-weight: 600; line-height: 1.0; letter-spacing: 1px;}
#m03 .variation-image-text p:nth-child(1) { padding: 0 0 0 26px;}
#m03 .variation-image-text p:nth-child(2) { padding: 0 20px 0 0;}

/* content-link
------------------------------*/
.content-link-box { text-align: center;}
a.content-link    { display: inline-block; position: relative; font-size: 0; line-height: 0;}

/* keyframes
------------------------------*/
.slide-box { width: auto; display: block; position: relative; overflow: hidden;}
.slide,
.slide-2-1,
.slide-2-2 { display: block; position: absolute; left: 0; top: 0; width: 100%; height: auto; animation-fill-mode: both; animation-timing-function: linear; animation-duration: 6.0s; animation-iteration-count: infinite;}
.slide-2-1 { position: relative; width: 100%; height: auto; animation-name: slideAnime; animation-delay: 0s;}
.slide-2-2 { animation-name: slideAnime; animation-delay: 3.0s;}

/* フェードアニメーション */
@keyframes slideAnime { 
	0%   { opacity: 0;}
  5%   { opacity: 1;}
  50%  { opacity: 1;}
  55%  { opacity: 0;}
  100% { opacity: 0;}
}
/* ティッカーアニメーション */
@keyframes loop-slide { 
	from { transform: translateX(0);}
  to   { transform: translateX(-100%);}
}