@charset "shift-jis";

body {
	font: 500 16px/1em Avenir , "Open Sans" , "Helvetica Neue" , Helvetica , Arial , Verdana , Roboto , "メイリオ" , "游ゴシック" , "Yu Gothic" , "游ゴシック体" , "YuGothic" , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "Meiryo UI" ,  Meiryo , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif;
	margin: 0;
}

img {
	border:0;
	vertical-align: bottom;
	}

p,dl,dd,dt {
	margin: 0;
	padding: 0;
}

a:hover img{
	opacity:0.8;
	filter: alpha(opacity=80);
}

a:link,a:visited {
	color:#595757;
	text-decoration: none;
}


a:hover {
	color:#CB3232;
	text-decoration: underline;
}

ul,li {
	list-style-type: none;
}

.cf:before, .cf:after { content: " "; display: table; } .cf:after { clear: both; } .cf { *zoom: 1; }


/* header */


header {
}

#loginArea {
	width: 960px;
	margin: 0 auto;
}

#loginArea div {
	float:right;
	padding:8px 0;
}

a.hdrBtn {
	display: block;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	color: #FFF;
	width: 70px;
	height: 30px;
	text-align: center;
	text-decoration: none;
}

a.hdrBtn:hover {
	opacity:0.8;
	filter: alpha(opacity=80);
}

#signUp{
	background: #9d9d9d;
	margin:0 5px 0 15px;
}

#logIn{
	background: #000;
	margin-right: 15px;
}

header .inner {
	width: 960px;
	margin: 0 auto;
}

#logo {
	background: url(../../img/header/logo.svg) 0 10px no-repeat;
	background-size:contain;
	width: 252px;
	height: 90px;
	float: left;
}


/* 

	2022/08/05 青柳 追記
	#logo-220805-01
	2022 / 9 以降 ローカル & リモート 削除 OK
	ロゴ-〇土DOICOFFEE-小さな焙煎-PC-220805-01.ai の表示確認用

*/
#logo-220805-01 {
	background: url(https://www.doicoffee.com/component/img/header/logo_220805-01.svg) 0 10px no-repeat;
	background-size:contain;
	width: 252px;
	height: 90px;
	float: left;
}

#logo a {
	display: block;
	width: 100%;
	height: 100%;
}

#search {
	background: url(../../img/header/tel.jpg) 0 center no-repeat;
	padding: 25px 0 0 290px;
	height: 60px;
	float: right;
}

#search input[type="text"] {
	border: 1px solid #c6c6c6;
	border-right: none;
	-webkit-border-radius: 5px 0 0 5px;
	-moz-border-radius: 5px 0 0 5px;
	border-radius:  5px 0 0 5px;
	background: url(../../img/header/serach_bg.jpg) 13px center no-repeat;
	padding-left: 5px;
	width: 160px;
	height:31px;
}

#search input[type="submit"] {
	border: 1px solid #c6c6c6;
	border-left: none;
	font-size: 0;
	background: url(../../img/header/search_icon.jpg) center center no-repeat;
	width: 35px;
	height: 35px;
	-webkit-border-radius: 0 5px 5px 0;
	-moz-border-radius: 0 5px 5px 0;
	border-radius: 0 5px 5px 0;
	vertical-align: middle;
	/* 22/04/15 青柳 追加 */ margin-bottom: 1px;
}

#search input[type="text"]:focus {
	background: none;
}

header nav {
	font-size:16px;
	font-family: "游明朝", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", "ＭＳ 明朝", serif;
	background: #000;
	width: 100%;
}

header nav div {
	display:flex;
	justify-content:center;
	align-items:center; 
	width:1044px;
	height:50px;
	margin:0 auto;
}

header nav div a {
	flex-direction:row;
	flex-grow:1;
	text-align:center;
	text-decoration:none;
	padding:16px 0;
	letter-spacing:-0.025em;
	color:#fff !important;
	display:block;
	transition-property:background,color;
    transition-duration:0.5s;
    transition-timing-function:ease-in;

	/*border-left:1px #828282 solid; 検討 最終要素 右ライン調整必要有*/
}


header nav div a:hover {
	background-color:#3C3835;
	color:#E6E2DF;
	text-decoration:none;
  	transition-duration: 0s;
  	transition-timing-function: ease-out;
}

header nav div a:active {
	color:#CDC5BF;
}


/* update:2017/08/10 */

#main-visual {
	width:100%;
	margin:0 auto;
}

#main-visual img {
	width:100%;
}

/* update:2021/04/15 */
#main-visual .main_contents {
	display: block; 
	position: relative;
	border: solid 0.5px #CBCBCB; 
	opacity: 80%;
}

#main-visual .button {
	position: absolute; 
	left: 15%; 
	bottom: 10%; 
	transform: translate(-50%,-50%); 
	display: block; 
	width: 20%; 
	box-sizing: border-box; 
	background: #333333; 
	border: 1px solid #FFF; 
	padding:12px 10px; 
	text-align: center; 
	color: #ffffff; 
	font-size: 13px; 
	font-weight: 700;
    transition-duration:0.5s;
    transition-timing-function:ease-in;
	font-family: "游明朝", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", "ＭＳ 明朝", serif;
}
#main-visual .button:hover{
		background: none;
     	border: 1px solid #333333; 
		color: #333333;
	    text-decoration: none;
  	transition-duration: 0s;
  	transition-timing-function: ease-out;
}
#main-visual .button a {
	text-decoration: none;
	color: #000000;
}
#main-visual .button a:hover {
	text-decoration: none;
	color: #ffffff;
}
#main-visual .fitting {
	width: 100%;
	height:400px;
	object-fit: cover;
	object-position: right;
}
#main-visual a:hover {
	color:#000000!important;
	text-decoration: underline;
}
#main-visual .main_contents p{
	position: absolute;
}
#main-visual .main_contents .month {
	font-family:"游明朝", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", "ＭＳ 明朝", serif;
	top: 18%; 
	left: 5%; 
	font-size: 24px; 
	font-weight: 100;
	letter-spacing:-0.025em;
    color: #000000;
}

#main-visual .main_contents .set-name {
  font-family: "游明朝", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", "ＭＳ 明朝", serif;
  top: 29%;
  left: 5%;
  font-size: 28px;
  letter-spacing: -0.025em;
  color: #000000;
  margin-left: -15px;
}
#main-visual .main_contents .text-area {
 	top: 45%;
	left: 5%; 
	font-size: 16px; 
	line-height: 1.5; 
	font-weight: 100;
    color: #000000;
}

#main-visual .main_contents .text-area-01 {
 	top: 20%;
	left: 4.7%; 
	font-size: 16px; 
	line-height: 1.5; 
	font-weight: 100;
    color: #000000;
	font-weight: 600;
}

