@charset "utf-8";
/* CSS Document */




/***********************************  Reset  *************************************/

/*
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
Twitter: @rich_clark
*/

#cateWrap div, #cateWrap span, #cateWrap object, #cateWrap iframe,
#cateWrap h1, #cateWrap h2, #cateWrap h3, #cateWrap h4, #cateWrap h5, #cateWrap h6, #cateWrap p, #cateWrap blockquote, #cateWrap pre,
#cateWrap abbr, #cateWrap address, #cateWrap cite, #cateWrap code,
#cateWrap del, #cateWrap dfn, #cateWrap em, #cateWrap img, #cateWrap ins, #cateWrap kbd, #cateWrap q, #cateWrap samp,
#cateWrap small, #cateWrap strong, #cateWrap sub, #cateWrap sup, #cateWrap var,
#cateWrap b, #cateWrap i,
#cateWrap dl, #cateWrap dt, #cateWrap dd, #cateWrap ol, #cateWrap ul, #cateWrap li,
#cateWrap fieldset, #cateWrap form, #cateWrap label, #cateWrap legend,
#cateWrap table, #cateWrap caption, #cateWrap tbody, #cateWrap tfoot, #cateWrap thead, #cateWrap tr, #cateWrap th, #cateWrap td,
#cateWrap article, #cateWrap aside, #cateWrap canvas, #cateWrap details, #cateWrap figcaption, #cateWrap figure,
#cateWrap footer, #cateWrap header, #cateWrap hgroup, #cateWrap menu, #cateWrap nav, #cateWrap section, #cateWrap summary,
#cateWrap time, #cateWrap mark, #cateWrap audio, #cateWrap video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

#cateWrap article, #cateWrap aside, #cateWrap details, #cateWrap figcaption, #cateWrap figure,
#cateWrap footer, #cateWrap header, #cateWrap hgroup, #cateWrap menu, #cateWrap nav, #cateWrap section {
    display:block;
}

#cateWrap nav ul {
    list-style:none;
}

#cateWrap blockquote, #cateWrap q {
    quotes:none;
}

#cateWrap blockquote:before, #cateWrap blockquote:after,
#cateWrap q:before, #cateWrap q:after {
    content:'';
    content:none;
}

#cateWrap a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

/* change colours to suit your needs */
#cateWrap ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}

/* change colours to suit your needs */
#cateWrap mark {
    background-color:#ff9;
    color:#000;
    font-style:italic;
    font-weight:bold;
}

#cateWrap del {
    text-decoration: line-through;
}

#cateWrap abbr[title], #cateWrap dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}

#cateWrap table {
    border-collapse:collapse;
    border-spacing:0;
}

/* change border colour to suit your needs */
#cateWrap hr {
    display:block;
    height:1px;
    border:0;  
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

#cateWrap input, #cateWrap select {
    vertical-align:middle;
}

img {
	height: auto;
}

/***********************************  drawer  *************************************/


.bodyfix{
	width: 100%;
}
.closeBtn{
    display: none;
}
.closeBtn-block {
	width: 44px;
	height: 44px;
	position: fixed;
	top: 10px;
	right: 10px;
	background: #89ad18;
	color: white;
	font-weight: normal;
	cursor: pointer;
	z-index: 100000;	
	text-align: center;
	font-size: 41px;
	line-height: 38px;
	display: block;
}
body .wrapper-none{
	display: none !important;
}
#cateWrap {
	height: 100%;
}
#cateWrap.cateWrap-block {
	position:fixed;
	top: 0;
	left: 0;
	z-index: 99999;
	display: block;
	overflow-y: auto;
	height: 100%;
	width: 100%;
	-webkit-overflow-scrolling : touch;
}
#cateWrap.cateWrap-block #catContent {
	height: 100%;
	-webkit-backface-visibility:hidden;
	backface-visibility:hidden;
}


/***********************************  accordion  *************************************/

#cateWrap.cateWrap-block #catContent .c-list {
    background-color:#ffffff;
    margin: 0;
    padding: 0;
}

#cateWrap li{
	list-style: none;
	cursor: pointer;
}
#cateWrap ul.accordion {
	margin:0 auto 0px;
	padding: 0px;
	/* font-size:13px; */
	background: #fff;
}
#cateWrap ul.accordion a, 
#cateWrap ul.accordion a.ui-link {
	display:block;
	padding: 4% 0% 4% 7%;
	text-decoration:none;
	color: #1a1a1a;
	font-weight: normal;
	font-size: clamp(11px, 3.1vw, 13px);
}
#cateWrap ul.accordion p a, 
#cateWrap ul.accordion p a.ui-link {
	padding: 0;
}
#cateWrap ul.accordion span {
	padding:0px;
	display: flex;
	align-items: center;
  	position: relative; /* このタグを基準に矢印を作成 */
	font-weight: 500;
	font-size: clamp(11px, 3.1vw, 13px);
}

