@charset "UTF-8";

/* ========================================
   @media screen and (min-width: 768px),print
======================================== */
@media screen and (min-width: 768px),print {
  #concept main {
    max-width: 1920px;
    margin-inline: auto;
    width: 100%;
  }

/* fv
-------------------------------------*/
.fv {
   background: url(../images/concept/fv-bg.png) no-repeat bottom center;
 }
 .fv h2 {
   text-align: center;
   margin-bottom: 3.85rem;
 }
 .fv h2 img {
   width: calc(1007 / 1920 * 100vw);
   height: auto;
   max-width: 1007px;
 }
 .fv .subt {
   font-size: 32px;
   line-height: 2.25;
   letter-spacing: 0.05em;
   font-weight: 500;
   text-align: right;
   margin-right: 8.65rem;
   margin-bottom: 3.6rem;
 }
 .fv .photo {
   max-width: 1920px;
   margin-inline: auto;
   width: 100%;
 }
 .fv .photo img {
   width: 100%;
   height: auto;
 }
 .fv .deco {
   padding: 2rem 0 0;
   margin-left: 2.5rem;
   margin-bottom: 0.65rem;
 }
 .fv .deco img {
   width: calc(491 / 1920 * 100vw);
   height: auto;
 }
 .fv .inBox {
   width: min(95%, 1280px);
   margin-inline: auto;
   display: grid;
   grid-template-columns: 36.79% 50.78%;
   gap: 7.5rem;
   padding: 0 0 6.5rem;
 }
 .fv .inBox .txt-box {
   margin-top: 5rem;
 }
 .fv .inBox .txt {
   font-size: 16px;
   line-height: 2.5;
   letter-spacing: 0.05em;
   font-weight: 500;
   margin-bottom: 2.5rem;
 }
 .fv .inBox .photo {
   margin-right: 4.5rem;
 }
 .fv .inBox .photo img {
   width: 100%;
   height: auto;
 }


 /* sec共通
 -------------------------------------*/
 .sec .ttl-wrap {
   display: grid;
 }
 .sec .ttl-wrap h2 {
   font-size: 32px;
   line-height: 2.25;
   letter-spacing: 0.05em;
   font-weight: 500;
 }
 .sec .inBox .txt {
   font-size: 16px;
   line-height: 2.5;
   letter-spacing: 0.05em;
   font-weight: 500;
   margin-bottom: 2.5rem;
 }
 .sec .inBox .lead {
   font-size: clamp(1.25rem, 0.833rem + 0.87vw, 1.875rem);
   line-height: 1.7;
   letter-spacing: 0.05em;
   font-weight: 500;
   margin-bottom: 2.3rem;
 }
 .sec .photo img {
   width: 100%;
   height: auto;
 }
 
  /* design
 -------------------------------------*/
 .design .ttl-wrap {
   margin: 0.4rem 0 6.1rem -3.7rem;
}
.design .ttl-wrap .en-ttl {
   margin: 0 0 0 0.45rem;
}
.design .ttl-wrap .en-ttl img {
   width: calc(552 / 1920 * 100vw);
   max-width: 552px;
}
 .design .inBox01 {
   padding: 12.5rem 0 4.35rem;
   width: min(95%, 1780px);
   margin-left: auto;
   display: grid;
   grid-template-columns: 35.4% 1fr;
   gap: calc(51 / 1920 * 100vw);
 }
 .design .inBox02 {
   width: min(95%, 1780px);
   margin-right: auto;
   display: grid;
   grid-template-columns: 72.13% 27%;
   gap: 1.0625rem;
   padding: 0 0 5.5rem;
 }
 .design .inBox02 .txt-box {
   padding: 2rem 0 0 1.5rem;
 }

/* playfulness
 -------------------------------------*/
 .playfulness .ttl-wrap {
   position: relative;
   top: -9.55rem;
   right: 29.05rem;
   margin: 0 0 -2.15rem;
}
.playfulness .ttl-wrap .en-ttl {
   margin: -0.3rem 0 0 0.5rem;
}
.playfulness .ttl-wrap .en-ttl img {
   width: calc(996 / 1920 * 100vw);
   max-width: 996px;
}
 .playfulness .inBox01 {
   padding: 21.325rem 0 6.25rem;
   width: min(95%, 1752px);
   margin-right: auto;
   display: grid;
   grid-template-columns: 62.78% 32.6484%;
   gap: 4.7rem;
}
.playfulness .inBox01 .txt {
   padding: 0 0 0 0.3rem;
}
.playfulness .inBox02 {
   width: min(95%, 1640px);
   margin-inline: auto;
   display: grid;
   grid-template-columns: 42.2% 1fr;
   gap: 2.5rem;
   padding: 0 0 4.8rem;
}
.playfulness .inBox02 .txt-box {
   margin-left: 7.5rem;
   padding: 1rem 0 0;
}

 /* btn-box
 -------------------------------------*/
 .btn-box {
   background: #F0EFEB;
   padding: 9.65rem 0 9.9rem;
 }
  .btn-box .btn-list {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: calc(100 / 1920 * 100vw);
   margin-inline: auto;
   width: min(95%, 820px);
}
 .btn-box .btn-list li span {
   font-size: 16px;
   font-weight: 400;
   line-height: 1.1875;
   letter-spacing: 0;
   display: block;
   color: #9A9A9A;
   text-align: right;
   padding: 1.25rem 0 0;
}
 .btn-box .btn-list .btn {
   border-bottom: 1px solid #1C1C1C;
   padding: 0 0 0.75rem;
   position: relative;
   font-size: clamp(1.25rem, 1.083rem + 0.35vw, 1.5rem);
   font-weight: 500;
   line-height: 2;
   letter-spacing: 0.05em;
   width: 100%;
}
 .btn-box .btn-list .btn::after {
   content: "→";
   position: absolute;
   right: 0;
   top: 45%;
   transform: translateY(-50%);
   font-size: clamp(0.875rem, 0.708rem + 0.35vw, 1.125rem);
   color: #333333;
   font-weight: 400;
   font-family: "Lato", sans-serif;
   transition: all 0.2s ease;
}
 .btn-box .btn-list .btn:hover::after {
   right: -0.3125rem;
}
 .btn-box .btn-list a {
   text-decoration: none;
}

