@charset "utf-8";
/* CSS Document */


@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP&display=swap');



figure{
	padding: 0;
	margin: 0;
}

.head_title {
	border-top: 1px solid #8bc901;
	border-bottom: 1px solid #8bc901;
	background: #f1fae0;
	color: #336633;
	font-size: 1.2em;
	text-align: center;
	padding: 15px 0;
	margin-bottom: 15px;
}
.head_title .sub_title{
	font-weight: normal;
	font-size: 0.9em;
	margin-left: 5px;
}
.normal_heading {
	color: #336633;
	font-size: 1.15em;
	padding-bottom: 10px;
	margin-bottom: 10px;
	border-bottom: 2px solid #cfe4a2;
  display: inline-block;
  position: relative;
	width: 100%;
}
.normal_heading:after{
  content: "";
  border-bottom: solid 2px #86bc18;
  position: absolute;
  top: 0;
  left: 0;
  width: calc(100%);
  height: calc(100% - 2px);
}



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

.head_title .sub_title{
	display: block;
	padding-top: 5px;
}

}


/*--------------------------------------------------
	品質と安全
---------------------------------------------------*/
@media only screen and (min-width: 768px){
#safeSp .centering{
	text-align: center;
}
}
#safeSp h3{
	color: #4c7f25;
	font-size: 130%;
	font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',Arial,sans-serif;
	margin-bottom: 10px;
}

.safe_box section,
ul.point3{
	display: flex;
	flex-direction: row;
	margin-bottom: 30px;
}
.safe_box section p{
	padding-right: 20px;
	font-size: 1.1em;
	line-height: 1.7;
	width: 650px;
}


.safe_box section.underLine{
	border-bottom: 1px dotted #999;
	padding-bottom: 10px;
	margin-bottom: 10px;
}

ul.point3 li{
	text-align: center;
	width: 30%;
	padding: 25px;
	margin-left: 20px;
}
ul.point3 li:nth-child(1){
	margin-left: 0px;
}
ul.point3 li h4{
	font-size: 130%;
	font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',Arial,sans-serif;
	margin-bottom: 10px;
}
ul.point3 li.pointOne{
	background: #ddeffa;
}
ul.point3 li.pointOne h4{
	color: #307ebc;
}
ul.point3 li.pointTwo{
	background: #e9f4ea;
}
ul.point3 li.pointTwo h4{
	color: #1e6a2b;
}
ul.point3 li.pointThree{
	background: #f8e9f9;
}
ul.point3 li.pointThree h4{
	color: #b669a2;
}
ul.point3 li p{
	margin-top: 10px;
	text-align: left;
	font-size: 95%;
}


.safeTest table{
	width: 320px;
	font-size: 95%;
}
.safeTest table caption{
	color: #4c7f25;
	font-size: 130%;
	font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',Arial,sans-serif;
	margin-bottom: 10px;
	text-align: left;
}
.safeTest table th{
	color: #4c7f25;
	font-size: 110%;
	font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',Arial,sans-serif;
	border-bottom: 5px solid #fff;
	padding: 3px;
	text-align: center;
	background: #cfe4a1;
	font-weight: normal;
}
.safeTest table td{
	padding-left: 5px;
}


.safeTest div{
	width: 420px;
	padding: 0 15px;
}
.safeTest div img{
	margin-bottom: 10px;
}
.safeTest div p{
	line-height: 1.3;
}


.collabo_box {
	margin-bottom: 30px;
}
.collabo_box section .text{
	line-height: 1.7;
	margin-bottom: 20px;
}
.collabo_box section .collabo_box__illust{
	border: 1px solid #ccc;
	text-align: center;
}

.paraHalf{
	margin-bottom: 30px;
}
.paraMini{
	margin-bottom: 10px;
}



@media screen and (max-width: 768px) {/*** スマホ用 ***/
#safeSp{
	margin: 0 4%;
	width: 92%;
}

.safe_box section,
ul.point3{
	display: block;
}
ul.point3 li{
	width: 92%;
	padding: 10%;
	margin: 0px 0px 10px 0px;
}

.safeTest div{
	padding: 0;
}

