@charset "UTF-8";

:root {
  --viewport: 750;
  --gorillaGold: #BBA170;
  --blue: #3054E0;
}

.txt_right {
	text-align:right;
}
.bold {
	font-weight:bold;
}
.inline {
	display:inline;
}
.cmnMore01 {
	display:none;
}
.font_blue {
  color: var(--blue);
}
.bold {
  font-weight: bold;
}
.flex {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-around;
  align-items: center;
}
@media screen and (max-width: 767px) {
	.more {
		display:none;
	}
	.cmnMore01 {
		display: block;
		text-align: center;
		margin-top:20px;
	}
	.cmnMore01 a {
		display: inline-block;
		width: 260px;
		padding: 14px 0;
		background: #D9D9D9;
		-webkit-border-radius: 30px;
		        border-radius: 30px;
		font-size: 1.6rem;
		text-align: center;
		font-weight: bold;
		text-decoration: none;
		position: relative;
	}
	.cmnMore01 a::after {
		content: "";
		display: inline-block;
		width: 17px;
		height: 17px;
		background: url(/operation/smellcare/assets/img/common/icon_more01_sp.png) no-repeat;
		-webkit-background-size: 17px 17px;
		        background-size: 17px 17px;
		position: absolute;
		top: 50%;
		right: 20px;
		margin-top: -9px;
	}
	.cmnMore01.open {
		margin-right: 7px;
		text-align: right;
	}
	.cmnMore01.open a {
		width: auto;
		padding: 0 20px 0 0;
		border: none;
		background: none;
		font-size: 1.3rem;
	}
	.cmnMore01.open a::after {
		background: url(/operation/smellcare/assets/img/common/icon_more01_open_sp.png) no-repeat;
		-webkit-background-size: 15px 15px;
		        background-size: 15px 15px;
		position: absolute;
		top: 50%;
		right: 0;
		margin-top: -8px;
	}
}

/* Contents
--------------------------------------------------------- */
#contents .cmnBtn01 {
	margin-top:50px;
}
#conts p {
	font-size: 18px;
	line-height: 30px;
}
article h2 {
	padding: 13px 0 14px;
	background: #1587c2;
	color: #FFF;
	font-size: 28px;
	font-weight: bold;
	text-align: center;
	margin-bottom:22px;
}
article .inner {
	padding:0 20px;
}
#article01 {
	margin-top:80px;
}
#article01 .box img {
	float:left;
	margin-right:18px;
	margin-bottom:20px;
}
#article02 {
	margin-top:75px;
	padding-bottom:30px;
}
#article02 .box,
#article02 .inner > img {
	float:left;
}
#article02 .box {
	width:270px;
	margin-bottom:40px;
}
#article02 .box img {
	margin-bottom:15px;
}
#article02 .inner > img {
	margin:95px 15px 0;
}
#article02 .box span {
	font-size:16px;
	font-weight:bold;
	line-height:26px;
}
#article03 .box {
	margin-top:50px;
}
#article03 .box img {
	float:left;
	margin-right:18px;
	margin-bottom:20px;
}
@media screen and (max-width: 767px) {
	#conts p {
		font-size: 14px;
		line-height: 1.6;
	}
	article h2 {
		padding: 8px 7px;
		font-size: 18px;
		text-align: center;
	}
	article .inner {
		padding:0 2%;
	}
	#contents .cmnBtn01 {
		margin-top:6%;
	}
	#article01 {
		margin-top:8%;
	}
	#article01 .box img {
		float:none;
		margin-right:0;
	}
	#contents .cmnBtn01 {
		background:none;
		padding:0;
	}
	#article02 {
		margin-top:8%;
		padding-bottom:0;
	}
	#article02 .box,
	#article02 .inner > img {
		float:none;
	}
	#article02 .box {
		width:100%;
		margin-bottom:8%;
	}
	#article02 .box span {
		font-size:unset;
		font-weight:normal;
	}
	#article03 .box {
		margin-top:5%;
	}
	#article03 .box img {
		margin-right:0;
	}
}


