@charset "utf-8";
/*------------------------------------------------------------
	index
------------------------------------------------------------*/
#main .mainVisual {
	position: relative;
}
#main .mainVisual .mainImg {
	position: relative;
	opacity: 0;
	transition: 0.5s;
}
#main .mainVisual .mainImg.on {
	opacity: 1;
}
#main .mainVisual .mainImg .fvSlider li {
	vertical-align: top;
}
#main .mainVisual .mainImg img {
	width: 100%;
}
#main .mainVisual .bg {
	width: 100%;
	height: 18rem;
	position: absolute;
	left: 0;
	bottom: 7.8rem;
	opacity: 0;
	transition: 0.5s;
}
#main .mainVisual .bg.on {
	opacity: 1;
}
#main .mainVisual .bg::before {
	width: 100%;
	height: 28rem;
	position: absolute;
	left: 0;
	top: 0;
	background: linear-gradient(rgba(32, 120, 208, 0) 0%, rgba(16, 60, 104, 0.61) 100%);
	mix-blend-mode: multiply;
	opacity: 0.5;
	content: '';
	transform: translateY(-100%);
}
#main .mainVisual .bg::after {
	margin-top: 0.01rem;
	width: 100%;
	height: 30.5rem;
	position: absolute;
	left: 0;
	top: 0;
	background: #005BAB;
	opacity: 0.5;
	clip-path: polygon(0 0, 100% 100%, 0 100%);
	transform: translateY(-100%);
	content: '';
	z-index: 1;
}
#main .mainVisual .bg span {
	width: 100%;
	height: 100%;
	display: block;
	position: relative;
	background: rgba(32, 120, 208, 0.9);
	z-index: 1;
}
#main .mainVisual .scrollBtn {
	width: 100%;
	height: 7.8rem;
	position: relative;
	background: #005BAB;
	opacity: 0;
	transition: 0.5s;
}
#main .mainVisual .scrollBtn.on {
	opacity: 1;
}
#main .mainVisual .scrollBtn a {
	margin-top: -1.3rem;
	width: 5.2rem;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 3;
}
#main .mainVisual .scrollBtn a .arrow {
	width: 100%;
	position: absolute;
	left: 0;
	bottom: 0;
	overflow: hidden;
	aspect-ratio: 52/109;
}
#main .mainVisual .scrollBtn a .arrow::before {
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	background: url(../img/index/arrow.png) no-repeat center top / 100%;
	content: '';
	transform: translateY(-100%);
	animation: linear arrow 3s infinite;
}
#main .mainVisual .imgtext {
	margin-left: -0.5rem;
	width: 126.8rem;
	max-width: 100%;
	position: absolute;
	left: 50%;
	bottom: 18.5rem;
	transform: translateX(-50%);
	z-index: 2;
	opacity: 0;
	transition: 1s;
}
#main .mainVisual .imgtext.on {
	opacity: 1;
}
#main .mainBox {
	padding-bottom: 22.8rem;
	background: url(../img/index/bg01.png) no-repeat left calc(50% - 16.5rem) top -5.5rem / 294.9rem auto;
}
#main .news {
	margin-bottom: 1.4rem;
	padding: 3.8rem 0 6.8rem;
	background: #fff;
}
#main .news .content {
	width: 128rem;
	max-width: 98%;
	padding-right: 3rem;
	display: flex;
	justify-content: space-between;
}
#main .news .ttlBox {
	padding: 1.7rem 0 2rem;
	width: 16rem;
	display: flex;
	gap: 2rem;
	flex-direction: column;
	justify-content: space-between;
}
#main .news .headLine06 {
	line-height: 1.2;
}
#main .news .btn a {
	padding: 0.1rem 3.4rem;
	display: block;
	color: #fff;
	font-size: 1.7rem;
	font-weight: 400;
	background: #5AB0EF url(../img/common/icon10.png) no-repeat right 0.8rem top 1rem / 5.4rem;
	border-radius: 1.6rem;
}
#main .news .comNewsList {
	margin: 0 auto;
	width: 83rem;
}
#main .news .comNewsList li a {
	padding-right: 9rem;
	position: relative;
	gap: 0.5rem 6.2rem;
}
#main .news .comNewsList li a .arrow {
	width: 8.2rem;
	height: 3.2rem;
	position: absolute;
	right: 0;
	bottom: 1.9rem;
	border-radius: 1.6rem;
	background: #5AB0EF url(../img/common/icon10.png) no-repeat center top 1rem / 5.5rem;
}
/* 上段 */
.about__head{
  /* display:grid;
  grid-template-columns: 1fr 2fr;
  gap: clamp(20px, 3vw, 44px); */
  align-items:start;
  margin-bottom: clamp(22px, 3vw, 36px);
}
.about__leadWrap {
    display: grid;
    grid-template-columns: 1fr 2.5fr;
    gap: clamp(20px, 3vw, 44px);
}
.about__en{
  margin:0 0 8px;
  font-weight:800;
  letter-spacing:.06em;
  color:#122C5C;
  font-size: clamp(44px, 5vw, 64px);
  line-height:1;
}

