@charset "utf-8";

html {
    box-sizing: border-box;
    font-size: 62.5%;
    background-color:#fff;
}

*, *:before, *:after {
    box-sizing: inherit;
}

body {
    font-family: "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", sans-serif;
    color:#333
}

a {
    color:#333;
    text-decoration: none
}

.ibParent{
    letter-spacing: -0.4em
}

i{
    vertical-align: middle
}

.red{
    color:#d00
}

.svg-inline--fa{
    vertical-align: middle
}

.disnon{
    display: none
}

.blueLink{
    color:#1359ac;
}

.wrapper {
    width:640px;
    background: url(../images/sky.jpg) no-repeat;
    background-size: 100%;
    position: relative;
    padding-bottom: 1px;
    transition-duration:3s;
    -moz-transition-duration:3s;
    -webkit-transition-duration:3s;
    -o-transition-duration:3s;
    -ms-transition-duration:3s;
}

.xmas .wrapper {
    background-image: url(../images/sky_snowman.jpg);
}

.xmas .wrapper {
    background-image: url(../images/sky_amabie.jpg);
}


.row {
    margin-left: -30px;
    margin-right: -30px;
}


/* フォントサイズ */
.fsize20{
    font-size:20px
}

/* ヘッダーナビ */
#header{

}

.navHeader {
    position: relative;
    height: 235px;
}

#header .logo {
    position: absolute;
    left: 30px;
    top: 80px;
    width: 260px;
    height: 106px;
}

.prBtnBox{
    padding:0 20px;
    letter-spacing: -0.4em
}

.delivOk {
    width: 168px;
    line-height: 50px;
    background: #ffffff;
    text-align: center;
    position: absolute;
    font-size: 24px;
    font-family: "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", sans-serif;
    font-weight: bold;
    border-radius: 50px;
    border: 4px #a67d61 solid;
    color: #854a22;
    right: 28px;
    top: 158px;
}

.returnOk {
    width: 290px;
    margin-left: 20px;
    line-height: 50px;
    background: #ffffff;
    text-align: center;
    display: inline-block;
    font-size: 24px;
    font-family: "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", sans-serif;
    font-weight: bold;
    border-radius: 50px;
    border: 4px #ec3371 solid;
    color: #ec3371;
    /* right: 28px; */
    /* top: 158px; */
    letter-spacing: normal;
}
.returnOk2 {
    width: 290px;
    margin-top: 10px;
    margin-left: 20px;
    line-height: 50px;
    background: #ffffff;
    text-align: center;
    display: inline-block;
    font-size: 24px;
    font-family: "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", sans-serif;
    font-weight: bold;
    border-radius: 50px;
    border: 4px #ec3371 solid;
    color: #ec3371;
    /* right: 28px; */
    /* top: 158px; */
    letter-spacing: normal;
}

.cleanOk {
    width: 290px;
    line-height: 50px;
    background: #ffffff;
    text-align: center;
    display: inline-block;
    font-size: 24px;
    font-family: "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", sans-serif;
    font-weight: bold;
    border-radius: 50px;
    border: 4px #ec3371 solid;
    color: #ec3371;
    /* right: 28px; */
    left: 28px;
    top: 210px;
    letter-spacing: normal;
}

.cleanOk2 {
    width: 290px;
    margin-top: 10px;
    line-height: 50px;
    background: #ffffff;
    text-align: center;
    display: inline-block;
    font-size: 24px;
    font-family: "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", sans-serif;
    font-weight: bold;
    border-radius: 50px;
    border: 4px #ec3371 solid;
    color: #ec3371;
    /* right: 28px; */
    left: 28px;
    top: 210px;
    letter-spacing: normal;
}

/* ハンバーガーメニュー */
.humburger {
    position: absolute;
    width: 80px;
    height: 70px;
    padding-top: 2px;
    text-align: center;
    font-size: 60px;
    background: #fff;
    color: #999;
    border-radius: 10px;
    right: 30px;
    top: 50px;
    border: 1px solid #999;
    display: table-cell;
    vertical-align: middle;
}

.humburger i{
    position: absolute;
    top: 4px;
    left: 13px;
}

.menu{
  transition: .3s ease-in-out;
  height:0px;
  overflow: hidden;
  z-index: 100;
}

#ckMenu{
    display: none
}

#ckMenu:checked ~ .menu {   
  height:592px  
}

