@charset "utf-8";
/*-------------------
   clearfix
-------------------*/
.cf:before, .cf:after{
	content: " ";
	display: table;
}
.cf:after{
	clear: both;
}
.cf{
 *zoom: 1;
}
/*-------------------
   common
-------------------*/
.wrapper{
    font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    font-weight:bold;
	font-feature-settings: "palt";
	padding: 0 0;
	position: relative;
}
*{
	box-sizing: border-box;
}
a{
	color: inherit;
}
img{
	height: auto;
	max-width: 100%;
}
#container .flex{
    flex-wrap: wrap; /* 画面幅に合わせてカラム落ちさせる */
    display: flex;
    justify-content: flex-start;
    align-items: top
}
#container html{
	font-size: 62.5%;
	line-height: 1.5;
}

/* フェードイン用のCSS */
.slide-bottom {
	opacity: 0;
	transform: translateY(20px);
	transition: all 1.3s 0s ease-out;
}

/*----scroll----*/
.scroll{
    opacity: 0;
    transition: all 2s ease;
}
.scroll.show{
    opacity: 1;
    transform: none;
    animation: 2.5s fadeIn;
}
.s-bottom{
    transform: translate(0, 20px);
}
.s-scaleDown{
    transform: scale(1.2);
}
#container .wrapper{
	margin: 0 0 5%;
}
#container{
    color: #4d280e;
    font-size: 1.5rem;
}
/*-------------------
   mainvisual
-------------------*/
#container .mainvisual_inner{
    background: url(/contents/shop/sevenbeauty/img/freepage/stool_lineup/202203/mv_pc.jpg) no-repeat center;
    height: 541px;
    padding: 5% 0;
    margin: 0 auto;
    text-align: center;
    width: 100%;
}
#container h1{
    font-size: 5rem;
    font-weight: bold;
    line-height: 1;
    margin: 0 auto;
}
#container h1 em{
    font-size: 3rem;
    font-weight: bold;
}
#container .mainvisual_inner h2{
    font-weight: bold;
    letter-spacing: 5px;
}
#container .mainvisual_inner h3{
    font-family: 'Ubuntu',"ヒラギノ角ゴ ProN W3",'Hiragino Kaku Gothic ProN','メイリオ', Meiryo,"遊ゴシック体",YuGothic,"游ゴシック","Yu Gothic",'ＭＳ ゴシック',sans-serif;
    font-weight: bold;
}
#container .mainvisual_inner h3 .l_pr{
    background-color: #4d280e;
    color: #FFF;
    font-size: 1rem;
    text-align: center;
    padding: 0 10px;
    margin: 0 5px;
    border-radius: 30px;
    display: inline-block;
    line-height: 2;
}
#container .mainvisual_inner h3 .yen{
    display: inline-block;
    font-size: .9rem;
    font-weight: bold;
}
/*-------------------
   sec-menu
-------------------*/
#container .sec-menu{
    text-align: center;
    margin: 10px auto 0;
    padding: 10px 10px 40px;
    max-width: 1040px;
}
#container .sec-menu h2{
    font-size: 2.2rem;
    font-weight: bold;
}
#container .sec-menu ul{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0 10px 20px;
}
#container .sec-menu li{
    width: calc(94% / 4);
    margin: 5px;
    padding: 10px 5px;
    border: 1px solid #666;
    border-radius: 4px;
    font: normal 1rem/1.1 'Ubuntu', "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    text-align: center;
    display: block;
    position: relative;
}
#container .menu-div{
    height: 50px;
}
#container .menu-div span{
    display: flex;
    align-items: center;
    flex: 1 1;
    text-align: left;
}
#container .menu-div img{
    margin-right: 20px;
}
#container .menu-div .menu-arrow{
    position: relative;
    display: inline-block;
    padding-left: 10px;
}
#container .menu-div .menu-arrow:after{
    content: '';
    width: 10px;
    height: 10px;
    border: 0px;
    border-top: solid 3px #8e775d;
    border-right: solid 3px #8e775d;
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    position: absolute;
    top: 50%;
    left: 0;
    margin-top: -4px;
}
#container .menu-div a{
    line-height: 1.4;
    flex: 1 1;
    display: flex;
    align-items: center;
    padding: 20px;
    position: relative;
    bottom: 15px;
}
/*-------------------
    list
-------------------*/
/* カテゴリトップ */
#container .sec_main{
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto;
    text-align: center;
    width: 1000px;
}
#container .sec_main h2{
    font-size: 2.6rem;
    font-weight: bold;
    margin: 0 auto;
    text-align: left;
}
#container .sec_main p{
    font-family: 'Ubuntu',"ヒラギノ角ゴ ProN W3",'Hiragino Kaku Gothic ProN','メイリオ', Meiryo,"遊ゴシック体",YuGothic,"游ゴシック","Yu Gothic",'ＭＳ ゴシック',sans-serif;
    font-size: 1rem;
    text-align: left;
}
#container .sec_main .pic{
    width: 40%;
}
#container .basic .text{
    background: url(/contents/shop/sevenbeauty/img/freepage/stool_lineup/202203/basic_2.png) no-repeat top 20px right 20px;
    background-color: #e5ddda;
    color: #4d280e;
    padding: 40px;
    width: 60%;
}
#container .backrest .text{
    background: url(/contents/shop/sevenbeauty/img/freepage/stool_lineup/202203/backrest_2.png) no-repeat top 20px right 20px;
    background-color: #e5ddda;
    color: #4d280e;
    padding: 40px;
    width: 60%;
}
#container .ringlever .text{
    background: url(/contents/shop/sevenbeauty/img/freepage/stool_lineup/202203/ringlever_2.png) no-repeat top 20px right 20px;
    background-color: #e5ddda;
    color: #4d280e;
    padding: 40px;
    width: 60%;
}
#container .lowprice .text{
    background: url(/contents/shop/sevenbeauty/img/freepage/stool_lineup/202203/lowprice_2.png) no-repeat top 20px right 20px;
    background-color: #e5ddda;
    color: #4d280e;
    padding: 40px;
    width: 60%;
}
#container .design .text{
    background: url(/contents/shop/sevenbeauty/img/freepage/stool_lineup/202203/design_2.png) no-repeat top 20px right 20px;
    background-color: #e5ddda;
    color: #4d280e;
    padding: 40px;
    width: 60%;
}
#container .footcare .text{
    background: url(/contents/shop/sevenbeauty/img/freepage/stool_lineup/202203/footcare_2.png) no-repeat top 20px right 20px;
    background-color: #e5ddda;
    color: #4d280e;
    padding: 40px;
    width: 60%;
}
#container .chair .text{
    background: url(/contents/shop/sevenbeauty/img/freepage/stool_lineup/202203/chair_2.png) no-repeat top 20px right 20px;
    background-color: #e5ddda;
    color: #4d280e;
    padding: 40px;
    width: 60%;
}
#container .related .text{
    background: url(/contents/shop/sevenbeauty/img/freepage/stool_lineup/202203/related_2.png) no-repeat top 20px right 20px;
    background-color: #e5ddda;
    color: #4d280e;
    padding: 40px;
    width: 60%;
}
/* 商品 */
#container .list{
    font-family: 'Ubuntu',"ヒラギノ角ゴ ProN W3",'Hiragino Kaku Gothic ProN','メイリオ', Meiryo,"遊ゴシック体",YuGothic,"游ゴシック","Yu Gothic",'ＭＳ ゴシック',sans-serif;
    font-size: 1rem;
    text-align: center;
    margin: 0 auto 5%;
    padding: 0 1% 0;
    width: 1040px;
}
#container .list_flex{
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    padding: 0;
}
#container .list_flex li{
    border-right: 1px solid #c5c5c5;
    border-bottom: 1px solid #c5c5c5;
    margin: 1.5%;
    padding: 7px;
    width: 220px;
}
#container .list_flex dl{
    margin: 5px auto;
}
#container .list_flex dd{
    line-height: 1.2;
}
#container .ttl{
    height: 40px;
    padding: 0 10px;
    display: table-cell;
    vertical-align: middle;
}
#container .high{
    margin: 0 auto 5px;
    font-size: .9rem;
}
#container .price{
    color: #4d280e;
    font-weight: bold;
    font-size: 1.2rem;
    height: 24px;
    margin: 0 0 20px;
}
#container .colorcircle{
    display: flex;
    justify-content: center;
    height: 20px;
    margin: 0 auto;
    width: 200px;
}
#container .price p{
    font-size: .8rem;
    font-weight: bold;
    display: inline-block;
}
/*-- 色玉 --*/
#container .wht{
    border:1px solid #a8a8a8;
    width: 16px;
    height: 16px;
    line-height: 16px;
    background-color: white;
    border-radius: 50%;
    margin: 0 2px;
}
#container .brn{
    width: 16px;
    height: 16px;
    line-height: 16px;
    background-color: #4d2b22;
    border-radius: 50%;
    margin: 0 2px;
}
#container .blk{
    width: 16px;
    height: 16px;
    line-height: 16px;
    background-color: black;
    border-radius: 50%;
    margin: 0 2px;
}
#container .lblu{
    width: 16px;
    height: 16px;
    line-height: 16px;
    background-color: #71beec;
    border-radius: 50%;
    margin: 0 2px;
}
#container .grn{
    width: 16px;
    height: 16px;
    line-height: 16px;
    background-color: #a0aa2d;
    border-radius: 50%;
    margin: 0 2px;
}
#container .pnk{
    width: 16px;
    height: 16px;
    line-height: 16px;
    background-color: #efc1ce;
    border-radius: 50%;
    margin: 0 2px;
}
#container .gry{
    width: 16px;
    height: 16px;
    line-height: 16px;
    background-color: #837872;
    border-radius: 50%;
    margin: 0 2px;
}
#container .bge{
    width: 16px;
    height: 16px;
    line-height: 16px;
    background-color: #efd9c2;
    border-radius: 50%;
    margin: 0 2px;
}
#container .blu{
    width: 16px;
    height: 16px;
    line-height: 16px;
    background-color: #497fbf;
    border-radius: 50%;
    margin: 0 2px;
}
#container .slv{
    width: 16px;
    height: 16px;
    line-height: 16px;
    background-color: #b8b8b8;
    border-radius: 50%;
    margin: 0 2px;
}
#container .dbrn{
    width: 16px;
    height: 16px;
    line-height: 16px;
    background-color: #2c1304;
    border-radius: 50%;
    margin: 0 2px;
}
#container .lgry{
    width: 16px;
    height: 16px;
    line-height: 16px;
    background-color: #D0C9C4;
    border-radius: 50%;
    margin: 0 2px;
}
#container .ivo{
    width: 16px;
    height: 16px;
    line-height: 16px;
    background-color: #E4E5D1;
    border-radius: 50%;
    margin: 0 2px;
}
#container .dgry{
    width: 16px;
    height: 16px;
    line-height: 16px;
    background-color: #49493f;
    border-radius: 50%;
    margin: 0 2px;
}
#container .ngry{
    width: 16px;
    height: 16px;
    line-height: 16px;
    background-color: #A7A485;
    border-radius: 50%;
    margin: 0 2px;
}
#container .lbrn{
    width: 16px;
    height: 16px;
    line-height: 16px;
    background-color: #A07853;
    border-radius: 50%;
    margin: 0 2px;
}
#container .dblu{
    width: 16px;
    height: 16px;
    line-height: 16px;
    background-color: #3c6177;
    border-radius: 50%;
    margin: 0 2px;
}
#container .sag{
    width: 16px;
    height: 16px;
    line-height: 16px;
    background-color: #8E8B60;
    border-radius: 50%;
    margin: 0 2px;
}
#container .ros{
    width: 16px;
    height: 16px;
    line-height: 16px;
    background-color: #b64148;
    border-radius: 50%;
    margin: 0 2px;
}
#container .nvy{
    width: 16px;
    height: 16px;
    line-height: 16px;
    background-color: #1e3270;
    border-radius: 50%;
    margin: 0 2px;
}
#container .olv{
    width: 16px;
    height: 16px;
    line-height: 16px;
    background-color: #5a7359;
    border-radius: 50%;
    margin: 0 2px;
}
#container .doak{
    width: 16px;
    height: 16px;
    line-height: 16px;
    background-color: #d3c5ac;
    border-radius: 50%;
    margin: 0 2px;
}




