@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');


/*reset*/
/*******************************************************************/
html{box-sizing:border-box;overflow-y:scroll;-webkit-text-size-adjust:100%}*,:after,:before{background-repeat:no-repeat;box-sizing:inherit}:after,:before{text-decoration:inherit;vertical-align:inherit}*{padding:0;margin:0}audio:not([controls]){display:none;height:0}hr{overflow:visible}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}summary{display:list-item}small{font-size:80%}[hidden],template{display:none}abbr[title]{border-bottom:1px dotted;text-decoration:none}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}code,kbd,pre,samp{font-family:monospace,monospace}b,strong{font-weight:bolder}dfn{font-style:italic}mark{background-color:#ff0;color:#000}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}input{border-radius:0}[role=button],[type=button],[type=reset],[type=submit],button{cursor:pointer}[disabled]{cursor:default}[type=number]{width:auto}[type=search]{-webkit-appearance:textfield;appearance:textfield}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none;appearance:none}textarea{overflow:auto;resize:vertical}button,input,optgroup,select,textarea{font:inherit}optgroup{font-weight:700}button{overflow:visible}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:0;padding:0}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button:-moz-focusring{outline:1px dotted ButtonText}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button;appearance:button}button,select{text-transform:none}button,input,select,textarea{background-color:transparent;border-style:none;color:inherit}select{-moz-appearance:none;-webkit-appearance:none;appearance:none}select::-ms-expand{display:none}select::-ms-value{color:currentColor}legend{border:0;color:inherit;display:table;max-width:100%;white-space:normal}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}[type=search]{-webkit-appearance:textfield;appearance:textfield;outline-offset:-2px}img{width:auto;max-width:100%;height:auto;border-style:none;vertical-align:middle}i{vertical-align:middle}progress{vertical-align:baseline}svg:not(:root){overflow:hidden}audio,canvas,progress,video{display:inline-block}@media screen{[hidden~=screen]{display:inherit}[hidden~=screen]:not(:active):not(:focus):not(:target){position:absolute!important;clip:rect(0 0 0 0)!important}}[aria-busy=true]{cursor:progress}[aria-controls]{cursor:pointer}[aria-disabled]{cursor:default}::-moz-selection{background-color:#b3d4fc;color:#000;text-shadow:none}::selection{background-color:#b3d4fc;color:#000;text-shadow:none}ul,ol{list-style:none}i,em{font-style:normal}
html.has-scroll-smooth { overflow: hidden; position: fixed; left: 0; right: 0; top: 0; bottom: 0;}
a { color: #222; text-decoration: none;}
@media only screen and (min-width: 769px){ a { transition: all .2s ease-out;} a:hover { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=60); opacity: 0.6;}}
*:focus { outline: none;}


/*LAYOUT*/
/*******************************************************************/
html { font-size: 62.5%;}
body { -webkit-text-size-adjust: 100%; touch-action: manipulation; background: #FFF; font-family: "Noto Sans JP", sans-serif; font-size: clamp(1.4rem,1.6vw,1.6rem); font-weight: 500; word-break: normal; color: #222;}
.ec-layoutRole { position: relative; width: 100%; background: transparent; overflow: clip;}


/*HEADER*/
/*******************************************************************/
.ec-layoutRole__header { margin-bottom: 24px;}
.ec-layoutRole__header figure { margin: 0;}
.ec-headerNaviRole { align-items: flex-start; gap: 16px; width: 94%; max-width: 1300px; padding: 0; font-size: inherit;}
.ec-headerNaviRole:after { display: none;}
.ec-headerNaviRole .ec-headerNaviRole__left { width: auto;}
.ec-headerRole { display: grid; grid-template-columns: auto auto; align-items: center; gap: 16px 32px; padding: 0;}
.ec-headerRole__description { position: relative; grid-column: 1 / 3; padding: 1px 0; line-height: 1;}
.ec-headerRole__description::before { content: ''; position: absolute; top: 0; left: -50vw; width: 150vw; height: 100%; background: #24B24C; z-index: -1;}
.ec-headerRole__description h1 { margin: 0; padding: 0.2em 0; font-size: clamp(1rem,1.2vw,1.2rem); line-height: 1; color: #FFF;}
.ec-headerRole .ec-headerRole__title { width: auto;}
.ec-headerTitle a { display: grid; grid-template-columns: 129px 1fr; align-items: center; gap: 0 8px; font-size: clamp(1rem,0.8vw,1.2rem); font-weight: 700; white-space: nowrap;}
.ec-headerTitle .ec-headerTitle__figure { grid-row: 1 / 4;}
.ec-headerTitle .ec-headerTitle__title { text-align: left; font-size: clamp(1.7rem,1.7vw,3rem); font-weight: 900; color: #24B24C;}
.ec-headerTitle .ec-headerTitle__company { color: #24B24C;}
.ec-headerNaviRole .ec-headerNaviRole__right { position: relative; flex-direction: column; align-items: flex-end; gap: 8px; width: auto;}
.ec-siteRole ul { display: flex; gap: 4px; margin: 0; padding: 0;}
.ec-siteRole a { position: relative; display: flex; justify-content: center; align-items: center; gap: 8px; width: 180px; height: 60px; padding: 4px 8px; background: #24B24C; border-radius: 0 0 6px 6px; font-size: 1.1rem; font-weight: 700; line-height: 1.4; color: #FFF; white-space: nowrap;}
.ec-siteRole a em { display: block; font-size: 1.3rem; font-weight: 900;}
.ec-siteRole a.desk { background-color: #475EAA;}
.ec-siteRole a.towel { background-color: #FF8000;}
.ec-siteRole a figure { margin: 0;}
.ec-siteRole li.on a::after { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width:0; height:0; border-style:solid; border-width: 6px 6px 0 6px; border-color: #FFFFFF transparent transparent transparent;}
.ec-menuNaviRole { position: relative; display: flex; justify-content: space-between; align-items: center; width: 94%; max-width: 1300px; margin: 0 auto;}
.ec-menuNaviRole::before { content: ''; position: absolute; top: 0; left: calc(50% - 50vw); width: 100vw; height: 100%; background: #FCFCFC; z-index: -1;}
.ec-itemNav { padding: 10px 0; text-align: left;}
.ec-itemNav .ec-itemNav__nav { margin: 0; padding: 0; border-left: 1px solid #DDDDDD;}
.ec-itemNav__nav li a { padding: 8px 24px; background: none; border-bottom: none; border-right: 1px solid #DDDDDD; color: #222; font-size: inherit; line-height: 1;}
.ec-itemNav__nav li a:hover { background-color: transparent;}
.ec-itemButton__nav { display: flex; gap: 4px; margin: 0; padding: 0;}
.ec-itemButton__nav li a { display: flex; justify-content: center; align-items: center; gap: 8px; min-height: 56px; padding: 0.5em 1em; background: #F9EF2D; font-weight: 700; letter-spacing: 0.03em; white-space: nowrap;}
.ec-contactRole__tel img { width: 100%;}
@media only screen and (max-width: 1300px){
	.have_curtain .ec-overlayRole { display: block;}
	.ec-layoutRole__header { margin-bottom: 16px;}
	.ec-drawerRoleClose { left: 320px;}
	.ec-drawerRoleClose.is_active { display: block;}
	.ec-drawerRole { display: block; width: 310px; transform: translateX(-310px); padding: 10px 10px 40px; background: #FFF; overflow-y: auto; overscroll-behavior: contain;}
	.ec-drawerRole.is_active { display: block;}
	.ec-headerNaviRole { align-items: flex-end; gap: 0; width: auto; padding: 0 0 0 52px;}
	.ec-headerNavSP { top: 6px; left: 6px; display: block; color: #FFF; background: #24B24C; font-size: 2rem;}
	.ec-headerRole__description { padding: 1px 6px;}
	.ec-headerRole__description::before { left: 0; border-radius: 4px 0 0 4px;}
	.ec-headerTitle a { grid-template-columns: 24% 1fr;}
	.ec-headerTitle .ec-headerTitle__figure { grid-row: 2 / 4;}
	.ec-headerTitle .ec-headerTitle__sub { grid-column: 1 / 3; grid-row: 1 / 2;}
	.ec-headerRole { gap: 8px 0;}
	.ec-headerRole__tel { display: none;}
	.ec-headerNaviRole { gap: 0;}
	.ec-headerNaviRole .ec-siteRole { display: none;}
	.ec-headerNaviRole .ec-headerNaviRole__nav { position: absolute; bottom: 0; right: 12px; white-space: nowrap;}
	.ec-headerNav { display: flex; gap: 8px;}
	.ec-headerNav .ec-headerNav__item { font-size: 2rem;}
	.ec-headerNav .ec-headerNav__itemIcon { margin: 0; font-size: 14px;}
	.ec-menuNaviRole { display: none;}
	.ec-itemNav { height: auto; margin-bottom: 24px; padding: 0;}
	.ec-itemNav .ec-itemNav__nav { display: block; border-left: none;}
	.ec-itemNav__nav li { float: none; width: 100%;}
	.ec-itemNav__nav li a { position: relative; padding: 16px 0 16px 16px; text-align: left; border-right: none; border-bottom: 1px solid #DDDDDD; font-size: 1.6rem; font-weight: 700;}
	.ec-itemNav__nav li a::before { content: ''; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width:0; height:0; border-style:solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent #24B24C;}
}


/*FOOTER*/
/*******************************************************************/
.ec-footerRole { margin-top: 40px; background: #F8F8F8; border-top: none;}
.ec-footerRole .ec-footerRole__inner { display: grid; grid-template-columns: auto 1fr; justify-content: space-between; gap: 0 40px; width: 94%; max-width: 1300px; margin: 0 auto; padding: 0; font-size: inherit; color: #222;}
.ec-footerRole__info .ec-footerRole__address { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-bottom: 24px; padding: 24px; background: #FFF; border-radius: 4px;}
.ec-footerRole__info .ec-footerRole__address dt { display: grid; grid-template-columns: 129px 1fr; gap: 16px; line-height: 1.4;}
.ec-footerRole__info .ec-footerRole__contact { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px;}
.ec-footerRole__info .ec-footerRole__contact .ec-itemButton__nav { flex-direction: column;}
.ec-footerRole__nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 24px; font-size: 1.4rem;}
.ec-footerTitle { grid-column: 1 / 3; text-align: center; font-size: clamp(1rem,1.2vw,1.2rem); color: #222;}
.ec-footerRole .ec-siteRole { display: none;}
.ec-blockTopBtn { padding: 0 8px; background-color: #24B24C; border-radius: 4px;}
@media only screen and (max-width: 1300px){
	.ec-footerRole { padding-top: 24px;}
	.ec-footerRole .ec-footerRole__inner { grid-template-columns: 1fr; gap: 32px;}
	.ec-footerRole__info .ec-footerRole__address dt { grid-template-columns: 1fr;}
	.ec-footerRole__info .ec-footerRole__contact { grid-template-columns: 1fr;}
	.ec-footerRole__nav { display: block;}
	.ec-footerRole__nav * + .arrow-list { margin-top: 10px; padding-top: 10px; border-top: 1px solid #E4E4E4;}
	.ec-footerTitle { grid-column: auto;}
	.ec-footerRole .ec-siteRole { display: block;}
	.ec-footerRole .ec-siteRole ul { flex-direction: column;}
	.ec-footerRole .ec-siteRole a { gap: 24px; width: auto; height: 80px; border-radius: 6px; font-size: 1.4rem;}
	.ec-footerRole .ec-siteRole a em { font-size: 1.8rem;}
	.ec-footerRole .ec-siteRole a figure img { transform: scale(1.4);}
}


/*ASIDE*/
/*******************************************************************/
.ec-leftRole h2 { margin: 0 0 16px; padding-bottom: 16px; border-bottom: 2px solid #24B24C; font-size: 2rem;}
.ec-leftRole ul { margin: 0; padding: 0;}
.arrow-list { margin: 0; padding: 0;}
.arrow-list li:not(:first-child) { margin-top: 10px; padding-top: 10px; border-top: 1px solid #E4E4E4;}
.arrow-list li a { position: relative; display: block; padding-left: 16px;}
.arrow-list li a::before { content: ''; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width:0; height:0; border-style:solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent #24B24C;}
.ec-leftRole .arrow-list { margin-top: 16px;}
.banner_area ul { display: grid; gap: 40px;}
.notice { font-size: 1.2rem;}
.ec-headerSearch__keyword .ec-input { display: grid; grid-template-columns: 1fr 40px; margin: 0; border: 1px solid #24B24C; border-radius: 4px; overflow: hidden;}
.ec-headerSearch__keyword .search-name { height: 40px; margin-bottom: 0; border: none; font-size: 16px;}
.ec-headerSearch__keyword .ec-headerSearch__keywordBtn { height: 40px; background: #24B24C; line-height: 1; color: #FFF;}
.genre_area li a { display: grid; grid-template-columns: 56px 1fr; align-items: center; gap: 8px; font-weight: 700;}
.genre_area li:not(:first-child) { margin-top: 4px; padding-top: 4px; border-top: 1px solid #E4E4E4;}
.genre_area li span { display: block; font-size: 1.2rem;}
.delivery { padding: 24px; text-align: center; background: #F9EF2D; border-radius: 4px;}
.delivery_title a { font-size: 2.4rem; font-weight: 700; color: #24B24C;}
.delivery_title a strong { font-size: 4rem;}
.ec-leftRole .ec-itemButton__nav { flex-direction: column; margin-top: 16px;}
@media only screen and (max-width: 1300px){
	.ec-layoutRole .ec-layoutRole__left { display: none;}
}


/*CONTENTS*/
/*******************************************************************/
.ec-layoutRole .ec-layoutRole__contents { display: grid; grid-template-columns: 330px 1fr; gap: 20px 50px; width: 94%; max-width: 1300px;}
.ec-layoutRole .ec-layoutRole__left, .ec-layoutRole .ec-layoutRole__right { width: auto;}
.ec-role, .ec-searchnavRole, .ec-shelfRole { max-width: initial; padding: 0;}
* + .block_outer { margin-top: 40px;}
.block_body + .block_body { margin-top: 40px;}
.title { display: flex; justify-content: center; align-items: center; gap: 0.5em; margin: 0 0 24px; padding: 0.5em 0; text-align: center; border-top: 2px solid #222; border-bottom: 2px solid #222; font-size: clamp(1.8rem,2.4vw,2.4rem); clear: both;}
.title img { width: auto;}
.st { display: flex; align-items: center; gap: 0.5em; margin: 0 0 16px; padding: 0.3em 0.5em; background: #F3FBF6; border-radius: 4px; font-size: clamp(1.6rem,2vw,2rem); clear: both;}
.st::before { content: ''; display: block; width: 4px; height: 31px; background: #24B24C; border-radius: 4px;}
.st .ec-blockBtn--top { margin: -0.3em -0.5em -0.3em auto; padding-left: 1em; font-size: 1.4rem;}
.st .num { display: flex; justify-content: center; align-items: center; width: 1.5em; height: 1.5em; background: #FFF; border: 1px solid #222; border-radius: 50%;}
.st2 { padding: 0.5em 1em; background: #24B24C; border-radius: 4px; font-size: clamp(1.5rem,1.7vw,1.8rem); color: #FFF;}
.bordertitle { padding-bottom: 0.5em; border-bottom: 1px solid #24B24C; font-size: clamp(1.6rem,2vw,2rem);}
h1,h2,h3,h4,h5,h6 { font-weight: 700;}
p, dl, ul, ol { line-height: 1.6;}
figcaption { display: block; margin-top: 8px;}
* + p { margin-top: 1em;}
.ec-blockBtn--top { display: flex; justify-content: center; align-items: center; margin: 0 auto; padding: 0 48px; background: #24B24C url(../img/common/arrow.svg) right 16px center no-repeat; border: none; border-radius: 4px; font-weight: 700; line-height: 1.2;}
.ec-blockBtn--top:hover { opacity: 1; background-color: #05902C; border-color: #05902C;}
.ec-inlineBtn--top { background: #24B24C; border: none; border-radius: 4px;}
.ec-inlineBtn--top:hover { opacity: 1; background-color: #05902C; border-color: #05902C;}
.table { width: calc(100% + 32px); border-collapse: separate; border-spacing: 16px 0; margin-left: -16px; margin-right: -16px;}
.table th { padding: 16px 0; border-bottom: 1px solid #24B24C; font-weight: 700; white-space: nowrap;}
.table td { padding: 16px 0; border-bottom: 1px solid #CCC;}
.table table { margin: 0; border: none;}
.disc { list-style: disc;}
.decimal { list-style: decimal;}
.dl { display: grid; grid-template-columns: auto 1fr; gap: 8px;}
.fl, .alignleft { float: left; margin: 0 1em 1em 0;}
.fr, .alignright { float: right; margin: 0 0 1em 1em;}
.center { text-align: center!important;}
.right { text-align: right!important;}
.left { text-align: left;}
.mt8 { margin-top: 8px !important;}
.mt16 { margin-top: 16px !important;}
.mt24 { margin-top: 24px !important;}
.mt32 { margin-top: 32px !important;}
.mt40 { margin-top: 40px !important;}
.mt48 { margin-top: 48px !important;}
.mt56 { margin-top: 56px !important;}
.mt64 { margin-top: 64px !important;}
.mt72 { margin-top: 72px !important;}
.mt80 { margin-top: 80px !important;}
.mt160 { margin-top: 160px !important;}
.fs11 { font-size: clamp(0.9rem,1.1vw,1.1rem) !important;}
.fs12 { font-size: clamp(1.0rem,1.2vw,1.2rem) !important;}
.fs13 { font-size: clamp(1.1rem,1.3vw,1.3rem) !important;}
.fs14 { font-size: clamp(1.2rem,1.4vw,1.4rem) !important;}
.fs15 { font-size: clamp(1.3rem,1.5vw,1.5rem) !important;}
.fs16 { font-size: clamp(1.4rem,1.6vw,1.6rem) !important;}
.fs18 { font-size: clamp(1.5rem,1.7vw,1.8rem) !important;}
.fs20 { font-size: clamp(1.6rem,1.8vw,2.0rem) !important;}
.fs22 { font-size: clamp(1.7rem,1.9vw,2.2rem) !important;}
.fs24 { font-size: clamp(1.8rem,2.0vw,2.4rem) !important;}
.fs26 { font-size: clamp(1.9rem,2.1vw,2.6rem) !important;}
.fs28 { font-size: clamp(2.0rem,2.2vw,2.8rem) !important;}
.fs30 { font-size: clamp(2.1rem,2.3vw,3.0rem) !important;}
.fs32 { font-size: clamp(2.2rem,2.4vw,3.2rem) !important;}
.fs34 { font-size: clamp(2.3rem,2.5vw,3.4rem) !important;}
.fs36 { font-size: clamp(2.4rem,2.6vw,3.6rem) !important;}
.fs38 { font-size: clamp(2.5rem,2.7vw,3.8rem) !important;}
.fs40 { font-size: clamp(2.6rem,2.8vw,4.0rem) !important;}
.fs42 { font-size: clamp(2.7rem,2.9vw,4.2rem) !important;}
.fs44 { font-size: clamp(2.8rem,3.0vw,4.4rem) !important;}
.fs46 { font-size: clamp(2.9rem,3.1vw,4.6rem) !important;}
.fs48 { font-size: clamp(3.0rem,3.2vw,4.8rem) !important;}
.fs50 { font-size: clamp(3.1rem,3.3vw,5.0rem) !important;}
.fs52 { font-size: clamp(3.2rem,3.4vw,5.2rem) !important;}
.fs54 { font-size: clamp(3.3rem,3.5vw,5.4rem) !important;}
.fs56 { font-size: clamp(3.4rem,3.6vw,5.6rem) !important;}
.fs58 { font-size: clamp(3.5rem,3.7vw,5.8rem) !important;}
.fs60 { font-size: clamp(3.6rem,3.8vw,6.0rem) !important;}
.fs62 { font-size: clamp(3.7rem,3.9vw,6.2rem) !important;}
.fs64 { font-size: clamp(3.8rem,4.0vw,6.4rem) !important;}
.fs72 { font-size: clamp(4.0rem,7.2vw,7.2rem) !important;}
.fs76 { font-size: clamp(4.1rem,7.6vw,7.6rem) !important;}
.fs80 { font-size: clamp(4.2rem,8.0vw,8.0rem) !important;}
.fs96 { font-size: clamp(4.2rem,7.2vw,9.6rem) !important;}
.fs128 { font-size: clamp(8.0rem,10vw,12.8rem) !important;}
.fs200 { font-size: clamp(8.0rem,10vw,200rem) !important;}
.light { font-weight: 300;}
.regular { font-weight: 400;}
.medium { font-weight: 500;}
.semi-bold { font-weight: 600;}
.bold { font-weight: 700;}
.black { font-weight: 900;}
.ls { letter-spacing: 0.1em;}
.lh { line-height: 2;}
.vertical { writing-mode: vertical-rl;}
.vertical-bottom { vertical-align: baseline;}
.white { color: #FFF !important;}
.green { color: #24B24C !important;}
.marker { display: inline; padding: 0 1px 5px; background: linear-gradient(transparent 60%, #F6F68F 0%);}
.underline { text-decoration: underline!important; color: #24B24C;}
.sp { display: none;}


/*TOP*/
.ec-layoutRole__banner { grid-column: 1 / 3;}
.ec-bannerRole { max-width: 854px; margin: 0 auto; padding: 0;}
.main_visual .item img { width: 100%; display: block;}
.main_visual .slick-slide { padding: 0 16px;}
.main_visual .slick-list { overflow: visible;}
.slick-prev, .slick-next { width: 56px; height: 56px; z-index: 10;}
.slick-prev { transform: scaleX(-1) translateY(-50%);}
.slick-prev:before, .slick-next:before { content: ''; display: block;  width: 56px; height: 56px; background: url(../img/common/next.svg) center no-repeat; background-size: contain;}
.slick-dots li { width: 12px; height: 12px;}
.slick-dots li button { width: 12px; height: 12px; padding: 0;}
.slick-dots li button:before { content: " "; line-height: 12px; position: absolute; top: 0; left: 0; width: 12px; height: 12px; background-color: #959595; border-radius: 50%;}
.slick-dots li.slick-active button:before { opacity: 1; background-color: #24B24C;}
.catbtn { float: right; display: flex; flex-wrap: wrap; gap: 4px;}
.catbtn .ec-blockBtn--top { justify-content: flex-start; height: auto; margin: 0; padding: 8px 24px 8px 8px; text-align: left; background-position: right 8px center; background-size: 12px auto; font-size: 1.2rem;}
.copy { margin-bottom: 1em;}
.ec-shelfGrid { margin-bottom: 0;}
.ec-shelfGrid .ec-shelfGrid__item { margin-bottom: 24px;}
.ranking { clear: both; margin-left: -5px; margin-right: -5px;}
.ranking .ec-shelfGrid__item { width: 20%; padding: 0 5px !important;}
.ec-shelfGrid__item a { display: block;}
.ec-shelfGrid__item h4 { display: flex; flex-direction: column; justify-content: center; min-height: 45px; font-size: 1rem; line-height: 1.3; color: #24B24C; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;}
.ec-shelfGrid__item h4 em { display: block; font-size: 1.3rem;}
.ec-shelfGrid__item figure { position: relative; display: flex; justify-content: center; align-items: center; margin: 0; text-align: center; background: #F8F8F8;}
.ec-shelfGrid__item .size { text-align: center; background: #B4B4B4; font-size: 1.1rem; color: #FFF;}
.ec-shelfGrid__item .condition { display: flex; align-items: center; margin-top: 4px; font-size: 1rem; color: #888; white-space: nowrap;}
.ec-shelfGrid__item .condition::before, .ec-shelfGrid__item .condition::after { content: ''; display: block; width: 100%; height: 1px; background: #E4E4E4;}
.ec-shelfGrid__item .price { text-align: center; font-size: 1.2rem;}
.ec-shelfGrid__item .price em { font-size: 1.8rem; font-weight: 700; color: #FF0000;}
.ec-shelfGrid__item .ex { margin-top: 0; font-size: 1.2rem;}
.ranking .ec-shelfGrid__item h4 { padding-left: 50px; background-position: left center; background-repeat: no-repeat;}
.ranking .ec-shelfGrid__item:nth-child(1) h4 { background-image: url(../img/top/no1.svg);}
.ranking .ec-shelfGrid__item:nth-child(2) h4 { background-image: url(../img/top/no2.svg);}
.ranking .ec-shelfGrid__item:nth-child(3) h4 { background-image: url(../img/top/no3.svg);}
.ranking .ec-shelfGrid__item:nth-child(4) h4 { background-image: url(../img/top/no4.svg);}
.ranking .ec-shelfGrid__item:nth-child(5) h4 { background-image: url(../img/top/no5.svg);}
.reason { display: grid; grid-template-columns: repeat(auto-fill,minmax(320px,1fr)); gap: 32px; margin: 0; padding: 0;}
.reason li { position: relative; padding: 24px; border: 2px solid #24B24C; border-radius: 4px;}
.reason .cat { position: absolute; top: 0; left: 0; display: flex; justify-content: center; align-items: center; min-width: 90px; height: 42px; padding: 0 8px; text-align: center; background: #24B24C; font-size: 1.8rem; font-weight: 700; color: #FFF;}
.reason .cat::after { content: ''; position: absolute; top: 0; left: 100%; width: 0; height: 0; border-style: solid; border-color: #24B24C transparent transparent transparent; border-width: 42px 10px 0px 0px;}
.news_area { display: grid; grid-template-columns: auto 1fr; gap: 24px 40px; padding: 40px; background: #F3FBF6; border-radius: 4px;}
.news_area h2 { margin: 0;}
.news_area .block_body { height: 280px; overflow-y: auto;}
.news { margin: 0; padding: 0;}
.news li:not(:first-child) { margin-top: 1em; padding-top: 1em; border-top: 1px solid #E4E4E4;}
.news li { display: grid; grid-template-columns: auto 1fr; gap: 8px 24px;}
.news time { font-size: 1.5rem; font-weight: 600; line-height: 1.2; color: #24B24C;}
.news h3 { margin-top: 0; font-size: 1.6rem;}
.showroon_area .block_body { display: grid; grid-template-columns: 20% 1fr; gap: 16px 40px; margin-bottom: 40px;}
.showroon_area h3 { margin-top: 0;}
.contact_area .block_body { display: grid; grid-template-columns: 36% 1fr; gap: 16px; padding: 16px 40px; border: 2px solid #24B24C; border-radius: 4px;}
.contact_area .ec-itemButton__nav { gap: 16px;}
.contact_area .ec-itemButton__nav li { flex: 1; padding-left: 16px; text-align: center; border-left: 1px solid #24B24C;}
.contact_area h3 { margin-top: 0.5em;}
.guide_area .block_body { display: grid; grid-template-columns: 1fr 1fr; gap: 1em 40px;}
.guide_area .block_body h3:first-of-type { margin-top: 0;}
.guide_area a { text-decoration: underline; text-underline-offset: 4px; color: #24B24C;}


/*PAGE*/
.breadcrumb {  display: inline; list-style: none;}
.breadcrumb + * { margin-top: 16px;}
.breadcrumb > li { display: inline; font-size: clamp(1rem,1.2vw,1.2rem);}
.breadcrumb > li + li:before { content: " > "; color: #777;}
.breadcrumb > li.active { color: #777;}
.breadcrumb > li a { display: inline; color: #24B24C;}

.search .block_body { padding: 24px; border: 2px solid #24B24C; border-radius: 4px;}
.search ul { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin: 0 0 24px; padding: 0; font-size: clamp(1.2rem,1.2vw,1.6rem);}
.search .ec-radio label { margin-right: 0;}
.ec-input input, .ec-birth input, .ec-select input, .ec-halfInput input, .ec-numberInput input, .ec-zipInput input, .ec-telInput input { margin: 4px 0; font-size: 16px;}
.ec-input select, .ec-birth select, .ec-select select, .ec-halfInput select, .ec-numberInput select, .ec-zipInput select, .ec-telInput select { font-size: 16px;}
.ec-input input.search-name { margin: 0;}
.ec-blockBtn--action { background-color: #24B24C; border-color: #24B24C; border-radius: 4px; transition: .2s ease-out;}
.ec-blockBtn--action:hover { background-color: #05902C; border-color: #05902C;}
.btn-check:focus + .ec-blockBtn--action, .ec-blockBtn--action:focus { background-color: #05902C; border-color: #05902C;}
.btn-check:checked + .ec-blockBtn--action, .btn-check:active + .ec-blockBtn--action, .ec-blockBtn--action:active, .ec-blockBtn--action.active, .show > .ec-blockBtn--action.dropdown-toggle { background-color: #05902C; border-color: #05902C;}
.ec-blockBtn--action:disabled, .ec-blockBtn--action.disabled { background-color: #DE5D50; border-color: #DE5D50;}
.ec-searchnavRole { margin-top: 0;}
.ec-topicpath { color: #24B24C;}
.ec-searchnavRole .ec-searchnavRole__infos { padding-left: 0; padding-right: 0;}
.ec-productRole__tags { position: absolute; top: 0; left: 0; display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; font-size: 1.1rem; z-index: 10; pointer-events: none;}
.ec-productRole__tag { padding: 0.2em 0.6em; background-color: red; color: #FFF;;}

#detailarea .ec-productRole__tags { font-size: 1.6rem;}
.photo_area .block_body { display: grid; grid-template-columns: 1fr 30%; gap: 24px;}
.photo_area .photo { position: relative;}
.photo_area .photo ul { display: grid; grid-template-columns: repeat(2,1fr); gap: 8px; margin: 0; padding: 0; text-align: center;}
.photo_area .info dl { padding: 12px 12px 4px; background: #24B24C; border-radius: 4px;}
.photo_area .info dt { padding: 2px 10px; background: #FFF; border-radius: 2px; font-weight: 700; color: #24B24C;}
.photo_area .info dd { padding: 6px 10px; color: #FFF;}
.catalog_area .block_body img { width: 100%;}
.price_area .caption { margin-bottom: 24px; text-align: center; font-size: clamp(1.8rem,2vw,2rem); font-weight: 700; color: #24B24C;}
.price_area table { width: 100%; min-width: 560px; border-collapse: collapse; text-align: center;}
.price_area th { text-align: center; background: #EAFAEF; border: 1px solid #CCC; font-weight: 700;}
.price_area th span { font-size: clamp(1.1rem,1.2vw,1.2rem);}
.price_area td { border: 1px solid #CCC;}
.price_area th strong, .price_area td strong { font-size: clamp(1.6rem,1.8vw,1.8rem); color: #E00;}
.price_area td a { display: block; margin: 5px; padding: 5px 0; border: #999 solid 1px; color: #222; border-radius: 4px; background: linear-gradient(#fff, #e8e8e8);}
.price_area td a:hover { background: #FFF; text-decoration: none;}
.price_area td a span { font-size: clamp(1.8rem,2vw,2rem); font-weight: 700; color: #24B24C;}
.price_area tr:nth-child(1) th { background: #DCF4E4;}
.price_area tr:nth-child(even) th { background: #DCF4E4;}
.price_area tr:nth-child(even) td { background: #F3FBF6;}
.table-scroll { overflow-x: auto;}

.flow { padding: 24px; border: 2px solid #24B24C; border-radius: 4px;}
.flow + .flow { margin-top: 16px;}
.flowmin { padding: 24px; background: #F3FBF6; border-radius: 4px;}
.flowmin::after { content: ''; display: block; clear: both;}
.flow_arrow { text-align: center;}
.flow_arrow img { transform: rotate(90deg);}
.wrap { margin-top: 16px; padding: 16px; text-align: center; background: #F8F8F8; border: 1px solid #CCC; border-radius: 4px;}

.blog { margin: 0; padding: 0; border-top: 1px solid #D5D5D5; list-style: none;}
.blog li { display: grid; grid-template-columns: auto 1fr; gap: 16px 24px; padding: 24px 0; border-bottom: 1px solid #D5D5D5;}
.blog li time { color: #24B24C;}
.blog li p { margin: 0;}
.screen-reader-text { display: none;}
.pagination { margin-top: 48px; text-align: center; white-space: nowrap;}
.pagination span { height: auto;}
.pagination .nav-links { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; width: 100%;}
.pagination a:not(.top):not(.prev):not(.next):not(.single-prev):not(.single-next) { background: #FFF; border-radius: 50%; font-weight: 400; text-decoration: none;}
.pagination a:not(.top):not(.single-prev):not(.single-next) { width: 40px; height: 40px; line-height: 40px;}
.pagination a.prev, .pagination a.next { position: relative; text-indent: -9999px; overflow: hidden;}
.pagination a.prev { transform: scaleX(-1);}
.pagination a.prev::before, .pagination a.next::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) rotate(45deg); width: 12px; height: 12px; border-top: 2px solid #222; border-right: 2px solid #222;}
.pagination a.single-prev, .pagination a.single-next { display: flex; align-items: center; gap: 8px;}
.pagination a strong { display: inline-block; width: 21px; height: 21px; text-align: center; vertical-align: middle; background: #24B24C; border-radius: 50%; font-size: 1.6rem; line-height: 1.2; color: #FFF;}
.pagination a.top { margin: 0 8px; text-decoration: none;}
.pagination span.current { display: flex; justify-content: center; align-items: center; width: 40px; height: 40px; background: #24B24C; border-radius: 50%; font-weight: 400; color: #FFF;}


.ec-layoutRole__mainTop { 
        margin-bottom: 40px;
}



@media only screen and (max-width: 1300px){
	.ec-layoutRole .ec-layoutRole__contents { grid-template-columns: 100%;}
	.st .ec-blockBtn--top { padding: 0 40px 0 16px; background-position: right 10px center; font-size: 1.2rem;}
	.table th { display: block; padding: 16px 0 0; border-bottom: none;}
	.table td { display: block; padding: 8px 0 16px;}
	.fl, .alignleft { float: none; margin: 0 0 1em;}
	.fr, .alignright { float: none; margin: 0 0 1em;}
	.sp { display: block;}
	.pc { display: none;}


	/*TOP*/
	.ec-layoutRole__banner { grid-column: auto;}
	.ec-bannerRole { width: auto; max-width: initial; margin: 0 calc(50% - 50vw); overflow: hidden;}
	.main_visual .slick-slide { padding: 0;}
	.slick-prev, .slick-next { display: none !important;}
	.news_area { grid-template-columns: 1fr; padding: 24px;}
	.news_area .block_body { height: 320px;}
	.news li { grid-template-columns: 1fr;}
	.showroon_area .block_body { grid-template-columns: 1fr;}
	.contact_area .block_body { grid-template-columns: 1fr; padding: 24px;}
	.contact_area .ec-itemButton__nav { flex-direction: column;}
	.contact_area .ec-itemButton__nav li { padding: 8px 0 0; border-top: 1px solid #24B24C; border-left: none;}
	.guide_area .block_body { grid-template-columns: 1fr;}


	/*PAGE*/
	.search .block_body { padding: 0; border: none;}
	.search ul { grid-template-columns: repeat(2,1fr);}
	.photo_area .block_body { grid-template-columns: 1fr;}
	.slide { position: relative; width: 100%; padding-top: 24px; overflow: auto;}
	.slide img { width: 100%; min-width: 950px;}
	.slide:before{ content: "\008868\00306f\005de6\0053f3\00306b\0030b9\0030af\0030ed\0030fc\0030eb\003067\00304d\00307e\003059"; color: #fff; background: #e07903; position: absolute; top: 0; left: 0; border-radius: 5px; padding: 0.05em 0.5em;}
	.blog li { grid-template-columns: 1fr;}
}





@media only screen and (max-width: 767px){
	.catbtn { float: none; justify-content: flex-end;}
	.ranking .ec-shelfGrid__item { width: 50%;}
	.ranking .ec-shelfGrid__item:nth-child(5) { display: none;}
	.photo_area .photo ul { grid-template-columns: 1fr;}
}