.menu{

    background: #fff;
    font-size:2.6rem
}

.menu a{
    display: block;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left:30px;
    line-height: 40px;
    color:#777
}

.menu ul{
    margin-top:15px;
}

.menu li {
    position: relative;
    display: block;
}

/* メイン */
.main{
    width:640px;
}

/* フッターアコーディオン */

.gnav {
    margin: 0 auto;
    padding: 0;
}

.gnav label{
    line-height:100px;
    padding-left:20px;
    position: relative;
    display: block;
    cursor :pointer;
    font-size:26px;
    font-weight:bold
}

.gnav a {
    display: block;
    text-decoration: none;
    line-height: 100px;
    padding-left:20px
}


input {
    display: none;
}

.gnav ul {
    margin: 0;
    padding: 0;
    background :#fefaf2;
    list-style: none;
    border-bottom: 1px solid #eee;
}

.gnav li {
    max-height: 0;
    overflow-y: hidden;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
    position: relative;
    font-size:26px
}

.gnav li:before{
    font-family: 'FontAwesome';
    position: absolute;
    right:20px;
    top:50%;
    margin-top:-20px;
    content:"\f0da";
    color:#a3cf53
}

.menuBar:checked + .jsLinks li{
    max-height: 92px;
    opacity: 1;
}

.gnav label img,
.gnav a.directLink img{
    width:60px;
    margin-right:20px;
    vertical-align: middle
}

.gnav label:before,
.gnav a.directLink:before{
    font-family: 'FontAwesome';
    position: absolute;
    right:20px;
    content:"\f054";
}

.gnav label,
.gnav a.directLink{
    line-height: 100px;
    padding-left: 20px;
    position: relative;
    display: block;
    cursor: pointer;
    font-weight: bold;
    font-size:26px
}

.gnav a.directLink{
    border-bottom: 1px solid #eee;
}


/* パンくず */
.pankuzu {
    font-size: 24px;
    padding: 5px 20px;
    padding-bottom:10px;
    line-height: 30px;
    border-bottom: 1px solid #999;
    /* はみ出し部分をスクロールする */
    overflow-x: scroll;
    /* テキストを改行しないようにする */
    word-break: keep-all;
    white-space: nowrap;
    /* スクロールの動きを滑らかにする */
    -webkit-overflow-scrolling: touch;

}

.pankuzu li{
    display: inline-block
}

.pankuzu a{
    color:#1359ac;
    text-decoration: underline
}

.pankuzu li:after{
    content:"\03e";
    display: inline-block;
    margin:10px
}

.pankuzu li:last-child:after{
    display: none;
}


/* フッター　コンテンツバナー */
.banners{
    padding:0 30px
}

.banners figure img {
    height: auto;
    width: 100%;
}

.banner.other {
    margin-top: 30px;
}

.banner.other a {
    font-size: 26px;
    line-height: 40px;
    border: 6px solid #eee;
    text-decoration: none;
    font-weight: bold;
    display: block;
    padding: 20px 20px;
    border-radius: 7px;
    -moz-border-radius: 7px;
    -webkit-border-radius: 7px;
    -o-border-radius: 7px;
    -ms-border-radius: 7px;
}

.banner.other a figure {
    display: block;
    float: left;
    margin-right: 20px;
    height: 80px;
    width: 80px;
}

.banner.other a span {
    display: block;
    font-size: 22px;
    font-weight: normal;
    margin-bottom: 0;
    padding: 0;
    color: #e5004f;
}

.banner.other .fa-twitter {
    font-size: 80px;
    color: #00aced;
}

/* 会社情報 */
.companyData{
    text-align: center
}

.companyData .logo{
    width:260px;
    margin:0 auto;
    margin-top: 60px;    
}

.companyData .logo img{
    width:100%
}

.companyData .contact {
    text-align: center;
    margin-top: 40px;
}

.companyData .contact h3 {
    display: block;
    font-size: 28px;
    margin-bottom: 30px;
}

.companyData .contact h4 {
    display: block;
    font-size: 60px;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
}

.companyData .contact a {
    text-decoration: none;
}

.companyData .contact h4 span {
    font-size: 28px;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
}

.companyData .contact .address {
    display: block;
    margin-top: 20px;
    font-size: 20px;
    line-height: 32px;
}

.companyData .contact .address .fa-envelope-o {
    margin-right: 10px;
}


