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

/*-------------*/
/* 共有デザイン */
/*-------------*/

/* エメグリベタに白線 */
.part01 {
	color: #fff;
	background-color: #06b6a7;
	display: inline-block;
	padding: 0.5vmax 2vmax;
	border: 2px solid #fff;
	border-radius: 3vmax;
	box-shadow: 0px 0px 3px 2px #c2c2c2;
}
/* 白いBOXに影 */
.part02 {
	background-color: #fff;
	box-shadow: rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.05) 0px 8px 32px;
	padding: 2.5vmax;
	box-sizing: border-box;
	margin-bottom: 3vmax;
	position: relative;
}
.part02 .part02__wrap {
	max-width: 1000px;
	margin: 0 auto;
}
/* ベージュBOX */
.part03 {
	background-color: #f8f6ed;
	padding: 2.5vmax;
	margin-bottom: 3vmax;
	box-sizing: border-box;
}
.part03 .part03__wrap {
	max-width: 1000px;
	margin: 0 auto;
}
/* ---タイトル（線で挟む）--- */
.title_01 {
	position: relative;
	text-align: center;
}
.title_01 span {
	position: relative;
	z-index: 2;
	display: inline-block;
	margin: 0 2.5em;
	padding: 0 1em;
	background-color: #fff;
	text-align: left;
	font-size: clamp(1.2rem, 1.7vw, 1.8rem);
}
.title_01::before {
	position: absolute;
	top: 50%;
	z-index: 1;
	content: '';
	display: block;
	width: 100%;
	height: 1px;
	background-color: #6e3a2c;
}
/* ---タイトル（背景100%オレンジベタ）--- */
.title_02 {
	background-color: #ffd345;
	width: 100vw;
	margin: 12vmax calc(50% - 50vw) 0 calc(50% - 50vw);
	text-align: center;
	padding: 3.5vmax 0 7vmax 0;
	font-size: clamp(1.0rem, 2.4vw, 1.6rem);
}
.title_02 strong {
	font-size: clamp(1.5rem, 2.9vw, 2.2rem);
	background: linear-gradient(transparent 65%, #ffff00 0%);
	display: inline;
	padding: 0 2px 3px;
}
/* ---タイトル（番号付き）--- */
.title_03 {
	font-size: clamp(1.2rem, 2.6vw, 1.8rem);
	display: flex;
	align-items: flex-start;
	line-height: clamp(2rem, 2.5vw, 2.5rem);
	margin: -1vmax 0 1vmax 0;
}
.title_03 span {
	font-size: clamp(1.3rem, 3vw, 2rem);
	display: block;
	color: #fff;
	background-color: #f17633;
	padding: 1.0vmax 1vmax 0.5vmax 1vmax;
	margin: -1.5vmax 10px 0 0;
	line-height: clamp(1.8rem, 3.5vw, 2.5rem);
}
.title_03 span::before {
	content: "point";
	display: block;
	font-size: 0.6rem;
	line-height: 0.4rem;
	text-align: center;
}
/* テーブル */
.table1 {
	font-size: 0.9rem;
	border: 1px #6e3a2c solid;
	border-collapse: collapse;/* 線を重ねる */
}
.table1 th {
	padding: 10px 20px;
	border: 1px #6e3a2c solid;
	background: #ffd345;
	text-align: center;
	white-space: nowrap; /* 改行しない */
}
.table1 td {
	padding: 10px 20px;
	border: 1px #6e3a2c solid;
}
.scroll-table {
	overflow: auto;
	white-space: nowrap;
	position: relative;
}
/* 文字詰 */
.__contents_wrapper {
	color: #6e3a2c;
	font-feature-settings: "palt";
	-webkit-font-feature-settings: "palt";
}
em {
	font-style: normal;
}
/*-------------*/
/* ----内容---- */
/*-------------*/

/* 追尾ボタン */
.requestf {
	position: fixed;
	right: 0;
	top: 36vh;
	z-index: 10;
}
/* Safariのみ */
::-webkit-full-page-media, :future, :root .requestf {
right:20px;
}
.requestf li a {
	color: #fff;
	margin-bottom: 5px;
	display: inline-block;
	writing-mode: vertical-rl;
	-webkit-writing-mode: vertical-rl;
	-moz-writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	text-orientation: upright;/* 英字・数字も縦 */
	box-shadow: 0 3px 8px 0 rgba(0, 0, 0, .3);
	padding: 1rem 0.8rem 0.7rem 0.6rem;
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
	letter-spacing: 0.08rem;
	font-size: 0.8rem;
}
.requestf li:nth-child(1) a, .requestf li:nth-child(2) a {
	background-color: #f17633;
}
.requestf li:nth-child(3) a {
	background-color: #06b6a7;
}
/* メイン */
main.main__content {
	width: 100vw;
	margin: -5% calc(50% - 50vw) 0 calc(50% - 50vw);
	background-image: url(../images/grease_trap/content_title_bk.jpg);
	background-size: cover;
	background-position: bottom;
}
main.main__content .__content_title {
	text-align: left;
	padding: 4vmax 10% 0 10%;
	justify-content: center;
	align-items: flex-end;
	color: #6e3a2c;
}
main.main__content .__content_title .main_person img {
	width: min(30vmax, 500px);
}
main.main__content .__content_title .part01 {
	font-size: clamp(1.2rem, 1.5vw, 1.8rem);
}
main.main__content .__content_title .part01 img {
	display: inline;
	vertical-align: middle;
	width: clamp(36px, 3vw, 60px);
	margin: -0.2vmax 0.5vmax -0.2vmax -1.6vmax;
}
main.main__content .__content_title h2 {
	font-size: clamp(2rem, 4.4vw, 4.5rem);
	line-height: clamp(2.5rem, 5.3vw, 5rem);
	padding: 2.5vmin 0 1vmin 0;
}
main.main__content .__content_title h3 {
	font-size: clamp(0.9rem, 2vw, 2rem);
}
main.main__content .__content_title .main__img {
	width: clamp(280px, 33vw, 550px);
	margin-top: 1vmax;
	margin-bottom: 1vmax;
}
/* 事業内容 */
.business .flex {
	justify-content: space-between;
}
.business .business__img {
	width: 30%;
	background-image: url(../images/grease_trap/business_ph.jpg);
	background-size: cover;
	background-position: center;
}
.business .title_01 {
	margin-bottom: 10px;
}
.business .business__wrap {
	width: 67%;
}
.business .business__wrap p em {
	display: inline;
	color: #f17633;
}
.business .business__wrap strong {
	display: block;
	font-size: clamp(1.2rem, 2.5vw, 1.7rem);
	margin: 1vmax 0;
}
.business .business__wrap .table1 {
	margin-top: 2vmax;
}
/* グリストラップ */
.grease_trap_info {
	text-align: center;
}
.grease_trap_info p {
	margin: 1.5vmax;
}
.grease_trap_info p em {
	display: inline;
	font-size: clamp(1.2rem, 2.3vw, 1.5rem);
	font-style: normal;
	font-weight: bold;
}
.grease_trap_info img {
	width: 75%;
	margin: 0 auto;
}
/* 収益 */
.earnings .flex {
	justify-content: space-between;
}
.earnings .part02.one {
	margin-top: -3.5vmax;
	width: 100%;
}
.earnings .part02.one h6 {
	text-align: center;
	font-size: clamp(1.0rem, 2.0vw, 1.3rem);
}
.earnings .part02.one ul {
	justify-content: space-between;
	margin: 1vmax 0;
}
.earnings .part02.one ul li {
	width: calc((100% / 4) - 10px );
	background-color: #f8f6ed;
	padding: 0.7vmax;
	text-align: center;
}
.earnings .part02.one ul li em {
	display: block;
	font-size: clamp(1.0rem, 2.0vw, 1.3rem);
	text-decoration: none;
}
.earnings .part02.two {
	width: 33%;
}
.earnings .part02.three {
	width: 65%;
}
.earnings .part02.three .flex h5 {
	background-color: #f8f6ed;
	text-align: center;
	font-size: 0.9rem;
	padding: 5px;
}
.earnings .part02.three .flex dl {
	display: flex;
	padding: 3px 0;
}
.earnings .part02.three .flex dl:nth-child(3) {
	border-bottom: 1px solid;
}
.earnings .part02.three .flex dt {
	width: 40%;
}
.earnings .part02.three .flex dd {
	width: 60%;
	text-align: right;
}
.earnings .part02.three .flex dl:nth-child(4) dd, .earnings .part02.three .flex dl:nth-child(5) dd {
	font-size: clamp(1.2rem, 2.3vw, 1.5rem);
}
.earnings .part02.three .flex small {
	background-color: initial;
	text-align: left;
}
.earnings .part02.three .flex small a {
	display: inline;
}
.earnings .part02.three .flex div:nth-child(1) {
	width: 45%;
}
.earnings .part02.three .flex div:nth-child(2) {
	width: 50%;
}
.earnings .part02.three .flex div:nth-child(2) span {
	background: #f17633;
	color: #fff;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	border-radius: 50%;
	flex-flow: column;
	vertical-align: top;
	text-align: center;
	width: 250px;
	height: 250px;
	padding: 30px;
}
.earnings .part02.three .flex div:nth-child(2) span strong {
	display: inline;
	font-size: 1.5rem;
}
.check .check__wrap {
	position: relative;
	background-color: #fff;
	padding: 3vmax;
	box-sizing: border-box;
	margin-right: 26%;
	background-image: url(../images/grease_trap/earnings_line_left-up.svg), url(../images/grease_trap/earnings_line_right-up.svg), url(../images/grease_trap/earnings_line_left-low.svg), url(../images/grease_trap/earnings_line_right-low.svg);
	background-position: left top, right top, left bottom, right bottom;
	background-size: 7%;
	background-repeat: no-repeat;
}
.check .check__wrap .part01 {
	position: absolute;
	top: -10px;
	right: 0;
	left: 0;
	margin: 0 auto;
	width: 30%;
	text-align: center;
}
.check .check__wrap h3 {
	color: #f17633;
	font-size: clamp(1.4rem, 1.7vw, 1.8rem);
}
.check .check__wrap ul {
	margin-top: 5px;
}
.check .check__wrap ul li {
	border-bottom: 1px dotted #c2c2c2;
	padding-bottom: 3px;
	margin-bottom: 3px;
}
.check .check__wrap ul li img {
	width: 25px;
	display: inline-block;
	vertical-align: middle;
	margin-right: 5px;
}
.check .part03__wrap {
	position: relative;
}
.check .part03__wrap .check_person {
	position: absolute;
	bottom: -2.5vmax;
	right: 0;
	width: 28%;
}
/* サポート */
.support .title_02 {
	background-image: url(../images/grease_trap/support_comment.svg), url(../images/grease_trap/support_bk.png);
	background-position: top 20% center, top center;
	background-size: 60%, contain;
	background-repeat: no-repeat;
	padding: 32% 0 7vmax 0;
}
.support .part02.one {
	margin-top: -3.5vmax;
	width: 100%;
}
.support .part02 .part02__wrap ol {
	justify-content: start;
}
.support .part02 .part02__wrap ol li {
	border: 1px solid #f17633;
	margin: 10px 20px 10px 20px;
	padding: 1.5vmax;
	display: flex;
	flex-direction: column;
	text-align: center;
}






.support .part02 .part02__wrap ol li:nth-child(3n) {
	margin: 10px 0 10px 0;
}
.support .part02 .part02__wrap ol li h5 {
	text-align: center;
	color: #f17633;
	font-size: clamp(1.2rem, 1.7vw, 1.8rem);
}
.support .part02 .part02__wrap ol li p {
	margin: 10px 0 20px 0;
	align-items: flex-start;
}
.support .part02 .part02__wrap ol li img {
	height: 7vmax;
	display: block;
	margin-top: auto;
}
/* 問い合わせと流れ */
.step h4 {
	text-align: center;
	font-size: clamp(1.2rem, 1.7vw, 1.8rem);
}
.step .part02.one {
	margin-top: -3.5vmax;
	width: 100%;
}
.step .part02.one .part02__wrap ol {
	margin: 2vmax 0;
}
.step .part02.one .part02__wrap ol li {
	width: calc((100% / 5) - 16px);
	background-color: #f8f6ed;
	margin: 0 20px 20px 0;
	position: relative;
	text-align: center;
	padding: 1vmax;
	box-sizing: border-box;
	border-top: 2px solid #f17633;
}
.step .part02.one .part02__wrap ol li h5 {
	font-size: 1rem;
	margin: 2vmax 0;
}
.step .part02.one .part02__wrap ol li span {
	font-size: clamp(1.3rem, 3vw, 2rem);
	font-weight: bold;
	display: inline-block;
	color: #f17633;
	padding: 1.0vmax 1vmax 0.5vmax 1vmax;
	border-bottom: 1px solid #f17633;
}
.step .part02.one .part02__wrap ol li span::before {
	content: "STEP";
	display: block;
	font-size: 0.6rem;
	line-height: 0.4rem;
	text-align: center;
}
.step .part02.one .part02__wrap ol li img {
	height: 5vmax;
}
.step .part02.one .part02__wrap ol li:last-child {
	margin: 0 0 20px 0;
}
.step .part02.one .part02__wrap ol li::after {
	content: "";
	position: absolute;
	display: block;
	background-image: url(../images/grease_trap/icon_arrow.svg);
	background-position: center;
	background-size: 35%;
	background-repeat: no-repeat;
	width: 20px;
	height: 20px;
	top: 50%;
	right: -20px;
}
.step .part02.one .part02__wrap ul {
	justify-content: space-between;
	margin-bottom: 3vmax;
}
.step .part02.one .part02__wrap ul li {
	width: 31%;
}
.step .part02.one .part02__wrap ul li a {
	background-color: #f17633;
	color: #fff;
	padding: 3vmax 2vmax;
	box-sizing: border-box;
	text-align: center;
	border-radius: 10px;
	margin: 1vmax 0;
}
.step .part02.one .part02__wrap ul li:first-child a {
	background-color: #06b6a7;
}
.step .part02.one .part02__wrap ul li a:hover {
	transition: 0.5s;
	opacity: 0.7;
}
.step .step__sns {
	text-align: center;
}
.step .step__sns p {
	margin-bottom: 1.2vmax;
	font-size: clamp(1.1rem, 3vw, 1.4rem);
}
.step .step__sns a {
	display: inline-block;
	width: 65px;
	margin: 10px 15px 0 15px;
}
.step .step__sns a img {
	width: 100%;
}
.step .part02.one .part02__wrap ol li:last-child:after {
	display: none;
}






/** アニメーション ***************************************************************************************/
/* フェード表示 */
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.fadeIn, .fadeIn02 {
	opacity: 0;
}
.fadeIn.on, .fadeIn02 {
	animation-name: fadeIn;
	animation-duration: 1s;
	transition: ease-in-out;
	opacity: 0;
	animation-fill-mode: forwards;
}


/* 下→上にフェード表示 */
@keyframes fadeInUp {
0% {
opacity: 0;
transform: translateY(30px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.fadeInUp, .fadeInUp02 {
	opacity: 0;
}
.fadeInUp.on, .fadeInUp02 {
	animation-name: fadeInUp;
	animation-duration: 1s;
	transition: ease-in-out;
	opacity: 0;
	animation-fill-mode: forwards;
}


/* マスク左→右（要素をspanで囲む） */
/* 時間差クラスはspanに入れる */
@keyframes maskLeft {
0% {
clip-path: inset(0px 100% 0px 0px);
}
100% {
clip-path: inset(0px 0px 0px 0px);
}
}
.maskLeft > span, .maskLeft02 > span {
	clip-path: inset(0px 100% 0px 0px);
	display: table;
}
.maskLeft.on > span, .maskLeft02 > span {
	display: table;
	animation-name: maskLeft;
	animation-duration: 0.5s;
	transition: ease-in-out;
	animation-fill-mode: forwards;
}
.on {
	animation-fill-mode: forwards;
}





/** 1200px ***************************************************************************************/
@media screen and (max-width:1200px) {
/* 収益 */
.earnings .part02.three .flex div:nth-child(1), .earnings .part02.three .flex div:nth-child(2) {
	width: 100%;
}
.earnings .part02.three .flex div:nth-child(2) {
	text-align: center;
	margin-top: 10px;
}
.earnings .part02.two {
	width: 43%;
}
.earnings .part02.three {
	width: 55%;
}
.check .part03__wrap .check_person {
	width: 33%;
}
.check .check__wrap {
	margin-right: 30%;
}
}



/** 1000px ***************************************************************************************/
@media screen and (max-width:1000px) {
/* 収益 */
.check .part03__wrap .check_person {
	width: 37%;
}
.earnings .part02.two {
	width: 100%;
}
.earnings .part02.three {
	width: 100%;
}
/* サポート */
.support .title_02 {
	background-size: 80%, contain;
	padding: 40% 0 7vmax 0;
}
.support .part02 .part02__wrap ul li {
	margin: 10px 10px 5px 0;
	width: calc((100% / 3) - 10px);
}
.support .part02 .part02__wrap ul li:nth-child(3n) {
	margin: 10px 0px 5px 0;
}
/* 問い合わせと流れ */
.step .part02.one .part02__wrap ol li {
	width: calc((100% / 3) - 20px);
}
}





/** 800px ****************************************************************************************/
@media screen and (max-width:800px) {
/* テーブル */
.scroll-table::before {
	content: "※表は横にスライドできます";
	display: inline-block;
	margin-bottom: 5px;
	position: sticky;
	top: 0;
	left: 0;
}
/* 追尾ボタン */
.requestf {
	display: none;
}
/* メイン */
main.main__content {
	margin: -10% calc(50% - 50vw) 0 calc(50% - 50vw);
}
main.main__content .__content_title {
	padding: 4vmax 5% 0 5%;
	text-align: center;
}
main.main__content {
	background-image: url(../images/grease_trap/content_title_bk_sp.jpg);
}
/* 事業内容 */
.business .business__img {
	width: 100%;
}
.business .business__wrap {
	width: 100%;
	order: 1;
}
.business .business__img {
	width: 100%;
	height: 200px;
	margin: 20px auto 0 auto;
	order: 2;
}
/* グリストラップ */
.grease_trap_info p {
	text-align: left;
	margin: 1.5vmax 0;
}
.grease_trap_info img {
	width: 100%;
}
/* 収益 */
.earnings .part02.one ul li {
	width: calc((100% / 2) - 5px );
	margin-bottom: 10px;
}
.earnings .part02.two, .earnings .part02.three {
	width: 100%;
}
.check .part03__wrap .check_person {
	position: inherit;
	margin: 0 auto 0 auto;
	width: 50%;
}
.check .check__wrap {
	margin-right: 0%;
	width: 100%;
}
/* サポート */
.support .part02 .part02__wrap ul li img {
	height: 6vmax;
}
.support .title_02 {
	background-size: 90%, contain;
	padding: 40% 0 7vmax 0;
}
.support .part02 .part02__wrap ul li {
	margin: 10px 10px 5px 0;
	width: calc((100% / 2) - 5px);
}
.support .part02 .part02__wrap ul li:nth-child(3n) {
	margin: 10px 10px 5px 0;
}
.support .part02 .part02__wrap ul li:nth-child(2n) {
	margin: 10px 0px 5px 0;
}
/* 問い合わせと流れ */
.step .part02.one .part02__wrap ol li {
	width: calc((100% / 2) - 20px);
}
.step .part02.one .part02__wrap ul li {
	width: 48%;
}
.step .part02.one .part02__wrap ul li:nth-child(1) {
	width: 100%;
}
}







/** 600px ****************************************************************************************/
@media screen and (max-width:600px) {
/* サポート */
.support .title_02 {
	background-image: url(../images/grease_trap/support_comment_sp.svg), url(../images/grease_trap/support_bk.png);
	background-size: 70%, contain;
	padding: 70% 0 7.5vmax 0;
}
}