@charset "utf-8";
dl {
 max-width:100%;
}

.mv {
 position:relative;
 width:100%;
 height:calc(100vh - 122px);
 background-image:url(../img/item/bg-01.webp);
 background-position: center;
 background-repeat:no-repeat;
 background-size:cover;
 display:flex;
}
.mv h1 {
 position:absolute;
 top:46%;
 width:55%;
}
.mv h1 img {
 position:absolute;
 left:0;
 top:50%;
 translate:0 -50%;
 padding:0 80px;
 width:100%;
 height:calc(80vh - 122px);
 object-fit:contain;
}
.mv .mv__img {
  position:absolute;
 right:0;
 bottom:0;
 width:62vw;
height:calc(100vh - 122px);
object-fit:cover;
object-position:100px 100px;
}
.mv .flex {
 position:absolute;
 left:7%;
 bottom:8%;
 width:1000px;
 max-width:100%;
 justify-content:flex-start;
}
.mv .flex li {
 background:#000;
 color:#fff;
 border-radius:16px;
 flex-basis:calc(80% / 4);
 text-align:center;
 height:64px;
 line-height:64px;
 font-size:1.4rem;
 font-weight:600;
 letter-spacing:1px;
}
@media screen and (max-width:1023px) {
.mv h1 img {
 padding:0 40px;
 width:100%;
 height:calc(80vh - 122px);
 object-fit:contain;
}
 .mv .mv__img {
  width:66vw;
object-position:0px 50px;
  transform-origin: right bottom;
  scale:0.8;
}
}
@media screen and (max-width:767px) {
 .mv h1 {
  top:0;
  left:50%;
  translate:-50% 0;
  width:100%;
}
 .mv h1 img {
  top:0;
  left:50%;
  translate:-50% 0;
 padding:40px 0;
  width:90%;
height:45vh;
 }
 .mv .mv__img {
   left:50%;
  translate:-50% 0;
  width:100%;
  height:60%;
  scale:1;
 }
 .mv .flex {
 position:absolute;
 left:50%;
  translate:-50% 0;
 bottom:4%;
 width:1000px;
 max-width:100%;
 justify-content:center;
  gap:0.8em;
}
.mv .flex li {
 background:#000;
 color:#fff;
 border-radius:12px;
 flex-basis:;
 text-align:center;
 line-height:1.4;
 padding:13px 0;
 height:auto;
 font-size:0.88rem;
 border:2px solid #231815;
}
}


.catch {
 position:relative;
  background-image:url(../img/item/bg-02.webp);
 background-position: center;
 background-repeat:no-repeat;
 background-size:cover;
}
.catch::before {
  content:"";
 position:absolute;
 left:0;
 top:0;
 width:100%;
 height:100%;
  background-color:#F2F2F2;
 opacity:0.8;
}
.catch * {
 position:relative;
 z-index:1;
}
.catch h2 {
 margin:0 auto 24px;
 font-size:1.4rem;
 color:#000000;
}
.catch h3 {
 margin:80px auto 40px;
 font-size:1.4rem;
 color:#231815;
 font-weight:900;
}
.catch .catch__txt span {
 padding:16px 24px;
 font-size:1.4rem;
 font-weight:600;
 letter-spacing:1px;
 background:#231815;
 color:#fff;
}
.catch img {
 width:400px;
}
@media screen and (max-width: 767px) {
.catch h3 {
 margin:40px auto 40px;
 font-size:1rem;
}
 .catch img {
 width:240px;
}
 .catch .catch__txt {
  white-space:nowrap;
 }
 .catch .catch__txt span {
  font-size:1rem;
 }
}

.about {
 padding-bottom:0;
}
.about p {
 font-size:1.24rem;
 font-weight:600;
 line-height:2;
}

@media screen and (max-width: 767px) {
.about p {
 font-size:0.9rem;
}
}

.concept {
 padding-top:0;
}
.concept h2 {
 margin:24px 0;;
 font-size:4rem;
 color:#231815;
}
.concept h2 span {
 font-size:1rem;
 margin-left:8px;
}
.concept h3 {
 margin:0 0 16px;
 padding:8px 16px;
 color:#fff;
 background:#231815;
}
.concept .flex {
 gap:64px;
}
.concept .flex__img {
 flex-basis:40%;
}
.concept .flex__txt {
 flex-basis:55%;
}
.concept .flex__txt p {
 max-width:96%;
 margin:8px auto;
 font-size:0.8rem;
 line-height:1.8;
}
.concept .flex__txt hr {
 max-width:96%;
 margin:auto;
}
@media screen and (max-width: 767px) {
 .concept h2 {
  line-height:0.8;
 }
 .concept h2 span::before {
  content:"\A";
  white-space:pre-wrap;
 }
 .concept img {
  display:block;
  margin-bottom:24px!important;
  max-width:100%;
  width:320px;
  height:480px!important;
  object-fit:cover;
 }
}


