@charset "UTF-8";

/* ====================================
	 top
==================================== */
body{
	width: 100%;
	background-color: #E1F5FC !important;
}

.mv{
	width: 100%;
	/* margin-top: -90px; */
	position: relative;
}
.mv,video{
	width: 100%;
  }

main.main{
	width: 100%;
	font-family: "Noto Sans JP";
	font-size: 16px;
	font-weight: 400;
	color: #142144;
	overflow: scroll;
}
.main h3{
	font-family: Roboto;
	font-size: 56px;
	font-weight: 700;
	letter-spacing: 2.24px;
	color: #fff;
}
.main .flex_wrap{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.message{
	position: relative;
	padding: 118px 0 150px;
	background-image: url(/img/subtract.svg),url(/img/subtract.svg);
	background-repeat: no-repeat,no-repeat;
	background-size:41px,53px;
	background-position: left 26% top 67px,right -10px top 183px;
}
.message p{
	text-align: center;
	color: #003B6E;
	font-size: 18px;
font-weight: 700;
line-height: 2.8;
}
.message .anime_box01{
	position: absolute;
	top: 106px;
	left: 69px;
	width: 246px;
height: 246px;
background-image: url(/img/anime_img01.png);
background-repeat: no-repeat;
background-size: 100%;
}
.message .anime_box01 img.triangle{
	margin: -58px 0 0 46px;
	width: 63px;
	display: block;
}
.message .anime_box01 img.square{
	margin: -1px 0 0 -21px;
	width: 67px;
	display: block;
}
.message .anime_box02{
	position: absolute;
	top: 31px;
	right: 117px;
	width: 157px;
height: 157px;
background-image: url(/img/anime_img02.png);
background-repeat: no-repeat;
background-size: 100%;
}
.message .anime_box02 img{
	margin: -10px 0 0 -64px;
	width: 90px;
}
.message .anime_box03{
	position: absolute;
	bottom: 0px;
	right: 53px;
	width: 330px;
height: 165px;
background-image: url(/img/anime_img03.png);
background-repeat: no-repeat;
background-size: 100%;
}
.message .anime_box03 img{
	margin: 52px 0 0 -140px;
	width: 218px;
}
/* anime */
.anime01{
	animation: rotation 8s linear infinite;
}
@keyframes rotation {
	0% {transform: rotate(0deg);}
	22% {transform: rotate(0deg);}
	25% {transform: rotate(90deg);}
	47% {transform: rotate(90deg);}
	50% {transform: rotate(180deg);}
	72% {transform: rotate(180deg);}
	75% {transform: rotate(270deg);}
	97% {transform: rotate(270deg);}
	100% {transform: rotate(360deg);}
  }
  .anime02{
	animation: rotation2 8s linear infinite;
	animation-delay:1s;
}
@keyframes rotation2 {
	0% {transform: rotate(0deg);}
	22% {transform: rotate(0deg);}
	25% {transform: rotate(90deg);}
	47% {transform: rotate(90deg);}
	50% {transform: rotate(180deg);}
	72% {transform: rotate(180deg);}
	75% {transform: rotate(270deg);}
	97% {transform: rotate(270deg);}
	100% {transform: rotate(360deg);}
  }
  .anime03{
	animation: swing linear 2s infinite;
    transform-origin: center;
  }
  @keyframes swing {
    0% {transform: rotate(0deg);}
    50% {transform: rotate(0deg);}
    60% { transform: rotate(-15deg);}
    70% { transform: rotate(12deg);}
	80% { transform: rotate(-7deg);}
	90% {transform: rotate(0deg);}
    100% {transform: rotate(0deg);}
}


.inner_box{
padding: 0 112px;
}

.news .inner_box{
	background-color: #fff;
	border-radius: 80px 0 0 0;
	padding-top: 88px;
	padding-bottom: 88px;
	display: grid;
	grid-template-rows: 120px 1fr;
	grid-template-columns: 163px 1fr;
	column-gap: 13%;
}
.news .inner_box .flex_r{
	grid-row: 1 / 2;
	grid-column: 1 / 2;
}
.news .inner_box .flex_r h3{
	color: #142144;
	margin-bottom: 12px;
}
.news .inner_box .flex_r p{
	font-size: 18px;
font-weight: 700;
}
.news .inner_box .flex_u{
	grid-row: 2 / 3;
	grid-column: 1 / 2;
}
.news .inner_box .flex_u a{
	font-size: 14px;
	color: #142144;
}
.news .inner_box .flex_l{
	font-size: 14px;
	grid-row: 1 / 3;
	grid-column: 2 / 3;
}
ul.news_list li.news_list_item{
	border-bottom: 1px solid #E7E7E7;
}
ul.news_list li.news_list_item a{
display: flex;
flex-wrap: wrap;
padding: 16px 0;
color: #142144;
}
ul.news_list li.news_list_item:first-of-type a{
	padding-top: 0;
	}
.news_list_date{
	width: 76px;
}
.news_category{
	width: 106px;
	height: 23px;
	display: inline;
	font-size: 12px;
text-align: center;
color: #fff;
margin: 0 8px;
padding: 2px 0 4px;
}
.news_category.lightblue{
background-color: #69BDCD;
}
.news_category.blue{
	background-color: #005BAB;
}
.news_category.green{
	background-color: #248677;
}
.news_category.pink{
	background-color: #EA81A6;
}
.news_category.orange{
	background-color: #ED875B;
}
li.news_list_item a p{
	flex: 1;
}

.business,.company{
	background-image: url(/img/business.png);
	background-repeat: no-repeat;
	background-size: contain;
	background-position: top center;
	padding-top: 23.822714681440445vw;
	margin-bottom: 136px;
}
.business .flex_wrap,.company .flex_wrap{
	align-items: flex-end;
}
.business .flex_l,.company .flex_l{
width: 384px;
height: 384px;
margin-right: 64px;
background-color: #248677;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.business .flex_l p,.company .flex_l p{
	font-size: 18px;
font-weight: 700;
letter-spacing: 0.72px;
margin-top: 15px;
color: #fff;
}
.business .flex_r,.company .flex_r{
	flex: 1;
}
.business .flex_r p,.company .flex_r p{
margin-bottom: 32px;
line-height: 28.8px;
}
.company{
	background-image: url(/img/company.png);
}
.company .flex_l{
	background-color: #005BAB;
}

.sustainability,.recruit{
	margin-bottom: 5.540166204986149vw;
}
.recruit{
	margin-bottom: 136px;
}
.sustainability a,.recruit a{
	display: block;
	}
.sustainability .wrap_box,.recruit .wrap_box{
	height: 24.930747922437675vw;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: top center;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
}
.sustainability .wrap_box{
	background-image: url(/img/sustainability.png);
}
.recruit .wrap_box{
	background-image: url(/img/recruit.png);
}
.sustainability h3,.recruit h3{
	font-size: 2.7700831024930745vw;
	margin-bottom: 1.10803324099723vw;
}
.sustainability p,.recruit p{
	color: #fff;
	font-size: 1.2465373961218837vw;
font-weight: 700;
letter-spacing: 0.72px;
margin-bottom: 2.7700831024930745vw;
}
.sustainability .btn04,.recruit .btn04{
margin: 0 auto;
width: 12.60387811634349vw;
    height: 2.9085872576177287vw;
	font-size: 0.9695290858725761vw;
}
.btn04::after {
    width: 1.8005540166204987vw;
    height: 1.8005540166204987vw;
    right: 0.554016620498615vw;
}
.sustainability .btn04 span,.recruit .btn04 span{
	font-weight: 500;
	margin-right: 10%;
	}

.about{
	background-color: #fff;
	padding: 88px 0;
}
.about .flex_l{
	width: 40.13%;
}
.about .flex_r{
	width: 48.68%;
}
.about .flex_r p{
	margin-bottom: 26px;
	line-height: 28.8px;
}
.about .flex_r p span.red{
	color: #EC1234;
}
.about .flex_r p span.blue{
	color: #004F8A;
}
.about .flex_r p span.gold{
	color: #FFBA00;
}
.about .flex_r p span.green{
	color: #008E44;
}
.about .flex_r p:last-of-type{
	font-size: 14px;
	margin-bottom: 0;
}
.link_area{
	background-color: #fff;
	padding: 40px 0;
	border-top: solid 1px #E7E7E7;
}
.link_area ul{
	max-width: 574px;
	margin:  0 auto;
}
.link_area ul li{
	width: 170px;
}

/* ====================================
	 responsive
==================================== */
@media (min-width: 768px) and (max-width: 1100px){
	main.main {
		font-size: 1.4545454545454546vw;
	}
	.inner_box {
		padding: 0 10.18%;
	}

	.message p {
		font-size: 1.6363636363636365vw;
		line-height: 2.6;
	}
	.message .anime_box01{
		left: 6.2727272727272725vw;
		width: 22.363636363636363vw;
	height: 22.363636363636363vw;
	}
	.message .anime_box01 img.triangle{
		margin: -5.2727272727272725vw 0 0 4.181818181818182vw;
		width: 5.7272727272727275vw;
	}
	.message .anime_box01 img.square{
		margin: -0.09090909090909091vw 0 0 -1.9090909090909092vw;
		width: 6.090909090909091vw;
	}
	.message .anime_box02{
		right: 10.636363636363637vw;
		width: 14.272727272727273vw;
	height: 14.272727272727273vw;
	}
	.message .anime_box02 img{
		margin: -0.9090909090909091vw 0 0 -5.818181818181818vw;
		width: 8.181818181818182vw;
	}
	.message .anime_box03{
		right: 4.818181818181818vw;
		width: 30vw;
	height: 15vw;
	}
	.message .anime_box03 img{
		margin: 4.7272727272727275vw 0 0 -12.727272727272727vw;
		width: 19.818181818181817vw;
	}

	.news .inner_box .flex_r {
		width: 14.81818181818182vw;
	}
	.news .inner_box .flex_r p {
		font-size: 1.6363636363636365vw;
		margin-bottom: 2.3636363636363638vw;
	}
	.news .inner_box .flex_u a {
		font-size: 1.2727272727272727vw;
	}
	.news .inner_box .flex_l {
		font-size: 1.2727272727272727vw;
	}
	.news_category {
		width: 9.636363636363637vw;
		height: 2.090909090909091vw;
		font-size: 1.090909090909091vw;
	}

	.business .flex_l, .company .flex_l {
		width: 34.909090909090914vw;
		height: auto;
		margin-right: 5.818181818181818vw;
		padding-top: 15%;
		padding-bottom: 15%;
	}
	.news h3,.business h3,.company h3 {
		font-size: 5.090909090909091vw;
	}
	.business .flex_r p, .company .flex_r p {
		margin-bottom: 2.909090909090909vw;
    line-height: 2.618181818181818vw;
	}
	.about .flex_r p {
		margin-bottom: 2.3636363636363638vw;
		line-height: 2.618181818181818vw;
	}
	.about .flex_r p:last-of-type {
		font-size: 1.2727272727272727vw;
	}
}

@media screen and (max-width:767px) {
.mv{
	padding-top: 76px;
}
.message{
	padding: 34px 0 282px;
	background-image: none;
}
.message p{
	font-size: 16px;
	line-height: 2.2;
}
.message .anime_box01{
	top: 223px;
	left: 8%;
	width: 128px;
height: 128px;
}
.message .anime_box01 img.triangle{
	margin: -28px 0 0 18%;
    width: 32px;
}
.message .anime_box01 img.square{
	margin: 0px 0 0 -8%;
	width: 33px;
}
.message .anime_box02{
	top: 206px;
    right: 14%;
	width: 78px;
height: 78px;
}
.message .anime_box02 img{
	margin: -5px 0 0 -40%;
    width: 45px;
}
.message .anime_box03{
	right: 5%;
	width: 172px;
height: 86px;
}
.message .anime_box03 img{
	margin: 30px 0 0 -43%;
    width: 113px;
}
.inner_box{
	padding: 0 4%;
	}
.news .inner_box{
	grid-template-rows: 100px 1fr 22px;
	grid-template-columns: 1fr;
	row-gap: 32px;
	column-gap: 0%;
}
.news .inner_box .flex_r{
	grid-row: 1 / 2;
	grid-column: 1 / 1;
}
.news .inner_box .flex_u{
	grid-row: 3 / 4;
	grid-column: 1 / 1;
}
.news .inner_box .flex_l {
    font-size: 14px;
    grid-row: 2 / 3;
    grid-column: 1 / 1;
}
li.news_list_item a p{
	flex: 0 1 auto;
	margin-top: 10px;
	width: 100%;
}
.business,.company{
	background-image: url(/img/business_sp.png);
	padding-top: 60.55979643765903vw;
}
.business .flex_l,.company .flex_l{
	width: 100%;
	height: 62.086513994910945vw;
	margin-right: 0;
	margin-bottom: 32px;
	}
.company{
	background-image: url(/img/company_sp.png);
	padding-top: 87.02290076335878vw;
}
.sustainability {
    margin-bottom: 80px;
}
.sustainability .wrap_box,.recruit .wrap_box{
	height: 91.85750636132316vw;
}
.sustainability .wrap_box{
	background-image: url(/img/sustainability_sp.png);
}
.recruit .wrap_box{
	background-image: url(/img/recruit_sp.png);
}
.sustainability h3,.recruit h3{
	font-size: 8.142493638676845vw;
}
.sustainability p,.recruit p{
	font-size: 4.580152671755725vw;
	margin-bottom: 4vw;
}
.sustainability .btn04,.recruit .btn04{
width: 44.783715012722645vw;
    height: 9.669211195928753vw;
	font-size: 3.5623409669211195vw;
}
.btn04::after {
    width: 5.597964376590331vw;
    height: 5.597964376590331vw;
    right: 2vw;
}
.about .flex_l{
	width: 100%;
	margin-bottom: 32px;
}
.about .flex_r{
	width: 100%;
}
.link_area ul li{
	margin-bottom: 24px;
}
.link_area ul li:last-of-type{
	margin-bottom: 0;
}

}


/* -----------------------------------
   NEWS 一覧：タイトルを1行省略 & はみ出し防止
----------------------------------- */
@media (min-width: 1100px) {
	ul.news_list li.news_list_item a {
  display: grid ;              /* 既存指定を上書き */
}

}


.news_list_item a {
  display: grid ;              /* 既存指定を上書き */
  grid-template-columns: 76px 127px minmax(0, 1fr);
  /*           日付   カテゴリ     タイトル（残り全部） */
  /* column-gap: 16px; */
  align-items: center;
  width: 100%;
  box-sizing: border-box;
}

.news_list_date time {
  white-space: nowrap;
}

.news_category {
  white-space: nowrap;
}

/* タイトル部分：1行＋三点リーダー＋枠外に出さない */
.news_list_item p {
  margin: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* ------------- PCワイド：1行で省略 ------------- */
.news_list_item p {
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ------------- 1100px 以下：2行で省略 ------------- */
@media (max-width: 1100px) {
  .news_list_item p {
    white-space: normal;            /* 複数行許可 */
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;          /* ← 2行で切る */
    line-clamp: 2;                  /* 非Webkit系用 */
  }

  /* タイトルが2行になるので grid の列幅調整（重要） */
  .news_list_item a {
    grid-template-columns: 100px 120px 1fr !important;
  }
}