@charset "UTF-8";

/* CSS Remedy */
*,::after,::before{box-sizing:border-box}html{line-sizing:normal}body{margin:0}[hidden]{display:none}h1{font-size:3.2rem}h2{font-size:2.6rem;text-align: center;margin: 4rem 1rem;}h3{font-size:1.8rem}h4{font-size:1.6rem}h5{font-size:.83rem}h6{font-size:.67rem}h1{margin:.67em 0}pre{white-space:pre-wrap}hr{border-style:solid;border-width:1px 0 0;color:inherit;height:0;overflow:visible}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle;max-width:100%}audio:not([controls]){display:none}picture{display:contents}source{display:none}canvas,img,svg,video{height:auto}audio{width:100%}img{border-style:none}svg{overflow:hidden}article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0;}ul,li,dl,dt,dd,p,a {margin: 0;padding: 0;}:focus {outline: none;}
/*フォーム
–––––––––––––––––––––––––––––––––––––––––––––––––– */
::placeholder,textarea, .btn_li input, .btn input, .btn2 input {
    font-family: "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, arial, helvetica, sans-serif;
    font-size: 1.6rem;
    color: #bbb;
}
input, select {-webkit-appearance: none;border-radius: 0;border: 1px solid #c7d5df;padding: 1rem 0.5rem;font-size: 1.6rem;font-family: "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, arial, helvetica, sans-serif;background: #f5f7f9;}
#member input, #member select {font-size: 1.6rem;}
select {background: #f5f7f9 url(../img/ico_arrow.svg) 97% center no-repeat;background-size: 13px 13px;padding-right: 2rem;}
input[type="text"], input[type="password"] {width: 100%;}
.login_bx input[type="text"], input[type="password"] {font-size: 1.6rem;}
input[type="file"] {background: #fff;border: 1px solid;font-size: 1.4rem;width: 100%;}
input[type="button"], select {cursor: pointer;}
#member .fbtn01, .fbtn01 {background: #88aa8e; border-radius: 2rem; font-size: 1.2rem; color: #fff;}
#member .fbtn01:hover, .fbtn01:hover {background: #222;}
/* ラジオボタン */
input[type=radio] {
    display: none;
}
.radio01 {
    box-sizing: border-box;
    cursor: pointer;
    display: inline-block;
    padding: 5px 30px;
    position: relative;
    width: auto;
}
.radio01::before {
    background: #fff;
    border: 1px solid #231815;
    border-radius: 50%;
    content: '';
    display: block;
    height: 18px;
    left: 5px;
    margin-top: -8px;
    position: absolute;
    top: 47%;
    width: 18px;
}
.radio01::after {
    background: #88aa8e;
    border-radius: 50%;
    content: '';
    display: block;
    height: 10px;
    left: 9px;
    margin-top: -4px;
    opacity: 0;
    position: absolute;
    top: 47%;
    width: 10px;
}
input[type=radio]:checked + .radio01::after {
    opacity: 1;
}

/* 全体の設定
–––––––––––––––––––––––––––––––––––––––––––––––––– */
html {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    font-size: 62.5%;
}

body {
    color: #222;
    font-family: "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, arial, helvetica, sans-serif;
    font-weight: 500;
    background: #fff;/*#FBFAF4;*/
    font-size: 1.4rem;
    line-height: 1.5;
    margin:0;
    padding:0;
}
button {
    font-family: "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, arial, helvetica, sans-serif;
}
img {
    max-width:100%;
    height: auto;/*高さ自動*/
    -webkit-backface-visibility: hidden;
    /*image-rendering: -webkit-optimize-contrast;*/
    vertical-align: bottom;
}
a {
    display:block;
    color: #222;
    text-decoration-line: none;
}
a:hover, .btn input:hover, .btn2 input:hover, .btn_att input:hover, .fbtn01:hover, input:hover {
    color: #BEAA69;
    -webkit-transition: 0.3s ease-in-out;
    -moz-transition: 0.3s ease-in-out;
    -o-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out;
}
a img:hover {
    opacity: 0.7;
    filter: alpha(opacity=70);
    -moz-opacity: 0.7;
    -webkit-transition: 0.6s ease-in-out;
    -moz-transition: 0.6s ease-in-out;
    -o-transition: 0.6s ease-in-out;
    transition: 0.6s ease-in-out;
}
::selection{background: #ffff9e; color: #222;}
::-moz-selection{background: #ffff9e; color: #222;}

#wrap {
    padding-top: 121px;
    display: -webkit-flex;
    display: flex;
    flex-flow: row-reverse;
    }
a.link01 {display: initial;text-decoration: underline;}
a.link01:hover {text-decoration: none;}
/*レフトナビ-----------------------------*/
nav {
    min-width: 240px;
    width: 15%;
    height: 100%;
    background: #fff;
    padding: 2rem 4rem 2rem 8rem;
    position: sticky;
    position: -webkit-sticky;
    margin-bottom: 0;
    z-index: 1;
}
#nav_input {
  display:none;
}
nav dl dt {
    font-size: 1.6rem;
    margin-bottom: 2rem;
}
nav dl dt span {
    font-size: 1.0rem;
    color: #BEAA69;
    display: block;
}
nav dl {
    margin-bottom: 6rem;
}
nav ul li {
    margin-bottom: 0.5rem;
}
nav .sp_menu, nav .sp_search {width: calc(100% + 8rem);margin-left: -6rem;margin-bottom: 4rem;}

    nav .sp_search input[type="search" i] {
        border: none;
        border-bottom: 1px solid #000;
        padding: 5px 0;
        outline: none;
        width: 90%;
        appearance: none;
        -webkit-appearance: none;
        border-radius: 0;
        font-size: 1.4rem;
    }
    #nav_content .sp_search label {
        position: relative;
    }
    #nav_content .sp_search label input {
        display: none;
    }
    #nav_content .sp_search label:after {
        position: absolute;
        content: '';
        background: url(../img/ico_search.svg) right center no-repeat;
        width: 30px;
        height: 25px;
        cursor: pointer;
    }
nav .sp_menu li {border-bottom: 1px solid;padding: 10px;position: relative; }
nav .sp_menu li:after {content: '';width: 8px;height: 8px;border-top: solid 1px;border-right: solid 1px;position: absolute; top: 50%;right: 15px;margin-top: -4px;transform: rotate(45deg);}
.toggle dt {position: relative; cursor: pointer;}
.toggle dt:before, .toggle dt:after {
  display: block;
  content: '';
  background: #222;
  border-radius: 10px;
  position: absolute;
  width: 13px;
  height: 1px;
  top: 10px;
  right: 0;
}
.toggle dt:before {
  width: 1px;
  height: 13px;
  top: 4px;
  right: 6px;
}
.toggle dt.plus:before {
  content: none;
}
.toggle dd {
  display: none;
}
/*メイン-----------------------------*/
.container {
    margin-right: auto;
    margin-left: auto;
}
/*メインスライド-----------------------------*/
main #main_slide {
    background: #f3f2f7;
    margin-bottom: 4rem;
    padding: 0;
}
main #main_slide img {
    height: auto;
    margin: 0 auto;
    display: block;
}
/*スライダー*/
.slider {
  margin: 30px auto 4rem;
  width: 100%;
  padding-bottom: 4rem;
}
.slider div {
  margin: 0 5px;
}
.slider img {
  height: auto;
  width: 100%;
}

/*ヘッダー-----------------------------*/
header {
    background: #fff;
    position: fixed;
    width: 100%;
    z-index: 100;
}
header a {
    color: #fff;
}
#hd_top {
    /*background: #2E2A2A;
    color: #BEAA69;*/
    background: #88aa8e;
    color: #fbeec2;
    font-size: 1.3rem;
    padding: 0.5rem 2rem;
}
header .inner {
    padding: 3rem 8rem;
}
.hd_txt {
    font-size: 1.1rem;
}