#cateWrap ul.accordion span:after {
        content: "";
        position: absolute;
        right: 6%;
        top: 50%;
        width: clamp(4px, 1vw, 4px);
        height: clamp(4px, 1vw, 4px);
        border-right: 1px solid #929292;
        border-bottom: 1px solid #929292;
        transform: translateY(-50%) rotate(45deg);
        transition: transform 0.3s 
ease;
}
#cateWrap ul.accordion span.one:after {
        content: "";
        position: absolute;
        right: 6%;
        top: 60%;
        width: clamp(4px, 1vw, 4px);
        height: clamp(4px, 1vw, 4px);
        border-right: 1px solid #929292;
        border-top: 1px solid #929292;
        border-bottom: none;
        transform: translateY(-50%) rotate(45deg);
        transition: transform 0.3s 
ease;
}

#cateWrap ul.accordion span.open:after {
border-right: none;
        width: clamp(6px, 1.5vw, 6px);
        height: 0;
        border-bottom: 1px solid #929292;
        transform: translateY(-50%) rotate(0deg);
}
#cateWrap ul.accordion span.one.open:after {
    transform: rotate(45deg);
    /* サブカテなし：右向き矢印（サブリストが開いている時） */
}

#cateWrap ul.accordion ul {
	display:none;
	background: #F5F5F5; 
	padding:0;
}
#cateWrap ul.accordion > li {
	font-weight: normal;
	text-shadow: none;
	color: #1a1a1a;
	display: block;
	margin: 0;
	overflow: visible;
	position: relative;
	text-align: left;
	border: 1px solid #EDEAE7;
	border-width: 0 0 1px 0;
	min-height: 5rem;
}

#cateWrap ul.accordion > li > ul > li {
	color: #1a1a1a;
	display: block;
	margin: 0;
	overflow: visible;
	position: relative;
	text-align: left;
	border-bottom: 1px solid #ccc;
	font-weight: normal;
}

#cateWrap ul.accordion > li img {
	max-width: 12%;
	margin: 2%;
	padding: 0% 2%;
	width: 100%;
	height: auto;
}
#cateWrap ul.accordion > li > p {
	margin: 0px;
	padding: 0px;
}


#cateWrap ul.accordion > li > ul > li:last-child a {
	border: 0px solid #ccc;
	border-width: 0 0 0px 0;
}
#cateWrap ul.accordion > li > ul > li > ul > li {
	background:#FFF;
	border-bottom:1px dotted #888;
}

#cateWrap ul.accordion-inner {
	margin: 0;
	padding: 0;
}
#cateWrap ul.accordion-inner li a:after  {
    content: "";
    position: absolute;
    right: 6%;
    top: 50%;
    width: clamp(4px, 1vw, 4px);
    height: clamp(4px, 1vw, 4px);
    border-right: 1px solid #929292;
    border-top: 1px solid #929292;
    border-bottom: none;
    transform: translateY(-50%) rotate(45deg);
    transition: transform 0.3s 
ease;
}


#cateWrap ul.accordion-inner > li:last-child {
	border:none;
}

#cateWrap ul.accordion-open li p.subcate-ttl {
	background-color: #efefef;
	font-weight:bold;
	text-shadow:none;
	color: #666;
	border-bottom: 1px solid #ccc;
	padding: 7px;
	margin: 0;
	overflow: hidden;
	text-align: left;
}





#cateWrap .ui-body-c ul.accordion .ui-link {
 	color: #666;
 	font-weight: normal;
 	display: block;
	padding: 0%;
}



/* サブナビ2列表示 */
#cateWrap ul.accordion-open {
    padding:0;
    display:block;
}

#cateWrap ul.accordion-open li ul.accordion-inner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    border-bottom:1px solid #afaaaa;
    padding:0;
    background:#fafafa;
}

#cateWrap ul.accordion-open li ul.accordion-inner li {
    border-bottom:1px solid #afaaaa;
}
#product_list ul.accordion-open li ul.accordion-inner li {
    cursor:auto;
}

#cateWrap ul.accordion-open li ul.accordion-inner li:last-child {
    border-bottom:none;
}

