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


/*====================================
       ヘッダー画像
======================================*/


/*----- ヘッダー画像 -----*/

.h-img {
  position: relative;
  min-height: 100vh;
  color: var(--color-text-white);
  overflow: hidden;
}

/* 背景画像 */
.h-img::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../img/header/PC-header-img.jpg"); /* WebP対応していないブラウザの場合 */
  background-image: url("../img/header/PC-header-img.webp"); /* WebP対応しているブラウザの場合 */
  background-size: cover;
  background-position: center bottom;
  z-index: -2;
}


/*----- ヘッダーテキスト -----*/

.h-title{
	position: absolute;
	top: 40%;
	left: 49%;
	transform: translate(-50%,-50%);
	width: 90%;
}

.h-title .catch-copy,
.h-title .sub-copy
{
	text-align: center;
	display: block;
}

.h-title .catch-copy{
	letter-spacing: var(--l-spacing-xl);
	line-height: var(--lh-md);
	font-size: 4.8rem;
	margin-bottom: 20px;
	font-weight: var(--fw-500);
}

.h-title .sub-copy{
	letter-spacing: var(--l-spacing-md);
	line-height: var(--lh-lg);
	font-size: 2rem;
	font-weight: var(--fw-500);
}



/*======================================*/
/*======================================*/
/* スマホ・タブレット対応　レスポンシブ */

@media (max-width: 767px){
	
/*----- ヘッダーテキスト -----*/

.h-title .catch-copy{
	letter-spacing: var(--l-spacing-xl);
	line-height: var(--lh-md);
	font-size: 2.5rem;
}

.h-title .sub-copy{
	letter-spacing: var(--l-spacing-xs);
	line-height: var(--lh-lg);
	font-size: 1.3rem;
	font-weight: var(--fw-500);
}
}





/*====================================
       アクトラストゼロについて
======================================*/


/*----- ロゴ/テキスト/詳細文章 -----*/

.actrust-zero-about{
	width: 100%;
	margin-bottom: 30px;
}

.actrust-zero-about .about-logo{
	width: 100%;
	max-width: 300px;
}

.actrust-zero-about .about-heading{
	font-size: 2.5rem;
	line-height: var(--lh-sm);
	color: var(--color-text-darkBlue);
	letter-spacing: var(--l-spacing-sm);
}

.about-detail{
	font-size: 1.5rem;
	line-height: var(--lh-2xl);
}


/*----- イメージ画像 -----*/

.actrust-zero-about-img img{
	border-radius: var(--br-xs);
	width: 90%;
	margin: 0 auto;
	margin-bottom: 20px;
}



/*======================================*/
/*======================================*/
/* スマホ・タブレット対応　レスポンシブ */

@media (max-width: 767px){
	
.actrust-zero-about{
	width: 100%;
	margin-bottom: 10px;
}

.actrust-zero-about .about-logo{
	max-width: 230px;
	margin-bottom: 30px;
}
	
.actrust-zero-about .about-heading{
	font-size: 2rem;
	padding-left: 0;
}

.about-detail{
	font-size: 1.3rem;
	line-height: var(--lh-xl);
}
	
/*----- イメージ画像 -----*/

.actrust-zero-about-img img{
	width: 100%;
}
}




/*====================================
       SPOBYについて
======================================*/

/*----- SPOBYについて/ アプリダウンロードアイコン -----*/

.spoby{
	padding: 60px 20px 0;
}

/* 環境とデータを印象付ける背景画像 */
.spoby-bg{
	background-image: url("../img/about/SPOBY_bg.webp"); /* WebP対応していないブラウザの場合 */
	background-image: url("../img/about/SPOBY_bg.jpg"); /* WebP対応しているブラウザの場合 */
	background-repeat: no-repeat;
	background-size: cover;
  	background-position: center bottom;
	width: 100%;
}

.spoby-about{
	width: 100%;
	max-width: 600px;
}

.spoby-about .spoby-about-logo{
	width: 100%;
	max-width: 300px;
	margin-bottom: 40px;
}