/*renewal*/
#contents .pageTtl{
  background: var(--blue);
  margin-top: calc(100vw / var(--viewport) * 18);
  padding: 15px 0;
  font-size: 1.8rem;
  text-align: center;
}
#conts .spWrap {
  padding: 0 calc(100vw / var(--viewport) * 22);
  background: #fff;
}
.mainVisual{
  padding-top: calc(100vw / var(--viewport) * 38);
}
#conts .read{
  font-size: calc(100vw / var(--viewport) * 22); 
  margin-top: calc(100vw / var(--viewport) * 34);
  line-height: 1.4545;
}
#contents .headLine02 {
  background: var(--blue);
  margin-top: calc(100vw / var(--viewport) * 60);
}
#conts .contsInner {
  font-size: calc(100vw / var(--viewport) * 22);
  line-height: 1.45;
  padding: calc(100vw / var(--viewport) * 55) 0 calc(100vw / var(--viewport) * 60);
}

.box_2clm {
	flex-wrap: wrap;
}
.box_2clm__merit {
	font-family: "Noto Sans JP", sans-serif;
	font-size: calc(100vw / var(--viewport) * 81); 
	font-weight: bold;
	color: #939393;
	margin-top: calc(100vw / var(--viewport) * 40);
	padding-bottom: calc(100vw / var(--viewport) * 20);  
	border-bottom: calc(100vw / var(--viewport) * 1) solid #000;
}
.box_2clm__h3 {
	font-size: calc(100vw / var(--viewport) * 40); 
	margin-top: calc(100vw / var(--viewport) * 18);  
	color: #3054E0;
}
.box_2clm__img {
	margin-top: calc(100vw / var(--viewport) * 20); 
}
.box_2clm__txtArea {
	font-size: calc(100vw / var(--viewport) * 22); 
	margin-top: calc(100vw / var(--viewport) * 24); 
	line-height: 1.4545;
}

.box_2clm .table_2clm {
	margin-top: calc(100vw / var(--viewport) * 42); 
}
.table_2clm {
	font-size: calc(100vw / var(--viewport) * 30);
	margin-top: calc(100vw / var(--viewport) * 6); 
	text-align: center;
}
.table_2clm:first-of-type th {
	margin-top: 0;
}
.table_2clm th {
	width: calc(100vw / var(--viewport) * 400);
	padding: calc(100vw / var(--viewport) * 22) calc(100vw / var(--viewport) * 60) calc(100vw / var(--viewport) * 18);
	box-sizing: border-box;
	color: #fff;
	background: #2AA5BA;
}
.table_2clm td {
	width: calc(100vw / var(--viewport) * 307);
	padding: calc(100vw / var(--viewport) * 22) calc(100vw / var(--viewport) * 60) calc(100vw / var(--viewport) * 18);
	box-sizing: border-box;
	background: #EFEFEF;
}

.flowSec ul.flex {
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
}
.flowSec ul.flex li {
  width: calc(100vw / var(--viewport) * 327);
  margin-top: calc(100vw / var(--viewport) * 33);
}
.flowSec ul.flex li:nth-child(2n) .relative {
  position: relative;
}
.flowSec ul.flex li:nth-child(2n) .relative:before {
  content: "";
  width: calc(100vw / var(--viewport) * 38);
  height: calc(100vw / var(--viewport) * 43);
  background: url(../../assets/img/index/icon_flow.webp) center center no-repeat;
  background-size: 100% auto;
  display: inline-block;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: calc(100vw / var(--viewport) * -44);
}
#conts .flowSec ul.flex li .midashi {
  font-size: calc(100vw / var(--viewport) * 28);
  font-weight: bold;
  margin-bottom: calc(100vw / var(--viewport) * 15);
}
#conts .flowSec ul.flex li .midashi .step {
  color: #fff;
  font-size: calc(100vw / var(--viewport) * 15);
  line-height: calc(100vw / var(--viewport) * 28);
  text-align: center;
  vertical-align: middle;
  background: #BBA170;
  height: calc(100vw / var(--viewport) * 28);
  display: inline-block;
  padding: 0 calc(100vw / var(--viewport) * 10);
  margin-right: calc(100vw / var(--viewport) * 6);
}
.flowSec ul.flex li img {
  margin-bottom: calc(100vw / var(--viewport) * 15);
}
.flowSec ul.flex li .text {
  font-size: calc(100vw / var(--viewport) * 20);
  line-height: 1.5;
}

