@charset "UTF-8";

img{
	width: 100%;
}

.ttl-bg-bl{
	background: url("../img/airrevive/ttl_bg.jpg") no-repeat;
	background-size: cover;
	padding: 30px 20px;
	margin: 0;
	text-align: center;
}

/*==== mobile スマフォ縦用css ===*/
@media screen and (max-width: 480px){
	.ttl-bg-bl{
		padding: 20px;
	}
}

/******************************
hero
******************************/
#hero h1{
	text-align: center;
	font-size: var(--fontsize_01);
}

/******************************
video
******************************/
.video{
	width: 90%;
	max-width: 786px;
	margin: 80px auto;
}
.video iframe{
	width: 100%;
	height: 100%;
	aspect-ratio: 16 / 9;
}
/*==== mobile スマフォ縦用css ===*/
@media screen and (max-width: 480px){
	.video {
		margin: 10px auto 60px;
	}
}


/******************************
about
******************************/
#about {
	margin-bottom: 100px;
}
#about h2{
	background: url(../img/airrevive/about_ttl_bg.jpg) no-repeat;
    background-size: cover;
	background-position: center;
    text-align: center;
    padding: 8.2%;
	margin: 40px 0 80px;
}
#about h2 img{
	max-width: 385px;
}
#about h3{
	text-align: center;
	font-size: var(--fontsize_01);
	margin-bottom: 80px;
}
#about p{
	font-size: var(--fontsize_03);
	line-height: 2;
	text-align: center;
	margin: 0 0 150px;
}
#about p span{
	color: var(--color_01);
	font-weight: bold;
}
/*==== mobile スマフォ横〜用css ===*/
@media screen and (max-width: 896px){
	#about h2 {
		margin: 20px 0 50px;
	}
	#about h3 {
		margin-bottom: 30px;
	}
	#about p {
		margin: 0 0 40px;
	}
}
/*==== mobile スマフォ縦用css ===*/
@media screen and (max-width: 480px){
	#about {
		margin-bottom: 60px;
	}
	#about h2 img{
		max-width: 300px;
	}
	#about h3 {
		font-size: var(--fontsize_02);
		margin-bottom: 30px;
	}
	#about p {
		font-size: 100%;
		margin: 0 0 30px;
    }
}


/******************************
voice
******************************/
#voice{
	padding-bottom: 100px;
}
#voice .ttl-bg-bl{
	margin-bottom: 70px;
}
#voice .ttl-bg-bl img{
	max-width: 386px;
}
#voice .news-list{
	margin-bottom: 80px;
}


/*==== mobile スマフォ縦用css ===*/
@media screen and (max-width: 480px){
	#voice {
		padding-bottom: 40px;
	}
	#voice .ttl-bg-bl {
		margin-bottom: 30px;
	}
	#voice .ttl-bg-bl img {
		max-width: 252px;
	}
	#voice .news-list {
		margin-bottom: 60px;
	}
}


/******************************
work
******************************/
#work{
	padding-bottom: 100px;
}
#work .ttl-bg-bl img{
	max-width: 673px;
}
#work h3{
	font-size: var(--fontsize_01);
	color: var(--color_01);
	text-align: center;
	margin-top: 80px;
}
#work .sub{
	text-align: center;
}
#work .f01{
	font-size: var(--fontsize_03);
	line-height: 2;
	text-align: center;
	margin: 60px 0;
}
#work .data.flex {
	flex-wrap: nowrap;
}
#work .lead{
	font-size: var(--fontsize_02);
	color: var(--color_01);
	font-weight: bold;
	text-align: center;
	margin: 0;
	padding: 60px 0;
}

/*==== mobile スマフォ横〜用css ===*/
@media screen and (max-width: 896px){
	#work {
		padding-bottom: 50px;
	}
	#work h3 {
		margin-top: 60px;
	}
}
/*==== mobile スマフォ縦用css ===*/
@media screen and (max-width: 480px){
	#work {
        padding-bottom: 30px;
    }
	#work h3 {
		font-size: var(--fontsize_02);
		margin-top: 30px;
	}
	#work .f01 {
		font-size: 100%;
		margin: 20px 0 40px;
	}
	#work .data.flex {
		flex-wrap: wrap;
	}
	#work .lead {
		padding: 30px 0 0;
	}
}



/******************************
work
******************************/
#health{
	padding-bottom: 100px;
}
#health .ttl-bg-bl img{
	max-width: 391px;
}
#health h3{
	font-size: var(--fontsize_01);
    color: var(--color_01);
	text-align: center;
	margin-top: 80px;
}
#health .sub{
	text-align: center;
}
#health .f01{
	font-size: var(--fontsize_03);
    line-height: 2;
    margin: 30px auto 60px;
    max-width: 710px;
}
#health .lead{
	font-size: var(--fontsize_02);
	color: var(--color_01);
	font-weight: bold;
	text-align: center;
	margin: 0;
	padding: 60px 0;
}

