@charset "utf-8";
.pro_catch01 {
font-size: 20px;
line-height: (28/20);
margin: 13px 0 12px 0;
@media (max-width: 767px) {
font-size: 17px;
line-height: (46/34);
margin: 7px 0 4px;
}
}
h4.product_name {
margin-bottom: 5px;
display: block;
font-size: 3rem;
font-weight: bold;
color: #040000;
font-family: 'Hiragino Kaku Gothic ProN';
}
.pro_cartIn .btn.btn-raised.btn-primary{ font-size: 130%; padding: 20px 5px; border-radius: 5px; width: 260px;text-decoration: underline; font-weight: bold; background-color: #dc143c; color: rgba(255,255,255,.84);}
a.btn.btn-raised.btn-primary:hover{ text-decoration: none;}
.btn-circle.btn-circle-primary {
color: #4D4D4D;
}
#gNavi02 {
display: block;
margin: 0 0 0 0;
}
/*トップページ*/
#main .comBox.topcomBox {
margin: 0!important;
width: 100%!important;
}
#hdCont01P {margin: 0 auto 25px!important;
width: 1112px!important;
}
.top_cateBox {margin: 70px auto 25px!important;
width: 1112px;
}
#free_bottom .ss-onayami.comBox {
margin: 70px auto 50px!important;
width: 1112px!important;
}
#free_bottom .ss-news-facebook {
margin: 70px auto 20px!important;
width: 1112px!important;
}
.ss-news__scroll {
position: relative;
height: auto;
}
#hd_newsBox {
width:1060px!important;
height: 140px!important;
overflow: scroll;
background-color: #f6f5f4;
float: left;
margin: 5px 0 0 22px;
padding: 10px;
}
#today_proBox {
margin: -10px 0 0 0;
float: left;
width: 610px!important;
}
#today_proBox div ul li a {
color: #c6a45c;
font-weight: bold;
position: relative;
font-size: 16px;
}
#today_proBox div ul li {
padding: 1px 0 2px;
}
#today_proBox div {
border: 1px solid #c6a45c;
border-left: none;
width: 208px!important;
float: left;
margin-top: 16px;
height: 96px;
}
.top_block_exp01 {
text-align: center;
letter-spacing: 2px;
padding: 15px 0;
line-height: 200%;
}
.ss-aw-recommend__list-item p.title { font-size: 18px; padding-top: 3px;}
.top_cateUl li a {
font-size: 16px;
}
/*カテゴリページ*/
#pagePath {
width: 1090px;
margin: 16px auto 19px;}
.cateListBox{width: 960px;
margin: 20px auto 50px;
}
.cateListBox_pager{width: 960px;
margin: 0 auto 0;
}
/* =======カテゴリ商品リスト====== */
div[id^="search_product"].item-list {
display: inline-block !important;
}
.cateListBox .ttl {
margin: 7px 0 1px;
color: #040000;
font-size: 2.4rem;
font-weight: bold;
font-family: 'Hiragino Kaku Gothic ProN';
}
/* トップ ukomi */
.top_ukomi_pc { margin: 0 auto; width: 1112px;}
.top_ukomi_sp { display: none;}
.ss-ukomi__inr {margin-top: 30px; margin-bottom: 40px;}
/*催事・イベント facebook*/
#free_bottom .sec05 .lBox {
float: left;
width: 545px;
height: auto;
}
#free_bottom .sec05 .rBox {
float: left;
width: 545px;
height: auto;
margin: 0 0 0 22px;
}
#free_bottom .sec05 h2 {
margin-bottom: 20px;
font-size: 26px;
text-align: center;
letter-spacing: 2px;
}
#free_bottom .sec05 .rBox .facebook {
padding: 15px 0;
text-align: center;
border: 1px solid #A8A8A7;
height: 420px;
}
#free_bottom .sec05 .rBox h2 {
font-size: 180％;
}
/*催事・line facebook*/
#free_bottom .sec05_line .lBox {
float: left;
width: 491px;
height: auto;
margin: 0 30px;
}
#free_bottom .sec05_line .rBox {
float: left;
width: 491px;
height: auto;
margin: 0 30px;
}
#free_bottom .sec05_line h2 {
margin-bottom: 20px;
font-size: 26px;
text-align: center;
letter-spacing: 2px;
}
#free_bottom .sec05_line .rBox h2 {
font-size: 180％;
}
/* カテゴリページ */
#child_category { max-width: 1200px; margin: 0 auto;}
#main .comPhotoUl li .txtBox {
padding: 35px 0 14px;
}
#main .comPhotoUl li .txtBox .icon {
background-color: #fff!important;
}
.main .txtBox p {
font-size: 1.6rem;
text-align: left!important;
line-height: 1.625;
}
.badge {
border-radius: 2px;
padding: 2px 5px;
font-size: 70%;
}
#main .comPhotoUl li .txtBox .icon-box .icon {
width: auto;
margin: 2px;
padding: 5px 1px 2px;
}
#main .comPhotoUl li {
width: 300px;
margin: 70px 30px 0 0;
float: left;
height: 650px!important;
}
.pagination .page-item.active .page-link {
color: #fff;
background-color: #ff8a06;
border-color: #ff8a06;
}
.pagination .page-item.active .page-link:hover,.pagination .page-item.active .page-link:focus {
background-color: #ff8a06
}
.pagination .page-item .page-link{color: #ff8a06;}
.cate_relatedCateBox {
padding-bottom: 0px;
}
#gFooter .fBox .fLink li { width: 32%!important;}
/*------------------------
以下 スマホ
------------------------*/
@media all and (max-width: 767px) {
#gNavi02 {
display: block;
margin: 0 0 0px 0;
margin-top: 72px!important;
}
#gHeader .hList li {
width: 25%;
padding: 0 1%;
}
/*トップページ*/
#hdCont01P {margin: 0 auto 25px!important;
width: 100%!important;
}
.top_cateBox {margin: 50px auto 20px!important;
width: 100%!important;
}
#free_bottom .ss-onayami.comBox {
margin: 50px auto 20px!important;
width: 100%!important;
}
#free_bottom .ss-news-facebook {
margin: 40px auto 20px!important;
width: 100%!important;
}
/*カテゴリページ*/
.cateListBox{width: 100%;
margin: -20px auto 0;
}
.cateListBox_pager{width: 100%;
margin: 0 auto 0;
}
#main .comPhotoUl li {
width: 100%;
margin: 0 auto 10px;
float: left;
height: 100%!important;
}
#main .comPhotoUl li .photo img {
width: 100%;
height: auto;
}
.main .txtBox {
margin-bottom: 10px;
margin-top: 0px!important;
}
#main .comPhotoUl li .txtBox {
padding: 0 0 1px!important;
}
/* トップ ukomi */
.ss-ukomi__inr {margin-top: 0px!important; margin-bottom: 30px; padding-top: 10px;}
.top_ukomi_pc { display: none;}
.top_ukomi_sp { display: block;}
/*催事イベント*/
#free_bottom .sec05 .lBox {
float: none;
width: 94%;
height: auto;
}
#free_bottom .sec05 h2 {
margin-bottom: 20px;
font-size: 2.4rem;
text-align: center;
letter-spacing: 2px;
}
#free_bottom .sec05 .rBox {
float: none;
width: 100%;
height: auto;
margin: 0 0 0 0;
}
#free_bottom .sec05 .rBox .facebook {
padding: 15px 0;
text-align: center;
border: 1px solid #A8A8A7;
height: 300px;
width: 94%;
margin: 0 0 0 3%;
}
/*Line*/
#free_bottom .sec05_line .lBox {
float: none;
width: 94%;
height: auto;
margin: 0 3%;
}
#free_bottom .sec05_line h2 {
margin-bottom: 20px;
font-size: 2.4rem;
text-align: center;
letter-spacing: 2px;
}
#free_bottom .sec05_line .rBox {
float: none;
width: 94%;
height: auto;
margin: 0 3%;
}
#free_bottom .sec05_line .rBox .facebook {
padding: 15px 0;
text-align: center;
border: 1px solid #A8A8A7;
height: auto;
width: 94%;
margin: 0 0 0 3%;
}
#main .comBox {
margin: 0 auto 25px;
width: 100%!important;
}
#gFooter .fBox .fLink li {
width: 40%!important;
}
#gFooter .fBox .fLink li:nth-child(2) {
width: 54% !important;
}
}
@media all and (max-width: 340px) {
}
@media all and (-ms-high-contrast:none){
}
/* 20240528 追記*/
body {
text-size-adjust: none;
-webkit-text-size-adjust: none;
}
/*body {
font-size: 1.6rem;
}*/
#today_proBox div ul {
margin: 5px 0 5px 8px;
line-height: 130%;
}
#today_proBox div{ height: 98px!important;}
.topAboutUl .aboutTxt { font-size: 1.6rem;}
#gFooter .fInner .fNavi li .date {
margin: 0 0 0 2px;
font-size: 1.6rem;
line-height: 1.42;
}
.review-container[data-action="slider"] .singleReview_body > p, .review-container[data-action="widget"] .singleReview_body .singleReview_body_left > p { font-size: 1.6rem;}
.reviewSliderWidget .reviewProductName a, .reviewSliderWidget .singleReview_body p, .reviewSliderWidget .singleReview_title {
text-align: left;
font-size: 1.6rem;
}
.reviewSliderWidget .starRating span {
font-weight: 400;
font-size: 22px;
display: inline-block;
float: left;
}
.reviewSliderWidget .review-widget-summary-container .starRating .reviewNumber strong {
font-size: 20px;
}
.featTtl {
font-size: 15px;
font-weight: bold;
margin: 0 0 7px 0;
}
.comProduct .numUl li .num span.num01 {
padding-top: 0;
display: inline-block;
font-size: 18px;
line-height: 200%;
font-weight: bold;
text-align: center;
vertical-align: middle;
border: none;
background: #c2a464;
color:#fff;
border-radius: 50%;
width: 38px;
height: 38px;
}
.comProduct .numUl li .num span.num02{
background: #ababab;
color:#fff;
}
.comProduct .numUl li .num span.num03{
background: #a18f7b;
color:#fff;
}
/*------------------------
以下 スマホ
------------------------*/
@media all and (max-width: 767px){
body {
font-size: 1.2rem;
line-height: 1.4;
}
#today_proBox div{ height: auto!important;}
#hdCont01P { display: block!important; width: 100%!important;}
#today_proBox div {
border: 1px solid #c6a45c;
border-top: none;
width: 95.38%!important;
float: none;
margin: 0 2%;
height: auto;
overflow-x: scroll;
}
#hd_newsBox {
display: block;
width: 100%!important;
height: 130px!important;
overflow: scroll;
background-color: #f6f5f4;
float: right;
margin: 5px 0 5px 0!important;
padding: 10px 2%!important;
}
#today_proBox {
margin: 0 0 0 0;
float: none;
width: 100%!important;
}
#gNavi02 ul li a {
display: block;
width: auto;
background-color: #f0f1f1;
padding: 0px 15px;
font-weight: bold;
border-right: none;
font-size: 1.4rem;
}
#gNavi02 ul li a.line2 {
padding: 7px 15px;
font-size: 1.4rem!important;
}
.top_h2, .comProduct h2.top_h2 {
text-align: center;
color: #4d4d4d;
font-size: 2.4rem;
letter-spacing: 2px;
margin: 0 0 0 0;
border-bottom: 1px;
line-height: 160%;
}
.top_block_exp01 {
text-align: center;
letter-spacing: 1px;
padding: 12px 0;
line-height: 180%;
width: 96%; margin: 0 auto;
font-size: 1.6rem;
}
.top_aboutBox h2.top_h2 {
text-align: center;
color: #4d4d4d;
font-size: 2.2rem;
letter-spacing: 1px;
margin: 0 0 5px 0;
border-bottom: 1px;
}
.ss-aw-recommend__list-item p.title {font-size: 1.6rem;}
.top_aboutBox .top_block_exp01 { width: 96%; margin: 0 auto;font-size: 1.6rem;}
.top_featureBox_body .top_block_exp01 { width: 96%; margin: 0 auto;font-size: 1.6rem!important;}
a.eventLink01 { font-size: 1.6rem;}
.eventTxt {
font-size: 1.6rem;
}
#free_bottom .sec05 .rBox h2 {
font-size: 2.4rem;
}
#gFooter .fBox .fLink li { font-size: 1.5rem;}
.featTtl {
font-size: 16px;
font-weight: bold;
margin: 0 0 7px 0;
}
.featTxt {
text-align: left;
margin: 10px 0 5px;
font-size: 16px;
font-weight: bold;
}
.topAboutUl .aboutTtl {
text-align: left;
font-weight: bold;
font-size: 16px;
margin: 10px 0 5px;
}
.ss-news__scroll-contents {
padding: 3px 5px 15px 5px;
}
.ss-news__scroll-contents dd {
padding: 0 0 5px 10px;
font-size: 1.2rem;
line-height: 1.5;
width: 75%!important;
float: right;
}
.ss-news__scroll-contents dt {
margin-top: 0;
font-size: 19.2px;
font-size: 1.2rem;
float: left;
}
#hd_newsBox .info a {
color: #f5000d;
font-weight: bold;
text-decoration: underline;
font-size: 1.4rem;
}
.comProduct .numUl li .ttl {
margin-bottom: 5px;
font-size: 1.6rem;
}
.topAboutUl a.aboutLink01 {
color: #fff;
display: inline-block;
background-color: #4fb16a;
padding: 3px 20px 3px 12px;
border-radius: 20px;
position: relative;
text-align: center;
margin: 5px 0 15px;
font-weight: bold;
font-size:1.4rem!important;
}
#gFooter .fInner .fNavi li .tel {
margin: 0 2px 2px 2px;
font-weight: bold;
font-size:1.6rem;
}
#gFooter .fInner .fNavi li .bgTxt span {
padding: 3px 15px;
display: inline-block;
text-align: center;
border: 1px solid #fff;
background: #fff;
border-radius: 15px;
font-weight: bold;
font-size: 1.6rem;
}
}
/*フローティングバナー*/
.floating-bnr.bnr01 {
display: none;
position: fixed;
bottom: 140px;
right: 10px;
width: 115px;
max-width: 90vw;
height: auto;
z-index: 9999;
}
.floating-bnr a:hover {
opacity: 0.7;
transition: 0.2s;
}
/*閉じるボタン*/
.bnr_close {
background-color: #f8f8f8;
border: none;
border-radius: 25px;
box-shadow: 0 0 7px rgb(0, 0, 0, 0.4);
color: #777;
cursor: pointer;
font-weight: bold;
position: absolute;
right: -4px;
top: -5px;
}
.fa-xmark:before {
content: "\f00d";
font-family: "Font Awesome 5 Free";
font-style: normal;
}
@media(max-width: 767px){
/*フローティングバナー*/
.floating-bnr.bnr01 {
display: none;
position: fixed;
bottom: 80px;
right: 10px;
width: 100px;
max-width: 90vw;
height: auto;
z-index: 9999;
}
}
/*新ヘッダー*/
#gHeaderBox { width: 1045px; margin: 0 auto; }
#gHeader .hBox {
width: 1045px;
margin: 10px auto 0;
padding-left: 0;
box-sizing: border-box;
}
#gHeader {
width: 100%;
position: fixed !important;
left: 0;
top: 0;
border-bottom: none;
background-color: #fff;
z-index: 1000;
height: 110px;
}
#gHeader .hBox h1 {
margin: 12px 0 0 0px;
float: left;
}
#gHeader .hBox h1 img {
width: 166px!important; margin: 0 0 0 0!important;
}
#gHeader .hBox .hLink { margin-top: 10px; height: 65px; float: right;
}
#gHeader .hBox .hLink li { border-left:1px solid #00a946;
width: auto !important;
float: left;
text-align: center;
height: 80px;
}
#gHeader .hBox .hLink li.line_r {border-right:1px solid #00a946; border-left: none;
width: auto !important;
float: left;
text-align: center;}
#gHeader .hBox .hLink li.no_line { border-left: none; min-height: auto;}
#gHeader .hBox .hLink li .img img {
width: 40px;
margin: 7px 10px 7px;
height: auto;
}
#gHeader .hBox .hLink li .img img.imgLine2 {
width: 40px;
margin: 0px 0 0 0;
height: auto;
}
#gHeader .hBox .hLink li p { margin: 0 0 10px 0;}
#gHeader .hBox .hLink li p.navTxt1 { padding: 5px 0 0 0;}
#gHeader .hBox .hLink li p.navTxt2 { padding: 5px 0 0 0;}
#gHeader .hBox .hLink li a {
padding: 5px 10px 4px;
min-height: auto;
display: block;
box-sizing: border-box;
}
#gHeader .hBox .hLink li a.login { margin-left: 5px; margin-right: 5px;}
#gHeader .hBox .hLink li:last-child a {
padding: 0 0 0;
margin: 5px 15px 7px;
min-height: auto;
display: block;
box-sizing: border-box;
}
#gHeader .hBox .hLink li a p span span {color: #00a946!important;}
#gHeader .hBox .hLink li:last-child .img img {
width: 40px;
height: auto;
}
#gHeader .hBox .hLink li:last-child p {
color: #fff!important;
font-size: auto!important;
display: block!important;
background-color: #00a946;
border-radius: 10px;
padding-bottom: 3px;
}
#gHeader .hBox .hLink li:last-child {
width: auto;
height: 80px;
}
#gHeader .hBox .hLink li:last-child p span span { color: #fff!important;}
#gNavi > ul > li:before {
border-right: none;
/*position: relative;*/
right: 0;
top: 50%;
height: 21px;
content: "";
transform: translate(0, -50%);
}
#gNavi {
margin-top: 21px;
margin-right: 15px;
float: right;
}
#gNavi li.liStyle01 span.hd_tel_text02 {
position: relative;
top: 5px;
left:0;
font-size: 1.3rem;
color: #666666;
}
#hdnav01 { background-color: #aa3241; margin: 115px 0 0 0;}
#hdnav01_box { width: 1045px; margin: 0 auto;}
#hdnav01 ul.hdnav01 li { display: inline-block; padding: 15px 10px; font-size: 16px;}
#hdnav01 ul.hdnav01 li a { color: #fff;}
#hdnav01 ul.hdnav01 li a:hover { text-decoration: underline;}
#hdnav01 ul.hdnav01 { float: left;}
.hd_searchBox { float: right;}
#search-box { width: 230px; height: 40px;}
.hd_searchBox ul { padding: 0; margin: 0;}
.hd_searchBox div { display: inline-block; padding: 0; font-size: 16px;}
.hd_searchBox .inputTxt01 { margin-bottom: 10px; margin-top: 0;}
.inputImg01 { padding-p: 8px; margin-bottom: -13px; margin-left: 5px;}
#gNavi02 {
width: 100%;
background-color: #ebebeb;
}
#gNavi02 ul { width: 1045px; margin: 0 auto;}
#gNavi02 ul li:first-child {border-left: 1px solid #fff;}
#gNavi02 ul li:last-child {border-right: 1px solid #b9b9b9;}
#gNavi02 ul li a {
display: block;
background-color: #ebebeb;
padding: 14px 25px;
font-weight: bold;
border-right: 1px solid #fff;
border-left: 1px solid #b9b9b9;
font-size: 15px;
}
#gNavi02 ul li a.long-n {
padding: 14px 20px;
}
a.mainLink01 {
color: #00a946;
display: inline-block;
background-color: #fff;
padding: 13px 40px 13px 40px;
border-radius: 28px;
border: 1px solid #00a946;
/*position: absolute;*/
text-align: center;
margin: 5px 0 80px 80px;
font-weight: bold;
font-size: 22px;
letter-spacing: 3px;
width: 600px;
/* bottom: 80px;
left: 93px;*/
/*top: 1130px;
left: 180px;*/
}
a.mainLink01g {
color: #00a946;
display: inline-block;
background-color: #fff;
padding: 13px 40px 13px 40px;
border-radius: 28px;
border: 1px solid #00a946;
/*position: absolute;*/
text-align: center;
margin: 5px 0 50px 80px;
font-weight: bold;
font-size: 22px;
letter-spacing: 3px;
width: 540px;
/* bottom: 80px;
left: 93px;*/
/*top: 1130px;
left: 180px;*/
}
a.mainLink01r {
color: #d0121b;
display: inline-block;
background-color: #fff;
padding: 13px 40px 13px 40px;
border-radius: 28px;
border: 1px solid #d0121b;
/*position: absolute;*/
text-align: center;
margin: 5px 0 80px 80px;
font-weight: bold;
font-size: 22px;
letter-spacing: 3px;
width: 540px;
/* bottom: 80px;
left: 93px;*/
/*top: 1130px;
left: 180px;*/
}
a.mainLink01:hover { opacity: 0.7;}
.mainExpMain01 { color: #fff; font-size: 66px; margin: -950px 0 350px 80px; font-weight: bold;}
.mainImgBox { width: 1112px; margin: -12px auto 0;}
.mainBnrBox { width: 1112px; margin: 20px auto 0;}
.mainImgBox .mainExpTxt01 { width: 608px; font-size: 18px;
margin: -600px 0 390px 80px;
line-height: 180%;
/*position: absolute ; */
/*top: 370px;*/
/*top: 600px;*/
/*left: 78px;*/
/*left: 178px;*/
}
.mainCateBox { width: 1112px; margin: 0 auto; background-color: #f8f8f8; text-align: center;}
.caTeTtl { color: #00a946; text-align: center; padding-top: 40px; text-align: center; font-size: 30px; font-weight: bold; letter-spacing: 1px;}
.top_arrow01 { padding: 10px 0 10px;}
.top_cateUL01 a { display: block; border: 1px solid #00a946;border-radius: 14px; width: 298px; color: #00a946; background-color: #fff; }
.top_cateUL01 a span { display: block; font-size: 150%; padding: 10px 0; font-weight: bold;}
.top_cateUL01 li { display: inline-block; margin: 14px;}
.top_cateUL02 { padding: 0 0 50px 0;}
.top_cateUL02 a { display: block; border: 1px solid #00a946;border-radius: 14px; width: 220px; color: #00a946;background-color: #fff; }
.top_cateUL02 a span { display: block; font-size: 150%; padding: 10px 0; font-weight: bold;}
.top_cateUL02 li { display: inline-block; margin: 10px;}
.top_cateUL02 a:hover { opacity: 0.7;}
.top_cateUL03 { padding: 0 0 60px 0;}
.top_cateUL03 a { display: block; border: 1px solid #00a946; border-radius: 14px; width: 298px; color: #00a946; background-color: #fff; }
.top_cateUL03 a.longLine { width: 380px; }
.top_cateUL03 a span { display: block; font-size: 150%; padding: 15px 5px 18px; font-weight: bold;}
.top_cateUL03 li { display: inline-block; margin: 10px;}
.top_cateUL03 a:hover { opacity: 0.7;}
.top_cateUL03 a img { float: left; padding: 5px 0 5px 15px;}
.top_cateUL03 a.longName img { padding: 5px 0 5px 8px!important;}
.mainCateBox_line { width: 950px; border-bottom: 1px solid #d0ebd9; margin: 0 auto;}
.mainProBox { width: 1112px; margin: 0 auto; background-color: #f8f8f8; text-align: center;}
.mainOsusumeBox { width: 1112px; margin: 30px auto; text-align: center;}
.top_OsusumeUL01 { padding: 0 0 30px 10px; text-align: left;}
.top_OsusumeUL01 a { display: block; border: 1px solid #fc880c; border-radius: 14px; width: 508px; height: 250px; color: #4B4B4B; background-color: #fff; margin: 10px;}
.top_OsusumeUL01 a .o_catch01 { display:inline-block; font-size: 130%; padding: 15px 0 10px 10px; width: 47%; }
.top_OsusumeUL01 a .o_proname { display: inline-block; font-size: 165%; border-bottom: 1px solid #4B4B4B; width: 45%; line-height: 140%; font-weight: bold; margin-left: 10px; white-space: nowrap; letter-spacing: -1px;}
.top_OsusumeUL01 a .o_proname.name_s { font-size: 147%; }
.top_OsusumeUL01 a .o_price { display: block; font-size: 150%; padding: 5px 0 10px 10px;display:inline-block; width: 45%; }
.top_OsusumeUL01 a .o_price span { font-size: 70%;}
.top_OsusumeUL01 a .o_more { display: inline-block; color: #fc880c; width: 47%; text-align: right;}
.top_OsusumeUL01 a .o_more img { float: right; margin: -7px 1px 0 0!important; width:26px;}
.top_OsusumeUL01 li { display: block; margin: 0 10px 0; float: left; }
.top_OsusumeUL01 a:hover { opacity: 0.7;}
.top_OsusumeUL01 a img { float: left; padding: 7px 0 7px 7px; width: 260px;}
.top_OsusumeUL01 a img.img_right { float: right; padding: 7px 7px 7px 10px;}
.touch-btn {
color: #00a946;
position: absolute;
top: 20px;
right: 5%;
/* display: block;*/
z-index: 10;
text-align: center;
vertical-align: middle;
vertical-align: middle;
color: #00a946!important;
line-height: 1;
width: 8px;
height: 8px;
border: 0.1em solid currentColor;
border-left: 0;
border-bottom: 0;
box-sizing: border-box;
transform: translateY(-25%) rotate(135deg);
}
@media(max-width: 767px){
div.ms-site-container > .container .main {
max-width: 100%;
margin-left: 2%!important;
margin-right: 2%!important;
}
#gNavi02 ul li:first-child {border-left: none;}
#gNavi02 ul li:last-child {border-right: none;}
#gNavi02 ul li a {
display: block;
background-color: #3399ff;
padding: 0;
font-weight: bold;
/*border-right: 1px solid #b9b9b9;*/
border-left: none;
font-size: 15px;
color: #fff!important;
width: 100%;
}
#gNavi02 ul li:first-child a{border-left: none;}
#gNavi02 ul li:last-child a{border-right: none;}
#gNavi02 ul { width: 100%!important; border-bottom: 1px solid #fff; }
#gNavi02 ul li a {
padding: 11px 0;
}
#gNavi02 ul li a.long-n {
padding: 10px 0!important;
}
#gNavi02 ul li a.line2 { padding: 3.2px 0;
}
#gNavi02 ul li {
list-style: none;
display: inline-block;
text-align: center;
margin: 0;
padding: 0;
vertical-align: middle;
border-right: none;
background-color: #f0f1f1;
width: 25%!important;
}
#pagePath {
width: 100%!important;
margin: 16px auto 19px;
}
.cate_expBox .cate_mainImg {
background-color: #f7f5f0;
text-align: center;
margin: 0 auto 0!important;
width: auto;
}
#gHeader {
height: 72px;
}
#gHeader .hBox h1 img {
width: 350px!important; margin: 0 0 0 0!important;
}
.hd_searchBox {
float: none;
}
.inputTxt01 { width: 100%;}
.sp_searchBar { background-color: #DFDFDF; height: auto; padding: 6px 8px 6px 8px;}
.sp_hd_cate { float: right; width: 0; margin: 0 5px 0 0;}
.sp_searchBar .inputImg01 { width: 16%; margin: 3px 0 -9px 0; float: right; }
.searchInput { margin: -2px 0 0 0; }
#search-box {
width: 79%;
height: 40px;
/*position: absolute;*/
margin: 2px 0 0 0;
}
#hdnav01_box { width: 100%; margin: 0 auto;}
.mainImgBox { width: 100%; margin: 0 auto 0;}
.mainBnrBox { width: 100%; margin: 20px auto 0;}
.mainImgBox .mainExpTxt01 { width: 90%; font-size: 16px; margin: 0 5% 5%; line-height: 180%; position: static;}
#gHeaderBox { width: 100%; }
a.mainLink01 {
color: #00a946;
display: inline-block;
background-color: #fff;
padding: 13px 20px 13px 5px;
border-radius: 28px;
border: 1px solid #00a946;
position: absolute;
text-align: center;
margin: 5px 0;
font-weight: bold;
font-size: 15px;
letter-spacing: 0;
margin-left: 10%;
margin-bottom: 20px;
width: 80%;
position: static;
}
a.mainLink01g {
color: #00a946;
display: inline-block;
background-color: #fff;
padding: 13px 20px 13px 5px;
border-radius: 28px;
border: 1px solid #00a946;
position: absolute;
text-align: center;
margin: 5px 0;
font-weight: bold;
font-size: 15px;
letter-spacing: 0;
margin-left: 10%;
margin-bottom: 20px;
width: 80%;
position: static;
}
a.mainLink01r {
color: #d0121b;
display: inline-block;
background-color: #fff;
padding: 13px 20px 13px 5px;
border-radius: 28px;
border: 1px solid #d0121b;
position: absolute;
text-align: center;
margin: 5px 0;
font-weight: bold;
font-size: 15px;
letter-spacing: 0;
margin-left: 10%;
margin-bottom: 20px;
width: 80%;
position: static;
}
.mainCateBox { width: 100%; margin: 0 auto; background-color: #f8f8f8; text-align: center;}
.caTeTtl { color: #00a946; text-align: center; padding-top: 40px; text-align: center; font-size: 20px; font-weight: bold; letter-spacing: 1px;}
.top_cateUL01 a { display: block; border: 1px solid #00a946;border-radius: 7px; width:100%; color: #00a946; background-color: #fff; }
.top_cateUL01 a span { display: block; font-size: 110%; padding: 10px 0; font-weight: bold;}
.top_cateUL01 li { display: inline-block; margin: 3px; width: 30%!important;}
.top_cateUL02 { padding: 0 0 40px 0;}
.top_cateUL02 a { display: block; border: 1px solid #00a946;border-radius: 7px; width: 100%; color: #00a946;background-color: #fff; }
.top_cateUL02 a span { display: block; font-size: 110%; padding: 10px 0; font-weight: bold;}
.top_cateUL02 li { display: inline-block; margin: 3px; width: 30%!important;}
.top_cateUL02 li.shingu { width: 40%!important;}
.top_cateUL02 a:hover { opacity: 0.7;}
.top_cateUL03 { padding: 0 0 40px 0;}
.top_cateUL03 a { display: block; border: 1px solid #00a946; border-radius: 7px; width: 98%; color: #00a946; background-color: #fff; padding: 0 2% 0 0; }
.top_cateUL03 a span { display: block; font-size: 110%; padding: 12px 0 13px; font-weight: bold;}
.top_cateUL03 li { display: inline-block; margin: 3px; width: 45%!important;}
.top_cateUL03 a.longLine { width: 100%!important; }
.top_cateUL03 a:hover { opacity: 0.7;}
.top_cateUL03 a img { float: left; padding: 5px 0 5px 5px; width: 23%;}
.top_cateUL03 a.longName span{ font-size: 95%; padding: 13px 0 14px;}
.top_cateUL03 a.longName img { padding: 5px 0 5px 3px!important;}
.top_cateUL03 a.longLine img { float: left; padding: 13px 0 5px 5px; width: 23%;}
.mainCateBox_line {
width: 100%;
border-bottom: 1px solid #d0ebd9;
margin: 0 auto;
}
.mainOsusumeBox { width: 100%; margin: 30px auto; text-align: center;}
.top_OsusumeUL01 { padding: 0 0 30px 0; text-align: left;}
.top_OsusumeUL01 a { display: block; border: 1px solid #fc880c; border-radius: 14px; width: 95%; height: auto; color: #4B4B4B; background-color: #fff; margin: 10px; padding: 5px;}
.top_OsusumeUL01 a .o_catch01 { display:inline-block; font-size: 105%; padding: 5px 0 8px 10px; width: 49%; }
.top_OsusumeUL01 a .o_proname { display: inline-block; font-size: 120%; border-bottom: 1px solid #4B4B4B; width: 45%; line-height: 140%; font-weight: bold; margin-left: 10px;}
.top_OsusumeUL01 a .o_proname.name_s { font-size: 120%; }
.top_OsusumeUL01 a .o_price { display: block; font-size: 140%; padding: 5px 0 10px 10px;display:inline-block; width: 45%; }
.top_OsusumeUL01 a .o_price span { font-size: 70%;}
.top_OsusumeUL01 a .o_more { display: inline-block; color: #fc880c; width: 47%; text-align: right;}
.top_OsusumeUL01 a .o_more img { float: right; margin: -6px 1px 0 0!important; width: 12%!important;}
.top_OsusumeUL01 li { display: block; margin: 0 10px 0; float: left; }
.top_OsusumeUL01 a:hover { opacity: 0.7;}
.top_OsusumeUL01 a img { float: left; padding: 5px 0 5px 5px; width: 50%!important;}
.top_OsusumeUL01 a img.img_right { float: right; padding: 5px 5px 5px 10px;}
#gHeader .hList {
width: 50%;
position: absolute;
right: 45px;
top: 14px;
/* border-left: 2px solid #EFEFEF; */
box-sizing: border-box;
}
#gHeader .hList li {
width: 23%;
padding: 0 1%;
}
#gHeader {
padding: 8px 0 0;
border-bottom: none;
}
.container {
width: 100%;
padding-right: 0px;
padding-left: 0px;
margin-right: auto;
margin-left: auto;
}
}
/* ドロワーメニュー */
.drawer_menu a {
color: inherit;
text-decoration: none;
}
.drawer_menu a:visited {
color: inherit;
}
/* PC用ナビゲーション */
.drawer_menu .drawer_nav_wrapper {
transform: translate(0);
width: 100%;
height: 50px;
/* PC用メニュー高さ */
position: relative;
top: auto;
right: auto;
z-index: 100;
background-color: #3399ff;
/* PC用メニュー背景色 */
margin: 115px 0 0 0;
}
.drawer_menu .drawer_nav {
max-width: 1045px;
/* コンテンツ幅に合わせる */
padding: 0;
margin: 0 auto;
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
justify-content: center;
list-style-type: none;
}
.drawer_menu .drawer_nav li {
font-size: 15px;
margin: 0;
padding: 0;
width: 75%;
height: 50px;
/* PC用メニュー高さ */
line-height: 50px;
/* PC用メニュー高さ */
background-color: #3399ff;
/* PC用メニューボタン背景色 */
text-align: center;
list-style-type: none;
}
.drawer_menu .drawer_nav .second-level li {
font-size: 16px;
margin: 0;
padding: 0;
width: 75%;
height: 50px;
/* PC用メニュー高さ */
line-height: auto;
/* PC用メニュー高さ */
background-color: #fff!important;
/* PC用メニューボタン背景色 */
text-align: center;
list-style-type: none;
}
.drawer_menu .drawer_nav li.about{ width: 120%;}
.drawer_menu .drawer_nav li.about span{ color: #fff;}
.drawer_menu .drawer_nav li.search_input { width: 210%;}
.drawer_menu .drawer_nav li:hover {
/* PC用メニューボタンマウスオーバー背景色 */
}
.drawer_menu .drawer_nav li a {
color: #fff;
/* PC用メニューボタン文字色 */
}
/* PC非表示 */
@media screen and (min-width:768px) {
.pc-hidden {
display: none;
text-align: center;
}
}
@media screen and (min-width: 768px) {
/* ドロップダウンメニュー2階層目 */
.drawer_menu .drawer_nav li ul.second-level {
visibility: hidden;
list-style-type: none;
position: absolute;
z-index: -1;
top: 0;
margin: 0;
padding-left: 0;
}
.drawer_menu .drawer_nav li:hover ul.second-level {
visibility: visible;
z-index: 1;
top: 50px;
/* PC用メニューの高さに合わせる */
transition: all .3s;
border: 1px solid #aa3241;
}
.drawer_menu .drawer_nav li:hover ul.second-level li {
width: 180px;
/* ドロップダウンメニューボタン横幅 */
height: auto;
/* Pドロップダウンメニューボタン高さ */
text-align: center;
position: relative;
}
.drawer_menu .drawer_nav li:hover ul.second-level li a {
display: block;
background-color: #fff;
/* ドロップダウンメニューの文字の背景色 */
color: #3d3d3d;
/* ドロップダウンメニューの文字色 */
font-size: 100%;
text-decoration: none;
line-height: 110%!important;
/* Pドロップダウンメニューボタン高さ */
text-align: center;
height: auto;
padding: 15px 10px 15px 10px;
text-align: left;
border-bottom: 1px dotted #aa3241;
vertical-align: middle;
}
.drawer_menu .drawer_nav li:hover ul.second-level li a:hover {
background-color: #fff;
opacity: 0.8;
/* ドロップダウンメニューマウスホバー背景色 */
}
.drawer_menu .drawer_nav li:hover ul.second-level li:after {
content: '';
width: 6px;
height: 6px;
border: 0;
border-bottom: solid 1px #aa3241;
border-right: solid 1px #aa3241;
transform: rotate(-45deg);
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: -150px;
margin: auto;
}
.touch-btn {
color: #fff;
margin-left: 5px;
}
}
/*+++ Default Button Color +++*/
.drawer_menu .drawer_button {
color: #4b4b4b;
/* ハンバーガーメニュー文字色 */
display: none;
}
.drawer_menu .drawer_button .drawer_bar {
background-color: #4b4b4b;
/* ハンバーガーメニュー三本線の色 */
}
.drawer_menu .drawer_nav li.about .about_ttl { padding-left: 0; font-size: 100%; font-weight: normal; display: inline-block;}
.drawer_menu .drawer_nav li.about .about_ttl .arrow-bottom {
display: inline-block;
width: 7px;
height: 7px;
margin: 19px 10px 0;
border-bottom: 1px solid #fff;
border-right: 1px solid #fff;
transform: rotate(45deg);
float: right;
}
/* 767px以下 */
@media screen and (max-width: 767px) {
.drawer_menu .drawer_nav li.about span{ color: #4b4b4b;}
.drawer_menu .drawer_bg {
width: 100%;
height: 100%;
position: fixed;
z-index: 999;
background-color: rgba(51, 51, 51, 0.5);
display: none;
top: 0;
left: 0;
}
.drawer_menu .drawer_button {
display: block;
background-color: #fff;
color: #4b4b4b;
border: none;
padding: 5px;
width: 55px;
cursor: pointer;
position: fixed;
top: 5px;
right: 10px;
z-index: 1001;
text-align: center;
outline: none;
}
.drawer_menu .drawer_button.active .drawer_bar {
width: 36px;
}
.drawer_menu .drawer_button.active .drawer_bar1 {
transform: rotate(35deg);
}
.drawer_menu .drawer_button.active .drawer_bar2 {
opacity: 0;
}
.drawer_menu .drawer_button.active .drawer_bar3 {
transform: rotate(-35deg);
}
.drawer_menu .drawer_button.active .drawer_menu_text {
display: none;
}
.drawer_menu .drawer_button.active .drawer_close {
display: block;
}
.drawer_menu .drawer_bar {
display: block;
height: 2px;
margin: 8px 8px;
transition: all 0.2s;
transform-origin: 0 0;
}
.drawer_menu .drawer_text {
text-align: center;
font-size: 10px;
}
.drawer_menu .drawer_close {
letter-spacing: 0.08em;
display: none;
}
.drawer_menu .drawer_menu_text {
display: block;
}
.drawer_menu .drawer_nav_wrapper {
width: 325px;
height: auto;
transition: all 0.2s;
transform: translate(325px);
position: fixed;
top: 12px;
right: 0;
z-index: 1000;
background-color: #FFF;
/* ドロワーメニュー内背景色 */
overflow-x: hidden;
overflow-y: auto;
margin: 60px 0 0 0!important;
}
.drawer_menu .drawer_nav {
display: block;
position: relative;
margin-top: 10px;
}
.drawer_menu .drawer_nav li {
background-color: #fff;
height: auto;
line-height: 50px;
/* ドロワーメニューリスト項目高さ */
position: relative;
border-bottom: 1px solid #4b4b4b;
width: 100%;
}
.drawer_menu .drawer_nav li a {
background-color: #fff;
/* ドロワーメニューリスト背景色 */
color: #555;
/* ドロワーメニューリスト文字色 */
display: block;
text-align: left;
padding-left: 20px;
}
/* スマートフォン2階層目 */
.drawer_menu .drawer_nav .second-level li {
font-size: 16px;
margin: 0;
padding: 0;
width: 100%!important;
height: 50px;
/* PC用メニュー高さ */
line-height: auto;
/* PC用メニュー高さ */
background-color: #fff!important;
/* PC用メニューボタン背景色 */
text-align: center;
list-style-type: none;
}
.drawer_menu .drawer_nav li:hover ul.second-level {
display: block;
}
.drawer_menu .drawer_nav li ul.second-level {
display: none;
position: relative;
padding: 0;
z-index: 1001;
background-color: #e8f7ee;
}
.drawer_menu .drawer_nav li ul.second-level li a {
padding-left: 0;
background-color: #e8f7ee;
padding-left: 20px;
}
.drawer_menu .drawer_nav_wrapper.open {
transform: translate(0);
}
.drawer_menu.left .drawer_button {
right: auto;
left: 32px;
}
.drawer_menu.left .drawer_nav_wrapper {
transform: translate(-325px);
right: auto;
left: 0;
}
.drawer_menu.left .drawer_nav_wrapper.open {
transform: translate(0);
}
.pc-hidden {
text-align: center;
}
.touch-btn {
color: #00a946;
position: absolute;
top: 20px;
right: 5%;
/* display: block;*/
z-index: 10;
text-align: center;
vertical-align: middle;
vertical-align: middle;
color: #00a946!important;
line-height: 1;
width: 8px;
height: 8px;
border: 0.1em solid currentColor;
border-left: 0;
border-bottom: 0;
box-sizing: border-box;
transform: translateY(-25%) rotate(135deg);
}
.touch-btn2 {
color: #00a946;
position: absolute;
top: 22px;
right: 5%;
/* display: block;*/
z-index: 10;
text-align: center;
vertical-align: middle;
color: #00a946!important;
line-height: 1;
width: 8px;
height: 8px;
border: 0.1em solid currentColor;
border-left: 0;
border-bottom: 0;
box-sizing: border-box;
transform: translateY(-25%) rotate(45deg);
}
.drawer_menu .drawer_nav li.about{ width: 100%; text-align: left; }
.drawer_menu .drawer_nav li.about .about_ttl { padding-left: 20px; font-size: 105%; font-weight: bold; }
.drawer_menu .drawer_nav li.about ul li { border-bottom: 1px dotted #333!important;}
.drawer_menu .drawer_nav li.about ul li:first-child{ border-top: 1px dotted #333;}
.drawer_menu .drawer_nav li.about ul li:nth-child(2), .drawer_menu .drawer_nav li.about ul li:nth-child(3) { border-top: 1px dotted #333;}
.drawer_menu .drawer_nav li.about ul li:last-child { border-top: 1px dotted #333;}
.drawer_menu .drawer_nav li.about ul {border-bottom: 1px solid #333!important;}
}
/* ウィジェットタイトル */
.drawer-title {
text-align: center;
width: 100%;
height: 50px;
line-height: 50px;
background-color: #555;
/* ドロワーメニュー内タイトルライン背景色 */
color: #fff;
}
/* フォローボタン */
.follow-buttons {
text-align: center;
margin-top: 0;
width: 100%;
}
.follow-buttons a {
display: inline-block;
width: 60px;
text-align: center;
text-decoration: none;
margin: 5px;
}
.follow-buttons .inner-text {
font-size: 10px;
display: block;
}
.follow-buttons .lg,
.content-inner-follow-buttons .fa {
padding: 15px;
border-radius: 5px;
margin: 2px auto;
}
.follow-buttons .hatena {
color: #38393C;
background-color: transparent;
}
.follow-buttons .blogicon-hatenablog {
background: #38393C;
color: #ffffff;
}
.follow-buttons .blogicon-hatenablog:hover {
background: #5F6063;
}
.follow-buttons .facebook {
color: #305097;
background-color: transparent;
}
.follow-buttons .blogicon-facebook {
background: #305097;
color: #ffffff;
}
.follow-buttons .blogicon-facebook:hover {
background: #5A77B7;
}
.follow-buttons .twitter {
color: #55acee;
background-color: transparent;
}
.follow-buttons .blogicon-twitter {
background: #55acee;
color: #ffffff;
}
.follow-buttons .blogicon-twitter:hover {
background: #89C7F7;
}
.follow-buttons .instagram {
color: #D93177;
background-color: transparent;
}
.follow-buttons .blogicon-instagram {
background: #D93177;
color: #ffffff;
}
.follow-buttons .blogicon-instagram:hover {
background: #df528d;
}
.follow-buttons .feedly {
color: #6cc655;
background-color: transparent;
}
.follow-buttons .blogicon-rss {
background: #6cc655;
color: #ffffff;
}
.pc-hidden .profile-icon {
float: none;
}
/*ipadmini 崩れ対応*/
@media (min-width: 444px) and (max-width: 540px) {
#gHeader .hList{ width: 40%;}
.searchInput {margin: -10px 0 0 0;}
.sp_searchBar .inputImg01{margin:10px 0 -15px 0;}
}
/* カラー変更 上書き */
/*.caTeTtl { color: #df2d2d!important; }
.top_cateUL01 a, .top_cateUL02 a, .top_cateUL03 a { border: 1px solid #df2d2d!important; color: #df2d2d!important;}
#gHeader .hBox .hLink li a p span span { color: #df2d2d !important; }
#gHeader .hBox .hLink li{border-left:1px solid #df2d2d !important;}
#gHeader .hBox .hLink li.line_r {border-right:1px solid #df2d2d !important; border-left: none!important; }
#gHeader .hBox .hLink li.no_line {border-left: none!important;}
#gHeader .hBox .hLink li:last-child p {background-color: #df2d2d !important;}
.mainCateBox_line {border-bottom: 1px solid #ffc3c3;}
@media all and (max-width: 767px) {
}*/
/*ヘッダー固定
#hd_container{
position: fixed;
top: 160px;
width:100%;
z-index: 1000;
}
.drawer_menu .drawer_nav_wrapper {position: fixed; margin:0 0 0 0; top: 110px; z-index: 10001;}
.main{ margin-top: 235px!important;}
.mainImgBox {
width: 1112px;
margin: 202px auto 0;
position: relative;
}
@media (max-width: 767px) {
.main{ margin-top: 205px!important;}
.sp_searchBar{
margin-top: 0!important;
position: fixed;
top: 72px;
width: 100%;
height: auto;
z-index: 1000;
padding: 6px 8px 4px 8px;
height: 54px;
}
#hd_container{
position: fixed;
top: 125px;
overflow-x: scroll;
width:100%;
z-index: 1000;
}
.mainImgBox {
width: 100%;
margin: -12px auto 0;
}
#main{ margin-top: 184px!important;}
.drawer_menu .drawer_nav_wrapper {z-index: 10001; margin-top: -40px !important;}
}*/