.twitter-widget-wrapper iframe { width: 580px !important; }

iframe.twitter-timeline-rendered {
width: 580px !important;
margin:0 auto;/*これを入れないとめっちゃ細く200pxくらいで表示されます。以下イメージあり！*/
}

.timeline-Widget {
max-width: 300px!important;
width:200px !important; }

.twitterTop{
    background: #1da1f2;
    color:#fff;
    font-size:32px;
    text-align: center;
    padding:5px;
    margin-top:40px;
}

#fb-root {
    margin-top: 50px;
}
/* フェイスブック */
.fb-like-box{
    margin-top:30px;
    margin-left:40px;
    height:auto!important
}

.sns {
    text-align: center;
}

.snsIcon {
    font-size: 44px;
    color: #00aced;
    margin-top: 40px;
    display: -webkit-inline-box;
}

/*はてなブック*/
iframe.hatena-bookmark-button-frame {
    margin-left: 30px;
}


.snsIcon img {
    width: 76px;
    vertical-align: top;
    margin-bottom: 8px;
    /*margin-right: 60px;*/
}

.snsIcon .fa-twitter {
    color: #00aced;
    font-size: 90px;
    margin-top: -10px;
}

.companyData .pcback a {
    font-size: 24px;
    text-decoration: none;
    color: #000;
    border: 2px solid #ccc;
    display: block;
    width: 400px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -o-border-radius: 5px;
    -ms-border-radius: 5px;
}

.baseFooter{
    padding-left:30px;
    padding-right: 30px
}

.baseFooter .pcback {
    width: 400px;
    height: 60px;
    margin: 0 auto;
    margin-top: 40px;
}

.baseFooter .pcback a {
    font-size: 24px;
    text-decoration: none;
    color: #000;
    border: 2px solid #ccc;
    display: block;
    width: 400px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -o-border-radius: 5px;
    -ms-border-radius: 5px;
}

.baseFooter .pcback .fa {
    margin-right: 10px;
}

.baseFooter .policy {
    text-align: center;
    font-size: 22px;
    margin-top: 10px;
    line-height: 48px;
}

.baseFooter .policy a {
    text-decoration: none;
}

.baseFooter .policy .fa {
    margin-right: 10px;
}

/* コピーライト */

footer .copyRight {
    width:640px;
    margin-top:20px;
    text-align: center;
    font-size: 20px;
    display: block;
    height: 100px;
    line-height:normal;
    padding-top:65px;
    background-color: #FFF;
    color: #fff;
    background-image: url(../images/copyright_bg_img.jpg);
    background-repeat: repeat-x;
    background-position: center bottom;
    background-size: 600px 100px;
}

footer .copyRight {
    font-family: 'roboto', sans-serif;
    font-weight: 400;
}

/* キャンペーン価格 */

.table-bordered td span.through {
    text-decoration: line-through;
    background-color: #fff;
    color: #f00;
    display: inline;
    font-size: 24px;
    text-align: left;
    margin: 0;
    padding: 0;
}


.table-bordered td span.through span {
    background-color: #fff;
    color: #000;
    display: inline;
    font-size: 24px;
    text-align: left;
    margin: 0;
    padding: 0;
}

.table-bordered th span.campaign {
    background-color: #e5004f;
    color: #fff;
    display: block;
    font-size: 22px;
    text-align: center;
    margin-bottom: 10px;
    padding: 4px 4px;
}