/*==== mobile スマフォ横〜用css ===*/
@media screen and (max-width: 896px){
	#health {
		padding-bottom: 50px;
	}
	#health h3 {
		margin-top: 60px;
	}
}
/*==== mobile スマフォ縦用css ===*/
@media screen and (max-width: 480px){
	#health {
        padding-bottom: 30px;
    }
	#health .ttl-bg-bl img {
		max-width: 260px;
	}
	#health h3 {
		font-size: var(--fontsize_02);
		margin-top: 30px;
	}
	#health .f01 {
		font-size: 100%;
		margin: 20px 0 40px;
	}
	#health .lead {
		padding: 30px 0;
	}
}

/******************************
point
******************************/
#point{
	background: url("../img/airrevive/point_bg.jpg") no-repeat;
	background-size: cover;
	padding-bottom: 100px;
}
#point h2{
	color: #fff;
	text-align: center;
	margin: 0;
	padding: 100px 0;
	font-size: var(--fontsize_01);
}
#point .flex {
    padding: 0;
    list-style: none;
	column-gap:10px;
	row-gap: 30px;
	flex-wrap: nowrap;
}
#point .flex .item{
	width: 33.333%;
	background: #fff;
	text-align: center;
	padding: 0 30px 30px;
	box-shadow: 0px 10px 20px 0px rgba(0,0,0,.1);
}
#point .flex .item .img{
	margin-top: -50px;
}
#point .flex .item p{
	text-align: left;
}
#point .flex .item .ttl{
	font-size: var(--fontsize_03);
	font-weight: bold;
	text-align: center;
	color: var(--color_01);
	border-bottom: solid 1px #D9D9D9;
	padding: 10px 0 30px;
    margin: 0 0 30px;
}

/*==== mobile スマフォ横〜用css ===*/
@media screen and (max-width: 896px){
	#point h2 {
		padding: 80px 0 40px;
	}
	
	#point .flex{
		flex-wrap: wrap;
	}
	#point .flex .item{
		width: 100%;
		display: flex;
		align-items: center;
		padding: 20px;
	}
	#point .flex .item .img{
		margin-top: 0;
		width: 30%;
	}
	#point .flex .item .txt{
		width: 70%;
	}
	#point .flex .item .ttl {
		padding: 0 0 20px;
		margin: 0 0 20px;
		text-align: left;
	}
}
/*==== mobile スマフォ縦用css ===*/
@media screen and (max-width: 480px){
	#point {
		padding-bottom: 60px;
	}
	#point h2 {
        padding: 50px 0 20px;
    }
	#point .flex .item{
		flex-wrap: wrap;
	}
	#point .flex .item .img,
	#point .flex .item .txt {
        width: 100%;
    }
	#point .flex .item .img img{
		max-width: 166px;
	}
	#point .flex .item .ttl {
        padding: 0 0 10px;
        margin: 0 0 10px;
    }
}


/******************************
point02
******************************/
#point02{
	padding: 100px 0;
}
#point02 h2{
	text-align: center;
	font-size: var(--fontsize_01);
	color: var(--color_01);
	margin: 0 0 60px;
}
#point02 p{
	line-height: 2;
	text-align: center;
	font-size: var(--fontsize_03);
}
.c-point01{
	color: var(--color_01);
}

/*==== mobile スマフォ横〜用css ===*/
@media screen and (max-width: 896px){
	#point02 {
		padding: 80px 0;
	}
	#point02 h2 {
		margin: 0 0 40px;
	}
}
/*==== mobile スマフォ縦用css ===*/
@media screen and (max-width: 480px){
	#point02 {
		padding: 50px 0 30px;
    }
	#point02 p{
		font-size: 100%;
	}
}


/******************************
result
******************************/
#result .ttl-bg-bl{
	margin-bottom: 80px;
}
#result .ttl-bg-bl img{
	max-width: 436px;
}

.result-item{
	justify-content: space-between;
	align-items: center;
	margin-bottom: 80px;
}
.result-item .txt{
	width: 40%;
	padding-left: 12%;
}
.result-item .txt p{
	line-height: 1.8;
}
.result-item .img{
	width: 50%;
	background-color: var(--color_gry);
	padding: 50px 0;
}
.result-item .img span{
	display: inline-block;
	background: #fff;
	padding: 50px;
	box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, .1);
	margin-left: -7%;
}
.result-item h3{
	font-size: var(--fontsize_02);
	color: var(--color_01);
}
.result-item:nth-of-type(even) .txt{
	order: 2;
	padding-left: 0;
	padding-right: 12%;
}
.result-item:nth-of-type(even) .img{
	text-align: right;
}
.result-item:nth-of-type(even) .img span{
	margin-left: 0;
	margin-right: -7%;
}

