@charset "UTF-8";



/*---------------- コンテンツ ------------------*/

/*共通*/

/*----- ポイントアイコンの垂直表示調整（お問い合わせフォームなど、茶色の■など） -----*/
img.point {
  position: relative;
  top: 3px;
  margin-right: 3px;
}
/* ----- /ポイントアイコンの垂直表示調整 -----*/


	

	
/*---------- 枠内で２行目以降を１文字分ずらす（枠なし）（問い合わせフォームなど） 共通 ----------*/
.moji_box02nobo{
  background-color: #ffffff;
  padding: 0 2em 0 1.5em;
  margin-bottom: 20px;
}

.moji_box02nobo p{
  text-indent: -1.5em; 
  padding-left:1.5em;   /*text-indentとセット*/
}


/*---- dl.dt.dd 一文字ずらす（メルマガページ　ほか） ----*/
.list-1moji {
  margin: 0;
  padding: 15px 0 0 0;
}
.list-1moji dd {
  padding-left: 15px;
  padding-bottom: 15px;
}



/*---------------------- シンプルなflexbox,左に画像　右に文字 -----------------*/
.flex_simple-wrap {
  display: flex;
}

.flex_simple-wrap img {
  max-width: 100%;
  align-self: flex-start; /* レスポンシブで画像が縦長になるのを防ぐ */
}

@media only screen and (max-width: 679px) {    /*sp 素材のページで使用*/
.flex_simple-wrap-mate {
  display: flex;
  flex-direction: column;  
}
}

.flex_simplebox-center {     /*文字範囲は上下真ん中表示*/
  display: flex;             /* 1.flex指定で横並び */
  flex-direction: column;    /* 2. 1で横並びになったものを縦並びに戻す */
  justify-content: center;   /* 上下中央揃え */
  padding-left: 20px;
  padding-right: 10px;

}


/*---- 超シンプルなflexbox,左に画像　右に文字（一行ずらずらっと書くタイプ）-----*/
.title-flex {
  display: flex;
  align-items: center;  /*右の文字を垂直方向に中央設定*/
}
/*display: flexで垂直方向の位置を変えたい場合はvertical-alignではなくalign-itemsを使用する*/




/*----------------------サイドメニュー　スマホのみアコーディオン-----------------------------*/
.accordion{
	pointer-events: none;     /*PC表示でクリック不可*/
}
@media only screen and (max-width: 679px) {    /*sp*/
	.accordion{
		pointer-events: all;
	}
	
	.toggle{
		display: none;
	}

 /* 開閉ボタン（上下向き＜ ＞矢印） */
.accordion{
  position: relative;
}

.accordion:after {
  content: "";
  position: absolute;
  right: 25px;
  top: 38%;
  transition: all 0.2s ease-in-out;
  display: block;
  width: 8px;
  height: 8px;
  border-top: solid 2px #47266e;
  border-right: solid 2px #47266e;
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
}
.accordion.open:after {
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  top: 45%;
}

}  /*------/sp------*/




/*---------------------- indexページ  picup* ----------------------------*/

@media only screen and (min-width: 680px) {   /*PC*/
.pickup-wrap {
  display: flex;
  flex-direction: row;
  margin: 5px 10px 10px 5px;
}

.pic_imgbox {
  margin: 0 10px 10px 0;
  flex-shrink: 0; /* 画像縮小しない */
}

.pic_mojibox {
  display: flex;
  flex-direction: column;
  padding: 10px;
  width: 100%;
}

.pic_title {
  margin: 20px 0 ;
  font-weight: bold;
 } 
 
.pic_link {
  padding-top: 20px;
  padding-left: 10px;
}
}



@media only screen and (max-width: 679px) {     /*sp*/
.pickup-wrap  {
  display: flex;
  flex-direction: column;
}

.pic_imgbox {
  text-align: center;
  flex-shrink: 0; /* 画像縮小しない */
}

.pic_mojibox {
  display: flex;
  flex-direction: column;
  padding:  0 10px;
}

.pic_title {
  margin: 10px 0 0 0 ;
  font-weight: bold;
 } 
 
.pic_link {
  padding-top: 0;
  padding-left: 10px;
}
}


/*---------------------------indexページ　商品一覧---------------------------------*/
@media only screen and (min-width: 680px) {   /*PC*/

.indexitem_flex-box {
  display: flex;
  flex-wrap: wrap;
  background-color: #fff;    /* 背景色指定 */
}

.indexitem_flex-item {
  width: calc(100% / 3);/*←画像を横に3つ並べる場合*/
  padding:15px 30px;/*←画像の上下に10px,左右に15pxの余白を入れる場合*/
  box-sizing:border-box;
}

.indexitem_flex-item img {
  max-width:100%; /*画像のはみだしを防ぐ*/
  height: auto; /*画像の縦横比を維持 */
  border: none; /*←画像を囲む線*/
}


.indexitem_flex-item span {
  display: block;
  line-height: 1.4;
  margin-top: 0px;
  padding: 5px;
  text-align: left;
}


}  /*------/PC------*/


