@charset "UTF-8";
/*
	BASE
*******************************/

* {
  font-family: "zen-kaku-gothic-new", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-feature-settings: "palt";
/*  line-height: 1; */
  font-weight: 500;
}

.font_en {
  font-family: "sofia-pro", sans-serif;
  font-weight: 500;
  font-style: normal;
}

:root {
	--color_text: #000000;
	--color_text2: #999999;
	--color_text3: #555555;
	--color_blue: #024287;
	--color_job: #F8B73B;
	--color_white: #FFFFFF;
	--color_green: #F2F5DE;
	--color_beige: #FFFBF2;
	--color_btn: #9CCCC6;
	--x: 565px;
	--y: 565px;
	--x2: 282.5px;
	--y2: 1em;
	--bdrds: 50%;
	--chgcolor:#000000;
	--fontscale: 1;
	--x3: calc(165px + 1em);
	--x4: 50%;
	--x5: 0px;
	--brightness:1;
}

@media screen and (max-width: 1024px) {
	:root {
		--x: 440px;
		--y: 440px;
		--x2: 220px;
	}
}
@media screen and (max-width: 768px) {
	:root {
		--x: 330px;
		--y: 330px;
		--x2: 165px;
	}
}

html {
	font-size:62.5%;
	line-height:1;
	body {
		font-size:1.6rem;
		background: var(--color_beige);
		&.menuopen {
			overflow: hidden;
		}
		img, * img {
			max-width: 100%;
			height: auto;
			-webkit-backface-visibility: hidden;
			backface-visibility: hidden;
			vertical-align:bottom;
			line-height:0;
			outline:none;
			border:none;
		}
/*		p,span,th,td,dt,dd,li,h1,h2,h3,h4,h5,h6,label { color:var(--color_text);} */
		a {
			color:var(--color_text);
			text-decoration:none;
			outline:none;
			border:none;
			&:hover {
				text-decoration:none;
			}
		}
		area {
			border:none;
			outline:none;
		}
		main {
			overflow: clip;
		}
	}
}

/*
	CONTENTS
*******************************/

.wrap {
	position: relative;
	.contents {
		width: calc(100% - 40px);
		max-width: 1170px;
		margin:0 auto;
		&.wide {
			max-width: 1760px;
		}
		p {
			font-weight: 500;
			letter-spacing: .01em;
			line-height: 2;
		}
	}
}

.ttl_h2 {
	font-size: 2.2rem;
	line-height: 1.3;
	margin-bottom: 3em;
	.font_en {
		font-size: 9.2rem;
		color:inherit;
		display: grid;
	}
}

.btn_more {
	font-size: 2.0rem;
	width: 4.5em;
	display: grid;
	grid-template-columns: 1fr .8em;
	align-items: center;
	padding-bottom: .5em;
	border-bottom: 1px solid var(--color_text);
}

#bottom_menu {
	.wrap {
		padding-bottom: 200px;
		.contents {
			h2 {
				font-size:2.2rem;
				display: grid;
				grid-row-gap: 1em;
				margin-bottom: 4em;
				.font_en {
					font-size: 9.2rem;
				}
			}
			ul {
				li {
					border-bottom:1px solid var(--color_text);
					&:first-child {
						border-top:1px solid var(--color_text);
					}
					a {
						font-size: 2.2rem;
						line-height: 1.5;
						height: 6em;
						display: grid;
						grid-template-columns: 1.5em auto 1fr;
						grid-column-gap: 1.5em;
						align-items: center;
						.font_en {
							font-size: 1.5rem;
							margin-left: 1em;
						}
					}
				}
			}
		}
	}
}


/*
	PAGE TITLE
*******************************/

#page_ttl {
	&.subpage {
		.wrap {
			padding-top: 240px;
			.contents {
				max-width: 1760px;
				.ttl {
					max-width: 1560px;
					margin:0 auto 75px;
					display: grid;
					grid-template-columns: repeat(2,auto);
					grid-column-gap: 50px;
					justify-content: space-between;
					align-items: end;
					h1 {
						font-size: 4.2rem;
						line-height: 1.5;
						display: grid;
						grid-row-gap: .2em;
						.font_en {
							font-size: 2.0rem;
							color:var(--color_blue);
						}
					}
					p {
						font-size: 1.5rem;
						line-height: 1.5;
						color:var(--color_text2);
					}
				}
				.img {
					img {
						display: block;
						border-radius: 30px;
					}
				}
			}
		}
	}
	&.subpage ,&.mv_circle ,&.interview {
		.wrap {
			.contents {
				.pnav {
					font-size: 1.6rem;
					max-width: 1560px;
					margin:0 auto;
					padding-top: 1em;
					ul {
						display: flex;
						flex-wrap: wrap;
						li {
							&:last-child {
								color:var(--color_text2);
							}
							line-height: 1.5;
							a {
								color:var(--color_text);
							}
							&:not(:first-child) {
								display: grid;
								grid-template-columns: 2.5em 1fr;
								align-items: center;
								&::before {
									content:'';
									border-bottom:1px solid var(--color_text2);
									margin:0 .66em;
								}
							}
						}
					}
				}
			}
		}
	}
	&.mv_circle {
		.wrap {
			position: relative;
			overflow: hidden;
			margin-bottom: 80px;
			&:first-child {
				&::before {
					font-family: "sofia-pro", sans-serif;
					font-weight: 500;
					line-height: 1;
					white-space: nowrap;
					position: absolute;
					z-index: -1;
					left: 50%;
					top:45%;
					transform: translate(-50%,-50%);
				}
			}
			.contents {
				position: relative;
				z-index: 1;
				.img {
					img {
						display: block;
						width: 80%;
						max-width: 920px;
						margin:0 auto;
					}
				}
				.ttl {
					width: 100%;
					display: grid;
					align-items: end;
					justify-content: space-between;
					position: absolute;
					z-index: 2;
					left: 0;
					bottom:20px;
					h1 {
						font-size: 4.0rem;
						line-height: 1.5;
						display: grid;
						grid-row-gap: .5em;
						span {
							font-size: 2.0rem;
							color:var(--color_blue);
						}
					}
				}
			}
			&.ttl_inner_wrap {
				background-color: var(--color_blue);
				padding:90px 0;
				margin: 80px 0 0;
			}
		}
		/**TOP MESSAGE**/
		&.topmessage {
			.wrap {
				&:first-child {
					&::before {
						content:'TOP MESSAGE';
						font-size: min(22.5vw,29.8rem);
					}
				}
				.contents {
					.ttl {
						grid-template-columns: repeat(2,auto);
						bottom:50px;
						.sign {
							font-size: 3.2rem;
							line-height: 1;
							display: grid;
							grid-row-gap: .5em;
							justify-items: end;
							span {
								font-size: 1.6rem;
							}
						}
					}
				}
			}
		}
		/**POJECT**/
		&.project {
			.wrap {
				&:first-child {
					&::before {
						content:'PROJECT STORY';
						font-size: min(20vw,26.7rem);
					}
				}
				.contents {
					.ttl {
						.sub {
							font-size: 1.6rem;
							line-height: 1;
							margin-top: 2em;
						}
					}
				}
				&.ttl_inner_wrap {
					.contents {
						h2 {
							font-size: 1.4rem;
							color:#FFFFFF;
							display: grid;
							grid-template-columns: 1fr 5em;
							grid-row-gap: .33em;
							line-height: 1.5;
							letter-spacing: .01em;
							margin-bottom: 2.5em;
							.font_en {
								font-size: 3.0rem;
								color:inherit;
								letter-spacing: .02em;
							}
							&::before {
								content:'';
								border-top: 1px solid #FFFFFF;
								grid-area: 1/2/2/3;
								transform: translateY(1em);
							}
						}
						p {
							color:#FFFFFF;
						}
					}
				}
			}
		}
		/**INTERVIEWS**/
		&.interview {
			.wrap {
				&:first-child {
					&::before {
						content:'INTERVIEW';
						font-size: min(30.75vw,40.9rem);
					}
				}
				.contents {
					.ttl {
						grid-template-columns: repeat(2,auto);
						h1 {
							order:1;
							text-align: right;
							padding-bottom: .5em;
							display: block;
							span {
								font:inherit;
								color:inherit;
								display: inline-block;
							}
						}
						.memberinfo {
							dl {
								display: grid;
								justify-items: start;
								grid-row-gap: .6em;
								font-size: 4.6rem;
								margin-bottom: .5em;
								dt {
									line-height: 1;
									font-weight: 400;
								}
								dd {
									font-size: 1.5rem;
									font-weight: 500;
									color:var(--color_white);
									background-color: var(--color_job);
									height: 2em;
									padding:0 1em;
									display: grid;
									align-items: center;
									justify-content: center;
									border-radius: 5px;
								}
							}
							ul {
								font-size: 1.6rem;
								display: grid;
								grid-row-gap: .2em;
								li {
									line-height: 1.5;
								}
							}
						}
					}
				}
				&.ttl_inner_wrap {
					.contents {
						ul {
							display: grid;
							grid-template-columns: repeat(3,1fr);
							grid-column-gap: 30px;
							.step {
								p {
									text-indent: -3.8em;
									padding-left: 3.8em;
								}
							}
						}
						h2 {
							font-size: 1.4rem;
							color:#FFFFFF;
							display: grid;
							grid-template-columns: 1fr 5em;
							grid-row-gap: .33em;
							line-height: 1.5;
							letter-spacing: .01em;
							margin-bottom: 2em;
							grid-row-gap: .66em;
							grid-column-gap: .5em;
							.font_en {
								color:inherit;
								&:nth-child(2) {
									font-size: 3.0rem;
									letter-spacing: .02em;
									line-height: 1.1;
								}
								&.font_num {
									font-size: 1.5rem;
									border-top:1px solid #FFFFFF;
									grid-area: 1/2/2/3;
									font-weight: 400;
									text-align: right;
									line-height: 2;
									transform: translateY(1em);
								}
							}
						}
						p {
							color:#FFFFFF;
							&:not(:last-child) {
								margin-bottom: .5em;
							}
						}
					}
				}
			}
		}
	}
}

