@charset "UTF-8";


/*共通
---------------------------------------------------------*/
.flex_box {
	display: flex;
    justify-content: space-between;
	flex-wrap: wrap;
}
.com_lead .red,
.effect .red {
	line-height: 1.8;
	letter-spacing: .15em;
	font-weight: bold;
}


/*com_lead
---------------------------------------------------------*/
.com_lead .box_img {
	width: 56%;
	max-width: 611px;
	margin: 0 auto;
}
.com_lead .red {
	width: max-content;
	max-width: 100%;
	text-align: left;
	margin: 1em auto 0;
}


/* Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 959px) {

}

/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.com_lead .box_img {
	width: 80%;
}
	
}


/*高野槙エタノール抽出液の効果
---------------------------------------------------------*/
.effect .box01 a {
	color: #064f43;
	text-decoration: underline;
}
.effect .box01 a:hover {
	text-decoration: none;
}
.effect .box01 .report {
	position: relative;
	max-width: 854px;
	margin-left: auto;
	margin-right: auto;
}

.effect .box01 .report .display-none {
	display: none;
}


/*バイオフィルムとは*/
.effect .box02 .flex_box {
	max-width: 550px;
	margin: 1em auto 0;
}
.effect .box02 .flex_box .box_img {
	width: 28%;
	max-width: 150px;
}
.effect .box02 .flex_box p {
	width: 68%;
	align-self: center;
	color: #006857;
	font-weight: bold;
	line-height: 1.8;
	letter-spacing: .15em;
}

/*バイオフィルムを安全に除去*/
.effect .box03 .red {
	margin-top: .5em;
}

/*経皮毒の心配がない*/
.effect .box04 .red {
	margin-top: .5em;
}
.effect .box04 .txt_r {
	width: 57%;
    float: right;
}


/* Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 959px) {

/*バイオフィルムとは*/
.effect .box02 .flex_box {
	width: 90%;
	max-width: none;
}
.effect .box02 .flex_box .box_img {
	width: 21%;
}
.effect .box02 .flex_box p {
	width: 75%;
}
	
}

/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

/*経皮毒の心配がない*/
.effect .box04 .txt_r {
	width: 100%;
    float: none;
}
	
}


/*食の重要性 - 外側からだけでは完全な予防は成立しません
---------------------------------------------------------*/
.importance .box02 .com_bggrd {
	position: relative;
	width: 31%;
	padding: 2.5%;
	box-sizing: border-box;
}
.importance .box02 .com_bggrd::after {
	position: absolute;
	content: "";
}
.importance .box02 .com_bggrd .com_bggrd_index {
	font-size: 162%;
	letter-spacing: .05em;
	line-height: 1.4;
	margin-bottom: .5em;
}

.importance .box02 .ft_min {
	font-size: 112%;
	letter-spacing: .1em;
	line-height: 1.7;
}
.importance .box02 .fw_bold {
	font-size: 125%;
	line-height: 1.7;
	letter-spacing: .03em;
}
.importance .box02 .lgreen {
	color: #2aa148;
}
.importance .box02 .lblue {
	color: #1d98eb;
}

.square_list li {
	position: relative;
	font-size: 112%;
	font-weight: bold;
	letter-spacing: .1em;
	line-height: 1.9;
	padding-left: 1.6em;
}
.square_list li::before {
	position: absolute;
	content: "";
	border: 1px solid #999999;
	width: 0.8em;
	height: 0.8em;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
}

/*bg_gray*/
.importance .box02 .bg_gray::before {
	background: linear-gradient(to bottom, rgba(179,179,179,0.2) 0%, rgba(179,179,179,0) 60%);
}
.importance .box02 .bg_gray::after {
	position: absolute;
	content: "";
	background: url("../images/medical/ethanol/arrow_gr_1.svg") no-repeat center top;
	background-size: 100% auto;
	width: 21%;
	height: 20%;
	right: -15%;
	top: 12%;
}
.importance .box02 .bg_gray .com_bggrd_index {
	color: #333333;
	line-height: 2.8;
}
.importance .box02 .bg_gray .box_img {
	margin-bottom: 1.3em;
}
.importance .box02 .bg_gray .square_list {
	position: relative;
	margin-bottom: 20%;
}
.importance .box02 .bg_gray .square_list::after {
	position: absolute;
	content: "";
	background: url("../images/medical/ethanol/arrow_gr_2.svg") no-repeat center top;
	background-size: 100% auto;
	width: 28%;
	height: 51%;
	left: 50%;
	top: 115%;
	transform: translateX(-50%);
}

