@charset "utf-8";
/* ============== 基本ベース ============== */
html {
  letter-spacing: 2px;
  font-weight: 600;
  font-size: 100%;
}
@media (min-width: 651px) and (max-width: 1200px) {
  html {
    font-size: calc(16px + (18 - 16) * ((100vw - 651px) / (1200 - 651)));
    /* 16pxから18pxまで可変 */
  }
}
@media (min-width: 1201px) and (max-width: 1920px) {
  html {
    font-size: calc(18px + (20 - 18) * ((100vw - 1201px) / (1920 - 1201)));
    /* 18pxから20pxまで可変 */
  }
}
@media (min-width: 1921px) {
  html {
    font-size: 20px; /* 1921px以上は固定で20px */
  }
}
/* font指定（assets/parts/g-fonts.phpと併用） */
body {
  background-color: rgb(46 96 91 / 20%);
  font-family: "M PLUS 1p","Geologica", sans-serif;
  font-weight: 600;
  font-size: 1rem;
}
/* width320～1920pxまで50px~120pxの可変 */
@media screen and (max-width:319px) {
  .concept, .lineup, .flow {
    margin-top: 50px;
  }
}
@media (min-width: 320px) and (max-width: 1920px) {
  .concept, .lineup, .flow {
    margin-top: calc(50px + (120 - 50) * ((100vw - 651px) / (1920 - 651)));
  }
}
@media screen and (min-width:1921px) {
  .concept, .lineup, .flow {
    margin-top: 120px;
  }
}


/*-----------------------------------------------
footer add
-----------------------------------------------*/

/*-----------------------------------------------
section
-----------------------------------------------*/
.sec-title {}
.sec-title h3 {
  margin: 0;
  font-size: 5rem;
  position: relative;
  font-weight: bold;
  color: rgb(255 255 255 / 10%);
  background: rgba(0, 0, 0, .3);
  text-shadow: 0 0 0.1em rgba(255, 255, 255, 0.05), 0.01em 0.04em 0.03em rgba(255, 255, 255, 0.4);
  -webkit-background-clip: text;
  border-bottom: 6px double #000;
  font-family: "Geologica";
  width: 100%;
  text-align: center;
}
.sec-title h3:before {

}
.sec-title span {
  font-size: 1.55rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #000;
  display: inline-block;
  padding: 5px 10px;
  font-weight: bold;
}
@media screen and (max-width:820px) {
  .sec-title {
    margin-bottom: 25px;
  }
}
/*-----------------------------------------------
btn
-----------------------------------------------*/
.btn,
a.btn,
button.btn {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.6;
  position: relative;
  display: inline-block;
  padding: 1rem 4rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  color: #212529;
  border-radius: 0.5rem;
}
a.btn-flat {
  overflow: hidden;
  padding: 1.5rem 6rem;
  color: #fff;
  border-radius: 0;
  background: #2E605B;
}
a.btn-flat span {
  position: relative;
}
a.btn-flat:before {
  position: absolute;
  top: 0;
  left: 30px;
  width: 150%;
  height: 500%;
  content: '';
  -webkit-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
  -webkit-transform: translateX(-98%) translateY(-70%) rotate(135deg);
  transform: translateX(-98%) translateY(-70%) rotate(135deg);
  background: #D3B275;
}
a.btn-flat:hover:before {
  -webkit-transform: translateX(-9%) translateY(-25%) rotate(135deg);
  transform: translateX(-9%) translateY(-25%) rotate(135deg);
}
/*-----------------------------------------------
top
-----------------------------------------------*/
.slider {/*横幅94%で左右に余白を持たせて中央寄せ*/
  width:94%;
  margin:0 auto;
}
.slider img {
   width:100%;
   height:auto;
   box-shadow: var(--shadow-bla);
}
.slider .slick-slide {
   margin:0 10px;
}
.slick-prev, 
.slick-next {
   position: absolute;/*絶対配置にする*/
   top: 42%;
   cursor: pointer;/*マウスカーソルを指マークに*/
   outline: none;/*クリックをしたら出てくる枠線を消す*/
   border-top: 2px solid #666;/*矢印の色*/
   border-right: 2px solid #666;/*矢印の色*/
   height: 15px;
   width: 15px;
}
.slick-prev {/*戻る矢印の位置と形状*/
   left: -1.5%;
   transform: rotate(-135deg);
}
.slick-next {/*次へ矢印の位置と形状*/
   right: -1.5%;
   transform: rotate(45deg);
}
.slick-dots {
   text-align:center;
    margin:20px 0 0 0;
}
.slick-dots li {
   display:inline-block;
    margin:0 5px;
}
.slick-dots button {
   color: transparent;
   outline: none;
   width:8px;
   height:8px;
   display:block;
   border-radius:50%;
   background:#ccc;
}
.slick-dots .slick-active button{
   background:#979797;/*ドットボタンの現在地表示の色*/
}
.top {}
.top .top-lead {
  height: 25vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  margin-top: 60px;
}
.top .top-lead h2 {
  font-size: 4.5rem;
  letter-spacing: 12px;
  line-height: 1.5;
  position: relative;
  font-weight: bold;
  display: inline-block;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 20px 40px;
  font-weight: bold;
  color: rgb(0 0 0 / 0.5);
  background: rgba(0, 0, 0, 1);
  text-shadow: 0 0 0.1em rgba(255, 255, 255, 0.05), 0.01em 0.04em 0.03em rgba(255, 255, 255, 0.4);
  -webkit-background-clip: text;
}
.top .top-lead p {
  font-size: 1.25rem;
  text-align: center;
  margin-bottom: 25px;
}
.top .top-lead h2 span {
  font-weight: 400;
  font-size: 1rem;
}
.top .slider li {}
.top .slider li img {
  box-shadow: var(--shadow-gray);
}
.top .top-category {}
.top .top-category a {
  display: block;
}
.top .top-category a .cate-box {
  position: relative;
}
.top .top-category a .cate-box img {
  aspect-ratio: 16/9;
  object-fit: cover;
  box-shadow: var(--shadow-gray);
}
.top .top-category a .cate-box .lead {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  background-color: rgb(255 255 255 / 65%);
  text-align: center;
  padding: 10px 0;
}
.top .top-category a .cate-box .lead p {
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 800;
}

