@charset "utf-8";
.topPage{
  display: grid;
}
@media screen and (min-width: 768px){
  #headerarea{
    order: 2;
    position: sticky;
    top: 0;
    left: 0;
    z-index: 99;
    width: 100%;
  }
  .t-fv{
    order: 1;
    height: calc(100vh - var(--HEADER_HEIGHT));
    max-height: 800px;
  }
  #mainarea{
    order: 3;
  }
  #footerarea{
    order: 4;
  }
  .hd-inner,
  .hd-nav__btn li a,
  .hd-nav__btn__icon,
  .hd-nav__btn__label{
    transition: .2s;
  }
  body.header-transform{
    --HEADER_HEIGHT: clamp( 130px, 14vw, 160px);
  }
  body.header-transform .hd-nav__btn li a{
    background-color: unset;
  }
  body.header-transform .hd-nav__btn__icon{
		background-color: var(--WHITE);
	}
	body.header-transform .hd-nav__btn__label{
		color: var(--WHITE);
	}
}
/* -------------------t-fv-------------------- */
.t-fvContainer{
  display: grid;
}
.t-fv{
  position: relative;
  margin-bottom: -1px;
}
.t-fv__catch{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
}
.t-fv__catch span{
  display: inline-block;
}
.t-fv__catch img{
  filter: drop-shadow(0px 0px 16px rgba(58, 58, 58, 0.8));
}
.t-fv__slide li img{
  object-fit: cover;
}
@media screen and (min-width: 768px){
  .t-fv{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
  .t-fv__catch{
    gap: 35px;
  }
  .t-fv__catch span{
    width: clamp( 200px, 30vw, 336px);
  }
  .t-fv__slide .slick-list,
  .t-fv__slide .slick-track,
  .t-fv__slide .slick-slide > div,
  .t-fv__slide li{
    height: 100%;
  }
  .t-fv__slide li img{
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .t-fv__slide li{
    position: relative;
  }
  .t-fv__slide li span{
    position: absolute;
    z-index: 2;
    font-size: 14px;
    font-family: var(--FF_NOTO);
    color: var(--WHITE);
    bottom: 12px;
    left: 12px;
    text-shadow: 1px 1px 10px var(--BLACK);
  }
}
@media screen and (max-width: 767px){
  .t-fv__catch{
    gap: 25px;
  }
  .t-fv__catch span{
    width: 217px;
  }
  .t-fv__slide li img{
    aspect-ratio: 375/308;
  }
  .t-fv__slide--second{
    margin-top: -4px;
    line-height: .9;
  } 
}
/* -------------------t-intro-------------------- */
.t-intro__contents{
  display: grid;
  grid-template-columns: 1fr auto;
  color: var(--WHITE);
}
.t-intro__ttl{
  letter-spacing: 0.3em;
  text-orientation: upright;
}
@media screen and (min-width: 768px){
  .t-intro{
    background: url(../images/cp/top/senkien-about_bg.jpg) no-repeat center center / cover;
  }
  .t-intro__body{
    width: 602px;
    margin-left: auto;
    padding: 86px 0;
  }
  .t-intro__contents{
    gap: 70px;
  }
  .t-intro__txt{
    font-size: var(--FZ_16);
  }
  .t-intro__ttl{
    font-size: var(--FZ_26);
  }
}
@media screen and (max-width: 767px){
  .t-intro{
    background: var(--TXT_COLOR_BASE) url(../images/cp/top/sp/senkien-about_bg.jpg) no-repeat bottom center / 100%;
  }
  .t-intro__body{
    padding: 50px 0 30px;
  }
  .t-intro__spBtn{
    width: 80%;
    margin: 0 auto 30px;
    display: grid;
    gap: 20px;
  }
  .t-intro__spBtn li a{
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 15px 0 15px 15px;
    background-color: var(--WHITE);
  }
  .t-intro__spBtn li a::before{
    content: '';
    display: inline-block;
    --MASK: var(--URL) no-repeat center center / 100%;
    mask: var(--MASK);
    -webkit-mask: var(--MASK);
    background-color: var(--TXT_COLOR_BASE);
    aspect-ratio: 1/1;
    width: 20px;
  }
  .t-intro__spBtn li a span{
    font-size: 12px;
    letter-spacing: 0.08em;
  }
  .t-intro__contents{
    gap: 20px;
    margin-bottom: 175px;
  }
  .t-intro__txt{
    font-size: 13px;
  }
  .t-intro__ttl{
    font-size: 24px;
  }
  .t-intro__btn a{
    border: none;
    background: var(--WHITE_OP90);
  }
}
/* -------------------t-productIntro-------------------- */
.t-productIntro{
  overflow: hidden;
}
@media (hover: hover){
  .t-productIntro__list li a{
    transition: .2s;
  }
  .t-productIntro__list li a:hover{
    opacity: 1;
    color: var(--GREEN01);
  }
}
@media screen and (min-width: 768px){
  .t-productIntro__container{
    position: relative;
  }
  .t-productIntro__container::before{
    content: "";
    display: inline-block;
    background: url(../images/cp/top/products-handled_bg.png) no-repeat center center / 100%;
    aspect-ratio: 1/1;
    position: absolute;
    width: 350px;
    top: 37px;
    right: -60px;
    z-index: -1;
  }
  .t-productIntro__wrap{
    display: flex;
  }
  .t-productIntro__ttl{
    -webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    -o-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
    margin-left: clamp( 50px, 7vw, 95px);
    font-size: var(--FZ_22);
  }
  .t-productIntro__list{
    display: flex;
    flex-direction: row-reverse;
  }
  .t-productIntro__list li{
    flex: 1;
    height: clamp( 300px, 35vw, 450px);
  }
  .t-productIntro__list li{
    border-right: 1px solid var(--GRAY02);
  }
  .t-productIntro__list li a{
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-end;
    align-items: center;
    height: 100%;
  }
  .t-productIntro__list__photo{
    width: 55%;
  }
  .t-productIntro__list__name{
    font-size: var(--FZ_22);
    flex: 1;
    -webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    -o-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
  }
}
@media screen and (max-width: 767px){
  .t-productIntro{
    background: url(../images/cp/top/products-handled_bg.png) no-repeat top 30px right -30px / 132px;
  }
  .t-productIntro__ttl{
    font-size: 20px;
    margin-bottom: 20px;
  }
  .t-productIntro__list li{
    border-top: 1px solid var(--GRAY02);
  }
  .t-productIntro__list li a{
    display: grid;
    grid-template-columns: 100px 1fr;
    align-items: center;
    padding: 20px 0;
    gap: 15px;
  }
  .t-productIntro__list__name{
    font-size: 20px;
    line-height: 1.8;
  }
}
/* -------------------t-shop-------------------- */
.t-shop__photo{
  display: grid;
}
.t-shop__photo li img{
  aspect-ratio: 3/2;
	border-radius: var(--IMG_BDRS);
  object-fit: cover;
}
.t-shop__photo-slickDots{
  display: grid;
}
@media (hover: hover){
  .t-shop .g-btn a:hover{
    background-color: var(--GRAY03);
    color: var(--WHITE);
  }
}
@media screen and (min-width: 768px){
  .t-shop{
    position: relative;
    z-index: 0;
  }
  .t-shop::before{
    content: "";
    display: inline-block;
    background: var(--GRAY01);
    width: 100%;
    height: calc(100% - clamp( 20px, 4vw, 60px));
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
  }
  .t-shop__wrap{
    display: grid;
    grid-template-columns: 545fr 600fr;
    align-items: center;
    gap: clamp( 40px, 6vw, 65px);
  }
  .t-shop .g-heading__ja{
    line-height: 1.5;
  }
  .t-shop__photo{
    grid-template-columns: auto 1fr;
    gap: 20px;
    align-items: flex-end;
  }
  .t-shop__photo .slick-list{
    order: 2;
  }
  .t-shop__photo-slickDots{
    order: 1;
    margin-bottom: 70px;
  }
  .t-shop__txt{
    font-size: var(--FZ_14);
    margin: 15px 0 20px;
    line-height: 1.5;
  }
}
@media screen and (max-width: 767px){
  .t-shop{
    background: linear-gradient(to bottom, transparent 135px, var(--GRAY01) 135px);
    padding-bottom: var(--GENERALSEC);
  }
  .t-shop__photo{
    grid-template-columns: auto 1fr;
    gap: 15px;
    align-items: flex-end;
    width: 95%;
  }
  .t-shop__photo-slickDots{
    gap: 10px;
    margin-bottom: 20px;
  }
  .t-shop__body{
    margin-top: 20px;
  }
  .t-shop__txt{
    font-size: 13px;
    margin: 15px 0 20px;
  }
}
/* -------------------茶房ティザーバナー-------------------- */
@media screen and (min-width: 768px){
  .sabou-open-bnr{
    width: 35%;
  }
}
@media screen and (max-width: 767px){
  
}
/* ------------------- -------------------- */
@media screen and (min-width: 768px){
  
}
@media screen and (max-width: 767px){
  
}
/* ------------------- -------------------- */
@media screen and (min-width: 768px){
  
}
@media screen and (max-width: 767px){
  
}
/* ------------------- -------------------- */
@media screen and (min-width: 768px){
  
}
@media screen and (max-width: 767px){
  
}
/* ------------------- -------------------- */
@media screen and (min-width: 768px){
  
}
@media screen and (max-width: 767px){
  
}
/* ------------------- -------------------- */
@media screen and (min-width: 768px){
  
}
@media screen and (max-width: 767px){
  
}