@charset "UTF-8";

/* --------------------------------
 * display
 * -------------------------------- */
 .spOnly{
	 display:none !important;
 }
 .pcOnly{
	 display:block !important;
 }
	@media screen and (max-width: 639px){
	 .spOnly{
		 display:block !important;
	 }
	 .pcOnly{
		 display:none !important;
	 }
}
/* 改行 */
 br.spOnly{
	 display:none !important;
 }
 br.pcOnly{
	 display:block !important;
 }
	@media screen and (max-width: 639px){
	 br.spOnly{
		 display:block !important;
	 }
	 br.pcOnly{
		 display:none !important;
	 }
}
/* 印刷 */
@media print{
 .spOnly{
	 display:none !important;
 }
}
/* --------------------------------
 * osusume_coop
 * -------------------------------- */

/* リセット */
.magazine .img__caption{
	margin: 0;
}
.mod__imgblockLeft{
	margin-bottom: 0;
}
.mod__imgblockText.mb00{
        margin-bottom:0;
}

/* 基本スタイル */
.fwB{
	font-weight: bold;
}
.mt00{
        margin-top: 0 !important;
}
.mt10{
        margin-top: 10px !important;
}
.mt20{
        margin-top: 20px !important;
}
.mt30{
        margin-top: 30px !important;
}
.mt40{
        margin-top: 40px !important;
}
.ml00{
        margin-left: 0 !important;
}
.ml10{
        margin-left: 10px !important;
}
.mb00{
        margin-bottom: 0 !important;
}
.mb05{
        margin-bottom: 5px !important;
}
.mb10{
        margin-bottom: 10px !important;
}
.mb15{
        margin-bottom: 15px !important;
}
.mb20{
        margin-bottom: 20px !important;
}
.mb30{
        margin-bottom: 30px !important;
}
.mb40{
        margin-bottom: 40px !important;
}
.mb50{
        margin-bottom: 50px !important;
}
.mt05{
        margin-top: 5px !important;
}
.mr10{
        margin-right: 10px !important;
}
.pb00{
	padding-bottom: 0 !important;
}
	@media screen and (max-width: 639px) {
		.spmb10{
			margin-bottom: 10px;
		}
	}
.em08{
	font-size: 0.8em;
}
.em12{
	font-size: 1.2em;
}
.taC{
	text-align: center;
}
.taL{
	text-align: left;
}
.taR{
	text-align: right;
}
.fwB{
	font-weight: bold;
}
.org{
	color: #FF8000;
}
	@media screen and (max-width: 639px) {
		br{
			display: block;
		}
	}
/* 商品名 */
h1.h1_product{
    clear: both;
    margin: 0 30px;
    overflow: hidden;
}
	h1.h1_product img{
		width: 100%;
	}
	@media screen and (max-width: 639px) {
		h1.h1_product{
		    margin: auto 0;
		}
	}
/* メインイメージ */
.commonPage__img__default.imgMain{
	margin-bottom: 0 !important;
	padding-bottom: 20px;
	position: relative;
}
	/* @media screen and (max-width: 639px) {
		.commonPage__img__default.imgMain{
			padding-bottom: 0;
		}
	}*/
.commonPage__img__default.imgSub{
	margin-top: 0 !important;
	margin-bottom: 15px !important;
}
	@media screen and (max-width: 639px) {
		.commonPage__img__default.imgSub{
			margin-bottom: 15px !important;
		}
	}

/* リード */
.mod__imgblockText.lead{
	text-align: center;
	font-size: 1.4em;
	font-weight: bold;
	margin-bottom: 10px;
	line-height: 1.6;
}
	@media screen and (max-width: 639px) {
		.mod__imgblockText.lead{
			text-align: left;
		}
	}
/* 見出しの余白調整 */
.jcp.commonPage__h2Outer{
	margin-top: 0;
	padding-top: 0;
	padding: 0 30px 20px; /* 左右余白を確保 */
}
.commonPage__h2{
	text-indent: 0;
	padding-left: 0.2em;
}
	@media screen and (max-width: 639px) {
		.jcp.commonPage__h2Outer{
			padding: 0 !important;
			margin: 0 3.355% 10px;
		}
			.magazine .commonPage__h2{
				margin-top: 0 !important;
			}
	}