#hd_right ul {
    display: flex;
}
/*-----------------------------*/
.bx_bdr {border: 1px solid;padding: 1rem 2rem;}
.bx_bdr_b {border-bottom: 1px solid #ddd;padding-bottom: 3rem;margin-bottom: 5rem;}
.center {
    text-align: center;
    margin-right: auto;
    margin-left: auto;
    display: block;
}
.att01 {color: #c59c54;}
.att02 {color: #ef5c5c;}
.att03 {color: #5f94b3;}
.bx_att01 {background: #ffffdd;padding: 2rem;}
.bx_att02 {background: #dc0000;padding: 2rem;color: #fff;font-weight: bold;}
.mb1 {margin-bottom: 1rem;}
.mb2 {margin-bottom: 2rem;}
.mb4 {margin-bottom: 4rem;}
.mb6 {margin-bottom: 6rem;}
.mb15 {margin-bottom: 15rem;}
.w100per {width: 100%;}
.number {
    color: #AF8C4F;
    font-size: 7rem;
    text-align: center;
    font-family: serif;
    width: 200px;
    border-radius: 100%;
    position: absolute;
    top: -120px;
    left: calc(50% - 100px);
}
.small {font-size: 12px;}
.bold {font-weight: bold;}
.block {display: block;}
.txt_r {text-align: right;}
.txt_l {text-align: left;}
.none {display: none;}
.hissu {position: relative;}
.hissu:after {
    content: '※';
    color: #ef5c5c;
}

h1.ico_ribbon, h2.ico_ribbon {
    font-size: 3.2rem;
    text-align: center;
    font-family: serif;
    font-weight: normal;
    position: relative;
    margin: 4rem 0 6rem;
}
h1.ico_ribbon span, h2.ico_ribbon span {
    font-size: 1.2rem;
    display: block;
    font-family: initial;
    padding-bottom: 10px;
}
/*h2.ico_ribbon:before {
    content: '';
    position: absolute;
    background: #f7f1e2;
    width: 100%;
    height: 170px;
    z-index: -1;
    display: block;
    margin-top: -3rem;
}*/
h1.ico_ribbon:after, h2.ico_ribbon:after {
    content: '';
    position: absolute;
    background: url(../img/ico_ribbon.svg) left bottom no-repeat;
    width: 40px;
    height: 20px;
    bottom: -15px;
    left: calc(50% - 20px);
}
.bg_yellow h3 {font-size: 3.4rem;position: relative;margin-bottom: 3rem;}
.bg_yellow h3:first-letter {
    font-size: 4.2rem;
    background: #CEA050;
    color: #fff;
    padding: 5px 20px;
    text-align: center;
    margin-right: 1rem;
    font-family: serif;
}

#mainimg {
    background: url(/shussan/img/reason/bg_main.jpg) top center no-repeat;
    width: 100%;
    max-width: 1900px;
    min-height: 400px;
    background-size: cover;
    margin: 0 auto;
}
#mainimg .main_txt {
    display: block;
    margin: 0 auto;
}
.naire_txt {margin-bottom: 2rem;}
.naire01 {
    position: relative;
}
.naire01 img {
    box-shadow: 0 0 10px;
    max-width: 629px;
    width: 70%;
}
.naire01:after {
    content: '';
    position: absolute;
    background: url(/shussan/img/reason/naire01_bg.svg) top center no-repeat;
    background-size: contain;
    width: 100%;
    max-width: 859px;
    height: 550px;
    top: 0;
    left: calc(50% - 430px);
    display: block;
}
.txt01 {
    font-size: 3rem;
    padding: 2rem 0;
    border-top: 2px dashed #fff;
    border-bottom: 2px dashed #fff;
}
.ttl_serif {
    font-size: 2.2rem;
    font-family: serif;
    font-weight: normal;
    position: relative;
}
.ttl_hikidemono01:before {
    position: absolute;
    content: '';
}
.ttl_bdr {
    border: 1px solid;
    padding: 1rem;
    position: relative;
}
.ttl_bdr:before {
    border: 1px solid;
    padding: 1rem;
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    top: -5px;
    left: -5px;
}
/*.ttl_bdr_b {
    position: relative;
    display: inline-block;
}
.ttl_bdr_b:after {
    content: '';
    width: 100%;
    height: 39%;
    background: #ffff9e;
    position: absolute;
    left: 0;
    z-index: -1;
    top: 16px;
}*/
.ttl_bdr_b, .marker {background: linear-gradient(transparent 60%, #ffff9e 60%);}


.ttl_white {
    font-size: 2rem;
}
.ttl_double {position: relative;margin-bottom: 5rem;}
.ttl_double:before {content:"";border-top: 1px solid;border-bottom: 1px solid;width: 70px;
    height: 5px;
    position: absolute;
    left: calc(50% - 35px);
    bottom: -10px;
}
.ttl_frame {
    position: relative;
    margin: 8rem;
}
.ttl_frame:before {
    content: '';
    position: absolute;
    width: 245px;
    height: 35px;
    background: url(../img/ttl_frame.svg) 0 0 no-repeat;
    top: -4rem;
    left: calc(50% - 123px);
}
.ttl_frame:after {
    content: '';
    position: absolute;
    width: 245px;
    height: 35px;
    background: url(../img/ttl_frame.svg) 0 0 no-repeat;
    bottom: -4rem;
    left: calc(50% - 123px);
    transform: rotate( 180deg);
}

/*ボタン--------------------------------------------*/
a.btn01 {
    color: #fff;
    background: #232323;
    padding: 2.5rem 1rem 2.5rem 2rem;
    border-radius: 5px;
    width: 86%;
    max-width: 420px;
    position: relative;
    text-align: center;
    display: block;
    margin: 0 auto 4rem;
}
a.btn01:before {
    content: '';
    width: 8px;
    height: 8px;
    border: 0;
    border-top: solid 2px;
    border-right: solid 2px;
    position: absolute;
    top: calc(50% - 6px);
    transform: rotate(45deg);
    margin-left: -20px;
}

a.btn01:hover, a.btn01:active {
    color: #fff;
    background: #64936d;
    -webkit-transition: 0.6s ease-in-out;
    -moz-transition: 0.6s ease-in-out;
    -o-transition: 0.6s ease-in-out;
    transition: 0.6s ease-in-out;

}
a.btn01:hover:before, a.btn01:active:before {
    margin-left: -13px;
    -webkit-transition: 0.6s ease-in-out;
    -moz-transition: 0.6s ease-in-out;
    -o-transition: 0.6s ease-in-out;
    transition: 0.6s ease-in-out;
}
.bnr_catalog {
    background: #f3df81 url(../img/bnr_catalogseikyu.jpg) right center no-repeat;
    width: calc( 100% + 8rem);
    padding: 10px;
    text-align: center;
    font-weight: bold;
}
.bnr_catalog a {
    display: block;
    border: 1px solid #fff;
    padding: 20px 20px 30px;
}
.bnr_catalog a:hover {
    background: #bf919194;
    color: #fff;
    -webkit-transition: 0.6s ease-in-out;
    -moz-transition: 0.6s ease-in-out;
    -o-transition: 0.6s ease-in-out;
    transition: 0.6s ease-in-out;
}
.bnr_catalog a:hover {
    color: #fff;
}
.bnr_catalog h2 {
    font-size: 3rem;
    width: 100%;
}


/*カタログ
–––––––––––––––––––––––––––––––––––––––––––––––––
*/
#catalog .bg_beige .flex2 {
    flex-wrap: wrap-reverse;
}
.kinds {
    position: absolute;
    margin-top: -2rem;
    font-size: 1.2rem;
    background: #88aa8e;
    padding: 0 1rem;
    color: #fff;
    }
/*パレット
–––––––––––––––––––––––––––––––––––––––––––––––––
*/
#palette {
    background-color: #fff;
}
.palette_describe {
    font-size: 2rem;
    font-weight: normal;
}
.palette_describe span{
    font-size: 2.6rem;
    font-weight: bold;
}
.palette_flex img,
.palette_card img {
    display: inline;
}
.plette_hikidemono {
    margin: 32px 0 64px;
}
.plette_hikidemono img {
    margin: 16px 0;
}
.palette_flex {
    display: flex;
    justify-content: space-between;
}
#palette .palette_bgbeige .flex2 {
    flex-wrap: wrap-reverse;
}
.palette_card {
    margin: 40px auto;
}
.palette_stress {
    font-size: 2rem;
    margin: 32px 0;
}
.palette_stress span {
    font-size: 3rem;
}
.palette_stress::after {
    content: url(../img/goods/palette/palette_stress.png);
    margin-left: 16px;
}
.bgbeige_top {
    background: url(../img/goods/palette/palette_bgtop.jpg) #FFF9F2 no-repeat top/contain;
}
.palette_merit {
    display: flex;
    justify-content: space-around;
    background-color: #fff;
    border-radius: 20px;
    max-width: 800px;
    margin: 16px auto 32px;
    padding: 32px;
}
.merit_sentence {
    width: 70%;
    margin: 16px;
}
.merit_sentence h3 {
    padding-left: 8px;
}
.palette_highlight01::before {
    content: url(../img/goods/palette/palette_01.png);
    margin-right: 16px;
}
.palette_highlight02::before {
    content: url(../img/goods/palette/palette_02.png);
    margin-right: 16px;
}
.palette_highlight03::before {
    content: url(../img/goods/palette/palette_03.png);
    margin-right: 16px;
}
.palette_highlight04::before {
    content: url(../img/goods/palette/palette_04.png);
    margin-right: 16px;
}
.palette_howto h2::before {
    content: url(../img/goods/palette/palette_easy.png);
}
.palette_howto img {
    width: 1200px;
    margin: 0 auto;
}
.palette_bgbeige {
    background-color: #FFF9F2;
}
.recommend_contents .palette_flextop {
    display: flex;
    justify-content: space-evenly;
    margin-bottom: 40px;
}
.palette_flextop h3 {
    font-size: 2.6rem;
}
.palette_recommend01 {
    background: url(../img/goods/palette/recommend_bg01.jpg) no-repeat center/cover;
    margin: 160px 0;
}
.palette_recommend02 {
    background: url(../img/goods/palette/recommend_bg02.jpg) no-repeat center/cover;
    margin: 160px 0;
}
.palette_recommend03 {
    background: url(../img/goods/palette/recommend_bg03.jpg) no-repeat center/cover;
    margin: 160px 0;
}
.recommend_contents {
    max-width: 1200px;
    margin: 0 auto;
}
.recommend_contents li {
    text-align: center;
    width: 30%;
}
.palette_lineup {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 24px 6%;
}
.lineup_name,
.lineup_price {
    text-align: right;
    border-bottom: 1px solid #000;
}
.lineup_detail {
    text-align: right;
}
.palette_kinds01 {
    text-align: center;
}
.palette_kinds01 h3 {
    background-color: #FFF9F2;
    padding: 16px 0;
    font-weight: 500;
}

/* .palette_bgbeige {
    margin-bottom: 480px;
  }
.palette_bgbeige::after {
    content: "";
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: url(../img/goods/palette/palette_sub.jpg) no-repeat center/contain;
    z-index: -1;
  } */

/*出産
––––––––––––––––––––––––––––––––––––––––––––––––– */
.main_img {
    margin: 4rem auto;
}
.flex4 li span {font-size: 1.2rem;display: block;padding: 1rem .5rem;}

.li_name01, .li_name02 {
    width: 48%;
    text-align: center;
    background: #deebe0;
    padding: 2rem;
}
.li_name01 dd , .li_name02 dd {
    padding: 1rem 0;
    border-bottom: 1px dotted;
}
.li_name02 {
    background: #fbe4e4;
}
.li_name01 dt {
    background: #98c19e;
    padding: 1rem;
    color: #fff;
}
.li_name02 dt {
    background: #e5a5a5;
    padding: 1rem;
    color: #fff;
}
/*ログイン
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.login_bx {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    text-align: center;
}
.login_bx li {
    width: 48%;
    /*background: #f1f1f1;
    background: #dee7e0;*/
    background: #e7ebef;
    padding: 2rem;
    margin-bottom: 2rem;
}
.login_bx h2 {
   text-align: center;
   margin-bottom: 2.5rem;
   letter-spacing: .3rem;
}
.login_bx input {
    width: 100%;
    margin-bottom: 1.5rem;
    padding: 1rem;
    font-size: 1.4rem;
    border: none;
    line-height: 2;
}
.btn, .btn2 {display: block;text-align: center;}
.btn input {
    background: #222;
    border-radius: 5px;
    width: 90%;
    max-width: 390px;
    margin: 1rem auto;
    color: #fff;
    cursor: pointer;
    border:1px solid #222;
    padding: 1rem;
    line-height: 2;
}
.btn_att input {
    background: #ef5c5c;
    border:1px solid #ef5c5c;
}
.btn2 input {
    color: #fff;
    background: #96b49b;
    border: none;
    width: 70%;
    max-width: 260px;
    min-width: 200px;
    border-radius: 5px;
    margin: 1rem auto;
    cursor: pointer;
    padding: 1rem;
    line-height: 1.5;
}
.btn input:hover {
    background: #fff;
    color: #222;
}
.btn2 input:hover {
    background: #95cf9f;
    color: #fff;
}
#login h1.ico_ribbon {margin: 7rem 0 8rem;}
textarea {width: 100%;margin: 0 auto 2rem;color: #666;font-size: 1.3rem;border: 1px solid #ccc;height: 200px;}
.btn_li {display: flex;justify-content: center;}
.btn_li li {background: #222;color: #fff;cursor: pointer;margin-right: 2%;}
.btn_li li input {background: #222;color: #fff;cursor: pointer;}
.btn_li li:last-child input {margin-right: 0;}

/*よくある質問
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.li_qa dt {border-bottom: 1px solid;margin-bottom: 1rem;padding: 1rem 0;position: relative;font-weight: bold;}
.li_qa dt:before {content: 'Q.';font-size: 2.2rem;margin-right: 5px;}
.li_qa dd {margin-bottom: 4rem;}
/*マイページ
–––––––––––––––––––––––––––––––––––––––––––––––––– */
#mypage .flex3 li a {
    border: 1px solid;
    padding: 2rem 1rem 4.5rem;
    }
#mypage .flex3 li.ico_clock a {background: url(../img/ico_clock.svg) center 5rem no-repeat;}
#mypage .flex3 li.ico_coupon a {background: url(../img/ico_coupon.svg) center 5rem no-repeat;}
#mypage .flex3 li.ico_gift a {background: url(../img/ico_gift.svg) center 4.8rem no-repeat;}
#mypage .flex3 li.ico_address a {background: url(../img/ico_address.svg) center 5rem no-repeat;}
#mypage .flex3 li.ico_card a {background: url(../img/ico_card.svg) center 5rem no-repeat;}
#mypage .flex3 li.ico_picture a {background: url(../img/ico_picture.svg) center 5rem no-repeat;}
#mypage .flex3 li.ico_rireki a {background: url(../img/ico_rireki.svg) center 5rem no-repeat;}
#mypage .flex3 li.ico_member a {background: url(../img/ico_member.svg) center 5.2rem no-repeat;}
#mypage .flex3 li.ico_catalog a {background: url(../img/ico_catalog.svg) center 5rem no-repeat;}
#mypage .flex3 li.ico_logout a {background: url(../img/ico_logout.svg) center 5rem no-repeat;}
#mypage .flex3 li:nth-child(10) a {background: url(../img/ico_delete.svg) center 5rem no-repeat;}
#mypage .flex3 li:nth-child(10) {margin-right: 0;}

#addressDef input[type="button"] {font-size: 1.3rem;}
#quitButton {border-radius: 5px;padding: 1rem;background: #222;color: #fff;border: 1px solid #222;min-width: 120px;cursor: pointer;}
#quitButton:hover {background: #fff;color: #222;}
#backButton {border-radius: 5px;padding: 1rem;min-width: 120px;}
#backButton:hover {background: #ddd;color: #222;}
/*画像登録*/
.my_img {display: flex;flex-wrap: wrap;justify-content: space-around;}
.my_img li {width: calc(96% / 3);border: 1px solid #222;padding: 1rem;margin-bottom: 1.5rem; position: relative;}
.my_img li input[type="checkbox"]  {border: none;width: 0;display: none;}
.my_img li input[type="checkbox"] + label {
  position: relative;
  padding-left: 20px;
  margin-bottom: 20px;
  font: 14px/20px 'Open Sans', Arial, sans-serif;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.my_img li .original_card_trash {
    position: absolute;
    top: 5px;
    right: 5px;
}
.my_img li .original_card_content {
    padding-right: 1rem;
}
.my_img li input[type="checkbox"] + label:before {
  content: '';
  width: 20px;
  height: 20px;
  border: 1px solid #dc8585;
  position: absolute;
  left: 0;
  top: 0;
  opacity: .6;
  -webkit-transition: all .12s, border-color .08s;
  transition: all .12s, border-color .08s;
}

.my_img li input[type="checkbox"]:checked + label:before {
  width: 10px;
  top: -5px;
  left: 5px;
  border-radius: 0;
  opacity: 1;
  border-top-color: transparent;
  border-left-color: transparent;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
/*.attention {
    position: absolute;
    top: -10px;
    right: 15px;
    background: #ff0000;
    text-align: center;
    border-radius: 50%;
    color: #fff;
    width: 30px;
    height: 30px;
    font-size: 1.5rem;
    line-height: 1.8;
}*/
#mypage .flex3 li {
    overflow: initial;
}
/*カート
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.cart_att01 {
    font-size: 1.4rem;
    color: #beaa6e;
    margin-bottom: 1rem;
    background: url(../img/ico_guide2.svg) left top no-repeat;
    background-size: auto;
    padding-left: 3rem;
}
.delivery_content .noshi, .gift_setting_content .noshi {
    position: absolute;
    text-align: center;
    width: 58px;
    margin-top: -4px;
    background: #f5e9e966;
    margin-left: -4px;
    font-size: 12px;
}
.gift_setting_content .noshi {
    margin: 0;
    width: 60px;
}


/*商品詳細
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.item_main {
    width: 100%;
    padding: 20px;
    border: 1px solid #ddd;
    margin-bottom: 2rem;
}
.ttl_item_s {
    border-bottom: 1px solid;
    padding-bottom: 1rem;
}

.item_main img {
    margin: 0 auto;
}
.flex_detail {
    display: flex;
}
.flex_detail .item_left {
    width: 68%;
    margin-right: 2%;
}
.flex_detail .item_right {
    width: 30%;
}
.item_name {
    font-size: 2.0rem;
    font-weight: bold;
    margin-bottom: 1rem;
}
.item_no {font-size: 1.2rem;margin: -1rem 0 1rem 0;}
.item_right .price {
    font-size: 2.6rem;
    text-align: left;
    margin-bottom: 1rem;
    font-weight: bold;
}
.btn_cart {
    background: #222;
    border: 1px solid #111;
    color: #fff;
    border-radius: 10px;
    width: 100%;
    height: 70px;
    cursor: pointer;
    position: relative;
    padding-left: 8%;
    font-size: 1.8rem;
}
.btn_cart:hover:after, .btn_cart:active:after {
    position: absolute;
    content: '';
    left: calc(50% - 90px);
    width: 20px;
    height: 22px;
    top: 14px;
    background: url(../img/ico_cartin.svg) center top no-repeat;
    opacity: 0;
    animation: cartIn 1.5s infinite alternate ease-in-out;

}
.btn_cart_none {
    text-align: center;
    padding: 1.5rem 0.5rem;
    background: #ccc;
    color: #fff;
    font-size: 1.4rem;
    margin: 0 0 1rem 0;
    }
@keyframes cartIn {
0% {transform: translateY(-15px);opacity: 1;}
100% {transform: translateY(0);opacity: 1;}
}

.btn_cart:before {
    position: absolute;
    content: '';
    width: 30px;
    height: 30px;
    background: url(../img/ico_cart.svg) center bottom no-repeat;
    margin-left: -45px;
    bottom: 20px;
    z-index: 1;
}
.btn_favorite {
    background: #fff;
    border: 1px solid #111;
    color: #222;
    border-radius: 10px;
    width: 100%;
    height: 50px;
    cursor: pointer;
}
.btn_favorite:hover {
    background: #fff9cb;
    -webkit-transition: 0.6s ease-in-out;
    -moz-transition: 0.6s ease-in-out;
    -o-transition: 0.6s ease-in-out;
    transition: 0.6s ease-in-out;


}
.btn_favorite img {
    filter: brightness(0);
    display: inline;
    margin-right: 10px;
}
.btn_favorite:hover img {
    animation: aniScale 0.4s ease-out;
    transform-origin: 50% 50%;
    -webkit-animation: aniScale 0.4s ease-out;
    -webkit-transform-origin: 50% 50%;
    -moz-animation: aniScale 0.4s ease-out;
    -moz-transform-origin: 50% 50%;
}

.item_thumb {
    display: flex;
    margin-bottom: 2rem;
    width: 100%;
}
.item_thumb li {
    margin-right: 1%;
    width: calc(98% / 3);
    border: 1px solid #eee;
    padding: 2px;
}
.item_thumb li:hover {
    cursor: pointer;
    border: 1px solid #BEAA69;
}
.item_thumb li:last-child {
    margin-right: 0;
}
.item_thumb li img  {
    margin-right: auto;
    margin-left: auto;
}
.item_tag {
    display: flex;
    flex-wrap: wrap;
    margin: 2rem 0 4rem;
}
.item_tag li a {
    position: relative;
    margin: 0 1.5rem 1rem 1rem;
    display: block;
    text-decoration: underline;
}
.item_tag li a:before {
    position: absolute;
    content: '#';
    left: -1rem;
}
#detail .catch_copy, #detail .comment, #detail .contents, #detail .term {
    margin-bottom: 2rem;
}
#detail .ttl_bdr_b:after {
    top: 9px;
}
.item_ico {
    display: flex;
    flex-wrap: wrap;
    justify-content: left;
}
.item_ico li {
    margin: 0 1% 5px 0;
    width: calc(98% / 3);
    max-width: 110px;
}
.item_ico li:nth-child(3n) {
    margin: 0 0 5px 0;
}
.btn_catalog {
    display: block;
    text-align: center;
    margin: 1rem 0;
    padding: 1rem;
    background: #88aa8e;
    border-radius: 3px;
    color: #fff;
}
.btn_catalog:hover {
    background: #8bc996;
    color: #fff;
}
.stock, .lot {
    display: block;
    text-align: center;
    color: #68a172;
    position: relative;
    border: 1px dotted;
    font-size: 1.8rem;
    margin-bottom: 2px;
}
#cart .stock, #cart .lot {
    max-width: 220px;
}
.stock:before {
    content: '残数：';
    font-size: 1.2rem;
}
.lot {color: #ef5c5c;}
.lot:before {
    content: '注文数：';
    font-size: 1.2rem;
}
.lot:after {
    content: '個以上';
    font-size: 1.2rem;
}
.delivery_days {
    display: block;
    text-align: center;
    font-family: Arial;
    border: 1px solid;
    margin-bottom: 5px;
    color: #fff;
    background: #ef5c5c;
    padding: 5px;
}
.delivery_days:before {
    content: 'お届けまで約';
    font-size: 1.2rem;
}
.delivery_days:after {
    content: '日';
    font-size: 1.2rem;
}
.liquor {display: block;padding:10px;margin-bottom: 1rem;font-size: 1.2rem;border: 1px dashed; }
/*フェード
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.e_fade {
    opacity: 0;
    transform: translateY(100px);
    transition: all 700ms;
}
.e_scroll {
    opacity: 1;
    transform: translate(0, 0);
}

/*スライド
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/*.wrap {
  display: flex;
  align-items: center;
  overflow: hidden;
}
.slideshow {
    display: flex;
    animation: loop-slide 20s infinite linear 1s both;
}
.slideshow li { width: 1200px;}
@keyframes loop-slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
} */

/*背景
–––––––––––––––––––––––––––––––––––––––––––––––––– */
section {
    position: relative;
    z-index: 0;
    padding: 3rem 0 8rem;
}
.bg_green {background: #cad9ca;padding-right: 2rem;padding-left: 2rem;}
.bg_gray {background: #eee;padding-right: 2rem;padding-left: 2rem;}
.bg_beige {background: #f8f2e9;padding-right: 2rem;padding-left: 2rem;}
.bg_pink {background: #ffedf0;padding-right: 2rem;padding-left: 2rem;}
.bg_yellow {background: #fffde9;padding-right: 2rem;padding-left: 2rem;}


.bg_blue {
    background: #c8d9dc;
}
.bg_faq {
    background: #c2d0e2;
}
.bg_item {
    background: url(/shussan/img/reason/bg_item.jpg) 0 0 fixed;
}
.bg_item h2 {
    color: #fff;
    margin-bottom: 0;
}
.bg_item .number {
    color: #cea969;
}
section.bg_blue:before {
    border-color: transparent transparent #f7f1e2 transparent;
}
section.bg_item:before {
    border-color: transparent transparent #c2d0e2 transparent;
}
section.bg_faq:before {
    border-color: transparent transparent #95AFD0 transparent;
}


/*.bg_blue {
    background: #c4daf8;
    background-image:repeating-linear-gradient(90deg,#B3CEF2, #B3CEF2 15px,transparent 0, transparent 38px);
    position: relative;
    z-index: 0;
    padding: 6rem 0;
}*/
/*.bg_blue::before {
    content: '';
    position: absolute;
    transform: skewY(2deg);
    transform-origin: top right;
    z-index: -1;
    width: 100%;
    height: 100%;
    background: #b3cef2;
}*/
.pmc:after {
    content: '';
    position: absolute;
    background: url(/shussan/img/reason/pmc.svg) top right no-repeat;
    width: 355px;
    height: 106px;
    top: 30px;
    right: 0;
}
.wrapping:after {
    content: '';
    position: absolute;
    background: url(/shussan/img/reason/wrapping.svg) top right no-repeat;
    width: 165px;
    height: 83px;
    top: 30px;
    left: 35%;
}
.carry:after {
    content: '';
    position: absolute;
    background: url(/shussan/img/reason/carry.svg) top right no-repeat;
    width: 201px;
    height: 87px;
    top: 30px;
    left: 27%;
}

.li_faq {
    display: flex;
    flex-wrap: wrap;
    font-size: 1.8rem;
    justify-content: space-around;
    line-height: 1.8;
    margin-bottom: 6rem;
}
.li_faq h3 {
    font-size: 2.5rem;
    line-height: 1.5;
    color: #6093d5;
    margin: 10px 0;
}
.li_faq li {
    width: 30%;
    background: #fff;
    border-radius: 20px;
    margin-bottom: 3rem;
    padding: 10px 20px;
}
/* グリッド
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.flex2, .card_flow, .li_btns {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
.li_btns li {margin-right: 10px;}
.flex2 li {
    width: 48%;
    max-width: 450px;
    margin-right: 2%;
}
.flex2 li:nth-child(2n), .li_yoto li:nth-child(3n), .flex3 li:nth-child(3n), .flex4 li:nth-child(4n), .ranking5 li:last-child, .search_list li:nth-child(5n), .li_btns li:last-child, .brand_list li:nth-child(5n) {
    margin-right: 0;
}
.flex3, .li_yoto {
    display: flex;
    flex-wrap: wrap;
    /*justify-content: center;*/
    margin-right: auto;
    margin-left: auto;
}
.flex3 li, .li_yoto li {
    width: calc(96% / 3);
    text-align: center;
    font-size: 1.6rem;
    overflow: hidden;
    transition: 1s all;
    margin: 0 2% 20px 0;
    position: relative;
}

.flex3 p {
    text-align: left;
}
.li_houjin li {
    overflow: initial;
}
.li_houjin li:before {
    content: '01';
    position: absolute;
    font-size: 5rem;
    font-style: italic;
    font-family: serif;
    margin: -5rem 0 0 -3rem;
    color: #bd8e8e;
    z-index: 1;
}
.li_houjin li:nth-child(2):before {content: '02';}
.li_houjin li:nth-child(3):before {content: '03';}
.li_yoto li a {
    height: 100%;
}
.li_yoto li a p {
    background: #eae3d9;
    padding: 5px;
    position: relative;
    z-index: 10;
    margin: 0;
    height: 100%;
}
.li_yoto li img {
    width: 100%;
}
.li_yoto li img:hover {
    transform:scale(1.2,1.2);
    transition:1s all;
    opacity: 1;
}
.flex4, .brand_list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.brand_list {
    justify-content: left;
}
.flex4 li {
    width: calc(94% / 4);
    margin: 0 2% 20px 0;
}
.brand_list li {
    width: calc(92% / 5);
    margin: 0 2% 20px 0;
}
.brand_list li a {
    border: 1px solid #eee;
    padding: 1.2rem 1.5rem .3rem;
    overflow: hidden;
    text-align: center;
    font-size: 1.0rem;
    color: #bbb;
    height: 100%;
}
.brand_list li a p {
    margin: 0;
}
.li_cat {
    display: flex;
    flex-wrap: wrap;
    /*justify-content: center;*/
}
.li_cat li {
    width: calc(100% / 7);
    text-align: center;
    padding: 10px;
}
.li_price, .li_anker {
    display: flex;
    flex-wrap: wrap;
}

.li_price li, .li_anker li {
    width: calc(97% / 4);
    text-align: center;
    margin: 2rem 1% 1.5rem 0;
}
.li_price li:nth-child(4n), .li_anker li:nth-child(4n) {
    margin-right: 0;
}
.li_price li a, .li_anker li a {
    display: block;
    padding: 1.5rem 1rem 1.5rem 0;
    border: 1px solid #ddd;
    position: relative;
    background: #fff;
}
.li_anker li a {
    border: 1px solid #222;
    background: #222;
    color: #fff;
}
.li_price li a:hover {
        background: #eee;
        color: #333;
}
.li_anker li a:hover {
        background: #fff;
        color: #333;
}
.li_price li a:after, .li_anker li a:after {
    content: "";
    display: block;
    position: absolute;
    top: calc(50% - 5px);
    right: 16px;
    width: 8px;
    height: 8px;
    border: 1px solid;
    border-color: transparent transparent #333 #333;
    transform: rotate(-135deg);
    transition: .3s;
}
.li_anker li a:after {
    transform: rotate(315deg);
    border-color: transparent transparent #fff #fff;
}
.li_price li a:hover:after {
    right: 10px;
}
.li_anker li a:hover:after {
    top: calc(50% - 2px);
    border-color: transparent transparent #333 #333;
}
.ranking5, .search_list {
    display: flex;
}
.btn_rank:after {
    content: 'BEST30';
    margin-left: .5rem;
    font-size: 1.2rem;
    color: #e9ce76;
}
.search_list, #ranking .ranking5 {
    flex-wrap: wrap;
}
.ranking5 li, .search_list li {
    width: calc(92% / 5);
    border: 1px solid #ddd;
    position: relative;
    margin: 0 2% 20px 0;
    background: #fff;
}
.ranking5 li p {
    margin: 0;
}
.ranking5 li:hover, .search_list li:hover {
    border: 1px solid #BEAA69;
}
.ranking5 li a p.rank_no {
    position: absolute;
    background: #eee;
    width: 30px;
    height: 30px;
    top: -1px;
    text-align: center;
    line-height: 3rem;
    z-index: 10;
}
.ranking5 li a p.rank_no:after {
    content: '';
    position: absolute;
    left: 0;
    top: 100%;
    height: 0;
    width: 0;
    border-left: 15px solid #eee;
    border-right: 15px solid #eee;
    border-bottom: 7px solid transparent;
}
.ranking5 li:first-child a p.rank_no:after {
    border-left: 15px solid #c2a852;
    border-right: 15px solid #c2a852;
}
.ranking5 li:nth-child(2) a p.rank_no:after {
    border-left: 15px solid #a9a9a9;
    border-right: 15px solid #a9a9a9;
}
.ranking5 li:nth-child(3) a p.rank_no:after {
    border-left: 15px solid #d49069;
    border-right: 15px solid #d49069;
}
.ranking5 li:first-child a p.rank_no{background: #c2a852;color: #fff;}
.ranking5 li:nth-child(2) a p.rank_no{background: #a9a9a9;color: #fff;}
.ranking5 li:nth-child(3) a p.rank_no{background: #d49069;color: #fff;}
.ranking5 li a, .search_list li a {
    padding: 10px;
}
.ranking5 li img, .search_list li img {
    display: block;
    margin: 0 auto 10px;
}
p.price, p.price2, p.price3 {
    font-size: 1.8rem;
    text-align: center;
    position: relative;
}
.price {font-family: Arial;}
#cart p.price, #cart p.price2, #cart p.price3 {
    text-align: left;
}
p.price:after, p.price2:after, .price:after, .price3:after {
    font-size: 1rem;
    content: '円（税込）'
}
p.price2 {
    color: #ef5c5c;
    font-size: 1.2rem;
}
p.price3 {
    color: #666;
    font-size: 1.2rem;
    margin-bottom: 1rem;
}
#detail p.price2, #detail p.price3 {
    text-align: left;
}
#detail p.price2 span {
    font-size: 2.4rem;
    font-weight: bold;
}
p.price2 span {
    font-size: 1.8rem;
}
.flex_rl li:nth-child(odd) {float: right;}
/* ご利用ガイド
–––––––––––––––––––––––––––––––––––––––––––––––––– */
ul.card_flow li {
    width: 27%;
    background: #fff;
    border: dotted 2px #95afd0;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    margin: 2% 3%;
    position: relative;
    border-radius: 10px;
    padding: 10px;
    font-size: 1.3rem;
}
ul.card_flow li h4 {
    text-align: center;
    font-size: 18px; color: #95afd0;
    border-bottom: solid 1px #95afd0;
    margin: 5px 0px;
    padding-bottom: 5px;
}
ul.card_flow li:after{
    width: 20px;
    height: 20px;
    border: 3px solid;
    border-radius: 3px;
    border-color: #bea888 #bea888 transparent transparent;
    transform: rotate( 45deg);
    position: absolute;
    content: ''; top: calc(50% - 20px / 2); right: -35px;
}
ul.card_flow li:last-child:after{
    content: none;
}
#card .bg_green .flex3 {
    justify-content: center;
}
#card .flex3 li {
    width: calc(96% / 3);
    max-height: 300px;
    font-size: 1.3rem;
    color: #666;
    /*background: #dfe7e1;*/
    background: #f5f5f5;
    padding: 10px;
}
#card .flex_wrapping li {background: none;}
#card .flex3 li img {
    margin-right: auto;
    margin-left: auto;
    max-height: 260px;
    margin-bottom: 5px;
}
#card .flex_noshi {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
#card .flex_noshi li {
    width: calc(88% / 6);
    font-size: 1.3rem;
    color: #666;
    background: #f5f5f5;
    padding: 10px;
    margin: 0 1% 20px;
}

#card .flex_noshi li img {
    max-height: 220px;
    margin: 0 auto;
    margin-bottom: 10px;
}

/* 検索ボックス
–––––––––––––––––––––––––––––––––––––––––––––––––– */
#search_box  { text-align: center;}
#search_box input[type="text"] {
    width: 260px;
    border: 1px solid;
    margin-bottom: 1rem;
}
#search_box select {
    border: 1px solid;
    background: #fff url(../img/ico_arrow.svg) 97% center no-repeat;
    background-size: 8px 8px;
    margin-bottom: 1rem;
}
#search_box input[type="submit"] {
    background: #222;
    color: #fff;
    cursor: pointer;
    width: 100px;
    padding: 0.8rem;
    border: 1px solid #222;
}
#search_box input[type="submit"]:hover {
    background: #88aa8e;
    border: 1px solid;
    -webkit-transition: 0.3s ease-in-out;
    -moz-transition: 0.3s ease-in-out;
    -o-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out;
}

