/*
 *
 * page-about.scss
 *
 */
/* ------------------------------------------------------------
 2022.1.17
------------------------------------------------------------ */
a.btn {
		color: #fff;
		font-size: 1em;
		font-weight: bold;
		height: 40px;
		border-radius: 50px;
		border-style: solid;
		border-width: 4px;
 		border-color: #fff;
		padding: 10px 20px;
		margin: 0px 15px 15px;
}
.maskblack{
    background-color: #000000;
    display:inline-block;
}
.maskblack img{
    opacity: 0.5;
}
.maskblack::after{
    content: '';
    background-color: blue;
    opacity: 0.5;
}
@media screen and (min-width:769px){
.loginimg {
  position: relative;
  }
.loginimg p {
  position: absolute;
  color: white;/*文字は白に*/
  font-weight: bold; /*太字に*/
  top: 35%;
  text-align:center;
  left: 0%;
  width: 100%;
  }}
@media screen and (max-width:768px){
.loginimg {
  position: relative;
  }
.loginimg p {
  position: absolute;
  color: white;/*文字は白に*/
  font-weight: bold; /*太字に*/
  top: 10%;
  text-align:center;
  left: 0%;
  width: 100%;
  }}
@media screen and (max-width:768px){
  .spfont {
   font-size: 1.7em !important;
   line-height: 2.0 !important;
  }}
/* ------------------------------------------------------------
 2022.1.12
------------------------------------------------------------ */
.sdgs__en1{
position:relative;
z-index:1;
text-align:center;
font-family:var(--font-Cantarell);
font-weight:500;
line-height:1;
word-break:break-all
}
@media screen and (min-width:1024px){
.sdgs__en1{
font-size:5rem;
font-size:max(5rem ,50px);
color: #fff;
}}
@media screen and (max-width:1023px) and (min-width:561px){
.sdgs__en1{
font-size:5.8rem;
font-size:max(5.8rem ,42px);
margin-bottom:3rem;
color: #fff;
}}
@media screen and (max-width:560px){
.sdgs__en1{
font-size:4.2rem;
font-size:max(4.2rem ,30px);
margin-bottom:2rem;
color: #fff;
}}