/* link-box
-------------------------------------*/
.link-box .inner {
   width: min(95%, 1640px);
   margin-inline: auto;
   padding: 10.05rem 0 15rem;
}
.link-box .en-ttl {
   font-size: 40px;
   font-weight: 700;
   line-height: 1.2;
   letter-spacing: 0.05em;
   margin-bottom: 0.05rem;
}
.link-box h2 {
   font-size: 16px;
   font-weight: 500;
   line-height: 2.5;
   letter-spacing: 0.05em;
   margin-bottom: 1.3rem;
}
.link-box .item {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
   gap: 1.5rem;
}
.link-box .item img {
   width: 100%;
   height: auto;
}

}

@media screen and (min-width:768px) and (max-width:1440px) {
   .fv .inBox .txt-box {
      margin-top: calc(80 / 1920 * 100vw);
   }
   .fv .inBox .txt {
      font-size: clamp(0.875rem, 0.732rem + 0.3vw, 1rem)
   }
   .sec .inBox .txt {
      font-size: clamp(0.875rem, 0.732rem + 0.3vw, 1rem)
   }
   .design .inBox01 {
      grid-template-columns: 36.4% 1fr;
   }
   .design .inBox02 {
      grid-template-columns: 67.4% 31.6%;
      gap: calc(17 / 1920 * 100vw);
   }
   .design .inBox02 .txt-box {
      padding: calc(32 / 1920 * 100vw) 0 0 calc(24 / 1920 * 100vw);
   }
   .playfulness .inBox01 {
      gap: calc(51 / 1920 * 100vw);
      grid-template-columns: 60.89% 39.6484%;
   }
   .playfulness .inBox02 .txt-box {
      margin-left: calc(120 / 1920 * 100vw);
   }
}
/* ========================================
@media screen and (min-width:768px) and (max-width:1280px) 
======================================== */
@media screen and (min-width:768px) and (max-width:1280px) {
   .fv .inBox {
      gap: calc(120 / 1920 * 100vw);
      grid-template-columns: 39.79% 50.78%;
   }

   .design .ttl-wrap {
      margin: calc(6 / 1920 * 100vw) 0 calc(97 / 1920 * 100vw) calc(-59 / 1920 * 100vw); 
   }
}