/* 文字サイズ調整 */
.mod__imgblockText.em12,
.mod__imgblockText span.em12{
	font-size: 1.2em !important;
}
.mod__imgblockText.em14,
.mod__imgblockText span.em14{
	font-size: 1.4em !important;
}
.commonPage__P.jcpClass span.em08{
	font-size: 0.8em !important;
}
	@media screen and (max-width: 639px) {
		.mod__imgblockText.em12,
		.mod__imgblockText span.em12,
		.mod__imgblockText.em10,
		.mod__imgblockText span.em10{
			font-size: 1.0em !important;
		}
	}

/* テキストの余白調整  */
.commonPage__P.jcpClass,
.mod__imgblockText{
	margin-bottom: 0 !important;
}
.commonPage__P.jcpClass.mt10,
.mod__imgblockText.mt10{
	margin-top: 10px;
}
.commonPage__P.jcpClass.mb10,
.mod__imgblockText.mb10{
	margin-bottom: 10px !important;
}
.commonPage__P.jcpClass.mb20,
.mod__imgblockText.mb20{
	margin-bottom: 20px !important;
}
.commonPage__P.jcpClass.mb30,
.mod__imgblockText.mb30{
	margin-bottom: 30px !important;
}
.commonPage__P.jcpClass.mb40,
.mod__imgblockText.mb40{
	margin-bottom: 40px !important;
}
.mod__imgblockText.last{
	margin-bottom: 0;
}
	@media screen and (max-width: 639px) {
		.commonPage__P.jcpClass {
			margin: 0 3.355% auto;
		}
		.commonPage__P.jcpClass.mb10 {
			margin: 0 3.355% 10px;
		}
	    	.mod__imgblockText{
	        	margin-top: 0;
	    	}
		    	.mod__imgblockText.last{
        			margin-bottom: 10px;
			   	}
	}

/* キャプション */
.magazine .img__caption .inner_caption{
	text-align: left !important;
}
.magazine .img__caption .inner_caption.taC{
	text-align: center !important;
}
	/* メイン画像下キャプション */
	.commonPage__img__default.imgMain .inner_caption{
		font-size: 1.2em;
	}
	@media screen and (max-width: 639px) {
		.commonPage__img__default.imgMain .inner_caption{
			padding-bottom: 10px !important;
			text-align: left;
		}
		.magazine .img__caption{
        		margin: 0;
		}
		.magazine .img__caption .inner_caption.w50, .magazine .right_caption .inner_caption.w50, .magazine .commonPage__POuter .inner_caption.w50{
    			width: 50%;
			margin: auto;
		}
		/* メイン画像下キャプション */
		.commonPage__img__default.imgMain .inner_caption{
			left: 0;
		}
		/* 画像サイズ調整下のキャプション位置 */
		.magazine .img__caption .inner_caption.taC{
			text-align: center !important;
		}
	}

/* 画像（BOX）の余白調整 */
.mod__modulewrap_m30_40{
	margin: 0 30px 30px;　/* 左右余白を確保 */
}
	.mod__modulewrap_m30_40 mb40{
		margin-bottom: 40px;
	}
	@media screen and (max-width: 639px) {
		.mod__modulewrap_m30_40{
			margin: auto 3.355% 30px !important;
		}
		.mod__modulewrap_m30_40.mb00{
			margin-bottom: 0 !important;
		}
		.mod__modulewrap_m30_40.mb10{
			margin-bottom: 10px !important;
		}
	}

/* 画像サイズの調整 */
.mod__imgblockRight--60{
	width: 57%;
}
	@media screen and (max-width: 639px) {
		.commonPage__img__default img{
	        	width: 100%;
	        	max-width: 100%;
		}
		/* 全幅以外で表示 */
	    	.mod__imgblockImg img.w20{
		   	width: 20%;
       			margin: auto;
    		}
    		.mod__imgblockImg img.w30{
		   	width: 30%;
	       		margin: auto;
	    	}
	    	.mod__imgblockImg img.w40{
		   	width: 40%;
	       		margin: auto;
	    	}
	    	.mod__imgblockImg img.w50{
			width: 50%;
			margin: auto;
	    	}
	    	.mod__imgblockImg img.product{
			width: 60%;
			margin: auto;
	    	}
	    	.mod__imgblockImg img.w70{
			width: 70% !important;
			margin: auto;
	    	}
	    	.mod__imgblockImg img.w80{
		   	width: 80%;
	       		margin: auto;
    		}
	    	.mod__imgblockImg img.w90{
		   	width: 90%;
	       		margin: auto;
    		}
	}