.sdgs__en2{
position:relative;
z-index:1;
text-align:center;
font-family:var(--font-Cantarell);
font-weight:600;
line-height:1.5;
word-break:break-all;
margin-top:-1em;
padding-bottom:5em;
}
@media screen and (min-width:1024px){
.sdgs__en2{
font-size:5rem;
font-size:max(5rem ,50px);
color: #fff;
}}
@media screen and (max-width:1023px) and (min-width:561px){
.sdgs__en2{
font-size:5.8rem;
font-size:max(5.8rem ,42px);
margin-bottom:3rem;
color: #fff;
}}
@media screen and (max-width:560px){
.sdgs__en2{
font-size:4.2rem;
font-size:max(4.2rem ,30px);
margin-bottom:2rem;
color: #fff;
}}
.bgwhite {background-color:#fff;}


l-introduce__illust2{
position:relative;margin:0 auto
}
@media screen and (min-width:1024px){
.l-introduce__illust2{
width:100%;
margin-top:0rem;
text-align: center;
}}
@media screen and (max-width:1023px){
.l-introduce__illust2{
width:100%;
margin-top:0rem;
margin-left:-0.6rem;
-webkit-transform:translateX(.6rem);
transform:translateX(.6rem)
}}
/* ------------------------------------------------------------
 pg-about-visual
------------------------------------------------------------ */
.pg-about-visual {
	position: relative;
}

@media screen and (min-width: 1024px) {
	.pg-about-visual {
		margin-bottom: 13.2rem;
	}
}

@media screen and (max-width: 1023px) and (min-width: 561px) {
	.pg-about-visual {
		margin-bottom: 11rem;
	}
}

@media screen and (max-width: 560px) {
	.pg-about-visual {
		margin-bottom: 8.2rem;
	}
}

.pg-about-visual figure {
	position: relative;
	min-height: 20rem;
	max-height: 100rem;
}

.pg-about-visual figure::after {
	content: '';
	display: block;
	pointer-events: none;
}

@media screen and (min-width: 561px) {
	.pg-about-visual figure::after {
		padding-top: calc( ( 652 / 1400 ) * 100%);
	}
}

@media screen and (max-width: 560px) {
	.pg-about-visual figure::after {
		padding-top: calc( ( 295 / 375 ) * 100%);
	}
}

/* ------------------------------------------------------------
 pg-about-intro
------------------------------------------------------------ */
@media screen and (min-width: 1024px) {
	.pg-about-intro {
		margin-bottom: 15.5rem;
	}
}

@media screen and (max-width: 1023px) {
	.pg-about-intro {
		margin-bottom: 13rem;
	}
}

.pg-about-intro__inner {
	position: relative;
}

@media screen and (min-width: 1024px) {
	.pg-about-intro__inner {
		padding-bottom: 7.3rem;
	}
}

/* ---------- pg-about-intro__txt ---------- */
.pg-about-intro__txt {
	font-weight: 700;
	line-height: calc( var(--line-height) * 1em);
}

@media screen and (min-width: 1024px) {
	.pg-about-intro__txt {
		-webkit-writing-mode: vertical-rl;
		-ms-writing-mode: tb-rl;
		writing-mode: vertical-rl;
		font-size: 1.8rem;
		font-size: max( 1.8rem , 14px );
		--line-height: calc( 52 / 18 );
		-webkit-font-feature-settings: 'vpal' 1;
		font-feature-settings: 'vpal' 1;
		letter-spacing: calc( 110 / 1000 * 1em);
		margin-left: calc( ( 115 / var( --design-width-pc ) ) * 100%);
	}
}

@media screen and (max-width: 1023px) {
	.pg-about-intro__txt {
		font-size: 1.6rem;
		font-size: max( 1.6rem , 14px );
		--line-height: calc( 37 / 16 );
		letter-spacing: calc( 50 / 1000 * 1em);
	}
}

@media screen and (max-width: 1023px) and (min-width: 561px) {
	.pg-about-intro__txt {
		margin-bottom: 20rem;
	}
}

@media screen and (max-width: 560px) {
	.pg-about-intro__txt {
		margin-bottom: 16.2rem;
	}
}

body.ua-ie .pg-about-intro__txt {
	display: inline-block;
}

/* ---------- pg-about-intro__illust ---------- */
.pg-about-intro__illust {
	z-index: 10;
}

@media screen and (min-width: 1024px) {
	.pg-about-intro__illust {
		position: absolute;
		max-width: 92.3rem;
		width: calc( ( (923 + 50) / var( --design-width-pc ) ) * 100%);
		right: calc( ( -58 / var( --design-width-pc ) ) * 100%);
		bottom: 0;
	}
}

@media screen and (max-width: 1023px) {
	.pg-about-intro__illust {
		position: relative;
	}
}

@media screen and (max-width: 1023px) and (min-width: 561px) {
	.pg-about-intro__illust {
		max-width: 80rem;
		width: 100vw;
		left: 50%;
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
	}
}

@media screen and (max-width: 560px) {
	.pg-about-intro__illust {
		width: calc( 564 / var(--design-width-sp) * 100vw);
		margin-left: calc( -78 / var(--design-width-sp) * 100vw);
	}
}

/* ----- pg-about-intro__illust__parts-1 ----- */
.pg-about-intro__illust__parts-1 {
	width: calc( ( 190 / 923 ) * 100%);
	top: calc( ( -50 / 354 ) * 100%);
	left: calc( ( 189 / 923 ) * 100%);
}

@media screen and (min-width: 1024px) {
	.pg-about-intro__illust__parts-1 p {
		top: calc( ( -95 / 137 ) * 100%);
		left: calc( ( -43 / 190 ) * 100%);
	}
}

@media screen and (max-width: 1023px) {
	.pg-about-intro__illust__parts-1 p {
		top: calc( ( -61 / 84 ) * 100%);
		left: calc( ( -30 / 116 ) * 100%);
	}
}

/* ----- pg-about-intro__illust__parts-2 ----- */
.pg-about-intro__illust__parts-2 {
	width: calc( ( 147 / 923 ) * 100%);
	top: calc( ( -34 / 354 ) * 100%);
	right: calc( ( 329 / 923 ) * 100%);
	z-index: -1;
}

@media screen and (min-width: 1024px) {
	.pg-about-intro__illust__parts-2 p {
		top: calc( ( -67 / 108 ) * 100%);
		right: calc( ( -5 / 147 ) * 100%);
	}
}

@media screen and (max-width: 1023px) {
	.pg-about-intro__illust__parts-2 p {
		top: calc( ( -46 / 66 ) * 100%);
		right: calc( ( -9 / 90 ) * 100%);
	}
}

/* ----- pg-about-intro__illust__parts-3 ----- */
.pg-about-intro__illust__parts-3 {
	width: calc( ( 174 / 923 ) * 100%);
	bottom: calc( ( -33 / 354 ) * 100%);
	right: calc( ( 271 / 923 ) * 100%);
}

@media screen and (min-width: 1024px) {
	.pg-about-intro__illust__parts-3 p {
		top: calc( ( -85 / 147 ) * 100%);
		right: calc( ( -93 / 174 ) * 100%);
	}
}

@media screen and (max-width: 1023px) {
	.pg-about-intro__illust__parts-3 p {
		top: calc( ( -53 / 80 ) * 100%);
		left: calc( ( -10 / 106 ) * 100%);
		padding-left: 0.5rem;
		padding-bottom: 0.4rem;
	}
}

/* ------------------------------------------------------------
 pg-about-flex
------------------------------------------------------------ */
@media screen and (min-width: 1024px) {
	.pg-about-flex {
		display: flex;
		flex-direction: row-reverse;
		justify-content: space-between;
		padding-bottom: 7.5rem;
	}
}

@media screen and (max-width: 1023px) {
	.pg-about-flex {
		padding-bottom: 10rem;
	}
}

@media screen and (min-width: 1024px) {
	.pg-about-flex__main {
		width: calc( ( 491 / 1180 ) * 100%);
		padding-top: 13.6rem;
	}
}

@media screen and (min-width: 1024px) {
	.pg-about-flex__figures {
		width: calc( ( 577 / 1180 ) * 100%);
	}
}

/* ------------------------------------------------------------
 pg-about-figures
------------------------------------------------------------ */
@media screen and (max-width: 1023px) {
	.pg-about-figures {
		max-width: 50rem;
		width: 100%;
		margin: 0 auto;
	}
}

/* ---------- pg-about-figures__1 ---------- */
@media screen and (min-width: 1024px) {
	.pg-about-figures__1 {
		width: calc( ( 555 / 577 ) * 100%);
		margin-left: calc( ( -30 / 577 ) * 100%);
		margin-bottom: 11.6rem;
	}
}

@media screen and (max-width: 1023px) {
	.pg-about-figures__1 {
		width: 100%;
		margin: 0 auto 7.4rem;
	}
}

/* ---------- pg-about-figures__2 ---------- */
.pg-about-figures__2 {
	position: relative;
	margin-left: auto;
}

@media screen and (min-width: 1024px) {
	.pg-about-figures__2 {
		width: calc( ( 392 / 577 ) * 100%);
		margin-right: 0;
		margin-bottom: -7.6rem;
	}
}

@media screen and (max-width: 1023px) {
	.pg-about-figures__2 {
		width: calc( ( 196 / 305 ) * 100%);
		margin-right: calc( ( -44 / 305 ) * 100%);
		margin-bottom: -2.5rem;
	}
}

body.use-blend .pg-about-figures__2 img {
	position: relative;
	z-index: 100;
	mix-blend-mode: multiply;
}

.pg-about-figures__logo {
	z-index: 10;
	fill: var(--color-green2);
}

@media screen and (min-width: 1024px) {
	.pg-about-figures__logo {
		top: -3.1rem;
		left: -12.8rem;
	}
}

@media screen and (max-width: 1023px) {
	.pg-about-figures__logo {
		top: -3.2rem;
		left: -6.9rem;
	}
}

.pg-about-figures__logo__symbol {
	margin: 0 auto;
}

@media screen and (min-width: 1024px) {
	.pg-about-figures__logo__symbol {
		width: 11rem;
		margin-bottom: 3.4rem;
	}
}

@media screen and (max-width: 1023px) {
	.pg-about-figures__logo__symbol {
		width: 6.8rem;
		margin-bottom: 2rem;
	}
}

@media screen and (min-width: 1024px) {
	.pg-about-figures__logo__en svg {
		width: 23.1rem;
		height: 2.3rem;
	}
}

@media screen and (max-width: 1023px) {
	.pg-about-figures__logo__en svg {
		width: 14.3rem;
		height: 1.4rem;
	}
}

/* ---------- pg-about-figures__3 ---------- */
@media screen and (min-width: 1024px) {
	.pg-about-figures__3 {
		width: calc( ( 449 / 577 ) * 100%);
		margin-left: calc( ( -58 / 577 ) * 100%);
		margin-bottom: 22rem;
	}
}

@media screen and (max-width: 1023px) {
	.pg-about-figures__3 {
		width: calc( ( 227 / 305 ) * 100%);
		margin-left: calc( ( -7 / 305 ) * 100%);
	}
}

/* ---------- pg-about-figures__4 ---------- */
.pg-about-figures__4 {
	position: relative;
}

@media screen and (min-width: 1024px) {
	.pg-about-figures__4 {
		width: calc( ( 434 / 577 ) * 100%);
		margin-left: calc( ( -4 / 577 ) * 100%);
		margin-bottom: 8.4rem;
	}
}

@media screen and (max-width: 1023px) {
	.pg-about-figures__4 {
		width: calc( ( 288 / 305 ) * 100%);
		margin: 0 auto 4.1rem;
	}
}

.pg-about-figures__txt {
	color: var(--color-green2);
	font-family: var(--font-Cantarell);
	font-weight: 700;
	line-height: calc( var(--line-height) * 1em);
}

@media screen and (min-width: 1024px) {
	.pg-about-figures__txt {
		font-size: 4.2rem;
		font-size: max( 4.2rem , 30px );
		--line-height: calc( 71 / 42 );
		top: -12.8rem;
		right: -3rem;
	}
}

@media screen and (max-width: 1023px) {
	.pg-about-figures__txt {
		font-size: 2.7rem;
		font-size: max( 2.7rem , 20px );
		--line-height: calc( 45.7 / 27 );
		top: -8rem;
		right: 2.6rem;
	}
}

body.use-blend .pg-about-figures__txt {
	z-index: 100;
	mix-blend-mode: multiply;
}

/* ---------- pg-about-figures__5 ---------- */
.pg-about-figures__5 {
	margin-left: auto;
}

@media screen and (min-width: 1024px) {
	.pg-about-figures__5 {
		width: calc( ( 330 / 577 ) * 100%);
		margin-right: calc( ( 13 / 577 ) * 100%);
		margin-bottom: -6.2rem;
	}
}

@media screen and (max-width: 1023px) {
	.pg-about-figures__5 {
		width: calc( ( 214 / 305 ) * 100%);
		margin-right: calc( ( -58 / 305 ) * 100%);
		margin-bottom: -3rem;
	}
}

/* ---------- pg-about-figures__6 ---------- */
@media screen and (min-width: 1024px) {
	.pg-about-figures__6 {
		width: calc( ( 489 / 577 ) * 100%);
		margin-left: calc( ( -155 / 577 ) * 100%);
		margin-bottom: 10.2rem;
	}
}

@media screen and (max-width: 1023px) {
	.pg-about-figures__6 {
		width: calc( ( 318 / 305 ) * 100%);
		margin-left: calc( ( -74 / 305 ) * 100%);
		margin-bottom: 5.7rem;
	}
}

body.use-blend .pg-about-figures__6 img {
	position: relative;
	z-index: 100;
	mix-blend-mode: multiply;
}

/* ---------- pg-about-figures__7 ---------- */
@media screen and (min-width: 1024px) {
	.pg-about-figures__7 {
		width: calc( ( 419 / 577 ) * 100%);
		margin-left: calc( ( 50 / 577 ) * 100%);
	}
}

@media screen and (max-width: 1023px) {
	.pg-about-figures__7 {
		width: calc( ( 272 / 305 ) * 100%);
		margin: 0 auto;
	}
}

/* ------------------------------------------------------------
 pg-about-mission
------------------------------------------------------------ */
@media screen and (min-width: 1024px) {
	.pg-about-mission {
		margin-bottom: 20.6rem;
	}
}

@media screen and (max-width: 1023px) {
	.pg-about-mission {
		margin-bottom: 8.2rem;
	}
}

/* ---------- pg-about-mission__header ---------- */
@media screen and (min-width: 1024px) {
	.pg-about-mission__header {
		padding-bottom: 8.5rem;
	}
}

@media screen and (max-width: 1023px) and (min-width: 561px) {
	.pg-about-mission__header {
		padding-bottom: 7.5rem;
	}
}

@media screen and (max-width: 560px) {
	.pg-about-mission__header {
		padding-bottom: 6.6rem;
	}
}

.pg-about-mission__catch {
	font-weight: 700;
	line-height: calc( var(--line-height) * 1em);
	letter-spacing: calc( 50 / 1000 * 1em);
}

@media screen and (min-width: 1024px) {
	.pg-about-mission__catch {
		font-size: 3.5rem;
		font-size: max( 3.5rem , 28px );
		--line-height: calc( 82.4 / 35 );
		padding-top: 9.4rem;
	}
}

@media screen and (max-width: 1023px) {
	.pg-about-mission__catch {
		--line-height: calc( 54.5 / 25 );
		padding-top: 6.6rem;
	}
}

@media screen and (max-width: 1023px) and (min-width: 561px) {
	.pg-about-mission__catch {
		font-size: 3rem;
		font-size: max( 3rem , 24px );
	}
}

@media screen and (max-width: 560px) {
	.pg-about-mission__catch {
		font-size: 2.5rem;
		font-size: max( 2.5rem , 20px );
	}
}

/* ------------------------------------------------------------
 pg-about-company
------------------------------------------------------------ */
@media screen and (max-width: 1023px) {
	.pg-about-company {
		margin-top: 12rem;
		margin-bottom: 12.6rem;
	}
}

/* ---------- pg-about-company__header ---------- */
@media screen and (min-width: 1024px) {
	.pg-about-company__header {
		margin-bottom: 6.2rem;
	}
}

@media screen and (max-width: 1023px) and (min-width: 561px) {
	.pg-about-company__header {
		margin-bottom: 4rem;
	}
}

@media screen and (max-width: 560px) {
	.pg-about-company__header {
		margin-bottom: 2.5rem;
	}
}

/* ---------- pg-about-company__name ---------- */
.pg-about-company__name {
	padding-right: 12.0rem !important;
}

.pg-about-company__name__illust {
	bottom: 0;
	right: 2px;
}

@media screen and (min-width: 1024px) {
	.pg-about-company__name__illust {
		width: 10.6rem;
	}
}

@media screen and (max-width: 1023px) {
	.pg-about-company__name__illust {
		width: 7.8rem;
	}
}

.pg-about-company__name__illust div {
	overflow: hidden;
	width: 100%;
	height: 100%;
}

.pg-about-company__name__illust img {
	-webkit-transform: scale(103.77358%);
	transform: scale(103.77358%);
	-webkit-transform-origin: 50% 0;
	transform-origin: 50% 0;
}

@media screen and (min-width: 1024px) {
	.pg-about-company__name__illust p {
		top: -4.5rem;
		left: -4.9rem;
	}
}

@media screen and (max-width: 1023px) {
	.pg-about-company__name__illust p {
		top: -3.3rem;
		left: -3.6rem;
	}
}

/* ---------- pg-about-company__table ---------- */
.pg-about-company__table dl {
	position: relative;
	border-bottom: solid 1px var(--color-gray6);
}

@media screen and (min-width: 561px) {
	.pg-about-company__table dl {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
	}
}

@media screen and (min-width: 1024px) {
	.pg-about-company__table dl {
		padding: 3.6rem 1rem 2.5rem;
	}
}

@media screen and (max-width: 1023px) and (min-width: 561px) {
	.pg-about-company__table dl {
		padding: 2.5rem 1rem 2.5rem;
	}
}

@media screen and (max-width: 560px) {
	.pg-about-company__table dl {
		padding: 2rem 0;
	}
}

@media screen and (min-width: 561px) {
	.pg-about-company__table dt {
		width: 11.2rem;
	}
}

@media screen and (max-width: 560px) {
	.pg-about-company__table dt {
		margin-bottom: 0.5rem;
	}
}

@media screen and (min-width: 561px) {
	.pg-about-company__table dd {
		flex: 1;
	}
}

/* ------------------------------------------------------------
 pg-about-map
------------------------------------------------------------ */
@media screen and (min-width: 1024px) {
	.pg-about-map {
		margin-bottom: 17.3rem;
	}
}

@media screen and (max-width: 1023px) {
	.pg-about-map {
		margin-bottom: 12.6rem;
	}
}

/* ---------- pg-about-map__frame ---------- */
.pg-about-map__frame {
	position: relative;
	-webkit-filter: grayscale(100%);
	filter: grayscale(100%);
	margin-bottom: 2.8rem;
}

@media screen and (min-width: 1024px) {
	.pg-about-map__frame {
		height: 67.1rem;
	}
}

@media screen and (max-width: 1023px) {
	.pg-about-map__frame {
		height: 59.5rem;
	}
}

/* ---------- pg-about-map__address ---------- */
.pg-about-map__address {
	text-align: center;
	line-height: calc( var(--line-height) * 1em);
	--line-height: calc( 30 / 16 );
	padding: 0 3.3rem 0 2rem;
}

@media screen and (min-width: 1024px) {
	.pg-about-map__address {
		font-size: 1.8rem;
		font-size: max( 1.8rem , 14px );
	}
}

@media screen and (max-width: 1023px) {
	.pg-about-map__address {
		font-size: 1.6rem;
		font-size: max( 1.6rem , 14px );
	}
}

@media screen and (min-width: 1024px) {
	.pg-about-map__address__txt {
		margin-right: 2rem;
	}
}