/**INTERVIEW SCHEDULE**/
#one_day_schedule {
	.wrap {
		background-color: var(--color_blue);
		padding:90px 0;
		.contents {
			h2 {
				font-size: 1.4rem;
				color:#FFFFFF;
				display: grid;
				grid-template-columns: 1fr 5em;
				grid-row-gap: .33em;
				line-height: 1.5;
				letter-spacing: .01em;
				margin-bottom: 2em;
				grid-row-gap: .66em;
				grid-column-gap: 1em;
				.font_en {
					color:inherit;
					&:nth-child(2) {
						font-size: 3.0rem;
						letter-spacing: .02em;
						line-height: 1.1;
					}
					&.font_num {
						font-size: 1.5rem;
						border-top:1px solid #FFFFFF;
						grid-area: 1/2/2/3;
						font-weight: 400;
						text-align: right;
						line-height: 2;
						transform: translateY(.66em);
					}
				}
			}
			ul {
				li {
					display: grid;
					grid-template-columns: 5.5em 1fr;
					font-size: 1.6rem;
					line-height: 1.5;
					color:#FFFFFF;
					padding:1em 0;
					span {
						font-size: 1.7rem;
						color:inherit;
					}
					background-size: 4px 1px;
					background-image: linear-gradient(to right, #6089B4 2px, transparent 2px);
					background-repeat: repeat-x;
					background-position: left bottom;
				}
			}
		}
	}
}



@media (hover:hover) {

	.btn_more {
		img {
			transition: .3s;
		}
		&:hover {
			img {
				transform: translateX(5px);
			}
		}
	}

	#bottom_menu {
		.wrap {
			.contents {
				ul {
					li {
						a {
							transition: .3s;
							img {
								transition: .3s;
							}
							&:hover {
								opacity: .66;
								img {
									transform: translateX(5px);
								}
							}
						}
					}
				}
			}
		}
	}

}

@media screen and (max-width:1200px){


	#bottom_menu {
		.wrap {
			.contents {
				h2 {
					.font_en {
						font-size: 7.2rem;
					}
				}
			}
		}
	}

	/*
		PAGE TITLE
	*******************************/

	#page_ttl {
		&.subpage {
			.wrap {
				.contents {
					.ttl {
						h1 {
							font-size: 3.8rem;
						}
					}
				}
			}
		}
		&.mv_circle {
			.wrap {
				.contents {
					.img {
						img {
							width: 60%;
						}
					}
					.ttl {
						h1 {
							font-size: min(3.6vw,3.6rem);
							span {
								font-size: min(1.8vw,1.8rem);
							}
						}
					}
				}
			}
			/**TOP MESSAGE**/
			&.topmessage {
				.wrap {
					&:first-child {
						&::before {
							font-size: min(19vw,29.8rem);
						}
					}
					.contents {
						.ttl {
							bottom:30px;
							.sign {
								font-size: min(3.0vw,3.0rem);
								span {
									font-size: min(1.6vw,1.6rem);
								}
							}
						}
					}
				}
			}
			/**POJECT**/
			&.project {
				.wrap {
					&:first-child {
						&::before {
							font-size: min(17vw,26.7rem);
						}
					}
					.contents {
						.ttl {
							.sub {
								margin-top: 1.5em;
								font-size: min(1.8vw,1.8rem);
							}
						}
					}
				}
			}
			/**INTERVIEWS**/
			&.interview {
				.wrap {
					&:first-child {
						&::before {
							font-size: min(25vw,40.9rem);
						}
					}
					.contents {
						.ttl {
							h1 {
								font-size: min(3.2vw,3.2rem);
								padding-bottom: 0;
							}
							.memberinfo {
								dl {
									font-size: min(4vw,4rem);
									dd {
										font-size: min(1.6vw,1.6rem);
									}
								}
								ul {
									font-size: min(1.8vw,1.8rem);
								}
							}
						}
					}
				}
			}
		}
	}

}

@media screen and (max-width:1024px){

	.ttl_h2 {
		font-size: 2.0rem;
		.font_en {
			font-size: 7.2rem;
		}
	}

	.btn_more {
		font-size: 1.8rem;
	}

	#bottom_menu {
		.wrap {
			padding-bottom: 150px;
			.contents {
				h2 {
					.font_en {
						font-size: 5.2rem;
					}
				}
				ul {
					li {
						a {
							font-size: 2.0rem;
						}
					}
				}
			}
		}
	}
	#page_ttl {
		&.subpage {
			.wrap {
				padding-top: 180px;
				.contents {
					.ttl {
						margin-bottom: 50px;
						h1 {
							font-size: 3.2rem;
							.font_en {
								font-size: 1.8rem;
							}
						}
					}
				}
			}
		}
		&.mv_circle {
			/**INTERVIEWS**/
			&.interview {
				.wrap {
					&.ttl_inner_wrap {
						.contents {
							h2 {
								grid-template-columns: 1fr 3em;
							}
						}
					}
				}
			}
		}
	}

}