/*bg_green*/
.importance .box02 .bg_green {
	text-align: center;
}
.importance .box02 .bg_green::before {
	background: linear-gradient(to bottom, rgba(237,245,211,0.6) 0%, rgba(237,245,211,0) 60%);
}
.importance .box02 .bg_green .com_bggrd_index {
	color: #006857;
}
.importance .box02 .bg_green .box_img {
	margin: 1em auto;
}

/*bg_blue*/
.importance .box02 .bg_blue::before {
	background: linear-gradient(to bottom, rgba(91,168,218,0.2) 0%, rgba(91,168,218,0) 60%);
}
.importance .box02 .bg_blue::after {
	position: absolute;
	content: "";
	background: url("../images/medical/ethanol/arrow_bl_1.svg") no-repeat center top;
	background-size: 100% auto;
	width: 21%;
	height: 20%;
	left: -15%;
	top: 12%;
}
.importance .box02 .bg_blue .com_bggrd_index {
	color: #0068ad;
}
.importance .box02 .bg_blue .flex_box {
	position: relative;
	margin-bottom: 1.4em;
}
.importance .box02 .bg_blue .flex_box::after {
	position: absolute;
	content: "";
	background: url("../images/medical/ethanol/arrow_bl_2.svg") no-repeat center top;
	background-size: 100% auto;
	width: 17%;
	height: 25%;
	left: 25%;
	top: 105%;
}
.importance .box02 .bg_blue .flex_box:nth-of-type(2)::after {
	background-image: url("../images/medical/ethanol/arrow_gr_2.svg");
}
.importance .box02 .bg_blue .flex_box dl {
	width: 67%;
}
.importance .box02 .bg_blue .flex_box dl dt {
	margin-bottom: .2em;
}
.importance .box02 .bg_blue .flex_box dl dd {
	letter-spacing: .05em;
	line-height: 1.5;
}
.importance .box02 .bg_blue .flex_box .box_img {
	width: 29%;
}
.importance .box02 .bg_blue .square_list {
	position: relative;
	border-bottom: 1px solid #808080;
	padding-bottom: 1em;
	margin-bottom: 1em;
}
.importance .box02 .bg_blue .square_list::after {
	position: absolute;
    content: "";
    background-color: #808080;
    left: 50%;
    top: 100%;
    width: 1.4em;
    height: 1px;
    transform: translateX(-50%) rotate(-45deg);
}
.importance .box02 .bg_blue .ft_min {
	font-size: 150%;
}



/* PC調整
------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 1200px) {
	
.importance .box02 .com_bggrd .com_bggrd_index {
	font-size: 2.2vw;
}
.importance .box02 .ft_min {
	font-size: 1.5vw;
}
.importance .box02 .fw_bold {
	font-size: 1.8vw;
}
.square_list li {
	font-size: 1.8vw;
}
	
.importance .box02 .bg_blue .ft_min {
	font-size: 2vw;
}
	
}

/* Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 959px) {

.importance .box02 .com_bggrd {
	width: 32%;
}
	
}

/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.importance .box02 .com_bggrd {
	width: 50%;
}
.importance .box02 .com_bggrd.bg_green {
	width: 100%;
	order: 3;
}
.importance .box02 .com_bggrd .com_bggrd_index {
	font-size: 120%;
}
.importance .box02 .ft_min {
	font-size: 95%;
	text-align: center;
	line-height: 1.5;
}
.importance .box02 .fw_bold {
	font-size: 100%;
}
	
.square_list li {
	font-size: 90%;
	letter-spacing: 0;
	line-height: 1.5;
	font-feature-settings: "halt";
	padding-left: 1.3em;
	margin-bottom: .2em;
}
.square_list li:last-of-type {
	margin-bottom: 0;
}
	
.importance .box02 .bg_gray::after,
.importance .box02 .bg_blue::after {
	background-position: center center;
	left: 50%;
	top: 88%;
}
.importance .box02 .bg_gray::after {
    transform: translateX(-50%) rotate(90deg);
}
.importance .box02 .bg_blue::after {
    transform: translateX(-50%) rotate(-90deg);
}
	
	
/*bg_gray*/
.importance .box02 .bg_gray {
	padding-bottom: 12%;
}
	
/*bg_green*/
.importance .box02 .bg_green {
	padding-top: 8%;
}

/*bg_blue*/
.importance .box02 .bg_blue {
	padding-bottom: 12%;
}
.importance .box02 .bg_blue .flex_box dl dd {
	font-size: 90%;
}
.importance .box02 .bg_blue .ft_min {
	font-size: 100%;
}
	
/*bg_green*/
.importance .box02 .bg_green .box_img {
	width: 50%;
}
	
	
}


