.product__section h2{
  margin-bottom:16px;
}

.col img{box-shadow: 0 0 2px rgba(0,0,0,0.4);/*画像に枠*/
}

.btn-primary{
  background:#009944;
  border-color:#009944;
}

.btn-primary:hover{
  background:#b8d200;
 border-color:#b8d200;
}


/*商品詳細*/
.product__explain{
  margin-top:-30px;/*デフォルトは60px*/
}

.item_list01,
.item_info_1{
 line-height: 1.8em;
 letter-spacing:0.05em;
text-align: justify;
}

.item_list01 span.item_text_big{
  font-size:1.25em;
  display:block;
}

.item_list01 dl {
    border: dotted 1px rgba(127,79,33, 0.4);
    border-width: 2px 0;
    padding: 1em 0;
    display: inline-block;
  	width:98%;
}

.item_list01 dt,
.item_list01 dd{
  margin:0;
  padding-left: 1.3em;
}

.item_list01 dt {
    background: url(https://img21.shop-pro.jp/PA01417/975/etc/akaMaru01.png);
    background-repeat: no-repeat;
    background-size: 1.2em;
    background-position: left;
    margin-top:1em;
}


.item_list01 dt.first{/*最初の行*/
	margin-top:inherit;
}

/*item_info_1*/
.item_info_1{
	margin: 2em auto 1em;
}

.item_info_1 dt,dd,
item_info_1_ttl{
	margin: 0;
	padding: 0;
 line-height: 1.8em;
}

.item_info_1 dt,
.item_info_1_ttl{
	font-size: 1.5em;
	 position: relative;
  	padding: 0.5em;
	font-weight: bolder;

}
.item_info_1 dt:after,
.item_info_1_ttl:after{content: '';
  position: absolute;
  left: 0;
    bottom: 0;
  width: 100%;
    height: 9px;
    background: repeating-linear-gradient(-45deg, skyblue, skyblue 2px, white 2px, white 4px);
  }

.item_info_1 dd{
	margin-top: 1em;
}

.item_info_1 dd.item_info_img{
	margin-top: 1em;
}
.item_info_1 dd.item_info_img img{
	margin:0.4%;
	width: 24%;
	background: #ccc;
	height: auto;
}

.item_info_2 dt{
	 position: relative;
	padding: 1em 1em 0;
	width: inherit;
}

.item_info_2 dt:after{content: '';
  position: absolute;
  left: 0;
   top: 0;
  width: 100%;
    height: 11px;
    background: repeating-linear-gradient(-45deg, rgba(170,212,149, 1.0), rgba(170,212,149, 1.0) 2px, white 2px, white 4px);
  }

.item_info_2 dd{
	 position: relative;
	padding:0 1em 1em;
}

.item_info_2 dd:after{content: '';
  position: absolute;
  left: 0;
    bottom: -.8em;
  width: 100%;
    height: 11px;
    background: repeating-linear-gradient(-45deg, rgba(170,212,149, 1.0), rgba(170,212,149, 1.0) 2px, white 2px, white 4px);
  }

.item_info_3 dt{
	width: inherit;
}
.item_info_3 dt:after{
	top:0;
}
.item_info_3 dt img{
	height: 4em;
}

/*できるまで*/
dd.item_info_inbox{
	display: inline-block;
	margin:0.3%;
	width: 32%;
	margin-top: 2em;
	vertical-align: top;
}


dd.item_info_inbox p{
	letter-spacing: normal;
font-weight: bold;
line-height: 1em;
width:max-content;
	margin-bottom: 0.5em;
	color: rgba(127,79,33, 1.0);
}

dd.item_info_inbox p span{
	color: #fff;
	display: inline-block;
	margin-right: 0.3em;
	margin-bottom: 0.5em;
	padding: 0.2em;
	width: 1em;
	height: 1em;
	border-radius: 0.7em;
	background: rgba(170,212,149, 1.0);
	background: rgba(127,79,33, 1.0);
}

dd p.item_info_inbox_text{
	font-weight: normal!important;
	letter-spacing: 0;
	text-align: center;
	font-size: 0.9em;
	margin-top: 0.8em;
	background: none;
	color:#333;
}
/*//できるまで*/
.txt--lg {
  font-size:20px;
}
.item_sub_zu_img {
  display:inline-block;
  margin:auto;
  width:49.5%;
}
.item_sub_zu_img img{
  width:100%;
}

.item_sub_zu_img1 img{/*コットンのチカラ ロゴ*/
  width:77%;
  margin:auto;
}

.item_sub_zu_img2 img{/*コットン丸3つ*/
  width:90%;
  margin:auto;
}

/*ゆうパケット対応商品*/
.yuuP_setsumei{/*対応商品側設置*/
  margin:1em;
  padding:1em;
  border:3px double red;
}

.yuuP_cart dt,
.yuuP_cart dd {/*通常商品に設置*/
    width: 50%;
    display: inline-block;
    vertical-align: text-top;
  font-weight:normal;
  line-height:1.8em;
}
.yuuP_cart{
  padding:1em 1em 0.8em;
  margin:1em;
  border:solid 3px rgba(121,192,110,0.8);
  border-radius:10px;
}
.yuuP_cart dt strong{
  font-weight:borld;
  font-size:1.2em;
  color:rgba(127,79,33, 1.0);
  background:linear-gradient(transparent 70%, #fff352 40%);
}


/*==================
  アロエ
================*/
/*タイトルリボン風*/
.title_ribbon01{
padding-bottom: 0;
line-height: 1.4em;
font-size: 1em;
margin-top: 1em;
margin-bottom: 0;
position: relative;
padding: 0.2em 0.5em 0.2em;
background:  rgba(170,212,149, 1.0);
color:#333;
width:8em;
	text-align: center;
}
.title_ribbon01::before {
position: absolute;
content: '';
top: 100%;
left: 0;
border: none;
border-bottom: solid 15px transparent;
border-right: solid 20px rgb(149, 158, 155);
}
.title_ribbon01t:after{
content: none;
}
/*--//タイトルリボン風*/

.in_dl01{
}
.in_dl01 dd{
}
.in_dl01 dd img{}
.seibun_table{
font-size: 0.9em;
border-collapse: collapse;
text-align: center;
border: 2px solid rgba(127,79,33, 0.6);
width: 100%;
border-radius: 5px;
}
.seibun_table caption{
	font-size:1.1em;
	color: rgba(127,79,33, 1.0);
	margin-top: 1em;
}
.seibun_table th,.seibun_table td{
	padding: 0.2em 0.3em;
  border: 2px dotted rgba(127,79,33, 0.6);
}

.seibun_table th{
	color: rgba(127,79,33, 1.0);
	background: rgba(127,79,33, 0.2)
}

/*画像キャプション*/
.item_info_img figure{
width: 24.8%;
margin: 0;
padding: 0;
text-align: center;
	display: inline-block;
}
.item_info_img figure img{
width: 98%!important;
}
.item_info_img figure figcaption{
	font-size: 0.8em;
}
/*//画像キャプション*/

.back_yellow{
	border-width: 0!important;
	background: #fff9bc;
	padding: 0 1em 1em!important;
	border-radius: 10px;
}
/*//================*/

/*---アロエ　ポイント--*/
dl.point_list{
	border: solid 1px rgba(170,212,149, 1.0);
	width: 43%;
	display: inline-block;
	border-right-width: 5px;
	border-bottom-width: 5px;
	padding: 2%;
	margin: 1%;
	vertical-align: top;
	border-color: skyblue;
	border-radius: 10px;
}
dl.point_list dt{
position: relative;
border-top: dotted 3px #80c8d1;
/*border-bottom: solid 2px #80c8d1;*/
border-color: orange;
/*background: #f4f4f4;*/
line-height: 1.4;
padding: 0.3em 0.4em;
margin: 2em 0 0.5em;
padding-top:1em;
/*width: max-content;*/
color: #009944;
text-align: center;
}

dl.point_list dt:after{/*タブ*/
position: absolute;
font-family: "Font Awesome 5 Free",'Quicksand','Avenir','Arial',sans-serif;
content: '\f0a4\ POINT';
background: #80c8d1;
background:orange;
color: #fff;
left: 0px;
bottom: 100%;
border-radius: 5px 5px 0 0;
padding: 5px 7px 3px;
font-size:1em;
line-height: 1;
letter-spacing: 0.01em;
 }
dl.point_list dt strong{
	font-size:1.3em;
}
dl.point_list dd{
	vertical-align: top;
	margin: auto;
	text-align: justify;
}
dl.point_list dd.point_list_text1{
width:auto;
margin-bottom: 1em;
}
dl.point_list dd.point_list_img1{
display: inline-block;
vertical-align: top;
}
dl.point_list dd.point_list_img1 img{
	width: auto;
	text-align: center;
}
dl.point_list dd.point_list_img1 p{
	text-align: center;
	font-size: 0.9em;
	line-height: 1.4em;
	margin-top: 0.5em;
}
.margin1em{
	margin-top: 1.5em;}

.kasen_yellow1{
	 background: linear-gradient(transparent 70%, yellow 70%);
	font-weight: bolder;
}
/*---//アロエ　ポイント--*/

/*--------------------
　ノート風　デザイン（アロエ説明に使用）
-----------------*/
.note01{
  color: ;
  margin: 2em 2em;
  font-weight: normal;
  border: solid 1px #e6e6e6;
  padding: 0.3em 1em 2em 1em;
  box-shadow:2px 2px 0 rgba(0,0,0,.1);
}
.sen01_dot{
 background-color: #fff;
 background-image:
  linear-gradient(90deg, rgba(237, 119, 128, 0) 0%, rgba(237, 119, 128, 0) 50%, #fff 0%, #fff 100%), linear-gradient(180deg, rgba(100, 100, 100, 0) 0%, rgba(100, 100, 100, 0) 97.5%, #646464 100%);
 background-size: 8px 100%,100% 2.2em;
 line-height: 2.2em;
 padding: 0.3em 0.5em 0.2em 0.5em;
text-align: justify;
}
/*---//ノート風　デザイン--*/

/*アロエ　ユーザーの声--*/
.UsersVoice {
	margin: 2%;
	text-align: center;
}
.UsersVoice ul,.UsersVoice li{
	list-style: none;
}
.UsersVoice ul.VoiceList_in li{
	list-style:disc;
	list-style-position:inside;
	line-height: 1.8em;
	margin:0.5em 1em;
	text-align: left;
	font-size: 1.1em;
	font-weight: 300;
	padding: 0.2em;
	border-bottom: 3px #ddd dotted;
}
/*--//声-----*/

/*--手作り「関連商品」バナー*/
.kanrenBan{
	display:inline-block;
	margin:auto 2%;
}
.kanrenBan a{
	border:solid #ccc 1px;
	width:360px;
	height: 90px;
	margin:1%;
	padding: 8px;
	display:block;
	border-radius: 3px;
	text-align: left;
}
.kanrenBan a:hover{
	background: yellow;
}
.kanrenBan p{
	display: inline-block;
	margin-left:1em;
	vertical-align: middle;
}
.kanrenBan img{
	display: inline-block;
	height:inherit;
	text-align: right;
}
/*--------------------
  アロエのチカラ　オイル
  商品詳細
  -----------------------*/
#OSJ_item_sub{/*ページ全体枠*/
width:94%;
margin:0 auto;
line-height:1.8em;
margin-top:1em;
font-size: 1.1em;
letter-spacing: 0.05em;
}
 #OSJ_item_sub ul li,
 #OSJ_item_sub dl dt,
 #OSJ_item_sub dl dd{/*リストスタイルなし*/
list-style: none;
	width: auto;
}
#OSJ_item_sub #column_1,
#OSJ_item_sub #column_2,
#OSJ_item_sub #column_3,
#OSJ_item_sub #column_4,
#OSJ_item_sub #column_5,
#OSJ_item_sub #column_6,
#OSJ_item_sub #column_7{
margin: 1rem auto;
  }
 #OSJ_item_sub p{margin-bottom:0.3em;
