@charset "UTF-8";

/* --------------------------------------------------
  共通
-------------------------------------------------- */

section { padding: 100px 0; }
section section { padding: 0; }
section .inner { margin: 0 auto; padding: 0 30px; width: 100%; max-width: 1260px; }
section h2 { margin-bottom: 50px; font-size: 2rem; text-align: center; font-family: "BIZ UDPMincho", serif; font-weight: 400; letter-spacing: 5%; display: flex; flex-direction: column; }
section h2::before { content: attr(data-title); color: #9ba722; font-size: 3.2rem; }
/*
section h2 { margin-bottom: 50px; font-size: 3.2rem; text-align: center; font-family: "BIZ UDPMincho", serif; font-weight: 400; letter-spacing: 5%; display: flex; flex-direction: column; }
section h2::before { content: attr(data-title); color: #9ba722; font-size: 2rem; }
*/
section h3 { font-size: 2.8rem;font-family: "BIZ UDPMincho", serif; font-weight: 400; letter-spacing: 5%; }

@media screen and (max-width: 1024px) {
  section { padding: 75px 0; }
  section .inner { padding: 0 20px; }
  section h2 { font-size: 1.8rem; }
  section h2::before { font-size: 2.8rem; }
  section h3 { font-size: 2.4rem; }
}

@media screen and (max-width: 767px) {
  section { padding: 50px 0; }
  section .inner { padding: 0 20px; }
  section h2 { font-size:; }
  section h2::before { font-size: 2.4rem; }
  section h3 { font-size: 2rem; }
}

/* --------------------------------------------------
  メインビジュアル
-------------------------------------------------- */

#mv-wrapper { position: relative; }
#mv .arrow { width: 50px; height: 50px; background: var(--primary-color); border-radius: 100vw; display: flex; align-items: center; justify-content: center; position: absolute; top: 50%; transform: translateY(-50%); z-index: 1000; }
#mv .arrow img { width: auto; height: 50%; filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(305deg) brightness(102%) contrast(102%); }
#mv .arrow-prev { left: calc(50% - 625px); }
#mv .arrow-next { right: calc(50% - 625px); }
#mv .arrow-next img { transform: rotate(-180deg); }
.slick-dots { bottom: -40px; }
.slick-dots li button:before { font-size: 12px; }

@media screen and (max-width: 1024px) {
}

@media screen and (max-width: 767px) {
  #mv .arrow { width: 40px; height: 40px; }
  #mv .arrow-prev { left: 3%; }
  #mv .arrow-next { right: 3%; }
  .slick-slide img { width: 100%; }
}

/* --------------------------------------------------
  お知らせ
-------------------------------------------------- */

#news {}
#news #news-list { margin-bottom: 30px; list-style: none; display: flex; flex-wrap: wrap; justify-content: space-between; }
#news #news-list::before, #news #news-list::after { content: ''; width: 23%; order: 1; }
#news #news-list li { width: 23%; }
#news #news-list a { color: #111; display: flex; flex-direction: column; }
#news #news-list .news-image { overflow: hidden; }
#news #news-list .news-image img { width: 100%; height: auto; object-fit: cover; aspect-ratio: 1/1; }
#news #news-list a:hover .news-image img { transform: scale(1.1); }
#news #news-list .news-text { padding: 10px; }
#news #news-list .news-text time { color: #666; }
#news #news-list .news-text p { font-size: 1.8rem; font-weight: 600; }
#news .button { text-align: center; }
#news .button a { padding: 10px 40px; background: var(--primary-color); border: solid 1px var(--primary-color); border-radius: 5px; color: #fff; display: inline-block; transition: all .3s; }
#news .button a:hover { background: #fff; color: var(--primary-color); text-decoration: none; }

@media screen and (max-width: 1024px) {
}

@media screen and (max-width: 767px) {
  #news #news-list { margin-bottom: 0; }
  #news #news-list::before, #news #news-list::after { width: 48%; }
  #news #news-list li { margin-bottom: 4%; width: 48%; }
}

/* --------------------------------------------------
  うれしの茶とは
-------------------------------------------------- */

#about { background:rgba(176,205,158,0.5); }
#about section { display: flex; position: relative; }
#about section:nth-of-type(1) { margin-bottom: 100px; }
#about .about-img { width: 700px; flex-shrink: 0; }
#about .about-img img { width: 100%; }
#about .about-txt { padding: 50px; width: 600px; background: rgba(248,251,248,.8); position: absolute; bottom: -30px; right: 0; flex-shrink: 0; }
#about .about-txt h3 { margin-bottom: 10px; padding-bottom: 10px; border-bottom: solid 2px var(--primary-color); font-family: "Shippori Mincho B1", serif; font-weight: 600; }
#about .about-txt p { margin-bottom: 20px;font-size:1.8rem; }
#about .about-txt .button a { padding: 10px 40px; background: var(--primary-color); border: solid 1px var(--primary-color); border-radius: 5px; color: #fff; display: inline-block; position: relative; overflow: hidden; transition: all .3s; }
#about .about-txt .button a:hover { text-decoration: none; }
#about .about-txt .button a:hover::before { content: ''; margin: -75px 0 0 -75px; width: 150px; height: 150px; border: solid 4px #fff; border-radius: 50%; position: absolute; left: 50%; top: 50%; opacity: 1; animation: 2s circle forwards; }
@keyframes circle {
	0% { transform: scale(0); }
	100% { opacity: 0; transform: scale(2); }
}
/*
#about .about-txt .button a { padding: 10px 40px; background: var(--primary-color); border: solid 1px var(--primary-color); border-radius: 5px; color: #fff; display: inline-block; transition: all .3s; }
#about .about-txt .button a:hover { background: #fff; color: var(--primary-color); text-decoration: none; }
*/
#about section:nth-of-type(2) { flex-direction: row-reverse; }
#about section:nth-of-type(2) .about-txt { left: 0; right: auto; }

@media screen and (max-width: 1024px) {
}

@media screen and (max-width: 767px) {
  #about section { flex-direction: column; }
#about section:nth-of-type(2) { flex-direction: column; }
  #about .about-img { width: 100%; }
  #about .about-txt { padding: 20px; width: 100%; position: static; }
}

/* --------------------------------------------------
  サポーターの店
-------------------------------------------------- */

#supporter {}
#supporter ul { margin-top: 40px; list-style: none; display: flex; justify-content: space-between; }
#supporter li { width: 30%; text-align: center; }
#supporter li button { padding: 10px; width: 100%; background: var(--primary-color); border: solid 1px var(--primary-color); border-radius: 5px; color: #fff; font-size: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; transition: all .3s ease; }
#supporter li button img { height: 30px; }
#supporter li button:hover { background: #fff; color: var(--primary-color); text-decoration: none; }
#supporter li button:hover img { filter: brightness(0) saturate(100%) invert(16%) sepia(75%) saturate(1514%) hue-rotate(177deg) brightness(99%) contrast(101%); }
#supporter .inner{max-width:1000px;}
#supporter .inner p{font-size:1.8rem;}

@media screen and (max-width: 1024px) {
}

@media screen and (max-width: 767px) {
#supporter ul{flex-direction:column;}
#supporter li { width: 100%; text-align: center;margin-bottom:5px; }

}

/* --------------------------------------------------
  オススメのお店
-------------------------------------------------- */

#recommend { background:rgba(176,205,158,0.5); }
#recommend ul { margin-bottom: 30px; list-style: none; display: flex; flex-wrap: wrap; justify-content: space-between; }
#recommend ul::before, #supporter #supporter-list::after { content: ''; width: 23.5%; order: 1; }
#recommend li { margin-bottom: 30px; width: 23.5%; }
#recommend li a { color: #111; display: flex; flex-direction: column; }
#recommend figure img { margin-bottom: 10px; width: 100%; object-fit: cover; aspect-ratio: 4/3; }
#recommend .button { text-align: center; }
#recommend .button a { padding: 10px 40px; background: var(--primary-color); border: solid 1px var(--primary-color); border-radius: 5px; color: #fff; display: inline-block; transition: all .3s; }
#recommend .button a:hover { background: #fff; color: var(--primary-color); text-decoration: none; }

@media screen and (max-width: 1024px) {
}

@media screen and (max-width: 767px) {
#recommend li { margin-bottom: 30px; width: 49%; }
}

/* --------------------------------------------------
  うれしの茶情報を発信中
-------------------------------------------------- */

#sns { background: url(/img/ureshinocha/home/tea-plantation.jpg) no-repeat center / cover; }
/* #sns { background: #d6e9ca url(/img/ureshinocha/common/shikaku.png) no-repeat bottom right; } */

#sns .inner { padding: 20px 50px; width: 800px; background: #fff; display: flex; flex-direction: row-reverse; gap: 30px; }
#sns .inner > div { display: flex; flex-direction: column; justify-content: center; }
#sns .inner h2 { margin-bottom: 10px; font-size: 3.2rem; text-align: left; }
#sns .inner .text { margin-bottom: 20px; }
#sns .inner .button { display: flex; gap:10px; justify-content: center; }
#sns .inner .button a { padding: 10px 40px; background: var(--primary-color); border: solid 1px var(--primary-color); border-radius: 5px; color: #fff; display: inline-block; transition: all .3s; }
#sns .inner .button a:hover { background: #fff; color: var(--primary-color); text-decoration: none; }

@media screen and (max-width: 1024px) {
  #sns { padding: 75px 40px; }
  #sns .inner { padding: 75px 40px; }
  #sns .inner h2 { font-size: 2.8rem; }
}

@media screen and (max-width: 767px) {
  #sns { padding: 50px 20px; }
  #sns .inner { padding: 50px 20px; width: 100%; flex-direction: column; }
  #sns .inner h2 { font-size: 2.4rem; text-align: center; }
  #sns .inner .button { flex-direction: column; }
  #sns .inner .button a { text-align: center; }
  #sns img { margin: 0 auto; width: 100%; max-width: 100px; display: block; }
}



#recommend figcaption strong{font-size:1.8rem;}