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

body{
margin:0;
font-family:serif;
}

.item-page{
max-width:900px;
margin:auto;
}

.item-fv{
  position:relative;
  display:grid;
  grid-template-columns:60% 40%;
  justify-content:space-between;
  align-items:center;

  width:100%;
  aspect-ratio:2527 / 1480;
  padding:0 10%;
  box-sizing:border-box;
  overflow:hidden;

  color:#fff;
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
}

.item-fv::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(
      90deg,
      rgba(0,0,0,0.34) 0%,
      rgba(0,0,0,0.24) 34%,
      rgba(0,0,0,0.12) 60%,
      rgba(0,0,0,0.12) 100%
    );
  z-index:0;
}

.item-fv > *{
  position:relative;
  z-index:1;
}

.item-fv > div{
  max-width:100%;
  align-self:center;
}

.item-fv h1{
  margin:0 0 22px;
  font-size:56px;
  line-height:1.18;
  font-weight:600;
  letter-spacing:0.02em;
}
.item-fv h1.small{
  font-size:48px;
}

.item-fv p{
  margin:0 0 0 1em;
  font-size:22px;
  line-height:1.95;
  font-weight:400;
  letter-spacing:0.03em;
}

.item-fv figure{
  margin:0;
  width:100%;
  justify-self:end;
  align-self:center;
}

.item-fv img{
  display:block;
  width:78%;
  max-width:none;
  height:auto;
  margin-left:auto;
}

/* タブレット */
@media screen and (max-width:1200px){

  .item-fv{
    grid-template-columns:52% 30%;
    padding:0 5.5%;
  }

  .item-fv h1{
    margin-bottom:22px;
    font-size:50px;
  }

  .item-fv p{
    font-size:18px;
    line-height:1.9;
  }

  .item-fv img{
    width:82%;
  }

}

/* スマホ */
@media screen and (max-width:768px){

  .item-fv{
    display:block;
    aspect-ratio:auto;
    padding:72px 24px 56px;
    text-align:center;
    background-position:center center;
  }

  .item-fv::before{
    background:rgba(0,0,0,0.28);
  }

  .item-fv > div{
    margin-bottom:32px;
  }

  .item-fv h1{
    margin:0 0 18px;
    font-size:36px;
    line-height:1.25;
  }

  .item-fv p{
    font-size:16px;
    line-height:1.9;
    letter-spacing:0.02em;
  }

  .item-fv figure{
    width:100%;
  }

  .item-fv img{
    width:min(62vw, 260px);
    margin:0 auto;
  }

}




/* 商品コピー */

.item-copy{

background:#e9e9e9;

display:flex;
justify-content:center;
align-items:center;

padding:140px 20px;

}

.item-copy p{

margin:0;

writing-mode:vertical-rl;
text-orientation:upright;

font-size:26px;
line-height:2.4;
letter-spacing:0.25em;

}

/* スマホ */

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

.item-copy{

padding:80px 20px;

}

.item-copy p{

font-size:20px;
line-height:2.2;

}

}

.item-gallery{
  background:#efefef;
  padding:80px 0 100px;
}

.item-gallery img{
  display:block;
  width:100%;
  height:auto;
}

.item-gallery figure{
  margin:0;
}

.item-gallery-top{
  width:min(100%, 900px);
  margin:0 auto 48px;
  display:grid;
  grid-template-columns:30% 30% 30%;
  justify-content:space-between;
  align-items:start;
}

.item-gallery-top figure:nth-child(1){
  margin-top:14px;
  opacity:0.55;
}

.item-gallery-top figure:nth-child(3){
  margin-top:26px;
}

.item-gallery-middle{
  width:min(100%, 900px);
  margin:0 auto 48px;
  display:grid;
  grid-template-columns:48% 48%;
  justify-content:space-between;
  align-items:flex-start;
}
.item-gallery-middle div{
  padding-right:40px;
}
.item-gallery-middle p{
  margin:0;
  font-size:18px;
  line-height:1.8;
}

.item-gallery-bottom{
  width:min(100%, 900px);
  margin:0 auto;
  display:grid;
  grid-template-columns:30% 30%;
  justify-content:end;
  gap:48px;
  align-items:start;
}

.item-gallery-bottom figure:nth-child(1){
  margin-top:8px;
}

.item-gallery-bottom figure:nth-child(2){
  margin-top:54px;
  opacity:0.6;
}

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

  .item-gallery{
    padding:48px 20px 56px;
  }

  .item-gallery-top,
  .item-gallery-middle,
  .item-gallery-bottom{
    width:100%;
    margin:0 0 24px;
  }

  .item-gallery-top{
    grid-template-columns:1fr;
    gap:16px;
  }

  .item-gallery-top figure:nth-child(1),
  .item-gallery-top figure:nth-child(3){
    margin-top:0;
    opacity:1;
  }

  .item-gallery-middle{
    grid-template-columns:1fr;
    gap:20px;
  }
.item-gallery-middle div{
  padding-right:0;
}
  .item-gallery-middle p{
    font-size:15px;
    line-height:2;
  }

  .item-gallery-bottom{
    grid-template-columns:1fr;
    gap:16px;
    justify-content:stretch;
  }

  .item-gallery-bottom figure:nth-child(1),
  .item-gallery-bottom figure:nth-child(2){
    margin-top:0;
    opacity:1;
  }

}