.about__jp{
  margin:0;
  font-weight:800;
  color:#122C5C;
  font-size: clamp(20px, 2.4vw, 30px);
  line-height:1.2;
}

.about__lead{
  color:#122C5C;
  font-weight:600;
  line-height:1.9;
  font-size: 1.4rem;
}

/* 下段：2カラムカード */
.about__grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(18px, 3.4vw, 54px);
}

/* カード */
.aboutCard{
  display:block;
  color:inherit;
  text-decoration:none;
  position: relative;
}

.aboutCard__media{
  border-radius: var(--radius);
  overflow:hidden;
  background:#e9eff6;
  /* 画像の「横長」感を固定（キャプチャの比率に近い） */
  aspect-ratio: 16 / 9;
}

.aboutCard__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transform: scale(1);
  transition: transform .35s ease;
}

.aboutCard__body{
  margin-top: 10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  position: absolute;
	bottom: -26px;
	z-index: 2;
	width: 100%;
}

.aboutCard__ttl{
	font-weight: 800;
	color: #122C5C;
	font-size: 2.2rem;
	display:inline-block; 
	background: #fff;
	padding: 4px 8px 4px 0;
	position: absolute;
    bottom: 3.4rem;
}
.aboutCard__text {
	width: 100%;
  	max-width: 100%;
}
.aboutCard__descWrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
	    padding: 12px 0 12px;
	background: #fff;
}
.aboutCard__desc{
  margin:0;
  color:#122C5C;
  font-weight:700;
  font-size: 1.6rem;
  line-height:1.7;
  display:block;
  width: 100%;
  background:#fff;
}

.aboutCard__btn{
  flex:0 0 auto;
  width:64px;
  height:28px;
  border-radius:999px;
  background:#122C5C;
  color:#fff;
  display:grid;
  place-items:center;
  font-weight:900;
  letter-spacing:.02em;
  transition: transform .25s ease, background .25s ease;
}
.about__grid > .aboutCard:nth-child(even){
  /* transform: translateY(-36px); */
}
.about__grid > .aboutCard:nth-child(even) .aboutCard__body {
    /* bottom: 0; */
}