.spoby-about .spoby-about-heading{
	font-size: 2.5rem;
	line-height: var(--lh-md);
	color: var(--color-text-white);
	letter-spacing: var(--l-spacing-sm);
	margin-bottom: 20px;
}

.spoby-about .spoby-about-detail{
	font-size: 1.5rem;
	line-height: var(--lh-2xl);
	color: var(--color-text-white);
	letter-spacing: var(--l-spacing-sm);
}


/*----- スポビーアプリ / 男性・女性従業員 -----*/
.spoby-about-img{
	position: relative;
}

/* 男性画像 */
.spoby-about-img img:nth-child(1){
	position: relative;
	top: -100px;
	left: 80px;
	width: 25%;
}

/* アプリ画面画像 */
.spoby-about-img img:nth-child(2){
	position: relative;
	z-index: 10;
	width: 45%;
}

/* 女性画像 */
.spoby-about-img img:nth-child(3){
	position: relative;
	top: 70px;
	right: 70px;
	width: 25%;
}


/*----- ストアアイコン -----*/

.spoby-about .store{
	margin-top: 30px;
}

.spoby-about .store .store-icon:first-child{
	margin-right: 20px;
}

.spoby-about .store .store-icon img{
	width: 100%;
	max-width: 170px;
}



/*======================================*/
/*======================================*/
/* スマホ・タブレット対応　レスポンシブ */

@media (max-width: 1200px){

/*----- SPOBYについて/ アプリダウンロードアイコン -----*/

.spoby{
	padding: 80px 15px;
}
	
.spoby-about{
	max-width: 100%;
}

.spoby-about .spoby-about-logo{
	max-width: 150px;
	margin-bottom: 20px;
}
	
.spoby-about .spoby-about-heading{
	font-size: 2.5rem;
	margin-bottom: 20px;
	line-height: var(--lh-sm);
}

.spoby-about .spoby-about-detail{
	font-size: 1.5rem;
	line-height: var(--lh-xl);
}
	
	
/*----- スポビーアプリ / 男性・女性従業員 -----*/

/* 男性画像 */
.spoby-about-img img:nth-child(1){
	left: 50px;
	width: 23%;
}

/* アプリ画面画像 */
.spoby-about-img img:nth-child(2){
	width: 100%;
	max-width: 35%;
}

/* 女性画像 */
.spoby-about-img img:nth-child(3){
	right: 50px;
	width: 23%;
}
	
/*----- ストアアイコン -----*/

.spoby-about .store .store-icon img{
	width: 100%;
	max-width: 130px;
}
}




@media (max-width: 767px){

	
	
/*----- SPOBYについて/ アプリダウンロードアイコン -----*/	
	
.spoby{
	padding: 50px 15px;
}

.spoby-about .spoby-about-heading{
	font-size: 1.7rem;
	margin-bottom: 20px;
	line-height: var(--lh-sm);
}

.spoby-about .spoby-about-detail{
	font-size: 1.2rem;
	line-height: var(--lh-xl);
}
	
	
/*----- スポビーアプリ / 男性・女性従業員 -----*/

/* 男性画像 */
.spoby-about-img img:nth-child(1){
	left: 50px;
	width: 25%;
}

/* アプリ画面画像 */
.spoby-about-img img:nth-child(2){
	width: 100%;
	max-width: 50%;
}

/* 女性画像 */
.spoby-about-img img:nth-child(3){
	right: 50px;
	width: 25%;
}
	
}


/*====================================
       公式採択アプリ
======================================*/

.official{
	gap: 30px;
}

.official-reason{
	width: 100%;
	max-width: 40%;
}

.official-reason .official-reason-item{
	font-size: 2rem;
	color: var(--color-text-darkGray);
	margin-bottom: 20px;
	display: inline-block;
}

.official-reason .official-reason-heading{
	font-size: 2.5rem;
	line-height: var(--lh-sm);
	letter-spacing: var(--l-spacing-sm);
	color: var(--color-text-darkBlue);
	margin-bottom: 20px;
}