/*食の重要性 - アプローチ
---------------------------------------------------------*/
.importance .approach .apr_index {
	position: relative;
	color: #FFF;
	font-size: 187%;
	letter-spacing: .2em;
	text-align: center;
	padding: .3em 0;
}
.importance .approach .apr_index::after {
	position: absolute;
	content: "";
	border-style: solid;
    border-right: 9px solid transparent;
    border-left: 9px solid transparent;
	border-top: 14px solid #00735c;
    border-bottom: 0;
	left: 50%;
	top: 100%;
	transform: translateX(-50%);
}
.importance .approach .index_care {
    color: #FFF;
	font-size: 125%;
	font-weight: bold;
	text-align: center;
}
.importance .approach .in_box {
	padding: 50px;
}
.importance .approach dl.type1 dt {
	font-size: 137%;
	font-weight: bold;
	line-height: 1.4;
	margin-bottom: .5em;
}
.importance .approach .maru_list {
	margin-bottom: .5em;
}
.importance .approach .maru_list li:not(:last-of-type) {
	margin-bottom: .5em;
}
.importance .approach .maru_list .maru_index {
	position: relative;
	color: #333333;
/*	font-size: 112%;*/
	font-weight: bold;
	letter-spacing: .1em;
	line-height: 1.4;
	padding-left: 1.4em;
	margin-bottom: .2em;
}
.importance .approach .maru_list .maru_index::before {
	position: absolute;
	content: "●";
	color: #51847b;
	width: 1em;
	height: 1em;
	left: 0;
	top: 0;
}

/*外側からのアプローチ*/
.importance .approach .box_outside {
    background-color: rgba(0,156,60,0.1);
}
.importance .approach .box_outside .apr_index {
	background-color: #00735c;
}
.importance .approach .box_outside .apr_index::after {
    border-top-color: #00735c;
}
.importance .approach .box_outside p,
.importance .approach .box_outside dl dd {
    line-height: 1.7;
}
/*ホームケア*/
.importance .approach .box_outside .in_box_home .index_care {
    background-color: #064f43;
	margin-bottom: 1.5em;
}
.importance .approach .box_outside .in_box_home .ft_min {
	font-size: 137%;
	color: #064f43;
	line-height: 1.4;
	text-align: center;
	margin-bottom: .5em;
}
.importance .approach .box_outside .in_box_home .col3:first-of-type .ft_min {
	line-height: 2.8;
}
.importance .approach .box_outside .in_box_home dl.type1 dt {
	color: #064f43;
}
.importance .approach .box_outside .in_box_home .box_img {
	position: relative;
	margin-bottom: 1.5em;
}
.importance .approach .box_outside .in_box_home .col3:not(:last-of-type) .box_img::after {
	position: absolute;
	content: "";
	background: url("../images/medical/ethanol/arrow_gre_1.svg") no-repeat center top;
	background-size: 100% auto;
	width: 16%;
	height: 59%;
	left: 106%;
	top: 50%;
	transform: translateY(-50%);
}
.importance .approach .box_outside .in_box_home .arrow {
	text-align: center;
    margin: .5em auto;
}
.importance .approach .box_outside .in_box_home .flex_box .col3 {
    width: 28%;
}
.importance .approach .box_outside .in_box_home .flex_box .orange_b {
    font-size: 112%;
	letter-spacing: .15em;
	margin-bottom: .2em;
}
.importance .approach .box_outside .in_box_home .flex_box .orange_b span {
	position: relative;
	padding: 0 1.5em;
}
.importance .approach .box_outside .in_box_home .flex_box .orange_b span::before,
.importance .approach .box_outside .in_box_home .flex_box .orange_b span::after {
	position: absolute;
    content: "";
    background-color: #f15a24;
    left: 0;
    top: 50%;
    width: 1.4em;
    height: 1px;
    transform: rotate(-122deg);
}
.importance .approach .box_outside .in_box_home .flex_box .orange_b span::after {
	left: unset;
	right: 0;
    transform: rotate(122deg);
}
.importance .approach .box_outside .in_box_home dl.type1 .red {
    font-weight: bold;
	margin-top: .5em;
}
.importance .approach .box_outside .in_box_home .orange_b.txt_al_c {
    margin: 2em 0;
}
/*プロペリとは*/
.importance .approach .box_outside .properi {
    max-width: 900px;
	background: url("../images/medical/ethanol/bg1.svg") repeat 7px 6px #FFF;
	background-size: 17px 17px;
	padding: 30px 0;
	margin: 0 auto;
}
.importance .approach .box_outside .properi > dd {
    padding: 0 45px;
}
.importance .approach .box_outside .properi .index_care {
    background-color: #3bc7d9;
	margin-bottom: 1em;
}
.importance .approach .box_outside .properi .maru_list {
	margin: .8em 0 1.5em;
}
.importance .approach .box_outside .properi .maru_index::before {
	color: #3bc7d9;
}
.importance .approach .box_outside .properi .maru_list dd {
	font-size: 93%;
}
.importance .approach .box_outside .properi .flt_l {
    width: 68%;
}
.importance .approach .box_outside .properi .flt_r {
    width: 29%;
	margin-left: 3%;
}
/*プロケア*/
.importance .approach .box_outside .in_box_pro .index_care {
    background-color: #47b499;
	margin-bottom: 2em;
}
.importance .approach .box_outside .in_box_pro dd > .flex_box  {
    max-width: 900px;
	margin: 0 auto;
}
.importance .approach .box_outside .in_box_pro dd .flex_box .flex_box {
    width: 47%;
}
.importance .approach .box_outside .in_box_pro dd .flex_box .box_img {
    width: 41%;
}
.importance .approach .box_outside .in_box_pro dl.type1 {
    width: 53%;
}
.importance .approach .box_outside .in_box_pro dl.type1 dt {
    color: #47b499;
}
.importance .approach .box_outside .in_box_pro dl.type1 dd {
    font-feature-settings: "halt";
}

