@charset "UTF-8";

/* fade animation ----------*/
.fade { opacity:0; transition:all 1s ease-out!important; }
.fade-left { transform:translateX(-100%); }
.fade-right { transform:translateX(100%); }
.fade-up { transform:translateY(100px); }
.fade-down { transform:translateY(-100px); }
.fade.active {
  transform:translate(0,0)!important;
  opacity:1!important;
}

/* common ----------*/
body { 
  color:#484848;
}
main {
  font-family:"游明朝", YuMincho, "ヒラギノ明朝 ProN W6", "Hiragino Mincho ProN", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", "Times New Roman", Meiryo, serif;
  /*font-family:YuGothic,"游ゴシック","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"ＭＳ Ｐゴシック",sans-serif;*/
  line-height:1.6;
}
section { margin:0!important; }
.inner { max-width:124rem; width:100%; padding:0 2rem; margin:0 auto; }
#page { width:auto; }

div.fs-l-page { margin-top:0!important; }
#header-new { background:none!important; }

.font_goth {
  font-family:YuGothic,"游ゴシック","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"ＭＳ Ｐゴシック",sans-serif;
  line-height:1.6;
}

.slick-dotted.slick-slider { margin:0; }
.slick-dots { margin-top:1rem; bottom:2rem; }
.slick-dots li { background:#B8B8B8; width:1.5rem; height:1.5rem; border-radius:50%; }
.slick-dots li.slick-active { background:#484848; }
.slick-dots li button {}
.slick-dots li button:before{ display:none; }

.slick-prev { left:0; }
.slick-next { right:0; }
.slick-prev, .slick-next { z-index:100; }
.slick-prev:before, .slick-next:before { color:#333; opacity:.8; }


div:after,ul:after { display:none; }
p { margin:0; }

/* responsive ----------*/
.pc { display:block; }
.sp-only { display:none; }
.br102 { display:none; }
.br82 { display:none; }
.br82-only { display:none; }
.br60 { display:none; }
@media screen and (max-width:1020px){
  .br102 { display:block; }
}
@media screen and (max-width:820px){
  .pc-only { display:none; }
  .br82-only { display:block; }
  .br82 { display:block; }
}
@media screen and (max-width:600px){
  .pc { display:none; }
  .br82-only { display:none; }
  .sp-only { display:block; }
}

h2.about {
  font-size:clamp(24px,2.5vw,4.8rem);
  border-bottom: solid 1px #fff;
  line-height: 1;
  padding-bottom: 2rem;
  margin-bottom: 2rem;
}
h2.secttl-set {
  color: #2B3242;
  text-align:center;
  font-size:clamp(15px,1.56vw,3rem);  
}
h2.secttl-set p {
  text-align:center;
  margin-bottom:3rem;
}

/*--------------------
mv
--------------------*/
#mv {}
#mv .mv { position:relative; }
#mv .mv-text {
  position:absolute;
  top: 50%;
  left:4.166vw;
  transform:translateY(-50%);
}
#mv .mv-text p {
  writing-mode: vertical-rl;
  font-size: clamp(20px,2.08vw,4rem);
  margin-left:10vw;
}
#mv .sec-ttl {
  position:absolute;
  top: 50%;
  left:4.166vw;
  transform:translateY(-50%);
}
#mv .sec-ttl img {
  width:clamp(16px,1.25vw,2.4rem);
} 

/*--------------------
about
--------------------*/
#about {}
#about .aboutBlock {
  position:relative;
}
#about .aboutBlock .sec-ttl {
  position:absolute;
  top:3.645vw;
  left: 50%;
  transform: translateX(-50%);
  height: clamp(16px,1.30vw,2.5rem)
}
#about .aboutBlock .sec-ttl img { height:100%; }
#about .aboutBlock .aboutBlock-text {
  max-width:31.25%;
  width: 100%;
  position:absolute;
  top: 50%;
  transform: translateY(-50%);
}
#about .aboutBlock .aboutBlock-text p {
  font-size:clamp(12px,1.25vw,2.4rem);
}
#about .aboutBlock:nth-of-type(odd) .aboutBlock-text {
  color: #fff;
  left: 5%;
}
#about .aboutBlock:nth-of-type(even) .aboutBlock-text {
  color: #1F6B7F;
  right: 5%;
}
#about .aboutBlock:nth-of-type(even) .aboutBlock-text h2 {
  border-color:#1f6b7f;
}