text-align: justify;
}
 i{
margin-right:0.3em;
font-size:1.3em;
vertical-align:text-top;
}
#OSJ_item_sub .pic_text{/*商品名強調*/
	color: #009944;
	font-weight: bolder;
	}
.sub_ttl{/*小見出し*/
font-size: 1.4rem;
font-weight: bold;
letter-spacing:3px;
margin-top: 2rem;
color: rgba(45,135,98, 1.0);/*文字色*/
color: rgba(0,169,108,1.00);
}
.Ptext{/*文章セクション*/
margin: auto;
margin-bottom: 1em;
}
.Ptext_L{
	font-size: 1.3em;
	color: #000;
	margin-top: 1em;
	line-height:1.6em;
	}
/*-----2カラム---*/
.col2Box{
	vertical-align: middle;
	padding: 1em;
	display: flex;
	margin: auto;
	}
.col2Box img{
	max-width: 100%;
	}
.col2Box .col2Box_in{
	display:inline-block;
	vertical-align:middle;
	margin: 2%;
	}
p.col2Box_in img.in_img2{
		max-width: 300px;
	}
.tokucho_ul li{/*特長*/
	margin: 0.5em;
	}
/*---//--2カラム---*/
hr {/*ライン*/
   border-width: 1px 0px 0px 0px; /* 太さ */
   border-style: solid; /* 線種 */
   border-color:rgba(122,106,86, 0.5);   /* 線色 */
   height: 2px;         /* 高さ(※古いIE用) */
   margin:auto;
   margin-top: 0.5em;
	width: 100%;
}
/*=============
  見出しデザイン
=============*/
/*見出しデザイン03-
--吹き出し---*/
.sub_ttl03{
  position: relative;
  padding: 0.4em 0.6em;
  background:rgba(0,162,154,1.0);
	color: #fff;
  width:fit-content;
border-radius: 5.5em;
	margin: 0;
}
.sub_ttl03:after {
  position: absolute;
  content: '';
  top: 100%;
  left: 20px;
  border: 10px solid transparent;
  border-top: 15px solid rgba(0,162,154,1.0);
  width: 0;
  height: 0;
}
/*色変え*/
.sub_ttl03b{
  background:rgba(104,193,240,1.00);
}
.sub_ttl03:after {
 /* border-top-color:rgba(104,193,240,1.00);*/
}
/*=============
  下線ラインデザイン
=============*/
.line_kiiro{/*下線黄色*/
border-bottom: 8px solid #ffe544;
}
.line_shima {/*下線ストライプ*/
  position: relative;
	height: 2.5em;
}
.line_shima:after {/*下線ストライプ*/
  content: "";
  position: absolute;
  left: 0;
  top: 1.8em;
  width: 100%;
  height: 18px;
  background: -webkit-repeating-linear-gradient(-45deg, rgba(0,162,154,0.5), rgba(0,162,154,0.5) 2px, #fff 2px, #fff 4px);
  background: repeating-linear-gradient(-45deg, rgba(0,162,154,0.5), rgba(0,162,154,0.5) 2px, #fff 2px, #fff 4px);
}
.line_shima2:after {/*位置調整*/
  top: 1.5em;
	}
.line_shima3{/*「成分表タイトル」の調整*/
	color: rgba(0,162,154,1);
	}
.line_shima3:after {
  top: 1.5em;
	height: 6px;
	}
/*=============
  その他装飾デザイン
=============*/
.waku_ki{/*黄色、角丸枠*/
background:rgba(255,247,143,0.5);
	padding: 1em;
	border-radius: 16px;
	text-align: center;
}
.waku_ki p{/*枠内文字合わせ*/
	text-align: center !important;
	}
.waku_ki p.sub_ttl{/*枠内タイトル調整*/
	text-align: center !important;
	letter-spacing: normal;
	margin: 0;
	padding: 0;
	}
/*==========
  表示切り替え部分
==========*/
/*全体*/
.hidden_box {
    margin: 1em 0;/*前後の余白*/
    padding: 0;
	width: 100%;
}
/*ボタン装飾*/
.hidden_box label {
    padding: 12px;
    font-weight: bold;
    border: solid 2px rgba(0,162,154,1.00);
	border-radius: 0 8px 0 8px;
	border-top:solid 1px #ccc;
	border-right:solid 1px #ccc;
	font-family: "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "serif";
	font-size: 1.25em;
	color: #000;
    cursor :pointer;
	margin: 0;
  background:#ffffe0;
}
/*ボタン装飾 数字-下線黄色*/
.hidden_box span.line_kiiro{
border-bottom: 8px solid #ffe544;
	width: 1.5em;
	display: inline-block;
	text-align: center;
	margin: 0 0.5em;
	line-height: 0.5em;
}
.hidden_box i{
		color: #888;
	margin-left:1em;
	display: inline-block;
	text-align: right;
	}

/*ボタンホバー時*/
.hidden_box label:hover {
    background: #efefef;
}
/*チェックは見えなくする*/
.hidden_box input {
    display: none;
}
/*中身を非表示にしておく*/
.hidden_box .hidden_show {
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transition: 0.8s;
	/*装飾*/
	border:1px solid rgba(0,162,154,0.6);
	border-top: none;
	border-radius:0 0 5px 5px ;
	margin:0 3%;
}
/*クリックで中身表示*/
.hidden_box input:checked ~ .hidden_show {
    padding: 10px 0;
    height: auto;
    opacity: 1;
}
/*中身ボックス*/
/*ul li にdlを入れています。*/
.hidden_show_wrap{
	display:flex;
	padding: 0;
	margin: 0;
	}

.hidden_show_wrap li{
flex-basis: 250px; /* flexアイテムの幅を数値で指定 */
vertical-align: top;
margin: 1% ;
padding: 1%;
background: #fff;
	}

.hidden_show_wrap dl,
.hidden_show_wrap dd,
.hidden_show_wrap dt{
		margin:0 auto;
		padding: 0;
	}
.hidden_show_wrap dl dt{
font-weight: bolder;
color: #00a96c;
font-size: 1.1em;
	}
.hidden_show_wrap dl dd{
		text-align: justify;
		font-size: 0.9em;
	}
.hidden_show_wrap dl dd img{
		width: 100%;
	text-align: center;
		margin: 0.5em auto;
	}
	
/*=============
	補足説明のdl
===============*/
dl.sub_dl{
		font-size: 1em;
	margin-top: 2em;
	}
dl.sub_dl dt{
		margin-bottom: 0.3em;
		margin-top: 0.6em;
	}
dl.sub_dl dt span{
		color: mediumvioletred;
	margin-right: 0.2em;
	}
/*=============
  アイテム詳細ページリンクボタン
=============*/
p.link_item01{
		text-align: center;
	}
p.link_item01 a{
		display: inline-block;
		background: url(https://file003.shop-pro.jp/PA01417/975/season2007_img/OSJ2007Sun_back01.jpg);
		text-align: center;
		padding: 0.8em 1em;
		border-radius: 10px;
		color: #fff;
		margin-top: 0.4em;
		display: inline-block;
	}
#OSJ_item_sub p.link_item01 a:hover{
		opacity: 0.8;
	}
	
@media screen and (max-width:768px){
  /*768px以下で適用する内容*/
  /*---アロエ　ポイント--*/
	dl.point_list{
		width: 92%;
		text-align: center;
		margin: auto;
	}
	dl.point_list dt,
	dl.point_list dd.point_list_text1,
	dl.point_list dd.point_list_img1{
		width:auto;
	}
	dl.point_list dd.point_list_img1{
		text-align: center;
      margin:auto;
      display:block;
	}
	dl.point_list dd.point_list_img1 img{
		margin-top: 1em;
	}
 /*---//アロエ　ポイント--*/
  /*コットン*/
  dd.item_info_inbox{/*できるまで*/
    width:42%;
    margin:15px 4%;
  }
 .item_info_1 dd.item_info_img {
   margin:1em auto;
   text-align:center;
  }
.item_info_1 dd.item_info_img img {
 width:40%;
  margin:2%;
}
.sub_ttl{
		font-size: 1;
	}
  /*アロエオイル*/
p.col2Box_in img{/*写真部分/写真*/
	width: auto;}
.tokucho_ul li{/*特長*/
	margin: 0.2em;
line-height: 1.8em;	}
}

@media screen and (max-width:480px){
  /*480px以下適用する内容*/
  /*コットン*/
  .item_sub_zu_img{
    width:90%;
   margin:10px 4%;
   text-align:center;
  }
 .item_info_3 dt img{/*温まりますタイトル画像*/
   width:100%;
   height:auto;
   margin-top:1em;
  }
  dd.item_info_inbox{/*できるまで*/
    width:90%;
    margin:10px 5%;
    text-align:center;
  }
  .item_info_1 dd.item_info_img img {
 width:48%;
margin:0.4%;
}
  /*アロエオイル*/
  .col2Box{
	display: block;
	width: 96%;
	}
.col2Box .col2Box_in{
	width: 100%;
	text-align:center;
	margin: auto;
	}
.col2Box .col2Box_in img{
	text-align: center;
	max-width: 80%;
	margin: auto 10%;
	margin-bottom: 1em;
	}
  }

}