@media only screen and (max-width: 679px) {     /*sp*/

.indexitem_flex-box {
  background-color: #fff;    /* 背景色指定 */
  display: flex;              /* フレックスボックスにする */
  flex-wrap: wrap;            /* 折り返し指定 */
  justify-content: space-between;   /*１番目のアイテムと最後のアイテムを両端に設置し、残りのアイテムを等間隔に配置*/
}

.indexitem_flex-item {
  width: calc(100% / 2);/*←画像を横に2つ並べる場合*/
  background-color: #fff;     /* 背景色指定 */
  padding: 10px 15px;/*←画像の上下に10px,左右に15pxの余白を入れる場合*/
  box-sizing: border-box;
  margin-bottom: 10px;
}

.indexitem_flex-item img {
  max-width:100%; /*画像のはみだしを防ぐ*/
  height: auto; /*画像の縦横比を維持 */
  border: none; /*←画像を囲む線*/
}

.indexitem_flex-item span {
  display: block;
  line-height: 1.4;
  padding: 0px;
  text-align: left;
}

.topitem_sp-non {     /*New＆おすすめケーキ欄　spで10個目以降を非表示にする*/
  display: none;
}


}  /*------/sp------*/



/*--------------------------------indexページ　ランキング------------------------*/
/*
画像を重ねる　ケーキ写真とランキングのタグ-------------------*/
.ranking{
    position: relative;
    display: inline-block;
}
.ranking img{
    display: block;
    max-width: 100%;
    height: auto;
}
.ranking img:nth-of-type(2){
    position: absolute;
    right: 0%;
    bottom: 0%;
    width: 100%;
    height: auto;
}


/*---------------------- indexページ  お客様の声の欄 ----------------------------*/

@media only screen and (min-width: 680px) {   /*PC*/
.koe-wrap {
  display: flex;
  flex-direction: row;
  margin: 10px 10px 0px 5px;
  background-color: #fff;
}

.koe_imgbox {
  margin: 0 5px 0px 0;
  flex-shrink: 0; /* 画像縮小しない */
}

.koe_mojibox {
  display: flex;
  flex-direction: column;
  padding: 10px;
  width: 100%;
}

.koe_title {
  margin: 0px 0 ;
  font-weight: bold;
} 
 
}



@media only screen and (max-width: 679px) {     /*sp*/
.koe-wrap  {
  display: flex;
  flex-direction: column;
}

.koe_imgbox {
  text-align: center;
  flex-shrink: 0; /* 画像縮小しない */
}

.koe_mojibox {
  display: flex;
  flex-direction: column;
  padding:  0 10px;
}

.koe_title {
  margin: 10px 0 0 0 ;
  font-weight: bold;
} 
 
}

/*------------------------------ index　商品一覧はこちら　の角丸ボタン------------*/
.btn_kochira {
	display: block;
	text-align: center;
	margin:0 auto;
	text-decoration: none;
    max-width: 80%;
	padding: 1rem 1rem;
	font-weight: bold;
	border: 1px solid #a86f4c;
	background: #a86f4c;
	color: #fff;
	transition: 0.5s;
	border-radius: 100vh;
}
.btn_kochira:hover {
	color: #fff;
	background: #e4d2d8;
}


/*------------------------------ index　カテゴリで選ぶの欄のボタン（各ケーキメニューのページにも使用）------------*/
.btn_category {
	display: block;
	text-align: center;
	margin:0 auto;
	text-decoration: none;
    max-width: 100%;
	padding: 0.5rem 0.5rem;
	font-weight: bold;
	border: 1px solid #ca8269;
	color: #4f455c;
	transition: 0.5s;
	border-radius: 100vh;
}
.btn_category:hover {
	color: #fff;
	background: #e6b422;
}


/*--------------------------------商品カテゴリ------------------------------*/
/*
-------------商品一覧リスト---------*/  
@media only screen and (min-width: 680px) {   /*PC*/

.item_flex-box {
  display: flex;
  flex-wrap: wrap;
  background-color: #fff;    /* 背景色指定 */
  padding: 10px 0;          /* 余白指定 */
}

.item_flex-item {
  width: calc(100% / 3);/*←画像を横に3つ並べる場合*/
  padding: 10px 10px;/*←画像の上下に10px,左右に10pxの余白を入れる場合*/
  box-sizing:border-box;
  background-color: #fff;     /* 背景色指定 */
}

.item-image img {
  max-width:100%; /*画像のはみだしを防ぐ*/
  height: auto; /*画像の縦横比を維持 */
  border: none; /*←画像を囲む線*/
  vertical-align: bottom;
}


/*------過去販売の写真を暗くする-----*/
.item-image_dark {
  background-color: black;
  display: inline-block;
}

.item-image_dark img {
  max-width:100%; /*画像のはみだしを防ぐ*/
  height: auto; /*画像の縦横比を維持 */
  border: none; /*←画像を囲む線*/
  vertical-align: bottom;
  display: block;
  opacity: 0.7;
}
/*------ここまで／過去販売の写真を暗くする-----*/


}  /*------/PC------*/