#main-visual .main_contents .text-area-02 {
 	top: 40%;
	left: 5%; 
	font-size: 16px; 
	line-height: 1.75em; 
	font-weight: 100;
    color: #000000;
	text-align: justify;
}

#main-visual .main_contents .text-area-03 {
 	top: 80%; 
	left: 10%;
	font-size: 16px; 
	line-height: 1.5; 
	font-weight: 100;
    color: #000000;
	text-align: right;
}


.u-bb-1 {
	border-bottom: 1px solid;
	padding-bottom: 1.25em;
}


#main-visual .fitting-dhs {
	width: 100%;
	height: 400px;
	object-fit: cover;
	object-position: right;
}
#main-visual .main_contents .set-name-dhs {
	font-family:"游明朝", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", "ＭＳ 明朝", serif;
 	top: 240px; 
	font-size: 28px;
	letter-spacing:-0.025em;
	color: #000;
	text-align: left;
}
.main-text-area-dhs {
	right: 0%; 
	position: absolute; 
	width: 40%; 
	top: 17%;
}
#main-visual .main_contents .text-area-dhs {
	font-family:"游明朝", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", "ＭＳ 明朝", serif;
	font-size: 16px; 
	line-height: 1.5; 
	font-weight: 100;
	color: #000;
	text-align: left;
	margin-left: 16px;
}

.fitting-dhs-02 {
	width: 100%;
	height: 400px;
	object-fit: cover;

}
.set-name-dhs-02 {
	font-family:"游明朝", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", "ＭＳ 明朝", serif;
 	bottom: 10%; 
 	right: 9.5%; 
	font-size: 28px;
	letter-spacing:-0.025em;
	color: #000;
}

.text-area-dhs-02 {
	font-family:"游明朝", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", "ＭＳ 明朝", serif;
 	top: 10%;
	right:10%; 
	font-size: 16px; 
	line-height: 1.5; 
	font-weight: 100;
	color: #000;
    writing-mode: vertical-rl;
    -webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;


}
#main-visual a:hover {
	text-decoration: none;
	color: #B8B8B8;
}

