/***********************************
　h5
************************************/

h5 {
  position: relative;
  padding: 0.6em;
  background: #e0edff;
}

h5:after {
  position: absolute;
  content: '';
  top: 100%;
  left: 30px;
  border: 15px solid transparent;
  border-top: 15px solid #e0edff;
  width: 0;
  height: 0;
}

/***********************************
スマホ class指定 top-title 主にh2用
************************************/
.top-title_outer{
  padding: 1em;
  text-align: center;
}

.top-title {
  position: relative;
  display: inline-block;
  padding: 0 55px;
}

.top-title:before, .top-title:after {
  content: '';
  position: absolute;
  top: 50%;
  display: inline-block;
  width: 45px;
  height: 1px;
  background-color: black;
}

.top-title:before {
  left: 0;
}

.top-title:after {
  right: 0;
}


/***********************************
h3 design
************************************/


h3 {
  /*線の種類（実線） 太さ 色*/
  border-bottom: solid 3px black;
}

h3 {
 font-size: 1.8em; 
 font-weight: bold;
}

/***********************************
h4 design
************************************/

h4 {
  font-size: 1.5em;
  font-weight: bold;
  padding: 1rem 2rem;
  border-left: 5px dotted #000;
  background: #f4f4f4;
}

/***********************************
 商品スペック
************************************/

th,td {
    border: solid 1px;  /* 枠線指定 */
    padding: 5px;      /* 余白指定 */
}
 
table {
    border-collapse:  collapse; /* セルの線を重ねる */
	width: 100%;
   table-layout: 2em;        /* セルの幅計算指定 */
}

.wide {
    width: 20%;
 }

/***********************************
商品詳細画面のキャッチコピーを改行
************************************/

.fs-c-productNameHeading__copy {
display:block;
}



/***********************************
box3　背景カラーありの文字BOX
************************************/
.box3 {
    padding: 0.5em 1em;
    margin: 2em 0;
    color: #2c2c2f;
    background: #ffd700;/*背景色*/
    border: solid 1px #696969;
}
.box3 p {
    margin: 0; 
    padding: 0;
}

/***********************************
会社概要 テーブル
************************************/

.company {
width: 100%;
}
 
.company th,
.company td {
border: 1px solid #ccc;
padding: 20px;
}
 
.company th {
font-weight: bold;
background-color: #dedede; 
}
 
@media screen and (max-width: 767px) {
.company,
.company tr,
.company td,
.company th {display:block;}
.company th {width:auto;}
}

/***********************************
高額購入割引の送料の文字色・サイズの変更
************************************/

.fs-c-cartDiscountInfo--postage .fs-c-cartDiscountInfo__info{
font-size: 1.5em;
padding: 1em 1em 0;
color: #D9341D;
line-height: 120%;
font-weight: bold;
}



/***********************************
商品名　文字
************************************/

.fs-c-productName__name {
    font-weight:  bold;
    font-size: 1.2em;
}

/***********************************
　価格表示
************************************/

.fs-c-price__value {
    font-size: 1.2em;
}

/***********************************
サイドメニュー　リスト
************************************/

a {
color:#3c3c3c;
}

ol.saide_1{
  counter-reset:list;
  list-style-type:none;
  padding:0;
}
ol.saide_1 li{
  position:relative;
  padding: 0 0 0 20px;
  margin: 7px 0 7px 0px;
  line-height: 30px;
  border-bottom: dashed 0.5px #3c3c3c;
}
ol.saide_1 li:before{
  counter-increment: list;
  content: "";
  display: block;
  position: absolute;
  left: 10px;
  height: 0;
  width: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 7px solid #F6A38B;
  top: 50%;
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}


/***********************************
google form レスポンシブ
************************************/
iframe[src^="https://docs.google.com/forms/d/e"]{
  width:100%;
}