@media screen and (max-width:768px){


	#bottom_menu {
		.wrap {
			.contents {
				h2 {
					font-size:1.4rem;
					margin-bottom: 3em;
					.font_en {
						font-size: 3.2rem;
					}
				}
				ul {
					li {
						a {
							font-size: 1.8rem;
							height: 5em;
							grid-template-columns: 1em 1fr;
							align-content: center;
							grid-column-gap: 1em;
							align-items: center;
							grid-row-gap: .2em;
							.font_en {
								font-size: 1.4rem;
								margin-left: 0;
								grid-area: 1/2/2/3;
							}
							img {
								grid-area: 1/1/3/2;
							}
						}
					}
				}
			}
		}
	}

	/*
		PAGE TITLE
	*******************************/

	#page_ttl {
		&.subpage {
			.wrap {
				padding-top: 100px;
				.contents {
					.ttl {
						grid-template-columns: 1fr;
						grid-row-gap: .2em;
						h1 {
							font-size: 2.4rem;
							grid-row-gap: .5em;
						}
						p {
							font-size: 1.4rem;
						}
					}
					.img {
						img {
							border-radius: 20px;
						}
					}
				}
			}
		}
		&.subpage ,&.mv_circle ,&.interview {
			.wrap {
				.contents {
					.pnav {
						font-size: 1.3rem;
						padding:1.5em 10px 0;
						ul {
							li {
								&:not(:first-child) {
									grid-template-columns: 3em 1fr;
								}
							}
						}
					}
				}
			}
		}
		&.mv_circle {
			.wrap {
				overflow: hidden;
				.contents {
					display: grid;
					padding-top: 80px;
					.img {
						width: calc(100vw + 30px);
						margin:0 -35px;
						img {
							width: 100%;
							max-width: 440px;
							min-width: 405px;
							margin:0 auto;
						}
					}
					.ttl {
						position: relative;
						bottom:auto;
						order:1;
						margin-top: -40px;
						h1 {
							font-size: 2.4rem;
							grid-row-gap: .66em;
							span {
								font-size: 1.8rem;
							}
						}
					}
					&:has(.pnav){
						display: block;
					}
				}
				&.ttl_inner_wrap {
					padding:60px 0;
				}
			}
			/**TOP MESSAGE**/
			&.topmessage {
				.wrap {
					&::before {
						font-size: 14.0rem;
					}
					.contents {
						.ttl {
							h1 {
								margin-right: -20px;
							}
							grid-template-columns: 1fr;
							grid-row-gap: 30px;
							bottom:0;
							.sign {
								font-size: 2.2rem;
								display: grid;
								grid-template-columns: repeat(2,auto);
								align-items: end;
								grid-column-gap: 1em;
								justify-content: start;
								span {
									font-size: 1.4rem;
								}
							}
						}
					}
				}
			}
			/**POJECT**/
			&.project {
				.wrap {
					&::before {
						font-size: 13.0rem;
					}
					.contents {
						.ttl {
							h1 {
								margin-right: -20px;
							}
							.sub {
								font-size: 1.5rem;
							}
						}
						&:has(.pnav) {
							padding-top: 0;
						}
					}
					&.ttl_inner_wrap {
						.contents {
							padding:0;
							h2 {
								grid-template-columns: 1fr 4em;
							}
						}
					}
				}
			}
			/**INTERVIEWS**/
			&.interview {
				.wrap {
					&:first-child {
						&::before {
							top:45%;
							font-size: 18.0rem;
						}
					}
					.contents {
						.ttl {
							grid-template-columns: 1fr;
							margin-top: -70px;
							grid-row-gap: 30px;
							h1 {
								order:unset;
								text-align: left;
								font-size: 2.4rem;
								margin-right: -20px;
							}
							.memberinfo {
								display: grid;
								grid-template-columns: auto 1fr;
								align-items: center;
								dl {
									grid-row-gap: .33em;
									font-size: 3.0rem;
									margin-bottom: 0;
									dd {
										font-size: 1.5rem;
									}
								}
								ul {
									font-size: 1.4rem;
									justify-self: end;
									align-content: end;
									text-align: right;
								}
							}
						}
						&:has(.pnav) {
							padding-top: 0;
						}
					}
					&.ttl_inner_wrap {
						.contents {
							padding:0;
							ul {
								grid-template-columns: 1fr;
								grid-row-gap: 50px;
							}
						}
					}
				}
			}
		}
	}

	.ttl_h2 {
		font-size: 1.8rem;
		.font_en {
			font-size: 4.4rem;
		}
	}

	.btn_more {
		font-size: 1.5rem;
	}



	/**INTERVIEW SCHEDULE**/
	#one_day_schedule {
		.wrap {
			padding:60px 0;
			.contents {
				h2 {
					grid-template-columns: 1fr 4em;
				}
				ul {
					li {
						grid-template-columns: 1fr;
						grid-row-gap: .5em;
					}
				}
			}
		}
	}

}

@media screen and (max-width:375px) {

	body {
		min-width: 375px;
	}

}


/****/

@media screen and (max-width:768px) {
    .pcOnly {
		display:none !important;
    }
}
@media screen and (max-width:1024px) {
    .pcOnly2 {
		display:none !important;
    }
}
@media screen and (max-width:1200px) {
    .pcOnly3 {
		display:none !important;
    }
}
@media screen and (min-width:1025px) {
    .tbOnly {
		display:none !important;
    }
}
@media screen and (min-width:1201px) {
    .tbOnly2 {
		display:none !important;
    }
}
@media screen and (min-width:769px) {
    .spOnly {
		display:none !important;
    }
}


/**
ABOUT US
**/