/* header update 2022/05/25*/
.main-img-area {
	position: relative;
}
.main-img-area .main-bnr img {
    content:"";
	width: 100%;
	height: 40vh;
	object-fit: cover;
    border: #D2D2D2 solid 1px;
}
.main-img-area .main-bnr {
  max-width: 100%;
}
.main-img-area .main-bnr::after {
  content:"";
  position: absolute;
  top: -1px;
  left: 1px;
  width: 100%;
  height:100%;
  background-image: linear-gradient(270deg, transparent 0 30%, #FFF 70% 100%);
}
.main-img-area .month {
	font-family: "游明朝", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", "ＭＳ 明朝", serif;
	top: 3vh;
	left: 4vw;
	font-size: 24px;
	font-weight: 100;
	letter-spacing: -0.025em;
	color: #000000;
}
.main-img-area .big-text {
	font-family:"游明朝", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", "ＭＳ 明朝", serif;
	font-size: 32px;
	top: 6vh;
	left: 4vw;
	font-weight: 600;
}
.main-img-area p {
	font-family:"游明朝", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", "ＭＳ 明朝", serif;
	position: absolute;
	top: 11.5vh;
	left: 4vw;
	color: #000000;
	font-size: 16px;
	line-height: 1.5;
}


/* ---------- hero-area  update:2022/07/06 ---------- */


 


.hero {
	height: 350px;
	text-align: center;
	margin: 0 auto;
	background-image: url("../../img/header/topimage-220701-01-PC.jpg");
	background-position: right;
	background-size: cover;
	border-bottom: 1px solid #E0E0E0;
	z-index: 1;
}
.hero:hover {
	opacity: 80%;
      }
.hero-frame {
	background: linear-gradient(to right,white 40% ,rgba(0,0,0,0) 70%);
}
.hero-container {
	display: grid;
	align-content: center;
	height: 350px;
	margin: 0 auto;
	width: 1000px;
}
.hero a {
	color: #000000;
}
.hero h1 {
	margin-bottom: 32px;
	font-family: "Montserrat", sans-serif;
	font-size: clamp(22.5px, 3vw, 28px);
	min-height: 0vw;
	font-weight: 400;
	line-height: 1.8;
	text-align: left;
	color: #000000;
	text-shadow: 1px 2px 3px #ffffff;
}
.hero h1 span {
	margin-left: -20px;
}
.hero h2 {
	margin: 32px 0;
	font-family: "Yu Mincho", "游明朝", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "ＭＳ 明朝", serif;
	font-size: clamp(16px, 3vw, 22.5px);
	min-height: 0vw;
	font-weight: 400;
	line-height: 1.8;
	text-align: right;
	color: #333333;
	text-shadow: 1px 2px 3px #ffffff;
}
.hero p {
	margin-bottom: 32px;
	font-size: clamp(13px, 3vw, 16px);
	color: #000000;
	text-align: left;
	line-height: 2;
	text-shadow: 1px 2px 3px #ffffff;
	font-family: "Yu Mincho", "游明朝", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "ＭＳ 明朝", serif;
}

/* ---------- hero-area  update:2022/07/12 ---------- */

.doihiroshi_selection {/*親div*/
  position: relative;/*相対配置*/
  text-align: center; 
  margin: 0 auto;
  }
.doihiroshi_selection p {
  position: absolute;/*絶対配置*/
  color: white;/*文字は白に*/
  top: 0;
  left: 0;
  }
.doihiroshi_selection .main-img {
	width: 936px !important;
	object-fit: cover;
	height: 500px;
	left: 10%;
	padding-right: 64px;
  }
.doihiroshi_selection_hero {
	width: 968px;
	height: 350px;
	text-align: center;
	margin: 0 auto;
	background-image: url("../../img/header/main-01.jpg");
	background-position: right;
	background-size: cover;
	border-bottom: 1px solid #E0E0E0;
	z-index: 1;
}
.doihiroshi_selection_hero:hover {
	opacity: 80%;
      }
.doihiroshi_selection_hero-frame {
	background: linear-gradient(to right,white 40% ,rgba(0,0,0,0) 70%);
}
.doihiroshi_selection_hero-container {
	display: grid;
	align-content: center;
	height: 350px;
	margin: 0 auto;
	width: 1000px;
}
.doihiroshi_selection_hero a {
	color: #000000;
}
.doihiroshi_selection_hero h1 {
	margin-bottom: 32px;
	font-family: "Montserrat", sans-serif;
	font-size: clamp(22.5px, 3vw, 28px);
	min-height: 0vw;
	font-weight: 400;
	line-height: 1.8;
	text-align: left;
	color: #000000;
	text-shadow: 1px 2px 3px #ffffff;
}
.doihiroshi_selection_hero h1 span {
	margin-left: -20px;
}
.doihiroshi_selection_hero h2 {
	margin: 32px 0;
	font-family: "Yu Mincho", "游明朝", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "ＭＳ 明朝", serif;
	font-size: clamp(16px, 3vw, 26px);
	min-height: 0vw;
	font-weight: 900;
	line-height: 1.5;
	text-align: right;
	color: #333333;
	text-shadow: 1px 2px 3px #ffffff;
}
.doihiroshi_selection_hero p {
	font-size: clamp(13px, 3vw, 16px);
	color: #000000;
	text-align: center;
	line-height: 1.75;
	text-shadow: 1px 2px 3px #ffffff;
	font-family: "Open Sans" , "Helvetica Neue" , Helvetica , Arial , Verdana , Roboto , "メイリオ" , "游ゴシック" , "Yu Gothic" , "游ゴシック体" , "YuGothic" , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "Meiryo UI" ,  Meiryo , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif;
}
.doihiroshi_selection_content {
	text-align: center; 
	margin: 10px 10px 10px 10px; 
	line-height: 1.75; 
	font-size: 14px;
	font-family: "Open Sans" , "Helvetica Neue" , Helvetica , Arial , Verdana , Roboto , "メイリオ" , "游ゴシック" , "Yu Gothic" , "游ゴシック体" , "YuGothic" , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "Meiryo UI" ,  Meiryo , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif;
}
.doihiroshi_selection_hero .caption {
	margin-top: -40px;
	margin-left: 30px;
	position: absolute;
	font-size: 15px;
}
.parent{
    position: relative;
    width:1000px;
    height:auto;
	margin: 0 auto;
	text-align: center;
}
.child {
	position: absolute;
	top: 426px;
	width: 330px;
	max-height: 430px;
	background: #D5D5D5;
	opacity: 0.9;
	color: #ffffff;
	display: table;
	padding: 17px;
	text-align: right;
	margin: -70px auto 0 619px;
}

/* ---------- tetote hero-area  update:2022/08/01 ---------- */

.tetote {
	width:1000px; 
	text-align:center; 
	margin: 76px auto 0 auto; 
}
.tetote_logo {
	background-color: #ffffff;
	position: absolute;
	top: 247px;
	border: 1px solid #000000;
	padding: 23px;
	margin-left: -20px;
}
.tetote_logo p {
	font-family:游明朝, YuMincho, serif; 
	text-align: left; 
	padiing: 10px;
	line-height: 1.5;
	opacity: 1;
	font-size: 14px;
	margin-bottom: 1em;
}
.tetote_logo img {
	width: 100px!important; 
	padding:30px 25px 20px 25px;
}
.tetote_about {
background-color: #f7f7f7;
position: absolute;
top: 547px;
margin-left: 440px;
padding: 30px;
opacity: 0.9;
width: auto;
}

.tetote_about p {
	opacity: 1; 
	font-family:游明朝, YuMincho, serif; 
	text-align: left; 
	color: #000000;
}
.tetote_about_month {
	line-height: 1.5;
	margin-bottom: 1em;
}
.tetote_about_title {
	line-height: 1.5; 
	font-size: 22px;
	margin-bottom: 0.75em;
}
.tetote_about_title span {
	margin-left: -0.5em;
}
.tetote_about_contents {
	line-height: 1.5; 
	font-size: 16px;
font-family: "Open Sans" , "Helvetica Neue" , Helvetica , Arial , Verdana , Roboto , "メイリオ" , "游ゴシック" , "Yu Gothic" , "游ゴシック体" , "YuGothic" , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "Meiryo UI" ,  Meiryo , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif!important;
}
.tetote_image {
	text-align:right; 
	position: relative;
}
.tetote_package_area {
	top: 580px!important; 
	position: absolute; 
	margin-left: 30px;
}
.tetote_image_packageA {
	width: 60px!important; 
	margin-left: 0px; 
	top: 130px; 
}
.tetote_image_packageB {
	width: 60px!important; 
    margin-left: 0px; 
}
.tetote_image_packageC {
	width: 60px!important; 
	margin-left: 0px; 
}
.tetote_image_main {
	width: 98% !important;
	height: 420px;
	object-fit: cover;

}

.tetote_selection_hero {
	width: 968px;
	height: 430px;
	text-align: center;
	margin: 0 auto;
	background-image: url("https://www.doicoffee.com/component/img/header/main-231011.jpg");
	background-position: right;
	background-size: cover;
	border-bottom: 1px solid #E0E0E0;
	z-index: 1;
}
.tetote_selection_hero_next-month {
	width: 968px;
	height: 430px;
	text-align: center;
	margin: 0 auto;
	background-image: url("https://www.doicoffee.com/component/img/header/main-231002.jpg");
	background-position: left;
	background-size: cover;
	border-bottom: 1px solid #E0E0E0;
	z-index: 1;
}


.tetote_selection_hero:hover {
	opacity: 80%;
      }

.tetote_image_main:hover {
	width: 98% !important;
	height: 420px;
	object-fit: cover;

}



/* ---------- tetote hero-area  update:2022/08/19 ---------- */

.dhs {
	width:1000px; 
	text-align:center; 
	margin: 56px auto 0px auto; 
}
.dhs_logo {
	background-color: #ffffff; 
	position: absolute; 
	top:233px; 
	border:1px solid #000000; 
	padding: 70px 30px;
	margin-left: -20px;
}
.dhs_logo p {
	font-family:游明朝, YuMincho, serif; 
	text-align: left; 
	padiing: 10px;
	line-height: 1.5;
	opacity: 1;
}
.dhs_logo img {
	width: 160px!important; 
	padding:0;
}
.dhs_about {
	background-color: #f7f7f7;
	position: absolute;
	top: 580px;
	margin-left: 550px;
	padding: 30px;
	opacity: 0.9;
	width: 370px;
}
.dhs_about p {
	opacity: 1; 
	font-family:游明朝, YuMincho, serif; 
	text-align: left; 
	color: #000000;
}
.dhs_about_month {
	line-height: 1.5;
}
.dhs_about_title {
	line-height: 1.5; 
	font-size: 22px;
	margin-bottom: 0.75em;
}
.dhs_about_title span {
	margin-left: -0.5em;
}
.dhs_about_contents {
	line-height: 1.5; 
	font-size: 16px;
font-family: "Open Sans" , "Helvetica Neue" , Helvetica , Arial , Verdana , Roboto , "メイリオ" , "游ゴシック" , "Yu Gothic" , "游ゴシック体" , "YuGothic" , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "Meiryo UI" ,  Meiryo , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif!important;
}
.dhs_image {
	text-align:right; 
	position: relative;
}
.dhs_package_area {
	top: 580px!important; 
	position: absolute; 
	margin-left: 30px;
}
.dhs_image_packageA {
	width: 60px!important; 
	margin-left: 0px; 
	top: 130px; 
}
.dhs_image_packageB {
	width: 60px!important; 
    margin-left: 0px; 
}
.dhs_image_packageC {
	width: 60px!important; 
	margin-left: 0px; 
}
.dhse_image_main {
	width: 98% !important;
	height: 420px;
	object-fit: cover;

}
.dhs_selection_hero {
	width: 960px;
	height: 430px;
	text-align: center;
	margin: 0 auto;
	background-image: url("../../img/header/main-231002.jpg");
	background-position: right;
	background-size: cover;
	border-bottom: 1px solid #E0E0E0;
	z-index: 1;
	object-fit: cover;
}
.dhs_selection_hero:hover {
	opacity: 80%;
      }
.dhs_image_main:hover {
	width: 98% !important;
	height: 420px;
	object-fit: cover;

}

/* ---------- new-item hero-area  update:2022/08/24 ---------- */

.new-item {
	width:1000px; 
	text-align:center; 
	margin: 56px auto 0px auto; 
}
.new-item_logo {
	background-color: #ffffff; 
	position: absolute; 
	top:233px; 
	border:1px solid #000000; 
	padding:30px;
	margin-left: -20px;
}
.new-item_logo p {
	font-family:游明朝, YuMincho, serif; 
	text-align: center; 
	padiing: 10px;
	line-height: 1.5;
	opacity: 1;
	font-weight: bold;
	color: #000000;
}
.new-item_logo img {
	width: 160px!important; 
	padding:30px 25px 10px 25px;
}
.new-item_logo_catchcopy {
	font-size: 13px; 
	margin-bottom: 0.5em;
}

.new-item_logo_new {
	color: #B40D10!important; 
	margin-bottom: 0.5em;
    text-align: left; 
    font-size: 24px; 
    line-height: 1.25;
    font-family:"Open Sans" , "Helvetica Neue" , Helvetica , Arial , Verdana , Roboto , "メイリオ" , "游ゴシック" , "Yu Gothic" , "游ゴシック体" , "YuGothic" , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "Meiryo UI" ,  Meiryo , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif!important;
}

.new-item_about {
	background-color: #f7f7f7;
	position: absolute;
	top: 600px;
	margin-left:648px;
	padding: 30px;
	opacity: 0.9;
	width: auto;
	text-align: left;
	line-height: 1.75;
	color: #000000;
}
.new-item_about p {
	opacity: 1; 
	font-family:游明朝, YuMincho, serif; 
	text-align: left; 
	color: #000000;
}
.new-item_about_month {
	line-height: 1.5;
}
.new-item_about_title {
	line-height: 1.5; 
	font-size: 22px;
	margin-bottom: 0.75em;
}
.new-item_about_title span {
	margin-left: -0.5em;
}
.new-item_about_contents {
	line-height: 1.5; 
	font-size: 16px;
font-family: "Open Sans" , "Helvetica Neue" , Helvetica , Arial , Verdana , Roboto , "メイリオ" , "游ゴシック" , "Yu Gothic" , "游ゴシック体" , "YuGothic" , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "Meiryo UI" ,  Meiryo , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif!important;
}
.new-item_image {
	text-align:right; 
	position: relative;
}
.new-item_package_area {
	top: 580px!important; 
	position: absolute; 
	margin-left: 30px;
}
.new-item_image_packageA {
	width: 80px!important; 
	margin-left: 0px; 
	margin-top: -40px; 
}
.new-item_image_packageB {
	width: 60px!important; 
    margin-left: 0px; 
}
.new-item_image_packageC {
	width: 60px!important; 
	margin-left: 0px; 
}
.new-item_image_packageD {
	width: 60px!important; 
	margin-left: 0px; 
	margin-top: -40px; 
}
.new-item_image_main {
	width: 98% !important;
	height: 420px;
	object-fit: cover;

}
.new-item_selection_hero {
	width: 960px;
	height: 430px;
	text-align: center;
	margin: 0 auto;
	background-image: url("https://www.doicoffee.com/component/img/header/main-240515.jpg");
	background-position: right;
	background-size: cover;
	border-bottom: 1px solid #E0E0E0;
	z-index: 1;
	object-fit: cover;
	object-position: 250px 125px;
}
.new-item_selection_hero:hover {
	opacity: 80%;
      }
.new-item_image_main:hover {
	width: 98% !important;
	height: 420px;
	object-fit: cover;

}

/* ---------- gift-item hero-area  update:2023/6/23 ---------- */

.gift-item {
	width:1000px; 
	text-align:center; 
	margin: 56px auto 0px auto; 
}
.gift-item_logo {
	background-color: #ffffff; 
	position: absolute; 
	top:233px; 
	border:1px solid #000000; 
	padding:0;
	margin-left: -20px;
	width: 200px;
	height: 200px;
}
.gift-item_logo p {
	font-family:游明朝, YuMincho, serif; 
	text-align: center; 
	padiing: 10px;
	line-height: 1.5;
	opacity: 1;
	font-weight: bold;
	color: #000000;
	font-size: 22px;
}
.gift-item_logo img {
	width: 100%!important;
	padding:1em 0 0.5em 0;
}
.gift-item_logo_catchcopy1 {
	font-size: 22px!important; 
	margin-bottom: 0.25em!important;
	margin-top: 1.5em!important;
}
.gift-item_logo_catchcopy2 {
	font-size: 16px!important; 
	margin-bottom: 0.5em;
}

.gift-item_logo img {
	margin-top: 0em;
}

.gift-item_logo_new {
	color: #A20000!important; 
	font-size: 28px; 
	margin-bottom: 0.5em;
}

.gift-item_about {
    background-color: #f7f7f7;
    position: absolute;
    top: 600px;
    margin-left: 510px;
    padding: 20px;
    opacity: 1;
    width: auto;
    text-align: left;
    line-height: 1.75;
    color: #000000;
    display: flex;
    align-items: center;
}
.gift-item-img-area img{
	width: 100px!important;
	position: absolute;
	bottom: -1em;
	opacity: 100!important;
}
.gift-item-text-area {
	margin-left: 8em;
}
.gift-item-text-area p:nth-child(1) {
	font-weight: bold;
}
.gift-item-text-area p:nth-child(2) {
	font-weight: 400;
}

.gift-item_about p {
	opacity: 1; 
	font-family:游明朝, YuMincho, serif; 
	text-align: left; 
	color: #000000;
}
.gift-item_about_month {
	line-height: 1.5;
}
.gift-item_about_title {
	line-height: 1.5; 
	font-size: 22px;
	margin-bottom: 0.75em;
}
.gift-item_about_title span {
	margin-left: -0.5em;
}
.gift-item_about_contents {
	line-height: 1.5; 
	font-size: 16px;
font-family: "Open Sans" , "Helvetica Neue" , Helvetica , Arial , Verdana , Roboto , "メイリオ" , "游ゴシック" , "Yu Gothic" , "游ゴシック体" , "YuGothic" , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "Meiryo UI" ,  Meiryo , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif!important;
}
.gift-item_image {
	text-align:right; 
	position: relative;
}
.gift-item_package_area {
	top: 580px!important; 
	position: absolute; 
	margin-left: 30px;
}
.gift-item_image_packageA {
	width: 80px!important; 
	margin-left: 0px; 
	margin-top: -40px; 
}
.gift-item_image_packageB {
	width: 60px!important; 
    margin-left: 0px; 
}
.gift-item_image_packageC {
	width: 60px!important; 
	margin-left: 0px; 
}
.gift-item_image_packageD {
	width: 60px!important; 
	margin-left: 0px; 
	margin-top: -40px; 
}
.gift-item_image_main {
	width: 98% !important;
	height: 420px;
	object-fit: cover;

}
.gift-item_selection_hero {
	width: 960px;
	height: 430px;
	text-align: center;
	margin: 0 auto;
	background-image: url("https://www.doicoffee.com/component/img/header/main-230623.jpg");
	background-position: right;
	background-size: cover;
	border-bottom: 1px solid #E0E0E0;
	z-index: 1;
	object-fit: cover;
	object-position: 250px 125px;
}
.gift-item_selection_hero:hover {
	opacity: 80%;
      }
.gift-item_image_main:hover {
	width: 98% !important;
	height: 420px;
	object-fit: cover;

}


/* new item ペルー 221027 */

.main-visual-title-area {
	background-color: #F4EEED; 
	font-family: YuMincho, "Yu Mincho", "游明朝", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "ＭＳ 明朝", serif;
}

/* 新銘柄 ヒーローエリア  230719-追加*/

.new-product {
    margin: 4em auto 0 auto; 
    text-align: center;
    max-width: 1000px;
}
.new-product .new-product_flame {
    position: relative; 
    width: 1000px;
}
.new-product .new-product_flame .new-product_main-image {
    width: 960px; 
    margin-left: 20px; 
    margin-right: 20px;
}
.new-product .new-product_flame .new-product_main-image img {
    width: 100%;
    object-fit: cover;
}
.new-product .new-product_flame .new-product_content-area-left {
    position: absolute; 
    left: 0; 
    top: -2em ;
    padding: 24px; 
    width: auto; 
    text-align: left; 
    line-height: 1.75; 
    color: #000000; 
    background-color: #fff; 
    display: flex;
    border: initial; 
    box-shadow: 4px 4px 12px #6e6762;
}
.new-product .new-product_flame .package {
    position: absolute; 
    left: 3em; 
    bottom: -2em;
}
.new-product .new-product_flame .package img {
    opacity: 1;
    width: 70px!important;
}
.new-product_content-area-left_logo {
    width:60px;
}
.new-product_content-area-left_text-area {
    margin-left: 0.25em;
}
.new-product_content-area-left_text-area .new {
    font-family: 游明朝, YuMincho, serif; 
    text-align: left; 
    padiing: 10px; 
    line-height: 1.75; 
    font-weight: bold; 
    font-size: 24px; 
    color: #A20000!important;
}
.new-product_content-area-left_text-area .product-name {
    font-family: 游明朝, YuMincho, serif; 
    text-align: left; 
    padiing: 10px; 
    font-weight: bold; 
    color: #000000;
    font-size: 18px; 
    line-height: 1.75;
}
.new-product a:hover {
    opacity: 0.8;
}
.new-product_main-image div {
    position: relative;
}
.imgOption {
    bottom: -20px!important; 
    width:80px!important; 
    position: absolute!important; 
    left:20px!important;
}
.new-product_text-area {
    position: absolute; 
    right: 0; 
    bottom: -2em;
    padding: 30px; 
    opacity: 0.9; 
    width: auto; 
    text-align: left; 
    line-height: 1.75; 
    color: #000000; 
    background-color: #f7f7f7;
}
/* 手と手 ヒーローエリア  230719-追加*/

.tetote-product {
    margin: 4em auto 0 auto; 
    text-align: center;
    max-width: 1000px;
}
.tetote-product .tetote-product_flame {
    position: relative; 
    width: 1000px;
}
.tetote-product .tetote-product_flame .tetote-product_main-image {
    width: 960px; 
    margin-left: 20px; 
    margin-right: 20px;
}
.tetote-product .tetote-product_flame .tetote-product_main-image img {
    width: 100%;
    object-fit: cover;
}
.tetote-product .tetote-product_flame .tetote-product_content-area-left {
    position: absolute; 
    left: 0; 
    top: -2em ;
    padding: 24px; 
    width: auto; 
    text-align: left; 
    line-height: 1.75; 
    color: #000000; 
    background-color: #fff; 
    border: 1px solid #000;
    display: flex;
}
.tetote-product .tetote-product_flame .package {
    position: absolute; 
    left: 3em; 
    bottom: -2em;
}
.tetote-product .tetote-product_flame .package img {
    opacity: 1;
    width: 70px!important;
}
.tetote-product_content-area-left_logo {
    width:60px;
}
.tetote-product_content-area-left_text-area {
    margin-left: 1em;
}
.tetote-product_content-area-left_text-area .new {
    font-family: 游明朝, YuMincho, serif; 
    text-align: left; 
    padiing: 10px; 
    line-height: 1.75; 
    font-weight: bold; 
    font-size: 24px; 
    color: #A20000!important;
}
.tetote-product_content-area-left_text-area .product-name {
    font-family: 游明朝, YuMincho, serif; 
    text-align: left; 
    padiing: 10px; 
    line-height: 1.5; 
    font-weight: bold; 
    color: #000000;
}
.tetote-product a:hover {
    opacity: 0.8;
}


.df-fix {
	max-width:1000px;
	text-align: center;
	align-items: center;
	margin: 0 auto;
	display: flex;
	padding: 72px;
}

.tuning {
	align-items: center !important;
	justify-content: center !important;
	margin: 0 auto !important;
	display: flex !important;
}

.tuning_image {
	width: 40%;
	vertical-align: middle;
}
.tuning_image img {
	max-height: 350px; 
	object-position: top;
	justify-content: center;
	object-fit: cover;
	width: 100%;

}
.main-contents-area {
	width: 60%;
	text-align: center;
	margin-left: 72px;
}


.main-contents-area .logo {
	margin-bottom: 44px;
	text-align: left;
} 

.main-contents-area .logo img {
	justify-content: center;
	object-fit: cover;
	position: relative;
}

.main-contents-area_catchcopy {
	text-align: left;
	margin-bottom: 44px;
	line-height: 2em;
	font-size: 1.25em;
}
.main-contents-area .tuning_contents p:nth-child(3) {
	text-align: left;
	margin-bottom: 44px;
	line-height: 1.75em;
	font-size: 1em;
}

.main-contents-area_contents {
	text-align: left;
	line-height: 1.75!important;
	font-size: 1em !important;
}

/* new item ペルー */

/* contents update:2016/08/02　*/

#contents {
	width:1000px;
	padding: 64px 0;
	margin:0 auto;
}