.official-reason .official-reason-detail{
	font-size: 1.5rem;
	line-height: var(--lh-2xl);
}

.official-reason-img{
	max-width: 60%;
}

.official-reason-img img{
	width: 100%;
}



/*======================================*/
/*======================================*/
/* スマホ・タブレット対応　レスポンシブ */

@media (max-width: 1200px){
	
.official{
	gap: 20px;
}

.official-reason{
	max-width: 100%;
}
	
.official-reason-img{
	max-width: 90%;
	margin-bottom: 20px;
}
}


@media (max-width: 767px){
	
.official-reason .official-reason-item{
	font-size: 1.5rem;
	margin-bottom: 10px;
}

.official-reason .official-reason-heading{
	font-size: 2rem;
	margin-bottom: 10px;
}

.official-reason .official-reason-detail{
	font-size: 1.3rem;
	line-height: var(--lh-xl);
}
	
.official-reason-img{
	max-width: 100%;
	margin-bottom: 20px;
}
	
}




/*====================================
       なぜ「人の行動」を測るのか
======================================*/

.behavior{
	margin: 130px auto;
	gap: 20px;
}

.behavior-reason{
	width: 100%;
	max-width: 35%;
}

.behavior-reason .behavior-reason-item{
	font-size: 2rem;
	color: var(--color-text-darkGray);
	margin-bottom: 20px;
	display: inline-block;
}

.behavior-reason .behavior-reason-heading{
	font-size: 2.5rem;
	line-height: var(--lh-sm);
	color: var(--color-text-darkBlue);
	margin-bottom: 20px;
	letter-spacing: var(--l-spacing-sm);
}

.behavior-reason .behavior-reason-detail{
	font-size: 1.5rem;
	line-height: var(--lh-2xl);
}

.behavior-reason-img{
	max-width: 60%;
}

.behavior-reason-img img{
	border-radius: var(--br-xs);
	width: 100%;
	box-shadow: var(--box-shadow-darkBlue);
}



/*======================================*/
/*======================================*/
/* スマホ・タブレット対応　レスポンシブ */

@media (max-width: 1200px){
	
.behavior{
	margin: 80px auto;
}
	
	
.behavior-reason{
	max-width: 100%;
}
	
.behavior-reason-img{
	max-width: 100%;
}
}

@media (max-width: 767px){

.behavior{
	margin: 50px auto;
}
	
.behavior-reason .behavior-reason-item{
	font-size: 1.3rem;
	margin-bottom: 10px;
}

.behavior-reason .behavior-reason-heading{
	font-size: 1.8rem;
	margin-bottom: 10px;
	letter-spacing: var(--l-spacing-xs);
}

.behavior-reason .behavior-reason-detail{
	font-size: 1.3rem;
	line-height: var(--lh-xl);
}
}



/*==============================================
 　　　スコープ3を左右する“従業員行動”という戦略レバー
================================================*/

.scope3{
	background: var(--bg-whiteGray);
	padding: 50px;
	border-radius: var(--br-sm);
	gap: 30px;
}

.scope3-lever{
	width: 100%;
	max-width: 45%;
}

.scope3-lever .scope3-lever-item{
	font-size: 2rem;
	color: var(--color-text-darkGray);
	margin-bottom: 20px;
	display: inline-block;
}

.scope3-lever .scope3-lever-heading{
	font-size: 2.5rem;
	line-height: var(--lh-sm);
	color: var(--color-text-darkBlue);
	margin-bottom: 20px;
	letter-spacing: var(--l-spacing-sm);
}

.scope3-lever .scope3-lever-detail{
	font-size: 1.5rem;
	line-height: var(--lh-2xl);
}


.scope3-lever-img{
	max-width: 55%;
}

.scope3-lever-img img{
	border-radius: var(--br-sm);
	width: 100%;
}



/*======================================*/
/*======================================*/
/* スマホ・タブレット対応　レスポンシブ */

@media (max-width: 1200px){
	
.scope3{
	background: var(--bg-whiteGray);
	padding: 50px;
	border-radius: var(--br-sm);
	gap: 30px;
}

.scope3-lever{
	max-width: 100%;
}

.scope3-lever-img{
	max-width: 80%;
}
}