.sec_aboutus {
  .wrap {
    overflow: clip;
    .contents {
      .about_ttl {
        font-size: 3.2rem;
        color:var(--color_blue);
        line-height: 1.5;
        display: grid;
        grid-template-columns: 2.5em 1fr;
        grid-gap: .2em .66em;
        margin-bottom: 2em;
        &::before {
          content:'';
          border-top:1px solid var(--color_blue);
          grid-area: 2/1/3/2;
          transform: translateY(.8em);
        }
        .font_en {
          font-size: 1.8rem;
          color:inherit;
          grid-area: 1/1/2/3;
        }
      }
      .about_ttl2 {
        font-size: 2.6rem;
        line-height: 1.5;
        position: relative;
        text-align: center;
        color:var(--color_blue);
        padding-top: 1em;
        margin-bottom: 1.1em;
        z-index: 0;
        .font_en {
          white-space: nowrap;
          line-height: 1;
          font-size: 12rem;
          position: absolute;
          left: 50%;
          top:-.05em;
          z-index: -1;
          transform: translate(-50%,0%);
        }
      }
      .cont_list {
        display: grid;
        grid-template-columns: repeat(3,1fr);
        grid-column-gap: 2.5%;
        position: relative;
        z-index: 1;
        li {
          background-color: #FFFFFF;
          border-radius: 20px;
          padding:25px;
          text-align: center;
          display: grid;
          grid-template-rows: auto auto 1fr auto;
          .font_en {
            font-size: 1.6rem;
            width: 3.6em;
            height: 1.8em;
            display: grid;
            align-items: center;
            justify-content: center;
            border-radius: 5px;
          }
          h4 {
            font-size: 2.2rem;
            line-height: 1.5;
            color:var(--color_blue);
            padding:.66em 0 1em;
          }
          p {
            line-height: 1.5;
            color:var(--color_blue);
            margin-bottom: 1.5em;
          }
          img {
            display: block;
            border-radius: 10px;
          }
        }
      }
    }
  }

  &#vision {
    .wrap {
      padding:100px 0 150px;
      .contents {
        .contents_inner {
          display: grid;
          grid-template-columns: 25% 1fr;
          grid-column-gap: 5%;
          .ttl {
            h2 {
              font-size: 1.8rem;
              color:var(--color_blue);
              display: grid;
              grid-row-gap: 1em;
              margin-bottom: 6em;
              .font_en {
                font-size: 6.4rem;
                color:inherit;
              }
            }
            img {
              display: block;
              max-width: 200px;
              border-radius: 15px;
            }
          }
          .detail {
            h3 {
              font-size: 3.8rem;
              line-height: 1.5;
              margin-bottom: 1.5em;
            }
            .text {
              position: relative;
              p {
                line-height: 2.5;
                margin-bottom: 6em;
              }
              img {
                display: block;
                border-radius: 15px;
                position: absolute;
                &.img1 {
                  max-width: 174px;
                  position: relative;
                }
                &.img2 {
                  max-width: 170px;
                  right: 0;
                  top:0px;
                }
                &.img3 {
                  width: 220px;
                  right: 100px;
                  bottom:50px;
                }
              }
            }
          }
        }
      }
    }
  }

  &#issues {
    .wrap {
      padding:60px 0 150px;
      &.wrap_bg {
        background-color: var(--color_green);
        padding: 150px 0 0;
        & > img {
          margin-top: -1px;
          background-color: var(--color_beige);
        }
        .contents {
          .about_ttl2 {
            .font_en {
              color:var(--color_white);
            }
          }
          .cont_list {
            li {
              .font_en {
                background-color: var(--color_green);
              }
            }
          }
        }
      }
      .contents {
        .about_ttl2 {
          .font_en {
            color:var(--color_green);
          }
        }
        .cont_list {
          li {
            .font_en {
              background-color: var(--color_btn)
            }
          }
        }
      }
    }
  }

  &#business {
    .wrap {
      background-color: var(--color_btn);
      padding-bottom: 150px;
      &::before {
        content:'';
        display: block;
        aspect-ratio: 192/17;
        background-color: var(--color_beige);
        clip-path: polygon(0 0,100% 0,50% 100%);
        margin-top: -1px;
      }
      .contents {
        padding-top: 100px;
        .about_ttl2 {
          margin-bottom: 4em;
          .font_en {
            color:#B3E6E0;
          }
          &:has( + .purpose) {
            margin-bottom: 1.2em;
          }
        }
        .business {
          display: grid;
          grid-template-columns: repeat(3,1fr);
          grid-column-gap: 8%;
          grid-row-gap: 100px;
          margin-bottom: 90px;
          background: url(../../assets/img/about/aboutus/business.svg) no-repeat center center/76% auto;
          dt {
            grid-area: 2/1/3/4;
            font-size: 2.0rem;
            color:var(--color_blue);
            line-height: 1.5;
            text-align: center;
          }
          dd {
            position: relative;
            h4 {
              font-size: 1.8rem;
              line-height: 1.5;
              color:var(--color_white);
              width: 100%;
              display: grid;
              justify-items: center;
              grid-row-gap: .2em;
              position: absolute;
              z-index: 1;
              top:50%;
              left: 50%;
              transform: translate(-50%,-50%);
              .font_en {
                font-size: 1.2rem;
                color:#B3E6E0;
              }
            }
            img {
              display: block;
              border-radius: 15px;
              filter: brightness(.65);
            }
            &:nth-child(2),&:nth-child(4) {
              transform: translateY(80px);
            }
            &:nth-child(5),&:nth-child(7) {
              transform: translateY(-80px);
            }
          }
        }
      }
      .btn_business {
        font-size: 1.8rem;
        color: var(--color_blue);
        display: grid;
        grid-template-columns: 1fr 2.8em;
        align-items: center;
        grid-row-gap: .5em;
        padding-bottom: .8em;
        width: 16em;
        margin-left: auto;
        border-bottom: 1px solid var(--color_blue);
        margin-bottom: 5em;
        .font_en {
          font-size: 1.2rem;
          grid-area: 1/1/2/3;
          color:inherit;
        }
        .icon {
          display: grid;
          grid-template-columns: .8em;
          align-items: center;
          justify-content: center;
          height: 1.4em;
          background-color: var(--color_blue);
          border-radius: 5px;
        }
      }
      .note {
        background-color: #B3E6E0;
        border-radius: 20px;
        padding:40px 75px;
        margin-bottom: 120px;
        dt {
          color:var(--color_blue);
          font-size: 1.8rem;
          display: grid;
          grid-template-columns: 2em 1fr;
          align-items: center;
          grid-column-gap: .5em;
          margin-bottom: 1.5em;
        }
        dd {
          p {
            color:var(--color_blue);
          }
        }
      }
      .purpose {
        display: grid;
        grid-template-columns: repeat(3,1fr);
        grid-column-gap: 2.5%;
        li {
          position: relative;
          .font_en {
            font-size: 1.6rem;
            color:var(--color_white);
            display: grid;
            justify-items: center;
            grid-row-gap: .2em;
            position: absolute;
            z-index: 1;
            left: 50%;
            top:0;
            transform: translateX(-50%);
            &::before {
              content:'';
              width: 1px;
              height: 3em;
              background-color: var(--color_white);
            }
          }
          h4 {
            font-size: 2.0rem;
            line-height: 1.5;
            color:var(--color_white);
            width: 100%;
            text-align: center;
            position: absolute;
            z-index: 1;
            top:50%;
            left: 50%;
            transform: translate(-50%,-50%);
            padding:0 1em;
            span {
              font:inherit;
              color:inherit;
              display: inline-block;
            }
          }
          img {
            display: block;
            border-radius: 10px;
            filter: brightness(.65);
          }
        }
      }
      .core {
        dt {
          font-size: 2.2rem;
          color:var(--color_blue);
          display: grid;
          justify-items: center;
          grid-row-gap: 1.5em;
          margin-bottom: 1.33em;
          &::before {
            content:'';
            width: 1px;
            height: 2.5em;
            background-color: var(--color_blue);
          }
        }
        dd {
          ul {
            display: grid;
            grid-template-columns: repeat(3,1fr);
            grid-gap: 20px 2.8%;
            font-size: 2.0rem;
            li {
              background-color: var(--color_blue);
              color:var(--color_white);
              line-height: 1.3;
              height: 3.6em;
              border-radius: 15px;
              display: grid;
              align-items: center;
              justify-content: center;
              position: relative;
              &:not(:nth-child(3n)) {
                &::before {
                  content:'';
                  display: block;
                  width: 2em;
                  border-top: 1px solid var(--color_blue);
                  position: absolute;
                  z-index: 0;
                  right: -1.8em;
                  top:50%;
                }
              }
              &:nth-child(-n+3) {
                &::after {
                  content:'';
                  display: block;
                  height: 30px;
                  border-left: 1px solid var(--color_blue);
                  position: absolute;
                  z-index: 0;
                  bottom:-28px;
                  left: 50%;
                }
              }
            }
          }
        }
      }
    }
  }

  &#outcome {
    .wrap {
      padding-bottom: 300px;
      background: url(../../assets/img/about/aboutus/outcome_bg02.svg) no-repeat center bottom 250px/1980px auto;
      &::before {
        content:'';
        display: block;
        aspect-ratio: 192/17;
        background-color: var(--color_btn);
        clip-path: polygon(0 0,100% 0,50% 100%);
        margin-top: -1px;
      }
      .contents {
        padding-top: 250px;
        .contents_inner {
          display: grid;
          grid-template-columns: repeat(2,1fr);
          grid-gap: 30px;
          position: relative;
          margin-bottom: 150px;
          &::before {
            content:'';
            display: block;
            width: 63%;
            aspect-ratio: 1;
            background: url(../../assets/img/about/aboutus/outcome_bg01.svg) no-repeat center center/contain;
            position: absolute;
            left: 50%;
            top:50%;
            transform: translate(-50%,-50%);
            z-index: -1;
          }
          .detail {
            background-color: #FFFFFF;
            border-radius: 15px;
            h3 {
              font-size: 1.6rem;
              display: grid;
              margin-bottom: .33em;
              span {
                padding:1em 30px;
                color: var(--color_blue);
                &:first-child {
                  color:var(--color_text2);
                  border-bottom: 2px solid var(--color_beige);
                }
              }
            }
            p {
              font-size: 2.2rem;
              color: var(--color_blue);
              line-height: 1.5;
              padding:0 30px 30px;
            }
          }
          img {
            grid-area: 1/2/3/3;
            border-radius: 15px;
            align-self: stretch;
          }
        }
        h2 {
          font-size: 4.6rem;
          line-height: 1.5;
          display: grid;
          justify-items: center;
          align-content: center;
          grid-row-gap: .1em;
          color:var(--color_blue);
          margin-bottom: 1em;
          img {
            width: 10px;
            margin-bottom: 1.5em;
          }
          .font_en {
            color:#B3E6E0;
            font-size: 1.8rem;
          }
          & + p {
            text-align: center;
            color:var(--color_blue);
          }
        }
      }
    }
  }

}


@media ( hover:hover) {

  .sec_aboutus {

    &#business {
      .wrap {
        .btn_business {
          transition: .3s;
          &:hover {
            grid-template-columns: 1fr 2.4em;
          }
        }
      }
    }

  }


}
@media screen and (max-width: 1500px) {

}

@media screen and (max-width: 1200px) {

}

@media screen and (max-width: 1024px) {

  .sec_aboutus {
    .wrap {
      .contents {
        .about_ttl {
          font-size: 2.6rem;
          .font_en {
            font-size: 1.6rem;
          }
        }
        .about_ttl2 {
          font-size: 2.2rem;
          z-index: 0;
          .font_en {
            font-size: 9rem;
          }
        }
        .cont_list {
          li {
            h4 {
              font-size: 1.8rem;
            }
            p {
              font-size: min(1.5vw,1.6rem);
              margin-left: -1em;
              margin-right: -1em;
            }
          }
        }
      }
    }

    &#vision {
      .wrap {
        .contents {
          .contents_inner {
            .ttl {
              h2 {
                .font_en {
                  font-size: 5rem;
                }
              }
              img {
                max-width: 150px;
              }
            }
            .detail {
              h3 {
                font-size: 2.8rem;
              }
              .text {
                position: relative;
                img {
                  &.img2 {
                    top:auto;
                    bottom:-100px;
                  }
                }
              }
            }
          }
        }
      }
    }

    &#issues {
      .wrap {
        &.wrap_bg {
          padding: 100px 0 0;
        }
      }
    }

    &#business {
      .wrap {
        padding-bottom: 100px;
        .contents {
          padding-top: 100px;
          .about_ttl2 {
            margin-bottom: 4em;
          }
          .business {
            grid-column-gap: 3%;
            dd {
              h4 {
                font-size: 1.6rem;
              }
            }
          }
        }
        .core {
          dd {
            ul {
              font-size: 1.6rem;
            }
          }
        }
      }
    }

    &#outcome {
      .wrap {
        padding-bottom: 200px;
        background: url(../../assets/img/about/aboutus/outcome_bg02.svg) no-repeat center bottom 250px/1680px auto;
        .contents {
          padding-top: 200px;
          .contents_inner {
            .detail {
              p {
                font-size: 2.0rem;
              }
            }
          }
          h2 {
            font-size: 3.6rem;
          }
        }
      }
    }

  }

}