/* 検索ページ
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.search_hd {
    display: flex;
    justify-content: flex-end;
    align-items: baseline;
    margin-bottom: 2rem;
    position: relative;
    height: 40px;
    z-index: 1;
    font-size: 1.4rem;
}
.search_hd li:first-child {
    margin-right: auto;
}
/*.search_hd li:last-child dd {
    position: absolute;
    width: 100%;
    left: 0px;
    border: none;
}*/
.search_hd li:last-child dd ul {
    background: #fff;
    border: #ccc 1px solid;
}
.search_hd dt {
    width: 160px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    cursor: pointer;
    position: relative;
    margin-left: 20px;
}
.search_hd dt:after {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    right: 10px;
    border: 1px solid;
    border-color:  transparent transparent #565656 #565656;
    transform: rotate(-45deg);
    top: 10px;
}
.search_hd dt.search_open:after {
    transform: rotate(135deg);
    top: 15px;
}
.search_hd dd {
    background:#fff;
    width: 130px;
    height:40px;
    line-height:40px;
    text-align:center;
    border: #ccc 1px solid;
    border-bottom:none;
    display:none;
    margin-left: 20px;
}
.search_hd dd:last-child {
    border: #ccc 1px solid;
}
/* 記事
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.agenda {
      border: 1px solid #eee;
      padding: 1rem;
    }
    .agenda h2 {
      text-align: left;
    }
    ul.li_agenda li a {
      position: relative;
      border-bottom: 1px dotted #ddd;
      padding: 1rem;
    }
    ul.li_agenda li a:before {
      content: '■';
      margin-right: 5px;
      color: #c2a852;
    }
    ul.li_agenda li ul li a:before {
      content: '・';
    }
    .bx_atc h2 {border-top: 1px solid #c2a852;border-bottom: 1px solid #c2a852;padding: 2rem 0;}
    .bx_atc h3 {background: #d8e3da;padding: 1rem;}
    .bx_atc h4 {border-left: 5px solid #c2a852;padding-left: 1rem;}
    
/* ページャー
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.pager .pagination {
  text-align: center;
}

.pager .pagination li {
  display: inline;
  margin: 0 2px;
  padding: 0;
  display: inline-block;
  width: 50px;
  height: 50px;
  text-align: center;
  position: relative;
  border-radius: 50px;
}

.pager .pagination li.pre,
.pager .pagination li.next{
  font-size: 2.0rem;
}

.pager .pagination li a{
  vertical-align: middle;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  display:table;
  text-decoration: none;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all  0.3s ease;
}


.pager .pagination li a span{
  display:table-cell;
  vertical-align:middle;
}

.pager .pagination li a:hover,
.pager .pagination li a.active{
  color: #000;
  background: #eae6d6;
  border-radius: 10px;
  border-radius: 50px;
  animation: aniScale 0.4s ease-out;
  transform-origin: 50% 50%;
  -webkit-animation: aniScale 0.4s ease-out;
  -webkit-transform-origin: 50% 50%;
  -moz-animation: aniScale 0.4s ease-out;
  -moz-transform-origin: 50% 50%;
}
@keyframes aniScale {
  0% { transform: scale(0.8, 0.8); }
  40% { transform: scale(1.2, 1.2); }
  60% { transform: scale(1, 1); }
  80% { transform: scale(1.1, 1.1); }
  100% { transform: scale(1, 1); }
}
@-webkit-keyframes aniScale {
  0% { -webkit-transform: scale(0.8, 0.8); }
  40% { -webkit-transform: scale(1.2, 1.2); }
  60% { -webkit-transform: scale(1, 1); }
  80% { -webkit-transform: scale(1.1, 1.1); }
  100% { -webkit-transform: scale(1, 1); }
}
@-moz-keyframes aniScale {
  0% { -moz-transform: scale(0.8, 0.8); }
  40% { -moz-transform: scale(1.2, 1.2); }
  60% { -moz-transform: scale(1, 1); }
  80% { -moz-transform: scale(1.1, 1.1); }
  100% { -moz-transform: scale(1, 1); }
}
@media screen and (max-width: 768px){
    .pager .pagination li {
        width: 25px;
        height: 25px;
        line-height: 25px;
    }
    .pager {
        margin: 0 auto 4rem;
    }
}

/* リスト
–––––––––––––––––––––––––––––––––––––––––––––––––– */
ul {list-style: none; }
.dl_decimal dt, .dl_disc dt {
    counter-increment: title;
}
.dl_decimal dt::before {
  content: counter(title)'.';
  color: #92bda5;
  margin-right: 10px;
  font-weight: bold;
}
.dl_decimal dd, .dl_disc dd {
  margin: 0 0 4rem 2rem;
}
.dl_disc dt::before {
  content: '■';
  color: #92bda5;
  margin-right: 10px;
}
#privacy ul {list-style: decimal outside;padding-left: 2rem;margin: 10px 0;}
.li_disc {list-style: disc outside;padding-left: 30px;}
/* テーブル
–––––––––––––––––––––––––––––––––––––––––––––––––– */
table {
    border-collapse: collapse;width: 100%;}