#cateWrap ul.accordion-open li ul.accordion-inner li:first-child {
    width: 100%;
}
#cateWrap ul.accordion-open li ul.accordion-inner li:nth-child(n+2) {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;/* 孫flexにheight:100%効かない対策。子にもflex指定 */
    width:  50%;
    font-size:12px;
}
#cateWrap ul.accordion-open li ul.accordion-inner li a {
    background-image: url("https://www.air-ry.live/smaf/category/images/yj-list.png");
    background-repeat:no-repeat;
    background-position:97%;
    background-size:10px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;/* align-itemsタテ中央揃え */
    box-sizing: border-box;
    height:100%;
    width:100%;
    padding:13px 18px 13px 10px; /*上書き*/
    color: #777;
    overflow: visible;
    font-weight: normal;
}

#cateWrap ul.accordion-open li ul.accordion-inner li:nth-child(2n) a {
    border-right:1px solid #ccc;
}
#cateWrap ul.accordion-open li p.subcate-ttl {
    background-color:#777; /*上書き*/
    color:#fff; /*上書き*/
    font-size:80%; /*上書き*/
}

/*検索フォーム
#cateWrap #list_search_area{
	background-color:#e7e7e7;
	padding: 15px 10px;
	margin: 0;
}
*/

/* ドロワーメニュー内検索ボックス */

#cateWrap.cateWrap-block #catContent .cat_search_wrap{
    background-color: #fff;
    display: grid;
    grid-template-columns: 80vw 8vw;
    -webkit-column-gap: 4vw;
    -moz-column-gap: 4vw;
    column-gap: 4vw;
    padding: 22px 4vw;
}
#cateWrap.cateWrap-block #catContent #cat_search_area {
    clear: both;
    text-align: center;
}
#cateWrap.cateWrap-block #catContent #cat_search_area .cat_search_box {
    padding: 0 30px;
    background-image: none;
    position: relative;
    background: #e7e8e9;
}
#cateWrap.cateWrap-block #catContent #cat_search_area .cat_search_box:after {
position: absolute;
    left: 7px;
    top: 50%;
    margin-top: -9px;
    content: "";
    width: 18px;
    height: 18px;
    opacity: .5;
        background-image: url("https://www.air-ry.live/smaf/images/search.svg");
}
#cateWrap.cateWrap-block #catContent #cat_search_area .cat_search_box .searchbox {
    border: none;
    width: 98%;
    padding: .4em 0;
    margin: 0;
    display: block;
    background: transparent none;
    outline: 0 !important;
    line-height: 1.4;
    font-size: 1.0rem;
}








/***********************************  静的ページ調整用  *************************************/

/*
■静的ページへの反映方法
・非表示にするhtml箇所には class="static-none"を付与
・インクルードするcatnav.phpにはid="cateWrapStatic"ブロックで囲む
・https://www.air-ry.live/js/jquery.jsを読み込ませる
*/

/* cssは通常数値の2.5倍で指定 */
#cateWrapStatic {
	font-family: Helvetica, san-serif;
}

#cateWrapStatic #cateWrap ul.accordion a, 
#cateWrapStatic #cateWrap ul.accordion a.ui-link {
	font-size: 35px;
}
#cateWrapStatic #cateWrap ul.accordion span {
	font-size: 35px;
}
#cateWrapStatic #cateWrap ul.accordion span:after,
#cateWrapStatic #cateWrap ul.accordion span.one:after,
#cateWrapStatic #cateWrap ul.accordion-inner li a:after {
    right: 38px;
    width: 20px;
    height: 20px;
    margin-top: -10px;
    border-top: 5px solid #959595; /* 線の太さ */
    border-right: 5px solid #959595; /* 線の太さ */
}
#cateWrapStatic #cateWrap ul.accordion > li img {
	max-width: 18%;
}




/***********************************  カテゴリページ 簡易絞り込み検索  *************************************/

#refineSearchWrap {
	display: none;
	height: 100%;
}
#refineSearchWrap.refineSearchWrap-block {
	position:fixed;
	top: 0;
	left: 0;
	z-index: 99999;
	display: block;
	overflow-y: auto;
	height: 100%;
	width: 100%;
	padding: 0;
	margin: 0;
	-webkit-overflow-scrolling : touch;
}
#refineSearchWrap.refineSearchWrap-block #refineSearchInner {
	height: 100%;
	-webkit-backface-visibility:hidden;
	backface-visibility:hidden;
}