@media screen and (max-width: 768px) {

  .sec_aboutus {
    .wrap {
      overflow: clip;
      .contents {
        .about_ttl {
          font-size: 2.4rem;
          grid-template-columns: 2em 1fr;
          grid-gap: .33em .5em;
          margin-bottom: 1.5em;
          .font_en {
            font-size: 1.5rem;
          }
        }
        .about_ttl2 {
          font-size: 2.0rem;
          .font_en {
            font-size: 6.4rem;
            top:50%;
            transform: translate(-50%,-45%);
          }
        }
        .cont_list {
          grid-template-columns: 1fr;
          grid-row-gap: 20px;
          li {
            h4 {
              font-size: 2.0rem;
            }
            p {
              font-size: 1.5rem;
            }
          }
        }
      }
    }

    &#vision {
      .wrap {
        padding:90px 0;
        .contents {
          .contents_inner {
            grid-template-columns: 1fr;
            position: relative;
            padding-bottom: max(95vw,370px);
            .ttl {
              h2 {
                font-size: 1.6rem;
                margin-bottom: 3em;
                .font_en {
                  font-size: 4rem;
                }
              }
              img {
                max-width: 100%;
                width: 45%;
                border-radius: 10px;
                position: absolute;
                bottom: max(35vw,137px);
                left: 0;
              }
            }
            .detail {
              h3 {
                font-size: 2.4rem;
                margin-bottom: 1em;
              }
              .text {
                position: unset;
                p {
                  line-height: 2;
                  margin-bottom: 0;
                }
                img {
                  border-radius: 10px;
                  &.img1 {
                    position: absolute;
                    max-width: 100%;
                    width: 40%;
                    left: 3%;
                    bottom:0;
                  }
                  &.img2 {
                    max-width: 100%;
                    width: 40%;
                    right: 0;
                    bottom: max(63vw,246px);
                  }
                  &.img3 {
                    max-width: 100%;
                    width: 45%;
                    right: 0;
                    bottom: max(20vw,78px);
                  }
                }
              }
            }
          }
        }
      }
    }

    &#issues {
      .wrap {
        padding:40px 0 60px;
        &.wrap_bg {
          background-color: var(--color_green);
          & > img {
            margin-top: -1px;
            background-color: var(--color_beige);
            width: 220%;
            max-width: 220%;
            margin: min(-20vw,-80px) -60% 0;
          }
          .contents {
            padding-bottom: 60px;
            .about_ttl2 {
              .font_en {
                color:var(--color_white);
              }
            }
            .cont_list {
              li {
                .font_en {
                  background-color: var(--color_green);
                }
              }
            }
          }
        }
        .contents {
          .about_ttl2 {
            .font_en {
              color:var(--color_green);
            }
          }
          .cont_list {
            li {
              .font_en {
                background-color: var(--color_btn)
              }
            }
          }
        }
      }
    }

    &#business {
      .wrap {
        padding-bottom: 60px;
        .contents {
          padding-top: 90px;
          .about_ttl2 {
            margin-bottom: 4em;
            &:has( + .purpose) {
              margin-bottom: 1.2em;
            }
          }
          .business {
            grid-template-columns: 1fr;
            grid-row-gap: 20px;
            margin:0 auto 90px;
            background: none;
            position: relative;
            max-width: 600px;
            &::before {
              content:'';
              display: block;
              width: 230%;
              height: 106%;
              background: url(../../assets/img/about/aboutus/sp/business.svg) no-repeat center center/cover;
              position: absolute;
              z-index: 0;
              left: 50%;
              top:50%;
              transform: translate(-50%,-50%);
            }
            dt {
              grid-area: unset;
              font-size: 2.0rem;
              position: relative;
              z-index: 1;
            }
            dd {
              z-index: 1;
              h4 {
                font-size: 1.8rem;
              }
              img {
                border-radius: 10px;
              }
              &:nth-child(2),&:nth-child(4) {
                transform: unset;
              }
              &:nth-child(5),&:nth-child(7) {
                transform: unset;
              }
            }
          }
        }
        .btn_business {
          width: 100%;
          max-width: 400px;
          margin:0 auto 50px;
        }
        .note {
          border-radius: 10px;
          padding:25px;
          margin-bottom: 90px;
          dt {
            font-size: 1.4rem;
            margin-bottom: 1em;
          }
        }
        .purpose {
          grid-template-columns: 1fr;
          grid-row-gap: 20px;
          max-width: 600px;
          margin:0 auto;
          li {
            .font_en {
              &::before {
                content:'';
                height: 2.5em;
              }
            }
            h4 {
              font-size: 1.8rem;
            }
          }
        }
        .core {
          dt {
            font-size: 1.8rem;
          }
          dd {
            ul {
              grid-template-columns: 1fr;
              grid-gap: 20px;
              font-size: 1.8rem;
              max-width: 400px;
              margin:0 auto;
              position: relative;
              &::before,&::after {
                content:'';
                display: block;
                height: 96%;
                border-left: 1px solid var(--color_blue);
                position: absolute;
                z-index: 0;
                top:2%;
                left: 10%;
              }
              &::after {
                left: 90%;
              }
              li {
                height: 3.2em;
                &:not(:nth-child(3n)) {
                  &::before {
                    content:none;
                  }
                }
                &:nth-child(-n+3) {
                  &::after {
                    content:none;
                  }
                }
              }
            }
          }
        }
      }
    }

    &#outcome {
      .wrap {
        padding-bottom: 150px;
        background: url(../../assets/img/about/aboutus/sp/outcome_bg02.svg) no-repeat center bottom 120px/560px auto;
        &::before {
          content:'';
          display: block;
          aspect-ratio: 192/17;
          background-color: var(--color_btn);
          clip-path: polygon(0 0,100% 0,50% 100%);
          margin-top: -1px;
        }
        .contents {
          padding-top: 90px;
          .contents_inner {
            grid-template-columns: 1fr;
            grid-gap: 20px;
            margin-bottom: 60px;
            &::before {
              width: 200%;
            }
            .detail {
              background-color: #FFFFFF;
              border-radius: 15px;
              h3 {
                font-size: 1.4rem;
                span {
                  padding:1em 20px;
                }
              }
              p {
                font-size: 2.0rem;
                padding:0 20px 30px;
              }
            }
            img {
              grid-area: unset;
            }
          }
          h2 {
            font-size: 2.6rem;
            grid-row-gap: .5em;
            text-align: center;
            .font_en {
              font-size: 1.5rem;
            }
            & + p {
              margin:0 -1em;
            }
          }
        }
      }
    }

  }

}

/**
KEYWORDS
**/