.mainWrap {
	width: 720px;
	float: right;
}


/* left */

#leftWrap {
	width: 210px;
	border: 1px solid #3b3b3b;
	float:left;
	padding: 25px 0 0;
	margin: 0 auto;
	color: #59575c;
}

#mov {
	padding: 0 15px 20px;
}

#lNav ul {
	width: 195px;
	margin: 0 auto;
	padding: 0;
}

#lNav h3 {
	width:195px;
	font-weight: bold;
	color: #000;
	border-bottom: 1px dotted #cbcbcb;
	padding: 15px 0 5px;
	margin: 0 auto;
	font-size: 12px;
}

#lNav li {
	border-bottom: 1px dotted #cbcbcb;
	font-size: 11px;
}

#lNav li a {
	display: block;
	padding: 8px 0;
}

#lBnr {
	text-align: center;
}

#lBnr p {
	margin-bottom: 10px;
}

.sideNav__soldout-text {
	font-weight: bold;
	color: #F00;
}


/* ftWrap */

#siteMap {
	color: #FFF;
	background: #3E3A39;
	padding: 25px 0;
}

#siteMap .inner {
	width: 960px;
	margin: 0 auto;
}

#siteMap a {
	color: #FFF;
}

#siteMap dl {
	float: left;
	width: 240px;
	margin: 0 15px;
	line-height: 25px;
}