.collabo_box{
	padding-right: 5%;
}

}






/*--------------------------------------------------
	『悠香の石鹸』品質管理のこだわり
---------------------------------------------------*/
.soapFlow,
.checkingWashing,
.safeLink,
.soapLink{
	margin-bottom: 40px;
}

#soapProcess{
	
}

.prologue_text{
	margin-bottom: 30px;
	padding: 20px;
	border: 1px solid #ccc;
}
.prologue_text p{
	font-family: 'Noto Serif JP', serif;
	font-size: 1.2em;
	line-height: 1.6;
}

.soapFlow{
	background-image: linear-gradient(
	-45deg,
	#fff 25%,
	#eee 25%,
	#eee 50%,
	#fff 50%,
	#fff 75%,
	#eee 75%,
	#eee
);
	background-size: 5px 5px;
	background-attachment: fixed;
	padding: 10px;
}
.soapFlow section{
	background: #fff;
	padding: 10px;
	margin-bottom: 30px;
	position: relative;
}
.soapFlow section::after {
  content: "";
  position: absolute;
  top: 103%;
  left: 50%;
  margin-left: -15px;
  border: 15px solid transparent;
	border-top: 15px solid #577fd8;
	border-right: 30px solid transparent;
	border-bottom: 15px solid transparent;
	border-left: 30px solid transparent;
}
.soapFlow section:last-child{
	margin-bottom: 0px;
}
.soapFlow section:last-child::after{
  content: none;
}

#soapProcess h3{
	color: #666;
	font-size: 1.5em;
	font-family: 'Noto Serif JP', serif;
	margin-bottom: 10px;
}
.soapFlow section{
	display: flex;
	flex-direction: row;
}
.soapFlow section .textArea{
	padding: 10px;
}



.checkingWashing{
	background: #cfe4a1;
	padding: 10px;
	margin-bottom: 40px;
}
.checkingWashing section{
	background: #fff;
	padding: 10px;
}
#soapProcess .checkingWashing h3{
	color: #4c7f25;
	text-align: center;
	line-height: 1.4;
	margin-bottom: 8px;
	padding: 5px 0;
}
.checkingWashing p{
	margin-bottom: 15px;
}
.checkingWashing figure{
	text-align: center;
}






.soapLink{
	background-image:  url("../images/safe/bg_soap_link.jpg");
	width: 900px;
	padding: 22px 0;
}
.soapLink h4,
.soapLink p{
	margin-bottom: 10px;
}
.soapLink p,
.soapLink ul{
	margin-left: 20px;
}




/*--------------------------------------------------
	お互いのリンク
---------------------------------------------------*/
.safeLink ul li a{
  position:relative;
  border: 1px solid #ccc;
  padding: 5% 0 5% 33%;
	display: block;
	background: #fff url("../../images/safe/photo_link_quality.jpg") no-repeat 1% center;
	font-size: 1.8em;
	line-height: 1.3;
	color: #6d6a6a;
	text-decoration: none;
	font-family: 'Noto Serif JP', serif;
	font-weight: bold;
}
.safeLink ul li a:after{
  content: "";
  position: absolute;
  top: 50%;
  margin-top: -15px;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-left: 15px solid #577fd8;
  right: 10%;
}
.safeLink ul li a:hover{
	opacity: 0.7;
}
.safeLink ul li a:hover:after{
  border-left: 15px solid #3399ff;
	right: 9.5%;
}
.safeLink ul.soapQuality li a{
	background: #fff url("../../images/safe/photo_link_soap.jpg") no-repeat 2% center;
	font-size: 1.7em;
}
.safeLink ul.soapQuality li a:after{
  right: 8%;
}
.safeLink ul.soapQuality li a:hover:after{
  right: 7.5%;
}







@media screen and (max-width: 768px) {/*** スマホ用 ***/
#soapProcess{
	margin: 0 4%;
	width: 92%;
}
.soapFlow section{
	display: block;
}

.safeLink ul li a,
.safeLink ul.soapQuality li a{
  padding: 7% 25% 7% 7%;
	background-image: none;
	font-size: 1.6em;
}



}