.tbl01, .tbl02 {
    width: 100%;font-size: 1.4rem;margin-right: auto;margin-left: auto;background: #fff;
}
.tbl01 th {
    width: 25%;
    text-align: right;
    background: #f2f6f9;
    padding: 2rem;
    border-bottom: 1px solid #fff;
}
.tbl01 td {
    padding: 2rem;
}
.tbl02 th, .tbl02 td {
    text-align: center;
    padding: 1rem;
    border: 1px solid #d2dae1;
    background: #fff;
}
.tbl02 th {
    background: #f2f6f9;
}

.tbl01 .btn2 {
    text-align: left;
}

#senderForm .btn2 {
    text-align: left;
    margin-bottom: 1.5rem;
}


/*ぱんくず
-------------------------------------*/
#breadcrumb {
    display: flex;
    border-bottom: 1px dotted #ddd;
    margin-top: 1.5rem;
    white-space: nowrap;
    flex-wrap: nowrap;
    font-size: 1.2rem;
    padding-bottom: 10px;
}

#breadcrumb li a {
    position: relative;
    display: block;
    margin: 0 1.5rem;
}
#breadcrumb li a:hover {
    text-decoration: underline;
}
#breadcrumb li:last-child {
    margin: 0 1.5rem;
}

#breadcrumb li a:after{
  content: '>';
  margin: 0 1rem;
  position: absolute;
}