/*-------------------
    さらに表示する
-------------------*/
#container .txt-hide_1,
#container .txt-hide_2,
#container .txt-hide_3,
#container .txt-hide_4,
#container .txt-hide_5,
#container .txt-hide_6,
#container .txt-hide_7{
    display: none;
}
#container button.more_1,
#container button.more_2,
#container button.more_3,
#container button.more_4,
#container button.more_5,
#container button.more_6,
#container button.more_7{
    width: 300px;
    margin: 25px auto 40px;
    display: block;
    border: 2px solid #4d280e;
    border-radius: 40px;
    color: #4d280e;
    font-size: 1rem;
    font-weight: bold;
    padding: 10px 15px;
    outline: 0;
    transition: .1s;
    -erbkit-transition: .1s;
    text-align: center;
    cursor: pointer;
}
#container button.more_1::after,
#container button.more_2::after,
#container button.more_3::after,
#container button.more_4::after,
#container button.more_5::after,
#container button.more_6::after,
#container button.more_7::after{
    content: "+ さらに表示する";
    transition: .1s;
    -erbkit-transition: .1s;
}
#container button.more_1.on-click::after,
#container button.more_2.on-click::after,
#container button.more_3.on-click::after,
#container button.more_4.on-click::after,
#container button.more_5.on-click::after,
#container button.more_6.on-click::after,
#container button.more_7.on-click::after{
    content: "- 閉じる";
}
@media screen and (min-width:320px) and ( max-width:480px){
/*　スマホ縦　i6 / i6plus / i7  320pxから480pxまではここを読み込む　*/
/*-------------------
   mainvisual
-------------------*/
#container .mainvisual{
    padding: 0;
    width: 100%;
}
#container .mainvisual_inner{
    background: url(/contents/shop/sevenbeauty/img/freepage/stool_lineup/202203/mv_sp.jpg) no-repeat center;
    background-size: cover;
    height: auto;
    margin: 0 auto;
    padding: 0;
    width: 100%;
}
#container h1{
    font-size: 2.5rem;
    padding: 0;
    width: 78%;
    margin: 0 auto 2px;
}
#container h1 em{
    display: block;
    font-size: 2.4rem;
    font-weight: bold;
}
#container .mainvisual_inner h2{
    font-weight: bold;
    font-size: 1.2rem;
    padding: 30px 0 4px;
    letter-spacing: 2px;
}
#container .mainvisual_inner h3{
    padding: 0 0 214px;
}
#container .navi_inner{
    width: 100%;
}
#container .navibtn{
    justify-content: flex-start;
    padding: 0;
    margin: 0 auto;
}
#container .btn a{
    font-size: 1rem;
}
/*-------------------
    sec-menu
-------------------*/
#container .sec-menu{
    margin: 10px auto 0;
    padding: 10px 0 30px;
    text-align: center;
}
#container .sec-menu ul{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0 10px 20px;
}
#container .sec-menu li{
    margin: 5px;
    padding: 10px 5px;
    border: 1px solid #666;
    border-radius: 4px;
    font: normal 1rem/1.1 'Ubuntu', "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    text-align: center;
    display: block;
    position: relative;
    width: calc(94% / 2);
}
#container .menu-div a{
    line-height: 1.2;
    flex: 1 1;
    display: flex;
    align-items: center;
    padding: 12px 7px;
    position: relative;
    bottom: 8px;
}
#container .menu-div span{
    font-size: .9rem;
    display: flex;
    align-items: center;
    flex: 1 1;
    text-align: left;
}
#container .menu-div .menu-arrow:after{
    width: 6px;
    height: 6px;
    border-top: solid 2px #8e775d;
    border-right: solid 2px #8e775d;
}
#container .menu-div img{
    margin-right: 12px;
}
/*-------------------
    list
-------------------*/
#container .basic .text{
    background: url(/contents/shop/sevenbeauty/img/freepage/stool_lineup/202203/basic_3.png) no-repeat top 20px right 20px;
    background-color: #e5ddda;
}
#container .backrest .text{
    background: url(/contents/shop/sevenbeauty/img/freepage/stool_lineup/202203/backrest_3.png) no-repeat top 20px right 20px;
    background-color: #e5ddda;
}
#container .ringlever .text{
    background: url(/contents/shop/sevenbeauty/img/freepage/stool_lineup/202203/ringlever_3.png) no-repeat top 20px right 20px;
    background-color: #e5ddda;
}
#container .lowprice .text{
    background: url(/contents/shop/sevenbeauty/img/freepage/stool_lineup/202203/lowprice_3.png) no-repeat top 20px right 20px;
    background-color: #e5ddda;
}
#container .design .text{
    background: url(/contents/shop/sevenbeauty/img/freepage/stool_lineup/202203/design_3.png) no-repeat top 20px right 20px;
    background-color: #e5ddda;
}
#container .footcare .text{
    background: url(/contents/shop/sevenbeauty/img/freepage/stool_lineup/202203/footcare_3.png) no-repeat top 20px right 20px;
    background-color: #e5ddda;
}
#container .chair .text{
    background: url(/contents/shop/sevenbeauty/img/freepage/stool_lineup/202203/chair_3.png) no-repeat top 20px right 20px;
    background-color: #e5ddda;
}
#container .related .text{
    background: url(/contents/shop/sevenbeauty/img/freepage/stool_lineup/202203/related_3.png) no-repeat top 20px right 20px;
    background-color: #e5ddda;
}
#container .sec_main{
    width: 100%;
}
#container .sec_main .text{
    margin: 0 0 5px;
    padding: 30px 25px;
    width: 100%;
}
#container .sec_main .pic{
    width: 100%;
}
#container .list{
    padding: 0;
    width: 100%;
}
#container .list_flex{
    padding: 0;
}
#container .list_flex li{
    margin: 0 1.5% 5px;
    width: 47%;
}
/*-- 色玉 --*/
#container .colorcircle{
    width: 100%;
}
#container .wht,
#container .brn,
#container .blk,
#container .lblu,
#container .grn,
#container .pnk,
#container .gry,
#container .bge,
#container .blu,
#container .slv,
#container .dbrn,
#container .lgry,
#container .ivo,
#container .dgry,
#container .ngry,
#container .lbrn,
#container .dblu,
#container .sag,
#container .ros,
#container .doak{
    width: 13px;
    height: 13px;
    line-height: 13px;
}
}
@media screen and (min-width:480px) and ( max-width:1024px){
/*　スマホ横～タブレット 480pxから1024pxまではここを読み込む　*/
/*-------------------
   mainvisual
-------------------*/
#container .mainvisual{
    padding: 0;
    width: 100%;
}
#container .mainvisual_inner{
    background-size: cover;
    height: auto;
    padding: 40px 0 250px;
    width: 100%;
}
/*-------------------
   navi
-------------------*/
#container .navibtn{
    padding: 0 50px;
}
/*-------------------
    list
-------------------*/
/* カテゴリトップ */
#container .sec_main{
    width: 100%;
}
#container .parts .sec_main{
    width: 100%;
}
#container .sec_main .text{
    padding: 16px 30px;
}
#container .sec_main h2{
    margin: 20px 0 0;
}
/* 商品 */
#container .list{
    width: 100%;
}
/*-------------------
   navi
-------------------*/
#container .navi_inner{
    width: 100%;
}
#container .list_flex li{
    margin: 2%;
}
/*-------------------
    parts
-------------------*/
#container .parts_inner{
    width: 100%;
}
#container .p_sp{
    display: none;
}
}
@media screen and (min-width:375px) and ( max-width:480px){
    /*　スマホ縦　i6 / i6plus / i7  320pxから480pxまではここを読み込む　*/
/*-------------------
   navi
-------------------*/
#container .btn{
    line-height: 1.5;
    padding: 0;
    margin: 0;
    width: 125px;
}
}
@media screen and (min-width:320px) and ( max-width:374px){
/*　ihone5/5E　320pxから374pxはここを読み込む　*/
/*-------------------
   navi
-------------------*/
#container .btn{
    line-height: 1.5;
    padding: 1% 3%;
    margin: 0 auto;
}
}
@media screen and (min-width:960px){
/*　小・大画面デスクトップ　960pxからはここを読み込む　*/
/*-------------------
   parts
-------------------*/

}