.sec_keywords {
  .wrap {
    overflow: clip;
    .contents {
      .contents_inner {
        display: grid;
        grid-template-columns: repeat(2,1fr);
        &:not(:last-child) {
          margin-bottom: 150px;
        }
        .detail {
          h2 {
            font-size: 4.6rem;
            line-height: 1.5;
            color:var(--color_blue);
            display: grid;
            grid-row-gap: .5em;
            margin-bottom: 1em;
            .font_en {
              font-size: 16.7rem;
              color:inherit;
              line-height: 1;
            }
          }
        }
        .img {
          position: relative;
          img {
            display: block;
            border-radius: 50%;
            box-shadow: 30px 0 0 var(--color_green);
          }
        }
      }
    }
  }

  &#keywords1 {
    .wrap {
      padding:90px 0 150px;
      .contents {
        .contents_inner {
          &.contents1 {
            .img {
              img {
                max-width: 336px;
                transform: translateX(-50px);
              }
              .vertical {
                color:var(--color_btn);
                font-size: 8.4rem;
                position: absolute;
                transform-origin: top left;
                transform: rotate(90deg);
                position: absolute;
                top:0;
                left:100%;
                white-space:nowrap;
              }
            }
          }
          &.contents2 {
            .detail {
              order:1;
              h2 {
                position: relative;
                .font_en {
                  position: absolute;
                  z-index: 1;
                  left: -2em;
                  top:0;
                  margin-bottom: 0;
                  transform: translateY(-.15em);
                }
              }
            }
            .img {
              padding-top: 80px;
              img {
                max-width: 440px;
              }
            }
          }
          &.contents3 {
            grid-template-columns: 50% 300px;
            justify-content: end;
            grid-column-gap: 120px;
            transform: translateX(150px);
            .detail {
              h2 {
                position: relative;
                .font_en {
                  position: absolute;
                  z-index: 1;
                  right: -1.75em;
                  top:0;
                  margin-bottom: 0;
                  transform: translateY(-.15em);
                }
              }
            }
            .img {
              padding-top: 40px;
            }
          }
        }
      }
    }
  }

  &#keywords2 {
    .wrap {
      background:url(../../assets/img/about/keywords/works_img01.png) no-repeat left top/500px auto var(--color_green);
      padding:180px 0 150px;
      .contents {
        .contents_inner {
          &.contents1 {
            grid-template-columns: 220px 50%;
            justify-content: start;
            .detail {
              order:1;
              h2 {
                position: relative;
                .font_en {
                  position: absolute;
                  z-index: 1;
                  right: -2em;
                  top:0;
                  margin-bottom: 0;
                  transform: translateY(-.2em);
                }
              }
            }
            .img {
              .vertical {
                color:var(--color_btn);
                font-size: 8.4rem;
                transform-origin: top left;
                transform: rotate(90deg);
                position: absolute;
                top:-.33em;
                left:1em;
                white-space:nowrap;
              }
            }
          }
          &.contents2 {
            position: relative;
            .detail {
              order:1;
              h2 {
                .font_en {
                  position: absolute;
                  z-index: 1;
                  left: 0;
                  top:0;
                  margin-bottom: 0;
                  transform: translateY(-.15em);
                }
              }
            }
            .img {
              padding-top: 80px;
              padding-left: 70px;
              img {
                max-width: 400px;
                box-shadow: 30px 0 0 var(--color_beige);
              }
            }
          }
          &.contents3 {
            grid-template-columns: 50% 500px;
            justify-content: end;
            transform: translateX(150px);
            .img {
              padding-top: 40px;
              img {
                transform: translateY(-140px);
                box-shadow: 30px 0 0 var(--color_beige);
              }
            }
          }
        }
      }
    }
  }

  &#keywords3 {
    .wrap {
      padding:180px 0 300px;
      .contents {
        .contents_inner {
          &.contents1 {
            grid-template-columns: 50% 370px;
            justify-content: end;
            position: relative;
            .detail {
              padding-top: 120px;
              h2 {
                position: relative;
                .font_en {
                  position: absolute;
                  z-index: 1;
                  right: -1.33em;
                  top:-.5em;
                  margin-bottom: 0;
                  transform: translateY(-.2em);
                }
              }
            }
            .img {
              position: unset;
              img {
                width: 336px;
                position: absolute;
                left: -220px;
                top:0;
              }
              .vertical {
                color:var(--color_btn);
                font-size: 8.4rem;
                position: absolute;
                transform-origin: top left;
                transform: rotate(90deg);
                position: absolute;
                top:-.33em;
                left:100%;
                white-space:nowrap;
              }
            }
          }
          &.contents2 {
            position: relative;
            margin-bottom: 50px;
            .img {
              padding-top: 80px;
              padding-left: 70px;
              img {
                max-width: 520px;
                transform: translate(160px,-180px);
              }
            }
          }
          &.contents3 {
            grid-template-columns: 500px 50%;
            justify-content: start;
            .detail {
              order:1;
              h2 {
                position: relative;
                .font_en {
                  position: absolute;
                  z-index: 1;
                  left: -1.8em;
                  top:0;
                  margin-bottom: 0;
                  transform: translateY(-.15em);
                }
              }
            }
            .img {
              img {
                max-width: 440px;
                transform: translateX(-150px);
              }
            }
          }
        }
      }
    }
  }

}

@media ( hover:hover) {
}

@media screen and (max-width: 1500px) {

  .sec_keywords {

    &#keywords1 {
      .wrap {
        .contents {
          .contents_inner {
            &.contents3 {
              transform: unset;
            }
          }
        }
      }
    }

    &#keywords2 {
      .wrap {
        background:url(../../assets/img/about/keywords/works_img01.png) no-repeat left top/300px auto var(--color_green);
        .contents {
          .contents_inner {
            &.contents3 {
              transform: unset;
            }
          }
        }
      }
    }

    &#keywords3 {
      .wrap {
        .contents {
          .contents_inner {
            &.contents1 {
              grid-template-columns: 50% 300px;
              .detail {
                h2 {
                  .font_en {
                    right: -1.2em;
                  }
                }
              }
              .img {
                img {
                  width: 300px;
                  left: -60px;
                  top:0;
                }
              }
            }
          }
        }
      }
    }

  }

}

@media screen and (max-width: 1200px) {

  .sec_keywords {
    .wrap {
      .contents {
        .contents_inner {
          .detail {
            h2 {
              font-size: 4.0rem;
            }
          }
        }
      }
    }

    &#keywords2 {
      .wrap {
        .contents {
          .contents_inner {
            &.contents1 {
              .detail {
                h2 {
                  .font_en {
                    right: -1.5em;
                  }
                }
              }
            }
            &.contents2 {
              .img {
                padding-left: 0;
              }
            }
            &.contents3 {
              grid-template-columns: 50% 400px;
            }
          }
        }
      }
    }

    &#keywords3 {
      .wrap {
        padding:180px 0 300px;
        .contents {
          .contents_inner {
            &.contents1 {
              grid-template-columns: 50% 200px;
              .detail {
                h2 {
                  .font_en {
                    right: -.5em;
                    top:-1em;
                  }
                }
              }
            }
          }
        }
      }
    }

  }

}

@media screen and (max-width: 1024px) {

  .sec_keywords {
    .wrap {
      .contents {
        .contents_inner {
          &:not(:last-child) {
            margin-bottom: 120px;
          }
          .detail {
            h2 {
              font-size: 3.4rem;
              .font_en {
                font-size: 13rem;
              }
            }
          }
        }
      }
    }

    &#keywords1 {
      .wrap {
        .contents {
          .contents_inner {
            &.contents1 {
              .img {
                img {
                  max-width: 260px;
                  transform: unset;
                }
                .vertical {
                  font-size: 6.4rem;
                }
              }
            }
            &.contents2 {
              .img {
                img {
                  max-width: 300px;
                }
              }
            }
            &.contents3 {
              grid-template-columns: 55% 1fr;
              grid-column-gap: 120px;
            }
          }
        }
      }
    }

    &#keywords2 {
      .wrap {
        background:url(../../assets/img/about/keywords/works_img01.png) no-repeat left top/250px auto var(--color_green);
        .contents {
          .contents_inner {
            &.contents1 {
              grid-template-columns: 120px 60%;
              .detail {
                order:1;
                h2 {
                  .font_en {
                    right: -1.33em;
                  }
                }
              }
              .img {
                .vertical {
                  font-size: 6.4rem;
                }
              }
            }
            &.contents2 {
              .img {
                padding-top: 120px;
                img {
                  max-width: 300px;
                }
              }
            }
            &.contents3 {
              grid-template-columns: 50% 1fr;
              .img {
                img {
                  transform: translateY(-100px);
                }
              }
            }
          }
        }
      }
    }

    &#keywords3 {
      .wrap {
        padding:180px 0 300px;
        .contents {
          .contents_inner {
            &.contents1 {
              grid-template-columns: 55% 100px;
              .detail {
                h2 {
                  .font_en {
                    right: 0em;
                  }
                }
              }
              .img {
                img {
                  width: 240px;
                }
                .vertical {
                  font-size: 6.4rem;
                }
              }
            }
            &.contents2 {
              .img {
                padding-top: 0;
                padding-left: 0;
                img {
                  max-width: 320px;
                  transform: translate(30px,-50px);
                }
              }
            }
            &.contents3 {
              grid-template-columns: 1fr 55%;
              .img {
                padding-top: 80px;
                img {
                  max-width: 320px;
                  transform: translateX(-50px);
                }
              }
            }
          }
        }
      }
    }

  }

}