/*内側からのアプローチ*/
.importance .approach .box_inside {
    background-color: rgba(0,147,245,0.1);
}
.importance .approach .box_inside .apr_index {
	background-color: #0068ad;
}
.importance .approach .box_inside .apr_index::after {
    border-top-color: #0068ad;
}
.importance .approach .box_inside li {
	padding-left: 1.5em;
}
.importance .approach .box_inside li:not(:last-of-type) {
	width: 47%;
	padding-bottom: 1em;
	border-bottom: 1px solid #0068ad;
	box-sizing: border-box;
	margin-bottom: 1em;
}
.importance .approach .box_inside dl.type1 {
	box-sizing: border-box;
}
.importance .approach .box_inside dl.type1 dt {
	position: relative;
	color: #00517b;
}
.importance .approach .box_inside dl.type1 dt::before {
	position: absolute;
	content: "";
	background-color: #00517b;
	width: 0.7em;;
	height: 0.7em;
	left: -1em;;
	top: .3em;
}
.importance .approach .box_inside dl.type1 dd  {
	color: #00517b;
	line-height: 1.7;
}
.importance .approach .box_inside dl.type1 dd > .flex_box {
	margin-top: .8em;
}
.importance .approach .box_inside dl.type1 dd .flex_box .box_img {
	width: 18%;
	max-width: 80px;
}
.importance .approach .box_inside dl.type1 dd .flex_box .box_txt {
	width: 78%;
	line-height: 1.7;
	align-self: center;
}
.importance .approach .box_inside dl.type1 dd .flex_box .fw_bold {
	font-size: 93%;
	color: #333;
}

.importance .approach .box_inside li:first-of-type dl.type1 dd > .flex_box .flex_box {
	width: 50%;
}
.importance .approach .box_inside li:first-of-type dl.type1 dd > .flex_box .box_img {
	width: 38%;
}
.importance .approach .box_inside li:first-of-type dl.type1 dd > .flex_box .box_txt {
	width: 55%;
}

.importance .approach .box_inside li:nth-of-type(2) .txt_orange {
	font-size: 93%;
	color: #f28200;
	font-weight: bold;
	padding-top: .5em;
	margin-top: .5em;
	border-top: 1px solid #ccc;
}
.importance .approach .box_inside li:nth-of-type(2) .com_btn {
	margin-left: auto;
	margin-right: auto;
}

.importance .approach .box_inside li:last-of-type {
	width: 100%;
}
.importance .approach .box_inside li:last-of-type dl.type1 dd > .flex_box .box_img {
	width: 8%;
}
.importance .approach .box_inside li:last-of-type dl.type1 dd > .flex_box .box_txt {
	width: 90%;
}



/* Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 959px) {

.importance .approach .apr_index {
	font-size: 160%;
}
.importance .approach .apr_index::after {
    border-right-width: 7px;
    border-left-width: 7px;
	border-top-width: 12px;
}
.importance .approach .index_care {
	font-size: 125%;
}
.importance .approach .in_box {
	padding: 5% 3%;
}
.importance .approach dl.type1 dt {
    font-size: 110%;
}
.importance .approach .maru_list .maru_index {
    font-size: 100%;
    letter-spacing: .05em;
    padding-left: 1.2em;
}
.importance .approach  p,
.importance .approach  dl dd {
	font-size: 97%;
	letter-spacing: .03em;
    line-height: 1.5;
	font-feature-settings: "halt";
}
	
/*外側からのアプローチ*/