/*--------------------
lineup
--------------------*/
#lineup {
  position:relative;
  background:#F9F9F9;
  padding:8rem 0;
}
#lineup .sec-ttl {
  position:absolute;
  top: 50%;
  left:4.166vw;
  transform:translateY(-50%);
  width:clamp(16px,1.25vw,2.4rem);
}
#lineup h3 {
  font-size:clamp(13px,1.04vw,2.6rem);
  text-align:center;
}
#lineup .grid {
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:4rem;
  align-items:start;
  margin-top:8rem;
}
#lineup .gridBlock{
  display:grid;
  grid-template-rows:auto 1fr;
  gap:2.4rem;
}
#lineup .gridBlock .items{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:2rem;
  align-items:flex-start;
}
#lineup .gridBlock .item{
  min-width:0;
}
/* 4個の時 */
#lineup .items .item:nth-child(4):last-child{
  grid-column:2;
}

/* 5個の時 */
#lineup .items .item:nth-child(4):nth-last-child(2){
  grid-column:1;
}

#lineup .items .item:nth-child(5):last-child{
  grid-column:3;
}
#lineup .gridBlock .item a{
  display:block;
  color:#333;
}
#lineup .gridBlock .item img{
  display:block;
  width:100%;
  height:auto;
  margin:0 auto 8px;
  aspect-ratio:1;
  border-radius: 50%;
  object-fit: cover;
}
#lineup .gridBlock .name{
  font-size:12px;
  line-height:1.6;
  text-align:center;
}
#lineup .gridBlock .price{
  display:block;
  margin-top:4px;
  font-size:12px;
}
#lineup .btn {
  max-width:27rem;
  width:100%;
  margin: 5rem auto 0;
}
#lineup .btn a {
  display:block;
  padding:1rem 0;
  background:#232F41;
  color: #fff;
  font-size:1.8rem;
  font-weight: bold;
  text-align: center
}


#pickup {
  background:#DFDFDF;
  padding:8rem 0;
}
#pickup .pickup-item-wrap {
  margin-top: 5rem;
}
#pickup .pickup-item {
  position: relative;
  max-width:83.333vw;
  width: 100%;
}
#pickup .pickup-item .textarea {
  color: #232F41;
  position:absolute;
  top: 0;
  bottom:0;
  height: 100%;
  padding-bottom: 5rem;
  display:flex;
  flex-direction: column;
  max-width:35%;
  width:100%;
}
#pickup .pickup-item .textarea .pickup-ttl {
  font-size: clamp(18px,1.875vw,3.6rem);
  display: flex;
  align-items: baseline;
  margin-bottom: auto;
}
#pickup .pickup-item .textarea .pickup-ttl span {
  font-size: clamp(30px,3.125vw,6rem);
}
#pickup .pickup-item .textarea .item-text {}
#pickup .pickup-item .textarea .item-text h3 {
  font-size: clamp(15px,1.5625vw,3rem);
  border-bottom: solid 1px #243044;
  padding-bottom: 1.5rem;
  margin-bottom: 1.5rem;
}
#pickup .pickup-item .textarea .item-text .tx {
  font-size: clamp(12px,1.0416vw,2rem);
  margin-bottom: 2rem;
}
#pickup .pickup-item .textarea .item-text .new {
  display:block;
  max-width:7rem;
  width: 100%;
  text-align:center;
  color:#fff;
  background: #243044;
  padding:5px 0;
  font-size: clamp(12px,1.0416vw,2rem);
  margin-bottom: 2rem;
  font-weight: bold;
}
#pickup .pickup-item .textarea .item-text .price_btn {
  display:flex;
  justify-content:flex-end;
}
#pickup .pickup-item .textarea .item-text .price_btn .price {
  font-size: clamp(15px,1.5625vw,3rem);
  margin-right:4rem;
  font-weight: bold;
}
#pickup .pickup-item .textarea .item-text .price_btn .btn a {
  display: block;
  text-align: center;
  padding: 5px 2em;
  background: #232F41;
  color: #fff;
  font-weight: bold;
  font-size: clamp(12px,1.0416vw,2rem);
}
#pickup .pickup-item:nth-of-type(n+2) {
  margin-top: 15rem;
}
#pickup .pickup-item-wrap .pickup-item:nth-of-type(odd) {
  margin-left: auto;
}
#pickup .pickup-item-wrap .pickup-item:nth-of-type(odd) .textarea{
  left: -8.125%;
}
#pickup .pickup-item-wrap .pickup-item:nth-of-type(even) {
  margin-right: auto;
}
#pickup .pickup-item-wrap .pickup-item:nth-of-type(even) .textarea{
  right: -8.125%;
}
#pickup .pickup-item-wrap .pickup-item:nth-of-type(even) .textarea .pickup-ttl{
  justify-content: flex-end;
}
#pickup > .btn {
  max-width:27rem;
  width:100%;
  margin: 5rem auto 0;
}
#pickup > .btn a {
  display:block;
  padding:1rem 0;
  background:#232F41;
  color: #fff;
  font-size:1.8rem;
  font-weight: bold;
  text-align: center
}