@media screen and (max-width: 768px) {

  .sec_keywords {
    .wrap {
      .contents {
        .contents_inner {
          grid-template-columns: 1fr;
          &:not(:last-child) {
            margin-bottom: 60px;
          }
          .detail {
            h2 {
              font-size: 2.8rem;
              .font_en {
                font-size: 7.2rem;
              }
            }
          }
          .img {
            img {
              box-shadow: 15px 0 0 var(--color_green);
            }
          }
        }
      }
    }

    &#keywords1 {
      .wrap {
        padding:90px 0;
        .contents {
          .contents_inner {
            &.contents1 {
              .detail {
                order:1;
              }
              .img {
                margin-bottom: 40px;
                img {
                  max-width: clamp(200px,60%,336px);
                  transform: unset;
                }
                .vertical {
                  font-size: 5.0rem;
                }
              }
            }
            &.contents2 {
              .detail {
                h2 {
                  .font_en {
                    position: relative;
                    left: auto;
                    top:0;
                    margin-bottom: 0;
                    transform: unset;
                  }
                }
              }
              .img {
                padding-top: 0;
                margin-bottom: -40px;
                img {
                  max-width: clamp(220px,60%,336px);
                  margin-left: auto;
                }
              }
            }
            &.contents3 {
              grid-template-columns: 1fr;
              justify-content: end;
              grid-column-gap: 120px;
              .detail {
                order:1;
                h2 {
                  .font_en {
                    position: relative;
                    right:auto;
                    top:0;
                    transform: unset;
                  }
                }
              }
              .img {
                padding-top: 0;
                margin-bottom: -50px;
                img {
                  max-width: clamp(210px,60%,336px);
                  margin-left: auto;
                  transform: translateX(20%);
                }
              }
            }
          }
        }
      }
    }

    &#keywords2 {
      .wrap {
        padding:60px 0 90px;
        .contents {
          .contents_inner {
            &.contents1 {
              grid-template-columns: 1fr;
              .detail {
                h2 {
                  position: relative;
                  .font_en {
                    position: relative;
                    right: auto;
                    top:0;
                    transform: unset;
                  }
                }
              }
              .img {
                font-size: 5.0rem;
                height: 4em;
                .vertical {
                  font-size: 5.0rem;
                  left: 100%;
                }
              }
            }
            &.contents2 {
              .detail {
                order:1;
                h2 {
                  .font_en {
                    position: relative;
                    transform: unset;
                  }
                }
              }
              .img {
                padding-top: 0;
                padding-left: 0;
                img {
                  max-width: clamp(200px,60%,336px);
                  box-shadow: 15px 0 0 var(--color_beige);
                  margin-left: auto;
                  margin-bottom: -50px;
                  transform: translateX(15%);
                }
              }
            }
            &.contents3 {
              grid-template-columns:1fr;
              .detail {
                order:1;
              }
              .img {
                padding-top: 0;
                img {
                  max-width: clamp(190px,60%,336px);
                  box-shadow: 15px 0 0 var(--color_beige);
                  margin-left: auto;
                  margin-bottom: -70px;
                  transform: unset;
                }
              }
            }
          }
        }
      }
    }

    &#keywords3 {
      .wrap {
        padding:60px 0 150px;
        .contents {
          .contents_inner {
            &.contents1 {
              grid-template-columns: 1fr;
              .detail {
                padding-top: 0;
                order:1;
                h2 {
                  position: relative;
                  .font_en {
                    position: relative;
                    right: auto;
                    top:auto;
                    transform: unset;
                  }
                }
              }
              .img {
                position: relative;
                img {
                  max-width: clamp(210px,60%,336px);
                  position: relative;
                  left: auto;
                  top:0;
                  transform: translate(-20%,-30px);
                }
                .vertical {
                  font-size: 5.0rem;
                  top:.5em;
                }
              }
            }
            &.contents2 {
              margin-bottom: 0;
              .detail {
                order:1;
              }
              .img {
                padding-top: 0;
                padding-left: 0;
                img {
                  max-width: clamp(210px,60%,336px);
                  transform: unset;
                  margin-left: auto;
                  margin-bottom: -60px;
                  transform: translateX(15%);
                }
              }
            }
            &.contents3 {
              grid-template-columns: 1fr;
              .detail {
                order:1;
                h2 {
                  .font_en {
                    position: relative;
                    left: auto;
                    top:auto;
                    transform: unset;
                  }
                }
              }
              .img {
                img {
                  max-width: clamp(255px,60%,336px);
                  transform: translateX(15%);
                  margin-left: auto;
                  margin-bottom: -40px;
                }
              }
            }
          }
        }
      }
    }

  }

}

/**
WORKS
**/

