@charset 'utf-8';

.fn-inter { font-family: 'Inter', sans-serif;}

.at-body .tab-btn { display:flex; position:absolute;top:20px; right:20px;}
.at-body .tab-btn li { width:22px; text-align:center; }
.at-body .tab-btn li a { display:inline-block; width:19px; height:19px; font-size:14px; line-height:19px; text-align:center; color:#666; }
.at-body .tab-btn li.on a { background:#00a720; color:#fff; border-radius:50%;}


.at-body .placehold { display:block; position:relative; left:50%; transform: translateX(-50%); }
.at-body { font-size:16px; font-weight:500; line-height:1.6; color:#333;}
.at-body ul { padding:0; margin:0;}
.at-body li { list-style:none;}
.at-body h3 { font-size:20px; line-height:.9;}
.at-body a { color:#333; }

@media (max-width:480px) {
.at-body { font-size:14px;}
}


.at-body .main-visual-wrap { position:relative;} 

.at-body .main-category { padding:10px 0;  overflow:hidden; }
.at-body .main-category .at-container { margin:0 auto; border-bottom:1px solid #ddd; border-right:1px solid #ddd }
.at-body .main-category a { float:left; width:25%; text-align:center; border-top:1px solid #ddd; border-left:1px solid #ddd; }
.at-body .main-category a > img { display:block; margin:15px auto 10px; width:30px; /*border:1px solid #ddd; padding:15px; border-radius: 50%;*/ }
.at-body .main-category a > b { display:block; height: 30px; color:#333; font-weight:500; }


.at-body .main-info-wrap { padding:20px; }
.at-body .main-info-wrap ul { padding:20px 0 0 0; display:flex; flex-wrap:wrap;}
.at-body .main-info-wrap ul li { width:33.33%; text-align:center; color:#333; }
.at-body .main-info-wrap ul li { padding:0px 0 20px;}
.at-body .main-info-wrap ul li img { padding:0 0 10px;}

@media (min-width:401px) {
.at-body .main-info-wrap ul li:nth-child(n+3){ padding:0;}	
}

@media (max-width:400px){
.at-body .main-info-wrap { padding:20px 10px; }
.at-body .main-info-wrap ul li { width:50%; }
.at-body .main-info-wrap ul li:nth-child(n+5){ padding:0;}	
}




/*best product*/
.at-body .main-best-wrap { padding:20px;}
.at-body .main-best-wrap > .wrap { position:relative; padding:0 0 20px; border-bottom:1px solid #ddd;  }
.at-body .main-best-wrap > .wrap a.more  { display:block; position:absolute; top:30%; right:0; font-size:14px; color:#666;  transform:translateY(-50%);}
.at-body .main-best-wrap > .wrap a.more:after { content:''; display:inline-block; margin:-4px 0 0; width:29px; height:19px; vertical-align:middle; background:url('/thema/m_4982-mro/img/main/ico_more.png') no-repeat right center;}
.at-body .main-best-wrap > .main-list-wrap { padding-top:0px; }

@media (max-width:480px) {
.at-body .main-best-wrap { padding:20px 10px;} 
}


/*event*/
.at-body .main-event-wrap { position:relative; padding:20px;  }
.at-body .main-event-wrap .main-img-wrap { overflow:hidden;  padding:20px 0; }
.at-body .main-event-wrap .event2 { display:none; }

@media (max-width:480px) {
.at-body .main-event-wrap { padding:20px 20px;}
} 


.at-body .main-catetop-wrap .at-container { position:relative; padding:20px 0 20px 20px;}
.at-body .main-catetop-wrap .swiper-container { padding:20px 0; }

.at-body .main-catetop-wrap .category > li { height:180px;}
.at-body .main-catetop-wrap .category h4 { padding:95px 0 15px 0; background-repeat:no-repeat; background-position:center 30px; font-size:23px; color:#fff; }
.at-body .main-catetop-wrap .category h4+a { font-size:16px; color:#fff; line-height:.9;}
.at-body .main-catetop-wrap .category h4+a:after { content:''; display:inline-block; margin:0 0 0 17px; width:6px; height:12px; background:url('/thema/m_4982-mro/img/main/icon_arrow2.png') no-repeat center center; }

.at-body .main-catetop-wrap	.swiper-container { width: 100%; height: 580px; margin-bottom:0px; overflow:visible;}
.at-body .main-catetop-wrap	.swiper-slide { width:100%; max-width:290px; text-align: center; display:inline-block; }
.at-body .main-catetop-wrap	.swiper-pagination { top:-14px; padding: 0 20px 0 0; text-align:right; font-size:13px; line-height:1; z-index:0;}
.at-body .main-catetop-wrap	.swiper-pagination span { display:none;}
.at-body .main-catetop-wrap	.swiper-pagination span.swiper-pagination-bullet-active { display:inline-block; width:0;}
.at-body .main-catetop-wrap	.swiper-pagination p.total { display:inline;}
.at-body .main-catetop-wrap	.swiper-pagination p.total em { font-style:normal; color:#00a720; } 

@media (max-width:480px) {
.at-body .main-catetop-wrap .at-container { padding:20px 0 20px 10px;} 
}

@media (max-width:400px) {
.at-body .main-catetop-wrap	.swiper-container { height:540px;}
.at-body .main-catetop-wrap .swiper-slide { width:280px;}
}
		

.at-body .main-banner-wrap { margin-bottom:10px; }



/* cs */
.at-body .main-cs-wrap { padding:20px; background:#ddd;  } 
.at-body .main-cs-wrap .cs { }

.at-body .main-cs-wrap .cs > div { padding:20px 0 0 150px; margin:0 0 10px; height:130px;}
.at-body .main-cs-wrap .cs > div h4 {padding:0 0 10px; font-size:18px; line-height:.9; color:#333;  }
.at-body .main-cs-wrap .cs > div p { font-size:14px; line-height:.9; color:#666; }
.at-body .main-cs-wrap .cs > div p span.txt-tel { font-size:22px; color:#333;  }
.at-body .main-cs-wrap .cs > div p span { display:block; padding:0 0 10px; }

.at-body .main-cs-wrap .cs > div.tel { background:#fff url('/thema/m_4982-mro/img/main/ico_tel.png') no-repeat left 50px center; }
.at-body .main-cs-wrap .cs > div.bank { background:#fff url('/thema/m_4982-mro/img/main/ico_bank.png') no-repeat left 50px center; margin-bottom: 0px; }
.at-body .main-cs-wrap .cs > div.bank .txt-bank { font-size:20px; color:#333; } 





.at-body .main-cs-wrap .notice { position:relative; padding:20px; margin: 0 0 10px; background:#fff; }
.at-body .main-cs-wrap .notice h4 { padding:0 0 20px; border-bottom:1px solid #ddd;  font-size:20px; line-height:.9; color:#333; }
.at-body .main-cs-wrap .notice a.more { position:absolute; top:16px; right:20px; font-size:15px; font-weight:400; color:#888;}
.at-body .main-cs-wrap .notice .list-wrap { padding:10px 0 ; }

.at-body .main-cs-wrap .link { display:flex; padding:20px 0; background:#fff; margin-bottom: 10px; }
.at-body .main-cs-wrap .link li { flex:1; color:#333;  text-align:center;  }
.at-body .main-cs-wrap .link li a { display:block; padding:75px 0 0 0; background-repeat:no-repeat; background-position:center top; font-size:18px;}
.at-body .main-cs-wrap .link li:first-child a { background-image:url('/thema/m_4982-mro/img/main/ico_cs_01.png');}
.at-body .main-cs-wrap .link li:nth-child(2) a { background-image:url('/thema/m_4982-mro/img/main/ico_cs_02.png');}
.at-body .main-cs-wrap .link li:nth-child(3) a { background-image:url('/thema/m_4982-mro/img/main/ico_cs_03.png');}
.at-body .main-cs-wrap .link li:last-child a { background-image:url('/thema/m_4982-mro/img/main/ico_cs_04.png');}


@media (max-width:520px) {
.at-body .main-cs-wrap { padding:20px 20px; }
.at-body .main-cs-wrap .cs > div { padding: 20px 0 0 130px; }   
.at-body .main-cs-wrap .cs > div.tel { background: #fff url(/thema/m_4982-mro/img/main/ico_tel.png) no-repeat left 44px center; }
.at-body .main-cs-wrap .cs > div.bank { background: #fff url(/thema/m_4982-mro/img/main/ico_bank.png) no-repeat left 44px center; }

.at-body .main-cs-wrap .notice { padding:20px 10px;}

.at-body .main-cs-wrap .link li a { padding: 55px 0 0 0; background-size: auto 45px; font-size:15px; }


}

@media (max-width:420px) {
.at-body .main-cs-wrap .cs > div { padding: 20px 0 0 10px; }
.at-body .main-cs-wrap .cs > div h4 { margin-bottom:5px; }
.at-body .main-cs-wrap .cs > div.tel,
.at-body .main-cs-wrap .cs > div.bank { background-position:right 30px center; background-size:54px auto; }    

.at-body .main-cs-wrap .link li a { padding: 50px 0 0 0; background-size: auto 40px; font-size:12px; }

}