@charset "shift_jis";
/* CSS Document */

/* --------------------------------------------------------------------------------
	共通クラス
-------------------------------------------------------------------------------- */

.clearfix:after{
	content:".";
	display:block;
	clear:both;
	height:0;
	visibility:hidden;
}
.clearfix{
	min-height:1%;
}



/***************** 
   
*****************/
#mocha4082b{
	font-size: 25px;
	padding-bottom:10%;
	background: #fff;
}

#mocha4082b img{
	width:100%;
}
#mocha4082b .img1{
	margin:0 0 2% 0;
}
#mocha4082b .img3{
	margin:0 0 5% 0;
}

#mocha4082b .img4{
	margin:0 0 2% 0;
}

#mocha4082b .img5{
	margin:0 0 5% 0;
}

#mocha4082b .text1{
	color:#553914;
	margin:0 2% 3%;
	text-align: center;
}

#mocha4082b .img6{
	margin:5% 0 0 0;
}
#mocha4082b .cart {
    width: 86%;
    margin: 5% auto 8%;
}

#mocha4082b .textbox {
	margin:1.5% 0 0;
}


#mocha4082b .textbox p{    
	float: left;
    width: 60%;
    padding: 2% 3% 0 2%;
}


#mocha4082b .textbox div{
	float: right;
    width: 37%;
    padding: 2% 0 0 0;
}
#mocha4082b dl{
	display:table;
	border:1px solid #e5e5e5;
	margin:2% 2% 5%;
}
#mocha4082b dl dt{
	display:table-cell;
	background:#e5e5e5;
    text-align: center;
	padding: 1.5%;
	width:14.5%;
}
#mocha4082b dl dd{
	display:table-cell;
    padding: 1.5%;
	width:85.5%;
}

/********** ���q�l����̐� **********/
#mocha4082b .voice{
	border:10px solid #663200;
	padding:3% 2%;
	background:#ffffe1;
}
#mocha4082b .voice .heading img{
	padding:0 2% 2%;
	width:100%;
}
#mocha4082b .voice .voice-box .mark1{
	background:#FF0;
}
#mocha4082b .voice .voice-box .mark2{
	text-align:right;
	display:block;
}

#mocha4082b .voice .voice-box1{
	padding:0 0 3%;
}
#mocha4082b .voice .voice-box1 .img-voice{
	float:left;
	width:18%;
}
#mocha4082b .voice .voice-box .txt-voice{
	border:3px solid #cccccc;
	padding:2%;
	border-radius:10px;
	background:#FFF;
}
#mocha4082b .voice .voice-box1 .txt-voice {
	float:right;
	width:79%;
 	position: relative;
	display: inline-block;
	min-width: 120px;
 	max-width: 100%;
	background: #FFF;
 	border: solid 3px #cccccc;
 	box-sizing: border-box;
}

#mocha4082b .voice .voice-box1 .txt-voice:after{
	content: "";
	position: absolute;
	top: 17%;
	left: -38px;
 	margin-top: -14px;
	border: 14px solid transparent;
	border-right: 21px solid #cccccc;
 	z-index: 1;
}


#mocha4082b .voice .voice-box2 .txt-voice {
	float:left;
	width:79%;
 	position: relative;
	display: inline-block;
	min-width: 120px;
 	max-width: 100%;
	background: #FFF;
 	border: solid 3px #cccccc;
 	box-sizing: border-box;
}

#mocha4082b .voice .voice-box2 .txt-voice:after{
	content: "";
	position: absolute;
	top: 17%;
	right: -38px;
 	margin-top: -14px;
	border: 14px solid transparent;
	border-left: 21px solid #cccccc;
 	z-index: 1;
}
#mocha4082b .voice .voice-box2 .img-voice{
	float:right;
	width:18%;
}


/********** �J�t�F�H�[�̂������ **********/
#mocha4082b .img11{
	margin:5% 0 0;
}
#mocha4082b .commitment{
	margin:0 auto 7%;
	background:#e5e5e5;
}

#mocha4082b .commitment .text{
	float: left;
    width: 48%;
    padding: 2% 0 2% 3%;
	font-size:0.93em;
}
#mocha4082b .commitment .img{
	float:right;
	width:50%;
}
#mocha4082b .commitment .img img{
	width:100%;
}


/********** �X�^�b�t����̃I�X�X���R�����g��**********/
#mocha4082b .osusume-comment{
	margin:8% auto 6%;
	padding:2%;
	border: dashed 1px #e5e5e5;
	font-size:0.9em;
	color:#522800;
	width:96%;
}
#mocha4082b .osusume-comment .heading{
	padding:1%;
	background:#e5e5e5;
	font-size:1.2em;
}
#mocha4082b .osusume-comment .osusume-comment-box{
	padding:2% 1%;
}
#mocha4082b .osusume-comment .heading .mark1{
	color:#f00;
}

#mocha4082b .osusume-comment-box span{
	color:#ff0000;
	font-weight:bold;
}



#mocha4082b .link-btn p{
	text-align:center;
	font-size:33px;
	margin:0;
	font-weight:bold;
}
#mocha4082b .link-btn .img10{
	margin:0 13%;
}


@media screen and ( max-width:767px) {

#mocha4082b{
	margin:0;
	width:100%;
	font-size:1em;
}

#mocha4082b img{
	width:100%;
}

#mocha4082b p {
    margin: 2% 2% 5%;
	font-size: 1em;
}
	
#mocha4082b .cart{
	display:none;
}

#mocha4082b .textbox{
	margin:2.5% 0 0;
}

#mocha4082b .textbox p{
	float:none;
	width:100%;
	padding:2%;
	margin: 0;
	font-size: 1em;
}
#mocha4082b .textbox div{
	float:none;
	width:60%;
	margin:0 auto;
}

#mocha4082b dl dt{
	width:22%;
}
#mocha4082b dl dd{
	width:78%;
}
/********** ���q�l����̐� **********/
#mocha4082b .voice{
	font-size:1em;
}
#mocha4082b .voice .voice-box {
    color: #000;
}
#mocha4082b .voice .voice-box1 .img-voice{
	width:20%;
}
#mocha4082b .voice .voice-box1 .txt-voice {
	width:74%;
}
#mocha4082b .voice .voice-box2 .txt-voice {
	width:74%;
}
#mocha4082b .voice .voice-box2 .img-voice{
	width:20%;
}
#mocha4082b .voice .voice-box1 .txt-voice:after{
	top: 12%;
	left: -26px;
 	margin-top: -10px;
	border: 10px solid transparent;
	border-right: 14px solid #cccccc;
}


#mocha4082b .voice .voice-box2 .txt-voice:after{
	top: 12%;
	right: -26px;
 	margin-top: -10px;
	border: 10px solid transparent;
	border-left: 14px solid #cccccc;
}



/********** �J�t�F�H�[�̂������ **********/
#mocha4082b .commitment .text{
	float:none;
	width:94%;
	padding:3%;
	font-size:1em;
}
#mocha4082b .commitment .img{
	float:none;
	width:100%;
}
#mocha4082b .commitment .img img{
	width:60%;
	margin:0 20% 3%;
}


/********** �X�^�b�t����̃I�X�X���R�����g��**********/
#mocha4082b .osusume-comment{
	font-size:1em;
	margin:8% auto;
	width:96%;
}


#mocha4082b .link-btn p{
	font-size:1em;
}


}