/*フッター
-------------------------------------*/
footer {
    background-color: #f5f5f5;
	color: #b5b5b5;
    text-align: center;
    font-size: 1.6rem;
    padding: 0 2rem 0;
    font-size: 1.3rem;
}
footer .container {
    max-width: 1630px;
    border-bottom: 1px solid #fff;
    margin: 0 auto 10px;
}
footer ul {
    display: flex;
    flex-wrap: wrap;
    border-bottom: 1px solid #e2e2e2;
    margin: 0;
    padding-bottom: 1rem;
    justify-content: center;
}
.copyright {padding: 2rem 1rem;}
footer .ft_logo {
    margin: 3rem auto 3rem;
    min-height: 33px;
}
footer .ft_insta {
    display: inline-block;
    width: 36px;
    height: 36px;
}

footer ul a {
    color: #222;
}
footer ul.ft_menu a {
    padding: 1rem;
}
footer .bg_service ul {
    padding: 0;
}
footer .bg_service ul li {
    width: calc(100% / 4);
    padding: 5rem 2% 2rem 2%;
    text-align: left;
    border-right: 1px dotted;
    margin: 4rem 0 2rem 0;
}
footer .bg_service ul li a:hover {color: #DC8585;}
footer .bg_service ul li:nth-child(2) a:hover {color: #88AA8E;}
footer .bg_service ul li:nth-child(3) a:hover {color: #6292B7;}
footer .bg_service ul li:nth-child(4) a:hover {color: #D9B679;}
footer .bg_service ul li h3 {
    text-align: center;
    font-size: 1.8rem;
    position: relative;
    font-weight: normal;
}
footer .bg_service ul li h3:before {
    content: '';
    position: absolute;
    top: -80px;
    left: 0;
    width: 100%;
    height: 67px;
    background: url(../img/ico_service01.svg) top center no-repeat;
}
footer .bg_service ul li:nth-child(2) h3:before {background: url(../img/ico_service02.svg) top center no-repeat;}
footer .bg_service ul li:nth-child(3) h3:before {background: url(../img/ico_service03.svg) top center no-repeat;}
footer .bg_service ul li:nth-child(4) h3:before {background: url(../img/ico_service04.svg) top center no-repeat;}
footer .bg_service ul li:last-child {
    border: 0;
}

/*ページトップへ戻るボタン
-------------------------------------*/
#pagetop {
    position: fixed;
    bottom: 60px;
    right: 0;
    z-index: 99999;
}
#pagetop a {
    display: block;
    background: #fff;
    color: #222;
    padding: 10px;
    text-align: center;
    font-family: serif;
    transform: rotate(90deg);
    font-size: 1.4rem;
}
#pagetop a:hover {
    background: #222;
    color: #fff;
}

/* PC表示 ------------------------------------*/
@media screen and (min-width: 768px){
    .sp {display: none !important;}
    .cart_sp {display: none;}
    body, header {min-width: 1200px;}
    .container {max-width: 1100px;}
    .logo {
        float: left;
        margin-right: 4rem;
    }
    main {
        width: 85%;
        min-width: 950px;
        margin: 0 auto;
        padding-right: 8rem;
        font-size: 1.6rem;
        line-height: 1.8;
    }
     main #main_slide img {
        min-width: 1000px;
    }
    #nav_left {
        height: 100%;
        background: #fff;
        position: sticky;
        position: -webkit-sticky;
        top: 60px;
        z-index: 1;
    }