#siteMap dl dt {
	font-size: 15;
	font-weight: bold;
}

#siteMap dl dd {
	font-size: 14px;
}

footer {
	background: #231816;
	padding: 40px 0 0;
	color: #FFF;
	font-size: 16px;
}


footer .inner {
	width: 960px;
	margin: 0 auto;
	line-height: 23px;
}

.ftBlock {
	float: left;
	width: 620px;
}

.ftBlock:nth-of-type(2) {
	border-left:1px solid #5b5754;
	width: 300px;
}



.ftBlock p.text-box {
	font-size:12px;
	line-height:24px;
	text-align: justify;
}

.ftBlock .footer--logo {
	width:339px;
}
/* 20220802 SNSロゴ追加更新 */
.footer-sns {
	display: flex;
	gap: 16px;
	font-size: 32px;
	margin-left: -40px;
	margin-top: 98px;
}

.footer-sns a {
	display: grid;
	place-items: center;
	width: 36px;
	aspect-ratio: 1 / 1;
	background-color: #c2c2c2c;
	clip-path: circle(80%);
	color: #c2c2c2;
	text-decoration: none;
}



#member {
	width: 960px;
	margin: 16px auto 0;
	text-align: center;
	border: 1px solid #FFF;
	padding: 8px 0;
	font-size:12px;
}