.item-feature{
  background:#efefef;
  padding:80px 0;
}

.item-block{
  width:min(100%, 980px);
  margin:0 auto 90px;
  display:grid;
  grid-template-columns:46% 46%;
  justify-content:space-between;
  align-items:stretch;
}

.item-block:last-child{
  margin-bottom:0;
}

.item-block figure{
  margin:0;
}

.item-block img{
  display:block;
  width:100%;
  height:auto;
}

.item-block > div{
  position:relative;
  height:100%;
  padding:0 26px 10px 0;
}

.item-block > div::before{
  content:attr(data-bg);
  position:absolute;
  right:0;
  bottom:0;
  font-size:clamp(90px, 12vw, 190px);
  line-height:1;
  font-weight:700;
  color:rgba(0,0,0,0.06);
  z-index:0;
  pointer-events:none;
  user-select:none;
  white-space:nowrap;
}

.item-block h2,
.item-block p{
  position:relative;
  z-index:1;
}

.item-block h2{
  margin:0 0 24px;
  font-size:26px;
  line-height:1.5;
  font-weight:500;
}

.item-block p{
  margin:0;
  font-size:18px;
  line-height:2;
}

.item-block.is-reverse figure{
  order:2;
}

.item-block.is-reverse > div{
  order:1;
  padding:0 0 10px 26px;
}

.item-block.is-reverse > div::before{
  left:0;
  right:auto;
}

.item-block.is-reverse > div::before{
  color:rgba(120,170,220,0.18);
}

.item-block:nth-child(3) > div::before{
  color:rgba(220,130,160,0.16);
}

.item-block:nth-child(5) > div::before{
  color:rgba(210,170,120,0.16);
}

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

  .item-feature{
    padding:48px 20px;
  }

  .item-block{
    width:100%;
    margin:0 0 56px;
    grid-template-columns:1fr;
    gap:20px;
    align-items:start;
  }

  .item-block figure,
  .item-block.is-reverse figure{
    order:1;
  }

  .item-block > div,
  .item-block.is-reverse > div{
    order:2;
    padding:8px 0;
  }

  .item-block > div::before,
  .item-block.is-reverse > div::before{
    left:auto;
    right:6px;
    font-size:clamp(64px, 24vw, 110px);
  }

  .item-block h2{
    margin-bottom:16px;
    font-size:22px;
  }

  .item-block p{
    font-size:15px;
    line-height:1.9;
  }

}


/* item03 専用 */

.item-story{
  background:#efefef;
  padding:80px 0 20px;
}

.item-story-block{
  width:min(100%, 980px);
  margin:0 auto 90px;
  display:grid;
  grid-template-columns:48% 48%;
  justify-content:space-between;
  align-items:start;
}

.item-story-block:last-child{
  margin-bottom:0;
}

.item-story-block figure{
  margin:0;
}

.item-story-block img{
  display:block;
  width:100%;
  height:auto;
}

.item-story-block > div{
  padding:0 5%;
}

.item-story-block h2{
  margin:0 0 32px;
  font-size:24px;
  line-height:1.5;
  font-weight:500;
}

.item-story-block p{
  margin:0;
  font-size:18px;
  line-height:1.5;
}

.item-story-block.is-reverse figure{
  order:2;
}

.item-story-block.is-reverse > div{
  order:1;
}

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

  .item-story{
    padding:48px 20px 8px;
  }

  .item-story-block{
    width:100%;
    margin:0 0 56px;
    grid-template-columns:1fr;
    gap:20px;
  }

  .item-story-block figure,
  .item-story-block.is-reverse figure{
    order:1;
  }

  .item-story-block > div,
  .item-story-block.is-reverse > div{
    order:2;
    padding-top:0;
  }

  .item-story-block h2{
    margin-bottom:18px;
    font-size:22px;
    line-height:1.6;
  }

  .item-story-block p{
    font-size:15px;
    line-height:1.9;
  }

}


.item-message{
  padding:120px 0;
  background:#efefef;
}

.item-message-inner{
  margin:0 auto;
  max-width:1200px;
  height:520px;
  background:url(https://samurai-tuchimikado.s3.ap-northeast-1.amazonaws.com/doc_dev/items/20260401/images/item03_message.jpg) center/cover no-repeat;
  text-align:center;
  color:#fff;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.item-message-inner{
  position:relative;
  z-index:0;
}

.item-message-inner::before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.35);
  z-index:-1;
}
.item-message-inner h2{
  display:inline-block;
  margin:0 auto 28px;
  padding-bottom:24px;
  font-size:32px;
  line-height:1.8;
  font-weight:500;
  position:relative;
}

.item-message-inner h2::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:100%;
  height:1px;
  background:rgba(255,255,255,0.6);
}

.item-message p{
  margin:0;
  font-size:18px;
  line-height:2;
}

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

  .item-message{
    padding:60px 20px;
  }

  .item-message-inner{
    height:420px;
  }

  .item-message h2{
    font-size:18px;
    line-height:1.7;
  }

  .item-message p{
    font-size:12px;
    line-height:1.9;
  }

}
/* item03 専用 end */