/*PCヘッダー右*/
    #hd_right {
        position: absolute;
        right: 8rem;
        top: 0;
    }
    #hd_right ul.r_cart li:last-child a {
        background: #C2A852;
        font-size: 1.8rem;
        padding: 2rem 3rem 2rem 6rem;
        margin-top: 0;
    }
    #hd_right ul.r_cart li a {
        display: block;
        padding: 0 2rem;
        margin-top: 5px;
        position: relative;
    }
    #hd_right ul.r_cart li a:hover {
        color: #fbeec2;
    }
    #hd_right ul.r_search {
        position: absolute;
        right: 0;
        top: 90px;
    }
    #hd_right ul.r_search li a {
        display: block;
        color: #222;
        margin-left: 20px;
        position: relative;
        height: 25px;
    }
    #hd_right ul.r_search li a:hover {
        text-decoration: underline;
    }
    #hd_right ul.r_search li {
        position: relative;
        width: 135px;
        text-align: right;
    }
    #hd_right ul.r_search li:first-child {
        width: 270px;
        padding-right: 40px;
        margin-top: -7px;
    }
    #hd_right ul.r_search li:nth-child(2) a {
        background: url(../img/ico_catalog.svg) 5px top no-repeat;
    }
    #hd_right ul.r_search li:nth-child(3) a {
        background: url(../img/ico_guide.svg) left top no-repeat;
    }
    input[type="search" i] {
        border: none;
        border-bottom: 1px solid #000;
        padding: 5px 0;
        outline: none;
        width: 96%;
    }
    #hd_right ul.r_search li label{
        position: relative;
    }
    #hd_right ul.r_search li label input{
        display: none;
    }
    #hd_right ul.r_search li label:after{
        position: absolute;
        content: '';
        background: url(../img/ico_search.svg) right center no-repeat;
        background-size: contain;
        width: 30px;
        height: 36px;
        cursor: pointer;
        top: -8px;
    }

    #hd_right ul.r_cart li:last-child a:hover {
        color: #fff;
        background: #d8c32e;
        -webkit-transition: 0.6s ease-in-out;
        -moz-transition: 0.6s ease-in-out;
        -o-transition: 0.6s ease-in-out;
        transition: 0.6s ease-in-out;
    }
    #hd_right ul.r_cart li a:before {
        background: url(../img/ico_mypage.svg) 0 0 no-repeat;
        background-size: contain;
        content: '';
        position: absolute;
        width: 20px;
        height: 20px;
        left: -5px;
        top: 0;
    }
    #hd_right ul.r_cart li:last-child a:before {
        background: url(../img/ico_cart.svg) 0 0 no-repeat;
        width: 30px;
        height: 30px;
        left: 20px;
        top: 17px;
    }
    #hd_right ul.r_cart li:first-child a:before {
        background: url(../img/ico_search.svg) 0 0 no-repeat;
        background-size: contain;
    }
    #hd_right ul.r_cart li:nth-child(2) a:before {
        background: url(../img/ico_news.svg) 0 0 no-repeat;
    }
    .ttl_white {
        background: #fff;
        margin: 1rem 0 1rem -5rem;
        position: relative;
        padding: 1rem;
    }
    #qa .li_anker {justify-content: center;}
    .ranking5 li:nth-child(5n) {
    margin-right: 0;
    }


}
/* スマホ表示 --------------------------------------------------------*/
@media screen and (max-width: 768px){
    body {font-size: 1.6rem;}
    main, .login_bx li,#search_box input[type="text"], #search_box .searchCa, #inquiry select {
    width: 100%;}
    header {position: relative;z-index: initial;border-bottom: 1px solid #eee;}
    header .inner {padding: 1.5rem 2rem 2rem;}
    header .inner img {width: 100px;margin: 0 auto;}
    footer .ft_logo {width: 100px;margin: 0 auto 2rem;}
    h1.ico_ribbon, h2.ico_ribbon, h2 {font-size: 2.2rem;}
    #wrap {padding-top: 0;}
    main #main_slide {margin-bottom: 1rem;}
    p {margin: 0 1rem;}
    #login {width: 94%;display: block;margin: 0px 3% 4rem;}
   #hd_right .r_search , #hd_top, .hd_txt {display: none;}
   .cart_sp {position: absolute;top: 14px;right: 15px;display: block;width: 25px;height: 25px;}
   .cart_sp img {filter: brightness(0);}
    .logo {text-align: center;margin: 0 auto;width: 100px;}
    .pc, #pagetop {display: none !important;}
    .mb4 {margin-bottom: 1.5rem;}
    .mb6 {margin-bottom: 2.5rem;}
    .mb15 {margin-bottom: 6rem;}
    footer {font-size: 1.2rem;padding: 2rem 0 7rem;}
    .container {margin-right: 10px;margin-left: 10px;}
    section {padding: 1rem 0 3rem;}
    #mypage .flex3 li a {height: 100%;}
    .li_yoto li, .flex4 li, .search_list li, .li_price li, .li_anker li, #ranking .ranking5 li, #mypage .flex3 li, .my_img li, #card .flex3 li {width: calc(98% / 2);margin: 1rem 2% 1rem 0;font-size: 1.3rem;min-width: auto;}
    #card .bg_green .flex3 li {margin-bottom: 3rem;text-align: center;}
    .li_yoto li:nth-child(3n), .flex4 li:nth-child(4n), .search_list li:nth-child(5n) {margin-right: 2%;}
    .li_yoto li:nth-child(2n), .flex4 li:nth-child(2n), .search_list li:nth-child(2n), .li_price li:nth-child(4n), .li_anker li:nth-child(2n), #ranking .ranking5 li:nth-child(2n), .li_price li:nth-child(2n), #mypage .flex3 li:nth-child(2n), .my_img li:nth-child(2n), .brand_list li:nth-child(3n), #card .flex3 li:nth-child(2n) {margin-right: 0;}
    .li_cat li, .brand_list li {width: calc(100% / 3);font-size: 1.4rem;}
    .brand_list li {margin: 0 0 -1px -1px;}
    .sp_txt_left, #card .flex3 li {text-align: left;}
    .li_houjin li {margin: 2rem 0 6rem;}
    .slider {margin: 0 auto 2rem;}
    .slider div {margin: 0;}
    #qa .li_anker li {margin-right: 0;width: 100%;}
    #ranking .ranking5 li:first-child, #ranking .ranking5 li:nth-child(2) {
        width: 100%;
        margin-right: 0;
    }
    #ranking .ranking5 li:first-child img , #ranking .ranking5 li:nth-child(2) img {
        max-width: 70%;
    }
    #manner .tbl02 {font-size: 1rem;}
    #manner .tbl02 th,#manner .tbl02 td {padding: 1rem .2rem;
    }
    .ranking5 li a p.rank_no {left: 5px;}
    #card .flex_noshi {
        justify-content: left;
    }
    #card .flex_noshi li {
        width: calc(94% / 3);
    }

    /*マイページ
    –––––––––––––––––––––––––––––––––––––––––––––––––– */
    #mypage .flex3 li a {
        border: 1px solid;
        }
   /* #mypage .flex3 li:nth-child(1) a {background: url(../img/ico_clock.svg) center 87% no-repeat;}
    #mypage .flex3 li:nth-child(2) a {background: url(../img/ico_gift.svg) center 87% no-repeat;}
    #mypage .flex3 li:nth-child(3) a {background: url(../img/ico_address.svg) center 87% no-repeat;}
    #mypage .flex3 li:nth-child(4) a {background: url(../img/ico_card.svg) center 87% no-repeat;}
    #mypage .flex3 li:nth-child(5) a {background: url(../img/ico_picture.svg) center 87% no-repeat;}
    #mypage .flex3 li:nth-child(6) a {background: url(../img/ico_rireki.svg) center 87% no-repeat;}
    #mypage .flex3 li:nth-child(7) a {background: url(../img/ico_member.svg) center 87% no-repeat;}
    #mypage .flex3 li:nth-child(8) a {background: url(../img/ico_catalog.svg) center 87% no-repeat;}
    #mypage .flex3 li:nth-child(9) a {background: url(../img/ico_logout.svg) center 87% no-repeat;}
    #mypage .flex3 li:nth-child(10) a {background: url(../img/ico_delete.svg) center 87% no-repeat;}*/
    .tbl01 th {text-align: center;padding: 1rem .5rem;}
    .tbl01 td {padding: 1rem .5rem;}
    .tbl100 th, .tbl100 td {display: block;width: 100%;}