/*ホームケア*/
.importance .approach .box_outside .in_box_home .ft_min {
	font-size: 120%;
	letter-spacing: .05em;
}

/*プロペリとは*/
.importance .approach .box_outside .properi > dd {
    padding: 0 4%;
}
	
/*プロケア*/
.importance .approach .box_outside .in_box_pro dd .flex_box .flex_box {
    width: 49%;
}

/*内側からのアプローチ*/
.importance .approach .box_inside li:not(:last-of-type) {
	width: 49%;
}
.importance .approach .box_inside dl.type1 dd .flex_box .fw_bold {
	font-size: 93%;
}
	

}

/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.importance .approach .apr_index {
	font-size: 130%;
	letter-spacing: .1em;
}
.importance .approach .apr_index::after {
    border-right-width: 6px;
    border-left-width: 6px;
	border-top-width: 11px;
}
.importance .approach .index_care {
	font-size: 115%;
}
.importance .approach .in_box {
	padding: 7% 3%;
}
.importance .approach dl.type1 dt {
    font-size: 110%;
}
.importance .approach .maru_list .maru_index {
    font-size: 100%;
    letter-spacing: .05em;
    padding-left: 1.2em;
}
.importance .approach  p,
.importance .approach  dl dd {
	font-size: 97%;
	letter-spacing: .03em;
    line-height: 1.5;
}
	
/*外側からのアプローチ*/
.importance .approach .box_outside .in_box_home .txt_al_c {
    text-align: left;
}
/*ホームケア*/
.importance .approach .box_outside .in_box_home .index_care {
    margin-bottom: .8em;
}
.importance .approach .box_outside .in_box_home .ft_min {
	font-size: 120%;
	letter-spacing: .05em;
}
.importance .approach .box_outside .in_box_home .col3:first-of-type .ft_min {
	line-height: 1.4;
}
.importance .approach .box_outside .in_box_home .flex_box .col3 {
	position: relative;
    width: 100%;
	margin-bottom: 20%;
}
.importance .approach .box_outside .in_box_home .col3:not(:last-of-type)::after {
	position: absolute;
	content: "";
	background: url("../images/medical/ethanol/arrow_gre_1_sp.svg") no-repeat center top;
	background-size: 100% auto;
	width: 25%;
	height: 20%;
	left: 50%;
	top: 105%;
	transform: translateX(-50%);
}
.importance .approach .box_outside .in_box_home .flex_box .col3:last-of-type {
	margin-bottom: 0;
}
.importance .approach .box_outside .in_box_home .flex_box .col3 .box_img {
    width: 60%;
	margin: 0 auto 1em;
}
.importance .approach .box_outside .in_box_home .col3:not(:last-of-type) .box_img::after {
	display: none;
}

/*プロペリとは*/
.importance .approach .box_outside .properi {
    padding: 5% 0;
}
.importance .approach .box_outside .properi > dd {
    padding: 0 4%;
}
.importance .approach .box_outside .properi .flt_l {
    width: 100%;
	float: none;
}
.importance .approach .box_outside .properi .flt_r {
    width: 50%;
}
	
/*プロケア*/
.importance .approach .box_outside .in_box_pro .index_care {
    margin-bottom: 1em;
}
.importance .approach .box_outside .in_box_pro dd > .flex_box {
    display: block;
}
.importance .approach .box_outside .in_box_pro dd > .flex_box .flex_box {
    width: 100%;
	margin-bottom: 1em;
}
.importance .approach .box_outside .in_box_pro dd > .flex_box .flex_box:last-of-type {
	margin-bottom: 0;
}
.importance .approach .box_outside .in_box_pro dd .flex_box .box_img {
    width: 30%;
}
.importance .approach .box_outside .in_box_pro dl.type1 {
    width: 66%;
}
	

/*内側からのアプローチ*/
.importance .approach .box_inside li:not(:last-of-type) {
	width: 100%;
}
.importance .approach .box_inside dl.type1 dd .flex_box .fw_bold {
	font-size: 93%;
	line-height: 1.5;
	font-feature-settings: "halt";
}
.importance .approach .box_inside li:last-of-type dl.type1 dd > .flex_box .box_img {
	width: 18%;
}
.importance .approach .box_inside li:last-of-type dl.type1 dd > .flex_box .box_txt {
	width: 78%;
}
	
}