/* グラデーション */
.grdSilver {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0.88, #d9d9d9), color-stop(0.15, #fcfcfc), color-stop(0.00, #fefefe));
    background: -webkit-linear-gradient(top, #fefefe 0%, #fcfcfc 15%, #d9d9d9 88%);
    background: -moz-linear-gradient(top, #fefefe 0%, #fcfcfc 15%, #d9d9d9 88%);
    background: -o-linear-gradient(top, #fefefe 0%, #fcfcfc 15%, #d9d9d9 88%);
    background: -ms-linear-gradient(top, #fefefe 0%, #fcfcfc 15%, #d9d9d9 88%);
    background: linear-gradient(to bottom, #fefefe 0%, #fcfcfc 15%, #d9d9d9 88%);
}

.grecaptcha-badge {
    opacity: 0;
}

/* 期間限定 雪 */

/*動かす前段階のアニメーション*/
.wrapper .snow {
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: Drop;
  animation-timing-function: linear;
  opacity: 0;
  transform-origin: 0px 0px;
  height: 100%;
}

/*背景の設定*/
section#snow {
    /* background: #142744; */
    overflow: hidden;
    width: 100%;
    /* height: 100%; */
    position: absolute;
    top: 0;
    height: 1000px;
    z-index: 9999;
}

#snow .inner {
  height: 100%;
  width: 100%;
}
/*雪の設定*/
.wrapper .snow {
  background: #fff;
  border-radius: 4px;
  display: block;
  height: 8px;
  position: absolute;
  width: 8px;
}

/*いくつかランダムに大きさを変える*/
#snow .inner div.snowflake1,
#snow .inner div.snowflake2,
#snow .inner div.snowflake5,
#snow .inner div.snowflake8 {
  background-size: 5px 6px;
}

/*雪をどの辺りに表示するか*/
.snowflake1 {
  animation-duration: 2.4s;
  left: 15%;
}

.snowflake2 {
  animation-delay: 0.3s;
  animation-duration: 2.7s;
  left: 19%;
}

.snowflake3 {
  animation-delay: 0.5s;
  animation-duration: 2.9s;
  left: 28%;
}

.snowflake4 {
  animation-delay: 0s;
  animation-duration: 2.6s;
  left: 38%;
}

.snowflake5 {
  animation-delay: 1s;
  animation-duration: 2.6s;
  left: 50%;
}

.snowflake6 {
  animation-delay: 1.2s;
  animation-duration: 2.2s;
  left: 60%;
}

.snowflake7 {
  animation-delay: 1.2s;
  animation-duration: 2.7s;
  left: 70%;
}

.snowflake8 {
  animation-delay: 1.4s;
  animation-duration: 2.9s;
  left: 85%;
}

/*アニメーションの設定*/
@keyframes Drop {
  0% {
    opacity: 0;
    transform: translateY(0px);
  }

  50% {
    opacity: 1;
    transform: translateY(50px);
  }

  100% {
    opacity: 0.3;
    transform: translateY(120px);
  }
}

.xmasBtn {
    padding: 0px 8px;
    position: absolute;
    right: 199px;
    top: 114px;
    line-height: 32px;
    border-radius: 10px;
    font-size: 24px;
    font-weight: bold;
    width: 53px;
    z-index:5
}

#ckMenu:checked ~ .xmasBtn {
    display:none
}

.mouseBtn {
    padding: 0px 8px;
    position: absolute;
    right: 187px;
    top: 114px;
    line-height: 32px;
    border-radius: 10px;
    font-size: 24px;
    font-weight: bold;
    width: 80px;
    z-index:5;
    transition-duration:3s;
    -moz-transition-duration:3s;
    -webkit-transition-duration:3s;
    -o-transition-duration:3s;
    -ms-transition-duration:3s;
}

.mouseBtn img {
    width:100%;
    transition-duration:3s;
    -moz-transition-duration:3s;
    -webkit-transition-duration:3s;
    -o-transition-duration:3s;
    -ms-transition-duration:3s;
}

.xmas .mouseBtn,
.koinobori .mouseBtn{
    opacity:0
}

#ckMenu:checked ~ .mouseBtn {
    display:none
}

/* 吹き出し本体 */
.mouseBtn .balloon {
    position: relative;
    /* padding: 20px; */
    background-color: #ffffff;
    box-shadow: 0px 0px 10px 0px #a7a7a7;
    left: -109px;
    border-radius: 5px;
    width: 120px;
    text-align: center;
    color: #666;
    display: none
}
/* 三角アイコン */
.mouseBtn .balloon::before {
    content: '';
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    left: 108px;
    top: -7px;
    /* border-right: 10px solid transparent; */
    border-bottom: 10px solid #ffffff;
    border-left: 10px solid transparent;
}


/* 点滅 */
.blinking{
    animation:blink 0.5s linear infinite alternate;
}
@-webkit-keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}
@-moz-keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}
@keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}

/* カート内商品数 */
.fixFooter div.cartCount {
    display: inline-block;
    position: absolute;
    background: #653939;
    min-width: 30px;
    height: 30px;
    color: #fff;
    top: 6px;
    right: 15px;
    border-radius: 30px;
    font-size: 20px;
    line-height: 30px;
    text-align: center;
    padding: 0;
    padding-left: 6px;
    padding-right:3px;
}