/*-- 絞り込み検索用ボタン --*/
p.refineSearchBtn {
	font-size: 13px;
	text-align: left;
	display: block;
	padding: 0 0 0 20px;
	margin: 5px 20px 30px;
	height: 40px;
	line-height: 40px;
	border: solid 1px #ccc;
	border-radius: 8px;
	position: relative;
}
p.refineSearchBtn span {
	position: absolute; /* アイコン基準 */
	top: 10px;
	right: 13px;
	display: block;
	width: 20px;
	height: 20px;
	background: #aaa;
	border-radius: 50%;
}
/*プラスアイコン*/
p.refineSearchBtn span::before, 
p.refineSearchBtn span::after {
	position: absolute;
	top: 9px;
	left: 50%;
	content: '';
	display: inline-block;
	width: 13px;
	height: 13px;
	border-top: 2px solid #fff;
	transform: translateX(-50%);
}
p.refineSearchBtn span:after {
	top: 3px;
	left: -3px;
	transform: rotate(90deg);
}

/*-- 絞り込みフローティング画面 --*/
#refineSearchWrap {
	padding: 6px 10px 20px;
}
dl.refineSearch {
	background: #ffffff;
	margin: 0 0 16px 0;
	padding: 25px 12px 0;
}
dl.refineSearch .subcate-ttl {
    background-color:#777; /*上書き*/
    color:#fff; /*上書き*/
    font-size:80%; /*上書き*/
    padding: 7px;
    margin: 0 0 1em;
    font-weight: bold;
}
dl.refineSearch ul {
    padding: 0;
    margin: 0;
}
dl.refineSearch li {
    width: 50%;
    float: left;
    padding: 0;
    margin: 0 0 10px 0;
    box-sizing: border-box;
}
dl.refineSearch li:nth-child(2n) {
	padding: 0 0 0 5px;
}
dl.refineSearch li:nth-child(2n+1) {
	padding: 0 5px 0 0;
}
dl.refineSearch li a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
dl.refineSearch li a.ui-link {
	font-weight: normal;
	color: #333;
	padding: 8px 6px;
	margin: 0;
	border: solid 1px #ddd;
	display: block;
}
dl.refineSearch li a span {
	display: flex;
	padding: 0 0 0 4px;
  	position: relative; /* このタグを基準に矢印を作成 */
	font-size: 12px;
	line-height: 20px;
	height: 20px;
	color: #777;
}

dl.refineSearch li a span:after {
    content: '';
    position: absolute;
    top: 50%;
    right: 5px;
    display: block;
    width: 6px;
    height: 6px;
    margin-top: -5px;
    border-top: 2px solid #666; /* 線の太さ */
    border-right: 2px solid #666; /* 線の太さ */
    transform: rotate(45deg); /* 下向き矢印 */
}

.colorSearch li a span:before {
    display: inline-block;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    min-width: 12px;
    height: 12px;
    margin: 4px 8px 4px 0;
    content: "";
    border-radius: 50%;
}
.colorSearch li.brack a span:before {background: #333;}
.colorSearch li.gray a span:before {background: #9e9e9e;}
.colorSearch li.white a span:before {background: #fff; border: solid 1px #ccc;}
.colorSearch li.brown a span:before {background: #795548;}
.colorSearch li.beige a span:before {background: #e2cca4;}
.colorSearch li.green a span:before {background: #19791d;}
.colorSearch li.blue a span:before {background: #2196f3;}
.colorSearch li.red a span:before {background: #f44336;}
.colorSearch li.orange a span:before {background: #ff9800;}
.colorSearch li.yellow a span:before {background: #ffeb3b;}
.colorSearch li.purple a span:before {background: #9c27b0;}
.colorSearch li.multi a span:before {background: url(https://r.r10s.jp/com/assets/images/multi_circle.svg) no-repeat 50% 50%;}
/* .colorSearch li.khaki a span:before {background: #6d4909;} */

/*閉じるボタン*/
#refineSearchInner p.closeBtn {
    position: static;
    width: 200px;
    height: 40px;
    line-height: 40px;
    font-size: 15px;
    margin: 0 auto 30px;
    padding: 0;
}

/* 検索結果 前のページに戻るボタン */
.searchbackBtn a {
	display: block;
	padding: 0;
	margin: 0 auto 20px;
	width: 60%;
	border: solid 1px #ccc;
	border-radius: 5px;
	line-height: 26px;
	text-align: center;
	font-size: 12px;
	color: #333;
	position: relative;
}
.searchbackBtn a:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 15px;
    display: block;
    width: 6px;
    height: 6px;
    margin-top: -3px;
    border-top: 2px solid #666; /* 線の太さ */
    border-right: 2px solid #666; /* 線の太さ */
    transform: rotate(225deg); /* 下向き矢印 */
}