@font-face {
  font-display: swap;
  font-weight: 400;
  font-style: normal;
  font-family: 'Skin';
  src: url('../fonts/Skin-Regular.woff') format('woff');
}

.l-contents .l-contents__frame {
  width: unset;
  padding: 0;
}

body {
  font-family: 'Yu Gothic', sans-serif;
}

.fv {
  width: 100vw;
  height: 25vw;
  background: url('../image/common/sub-fv.jpg');
  background-size: cover;
  font-family: 'Skin', sans-serif;
  font-size: 2.5vw;
  display: flex;
  justify-content: center;
  padding-top: 14.444vw;
  color: white;
  letter-spacing: 0.1em;
}

img {
  width: 100%;
  height: 100%;
}

#footer .list .title img {
  max-width: 100%;
  height: unset;
}

section#column {
  margin: 0 calc(50% - 50vw);
  background-color: #f8f8f8;
}

#column .row a {
  color: #7f7f7f;
}

#column .row a.video {
  position: relative;
}
#column .row a.video::before {
  content: 'Video';
  position: absolute;
  top: 12px;
  left: 10px;
  color: #fff;
  padding: 1px 5px 0px 1.5vw;
  background-image:url(../image/common/ic_arrow.png);
  background-size:0.7vw 0.8vw;
  background-position: center left 0.6vw;
  background-color: rgba(0, 0, 0, 0.2);
  background-repeat:no-repeat;
  border-radius: 500px;
  font-size: 1.2vw;
  font-weight: 700;
  letter-spacing: 0.05em;
  z-index: 1;
}

section#column h2::after {
  width: 9.72vw;
  top: 1vw;
  left: 45.14vw;
}

section#column .row {
  width: 75.1vw;
  margin: min(80px, 5.56vw) auto;
}

section#column .wrap:not(:first-child) {
  margin-top: 60px;
}

section#column .category {
  margin-bottom: 1vw;
  color: #766767;
      font-family: 'Skin', sans-serif;
  font-size: 2vw;
  font-weight: 700;
}

section#column .scroll {
  display: flex;
  gap: min(40px, 2.78vw);
  position: relative;
  width: 100%;
}

section#column .scroll.is-on {
  -webkit-overflow-scrolling: touch;
  overflow: hidden;
  overflow-x: scroll;
  padding-bottom: 18px;
}

section#column .scroll::-webkit-scrollbar {
  max-height: 15px;
  height: 1.5vw;
}

section#column .scroll::-webkit-scrollbar-thumb {
  background: #766767;
  border-radius: 500px;
}

section#column .scroll::-webkit-scrollbar-track {
  background: #ccc;
  border-radius: 500px;
}

section#column .column {
  position: relative;
  overflow: hidden;
  border-radius: max(24px, 1.67vw);
  width: 16.5vw;
  height: 16.5vw;
  opacity: 1;
  cursor: pointer;
}

section#column .column:hover {
  opacity: 0.7;
}

section#column .column .image {
  position: relative;
  width: 16.5vw;
  height: 16.5vw;
}

section#column .column .image::before {
  content: '';
  position: absolute;
  display: block;
  z-index: 1;
  width: 100%;
  height: 100%;
  background: rgb(217, 217, 217);
  background: linear-gradient(180deg, rgba(217, 217, 217, 0) 0%, rgba(42, 42, 42, 1) 100%);
}

section#column .column .image img {
  width: 100%;
  height: auto;
  transition: 1s all;
  object-fit: cover;
  aspect-ratio: 1 / 1;
  border-radius: 0;
}

section#column .column:hover .image img {
  transform: scale(1.2, 1.2);
  transition: 1s all;
}

section#column .column h3 {
  position: absolute;
  bottom: min(13px, 0.902vw);
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  font-size: 0.9vw;
  width: calc(100% - min(26px, 1.805vw));
  font-weight: 500;
  color: #fff;
  overflow: hidden;
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

section#column .column > p {
  display: none;
}

section#column .column p {
  padding-left: 0.8vw;
  font-size: 0.9vw;
  margin-top: 0.43vw;
  text-decoration: underline;
  text-underline-offset: 0.2vw;
}

section#column .button {
  width: 20.83vw;
  height: 4.44vw;
  margin: 2.78vw auto 0;
  background-image: url('../image/pc-top-button03.png');
  background-size: contain;
}

section#column .button:hover {
  background-image: url('../image/pc-top-button03-hover.png');
}

.column-bnr{
      width: 75.1vw;
    margin: min(120px, 5.56vw) auto;
}
.column-bnr a{
  transition:0.3s;
}
.column-bnr a:hover{
 opacity:0.8; 
}
.bnr-msg{
    margin: min(120px, 5.56vw) auto;
      color: #6B6E7A;
      font-family: 'Skin', sans-serif;
  font-size: 1.6vw;
  text-align:center;
}

.bnr-msg a{
  display:block;
  position:relative;
  width:max(320px,20vw);
      color: #6B6E7A;
  margin:15px auto 160px;
  padding: 3px 20px 3px 57px;
  background-color:#B0CEC4;
  border-radius:100px;
  text-align:left;
  transition:0.3s;
}

.bnr-msg a:hover{
 opacity:0.8; 
  
}

.bnr-msg a::before{
 content:"";
  display:block;
  position:absolute;
  top:50%;
  left:18px;
  transform:translate(0,-50%);
  background:url(../image/column/sparcle.png) no-repeat top center/contain;
  width:25px;
  aspect-ratio:1/1;
}

.bnr-msg a::after{
 content:"";
  display:block;
  position:absolute;
  top:50%;
  right:22px;
  transform:translate(0,-50%);
  background:url(../image/column/ic_btn_arrow.png) no-repeat top center/contain;
  width:6px;
  aspect-ratio:8/14;
}