/* メーカー */
.makerSearch {
    font-size:28px;    
    font-weight: bold;
    text-align: center;
    border-radius: 5px;
    border: 1px solid #CFC7BE;
    background: #faf9f8;
    padding: 20px 20px;
    padding-bottom: 20px;
    color: #5B3215;
    margin:20px;
    margin-top: 25px;
}

.gnav ul.makerList{
    border-bottom:none;

}

.makerSearch select{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background:#fff url('/sp/images/common/arrow.gif') no-repeat;
    background-position: 525px 25px;
    background-size: 15px;    
    border-radius: 10px;
    color:#333;
    display: block;
    margin:0 auto;
    margin-top:20px;
    margin-bottom:30px;
    width:100%;
    height:60px;
    border-radius: 10px;
    font-size:24px;
    font-weight: normal;
    padding-left:10px
}

.makerSearch li{
    text-align: left;
    margin:30px 0;
    font-size:24px
}
    
.makerSearch a{
    color:#1359ac
}

.banner.other a.campAlliance{
    font-size:24px
}


.Purpose {
    font-size: 28px;
    font-weight: bold;
    text-align: center;
    border-radius: 5px;
    border: 1px solid #CFC7BE;
    background: #faf9f8;
    padding: 20px 20px;
    padding-bottom: 20px;
    color: #5B3215;
    margin: 20px;
    margin-top: 25px;
    overflow: hidden;
}

.container-fluid-bottom {
    margin-right: auto;
    margin-left: auto;
    padding-left: 30px;
    padding-right: 30px;
}
.no-gutters-bottom {
    margin-right: 0;
    margin-left: 0;
}
.no-gutters-bottom > [class^="col-"], .row.no-gutters-bottom > [class*=" col-"] {
    padding-right: 0;
    padding-left: 0;
}
.col-xs-6a {
    width: 50%;
    float: left;
    position: relative;
    min-height: 1px;
}
.row:before {
    content: " ";
    display: table;
}

.popularity-bottom { margin-bottom:50px; margin-top:40px;}
.popularity-bottom .row .col-xs-6a a { font-size:24px; background-color:#FFF;color:#313131; border:1px solid #666; height:100px; line-height:100px; text-decoration: none; display:block; font-weight:bold;}
.popularity-bottom .col-xs-6a a .fa { position:absolute; top:0; right:16px; line-height:106px; }
.popularity-bottom .col-xs-6a a img { width:50px; height:50px; position:absolute; top:24px; left:14px; }
.popularity-bottom .col-xs-6a.leftTop a { border-bottom:none;border-right:none; border-top-left-radius : 0.5em; -moz-border-top-left-radius : 0.5em;-webkit-border-top-left-radius : 0.5em;-o-border-top-left-radius : 0.5em;-ms-border-top-left-radius : 0.5em;}
.popularity-bottom .col-xs-6a.rightTop a {  border-bottom:none;border-top-right-radius : 0.5em;-moz-border-top-right-radius : 0.5em;-webkit-border-top-right-radius : 0.5em;-o-border-top-right-radius : 0.5em;-ms-border-top-right-radius : 0.5em;}
.popularity-bottom .col-xs-6a.leftBottom a {  border-right:none;border-bottom-left-radius : 0.5em;-moz-border-bottom-left-radius : 0.5em;-webkit-border-bottom-left-radius : 0.5em;-o-border-bottom-left-radius : 0.5em;-ms-border-bottom-left-radius : 0.5em;}
.popularity-bottom .col-xs-6a.rightBottom a {  border-bottom-right-radius : 0.5em;-moz-border-bottom-right-radius : 0.5em;-webkit-border-bottom-right-radius : 0.5em;-o-border-bottom-right-radius : 0.5em;-ms-border-bottom-right-radius : 0.5em;}
.dspnon {display: inherit;}

h2.bottom-title {
    font-size: 28px;
    font-weight: bold;
    text-align: center;
    color: #5B3215;
    margin-top: 25px;
    padding-bottom: 0px;
    padding-top: 0px;
    background-image: none;

}

.insta-posts{
    width: 100vw;
    /*height: calc(50vw + 100px);*/
    height: 420px;
    box-sizing : border-box;
    padding : 1em;
}
.google-reviews{
    width: 100vw;
    height: 500px;
    box-sizing : border-box;
    padding : 1em;
}