/* スマホだけ下余白あり */
.mod__imgblockRight.mb10,
.mod__imgblockRight.mb20,
.mod__imgblockLeft.mb10,
.mod__imgblockLeft.mb20{
	margin-bottom: 0; 
}
	@media screen and (max-width: 639px) {
		.mod__imgblockRight.mb10,
		.mod__imgblockLeft.mb10{
			margin-bottom: 10px; /* スマホだけ下10pxあける */
		}
		.mod__imgblockRight.mb20,
		.mod__imgblockLeft.mb20{
			margin-bottom: 20px; /* スマホだけ下20pxあける */
		}
	}

/* 画像配置 */
/* 全幅表示画像 */
.commonPage__img__default img{
	margin-bottom: 0;
}

/* 画像2枚並べ */
.mod__imgblockRight--50,
.mod__imgblockLeft--50{
	width: 48%;
}
	@media screen and (max-width: 639px) {
		.mod__imgblockRight,
		.mod__imgblockLeft{
		width: 100%;
		}
		.mod__imgblockRight{
			max-width: 100%;
		}
	}

	/* 画像2枚並べ 微調整 */
	.mod__imgblockLeft.mod__imgblockLeft--50.w38{
		width: 38% !important;
	}
	.mod__imgblockRight.mod__imgblockRight--50.w60{
		width: 60% !important;
		max-width: 60% !important;
	}
		@media screen and (max-width: 639px) {
			.mod__imgblockLeft.mod__imgblockLeft--50.w38{
				width: 100% !important;
			}
			.mod__imgblockRight.mod__imgblockRight--50.w60{
				max-width: 100% !important;
				width: 100% !important;
			}
		}


/* ※注記 */
ul.chuuki{
	-webkit-padding-start: 0px !important;
	margin: auto 30px 30px;
}
	ul.chuuki li:before {
		display: inline;
		content: "※";
	}
	/* ※ナンバー付き注記 */
	ul.chuuki li.komeNo {
		text-indent: -2.0em;
		padding-left: 2.0em;
		margin-bottom: 10px;
	}
ul.chuuki li,ul.chuuki li.star {
	list-style-type: none;
	text-indent: -1em;
	padding-left: 1em;
	list-style-type: none !important;
	font-size: 1.4em;
	line-height: 1.2;
}
	ul.chuuki li.star:before {
		display: inline;
		content: "★";
	}
span.kome{
	font-size: 0.8em;
}
	@media screen and (max-width: 639px) {
		ul.chuuki{
			margin: 0 3.355% 20px !important;
		}
	}

/* ページ内リンク */
.mod__anchorlist {
	list-style: none;
	background: #fff;
	padding-left: 0 !important;
}
	.mod__anchorlist > li {
	    margin: 0 1%;
	    font-size: 14px;
	    font-size: 1.4em;
	    text-align: left;
	}
	.mod__anchorlist > li > a {
		display: block;
		/* padding-left: 2%; */
		padding-bottom: 2px;
		text-decoration: underline;
		/* background: url(/img/ar_green_down.png) no-repeat left; */
	}

/* インデント */
.txt_idt{
	text-indent: -1.2em;
	padding-left: 1.2em;
}


/* コラム基本スタイル */
.commonPage__POuter.clm{
	border-radius: 20px;
        margin: 0 30px 40px;
        padding: 20px;
	background-color:#C64F31;
 }
	/* コラムタイトル */
	.commonPage__img__default.img_ttl img.w90{
		width: 90%; 
	}
	/* 画像フロート */
	.clm .mod__modulewrap_m30_40{
		margin: 0 !important;
	}
		.clm .mod__modulewrap_m30_40.mb20{
			margin-bottom: 20px !important;
		}
	/* 全幅画像 */
	.clm .commonPage__img__default {
		clear:both;
		margin: 0;
		overflow:hidden;
	}
	.commonPage__POuter.clm p{
		font-size: 1.5em;
		margin: 0;
	}
	.commonPage__POuter.clm p span{
		font-size: 1.1em;
	}
	/* コラム内コラム */
	.inClm {
		padding: 15px;
		background-color: #FFF;
	}
	@media screen and (max-width: 639px) {
		.commonPage__POuter.clm{
			margin: 0 3.355% 30px !important;
	        	padding: 15px;
		}
		.inClm {
			padding: 15px;
		}
	}