/* hover */
@media (hover:hover){
  .aboutCard:hover .aboutCard__media img{ transform: scale(1.04); }
  .aboutCard:hover .aboutCard__btn{ transform: translateX(4px); background:#122C5C; }
}

/* #main .linkBox {
	margin: 0 auto;
	max-width: 96rem;
}
#main .linkBox a {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-direction: row-reverse;
}
#main .linkBox .photo {
	width: 39rem;
}
#main .linkBox .photo img {
	width: 100%;
}
#main .linkBox .text {
	display: flex;
	align-items: center;
	flex: 1;
	color: #122C5C;
	font-size: 3.6rem;
	font-weight: 500;
}
#main .linkBox .text .txtInner {
	padding: 0 1.5rem 1rem 0;
	width: fit-content;
	display: block;
	position: relative;
}
#main .linkBox .text .line {
	flex: 1;
	height: 2rem;
	position: relative;
	overflow-x: clip;
}
#main .linkBox .text .line::before {
	width: 1.1rem;
	height: 1.1rem;
	position: absolute;
	top: 50%;
	left: 0;
	border-radius: 100%;
	transform: translateY(-50%);
	background: #003448;
	content: '';
}
#main .linkBox .text .line::after {
	width: 0;
	height: 0.1rem;
	position: absolute;
	top: 50%;
	left: 0;
	background: #003448;
	content: '';
	animation: lineRev 1s ease-in-out infinite;
}
#main .linkBox .item02,
#main .linkBox .item03 {
	margin-top: -5.5rem;
}
#main .linkBox .item02 a {
	flex-direction: row;
}
#main .linkBox .item02 .text .txtInner {
	padding-right: 0;
	padding-left: 2rem;
}
#main .linkBox .item02 .text {
	flex-direction: row-reverse;
}
#main .linkBox .item02 .text .line::before {
	left: auto;
	right: 0;
}
#main .linkBox .item02 .text .line::after {
	left: auto;
	right: 0;
	animation: line 1s ease-in-out infinite;
} */
/* @keyframes line {
	0% {
		width: 0;
		left: 0;
		right: auto;
	}
	50% {
		width: 100%;
	}
	100% {
		width: 0;
		right: 0;
		left: auto;
	}
}
@keyframes lineRev {
	0% {
		width: 0;
		right: 0;
		left: auto;
	}
	50% {
		width: 100%;
	}
	100% {
		width: 0;
		left: 0;
		right: auto;
	}
} */
@media all and (min-width: 897px) {
	#main .news .comNewsList li:nth-child(4) {
		display: none;
	}
}
@media all and (max-width: 896px) {
	#main .mainVisual .bg {
		height: 9rem;
		bottom: 3.9rem;
	}
	#main .mainVisual .bg::before {
		height: 27.7rem;
		bottom: 0;
		top: auto;
		transform: none;
	}
	#main .mainVisual .bg::after {
		height: 11.2rem;
		clip-path: polygon(0 0, 100% 7.1rem, 100% 100%, 0 100%);
	}
	#main .mainVisual .scrollBtn {
		height: 3.9rem;
	}
	#main .mainVisual .scrollBtn a {
		margin-top: 3.3rem;
		width: 2.6rem;
	}
	#main .mainVisual .imgtext {
		margin-left: 0;
		width: 31.5rem;
		bottom: 5.6rem;
	}
	#main .mainBox {
		padding-bottom: 0;
		background: none;
	}
	#main .news {
		margin-bottom: 0;
		padding: 7.2rem 0 4.5rem;
	}
	#main .news .content {
		padding: 0 0 6rem;
		max-width: initial;
		display: block;
	}
	#main .news .ttlBox {
		margin-bottom: 2.3rem;
		padding: 0;
		width: auto;
		display: block;
	}
	#main .news .headLine06 {
		text-align: center;
	}
	#main .news .btn {
		width: 13rem;
		position: absolute;
		left: 50%;
		bottom: 0;
		transform: translateX(-50%);
	}
	#main .news .btn a {
		padding: 0.3rem 2.6rem;
		background-size: 3.6rem;
		background-position: right 1.5rem top 1.4rem;
		border-radius: 2rem;
	}
	#main .news .comNewsList {
		margin: 0;
		width: auto;
	}
	#main .news .comNewsList li a {
		padding-right: 0;
		gap: 0.1rem 0.6rem;
	}
	#main .news .comNewsList li a .arrow {
		display: none;
	}
	#main .bgBox {
		padding: 3rem 0 17rem;
		background: url(../img/index/bg01_sp.png) no-repeat center top / 100% auto;
	}
	.about__head{
		grid-template-columns: 1fr;
	}
	.about__grid{
		grid-template-columns: 1fr;
	}
	.about__leadWrap {
		display: block;
	}
	.about__jp {
		margin-bottom: 12px;
	}
	.about__inner{
		width:min(1120px, calc(100% - 32px));
	}
	.about__grid {
		gap: clamp(36px, 8.4vw, 74px);
	}
	.about__grid > .aboutCard:nth-child(even){
		transform: translateY(0);
	}
	.aboutCard__desc {
		font-weight: 600;
		font-size: 1.2rem;
	}
	.aboutCard__ttl {
		font-size: 2.0rem;
	}
	/* #main .linkBox {
		max-width: 87.5%;
	}
	#main .linkBox .item01,
	#main .linkBox .item02 {
		margin-bottom: 3.9rem;
	}
	#main .linkBox a {
		display: block;
		position: relative;
	}
	#main .linkBox .photo {
		width: 100%;
	}
	#main .linkBox .text {
		margin-top: -0.3rem;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		white-space: nowrap;
		text-align: center;
		color: #fff;
		font-size: 2.4rem;
		font-weight: 500;
		line-height: 1.33;
		text-shadow: 0.4rem 0.4rem 0.8rem rgba(18, 44, 92, 0.6);
	}
	#main .linkBox .text .txtInner {
		padding: 0;
	}
	#main .linkBox .text .line {
		display: none;
	}
	#main .linkBox .item02,
	#main .linkBox .item03 {
		margin-top: 0;
	}
	#main .linkBox .item02 .text .txtInner {
		padding: 0;
	} */
}