#copyright {
	font-size:16px;
	color:#fff;
}


/* update 16/09/23 */

#infomation {
	color: #FFF;
	background: #291c19;
	padding: 48px 0;
}

#infomation .inner {
	width: 960px;
	margin: 0 auto;
	display:flex;
	justify-content:space-around;

}

#infomation .inner > div {
	flex-direction:row;
	flex-basis:288px;
	flex-grow:1;
}

#infomation .inner > div .calendar {

}

#infomation .inner > div .calendar > div {
	float:left;
	padding: 16px;
}

#infomation .inner > div .calendar table caption {
	padding:4px;
	margin-bottom:8px;
	text-align:center;
	background:#3c2520;
	border-radius:3px;
	color:#fff;
}

#infomation .inner > div .calendar table caption span {
	padding:0 8px;
	margin:4px 0 0 0;
}


#infomation .inner > div .calendar table th {
	padding:4px;
	text-align:center;
	font-style:normal;
	color:#d4b3ab;
}


#infomation .inner > div .calendar table td {
	font-size: 12px;
	padding:5px 7px;
	text-align:center;
	empty-cells: show;
	color:#fff;
	font-weight: bold;
}

#infomation .inner > div .calendar table td.holiday {
	background: linear-gradient(to bottom,  #89021f 0%,#6d0019 100%);
	color:#EDD1D1;
	border-radius:50%;
	font-weight:bold;
}

#infomation .inner > div .calendar .note {
}

#infomation .inner > div .calendar .note p {
	/*height:32px; 200407大野編集 営業日変更*/ 
	color:#FFF;
	font-weight:bold;
	font-size: 12px;
}


#infomation .inner > div .calendar .note p:nth-of-type(1) span {
	float:left;
}

#infomation .inner > div .calendar .note p:nth-of-type(1) span:nth-of-type(2) {
	padding:4px 0 0 4px;
}

#infomation .inner > div .calendar .note .square {
   width:24px;
   height:24px;
   background: linear-gradient(to bottom,  #89021f 0%,#6d0019 100%);
   border-radius:50%;
   display:table-cell;
}



#infomation a {
	color: #FFF;
}

#infomation dl {
    width: 230px;
	float: left;
	padding:0 8px 8px 0;
}

#infomation dl dt {
	font-size: 14px;
	font-weight:bold;
	margin-bottom: 7px;
}

#infomation dl dd {
	font-size: 12px;
    line-height: 18px;
	display: list-item;
	list-style-type:disc;
	margin-left: 14px;
	margin-bottom: 7px;
}




/* top */

#bnrArea {
	margin-left: -10px;
	width: 740px;
	letter-spacing: -.40em;
}

#bnrArea p,
#bnrArea h2,
#bnrArea div {
	margin: 0 10px 20px;
	display: inline-block;
	vertical-align: top;
	letter-spacing: normal;
}

.topic-red {
    position: absolute; 
    right: 0.5em; 
    bottom: 1.2em; 
    background-color: #B40D10; 
    border-radius: 5px; 
    display: flex; 
    align-items: center;
    padding: 0.25em;
}
.topic-red p {
    font-size: 13px; 
    color: #fff; 
    line-height: 1.5; 
    margin: 0 0 0 0.5em!important; 
    font-weight: normal;
}

