@charset "utf-8";

/*		Contents
---------------------------------------------------------------------------

	TOP								[ / ]

------------------------------------------------------------------------ */

/* ========================================================================
	TOP								[ / ]
======================================================================== */
#top{
	margin-bottom:-100px;
}

#top h2{
	margin:0 0 80px 0;
	font-weight:700;
	line-height:1;
}

#top h2 .en{
	display:block;
	padding:0 0 15px 0;
	font-size:7.2rem;
	color:#0675f3;
}

#top h2 .ja{
	display:block;
	font-size:2.0rem;
}

@media screen and (max-width:768px){
#top{
	margin-bottom:-20px;
}

#top h2{
	margin:0 0 40px 0;
}

#top h2 .en{
	padding:0 0 5px 0;
	font-size:4.0rem;
}

#top h2 .ja{
	font-size:1.6rem;
	line-height:2.6rem;
}
}


/* ----------------------------------------
	hero
---------------------------------------- */
#top .hero{
	position:relative;
	height:100dvh;
	background:url(../../img/home/bg_hero.jpg) no-repeat center;
	background-size:cover;
}

@media screen and (max-width:768px){
#top .hero{
	height:auto;
	background:none;
}
}


/* key
---------------------------------------- */
#top .hero .key{
	position:absolute;
	bottom:10px;
	left:150px;
}

#top .hero .key p.lead{
	margin:0 0 32px 0;
}

#top .hero .key .txt{
	margin:230px 0 0 0;
	font-size:1.5rem;
	font-weight:700;
	color:#ffffff;
	line-height:1;
	letter-spacing:1.6em;
}

@media screen and (max-width:768px){
#top .hero .key{
	position:relative;
	bottom:auto;
	left:auto;
	height:460px;
	padding:140px 34px 0;
	background:url(../../img/home/bg_hero.jpg) no-repeat -140px center;
	background-size:cover;
}

#top .hero .key p.lead{
	margin:0 0 40px 0;
}

#top .hero .key p.lead img{
	width:306px;
}

#top .hero .key .btn img{
	width:175px;
}

#top .hero .key .txt{
	position:absolute;
	bottom:10px;
	right:10px;
	margin:0;
	font-size:min(2.0vw, 1.5rem); /* 750px */
	letter-spacing:1.6em;
	white-space:nowrap;
}
}


/* news
---------------------------------------- */
#top .hero .news{
	display:flex;
	position:absolute;
	bottom:0;
	right:0;
	width:648px;
	height:279px;
	padding:25px 40px 45px;
	background:#f5f5f2;
}

#top .hero .news h2{
	margin:0;
	padding:20px 30px 0 0;
	font-size:2.8rem;
	color:#0675f3;
	letter-spacing:0.28em;
	writing-mode:vertical-rl;
}

@media screen and (max-width:768px){
#top .hero .news{
	display:block;
	position:static;
	width:auto;
	height:auto;
	padding:30px 20px;
}

#top .hero .news h2{
	margin:0 0 20px 0;
	padding:0;
	font-size:2.0rem;
	letter-spacing:0.06em;
	writing-mode:horizontal-tb;
}
}


/* ---------- widget_list ---------- */
#top .hero .news .widget_list{
	flex:1;
	margin:0;
	background:none;
}

#top .hero .news .widget_list li a{
	padding-right:39px;
}

#top .hero .news .widget_list li .cat{
	margin:0 14px 0 12px;
}

#top .hero .news .widget_list .title{
	overflow:hidden;
	width:288px;
	white-space:nowrap;
	text-overflow:ellipsis;
}

@media screen and (max-width:768px){
#top .hero .news .widget_list{
	margin:0 0 30px 0;
	background:url(../../img/common/line.png) repeat-x left top;
}

#top .hero .news .widget_list li a{
	padding-right:30px;
}

#top .hero .news .widget_list li .cat{
	margin:0 10px;
}

#top .hero .news .widget_list .title{
	width:100%;
	white-space:normal;
	text-overflow:clip;
}
}


/* ---------- widget_btn ---------- */
#top .hero .news .widget_btn{
	position:absolute;
	bottom:20px;
	right:40px;
	margin:0;
	z-index:1;
}

@media screen and (max-width:768px){
#top .hero .news .widget_btn{
	position:static;
}
}


/* ----------------------------------------
	about
---------------------------------------- */
#top .about{
	overflow:hidden;
	position:relative;
	padding:120px 0 40px 0;
	background:#e8f4f4;
	text-align:center;
}

#top .about::before{
	content:"";
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:746px;
	background:url(../../img/home/bg_about01.png) repeat-x center bottom #ffffff;
}

#top .about .inner > p{
	margin:0 0 50px 0;
}

#top .about .inner > p.lead{
	font-size:3.0rem;
	font-weight:700;
	line-height:4.8rem;
}
#top .about .inner > p.lead .orange{ color:#ea6300; }
#top .about .inner > p.lead .blue{ color:#0675f3; }

@media screen and (max-width:768px){
#top .about{
	padding:60px 0 0 0;
	background:none;
	text-align:left;
}
#top .about::before{ content:none; }

#top .about .inner > p{
	margin:0 0 40px 0;
}

#top .about .inner > p.lead{
	margin:0 0 20px 0;
	font-size:2.0rem;
	line-height:3.0rem;
}
}