/*-----------------------------------------------
slide
-----------------------------------------------*/
.slide01 img {
  width:100%;
  height:auto;
}
.slide01 .slick-slide {
  margin:0 10px;
}
.item-slide {
  padding: 80px 0;
}
.item-slide .slide01 {}
.item-slide .slide01 {}
.item-slide .slide01 .parts{
  position: relative;
  transition: 0.5s ease-in-out;
}
.item-slide .slide01 .parts:hover {
  opacity: 0.8;
}
.item-slide .slide01 .parts img{}
.item-slide .slide01 .parts .sub {
  text-shadow: none;
  color: #373737;
  margin: 10px 0;
}

.item-slide .slide01 li a {
  text-shadow: var(--shadow-bla);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.item-slide .slide01 li a .title {
  font-size: 22px;
  letter-spacing: 2px;
  font-weight: 700;
  width: 100%;
  text-shadow: none;
  margin-top: 10px;
}
.item-slide .slide01 li a p {
  overflow: hidden;
}
.item-slide .slide01 li .sub {
  line-height: 1.8;
}
.item-slide .slide01 li .itemprice {
  text-shadow: none;
  text-align: right;
  font-size: 22px;
  padding: 5px 5px 5px 15px;
}
.item-slide .slide01 .parts .itemprice .tax {
  font-weight: 600;
  color: #000;
}
.item-slide .slide01 .parts .category-tag {
  position: absolute;
  color: #fff;
  top: 0;
  right: 0;
  padding: 8px 15px;
  background-color: hsla(173, 35%, 28%, 0.8);
}
.slide01 img {
  width:100%;
  height:auto;
}
/*-----------------------------------------------
concept
-----------------------------------------------*/
.concept {
  margin-top: 120px;
}
.concept-btn {
  margin: 50px 0 0;
  display: flex;
  justify-content: center;
}
.concept .con-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 40vh;
  border-radius: 5px;
  box-shadow: var(--shadow-wh);
}
.concept .box01 {
  background-color: #CDAF6F;
}
.concept .box02 {
  background-color: var(--sec-color);
}
.concept .box03 {
  background-color: #DF5F30;
}
.concept .con-box .icon {
  margin-bottom: 10%;
}
.concept .con-box .icon img {
  width: 75px;
  height: auto;
}
.concept .con-box p {
  color: #fff;
}
.concept .con-box .ttl {
  font-size: 1.85rem;
  margin-bottom: 10%;
}
.concept .con-box .ex {
  line-height: 1.8;
  width: 90%;
}
/*-----------------------------------------------
lineup
-----------------------------------------------*/
.lineup {
  margin-top: 120px;
}
.lineup .contents{}
.lineup .lineup-btn {
  margin: 50px 0 0;
  display: flex;
  justify-content: center;
}
.lineup .contents .row {
  display: flex;
  align-items: stretch;
}
.lineup p {
}
.lineup .ttl {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 22px;
}
.lineup .lead {
  bottom: 0;
  right: 0;
  line-height: 1.8;
  box-shadow: 2px 2px 3px #575757;
  background: var(--sec-color);
}
/*-----------------------------------------------
flow
-----------------------------------------------*/
.flow {
  margin-top: 120px;
}
.flow .links {
  display: flex;
  padding: 2rem;
  gap: 1rem;
  height: 50vh;
  overflow: hidden;
  position: relative;
}
.flow .links .flow-box {
  display: block;
  flex: 1 1 auto;
  overflow: hidden;
  transition: flex-grow .4s ease-in-out;
  position: relative;
}
.flow .links .txt {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  text-align: center;
  background-color: rgb(255 255 255 / 60%);
  height: 60%;
  display: flex;
  place-items: center;
  justify-content: center;
  flex-direction: column;
  transition: opacity .4s ease-in-out;
  display: flex;
}
.flow .links .txt p {
  width: 90%;
  text-align: left;
  line-height: 1.8;
}
.flow .links .txt .title {
  font-size: 25px;
  font-weight: bold;
  margin-bottom: 25px;
}
.flow .links .flow-box:hover {
  flex-grow: 8;
}
.flow .links img {
  display: block;
  object-fit: cover;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: -1;
}
.flow .links:hover .flow-box:not(:hover) .txt {
  opacity: 0;
}
/*-----------------------------------------------
Responsive
-----------------------------------------------*/
@media screen and (max-width:1400px) {
  /* top */
  .top .top-lead h2 {
    font-size: 2.5rem;
    padding: 15px 30px;
  }
  .top .top-category a .cate-box img {
    aspect-ratio: 20/9;
  }
  /* concept */
  .concept .box {
    height: 400px;
  }
  .concept .box .ttl {
    font-size: 1.55rem;
    margin-bottom: 5%;
  }
  /* flow */
  .flow .links .txt {
    height: 60%;
  }
}
@media screen and (max-width:820px) {
  /* top */
  .top .top-lead {
    height: 15vh;
  }
  .top .top-lead h2 {
    font-size: 2rem;
  }
  /* concept */
  .concept .con-box .ttl {
    font-size: 1.2rem;
  }
  .concept .con-box .ex {
    line-height: 1.5;
  }
  .concept .con-box .icon img {
    width: 65px;
  }
  .concept .con-box {
    height: 350px;
  }
  /* lineup */
  .item-slide {
    padding: 50px 0;
  }
  /* flow */
  .flow .links {
    flex-direction: column;
    height: 100%;
  }
  .flow .links .flow-box {
    display: block;
    flex: 1 1 auto;
    overflow: hidden;
    transition: flex-grow .4s ease-in-out;
    position: relative;
    height: 250px;
    min-height: 250px;
  }
}
@media screen and (max-width:650px) {
  /* header */
  .header .left-ttl h1 {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }
  /* top */
  .top .top-lead p {
    font-size: 1rem;
    margin-bottom: 10px;
  }
  .top .top-lead h2 {
    width: 90%;
    padding: 10px 0;
    font-size: 1.2rem;
  }
  .top .top-lead h2 span {
    font-size: 0.8rem;
  }
  /* section */
  .sec-title h3 {
    font-size: 3rem;
  }
  .sec-title span {
    font-size: 1.2rem;
  }
  /* concept */
  .concept .con-box {
    height: 250px;
  }
  .concept .con-box .icon {
    margin-bottom: 3%;
  }
  .concept .con-box .ttl {
    margin-bottom: 3%;
  }
  /* item */
  .item-slide {
    padding: 25px 0;
  }
  /* flow */
  .flow .links {
    padding: 1rem 0;
  }
  /* btn */
  a.btn-flat {
    padding: 0.5rem 3rem;
  }
  .flow .links .txt .title {
    font-size: 20px;
    margin-bottom: 5px;
  }
}
@media screen and (max-width:420px) {

}