@charset "utf-8";


/* main */
h2 { font-size: 6rem; font-weight: 400; font-family: var(--sub-font); }
h2 + p { font-size: 1.8rem; opacity: 0.5; padding: 0 0 50px; }
.btn_more a { transition: all 0.5s; display: inline-block; padding: 12px 50px 10px; border: 1px solid var(--base-color); color: var(--base-color); border-radius: 5px; }
.btn_more a:hover { background: var(--base-color); color: #FFF; border: 1px solid var(--base-color); }


@media (max-width:1200px) {
    h2 { font-size: 5rem; }
    h2 + p { font-size: 1.6rem; padding-bottom: 40px; }
}

@media (max-width:768px) {
    h2 { font-size: 4rem; }
    h2 + p { font-size: 1.4rem; padding-bottom: 30px; }
    .btn_more a { padding: 10px 30px 5px; font-size: 1.4rem; }
}



/* banner */
.banner .swiper-slide { height: 800px; display: flex; align-items: center; padding: 0 15.625vw; }
.banner .banner1 { background: linear-gradient(rgba(0,0,0,0.4),rgba(0,0,0,0) 30%), url('../images/main/mb1_bg.png') no-repeat center / cover; }
.banner .banner2 { background: linear-gradient(rgba(0,0,0,0.4),rgba(0,0,0,0) 30%), url('../images/main/mb2_bg.png') no-repeat center / cover; }

.banner .banner_txt p { font-size: 2rem; }
.banner .banner_txt h3 { font-size: 5rem; padding: 20px 0 50px; }

.banner .control { display: flex; gap: 10px; align-items: center; position: absolute; left: 50%; transform: translateX(-50%); bottom: 30px; z-index: 10; }
.banner .swiper-button-prev::after { display: none; }
.banner .swiper-button-next::after { display: none; }
.banner .swiper-button-prev { width: 20px; height: 20px; position: static; margin-top: 0; background: url("../images/main/btn_prev.png"); }
.banner .swiper-button-next { width: 20px; height: 20px; position: static; margin-top: 0; background: url("../images/main/btn_next.png"); }
.play { display: none; width: 20px; height: 20px; background: url("../images/main/btn_play.png"); cursor: pointer; font-size: 0; }
.pause { width: 20px; height: 20px; background: url("../images/main/btn_puase.png"); cursor: pointer; font-size: 0; }


@media (max-width:1024px) {
    .banner .swiper-slide { height: 600px; padding: 0 5.2083vw; }
    .banner .banner_txt p { font-size: 1.6rem; }
    .banner .banner_txt h3 { font-size: 3.5rem; }
}



/* news */
.notice { margin: 30px 0; }
.notice .inner { max-width: 1200px; background: #eee; padding: 20px 50px; border-radius: 50px; }
.notice .notice_list { height: 24px; }
.notice .date { float: right; }

@media (max-width:1024px) {
    .notice .inner { max-width: 90%; }
    .notice .notice_list { height: 20px; font-size: 1.4rem; }
    .notice .date { display: none; }
}



/* prd */
.prd { margin: 200px 0; text-align: center; }
.prd .prd_list { padding: 0 0 80px; }
.prd .thumb { overflow: hidden; }
.prd .thumb img { transition: all 0.5s; width: 100%; display: block; }
.prd .thumb:hover img { transform: scale(1.15); }
.prd .name { font-size: 2rem; padding: 20px 0 10px; }
.prd .price { color: #999; }
.prd .btn_more { margin: 50px 0 0; }
.prd .swiper-pagination { background: rgba(0,0,0,0.1); width: 80%; height: 2px; left: 50%; transform: translateX(-50%); bottom: 0; top: auto; }
.prd .swiper-pagination span { background: #758246; }

@media (max-width:1024px) {
    .prd { margin: 100px 0; }
}


/* teaware */
.teaware { margin: 200px 0; }
.teaware .inner { display: flex; flex-wrap: wrap; }
.teaware .teaware_txt { width: 400px; }
.teaware .teaware_list { width: calc(100% - 400px); }
.teaware .teaware_btn { display: flex; flex-wrap: wrap; border-bottom: 5px solid var(--main-color); }
.teaware .teaware_btn button { width: calc(100% / 4); background: transparent; text-align: center; border-left: 1px solid #D3DDAB; border-top: 1px solid #D3DDAB; color: var(--main-color); font-size: 2.5rem; padding: 15px 0; cursor: pointer; }
.teaware .teaware_btn button:last-child { border-right: 1px solid #D3DDAB; }
.teaware .teaware_btn button.active { border: 1px solid var(--main-color); background: var(--main-color); color: #fff; }
.teaware .teaware_img img { width: 100%; display: block; }
.teaware .teaware_img li:not(:first-child) { display: none; }

@media (max-width:1400px) {
    .teaware { margin: 150px 0; }
    .teaware .teaware_txt { width: 100%; text-align: center; }
    .teaware .teaware_list { width: 100%; }
}

@media (max-width:768px) {
    .teaware { margin: 100px 0; }
    .teaware .teaware_btn button { font-size: 1.4rem; }
}



/* story */
.story { padding: 200px 0; background: linear-gradient(rgba(230,218,206,0.5), rgba(168,144,121,0)); }
.story .inner { display: flex; flex-wrap: wrap; gap: 5vw; }
.story .story_img { width: 40%; }
.story .story_img img { border-radius: 600px 600px 0 0; width: 100%; height: 100%; object-fit: cover; }
.story .story_img img:not(:first-child) { display: none; }

.story .story_list { width: calc(60% - 5vw); position: relative; }
.story .story_list ul { display: flex; gap: 2.5vw; align-items: flex-start; }
.story .story_list ul li { width: calc((100% - 2.5vw) / 2); }
.story .story_list ul li img { transition: border-radius 0.5s; width: 100%; }
.story .story_list ul li:hover img { border-radius: 5vw; }
.story .story_list li:nth-child(2) { margin-top: 5vw; }
.story .story_list li dl dt { font-size: 2.5rem; padding: 20px 0 0; }
.story .story_list li dl dd { color: #999; }

@keyframes rotate_txt {
    100% { transform: rotate(360deg); }
}
.circle_txt { width: 233px; height: 233px; background: url("../images/main/circle_txt.png"); opacity: 0.3; position: absolute; left: calc(50% - 60px); top: 60px; animation: rotate_txt 50s linear infinite; }

@media (max-width:1024px) {
    .story { padding: 100px 0; }
    .story .inner > * { width: 100%; }
    .story .story_list li dl dt { font-size: 2rem; }
    .story .story_list li dl dd { font-size: 1.4rem; }
    .circle_txt { display: none; }
}