/* ========================================
   @media screen and (max-width: 767px)
======================================== */
@media screen and (max-width: 767px) {
/* fv
-------------------------------------*/
.fv {
   background: url(../images/concept/fv-bg_sp.png) no-repeat bottom center / cover;
   padding: 4vw 0 0;
 }
 .fv h2 {
   text-align: center;
   margin-bottom: 3.5vw;
 }
 .fv h2 img {
   width: 89.615vw;
   height: auto;
 }
 .fv .subt {
   font-size:5.314vw;
   line-height: 2.2727;
   letter-spacing: 0.05em;
   font-weight: 500;
   text-align: right;
   margin-right: 2.8vw;
   margin-bottom: 10vw;
 }
 .fv .photo-wrap {
   display: grid;
   grid-template-columns: 70.04% 1fr;
   gap: 7.2vw;
   align-items: flex-end;
 }
 .fv .photo img {
   width: 100%;
   height: auto;
 }
 .fv .deco img {
   width: 15.702vw;
   height: auto;
 }
 .fv .inBox {
   display: grid;
   padding: 11vw 0 15vw;
   width: 89.375vw;
   margin-inline: auto;
   gap: 5.2vw;
 }
 .fv .inBox .txt {
   font-size:3.382vw;
   line-height: 2.2857;
   letter-spacing: 0.05em;
   font-weight: 500;
   margin-bottom: 7.7vw;
 }
 .fv .inBox .txt:first-child,
 .fv .inBox .txt:last-child {
   margin-bottom: 0;
 }
 .fv .inBox .photo img {
   width: 100%;
   height: auto;
 }

 /* sec共通
 -------------------------------------*/
 .sec .ttl-wrap {
   display: grid;
   position: relative;
   order: 1;
 }
 .sec .ttl-wrap h2 {
   font-size:3.382vw;
   line-height: 2.25;
   letter-spacing: 0.05em;
   font-weight: 500;
 }
 .sec .inBox .txt {
   font-size:3.382vw;
   line-height: 2.2857;
   letter-spacing: 0.05em;
   font-weight: 500;
   margin-bottom: 2vw;
 }
 .sec .inBox .lead {
   font-size:4.831vw;
   line-height: 1.75;
   letter-spacing: 0.05em;
   font-weight: 500;
   margin-bottom: 2vw;
 }
 .sec .photo img {
   width: 100%;
   height: auto;
 }

/* design
 -------------------------------------*/
 .design  {
   padding: 16.2vw 0 7vw;
 }
 .design .ttl-wrap {
   left: 6.7vw;
   top: 4vw;
   gap: 0.8vw;
}
.design .ttl-wrap .en-ttl img {
   width: 41.79vw;
}
 .design .inBox {
   display: grid;
 }
 .design .inBox .photo {
   order: 2;
   margin: 0 0 6.4vw;
 }
 .design .inBox .txt-box {
   display: contents;
 }
 .design .inBox .lead {
   order: 3;
   width: 89.375vw;
   margin-inline: auto;
   margin-bottom: 5.6vw;
 }
 .design .inBox .txt {
   order: 4;
   width: 89.375vw;
   margin-inline: auto;
   margin-bottom: 7.6vw;
 }
 .design .inBox02 {
   width: 89.375vw;
   margin-inline: auto;
   padding: 0.8vw 0 0;
}
 .design .inBox02 .txt-box .sp {
   order: 2;
 }

 /* playfulness
 -------------------------------------*/
 .playfulness  {
   padding: 16vw 0 7.2vw;
}
 .playfulness .ttl-wrap {
   left: 18vw;
   top: 4.4vw;
   gap: 1vw;
}
.playfulness .ttl-wrap .en-ttl {
   margin: 0 0 0 1vw;
}
.playfulness .ttl-wrap .en-ttl img {
   width: 75.365vw;
}
.playfulness .inBox .txt-box {
   display: contents;
 }
 .playfulness .inBox {
   display: grid;
 }
 .playfulness .inBox .photo {
   order: 2;
   margin: 0 0 6.4vw;
 }
 .playfulness .inBox .lead {
   order: 3;
   width: 89.375vw;
   margin-inline: auto;
   margin-bottom: 5.6vw;
 }
 .playfulness .inBox .txt {
   order: 4;
   width: 89.375vw;
   margin-inline: auto;
   margin-bottom: 7.6vw;
 }
.playfulness .inBox02 {
   width: 89.375vw;
   margin-inline: auto;
   padding: 0.8vw 0 0;
}


  /* btn-box
 -------------------------------------*/
 .btn-box {
   background: #F0EFEB;
   padding: 17.2vw 0 16.7vw;
 }
  .btn-box  .btn-list {
   display: grid;
   grid-template-columns: 1fr;
   gap: 9.4vw;
   width: 79.712vw;
   margin-inline: auto;
}
 .btn-box  .btn-list li span {
   font-size: 3.14vw;
   font-weight: 400;
   line-height: 1.25;
   letter-spacing: 0;
   display: block;
   color: #9A9A9A;
   text-align: right;
   padding: 2.5vw 0 0 0;
   margin: 0 0.8vw 0 0;
}
 .btn-box  .btn-list .btn {
   border-bottom: 0.2vw solid #1C1C1C;
   padding: 0 0 4.2vw;
   position: relative;
   font-size: 3.865vw;
   font-weight: 500;
   line-height: 2;
   letter-spacing: 0.05em;
   margin: 0;
   width: 79vw;
}
 .btn-box  .btn-list .btn::after {
   content: "→";
   position: absolute;
   right: 0;
   top: 32%;
   transform: translateY(-50%);
   font-size: 5.797vw;
   color: #333333;
   font-weight: 400;
   font-family: "Lato", sans-serif;
   transition: all 0.2s ease;
}
 .btn-box  .btn-list .btn:hover::after {right: -1vw;}
 .btn-box  .btn-list a {
   text-decoration: none;
}

   /* link-box
   -------------------------------------*/
   .link-box .inner {
      width: 89.375vw;
      margin-inline: auto;
      padding: 21.8vw 0 33.5vw;
   }
   .link-box .en-ttl {
      font-size:7.246vw;
      font-weight: 400;
      line-height: 1.2;
      letter-spacing: 0.05em;
      text-align: center;
      margin-bottom: 0;
   }
   .link-box h2 {
      font-size:3.623vw;
      font-weight: 500;
      line-height: 2;
      letter-spacing: 0.05em;
      text-align: center;
      margin-bottom: 11vw;
   }
   .link-box .item {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 4.4vw 2.4vw;
   }
}