@charset "UTF-8";
body { font-size: 16px; font-family: Arial, Helvetica, sans-serif; font-weight: normal; }

@media screen and (min-width: 48em) { .sp_only { display: none; } }

.pc_only { display: none; }
@media screen and (min-width: 48em) { .pc_only { display: block; } }

.cemtertext { text-align: center; }

#frame { width: 100%; margin: 0px; padding: 0px; font-weight: normal; }
@media screen and (min-width: 48em) { #frame { min-width: 1100px; max-width: 2200px; margin: 0px auto 0px; } }

div.header { margin: 0px; padding: 1% 5% 2%; z-index: 90; }
@media screen and (min-width: 48em) { div.header { position: fixed; top: 0; left: 0; background-color: #ffffff; width: 100%; } }
div.header img { width: 200px; }
div.header nav { position: fixed; top: 2%; right: 2%; z-index: 100; }

div#fixed-header { z-index: 99; position: fixed; top: -80px; width: 100%; height: 70px; line-height: 70px; font-size: 2em; text-align: center; color: #fff; background: rgba(255, 255, 255, 0.9); box-sizing: border-box; transition: 0.5s; }

#fixed-header img { width: 200px; }

#fixed-header.is-show { top: 0; }

/*----------------------------
scroll_up ｜下から上へ出現
----------------------------*/
.scroll_up { transition: 0.8s ease-in-out; transform: translateY(30px); opacity: 0; }

.scroll_up.on { transform: translateY(0); opacity: 1; }

/*----------------------------
scroll_left ｜左から出現
----------------------------*/
.scroll_left { -webkit-transition: 0.8s ease-in-out; -moz-transition: 0.8s ease-in-out; -o-transition: 0.8s ease-in-out; transition: 0.8s ease-in-out; transform: translateX(-30px); opacity: 0; filter: alpha(opacity=0); -moz-opacity: 0; }

.scroll_left.on { opacity: 1; filter: alpha(opacity=100); -moz-opacity: 1; transform: translateX(0); }

/*----------------------------
scroll_right ｜右から出現
----------------------------*/
.scroll_right { -webkit-transition: 0.8s ease-in-out; -moz-transition: 0.8s ease-in-out; -o-transition: 0.8s ease-in-out; transition: 0.8s ease-in-out; transform: translateX(30px); opacity: 0; filter: alpha(opacity=0); -moz-opacity: 0; }

.scroll_right.on { opacity: 1; filter: alpha(opacity=100); -moz-opacity: 1; transform: translateX(0); }

div.mainimage { z-index: 2; }

section#spliderpc1 { width: 100%; margin: 0px auto 0px; }
section#spliderpc1 img { width: 100%; }

div.submenu { display: flex; flex-wrap: wrap; margin: 15% 0 25%; padding: 5%; }
@media screen and (min-width: 48em) { div.submenu { margin: 5% 0 5%; } }
div.submenu a.submenu_btn { display: block; width: 28%; margin: 0 2%; color: #000000; }
div.submenu a.submenu_btn p.submenu_english { background-color: #efefef; padding: 10% 8%; text-align: center; font-size: 0.8rem; }
@media screen and (min-width: 48em) { div.submenu a.submenu_btn p.submenu_english { font-size: 1.1rem; padding: 6% 8%; } }
div.submenu a.submenu_btn p.submenu_title { text-align: center; margin: 20% auto 20%; font-size: 0.8rem; }
@media screen and (min-width: 48em) { div.submenu a.submenu_btn p.submenu_title { font-size: 1.3rem; } }

p.english { background-color: #333333; color: #ffffff; text-align: center; padding: 5% 0% 0%; margin: 0; width: 50%; font-size: 1rem; }
@media screen and (min-width: 48em) { p.english { width: 40%; color: #333; background: none; font-size: 1.4rem; margin: 0px auto 0px; padding: 2%; border-bottom: 2px solid #efefef; } }

h2.paragraph { color: #000000; text-align: center; padding: 5% 0%; width: 50%; font-size: 1rem; font-weight: normal; }
@media screen and (min-width: 48em) { h2.paragraph { width: 100%; font-size: 1.6rem; padding: 2%; } }

div.english_right { display: flex; flex-wrap: wrap; margin-bottom: 0%; }
@media screen and (min-width: 48em) { div.english_right { display: flex; text-align: center; margin: 0px auto 0px; flex-direction: column-reverse; } }

div.english_left { display: flex; flex-wrap: wrap; margin-bottom: 10%; line-height: 100%; }
@media screen and (min-width: 48em) { div.english_left { display: block; text-align: center; margin: 0px auto 0px; } }

p.scentence { padding: 10%; font-size: 1rem; line-height: 180%; }
@media screen and (min-width: 48em) { p.scentence { width: 90%; margin: 0 auto 0; text-align: center; } }

p.centertext { text-align: center; margin: 5% auto 5%; line-height: 180%; }

div.popularitem { margin: 5% 0% 40%; }
@media screen and (min-width: 48em) { div.popularitem { margin: 5% 0 20%; width: 100%; } }

@media screen and (min-width: 48em) { div#slider2 { text-align: center; } }

div.btn_area { text-align: center; }
div.btn_area a.buy_btn { border: 1px solid #555; background-color: #555; padding: 3% 8%; color: #ffffff; font-size: 0.8rem; margin: 2%; }
@media screen and (min-width: 48em) { div.btn_area a.buy_btn { padding: 1% 5%; } }
div.btn_area a.insite_btn { border: 1px solid #555; padding: 3% 4%; font-size: 0.8rem; color: #000; margin: 2%; }
@media screen and (min-width: 48em) { div.btn_area a.insite_btn { padding: 1% 4%; } }

div.paragraph_image { padding: 8%; }
@media screen and (min-width: 48em) { div.paragraph_image { text-align: center; }
  div.paragraph_image img { width: 100%; } }

div.scent { margin: 5% 0% 40%; }
@media screen and (min-width: 48em) { div.scent { margin: 5% 0 20%; width: 100%; } }
@media screen and (min-width: 48em) { div.scent div.scent_box { display: flex; width: 800px; flex-wrap: wrap; margin: 0px auto 0px; } }
@media screen and (min-width: 48em) { div.scent div.scent_box div { width: 50%; } }
div.scent h3.scent_title { text-align: center; font-size: 1.4rem; margin-bottom: 10%; }
@media screen and (min-width: 48em) { div.scent h3.scent_title { margin-bottom: 3%; } }
div.scent p.scent_pattern { background-color: #efefef; text-align: center; font-size: 1rem; width: 60%; margin: 0px auto 0px; padding: 2% 5%; }

div.btn_area_single a.insite_btn { display: block; border: 1px solid #555; padding: 3% 12%; font-size: 0.8rem; color: #000; margin: 15% auto 5%; width: 50%; text-align: center; }
@media screen and (min-width: 48em) { div.btn_area_single a.insite_btn { padding: 1% 5%; width: 20%; margin: 2% auto 5%; } }

div.category { margin: 5% 0% 40%; }
@media screen and (min-width: 48em) { div.category { margin: 5% 0 10%; width: 100%; } }
div.category div.english_left { display: flex; flex-wrap: wrap; margin-bottom: 5%; }
div.category div.slide2 { background-color: #efefef; padding: 10% 0; }
div.category .splide { background-color: #efefef; width: 100%; overflow: hidden; }
div.category li.splide__slide { padding: 0 5%; }
div.category div.btn_area_single a.insite_btn { display: block; border: 1px solid #555; padding: 3% 12%; font-size: 0.8rem; color: #000; margin: 15% auto 5%; width: 60%; text-align: center; }
@media screen and (min-width: 48em) { div.category div.btn_area_single a.insite_btn { padding: 1% 5%; width: 20%; margin: -5% auto 5%; } }

div.information { margin: 5% 0% 30%; }
@media screen and (min-width: 48em) { div.information { margin: 5% auto 10%; max-width: 1100px; } }
div.information div.english_right { display: flex; flex-wrap: wrap; margin-bottom: 10%; }
div.information div.newslist { margin: 9%; font-size: 0.9rem; }
div.information div.newslist p.newsdata { line-height: 180%; padding: 2%; border-bottom: 1px dotted #333333; }
div.information div.newslist p.newsdata a.news_title { color: #000; }
div.information div.newslist p.newsdata a.news_title:hover { color: #666666; }

div#footer { background-color: #efefef; padding: 20% 20% 8%; text-align: center; }
div#footer .footer_logo { font-size: 1.6rem; }
div#footer div.footer_menu { margin: 20% auto 0%; text-align: left; }
div#footer div.footer_menu div.footer_firstline { display: flex; }
div#footer div.footer_menu div.footer_firstline p { width: 50%; text-align: left; font-size: 0.8rem; }
@media screen and (min-width: 48em) { div#footer div.footer_menu div.footer_firstline p { font-size: 1.1rem; text-align: center; } }
div#footer div.footer_menu div.footer_firstline p a { color: #666; }
div#footer div.footer_menu div.footer_secondline { display: flex; flex-wrap: wrap; margin-top: 10%; }
div#footer div.footer_menu div.footer_secondline p { width: 50%; text-align: left; font-size: 0.8rem; line-height: 250%; }
@media screen and (min-width: 48em) { div#footer div.footer_menu div.footer_secondline p { font-size: 1.1rem; text-align: center; } }
div#footer div.footer_menu div.footer_secondline p a { color: #666; }
div#footer div.footer_menu div.footer_companyline { margin-top: 15%; font-size: 0.8rem; }
@media screen and (min-width: 48em) { div#footer div.footer_menu div.footer_companyline { text-align: center; font-size: 1.1rem; } }
div#footer div.footer_menu div.footer_companyline p.footetr_companyinfo { margin-top: 20%; }
div#footer div.footer_menu div.footer_companyline p.footer_opentime { margin-top: 5%; }
div#footer div.footer_menu div.copyright { text-align: center; margin-top: 20%; font-size: 0.9rem; }

a.rakutenline { display: block; width: 100%; background-color: #555; text-align: center; color: #fff; font-size: 1.2rem; padding: 3% 0% 3%; }

a.rakutenline:hover { background-color: #999; }

/*about us*/
div.aboutus { margin: 5% 0% 20%; }

/*companyus*/
div.company { margin: 5% 0% 20%; }
div.company p.scentence span.nameLarge { font-size: 1.3rem; line-height: 220%; }
div.company p.scentence span.companyMiddle { font-size: 1.1rem; }

div.inquiry { background-color: #efefef; padding: 20% 0 20%; }
div.inquiry div.inquiryImg { text-align: center; }
div.inquiry div.inquiryImg img { width: 60px; }
div.inquiry div.inquiryTitle { text-align: center; margin: 10px auto 10px; }
div.inquiry div.inquirySpace { padding: 15%; height: 300px; }
div.inquiry a.inquiryBtn { max-width: 45%; margin: 0px auto 0px; text-align: center; display: block; background-color: #555; padding: 3% 8%; color: #fff; font-size: 1.2rem; }

div.whiteSpace { margin: 20% 0 20%; text-align: center; }
div.whiteSpace img { width: 80px; }

/*カテゴリー一覧*/
div.categoryList { background-color: #efefef; padding: 10% 5%; }
div.categoryList div.categoryLeadArea { padding: 30% 0 20%; }
@media screen and (min-width: 48em) { div.categoryList div.categoryLeadArea { padding: 5% 0 5%; } }
div.categoryList div.categoryLeadArea p.categoryListTitle { font-size: 2rem; text-align: center; }
div.categoryList div.categoryLeadArea p.categoryListText { text-align: center; padding: 10% 0 10%; font-size: 1.1rem; }
@media screen and (min-width: 48em) { div.categoryList div.categoryLeadArea p.categoryListText { padding: 5% 0px; } }
div.categoryList ul.categoryItemList { list-style-type: none; margin: 0; padding: 0; }
@media screen and (min-width: 48em) { div.categoryList ul.categoryItemList { display: flex; flex-wrap: wrap; } }
div.categoryList ul.categoryItemList li.categoryItemBox { display: block; background-color: #fff; margin: 20% 0 0; }
@media screen and (min-width: 48em) { div.categoryList ul.categoryItemList li.categoryItemBox { margin: 2%; width: 45%; } }
div.categoryList ul.categoryItemList li.categoryItemBox img { width: 100%; }
div.categoryList ul.categoryItemList li.categoryItemBox div.categoryItemArea { padding: 5%; position: relative; }
div.categoryList ul.categoryItemList li.categoryItemBox div.categoryItemArea p.categoryItemName { font-size: 2.5rem; }
div.categoryList ul.categoryItemList li.categoryItemBox div.categoryItemArea a.categoryItemBuy { position: absolute; top: 0; right: 0; background-color: #555; color: #fff; margin-top: 30px; margin-right: 5%; padding: 2% 5% 2%; }
div.categoryList ul.categoryItemList li.categoryItemBox div.categoryItemArea p.categoryItemText { margin-top: 5%; line-height: 200%; }

div.funtoArea { padding: 5% 5%; }
div.funtoArea div.funtoLeadArea { padding: 30% 0 20%; }
@media screen and (min-width: 48em) { div.funtoArea div.funtoLeadArea { padding: 10% 0 5%; } }
div.funtoArea div.funtoLeadArea p.funtoListTitle { font-size: 2rem; text-align: center; line-height: 200%; }
div.funtoArea div.funtoLeadArea p.funtoListText { text-align: center; padding: 10% 0 10%; font-size: 1.1rem; }
div.funtoArea div.funtoCatchArea div.funtoCatchData1 { margin: 10% 0 20% 10%; }
@media screen and (min-width: 48em) { div.funtoArea div.funtoCatchArea div.funtoCatchData1 { margin: 5% 0 10% 20%; } }
div.funtoArea div.funtoCatchArea div.funtoCatchData2 { margin: 10% 0 20% 30%; }
@media screen and (min-width: 48em) { div.funtoArea div.funtoCatchArea div.funtoCatchData2 { margin: 5% 0 10% 50%; } }
div.funtoArea div.funtoCatchArea div.funtoCatchData3 { margin: 10% 0 20% 20%; }
@media screen and (min-width: 48em) { div.funtoArea div.funtoCatchArea div.funtoCatchData3 { margin: 5% 0 10% 30%; } }

p.funtoMainText { font-size: 1.3rem; font-weight: bold; margin-bottom: 5%; }
@media screen and (min-width: 48em) { p.funtoMainText { font-size: 1.5rem; } }

p.funtoSubText { font-size: 1rem; font-weight: normal; margin-left: 5%; }
@media screen and (min-width: 48em) { p.funtoSubText { font-size: 1.3rem; } }

@media screen and (min-width: 48em) { div.funtoPhoto img { width: 100%; } }

/*香り*/
div.scentLeadArea { margin-top: 5%; padding: 5% 10%; }
@media screen and (min-width: 48em) { div.scentLeadArea { max-width: 1000px; margin: 0px auto 0px; } }
div.scentLeadArea .scentNextArea { margin-top: 20%; text-align: center; font-size: 1.8rem; line-height: 250%; }
div.scentLeadArea .scentSelectArea { margin-top: 20%; text-align: center; font-size: 1.2rem; line-height: 250%; }
@media screen and (min-width: 48em) { div.scentLeadArea .scentSelectArea { margin: 1%; } }

div.btnAreaScent { margin-top: 15%; text-align: center; }
div.btnAreaScent a.mistBtn { border: 3px solid #efefef; padding: 4% 6%; font-size: 0.9rem; color: #000; margin: 2%; }

div.scentBlendArea { background-color: #efefef; padding: 10% 0 0; }
div.scentBlendArea p.scentTitle { text-align: center; font-size: 1.4rem; }
@media screen and (min-width: 48em) { div.scentBlendArea p.scentTitle { font-size: 1.8rem; } }
div.scentBlendArea p.scentTitleSub { text-align: center; padding: 7% 0 7%; }
@media screen and (min-width: 48em) { div.scentBlendArea p.scentTitleSub { padding: 4% 0; } }

div.scentSingleArea { background-color: #efefef; margin-top: 20%; padding: 10% 0 0; }
div.scentSingleArea p.scentTitle { text-align: center; font-size: 1.4rem; }
@media screen and (min-width: 48em) { div.scentSingleArea p.scentTitle { font-size: 1.8rem; } }
div.scentSingleArea p.scentTitleSub { text-align: center; padding: 7% 0 7%; }
@media screen and (min-width: 48em) { div.scentSingleArea p.scentTitleSub { padding: 4% 0; } }

a.scentSplideBox { display: block; background-color: #fff; width: 90%; padding: 30px 10px 30px; color: #000000; }
@media screen and (min-width: 48em) { a.scentSplideBox { padding: 8% 10%; } }
a.scentSplideBox p.scentSplideTitle { font-size: 1rem; }
@media screen and (min-width: 48em) { a.scentSplideBox p.scentSplideTitle { font-size: 1.6rem; } }
a.scentSplideBox p.scentSplideEng { margin-top: 25%; font-size: 0.8rem; }
@media screen and (min-width: 48em) { a.scentSplideBox p.scentSplideEng { font-size: 1.1rem; } }
a.scentSplideBox p.scentSplideName { margin-top: 12%; font-size: 0.9rem; letter-spacing: -0.1rem; }
@media screen and (min-width: 48em) { a.scentSplideBox p.scentSplideName { font-size: 1.3rem; margin-top: 4%; } }

div#slider4 { background-color: #efefef; padding: 10% 5% 10% 5%; overflow: hidden; }
@media screen and (min-width: 48em) { div#slider4 { padding: 3% 5%; } }

div#slider5 { background-color: #efefef; padding: 10% 5% 10% 5%; overflow: hidden; }
@media screen and (min-width: 48em) { div#slider5 { padding: 3% 5%; } }

@media screen and (min-width: 48em) { div.scentPcArea { display: flex; flex-wrap: wrap; } }

div.scentDataArea { padding: 15% 10%; }
@media screen and (min-width: 48em) { div.scentDataArea { width: 31%; margin: 1%; padding: 5% 2%; } }
div.scentDataArea .scentDataName { font-size: 1.5rem; margin-bottom: 1%; text-align: center; }
div.scentDataArea .scentDataNameJp { font-size: 1.2rem; margin-bottom: 5%; text-align: center; }
div.scentDataArea .scentDataText { margin-top: 5%; line-height: 170%; }
div.scentDataArea .scentDataPattern { margin-top: 10%; line-height: 200%; }

.bggray { background-color: #efefef; }