/* マーカー */
span.marker{
	background: linear-gradient(transparent 60%, #f9dc84 60%);
}

.clm.topics{
	background-color: #FFF;
	border: 2px solid #C64F31;
}
.commonPage__img__default.w60{
	width: 60%;
	margin: auto;
}


@media screen and (max-width: 639px) {
	.clm.topics{
		margin: 0 3.355% 30px !important;
		padding: 15px;
		width: auto;
	}
	.clm.topics ol{
		font-size: 1.4em;
	}
	.commonPage__img__default.img_ttl.w70{
		width: 100%;
		margin-left: auto;
	}
}
@media screen and (max-width: 639px) {
	.mod__imgblockRight--30.w60{
		width: 60%;
		margin: auto;
	}
	.img_ttl.w70,
	.img_ttl.w60{
		width: 100%;
	}
	.commonPage__img__default.w60{
		width: 80%;
		margin: auto;
	}
}

.commonPage__img__default img.w80{
	width: 80%;
	margin: auto;
}
.commonPage__img__default img.w70{
	width: 70%;
	margin: auto;
}
.commonPage__img__default img.w40{
	width: 40%;
	margin: auto;
}
/* ul.chuuki{
	margin-left: 5em;
}*/
ul.chuuki li{
	text-indent: -1.5em;
	pading-left: 1.5em;
}
ul.chuuki li:before {
    content: " ";
}
	.commonPage__img__default img.w40{
		width: 70%;
	}

/* ----------------------
コラム
----------------------- */
.commonPage__POuter.clm{
	background-color: #FFF;
	border: 2px solid #f5b5b5;
}
.clm.topics.quality{
	width: 70%;
	margin-left: 12%;
}

.clm.topics ol{
	font-weight: bold;
}
.commonPage__img__default.img_ttl.w70{
	width: 70%;
	margin-left: 15%;
}
/* ----------------------
クォリティ
----------------------- */
h2.h2_quality {
	position: relative;
	padding: 0 65px;
	text-align: center;
	font-size: 2.0em;
	color:#C64F31;
	margin-top: 5px;
}

h2.h2_quality:before {
	position: absolute;
	top: calc(50% - 1px);
	left: 0;
	width: 100%;
	height: 2px;
	content: '';
	background: #C64F31;
}

h2.h2_quality span {
  position: relative;
  padding: 0 1em;
  background: #fff;
}
.commonPage__POuter.clm.quality{
	background-color: #FFF;
	border: 2px solid #C49A6A !important;
	padding: 20px 30px 30px;
}
.commonPage__POuter.clm.quality>h2{
	font-size: 2.2em;
	color: #C49A6A !important;
	text-align: center;
	margin: 0 auto 20px;
	border: none !important;
	text-decoration: none;
}
.mod__imgblockImg.w80{
	width: 80%;
	margin: auto;
}
	@media screen and (max-width: 639px) {
		.ml15{
		        margin-left: 0 !important;
		}
		h2.h2_quality {
			padding: 0 40px;
		}
		.h2_process {
			font-size: 1.6em;
		}
		h3.h3_process {
			font-size: 1.4em;
		}
		splitContent__main h3,
		splitContent__main h3.h3_process{
			background-image: none !important;
			padding-left: 0;
		}

		.clm.topics{
			margin: 0 3.355% 30px !important;
			padding: 15px;
			width: auto;
		}
		.clm.topics ol{
			font-size: 1.4em;
		}
		.commonPage__img__default.img_ttl.w70{
			width: 100%;
			margin-left: auto;
		}

		splitContent__main h3,
		splitContent__main h3.h3_process{
			background-image: none !important;
			padding-left: 0;
		}
		.commonPage__img__default img.w70{
			width: 100%;
		}
		.mod__imgblockLeft--70{
			float: left;
			width: 60%;
			margin: auto;
		}
		.mod__imgblockRight--30{
			float: right;
			width: 40%;
			margin: auto;
		}
		.mod__imgblockImg img.w50{
			width: 50%;
		}
		.commonPage__img__default img.w40{
			width: 70%;
		}
		.mod__imgblockLeft--20 img{
			width: 40%;
			margin: auto;
		}
		.commonPage__img__default img.w40{
			width: 70%;
		}
		.mod__imgblockLeft--20 img{
			width: 40%;
			margin: auto;
		}
		h2.h2_quality {
			font-size: 1.5em;
		}

	}

/* 吹き出し */
.balloon1 {
	position: relative;
	display: inline-block;
	margin: 1.5em 0;
	padding: 7px 10px;
	min-width: 120px;
	max-width: 100%;
	color: #333;
	font-size: 16px;
	background: #f4fcff;
	border-radius: 15px;
}
.balloon1:before {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -15px;
	border: 15px solid transparent;
	border-top: 15px solid #f4fcff;
}
.balloon1 p {
	margin: 0;
	padding: 0;
	font-size: 0.8em;
}

.imgMain img.w50{
	width: 50%;
	margin: auto;
}
@media screen and (max-width: 639px) {
	.balloon1 p {
		font-size: 1em;
	}
}

/* ----------------------
できるまで
----------------------- */
/* 矢印 */
.arrow1{
	width: 20px;
	height: 20px;
	border: 5px solid;
	border-color:  transparent transparent #c53d27 #c53d27;
	transform: rotate(-45deg);
	margin: 10px auto 35px;
}

.clm.topics{
	background-color: #FFF;
	border: 1px solid #A988B0;
}


.commonPage__POuter.clm{
	background-color: #FFF;
	border: 2px solid #c53d27 !important;
	padding: 20px 30px 30px;
}

.h2_process {
	font-size: 2.0em;
	border-bottom: 2px solid #c53d27 !important;
	color: #c53d27 !important;
	text-align: center;
	margin: 0 auto 20px;
	line-height: 1.4em;
	padding-bottom: 10px;
}
.h2_process span{
	font-size: 0.8em;
}
.h3_process{
	font-size: 1.8em;
	color: #333;
	margin: 0 auto 5px;
	line-height: 1.1;
	font-size: 2.0em;
}

.h3_process i{
	font-size: 1.6em;
	font-weight: bold;
	font-family: serif;
	display: inline-block; 
	transform: scale(1.2, 1.0); 	
	padding-right: 0.4em;
	color: #c53d27;
}
span#marker{
	background:linear-gradient(transparent 60%, #ff6 80%);
	color: #6C402E;
	font-size: 1.4em;
}
.commonPage__img__default img.w70{
	width: 70%;
	margin-left: 15%;
}

@media screen and (max-width: 639px) {
/* クオリティについて */
	p.mod__imgblockText.qa{
		font-size: 1.5em;
	}
	p.mod__imgblockText.qa span{
		font-size: 2.0em;
	}
	.commonPage__img__default img.w40{
		width: 60%;
	}

	.imgMain img.w50{
		width: 70%;
		margin: auto;
	}
	.magazine .img__caption .inner_caption{
		text-align: center !important;
	}
	/* できるまで */
	.commonPage__POuter.clm{
		padding: 20px;
	}
	.h2_process {
		font-size: 1.9em;
		text-align: center;
		line-height: 1.2;
	}
	h3.h3_process{
		font-size: 1.7em !important;
	}

	.mod__modulewrap_m30_40.process p.mod__imgblockText{
		margin: auto 0;
	}
	.commonPage__img__default img.w70{
		width: 100%;
		margin-left: 0;
	}
}

/* --------------------------------
 * 吹き出し
 * -------------------------------- */
/*吹き出し*/
.balloon1-top {
	position: relative;
	display: inline-block;
	margin: 1.5em 0;
	padding: 15px;
	min-width: 120px;
	max-width: 100%;
	color: #333;
	font-size: 14px;
	background: #D3E9F8;
	border-radius: 15px;
}

.balloon1-top:before {
	content: "";
	position: absolute;
	top: -28px;
	left: 50%;
	margin-left: -15px;
	border: 15px solid transparent;
	border-bottom: 15px solid #D3E9F8;
}

.balloon1-top p {
	margin: 0;
	padding: 0;
}

.commonPage__img__default.imgMain.w60{
	width: 60%;
	margin: auto auto 20px !important;
}
.commonPage__img__default.imgMain.w70{
	width: 70%;
	margin: auto auto 20px !important;
}
.commonPage__img__default img.w60{
		width: 60%;
		margin: auto;
}

.commonPage__img__default.imgMain .inner_caption.mb00{
	padding-bottom: 0 !important;
}

@media screen and (max-width: 639px) {
	.commonPage__img__default.imgMain.w60,
	.commonPage__img__default.imgMain.w70{
		width: 100%;
	}
	/* brを利かせるようにすること!!!!! */
	br{
    		display: block !important;
	}
	/* スマホだけの余白 */
	.spmb10{
		margin-bottom: 10px !important;
	}
	.spmb20{
		margin-bottom: 20px !important;
	}
	.spmb30{
		margin-bottom: 30px !important;
	}
	/* フロート解除 */
	.mod__imgblockImg img{
		float: none;
	}
    	/* 右寄せ画像サイズ調整 */
    	.mod__imgblockImg img.w50{
        	width: 50%;
    	}
	/* 吹き出し */
	.commonPage__img__default.imgMain.w60{
		width: 90%;
		margin: auto auto 30px !important;
	}
	.commonPage__img__default img.w60{
			width: 60%;
			margin: auto;
	}
}