/* ul
---------------------------------------- */
#top .about ul li{
	position:relative;
	padding:0 0 70px 0;
}

#top .about ul li:nth-child(1)::before,
#top .about ul li:nth-child(3)::before{
	content:"";
	position:absolute;
	bottom:110px;
	left:50%;
	width:768px;
	height:446px;
	margin:0 0 0 328px;
	background:url(../../img/home/bg_about02.png) no-repeat center;
}
#top .about ul li:nth-child(3)::before{
	left:auto;
	bottom:-56px;
	right:50%;
	margin:0 250px 0 0;
}

#top .about ul li p{
	position:relative;
}

@media screen and (max-width:768px){
#top .about ul{
	margin:0 -20px;
	padding:0 20px 20px;
	background:#e8f4f4;
}

#top .about ul li{
	padding:0 0 40px 0;
}

#top .about ul li:nth-child(1)::before,
#top .about ul li:nth-child(3)::before{
	bottom:60px;
	width:384px;
	height:223px;
	margin:0 0 0 -65px;
	background-size:cover;
}
#top .about ul li:nth-child(3)::before{
	bottom:-103px;
	margin:0 -25px 0 0;
}

#top .about ul li:nth-child(1)::after{
	content:"";
	position:absolute;
	top:0;
	left:-20px;
	width:100vw;
	aspect-ratio:75/16;
	background:url(../../img/home/bg_about01.png) repeat-x center bottom #ffffff;
	background-size:51px 5px;
}
}


/* ---------- img ---------- */
#top .about ul li .img{
	overflow:hidden;
	position:relative;
	margin:0 0 30px 0;
}

#top .about ul li h3{
	position:absolute;
	top:0;
	left:0;
}
#top .about ul li:nth-child(2) h3{
	left:auto;
	right:0;
}

#top .about ul li .txt{
	position:absolute;
	top:18px;
	right:14px;
	font-size:1.5rem;
	font-weight:700;
	color:#ffffff;
	line-height:1;
	letter-spacing:0.74em;
	opacity:0.6;
}

#top .about ul li:nth-child(2) .txt{
	right:auto;
	left:18px;
	color:#121212;
}
#top .about ul li:nth-child(3) .txt{ color:#152607; }

#top .about ul li .lead{
	position:absolute;
	bottom:10px;
	right:10px;
	margin:0;
	text-align:right;
	font-size:2.4rem;
	font-weight:700;
	color:#ffffff;
	line-height:5.0rem;
}
#top .about ul li:nth-child(2) .lead{
	right:auto;
	left:10px;
	text-align:left;
}

#top .about ul li .lead span{
	padding:5px 0 5px 10px;
	background:#0675f3;
}

@media screen and (max-width:768px){
#top .about ul li .img{
	aspect-ratio:67/40;
	margin:0 0 20px 0;
	z-index:1;
}

#top .about ul li .img > img{
	width:100%;
	height:100%;
	object-fit:cover;
	object-position:left center;
}
#top .about ul li:nth-child(2) .img > img{ object-position:center; }
#top .about ul li:nth-child(3) .img > img{ object-position:30% center; }

#top .about ul li h3 > img{
	width:auto;
	height:53.3333vw; /* 750px */
}

#top .about ul li .txt{
	top:10px;
	right:10px;
	font-size:min(2.0vw, 100%); /* 750px */
}
#top .about ul li:nth-child(2) .txt{ left:10px; }

#top .about ul li .lead{
	font-size:min(3.2vw, 2.4rem); /* 750px */
	line-height:min(6.6666vw, 5.0rem); /* 750px */
	letter-spacing:normal;
}

#top .about ul li .lead span{
	padding:min(0.6666vw, 5px) 0 min(0.6666vw, 5px) 10px; /* 750px */
}
}


/* ----------------------------------------
	access
---------------------------------------- */
#top .access{
	position:relative;
	height:700px;
	background:url(../../img/home/bg_access.png) no-repeat center #2c7f23;
	color:#ffffff;
}

#top .access h2{
	margin:0 0 230px 0;
	padding:110px 0 0 0;
}

#top .access h2 .en{
	color:#ffffff;
}

#top .access figure{
	position:absolute;
	top:37px;
	right:-50px;
}

#top .access p{
	font-size:1.6rem;
}

#top .access p.lead{
	margin:0 0 26px 0;
	font-size:2.8rem;
	font-weight:700;
	line-height:3.8rem;
}

@media screen and (max-width:768px){
#top .access{
	overflow:hidden;
	height:auto;
	padding:60px 0;
	background:#2c7f23;
}

#top .access h2{
	position:relative;
	margin:0 0 20px 0;
	padding:0;
	z-index:1;
}

#top .access figure{
	position:relative;
	top:auto;
	right:auto;
	margin:0 -20px 20px;
}

#top .access figure::before{
	content:"";
	position:absolute;
	top:-81.3953%;
	left:0;
	width:100%;
	min-height:1256px;
	background:url(../../img/home/bg_access_sp.png) no-repeat center top;
	background-size:100% auto;
}

#top .access p{
	position:relative;
}

#top .access p.lead{
	margin:0 0 20px 0;
	font-size:2.0rem;
	line-height:3.0rem;
}
}