.button a {
  color: #fff;
  font-size: calc(100vw / var(--viewport) * 25);
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  background: #777;
  width: calc(100vw / var(--viewport) * 500);
  height: calc(100vw / var(--viewport) * 100);
  display: flex;
  justify-content: center;
  align-items: center;
  margin: calc(100vw / var(--viewport) * 60) auto 0;
}
.button a:hover {
  opacity: 0.6;
}
.button a span {
  font-size: calc(100vw / var(--viewport) * 18);
  margin-left: 0.5em;
  vertical-align: middle;
}
@media screen and (min-width: 767px) {
  #breadCrumb{
      width: 1130px;
  }
  #contents .pageTtl{
    width: 1130px;
    margin: 13px auto 0;
    padding: 25px 0 22px;
    font-size: 34px;
  }
  #contents .pageTtl span{
    font-size: 34px;
  }
  #conts .spWrap {
    width: 1130px;
    padding: 0;
    margin: 0 auto;
  }
  .mainVisual{
    padding-top: 50px;
  }
  #conts .read{
    font-size: 18px; 
    margin-top: 48.5px;
    line-height: 1.6666;
  }
  #contents .headLine02 {
    font-size: 34px;
    margin-top: 80px;
  }
  #conts .contsInner {
    font-size: 18px;
    width: 1130px;
    padding: 72px 0 80px;
    position: relative;
  }
	
  .box_2clm {
    margin-top: 25px;
    justify-content: space-between;
    align-items: flex-start;
  }
  .box_2clm.merit { 
	  padding-bottom: 50px;
      border-bottom: 1px solid #000;
  }
  .box_2clm.merit:last-of-type {
	  padding-bottom: 0;
      border-bottom: none; 
  }
  .box_2clm__imgArea {
      width: 520px; 
  }
  .box_2clm__merit {
      font-size: 81px;
      margin-top: 0;   
	  padding-bottom: 0;
      border-bottom: none; 
  }
  .box_2clm:first-of-type .box_2clm__merit {
      margin-top: 0; 
  }
  .box_2clm__h3 {
      font-size: 30px; 
      margin-top: 16px;  
  }
  .box_2clm__img {
      margin-top: 20px; 
  }
  .box_2clm__txtArea {
	  width: 550px;
      font-size: 18px; 
      margin-top: 25px;
      line-height: 1.6666;
  }
  .box_2clm.merit:nth-of-type(even) .box_2clm__imgArea{
      order: 2; 
  }

  .box_2clm .table_2clm {
      margin-top: 26px; 
  }
  .table_2clm {
      font-size: 24px;
      margin-top: 5px; 
  }
  .table_2clm th {
      width: 311px;
      padding: 16px 30px 14px;
  }
  .table_2clm td {
      width: 239px;
      padding: 16px 30px 14px;
  }
	
  .flowSec ul.flex li {
    width: 340px;
    margin-top: 30px;
    position: relative;
  }
  .flowSec ul.flex li:nth-child(-n+3) {
    margin-top: 40px;
  }
  #conts .flowSec ul.flex li .midashi {
    font-size: 29px;
    margin-bottom: 14px;
  }
  #conts .flowSec ul.flex li .midashi .step {
    font-size: 14px;
    line-height: 24px;
    height: 24px;
    margin-right: 6px;
    padding: 0 0.5em;
  }
  .flowSec ul.flex li img {
    margin-bottom: 13px;
  }
  .flowSec ul.flex li .text {
    font-size: 18px;
  }
  .flowSec ul.flex li:nth-child(2n) .relative:before {
    content: none;
  }
  .flowSec ul.flex li:nth-child(1):after,
  .flowSec ul.flex li:nth-child(2):after,
  .flowSec ul.flex li:nth-child(4):after,
  .flowSec ul.flex li:nth-child(5):after {
    content: "";
    width: 38px;
    height: 43px;
    background: url(../../assets/img/index/icon_flow.webp) center center no-repeat;
    background-size: 100% auto;
    display: inline-block;
    position: absolute;
    top: 130px;
    right: -47px;
  }
	
	
  .button a {
    font-size: 25px;
    width: 500px;
    height: 100px;
    margin: 66px auto 0;
  }
  .button a span {
    font-size: 18px;
  }
}