/***********************************
目次BOX
************************************/
/* タイトル付　枠　1　*/
.kakomi-box11 {
 position: relative;
 margin: 2em auto;
 padding: 1.2em;
 color: #555555; /* 文章色 */
 background-color: #fff; /* 背景色 */
 border: 1px solid #555555; /* 枠線の太さ・色 */
 width: 90%;
}
.title-box11 {
 position: absolute;
 padding: 0 .5em;
 left: 20px;
 top: -15px;
 font-weight: bold;
 background-color: #fff; /* タイトル背景色 */
 color: #555555; /* タイトル文字色 */
}


/***********************************
ヘッダ　ナビゲーション　nav1
************************************/

nav1 {
text-align: center;
}
nav1 ul{
margin: 0 ;
padding: 0 ;
}
nav1 li{
list-style: none;
display: inline-block;
width: 10%;
min-width: 90px;
}
nav1 li:not(:last-child){
border-right:2px solid #ddd;
}
nav1 a{
text-decoration: none;
color: #333;
}
nav1 a.current{
color: #00B0F0;
border-bottom:2px solid #00B0F0;
}
nav1 a:hover{
color:#F7CB4D;
border-bottom:2px solid #F7CB4D;
}


/***********************************
囲み枠　影によるボックス領域 sdgs
************************************/

.boxsdgs {
    margin: 2em 0;
    background: #009EDB;
}
.boxsdgs .box-title {
    font-size: 1.2em;
    background: #009EDB;
    padding: 4px;
    text-align: center;
    color: #FFF;
    font-weight: bold;
    letter-spacing: 0.05em;
}


/***********************************
囲み枠　影によるボックス領域　box11
************************************/

.box11{
    font-size: 1.2em;
    padding: 0.5em 1em;
    margin: 2em 0;
    color: #5d627b;
    background: white;
    border-top: solid 5px #5d627b;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22);
}
.box11 p {
    margin: 0; 
    padding: 0;
}

/***********************************
囲み枠　影によるボックス領域 box28
************************************/

.box28 {
    position: relative;
    margin: 2em 0;
    padding: 25px 10px 7px;
    border: solid 2px #252839;
}
.box28 .box-title {
    position: absolute;
    display: inline-block;
    top: -2px;
    left: -2px;
    padding: 0 9px;
    height: 25px;
    line-height: 30px;
    font-size: 22px;
    background: #252839;
    color: #ffffff;
    font-weight: bold;
}
.box28 p {
    margin: 0; 
    padding: 0;
}

/***********************************
囲み枠　影によるボックス領域 box29
************************************/

.box29 {
    margin: 2em 0;
    background: #f4f4f4;
}
.box29 .box-title {
    font-size: 1.2em;
    background: #9AB878;
    padding: 4px;
    text-align: center;
    color: #FFF;
    font-weight: bold;
    letter-spacing: 0.05em;
}
.box29 p {
    padding: 15px 20px;
    margin: 0;
}



/***********************************
囲み枠　影によるボックス領域 box30
************************************/

.box30 {
    margin: 2em 0;
    background: #f1f1f1;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22);
}
.box30 .box-title {
    font-size: 1.2em;
    background: #5d627b;
    padding: 4px;
    text-align: center;
    color: #FFF;
    font-weight: bold;
    letter-spacing: 0.05em;
}
.box30 p {
    padding: 15px 20px;
    margin: 0;
}

/***********************************
囲み枠　影によるボックス領域 box1
************************************/

.box1 {
    padding: 0.5em 1em;
    margin: 3em;
    text-align: center;
    font-weight: bold;
    border: solid 3px #fc9420;
}
.box1 p {
    margin: 0; 
    padding: 0;
}

/***********************************
囲み枠　影によるボックス領域 box100
************************************/