.teiki-area {
	position: relative!important;
}

.teiki-area .btn100g {
	width: 90px; 
	text-align: center; 
	background-color: #000000; 
	color: #ffffff; 
	padding: 8px; 
	bottom: 20px; 
	left: 25px; 
	position: absolute; 
	text-decoration: none; 
	font-size: 16px;
}
.teiki-area .btn100g:hover {
	opacity: 0.6;
}
.teiki-area .btn200g {
	width: 90px; 
	text-align: center; 
	background-color: #000000; 
	color: #ffffff; 
	padding: 8px; 
	bottom: 20px; 
	left: 150px; 
	position: absolute; 
	text-decoration: none; 
	font-size: 16px;
}

.teiki-area .btn200g:hover {
	opacity: 0.6;
}

/* breadcrumbs */

#breadcrumbs {
	padding: 16px 0;
	border-top:1px solid #ccc;
}

#breadcrumbs .inner {
	width: 960px;
	margin: 0 auto;
}

#breadcrumbs .cd-breadcrumb {
	float:right;
}

#breadcrumbs .cd-breadcrumb::after {
  clear: both;
  content: "";
  display: table;
}
#breadcrumbs .cd-breadcrumb li {
  display: inline-block;
  float: left;
  margin: 0.5em 0;
}

#breadcrumbs .cd-breadcrumb li::after {
  /* this is the separator between items */
  display: inline-block;
  content: '\00bb';
  margin: 0 .6em;
  color: #959fa5;
}

#breadcrumbs .cd-breadcrumb li:last-of-type::after {
  /* hide separator after the last item */
  display: none;
}

#breadcrumbs .cd-breadcrumb li > * {
  /* single step */
  display: inline-block;
  font-size: 12px;
  color: #2c3f4c;
  padding:0 16px;
}

#breadcrumbs .cd-breadcrumb li.current > * {
  /* selected step */
  color: #291c19;
}

#breadcrumbs .no-touch .cd-breadcrumb a:hover {
  /* steps already visited */
  color: #291c19;
}


/* #page-top */

#page-top {
	position:fixed;
	bottom:16px;
	right:16px;
	width:48px;
	height:48px;
	background-color:#291c19;
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	opacity:0.618;
}
#page-top span {
	display:block;
    position: absolute;
    width: 20px;
    height: 20px;
    border: 1px solid transparent;
    border-left-color: #FFF;
    border-top-color: #FFF;
    top: 20px;
    left: 13px;
	transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
}

#page-top:hover {
	opacity:1;
}


/* #section-01 */

#section-01 {
}

#section-01 .inner {
	width: 960px;
	margin: 0 auto;
	display:flex;
	justify-content:space-around;
	padding:32px 0 4px;
}

#section-01 .inner > div {
	flex-direction:row;
}

#section-01 .inner > div:nth-of-type(1) {
	flex-grow:1;
	text-align:left;
}

#section-01 .inner > div:nth-of-type(2) {
	flex-grow:2;
	text-align:right;
}

#section-01 .inner > div:nth-of-type(2) a {
	color:#CCC;
	font-size:12px;
	padding:0 16px;
	
}


/* common */

.arrow {
	background: url(../../img/footer/arw.png) 0 center no-repeat;
	padding:8px 0 8px 20px;
}



/*土居珈琲からのお知らせ*/
.main__notice {
	box-sizing: border-box;
	width: 722px;
	border:1px solid #000;
	padding:1em 0.75em;
	margin:0 0 2em 0;
	font-size: 16px;
}

.main__notice h3 {
	border-bottom:1px dotted #000;
	padding:0.5em;
}

.main__notice ul li {
	padding:1.75em 1em 0;
	
	}

.main__notice ul li span {
	float:left;
	display: inline;
	font-family:Arial, Helvetica, sans-serif;
	padding:0px 7px;
	margin:0 14px 0 0;
	background:#000;
	color:#FFF;
    border-radius: 10px;       
    -webkit-border-radius: 10px;  
    -moz-border-radius: 10px; 
	}



/* お知らせ 重要 */

.importantNnotices {
	display: block;
	box-sizing: border-box;
	width: 720px;
	padding: 44px 28px;
	}

.importantNotices--skin-a {
	background-color: #FADBDA;
	border-radius: 5px;
	}

.importantNotices--skin-a em {
	padding: 0.5em 0.75em;
	border: 1px solid #FF0004;
	border-radius: 3px;
	background-color: #FB0004;
	color: #FFF;
	font-style: normal;
	font-weight: normal;
	margin-right: 1em;
	}

.importantNotices--skin-a a {
	color: #FA514B !important;
	}


/* お知らせ 重要 商品ページ*/

.ItemImportantNnotices {
	display: block;
	box-sizing: border-box;
	width: 960px;
	padding: 44px 210px;
	margin-bottom: 50px;
	font-weight: bold;
	}

.ItemImportantNotices--skin-a {
	background-color: #FADBDA;
	border-radius: 5px;
	width: 960px;
	}

.ItemImportantNotices--skin-a em {
	padding: 0.5em 0.75em;
	border: 1px solid #FF0004;
	border-radius: 3px;
	background-color: #FB0004;
	color: #FFF;
	font-style: normal;
	font-weight: normal;
	margin-right: 1em;
	}

.ItemImportantNotices--skin-a span {
	color: #FA514B !important;
	}


/* お知らせ 上部表示*/

.Nnotices {
	display: block;
	box-sizing: border-box;
	width: 720px;
	padding: 36px 28px;
	}

.Notices--skin-a {
	border: solid 1px #CCCCCC;
	border-radius: 5px;
	margin-bottom: 20px;
	padding: 28px;
	}

.Notices--skin-a:not(:first-child) {
	margin-top: 32px;
}

.Notices--skin-a em:first-child{
	position: relative;
}

.Notices--skin-a h2 {
	font-size: 14px;
	display: block;
}

.Notices--skin-a h2:not(:first-child) {
	margin-top: 16px;
}


.Notices--skin-a em {
	padding: 0.5em 1em;
	border-radius: 3px;
	background-color: #000000;
	color: #FFF;
	font-style: normal;
	font-weight: normal;
	margin-right: 1em;
	}

.Notices--skin-a p {
	padding-left: 120px;
	padding-right: 16px;
	padding-top: 18px;
	letter-spacing: 0.1em;
	line-height: 1.5em;
	font-size: 14px;
	}

.Notices--skin-a a {
	color: #000000;
	}

.Notices--skin-a a:hover {
    color: #CB3232;
    text-decoration: underline;
    }


/*	サイドナビ用　「限定」 タグ */