.sec_works {

  &#works {
    .wrap {
      padding:90px 0 300px;
      .contents {
        .contents_inner {
          &:not(:last-child) {
            margin-bottom: 80px;
          }
          & > dl {
            background-color: var(--color_green);
            border-radius: 20px;
            & > dt {
              padding:40px 70px;
              cursor: pointer;
              display: grid;
              grid-template-columns: 1fr 35%;
              grid-column-gap: 3%;
              &.open {
                .detail {
                  h2 {
                    .icon {
                      &::before {
                        transform: translate(-50%,-50%) rotate(90deg);
                        opacity: 0;
                      }
                      &::after {
                        transform: translate(-50%,-50%) rotate(180deg);
                      }
                    }
                  }
                }
              }
              .detail {
                h2 {
                  font-size: 2.6rem;
                  line-height: 1.5;
                  color:var(--color_blue);
                  display: grid;
                  grid-row-gap: .33em;
                  padding-bottom: 1em;
                  border-bottom: 1px solid var(--color_blue);
                  position: relative;
                  padding-right: 60px;
                  margin-bottom: 1em;
                  .font_en {
                    font-size: 1.8rem;
                    color:inherit;
                  }
                  .icon {
                    background-color: var(--color_white);
                    display: block;
                    width: 54px;
                    height: 54px;
                    position: absolute;
                    right: 0;
                    top:50%;
                    transform: translateY(-50%);
                    &::before,&::after {
                      content:'';
                      display: block;
                      width: 30%;
                      height: 1px;
                      background-color: var(--color_blue);
                      position: absolute;
                      top:50%;
                      left: 50%;
                      transform: translate(-50%,-50%) rotate(0deg);
                      transition: .3s;
                    }
                    &::after {
                      transform: translate(-50%,-50%) rotate(90deg);
                    }
                  }
                }
              }
              .img {
                img {
                  display: block;
                  border-radius: 20px;
                  transform: translateX(40px);
                }
              }
            }
            & > dd {
              padding:40px 70px 60px;
              border-top:2px solid var(--color_white);
              display: none;
              h3 {
                font-size: 2.2rem;
                line-height: 1.5;
                color:var(--color_blue);
                display: grid;
                grid-row-gap: .33em;
                padding-bottom: .66em;
                padding-left: .8em;
                border-bottom: 1px solid var(--color_blue);
                position: relative;
                padding-right: 60px;
                margin-bottom: .66em;
                .font_en {
                  font-size: 1.2rem;
                  color:inherit;
                }
                &::before {
                  content:'';
                  display: block;
                  width: 10px;
                  height: 10px;
                  background-color: var(--color_blue);
                  position: absolute;
                  left: 0;
                  top:.2em;
                  clip-path: polygon(0 0,100% 0,0 100%);
                }
              }
              p,ul {
                &:not(:last-child) {
                  margin-bottom: 40px;
                }
              }
              .main_business {
                li {
                  line-height: 2;
                  text-indent: -2em;
                  padding-left: 2em;
                  &::before {
                    content:'●';
                    color:var(--color_blue);
                    margin-right: 1em;
                  }
                }
              }
              .chara {
                display: grid;
                grid-template-columns: repeat(2,1fr);
                grid-column-gap: 2%;
                li {
                  background-size: 6px 2px;
                  background-image: linear-gradient(to right, var(--color_blue) 3px, transparent 3px);
                  background-repeat: repeat-x;
                  background-position: left bottom;
                  a {
                    display: grid;
                    padding:20px 0;
                    grid-template-columns: 13px 65px 1fr;
                    align-items: center;
                    grid-column-gap: 20px;
                    img {
                      &:has( + dl) {
                        border-radius: 50%;
                      }
                    }
                    dl {
                      display: grid;
                      grid-template-columns: 4em 1fr;
                      align-items: center;
                      margin-left: 5px;
                      dt {
                        font-size: 2.4rem;
                      }
                      dd {
                        font-size: 1.2rem;
                        line-height: 1.5;
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }

}

@media ( hover:hover) {

  .sec_works {

    &#works {
      .wrap {
        .contents {
          .contents_inner {
            & > dl {
              & > dd {
                .chara {
                  li {
                    a {
                      transition: .3s;
                      img {
                        &:first-child {
                          transition: .3s;
                        }
                      }
                      &:hover {
                        opacity: .8;
                        img {
                          &:first-child {
                            transform: translateX(5px);
                          }
                        }
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }

  }

}

@media screen and (max-width: 1500px) {

}

@media screen and (max-width: 1200px) {

}

@media screen and (max-width: 1024px) {

  .sec_works {

    #works {
      .wrap {
        padding:90px 0 200px;
        .contents {
          .contents_inner {
            &:not(:last-child) {
              margin-bottom: 60px;
            }
            & > dl {
              & > dt {
                padding:40px;
              }
              & > dd {
                padding:40px 40px 60px;
                .chara {
                  li {
                    a {
                      grid-template-columns: 12px 50px 1fr;
                      grid-column-gap: 10px;
                      img {
                        &:has( + dl) {
                          border-radius: 50%;
                        }
                      }
                      dl {
                        display: grid;
                        grid-template-columns: 3.5em 1fr;
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }

  }

}

@media screen and (max-width: 768px) {

  .sec_works {

    &#works {
      .wrap {
        padding:90px 0 150px;
        .contents {
          .contents_inner {
            &:not(:last-child) {
              margin-bottom: 40px;
            }
            & > dl {
              & > dt {
                padding:15px 15px 30px;
                grid-template-columns: 1fr;
                grid-row-gap: 20px;
                &.open {
                  .detail {
                    h2 {
                      .icon {
                        &::before {
                          transform: translate(-50%,-50%) rotate(90deg);
                          opacity: 0;
                        }
                        &::after {
                          transform: translate(-50%,-50%) rotate(180deg);
                        }
                      }
                    }
                  }
                }
                .detail {
                  order:1;
                  h2 {
                    font-size: 2.2rem;
                    margin-bottom: .66em;
                    .font_en {
                      font-size: 1.5rem;
                    }
                  }
                }
                .img {
                  img {
                    border-radius: 15px;
                    transform: unset;
                  }
                }
              }
              & > dd {
                padding:30px 15px 40px;
                h3 {
                  font-size: 2.0rem;
                  .font_en {
                    font-size: 1.2rem;
                  }
                  &:has( + .chara) {
                    margin-bottom: 0;
                  }
                }
                p,ul {
                  &:not(:last-child) {
                    margin-bottom: 30px;
                  }
                }
                .main_business {
                  li {
                    line-height: 1.8;
                    text-indent: -1.5em;
                    padding-left: 1.5em;
                    &::before {
                      margin-right: .5em;
                    }
                    &:not(:last-child) {
                      margin-bottom: .33em;
                    }
                  }
                }
                .chara {
                  grid-template-columns: 1fr;
                  li {
                    a {
                      padding:15px 0;
                      grid-template-columns: 13px 55px 1fr;
                      grid-column-gap: 5px;
                      dl {
                        grid-template-columns: 3.3em 1fr;
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }

  }

}

/**
PERSON
**/

.sec_person {
  .wrap {
    .contents {
      h2 {
        font-size: 2.6rem;
        position: relative;
        text-align: center;
        color:var(--color_blue);
        padding:1em 0;
        margin-bottom: 3em;
        .font_en {
          white-space: nowrap;
          line-height: 1;
          font-size: 11rem;
          color:#B3E6E0;
          position: absolute;
          left: 50%;
          top: 50%;
          z-index: -1;
          transform: translate(-50%,-60%);
        }
      }
    }
  }

  &#policy {
    .wrap {
      padding:150px 0;
      overflow: hidden;
      .contents {
        h2 {
          & + p {
            text-align: center;
            margin-bottom: 90px;
          }
        }
        .cont_list {
          display: grid;
          grid-template-columns: repeat(2,1fr);
          grid-gap: 50px 2.5%;
          position: relative;
          z-index: 1;
          margin-bottom: 200px;
          li {
            background-color: #FFFFFF;
            border-radius: 20px;
            padding:25px 25px 40px;
            text-align: center;
            display: grid;
            grid-template-rows: auto auto 1fr auto;
            .font_en {
              font-size: 1.6rem;
              width: 3.6em;
              height: 1.8em;
              display: grid;
              align-items: center;
              justify-content: center;
              border-radius: 5px;
              background-color: var(--color_btn);
            }
            h3 {
              font-size: 2.2rem;
              line-height: 1.5;
              color:var(--color_blue);
              padding:.66em 0 1em;
            }
            p {
              line-height: 1.5;
              color:var(--color_blue);
              margin-bottom: 2.5em;
              align-self: center;
            }
            img {
              display: block;
              border-radius: 10px;
              max-width: calc(100% - 50px);
              margin:0 auto;
            }
          }
        }
        .policy_slider {
          div {
            transition: none;
          }
          .slick-list {
            overflow: visible;
          }
          .slick-slide {
            -webkit-backface-visibility: hidden;
            -webkit-transform-style: preserve-3d;
            backface-visibility: hidden;
            transform-style: preserve-3d;
            img {
              display: block;
              max-width: 480px;
            }
          }
        }
      }
    }
  }

  &#message {
    .wrap {
      padding-bottom: 300px;
      .contents {
        .contents_inner {
          background-color: var(--color_btn);
          border-radius: 20px;
          padding:90px 40px;
          position: relative;
          z-index: 0;
        }
        p {
          text-align: center;
          line-height: 2.5;
          color:var(--color_white);
        }
      }
    }
  }

}

@media ( hover:hover) {

}
@media screen and (max-width: 1500px) {

}

@media screen and (max-width: 1200px) {

}

@media screen and (max-width: 1024px) {

  .sec_person {
    .wrap {
      .contents {
        h2 {
          font-size: 2.4rem;
          .font_en {
            font-size: 9rem;
          }
        }
      }
    }

    &#policy {
      .wrap {
        padding:100px 0;
        .contents {
          .cont_list {
            margin-bottom: 150px;
            li {
              h3 {
                font-size: 2.0rem;
              }
            }
          }
          .policy_slider {
            .slick-slide {
              img {
                max-width: 400px;
              }
            }
          }
        }
      }
    }

    &#message {
      .wrap {
        padding-bottom: 200px;
        .contents {
          p {
            text-align: left;
          }
        }
      }
    }

  }

}

@media screen and (max-width: 768px) {

  .sec_person {
    .wrap {
      .contents {
        h2 {
          font-size: 2.2rem;
          margin-bottom: 1.66em;
          .font_en {
            font-size: 6.4rem;
          }
        }
      }
    }

    &#policy {
      .wrap {
        padding:90px 0;
        .contents {
          h2 {
            & + p {
              text-align: left;
              margin-bottom: 60px;
            }
          }
          .cont_list {
            grid-template-columns: 1fr;
            grid-gap:15px;
            margin-bottom: 90px;
            li {
              padding:25px;
              p {
                margin-bottom: 1.5em;
                font-size: 1.5rem;
              }
              img {
                max-width: 100%;
              }
            }
          }
          .policy_slider {
            .slick-slide {
              img {
                max-width: 250px;
              }
            }
          }
        }
      }
    }

    &#message {
      .wrap {
        padding-bottom: 150px;
        .contents {
          .contents_inner {
            padding:60px 25px;
          }
          p {
            font-size: 1.5rem;
          }
        }
      }
    }

  }

}