/*==== mobile スマフォ横〜用css ===*/
@media screen and (max-width: 896px){
	#result .ttl-bg-bl {
		margin-bottom: 40px;
	}
	.result-item .txt {
		padding-left: 5%;
	}
	.result-item:nth-of-type(even) .txt {
		padding-right: 5%;
	}
}
/*==== mobile スマフォ縦用css ===*/
@media screen and (max-width: 480px){
	#result .ttl-bg-bl img {
		max-width: 280px;
	}
	.result-item .txt {
		width: 100%;
    	padding: 0 5%;
		margin-bottom: 20px;
    }
	.result-item {
		margin-bottom: 50px;
	}
	.result-item h3{
		margin: 0;
	}
	.result-item .img {
		width: 100%;
		padding: 5%;
	}
	.result-item .img span {
		padding: 0;
		box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0);
		margin-left: 0;
	}

	.result-item:nth-of-type(even) .txt {
        padding: 0 5%;
		order: 1;
    }
	.result-item:nth-of-type(even) .img{
		order: 2;
	}
	.result-item:nth-of-type(even) .img span {
		margin-right: 0;
	}
	
}


/******************************
sdgs
******************************/
#sdgs .bg-gry{
	padding-bottom: 100px;
}
#sdgs .ttl-bg-bl img{
	max-width: 474px;
}
#sdgs h3{
    font-size: var(--fontsize_01);
    color: var(--color_01);
    text-align: center;
    margin: 30px 0;
    padding-top: 60px;
}
#sdgs .f01{
    font-size: var(--fontsize_03);
    line-height: 2;
    text-align: center;
    margin: 30px 0 60px;
}

.sdgs-logo{
	max-width: 573px;
	margin: 0 auto;
	padding-top: 100px;
}

.sdgs-item{
	align-items: center;
	background: #fff;
	box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, .1);
	margin-bottom: 50px;
	padding: 40px;
}
.sdgs-item h4{
	font-size: var(--fontsize_03);
	color: var(--color_01);
	margin: 0 0 30px;
}
.sdgs-item .img{
    width: 258px;
	padding-right: 50px;
	text-align: center;
}
.sdgs-item .img img{
	max-width: 165px;
}
.sdgs-item .img .flex{
    align-items: center;
	padding: 5px 20px;
    aspect-ratio: 1 / 1;
	
	color: #fff;
}
.sdgs-item .img .flex.sdgs-2{
	background: #D5A600;
}
.sdgs-item .img .flex.sdgs-7{
	background: #F9BD00;
}
.sdgs-item .img .flex.sdgs-8{
	background: #980B32;
}

.sdgs-item .img .flex span{
    font-size: 28px;
    line-height: 1.3;
    text-align: left;
}
.sdgs-item .img .flex .num{
    display: block;
    margin-bottom: 10px;
    font-size: 50px;
    font-family: "Oswald", sans-serif;
    position: relative;
}
.sdgs-item .img .flex .num:after{
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 23px;
    height: 2px;
    background: #fff;
}

.sdgs-item .txt{
	width: calc(100% - 258px);
}
.sdgs-item .txt p{
	line-height: 2;
    font-size: 112%;
}

/*==== mobile スマフォ横〜用css ===*/
@media screen and (max-width: 896px){
	.sdgs-logo{
		padding-top: 50px;
	}
	#sdgs h3 {
	}
	.sdgs-logo{
		padding-top: 50px;
	}
	.sdgs-item {
		align-items: unset;
		margin-bottom: 30px;
		padding: 20px;
	}
	.sdgs-item h4 {
		margin: 0 0 10px;
	}
    
    .sdgs-item .img, .sdgs-item .txt{
		width: 100%;
	}
	.sdgs-item .img {
        padding-right: 0;
		margin-bottom: 0;
    }
	.sdgs-item .img.noneimg{
		width: 100%;
		padding: 0;
	}
	.sdgs-item .img .flex{
		aspect-ratio: auto;
	}
	.sdgs-item .img.noneimg + .txt{
		width: 100%;
	}
    .sdgs-item .img .flex span {
        font-size: 24px;
    }
    .sdgs-item .img .flex .num {
        display: inline-block;
        font-size: 30px;
        margin-right: 10px;
        margin-bottom: 5px;
    }
    .sdgs-item .img .flex .num:after{
        content: ".";
        display: inline-block;
        position: static;
        width: auto;
        height: auto;
        background: none;
    }
	
	#sdgs .bg-gry {
		padding-bottom: 80px;
	}
}
/*==== mobile スマフォ縦用css ===*/
@media screen and (max-width: 480px){
	#sdgs .ttl-bg-bl img {
		max-width: 300px;
	}
	#sdgs h3 {
		font-size: var(--fontsize_02);
        padding-top: 40px;
    }
    #sdgs .f01{
        font-size: 100%;
        margin: 20px 0;
    }
    
    .sdgs-item .img .flex span {
        font-size: 20px;
    }
    .sdgs-item .img .flex .num {
        font-size: 24px;
    }
    
    .sdgs-item .txt p{
        font-size: 100%;
    }
    
	#sdgs .bg-gry {
        padding-bottom: 40px;
    }
}