@media only screen and (max-width: 679px) {     /*sp*/

.item_flex-box {
  background-color: #fff;    /* 背景色指定 */
  display: flex;              /* フレックスボックスにする */
  flex-wrap: wrap;            /* 折り返し指定 */
  justify-content: space-between;   /*１番目のアイテムと最後のアイテムを両端に設置し、残りのアイテムを等間隔に配置*/
}

.item_flex-item {
  width: calc(100% / 2);/*←画像を横に2つ並べる場合*/
  background-color: #fff;     /* 背景色指定 */
  padding: 10px 10px;/*←画像の上下に10px,左右に10pxの余白を入れる場合*/
  border: none;
  box-sizing: border-box;
}

.item-image img {
  max-width: 100%;
  max-height: auto;
}

/*------過去販売の写真を暗くする-----*/
.item-image_dark {
  background-color: black;
  display: inline-block;
}

.item-image_dark img {
  max-width:100%;
  height: auto; 
  display: block;
  opacity: 0.7;
}
/*------ここまで／過去販売の写真を暗くする-----*/


}  /*------/sp------*/




/*---------------商品カテゴリ内、各ケーキのプロフィール画像とコメント（最下段に設置）Google画像マップにも---*/
/* 全体の枠 */
.kasane-cake-prof {
  position: relative;
}

.kasane-cake-img {
  width: 100%;
  height: auto;
}



/*---PCサイズ　写真に注意事項コメントを重ねる---*/
@media only screen and (min-width: 680px) {   /*PC*/
/* 重ねる文字 */
.kasane-cake-text {
  position: absolute;
  bottom: 10px;
  left: 10px;
  width: 95%;
  padding: 0.3rem 0.5rem;/*文字の回りの余白*/
  color: #0d0015;
  background: -moz-radial-gradient(rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.8));
  background: -webkit-radial-gradient(rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.8));
  background: radial-gradient(rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.8));
}
}

/*------SPサイズは画像とコメントを縦並べなので、別途の指定は無し-----*/



/*------------------------------------------- サイトマップ  pc/sp共通--------------------------*/
.maplist01 {
	line-height:20px;
}

.maplist01 ul {
	line-height:35px;
	margin-bottom: 30px;
}

.maplist01 li {
	list-style:none;   
	padding-left:20px;   
	background:url(../images/bluegreen/094.gif) ;   
	background-repeat: no-repeat;
	background-position: 0px 6px;
}

.maplist02 li {
	list-style:none;   
	background:url(../images/bluegreen/030.gif) ;
	background-repeat: no-repeat;
	background-position: 10px 12px;
	padding-left: 25px;
}


/*------------------------------------------- よくある質問 　 pc/sp共通--------------------------*/
img.point-qa {     /*QAimgの指定*/
  position: relative;
  top: 5px;
  margin-right: 5px;
}

.qalist {
  margin: 18px 0 18px 0;
  padding: 2px 18px 2px 18px;
  line-height: 1.9;
  background-color: #ffffff;
}

.qalist li {
  list-style-type: square;
}

@media only screen and (max-width: 679px) {     /*sp*/
.qalist_sp-non{     /*表示の一部をspでは非表示に*/
  display: none;
}
}  /*------/sp------*/


/*====================================================================
.s_04 .accordion_one   よくある質問ページ　アコーディオン
====================================================================*/
.s_04 .accordion_one {
  width: 100%;
  margin: 15px auto;
}
.s_04 .accordion_one .accordion_header {
  background-color: #eae5e3;
  color: #4d4c61;
  font-weight: bold;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 15px;
  text-align: left;
  position: relative;
  z-index: +1;
  cursor: pointer;
  transition-duration: 0.2s;
}