.tag__Limited-merchandise:before {
	content: "限 定";
	font-size: 1em;
	background:#E50003;
	color: #fff;
	padding: 3px 6px 1px;
	margin-right: 5px;
	border-radius: 5px;
}

	.tag__Restock:before {
	content: "再 入 荷";
	font-size: 1em;
	background:#993333;
	color: #fff;
	padding: 3px 6px 1px;
	margin: 0px 5px 10px 0px;
	border-radius: 3px;
}

	.tag__First-ranking:before {
	content: "人気第１位";
	font-size: 1em;
	background:#FFCC00;
	color: #fff;
	padding: 3px 6px 1px;
	margin: 0px 5px 10px 0px;
	border-radius: 3px;
}


/*	バナー オーバーブレンド */

#bnrArea.cf .overblend{
	position: relative;
	margin:initial;
}

#bnrArea.cf .overblend p.link-ec{
	position: absolute;
	display: inline-block;
	bottom: 20px;
	right: 20px;
	line-height: 1.6em;
	font-size: 0.6em;
	background-color: #a40001;
	color: #FFF;
	padding: 4px 25px;
	letter-spacing: 0.125em;
	text-align: right;
	z-index: 9999;
	font-family: Georgia, 游明朝, "Yu Mincho", YuMincho, "Hiragino Mincho ProN", HGS明朝E, メイリオ, Meiryo, serif;
	border-radius: 3px;
}

#bnrArea.cf .overblend p.link-ec:hover{
	opacity: 0.7;
}


/*-----------------------------------------------
　  2020/10/06 マップカラー変更作業
-----------------------------------------------*/

.map-wrapper {
  display: inline-block;
  background: #4A3017 ;
}

.map-wrapper iframe {
  filter: grayscale(1);
  opacity: 94%;
  vertical-align: bottom;
}



/*-----------------------------------------------
　  2021/07/19 単品定期便注文専用ページ
-----------------------------------------------*/
.regular-service__skin-a {
	padding-top: 44px !important;
	padding-bottom: 44px !important;
	text-align: center !important;
	width: 70% !important;
	margin: 0 auto !important;
	position: relative !important;
}

.regular-service__skin-a div {
	position: absolute;
}

.regular-service__skin-a p{
	text-align: center;
	font-weight: 400;
	font-size: 24px !important;	
	color: #FFF;
	margin: auto;
	line-height: 100px;
	width: 100px;
	height:100px;
	background-color: #7F0000;
	position:absolute;
	border-radius:5px; 
}

.regular-service__skin-a h1{
	font-size: 2.5em !important;
	font-weight: normal !important;
	line-height: 1.5 !important;
}


/*-----------------------------------------------
　  2023/04/25 ビックアップ（限定銘柄・最新銘柄・トピック）
-----------------------------------------------*/


.limited {
	position: absolute!important;
	display: flex!important;
	align-items: center!important;
	margin: 0 auto!important;
	bottom: 3em!important;
	left: 0.65em!important;
}

.limited p {
	font-size: 16px!important;
	color: #B40D10!important;
	text-align: center!important;
	margin: 0 auto!important;
}


.limited-tool {
	position: absolute!important;
	display: flex!important;
	align-items: center!important;
	margin: 0 auto!important;
	top: 25px!important;
	left: 30px!important;
}

.limited-tool p {
	font-size: 15px!important;
	color: #B40D10!important;
	text-align: center!important;
	line-height: 1.5em; 
	letter-spacing: 0.005em; 
	writing-mode: vertical-rl;

}

.limited-ice {
	position: absolute!important;
	display: flex!important;
	align-items: center!important;
	margin: 0 auto!important;
	bottom: 2em!important;
	left: 0.95em!important;
}

.limited-ice p {
	font-size: 16px!important;
	color: #B40D10!important;
	text-align: center!important;
	margin: 0 auto!important;
}

.teiki-conts {
	position: absolute!important;
	display: flex!important;
	align-items: center!important;
	margin: 0 auto!important;
	top: 1.15em!important;
	left: 1.1em!important;
}

.teiki-conts p {
	font-size: 16px!important;
	color: #B40D10!important;
	text-align: left!important;
	margin: 0 auto!important;
	line-height: 1.5;
}

.limited-tetote {
	position: absolute; 
	bottom: 0.5em; 
	right: 2em;
}

.limited-tetote .turn p {
	writing-mode: vertical-lr!important;
	-webkit-writing-mode: vertical-lr!important;
	-ms-writing-mode: vertical-lr!important;
	display: inline-block!important;
	height: 200px!important;
	font-size: 14px!important;
	text-align: left!important;
	line-height: 1.5!important;
	color: #B40D10!important;
}
.limited-tetote .turn p span {
	text-combine-upright: all!important;
}


.teiki-txt {
	position: absolute!important;
	display: flex!important;
	align-items: center!important;
	margin: 0 auto!important;
	top: 1em!important;
	left: 0.95em!important;
}

.teiki-txt p {
	font-size: 16px!important;
	color: #B40D10!important;
	text-align: left;
	margin: 0 auto!important;
    line-height: 1.5;
}
.teiki-txt p span{
    margin-left: -0.5em!important;
}

.topic {
	position: absolute!important;
	display: flex!important;
	align-items: center!important;
	margin: 0 auto!important;
	width:99.6%!important; 
	height: 100%!important; 
	top: 0!important;
}

.topic p {
	font-size: 16px!important;
	color: #B40D10!important;
	text-align: left!important;
	margin-top: 26em!important; 
	margin-left: 1.3em!important; 
	line-height: 1.5!important; 
	height: 100%!important;
}

.soldout {
	position: absolute!important;
	background-color: #ffffff!important;
	opacity: 0.8!important;
	display: flex!important;
	align-items: center!important;
	margin: 0 auto!important;
	width:99.6%!important; 
	height: 99.6%!important;
	border: 1px solid #E2E2E2!important;
	top: 0px!important;
	pointer-events: none;
}

.soldout p {
	font-size: 100%!important; 
	color: #000000!important; 
	text-align: center!important; 
	margin: 0 auto!important;
	font-family:  游明朝, YuMincho, Hiragino Mincho ProN, Hiragino Mincho Pro, ＭＳ 明朝, serif;
}


.batsu {
  display: block;
  position: relative;
  width: 30px;
  height: 30px;
  z-index: 999;

}
 
.batsu::before, .batsu::after { /* 共通設定 */
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px; /* 棒の幅（太さ） */
  height: 140px; /* 棒の高さ */
  background: #E4233B;
}
 
.batsu::before {
  transform: translate(-50%,-50%) rotate(45deg);
}
 
.batsu::after {
  transform: translate(-50%,-50%) rotate(-45deg);
}