.search_hd {font-size: 1.3rem;height: 30px;margin-bottom: 10px;}
.search_hd li:first-child {font-size: 1.2rem;}
.search_hd li:last-child dd {left: -20px;}
.search_hd dt {width: 130px;padding-right: 13px;}
.search_hd dd {width: 130px;}
.flex2 li {width: 100%;margin-bottom: 1rem;margin-right: 0;}
.ranking5 {overflow-x: scroll;-webkit-overflow-scrolling: touch;}
#ranking .ranking5 {overflow-x: initial;}
.ranking5 li {min-width: 160px;font-size: 1.2rem;}
.fixd {position: fixed;height: 100vh;overflow-y: hidden; padding-right: 15px;-ms-overflow-style: none;    /* IE, Edge 対応 */
        scrollbar-width: none;}
.fixd::-webkit-scrollbar {display:none;}
.flex_detail {
    flex-wrap: wrap;
}
.item_main {margin-bottom: 0;}

.flex_detail .item_left, .flex_detail .item_right, footer .bg_service ul li, .flex3 li, #card .bg_green .flex3 li {
    width: 100%;
    margin-right: 0;
}
.item_main {
    border: none;
    width: calc(100% + 20px);
    margin-left: -10px;
}
#breadcrumb {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overflow-scrolling: touch;
    overflow: auto;
}
.item_tag {background: #eee;padding: 1.5rem 1rem 0.5rem;margin-bottom: 2rem;font-size: 1.2rem;}
.bnr_catalog a {color: #fff; background: #bb6e6e73;}

.bnr_catalog {
    width: calc( 100% + 5px);
    margin-left: -5px;
}
.main_img {
    margin: 0 auto 4rem;
}
.flex_re {
    flex-wrap: wrap-reverse;
    display: flex;
}
.flex_re div{
    width: 100%;
}
/*sp footer*/
footer li {width: 46%;margin-right: 2%;text-align: left;}
footer li:nth-child(2n) {margin-right: 0;}
footer ul.ft_menu  {
    justify-content: left;
}
footer ul.ft_menu li a {
    padding: 2rem .5rem 2rem 1rem;
    border-bottom: 1px solid #ddd;
}
footer .bg_service ul li {
    width: calc(100% / 2);
    padding: 5rem 2% 2rem 2%;
    text-align: left;
    margin: 1rem 0 2rem 0;
}
footer .bg_service ul li h3 {
    font-size: 1.4rem;
}

footer .bg_service ul li:nth-child(2n), footer ul.ft_menu li:last-child a {
    border: 0;
}


   /* h2 {font-size: 3rem;text-align: center;margin-bottom: 2rem;}
    h2 span {font-size: 1.5rem;display: block;}
    h2 span.f100 {font-size: 5rem;display: initial;}
    h2 span.f50 {font-size: 2.5rem;display: initial;}
    .bg_yellow h3 {font-size: 2rem;position: relative;margin-bottom: 1.5rem;}
    .bg_yellow h3:first-letter {font-size: 2rem;}
    .flex2 {flex-wrap: wrap;}
    .flex2_r {flex-wrap: wrap-reverse;}
    .pmc:after {top: -10px;background-size: 80% auto;}
    .wrapping:after, .carry:after {top: 0;background-size: 80% auto;}
    .li_faq {
        font-size: 1.4rem;
        margin-bottom: 2rem;
    }
    .li_faq h3 {
        font-size: 2rem;
    }
    .li_faq li {
        width: 100%;
        background: #fff;
        margin-bottom: 1rem;
        padding: 10px 15px;
    }
    .slideshow li { width: 600px;}
    .naire_txt {width: 80%;}
    .txt01 {font-size: 1.5rem;}
    .flex_naire li {width: 100%;}
    .naire01:after {left: 0;}*/


/*スマホメニュー------------------------------*/
/*フッター*/
.r_cart {
    bottom: 0;
    position: fixed;
    background: #88aa8e;
    z-index: 9999;
    width: 100%;
    right: initial;
    top: initial;
    font-size: 10px;
}


/**　上に上がる動き　*/
.r_cart.UpMove{
    animation: UpAnime 0.5s forwards;
    bottom: 0;
}
@keyframes UpAnime{
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(100px);
  }
}
/*　下に下がる動き　*/
.r_cart.DownMove{
    animation: DownAnime 0.5s forwards;
    bottom: 0;
}
@keyframes DownAnime{
  from {
    transform: translateY(100px);
  }
  to {
    transform: translateY(0);
  }
}

.r_cart li {
    width: calc(100% / 3);
    text-align: center;
    border-right: 1px solid #ffffff47;
}
.r_cart li a, #hd_right ul.r_cart li.sp {
       padding: 36px 0 10px;
       color: #fff;
}
#hd_right ul.r_cart li.sp {
        cursor: pointer;
}
    #hd_right ul.r_cart li a:before, #hd_right ul.r_cart li.sp:before {
        background: url(../img/ico_mypage.svg) center top no-repeat;
        background-size: 20px 20px;
        content: '';
        position: absolute;
        width: 25px;
        height: 25px;
        bottom: 20px;
        top: 10px;
    }
    #hd_right ul.r_cart li.sp:before {
        background: url(../img/ico_search.svg) center top no-repeat;
        filter: brightness(100);
    }
    #hd_right ul.r_cart li:nth-child(3) a:before {
        left: calc( 50% - 12px);
    }
    #hd_right ul.r_cart li:last-child a:before {
        background: url(../img/ico_cart.svg) center top no-repeat;
        background-size: 25px 25px;
        margin-left: 0;
    }
    #hd_right ul.r_cart li:nth-child(2) a:before {
        left: calc(50% - 12px);
    }
    #hd_right .toggle_search {
        position: fixed;
        bottom: 60px;
        background: #dae5dc;
        padding: 2rem;
        display: none;
        z-index: 1;
    }