.box100 {
    padding: 0.5em 1em;
    margin-right: 0;
    margin-left: auto;
    width: 30%;
    text-align: center;
    border: solid 1px #000000;

/***********************************
チャット風レイアウト
************************************/
/*画像左側のチャット*/
.chat-box {
    width: 100%;
    height: auto;
    overflow: hidden; 
    margin-bottom: 20px;
}
.chat-face {
    float: left;
    margin-right: -120px;
}
.chat-face img{
　　width: 90px;
    height: 90px;
    border-radius: 50%;;
    border: 1px solid #ccc;
    box-shadow: 0 0 4px #ddd;
}
.chat-area {
    width: 100%;
    float: right;
}
.chat-hukidashi {
    display: inline-block;
    padding: 15px 20px;
    margin-left: 120px;
    margin-top: 8px;
    border-radius: 10px;
    position: relative; 
    background-color: #D9F0FF; 
}
.chat-hukidashi p{
    margin-bottom: 0px;
}
.chat-hukidashi:after {
    content: "";
    position: absolute;
    top: 35px; left: -10px;
    margin-top: -10px;
    display: block;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 10px 10px 10px 0;
    border-color: transparent #D9F0FF transparent transparent;
}

.chat-name {
padding: 5px 0 0;
font-size: 10px;
text-align: center;
}

/*画像右側のチャット*/
.chat-box2{
    width: 100%;
    height: auto;
    overflow: hidden; 
    margin-bottom: 20px;
}
.chat-face2 {
    float: right;
    margin-left: -120px;
}
.chat-face2 img{
　　width: 90px;
    height: 90px;
    border-radius: 50%;;
    border: 1px solid #ccc;
    box-shadow: 0 0 4px #ddd;
}
.chat-area2 {
    width: 100%;
    float: left;
}
.chat-hukidashi2 {
    display: inline-block; 
    padding: 15px 20px;
    margin-right: 120px;
    margin-top: 8px;
    border-radius: 10px;
    position: relative; 
    background-color: #BCF5A9; 
    float: right;
}
.chat-hukidashi2 p{
    margin-bottom: 0px;
}
.chat-hukidashi2:after {
    content: "";
    position: absolute;
    top: 35px; right: -20px;
    margin-top: -10px;
    display: block;
    width: 0px;
    height: 0px;
    border-style: solid;
   border-width: 10px 10px 10px 10px;
    border-color: transparent transparent transparent #BCF5A9; 
 }

/*スマホの時は画像を小さく*/
@media screen and (max-width: 440px){

/*画像左側のチャット*/
.chat-face {
    float: left;
    margin-right: -80px;
}
.chat-face img{
     width: 60px;
    height: 60px;
    border-radius: 50%;;
    border: 1px solid #ccc;
    box-shadow: 0 0 4px #ddd;
}
.chat-hukidashi {
    display: inline-block;
    padding: 10px 10px;
    margin-left: 80px;
    margin-top: 0px;
    border-radius: 10px;
    position: relative; 
    background-color: #D9F0FF; 
}

/*画像右側のチャット*/
.chat-face2 {
    float: right;
    margin-left: -80px;
}
.chat-face2 img{
    width: 60px;
    height: 60px;
    border-radius: 50%;px;
    border: 1px solid #ccc;
    box-shadow: 0 0 4px #ddd;
}

.chat-hukidashi2 {
    display: inline-block; 
    padding: 10px 10px;
    margin-right: 80px;
    margin-top: 0px;
    border-radius: 10px;
    position: relative;
    background-color: #BCF5A9; 
    float: right;
}
}





/*スマホサイトで特定のクラスがあるときは2列配置：column--4*/
@media screen and (max-width: 960px){
.fs-pt-column--4 .fs-pt-column__item {
-ms-grid-columns: 1fr 2fr;
grid-template-columns: 1fr 2fr;
-ms-grid-rows: auto 1fr;
grid-template-rows: auto 1fr;
    }


.fs-pt-column--4 .fs-pt-column__item .fs-pt-column__image {
-ms-grid-column: 1;
grid-column: 1;
-ms-grid-row: 1 /span 2;
grid-row: 1 /span 2;
margin-right: 10px;
}


.fs-pt-column--4 .fs-pt-column__item .fs-pt-column__description{
-ms-grid-column: 2;
grid-column: 2;
-ms-grid-row: 2;
grid-row: 2;
}


.fs-pt-column--4 .fs-pt-column__item .fs-pt-column__heading {
-ms-grid-column: 2;
grid-column: 2;
-ms-grid-row: 1;
grid-row: 1;
}} 




/***********************************
繁忙期のお届けについて テーブル
************************************/

.info_send {
width: 100%;
}
 
.info_send th,
.info_send td {
border: 1px solid #ccc;
padding: 10px;
}
 
.info_send th {
font-weight: bold;
background-color: #f0f0f0; 
}
 



/***********************************
ご注意 テーブル
************************************/

.attention {
width: 100%;
}
 
.attention th,
.attention td {
border: 1px solid #ccc;
padding: 20px;
}
 
.attention th {
    font-weight: bold;
    color: #ffffff;     /* 文字色指定 */
    background-color: #3E5F35; 
}
 
@media screen and (max-width: 767px) {
.attention,
.attention tr,
.attention td,
.attention th {display:block;}
.attention th {width:auto;}
}


/***********************************
ご注意　クール便 テーブル
************************************/

.attention_cool {
width: 100%;
}
 
.attention_cool th,
.attention_cool td {
border: 1px solid #ccc;
padding: 10px;
}
 
.attention_cool th {
    font-weight: bold;
    color: #ffffff;     /* 文字色指定 */
    background-color: #0068c0; 
}
 
@media screen and (max-width: 767px) {
.attention_cool,
.attention_cool tr,
.attention_cool td,
.attention_cool th {display:block;}
.attention_cool th {width:auto;}
}


/***********************************
googlemapレスポンシブ
************************************/

.googlemap {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}

.googlemap iframe,
.googlemap object,
.googlemap embed {
    position: absolute;
    top: 10%;
    left: 10%;
    width: 80%;
    height: 80%;
}






/***********************************
youtube レスポンシブ
************************************/
.youtube{
position: relative;
padding-bottom: 56.25%;
}
.youtube iframe{
width: 100%;
height:100%;
position: absolute;
left: 0;
top: 0;	
}

/***********************************
商品詳細画面のキャッチコピーを改行
************************************/

.fs-c-productNameHeading__copy {
display:block;
}


/***********************************
母の日特集ページのテキスト
************************************/
.mothersday{
font-size:18px;
line-height:2;
}


/***********************************
カテゴリー　レスポンシブ
************************************/
.category_sp {
    display: flex;
    justify-content: center;
    box-sizing: border-box;
    list-style: none;
    margin: 0;
    padding: 0;
}

.category_sp > li {
  box-sizing: border-box;
}

li.category_sp__item {}

.category_sp__item + .category_sp__item {
  margin-left: 8px;
}

.category_sp__item__icon {
  display: block;
}

.category_sp__item__icon img {
  display: block;
}

/***********************************
ブログカード　ブログ埋めこみ
************************************/

.bcard-wrapper{
    display: block;
    width: 100%;
    max-width: 500px;
    margin: 10px 0px;
    border-radius: 3px;
    padding: 12px;
    border: 3px solid #e0e0e0;
}
.bcard-site,.bcard-url{
    font-size: 12px;
    line-height: 1.3;
    overflow: hidden;
    max-height: 15px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}
.bcard-header {
    position: relative;
    height: 30px;
    margin-bottom: 5px;
    display: block;
}
.withgfav{padding-left: 23px;}
.bcard-favicon {position: absolute;
    top: 0px; left:0px; width:16px; height:16px;}
.bcard-main{
    overflow: hidden;
    position: relative;
    display: block;
}
.withogimg{
    padding-right: 110px;
    height: 100px;
}
 .bcard-img {
width: 100px;
height: 100px; 
position: absolute;
    top: 0;
    right: 0;
    background-size:cover;
    background-position:center center;
}
 .bcard-title{
    font-size: 17px;
    margin: 0 0 2px;
    line-height: 1.4;
    max-height: 47px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-weight: bold;
}
 .bcard-description {
    line-height: 1.5;
    font-size: 12px;
    max-height: 72px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}
.bcard-title a{color:#424242;}
.bcard-url a{color:#9e9e9e;}
.bcard-title a:hover,.bcard-url a:hover,.bcard-site a:hover{text-decoration:underline;}