/******************************
products
******************************/
#products{
	padding-bottom: 100px;
}
#products .ttl-bg-bl img{
	max-width: 158px;
}
#products h3{
	text-align: center;
	margin: 80px 0;
}
#products h3 img{
	max-width: 806px;
}

table.detail,
table.detail + .img{
	width: 50%;
}
table.detail + .img{
	padding-left: 40px;
}

table.detail{
	border: solid 1px #A5A5A5;
}
table.detail th,
table.detail td{
	padding: 15px;
	border: solid 1px #A5A5A5;
}
table.detail tr:nth-of-type(even){
	background: #F2F2F2;
}
table.detail th{
	background: #D9D9D9;
	text-align: left;
}

.products-point{
	margin: 60px 0;
}
.products-point .item{
	flex-wrap: nowrap;
	align-items: center;
	border-bottom: solid 1px #A5A5A5;
}
.products-point .item dt{
	font-weight: bold;
	width: 20%;
	margin: 20px 0;
	padding: 10px 20px 10px 0;
}
.products-point .item dd{
	width: 80%;
	margin: 20px 0;
	padding: 10px 0 10px 20px;
	border-left: solid 1px #A5A5A5;
}

#products .memo ul{
	padding-left: 1.5em;
}
#products .memo ul li::marker {
	color: #A5A5A5;
}


/*==== mobile スマフォ横〜用css ===*/
@media screen and (max-width: 896px){
	#products h3 {
		margin: 80px 0 30px;
	}
	table.detail, table.detail + .img {
		width: 100%;
	}
	table.detail{
		order: 2;
	}
	table.detail + .img{
		order: 1;
		text-align: center;
	}
	table.detail + .img img{
		max-width: 288px;
	}
	.products-point {
		margin: 30px 0;
	}
}
/*==== mobile スマフォ縦用css ===*/
@media screen and (max-width: 480px){
	#products {
		padding-bottom: 50px;
	}
	#products .ttl-bg-bl img {
		max-width: 114px;
	}
	#products h3 {
        margin: 30px 0;
    }
	
	table.detail th, table.detail td{
		padding: 10px;
		font-size: 12px;
	}
	
	.products-point .item {
		flex-wrap: wrap;
	}
	.products-point .item dt {
		width: 100%;
		margin: 20px 0 0;
		padding: 0;
	}
	.products-point .item dd {
		width: 100%;
		margin: 20px 0;
		padding: 0;
		border-left: none;
	}
}


/******************************
afterservice
******************************/
#afterservice{
	padding-bottom: 100px;
	margin-bottom: 80px;
}
#afterservice .ttl-bg-bl{
	margin-bottom: 80px;
}
#afterservice .ttl-bg-bl img{
	max-width: 309px;
}
#afterservice .col-2{
	column-gap:50px;
	row-gap: 30px;
	flex-wrap: nowrap;
}
#afterservice .col-2 .item{
	width: 50%;
}
#afterservice .col-2 p{
	line-height: 1.8;
}
#afterservice .col-2 .ttl{
	text-align: center;
	font-weight: bold;
	font-size: var(--fontsize_03);
	color: var(--color_01);
}

/*==== mobile スマフォ縦用css ===*/
@media screen and (max-width: 480px){
	#afterservice {
		padding-bottom: 30px;
		margin-bottom: 50px;
	}
	#afterservice .ttl-bg-bl {
		margin-bottom: 30px;
	}
	#afterservice .ttl-bg-bl img {
		max-width: 230px;
	}
	#afterservice .col-2 {
		flex-wrap: wrap;
	}
	#afterservice .col-2 .item{
		width: 100%;
	}
}


/******************************
スクロールアニメーション
******************************/
.fade-in-element {
    opacity: 0;
	transform: translateY(20px);
    transition: opacity .5s ease-in-out, transform .6s ease-in-out;
}

.fade-in {
    opacity: 1;
	transform: translateY(0);
}