@media screen and (max-width:1040px){
  #mv .mv-text { margin-top:5vw; }
  
  #lineup .grid { gap:2rem; padding:0 6rem; }
  #lineup .gridBlock .items {
    grid-template-columns:repeat(2, 1fr);
  }
  
  #pickup .pickup-item .textarea { padding-bottom:3rem; }
  #pickup .pickup-item .textarea .item-text .new { max-width:6rem; margin-bottom:1rem; }
  
}
@media screen and (max-width:820px){
  #mv .mv picture img { height:55rem; object-fit:cover; }
  #mv .mv-text p { text-shadow: 0 0 8px rgba(255,255,255,0.9); }
  
  #lineup h3 { height:4.2rem; display:flex; justify-content:center; align-items: center; }
  #pickup .pickup-item .slider-fade img { height:40rem; object-fit: cover;}
  #pickup .pickup-item:nth-of-type(n+2) { margin-top:8rem; }
}
@media screen and (max-width:600px){
  .slick-dots { bottom:1rem; }
  
  #mv .mv picture img { height:45rem; object-position:75% 50%; }
  #mv .mv-text { position:initial; transform:none; justify-content:center;  }
  #mv .mv-text p { margin:3rem auto; }
  #mv .sec-ttl { top:10%; transform: none; }
  
  #about .aboutBlock img { height:30rem; object-fit:cover; }
  #about .aboutBlock:nth-of-type(odd) img { object-position:right; }
  #about .aboutBlock:nth-of-type(even) img { object-position:left; }
  #about .aboutBlock .aboutBlock-text {
    position:initial;
    max-width: 100%;
    width: 90%;
    margin:3rem 2rem;
    transform:none;
    color: #1f6b7f!important;
  }
  #about .aboutBlock .aboutBlock-text h2.about {
    border-color: #1f6b7f;
  }
  
  #lineup h3 { height:auto; }
  #lineup .sec-ttl { display: none; }
  #lineup .grid { display:block; padding:0; }
  #lineup .gridBlock { gap:2rem; }
  #lineup .gridBlock:nth-of-type(n+2) { margin-top:3rem; }
  #lineup .gridBlock .items { display: block; }
  #lineup .gridBlock .items .item { margin:0 1rem; }
  #lineup .items .item:nth-child(4):last-child { grid-column:auto; }
  #lineup .gridBlock .name { white-space:nowrap; }
  
  #pickup .pickup-item { max-width:100%; width:90vw; }
  #pickup .pickup-item .textarea { position:initial; max-width: 100%; padding:2rem 0 0; }
  #pickup .pickup-item:nth-of-type(odd) .textarea { padding-right:3rem; }
  #pickup .pickup-item:nth-of-type(odd) .textarea .pickup-ttl {
    position:absolute;
    top: 0;
    left: -5%;
  }
  #pickup .pickup-item:nth-of-type(even) .textarea { padding-left:3rem; }
  #pickup .pickup-item:nth-of-type(even) .textarea .pickup-ttl {
    position:absolute;
    top: 0;
    right: -5%;
  }
}