.s_04 .accordion_one .accordion_header:hover {
  opacity: .8;
}
.s_04 .accordion_one .accordion_header .i_box {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 50%;
  right: 5%;
  width: 25px;
  height: 25px;
  border: 1px solid #a86965;
  margin-top: -13px;
  box-sizing: border-box;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  transform-origin: center center;
  transition-duration: 0.2s;
}
.s_04 .accordion_one .accordion_header.stay .i_box {
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
}
.s_04 .accordion_one .accordion_header .i_box .one_i {
  display: block;
  width: 18px;
  height: 18px;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  transform-origin: center center;
  transition-duration: 0.2s;
  position: relative;
}
.s_04 .accordion_one .accordion_header.stay .i_box .one_i {
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
}
.s_04 .accordion_one .accordion_header.stay.open .i_box .one_i {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.s_04 .accordion_one .accordion_header.open .i_box {
  -webkit-transform: rotate(-360deg);
  transform: rotate(-360deg);
}
.s_04 .accordion_one .accordion_header.stay.open .i_box {
  -webkit-transform: rotate(315eg);
  transform: rotate(315deg);
}
.s_04 .accordion_one .accordion_header .i_box .one_i:before, .s_04 .accordion_one .accordion_header .i_box .one_i:after {
  display: flex;
  content: '';
  background-color: #a86965;
  border-radius: 10px;
  width: 18px;
  height: 4px;
  position: absolute;
  top: 7px;
  left: 0;
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  transform-origin: center center;
}
.s_04 .accordion_one .accordion_header .i_box .one_i:before {
  width: 4px;
  height: 18px;
  top: 0;
  left: 7px;
}
.s_04 .accordion_one .accordion_header.stay .i_box .one_i:before {
  content: none;
}
.s_04 .accordion_one .accordion_header.open .i_box .one_i:before {
  content: none;
}
.s_04 .accordion_one .accordion_header.stay.open .i_box .one_i:before {
  content: "";
}
.s_04 .accordion_one .accordion_header.open .i_box .one_i:after {
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.s_04 .accordion_one .accordion_header.stay.open .i_box .one_i:after {
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
}
.s_04 .accordion_one .accordion_inner {
  display: none;
  padding: 10px 20px;
  border-left: 2px solid #e9e4d4;
  border-right: 2px solid #e9e4d4;
  border-bottom: 2px solid #e9e4d4;
  box-sizing: border-box;
}
.s_04 .accordion_one .accordion_inner.stay {
  display: block;
}
.s_04 .accordion_one .accordion_inner .box_one {
  padding-left: 20px;
}
.s_04 .accordion_one .accordion_inner p.txt_a_ac {
  margin: 0;
  text-indent: -2em;  /*枠内で２行目以降を１文字分ずらす*/
}
@media only screen and (min-width: 680px) {   /*PC*/
  .s_04 .accordion_one .accordion_header {
    font-size: 16px;
  }
  .s_04 .accordion_one .accordion_header .i_box {
    width: 25px;
    height: 25px;
    margin-top: -13px;
  }
}  /*------/pc------*/
@media only screen and (max-width: 679px) {   /*SP*/
  .s_04 .accordion_one .accordion_header {
    font-size: 16px;
    padding: 10px 60px 10px 15px;
  }
}  /*------/sp------*/


/*------------------------------------------- お買い物ガイド  pc/sp共通 --------------------------*/
/*---------------- トップメニュー(お買い物ガイド  pc/sp共通) ----------*/
.shopguide-header {
  max-width: 90%;
  margin:30px auto 10px auto;
  border-top: solid 1px #C1B081;
  border-right: solid 1px #C1B081;
  border-bottom: solid 1px #C1B081;
  border-left: solid 1px #C1B081;
  background-color: #ffffff;
  margin-bottom: 40px;
}

.shopguide-menu {
  flex-wrap: wrap;
  display: flex;
  justify-content: space-between; /* 左右均等分布 */
  margin: 5px auto 5px 15px;
  line-height: 1.9;
}

.shopguide-menu li {
  width: calc(100% / 3 - 10px);/*親要素100%を3等分した幅からpxマイナス*/
}

@media only screen and (max-width: 679px) {   /*SP*/
.shopguide-menu li {
  width: calc(50% - 10px);
}
}  /*------/sp------*/

/* 最後のコンテンツを左寄せにする指定 */
.shopguide-menu:after {
  content: "";
  display: block;
  width: calc(100% / 3 - 10px);  /* .boxに指定したwidthと同じ幅を指定する */
}
/* /トップメニュー ここまで */


/*------------------ 流れの説明(お買い物ガイド  pc/sp共通) ---------------------------*/
.nagare-title {
  background: linear-gradient(transparent 40%, rgba(255, 255, 255, 0) 40%, #a7d6ff 70%); /*タイトルマーカー*/
  font-size: 16px;
  color: #332d33;
  font-weight: bold;
  margin-bottom: 10px;
}

.nagare-wrap {
  display: flex;
  margin: 20px 0;
  width: 100%
}

@media only screen and (max-width: 679px) {   /*SP*/
.nagare-wrap {
  display: block;
}
}  /*------/sp------*/


.nagarewaku {
  display: flex;
  flex-direction: column;
  margin: 0 30px 10px 30px;

}

.nagare-son {     /*お客様枠*/
  position: relative;
  display: inline-block;
  margin: 1em 0;
  padding: 5px 7px;
  color: #555;
  background: #FFF;
  border: solid 3px #708090;
  box-sizing: border-box;
  border-radius: 10px;
}

.nagare-son:before {
  content: "";
  position: absolute;
  bottom: -24px;
  left: 50%;
  margin-left: -15px;
  border: 12px solid transparent;
  border-top: 12px solid #FFF;
  z-index: 2;
}

.nagare-son:after {
  content: "";
  position: absolute;
  bottom: -30px;
  left: 50%;
  margin-left: -17px;
  border: 14px solid transparent;
  border-top: 14px solid #555;
  z-index: 1;
}

.nagare-son_end { 
  position: relative;
  display: inline-block;
  margin: 1em 0 2em 0;
  padding: 5px 7px;
  color: #555;
  background: #FFF;
  border: solid 3px #708090;
  box-sizing: border-box;
  border-radius: 10px;
}


.nagare_mae-cran {     /*前払い当店枠*/
  position: relative;
  display: inline-block;
  margin: 1em 0;
  padding: 7px 10px;
  color: #332d33;
  background: -webkit-repeating-linear-gradient(-45deg, #d8bfd8, #d8bfd8 4px,#d9add9  3px, #d9add9  8px);
  background: repeating-linear-gradient(-45deg, #d8bfd8, #d8bfd8 4px,#d9add9  3px, #d9add9  8px);
  border: solid 3px #d9add9;
  box-sizing: border-box;
  border-radius: 10px;
}

.nagare_mae-cran:before {
  content: "";
  position: absolute;
  bottom: -24px;
  left: 50%;
  margin-left: -15px;
  border: 12px solid transparent;
  border-top: 12px solid #d9add9;
  z-index: 2;
}

.nagare_mae-cran:after {
  content: "";
  position: absolute;
  bottom: -30px;
  left: 50%;
  margin-left: -17px;
  border: 14px solid transparent;
  border-top: 14px solid #d9add9;
  z-index: 1;
}

.nagare_dai-cran {     /*代金引換払い当店枠*/
  position: relative;
  display: inline-block;
  margin: 1em 0;
  padding: 7px 10px;
  color: #555;
  background: -webkit-repeating-linear-gradient(-45deg, #fff5df, #fff5df 4px,#ffe4b1 3px, #ffe4b1 8px);
  background: repeating-linear-gradient(-45deg, #fff5df, #fff5df 4px,#ffe4b1 3px, #ffe4b1 8px);
  border: solid 3px #ffebbe;
  box-sizing: border-box;
  border-radius: 10px;
}

.nagare_dai-cran:before {
  content: "";
  position: absolute;
  bottom: -24px;
  left: 50%;
  margin-left: -15px;
  border: 12px solid transparent;
  border-top: 12px solid #ffebbe;
  z-index: 2;
}

.nagare_dai-cran:after {
  content: "";
  position: absolute;
  bottom: -30px;
  left: 50%;
  margin-left: -17px;
  border: 14px solid transparent;
  border-top: 14px solid #ffebbe;
  z-index: 1;
}
/* 流れの説明　ここまで */

/*------------------ ご注文についてui１文字ずらす(お買い物ガイド他  pc/sp共通) ---------------------------*/
.guidelist_box01{
  margin: 20px 10px 20px 0;
  line-height: 1.5;
}
.guidelist_box01 ul{
  margin-top: 0.5em;
  list-style-type: disc;
  margin-left: 3em;
}

.guidelist_box01 li{
  margin-bottom: 7px;
}

/*------------------------- 支払い方法の表（お買い物ガイド）----------------------*/


table.table_guide {                  /*table共通*/
  border-collapse: collapse;
  border: solid 1px #ccc0c4;
  width: 100%;
}

td.table_guide_left {                 /*左に見出しのtable*/
  border-collapse: collapse;
  border: solid 1px #8f8667;
  padding: 12px 14px 8px 14px;
  width: 80px;
  background-color: #fdf5e6;
  text-align: left;
  color: #2f4f4f;
}

td.table_guide_right {                 /*左に見出しのtable*/
  border-collapse: collapse;
  border: solid 1px #8f8667;
  padding: 12px 14px 8px 14px;
  width: auto;
  background-color: #ffffff;
  text-align: left;
}

td.table_guide_head {               /*通常のtable（代金引換価格表）*/
  border-collapse: collapse;
  border: solid 1px #808080;
  padding: 12px 14px 8px 14px;
  background-color: #d2b48c;
  width: auto;
  color: #333333;
}

td.table_guide_line {              /*通常のtable（代金引換価格表）*/
  border-collapse: collapse;
  border: solid 1px #9d8e87;
  padding: 12px 14px 8px 14px;
  width: auto;
}

table.table_guide ul{
  margin-top: 0.5em;
  list-style-type: disc;
  margin-left: 1.5em;
}

table.table_guide li{
  margin-bottom: 5px;
}


/*------------------------- 送料一覧（お買い物ガイド）----------------------*/

/*送料一覧*/

table.table_souryou {               
  border-collapse: collapse;
  border: solid 1px #998459;
  width: 100%;
}

table.table_souryou td.descript{
  text-align: left;
  padding: 12px 14px 12px 14px;
}

.souryou-title {
  background: linear-gradient(transparent 40%, rgba(255, 255, 255, 0) 40%, #9acd32 80%); /*タイトルマーカー*/
  font-size: 1.2em;
  color: #332d33;
  font-weight: bold;
  margin-bottom: 20px;
}


table.table_souryou th {
  border-collapse: collapse;
  border: solid 1px #998459;

  padding: 8px 14px 8px 14px;
  width: auto;
  background-color:  #f8f4e6;
  color: #622d18;
  text-align: center;
  white-space: nowrap;
}

td.table_souryou_area {                
  border-collapse: collapse;
  border: solid 1px #998459;
  padding: 0 14px 0 14px;
  width: auto;
  background-color:  #f8f4e6;
  color: #622d18;
  text-align: center;
  white-space: nowrap;
}


td.table_souryou_item {               
  border-collapse: collapse;
  border: solid 1px #bfa46f;
  padding: 0 14px 0 14px;
  width: auto;
  background-color: #ffffff;
  color: #622d18;
  text-align: right;
  white-space: nowrap;
}

td.table_souryou_item.area_detail {
  font-size: 0.9em;
  text-align: left;
}

div.i_setumei {   /*表アイコン説明*/
  display: flex;
}

img.sou-i {      /*常温クールアイコン*/
  position: relative;
  top: 4px;
  margin-right: 6px;
  width: 17px;
  height: 17px;
}


@media only screen and (max-width: 679px) {   /*SP*/
table.table_souryou { 
  margin: 0 auto;
}

th.area_detail {
  display: none;
}

td.table_souryou_item.area_detail {
  display: none;
}

div.i_setumei {   /*表アイコン説明*/
  display: flex;           
  flex-wrap: wrap;  
  flex-direction: column;
}
}/*----   /@media sp  ----*/	



/*------------------------- 返品のながれ（お買い物ガイド）----------------------*/

.fukidasi {
  position: relative;
  padding: 10px;
  background-color: #f5f5dc;
  margin-bottom: 2em;
  border-radius: 7px;
  color: #2f4f4f;
}

.fukidasi:before{
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: 20px;
  bottom: -15px;
  border-top: 15px solid #f5f5dc;
  border-right: 15px solid transparent;
  border-left: 15px solid transparent;
}

.fukidasi-end {
  position: relative;
  padding: 10px;
  background-color: #f5f5dc;
  margin-bottom: 2em;
  border-radius: 7px;
  color: #2f4f4f;
}


/*--------------------------------------  カートの使い方　下向き矢印 ---------------------*/

.arrow{
  width: 100px;
  margin-left: 10px;
  margin-top: 10px;
}
.arrow::before{
  content: "";
  display: block;
  margin: 0 auto;
  width: 50px;
  height: 30px;
  background: #d2b48c;
}
.arrow::after{
  content: "";
  display:block;
  border-top: 60px solid #d2b48c;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  transform-origin: left top;
  transform: scaleY(.5);
}

img.kago {
  border: 1px solid #c0c0c0;
}



/*--------------------------------------------- ケーキ個別ページ -----------------------------------------*/

/*---ケーキ個別ページ　ケーキ名　下線の装飾---*/
#contents h2.cake_title {
position: relative;
padding: .3em 0;
background-image: none;
}

#contents h2.cake_title:after {
content: "";
display: block;
height: 4px;
background: -moz-linear-gradient(to right, rgb(200, 81, 121), transparent);
background: -webkit-linear-gradient(to right, rgb(200, 81, 121), transparent);
background: linear-gradient(to right, rgb(200, 81, 121), transparent);

}


/*---------- 商品写真アップとサムネイルは　cake-swaiper.css ----------*/


/*---------------価格&カートに入れる----------------*/

/*文字装飾*/
span.cart {
	color: #956f29;
    font-weight: bold;
    font-size: 16px;
}

/*---価格と税文字サイズ----*/
span.itemprice{
	font-size: 20px;
	line-height: 250%;
	font-weight: bold;
}

span.itemtax {
	font-size: 14px;
	line-height: 110%;
	margin-left: 3px;
}


.table-aboutcart{
	margin: 0px auto 50px 10px;
	border: none;
	border-collapse: collapse;/*２重線を１本に*/
	width: 300px;
	text-align: center;
}

.table-aboutcart td{
	padding-top: 5px;
	padding-bottom: 5px;
    border-top: solid 1px silver;
}

img.reizou-i {      /*冷蔵便アイコン*/
  position: relative;
  top: 4px;
  margin-left: 10px;
  width: 40px;
  height: 20px;
}


/*----------------- この商品について問い合わせる　ボタン -------*/
.itemtoiawase-btn-flat-border {
  display: inline-block;
  padding: 0.3em 1em;
  text-decoration: none;
  border: solid 2px #d3cfd9;
  background: #ECECEC;
  border-radius: 3px;
  transition: .4s;
}

.itemtoiawase-btn-flat-border:hover {
  background: #e8d3d1;
  color: white;
}



/*---------- 枠内で２行目以降を１文字分ずらす（送料について枠） ----------*/
.moji_boxcart{
	margin-top: 20px;
	margin-bottom: 20px;
	margin-right: auto;
	margin-left: auto;
	background-color: #ffffff;
	border: 1px dashed #507ea4;
	padding-left: 50px;

}

.moji_boxcart p{
	text-indent: -2em;
}


#kansou-wrap {
  margin-top: 40px;
}

/* ----お客様の声　タイトル背景 ----*/
#contents h2.rbg2 {
border-bottom: double 5px #d3cbc6;   /*線の種類（二重線）太さ 色*/
background-image: none;
margin-top: 30px;
}



/*---------- 商品説明内　お客様の声枠 ----------*/
#kansou {
  width: 610px;
  height: 300px;
  overflow: auto;
  background-color: #ffffff;
  padding: 10px;
  margin-top: 20px;
  margin-bottom: 20px;
  margin-right: auto;
  margin-left: 0;
  border: 1px;
  border-style: solid;
  border-color: #999999;
}

.kansou_miru {
  width:100% ;
  text-align: left;  /*テキスト左寄せ*/
  background-color: #ffffff;
  margin-bottom: 20px;
}

@media only screen and (max-width: 679px) {   /*SP*/
#kansou-wrap {
  display: none;
}
}

/*--------  クール便発送　説明マーカー ----------*/
span.coolmark{
	background-color:#ebd842;
}


/*------------------ 下段　おすすめケーキ３つ横並び  ------------------*/
#cake-susume_flex-box {
  background-color: #fff;    /* 背景色指定 */
  display: flex;              /* フレックスボックスにする */
  flex-wrap: wrap;            /* 折り返し指定 */
  padding-bottom: 0px;
}

@media only screen and (min-width: 680px) {   /*PC*/
.cake-susume_flex-item {
  width: calc(100% / 3);/*←画像を横に3つ並べる場合*/
  padding:15px 30px;/*←画像の上下に10px,左右に15pxの余白を入れる場合*/
  box-sizing:border-box;
}
}

@media only screen and (max-width: 679px) {   /*SP*/
.cake-susume_flex-item {
  width: calc(100% / 3);/*←画像を横に3つ並べる場合*/
  padding:15px 8px;/*←画像の上下に10px,左右に15pxの余白を入れる場合*/
  box-sizing:border-box;
}
}

.cake-susume_flex-item span {
  display: block;
  line-height: 1.4;
  margin-top: 0px;
  padding: 5px;
  text-align: left;
}

.cake-susume_flex-item img {
  max-width:100%; /*画像のはみだしを防ぐ*/
  height: auto; /*画像の縦横比を維持 */
  border: none; /*←画像を囲む線*/
}





/*--------- spのみ／最下段・一覧戻るボタン ----------*/
@media only screen and (max-width: 679px) {     /*sp*/

.cake-list {
  text-align:center;
  margin-top: 30px;
}

.cake-list a {
  color: #fff;
}

.btn-cakelist {
  display: inline-block;
  padding: 1em 2em;
  text-decoration: none;
  border-radius: 3px;
  font-weight: bold;
  color: #FFF;
  background-image: linear-gradient(45deg, #9d8e87 0%, #bfbec5 100%);
  transition: .4s;
}

.btn-cakelist:hover {
  background-image: linear-gradient(45deg, #9d8e87 50%, #bfbec5 100%);
}
}


@media only screen and (min-width: 680px) {   /*PC*/
.cake-list {
  display: none;
}
}



/* ---------------------------------------- ケーキカテゴリのページ（左に画像　右にテキスト） ---------------------*/

.cate-wrap {
  display: flex;
  justify-content: center;   /* 中央揃え（display: flex;下で） */
  align-items: center   /* 上下中央に　justify-contentと併用（display: flex;下で） */
}
 
.cate-wrap img {  
  max-width: 120px;
  height: auto;
  align-self: flex-start; /* レスポンシブで画像が縦長になるのを防ぐ */
}

.cate-wrap-text {
  padding-left: 10px;
  padding-right: 10px;
}

@media only screen and (max-width: 679px) {     /*sp*/
.cate-wrap {
  flex-direction: column;
}
}



/*--------------------------- ご感想ページ ----------------------------------*/
.impre_bg_waku {                            /*ご感想ページ使用*/
  margin: 18px 0 18px 0;
  padding: 2px 18px 2px 18px;
  line-height: 1.8;
  letter-spacing: 0.05em;
  border-top: solid 1px #d3d6dd;
  border-right: solid 1px #d3d6dd;
  border-bottom: solid 1px #d3d6dd;
  border-left: solid 1px #d3d6dd;
  background-color: #ffffff;
}

.impre_bg {
  margin: 18px 2px 40px 2px;
  padding: 2px 8px 2px 18px;
  line-height: 1.8;
  letter-spacing: 0.05em;
  background-color: #fffaf0;
  border-radius: 20px;   /*角丸*/
}

.impre_bg_waku a {
  	font-weight: bold;
  	color: #c85179 ;
}


/*ページャー*/
.pager {
    overflow: hidden;
}
 
.pager ul {
    list-style: none;
    position: relative;
    left: 50%;
    float: left;
}
 
.pager ul li {
    margin: 0 1px;
    position: relative;
    left: -70%;
    float: left;
}
 
.pager ul li span,
.pager ul li a {
    display: block;
    font-size: 16px;
    padding: 0.6em 1em;
    border-radius: 3px;
}
 
.pager ul li a {
    background: #EEE;
    color: #000;
    text-decoration: none;
}
 
.pager ul li a:hover {
    background: #f4b3c2;
    color: #FFF;
}


/*-------------------- 問い合わせフォーム・感想投稿フォーム・お買物ガイドページのリンクCSSボタン（トクトークマメプラスのフォームへリンクするボタン　オレンジ基調- ---------------------------*/
.btn_kochira_orange {
	display: block;
	text-align: center;
	margin:0 auto;
	text-decoration: none;
    max-width: 80%;
	padding: 1rem 1rem;
	font-weight: bold;
	border: 1px solid #e17b34;
	background: #d66a35;/*背景色*/
	color: #fff;
	transition: 0.5s;
	border-radius: 100vh;
}
.btn_kochira_orange:hover {
	color: #fff;
	background: #e4d2d8;
}



/*------------------------------------------- サイドエリア　バナーメニュー --------------------------*/

.ban-wrap {                /*サイドメニュー　バナーメニュー*/          /*使用*/
  margin-bottom: 20px;
  padding: 0;
  display: flex;              /* フレックスボックスにする */
  flex-wrap: wrap;            /* 折り返し指定 */
  flex-direction: column;
  justify-content: center;
}

.menu_free_ban {
text-align: center;
}
.menu_free_ban img {
  padding: 2px 0 5px 0;
}



/*---------------------------------- サイドエリア　カレンダー（共通） ------------*/       /*使用*/
@media only screen and (min-width: 680px) {   /*PC*/
.calendar-flex {
  display: flex;              /* フレックスボックスにする */
  flex-wrap: wrap;            /* 折り返し指定 */
}
  
.calendar-container {
  margin: 0 auto 10px auto;
  border-radius: 5px;
  background: #fdfdfd; 
}

.calendar-container h1 {
  height: 40px;
  line-height: 50px;
  text-align: center;
  font-size: 14px;
  margin: 0;
}

table.calendar {
  padding: 0px 5px 10px 5px; 
  margin: 5px auto;
  width: 100%;
}

table.calendar th, td {
  text-align: center;
  padding: 3px;
}
table.calendar th {
  font-weight: bold;
  font-size: 12px;

}
table.calendar td {
  font-weight: normal;
  font-size: 12px;
}

table.calendar td.hd {                    /*単発*/
  color: #ff838b;
  font-weight: bold;
    font-size: 12px;
}

table.calendar tr.day *:first-child {     /*日曜日*/
  color: #ff838b;
  font-weight: bold;
}
table.calendar tr.day *:nth-of-type(4) {  /*水曜日*/
  color: #ff838b;
  font-weight: bold;
}

span.hd{                             /*使用　カレンダー注釈*/
  color: #ff838b;
}



}  /*------/PC------*/

@media only screen and (max-width: 679px) {     /*sp*/
.calendar-flex {
  display: flex;              /* フレックスボックスにする */
  flex-wrap: wrap;            /* 折り返し指定 */
}
.calendar-container {
  width: calc(100% / 2);/*←画像を横に2つ並べる場合*/
  padding: 5px ;/*←画像の左右に5pxの余白を入れる場合*/
  box-sizing:border-box;
}

.calendar-container h1 {
  height: 40px;
  line-height: 50px;
  text-align: center;
  font-size: 1em;
  margin: 0;
}
table.calendar {
  max-width:100%; /*画像のはみだしを防ぐ*/
  height: auto; /*画像の縦横比を維持 */
  border: solid 1px gray; /*←画像を囲む線*/
  margin: auto;
}

table.calendar th, td {
  text-align: center;
  padding: 2px;
}
table.calendar th {
  font-weight: bold;
  font-size: 0.85em;

}
table.calendar td {
  font-weight: normal;
  font-size: 0.85em;
}

table.calendar td.hd {                    /*単発*/
  color: #ff838b;
  font-weight: bold;
    font-size: 0.85em;
}

table.calendar tr.day *:first-child {     /*日曜日*/
  color: #ff838b;
  font-weight: bold;
}
table.calendar tr.day *:nth-of-type(4) {  /*水曜日*/
  color: #ff838b;
  font-weight: bold;
}

span.hd{                             /*使用　カレンダー注釈*/
  color: #ff838b;
}

}  /*------/sp------*/





/*-------------------------- サイドエリア　ランキング --------------------------*/

.free_rank {
  background-color: #fff;
}

.free_rank h3 {
  height: 26px;
  margin: 0;
  padding: 7px 0 0 12px;
  font-size: 14px;
  color: #808080;
}
  
@media only screen and (max-width: 679px) {     /*sp*/
.free_rank .ranking {
  display: flex;
  justify-content: space-around;
}
}


/*--------  Creemaバナー ----------*/
@media only screen and (min-width: 680px) {   /*PC*/
.creema-sp {
  display: none;
}
}

@media only screen and (max-width: 679px) {     /*sp*/
.creema-pc {
  display: none;
}
}



/*  各bottomの下に空白を作る。すべてのcssに上書きするので、common.css最後尾に記述   */
.bottom_space {
  margin-bottom: 3em;
}

.bottom_space_2 {
  margin-bottom: 2em;
}