@media (max-width: 767px){

	
.scope3{
	padding: 10px;
}

.scope3-lever{
	max-width: 100%;
}
	
.scope3-lever .scope3-lever-heading{
	font-size: 1.8rem;
	margin-bottom: 10px;
}

.scope3-lever .scope3-lever-detail{
	font-size: 1.3rem;
	line-height: var(--lh-xl);
}

.scope3-lever-img{
	max-width: 100%;
}
	
}




/*=============================
 　　　期待する効果について
===============================*/


.benefit-about{
	width: 100%;
	max-width: 100%;
}


/*----- 詳細情報 -----*/

.benefit-about .benefit-about-heading{
	font-size: 2.5rem;
	line-height: var(--lh-sm);
	color: var(--color-text-darkBlue);
	margin-bottom: 20px;
	letter-spacing: var(--l-spacing-sm);
}

.benefit-about .benefit-about-detail{
	font-size: 1.5rem;
	line-height: var(--lh-2xl);
	margin-bottom: 20px;
}


/*----- 期待する効果4つ -----*/

.benefit-about-items{
	max-width: 300px;
	width: 100%;
	margin-bottom: 30px;
}

.benefit-about-items .benefit-about-item{
	position: relative;
}

.benefit-about-items .benefit-about-item::before{
	content: "";
	background-image: -webkit-linear-gradient(0deg, #fff, transparent 60%);
	background-image: linear-gradient(0deg, #00000099, transparent 40%);
	height: 100%;
	width: 100%;
	display: block;
	position: absolute;
	border-radius: var(--br-xs);
	z-index: 1;
}

.benefit-about-items .benefit-about-item img{
	border-radius: var(--br-xs);
	width: 100%;
	box-shadow: var(--box-shadow-darkBlue);
	z-index: -1;
}

.benefit-about-items .benefit-about-item h4{
	position: absolute;
	bottom: 0;
	font-size: 1.8rem;
	padding: 10px;
	line-height: var(--lh-sm);
	letter-spacing: var(--l-spacing-sm);
	color: var(--color-text-white);
	z-index: 2;
}

.benefit-about-items .benefit-about-item-details p{
	line-height: var(--lh-md);
	margin-top: 10px;
	font-size: 1.5rem;
	letter-spacing: var(--l-spacing-xs);
}



/*======================================*/
/*======================================*/
/* スマホ・タブレット対応　レスポンシブ */

@media (max-width: 767px){

	
.benefit-about{
	margin-bottom: 20px;
}

/*----- 詳細情報 -----*/

.benefit-about .benefit-about-heading{
	font-size: 2.1rem;
	margin-bottom: 10px;
}

.benefit-about .benefit-about-detail{
	font-size: 1.3rem;
	line-height: var(--lh-xl);
	margin-bottom: 10px;
}
	
	
/*----- 期待する効果4つ -----*/
	
.benefit-about-items{
	max-width: 400px;
	margin-bottom: 50px;
}
	
.benefit-about-items .benefit-about-item-details p{
	line-height: var(--lh-md);
	margin-top: 15px;
	font-size: 1.5rem;
}
	
}


/*====================================
       パートナー
======================================*/


/*----- ロゴ/テキスト/詳細文章 -----*/

.partner-about{
	width: 100%;
	max-width: 100%;
}

.partner-about .partner-logo{
	width: 100%;
	max-width: 250px;
	margin: 20px auto;
}



/*======================================*/
/*======================================*/
/* スマホ・タブレット対応　レスポンシブ */

@media (max-width: 767px){

.partner-about .partner-logo{
	max-width: 200px;
}	
}





/*====================================
       　　　フォーム
======================================*/


.form{
	background: var(--bg-white);
	padding-top: 30px;
}

.form iframe{
	height: 1100px;
	max-width: 800px;
	width: 100%; 
	display: block;
	margin: 0 auto;
	background: var(--bg-whiteGray);
	border: #fff;
}