#nav_left {
  position: relative;
}

/*アイコンのスペース*/
/*ヘッダー*/
#nav_open {
    display: inline-block;
    width: 30px;
    height: 30px;
    vertical-align: middle;
    position: fixed;
    top: 20px;
    left: 15px;
    z-index: 100;
    cursor: pointer;
}

/*ハンバーガー*/
#nav_open span, #nav_open span:before, #nav_open span:after {
  position: absolute;
  height: 1px;/*線の太さ*/
  width: 25px;/*長さ*/
  border-radius: 3px;
  background: #222;
  display: block;
  content: '';
  cursor: pointer;
}
#nav_open span:before {
  bottom: -8px;
}
#nav_open span:after {
  bottom: -16px;
}

/*閉じるボタン*/
#nav_close {
    display: none;
    position: fixed;
    z-index: 99;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: black;
    opacity: 0;
    transition: .3s ease-in-out;
    cursor: pointer;
}
#nav_close:before {
    content: '';
    position: absolute;
    width: 30px;
    height: 2px;
    background: #fff;
    right: 7px;
    top: 20px;
    transform: rotate(45deg);
    animation: ani_rotate 1.5s;
    animation-fill-mode: forwards;
}
#nav_close:after {
    content: '';
    position: absolute;
    width: 30px;
    height: 2px;
    background: #fff;
    right: 7px;
    top: 20px;
    transform: rotate(-45deg);
    animation: ani_rotate2 1.5s;
    animation-fill-mode: forwards;
}
@keyframes ani_rotate {
  0%  {transform: rotate(45deg);}
  100%  {transform: rotate(405deg);}
}
@keyframes ani_rotate2 {
  0%  {transform: rotate(-45deg);}
  100%  {transform: rotate(315deg);}
}


/*メニューの中身*/
#nav_content {
  overflow: auto;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 90%;
  max-width: 330px;/*最大幅（お好みで調整を）*/
  height: 100%;
  background: #fff;
  transition: .3s ease-in-out;
  -webkit-transform: translateX(-105%);
  transform: translateX(-105%);
}
.member_name {
    background: #cee1d2;
    margin-top: -5px;
    width: calc(100% + 8rem);
    margin-left: -8rem;
  display: inline-block;
  position: relative;
  height: 40px;
  line-height: 40px;
  padding-left: 10px;
  margin-bottom: 4rem;
}

.member_name:after {
  position: absolute;
  content: '';
  width: 0px;
  height: 0px;
  z-index: 1;
}

.member_name:after {
  top: 0;
  right: 0;
  border-width: 20px 10px 20px 0px;
  border-color: transparent #fff transparent transparent;
  border-style: solid;
}

/*チェックがついたら表示させる*/
#nav_input:checked ~ #nav_close {
  display: block;
  opacity: .8;
}
.toggle dd {display: none;}

#nav_input:checked ~ #nav_content {
  -webkit-transform: translateX(0%);
  transform: translateX(0%);
  box-shadow: 6px 0 25px rgba(0,0,0,.15);
}
#nav_content dl li a {
    padding: 1.3rem 0;
    border-bottom: 1px dotted;
}
nav#nav_content ul li {
    margin-bottom: 0;
}

ul.card_flow li:after {
    width: 15px;
    height: 15px;
    border: 3px solid;
    border-color: #bea888 #bea888 transparent transparent;
    transform: rotate(136deg);
    position: absolute; content: '';
    top: auto;
    right: 0;
    left: 0;
    margin: 0 auto;
    bottom: -12px;
 }

ul.card_flow li {
    width: 100%;
}
}