.item__detail {
 padding-top:0;
}
.item__detail .txt__circle {
 display:block;
 width:80px;
 height:80px;
 line-height:70px;
 font-size:1.4rem;
 font-weight:900;
 border:4px solid;
 color:#D0D0D0;
 text-align:center;
 margin:64px auto 40px;
 border-radius:50%;
}
.item__detail .item__detail-ttl * {
 text-align:center;
}
.item__detail .item__copy {
 font-size:1.4rem;
 font-weight:600;
 letter-spacing:1px;
}
.item__detail .item__name {
 margin:32px auto 48px;
 font-size:2.4rem;
 font-weight:600;
 letter-spacing:1px;
}
.item__detail .item__type {
 font-size:1.24rem;
 font-weight:600;
 letter-spacing:1px;
}
.item__detail .item__type span {
 padding:16px 24px;
 color:#fff;
 background:#707070;
}
.item__detail .flex picture {
 flex-basis:50%;
}
.item__detail .flex .item__features {
 flex-basis:50%;
}
.item__detail .item__features dt {
 font-size:4rem;
 color:#707070;
}
.item__detail .item__features .num {
 font-size:0.8rem;
 line-height:1.6;
 margin:8px auto 0;
 color:#707070;
}
@media screen and (max-width: 767px) {
.item__detail .item__copy {
 font-size:1rem;
}
.item__detail .item__name {
 margin:24px auto 32px;
 font-size:2rem;
}
.item__detail .item__type {
 font-size:0.9rem;
}
.item__detail .item__type span {
 padding:12px 16px;
}
 .item__detail .item__features dt {
 font-size:3rem;
  text-align:center;
}
 .item__detail .item__features dd {
 font-size:0.8rem;
}
 .item__detail .item__features .num {
  text-align:center;
 }
 .item__detail-03 img {
  width:100%;
  height:320px!important;
  object-fit:cover;
 }
}

.item__detail-01 {
 padding-top:80px;
 color:#fff;
 background:#231815;
}
.item__detail-01--img {
 max-height:320px;
 width:90%;
 object-fit:cover;
}
.item__detail-01 .item__features dt {
 color:#D0D0D0;
}
.item__detail-01 .item__features .num {
 color:#D0D0D0;
}
.item__detail-01 .item__effect h4 {
 margin:0 0 40px;
 font-size:1.4rem;
 font-weight:600;
 letter-spacing:1px;
}
.item__detail-01 .item__effect .flex {
 align-items:stretch;
 width:100%;
}
.item__detail-01 .item__effect .flex dl {
 flex-basis:calc(100%/3);
 padding:32px;
 color:#231815;
 background:#D0D0D0;
 border-radius:16px;
}
.item__detail-01 .item__effect .flex dl dt {
 font-weight:600;
 margin-bottom:24px;
}
.item__detail-01 .item__effect .flex dl dd {
 font-size:0.8rem;
}
.item__detail-02 {
 background:#F2F2F2;
}
@media screen and (min-width: 768px) {
.item__detail-02 .flex:not(.item__effect .flex) {
 flex-direction:row-reverse;
}
}
.item__detail-02 .item__effect .flex {
 align-items:stretch;
 flex-wrap:wrap;
}
.item__detail-02 .item__effect .flex dl {
 flex-basis:calc(90%/2);
 padding:24px;
 background:#fff;
 border:1px solid #707070;
 border-radius:16px;
}
.item__detail-02 .item__effect .flex dl dt {
 font-weight:600;
}
.item__detail-02 .item__effect .flex dl dd {
 font-size:0.8rem;
 margin:16px 0 0 ;
}
.item__detail-02 .item__effect .flex dl img {
 margin:0 auto 24px 0;
}


.mapping {
  background:#F2F2F2;
}

.gallery img {
  border:1px solid #707070;
  background:#fff;
  cursor: pointer;
  transition:.3s;
}
.gallery img:hover {
  scale:1.016;
}