@charset "UTF-8";
html{scroll-behavior: smooth;}
:target {
  scroll-margin-top: 90px; 
}
body {position: relative;
	font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif;overflow-x: clip;}
body.page{padding-top: 80px;}
body.menu-open {
    overflow: clip;
  }
/* 改行消し */
.br-pc {display: none;}
.br-sp {display: block;}

@media (max-width:767px){
	.br-sp {display: none;}
	.br-pc {display: block;}
	
}/* max-width:767px */

/*header*/
header{width: 100%; display: flex;justify-content: space-between;transition: all 0.3s ease; z-index: 9999; position: absolute;}
header .header-left{padding: 22px 20px;z-index: 11;}
header .header-left a{display: block;width: 255px;height: 37px;
	background:url("../image/logo-white.svg") no-repeat;background-size: contain;
	text-indent:100%;white-space:nowrap;overflow:hidden;}

header .header-right{text-align: right; color: #fff; font-size: 17px; font-weight: 600; display: flex; gap: 20px; width: 100%; justify-content: flex-end; align-items: center; padding-right: 20px;}
header .header-right nav{float:left;}
header .header-right nav ul{display: flex; gap: 30px;}
header .header-right-group{font-size: 12px;font-family: "Zen Kaku Gothic New";font-weight: 900;font-style: normal;}
header .header-right-btn a {position: relative; display: block; width: 220px; padding: 10px 20px; border: 1px solid #fff; border-radius: 50px;
  color: #fff; text-decoration: none; font-size: 16px; font-weight: 600; text-align: center; transition: background 0.3s, color 0.3s;}
header.header-toggle .header-right-btn a {background-color: #294C7A; color: #fff; border: none;}



/*PC-hover*/
@media (min-width: 1101px) {
header .header-right nav ul li a,footer nav ul a{position: relative;}
header .header-right nav ul li a::after,footer nav ul a::after {
position: absolute;left: 0;content: '';width: 100%;height: 1px;background: #fff;bottom: -2px;transform: scale(0, 1); transform-origin: left top;transition: transform 0.3s; }

header .header-right nav ul li a:hover::after,footer nav ul a:hover::after {
transform: scale(1, 1);     /*ホバー後、x軸方向に1（相対値）伸長*/
}
header.header-toggle .header-right nav ul li a::after{background: #000;}
header .header-right-btn a:hover{background-color: rgba(255, 255, 255, 0.2);}
	header.header-toggle .header-right-btn a:hover{border: 1px solid #294C7A;color: #294C7A;}
}




/*toggle*/
header.header-toggle{position: fixed;background: #fff;top: 0;}
header.header-toggle .header-left a,.menu-open header .header-left a{background:url("../image/logo-black.svg") center top / contain no-repeat;}

header.header-toggle .header-right,.menu-open .header-right{color: #000;}


/*SP*/
header button{display:none;}

#overlay {visibility: hidden;opacity: 0;position: fixed;top: 0;left: 0;
  width: 100%;height: 100%;background: rgba(0, 0, 0, 0.5);z-index: 8;
  transition: opacity 0.3s; }

  /* オープン時のオーバーレイ */
.menu-open #overlay {visibility: visible;opacity: 1;}


.header-menu-sp{display:none;}
@media (max-width: 1100px) {
  header .header-left a{width: 230px;height: 34px;}
  header .header-right{font-size: 16px; gap: 20px;}
  header .header-right nav ul{gap: 24px;}
  header .header-right-btn a {width: 140px; padding: 10px 20px; border: 1px solid #fff; font-size: 16px;}
}/* max-width:1100px */

@media (max-width:960px){
	body.page{padding-top: 64px;}
.header-menu-sp{display:block;margin: 0 auto;text-align: center;}
.header-menu-sp span{display:inline-block;}
.header-menu-sp a{display:block;font-size: 14px;margin: 20px 0;}
header button{position: fixed;right: 20px;top: 24px;
  display: grid;place-items: center;place-content: center;
	width: 30px;height: 30px;
  border: none;cursor: pointer;z-index: 10;}
header button .bar,
header button .bar::before,
header button .bar::after {width: 36px;height: 2px;background-color: #fff;transition:transform 0.3s;}
header button .bar{display: grid;margin-bottom: 14px;}
header button .bar::before,
header button .bar::after{content: "";grid-area: 1 / 1;}
header button .bar::before{transform: translateY(-10px);}	
header button .bar::after{transform: translateY(10px);}
header button .menu-label{font-family: "Roboto";color: #fff;font-size: 13px;}
header .header-right-group-sp{font-size: 14px;font-family: "Zen Kaku Gothic New";font-weight: 900;font-style: normal;text-align: center;}
.menu-open .bar {background-color: transparent !important;}
.menu-open .bar::before {transform: rotate(40deg);}
.menu-open .bar::after {transform: rotate(-40deg);}
	.menu-open 	header{background-color:#fff;}
header .header-left{padding:13px 20px;}
header .header-left a{width: 255px; height: 38px;}

#menu {
position: fixed;width: 100vw;background-color: #fff;inset: 50px 0 0;z-index: 9;
overflow-y: auto;transform: translateY(-150%);transition: transform 0.3s ease-out;}
.menu-open #menu {transform: translateY(0);}
	.menu-open header button{background-color: #fff;}
header.header-toggle button .bar,
header.header-toggle button .bar::before,
header.header-toggle button .bar::after {background-color: #000;}
header.header-toggle button .menu-label{color: #000;}
	
.menu-open header button .bar,
.menu-open header button .bar::before,
.menu-open header button .bar::after {background-color: #000;}
.menu-open header button .menu-label{color: #000;}
	
	
header .header-right{text-align: left;display: flex; gap: 10px; width: 100%; justify-content: flex-start; align-items:flex-start; padding-right: 0px;flex-direction: column;font-size: 19px;}
	header .header-right ul a{color: #294C7A;display: block;border-bottom: 1px solid #DCDCDC;padding: 0 0 20px;position: relative;}
header .header-right nav{float:left;padding: 20px 20px 0;width: 100%}
header .header-right nav ul{ gap: 30px;flex-direction: column;}
	header .header-right nav ul a::before{display: block; content: '';background: url(../image/navy-arrow.png) center top / contain no-repeat;width: 16px;height:16px;right: 10px;top: 15px; position: absolute;}
	header .header-right nav ul a::after{color: #767676;font-size:12px; }
	header .header-right nav ul li:first-child a::after{content: 'Company';display: block;}
	header .header-right nav ul li:nth-child(2) a::after{content: 'Works';display: block;}
	header .header-right nav ul li:nth-child(3) a::after{content: 'Project';display: block;}
	header .header-right nav ul li:nth-child(4) a::after{content: 'Sustainability';display: block;}
	header .header-right nav ul li:nth-child(5) a::after{content: 'Recruit';display: block;}
	
header .header-right-group{display: none;}
header .header-right-btn a{position: relative; display: block; width: 220px; padding: 10px 20px; border: 1px solid #fff; border-radius: 50px;
  color: #fff; text-decoration: none; font-size: 16px; font-weight: 600; text-align: center; transition: background 0.3s, color 0.3s;}
	
	
	header .header-right-btn{width:100%;padding: 20px;}
	header .header-right-btn a{padding:20px;font-size: 16px;}
header.header-toggle .header-right-btn a,.menu-open header .header-right-btn a{background-color: #294C7A; color: #fff; border: none;width: 100%;}

header .header-right nav ul li a:hover {border-bottom: 1px solid #000;}
	
	
	main{overflow: hidden;}
}/* max-width:960px */

@media (max-width:480px){
	body.page{padding-top: 54px;}
  header button{position: fixed;right: 20px;top: 16px;
    display: grid;place-items: center;place-content: center;
    width: 30px;height: 30px;
    border: none;cursor: pointer;z-index: 10;}
  header button .bar,
  header button .bar::before,
  header button .bar::after {width: 26px;height: 2px;background-color: #fff;transition:transform 0.3s;}
  header button .bar{display: grid;margin-bottom: 7px;}
  header button .bar::before,
  header button .bar::after{content: "";grid-area: 1 / 1;}
  header button .bar::before{transform: translateY(-6px);}	
  header button .bar::after{transform: translateY(6px);}
  header button .menu-label{font-family: "Roboto";color: #fff;font-size: 9px;}
    
  header .header-left{padding:13px 20px;}
  header .header-left a{width: 177px;height: 26px;}
  header .header-right{position: fixed;top: -100%;right: 0;}
  
  header.header-toggle button .bar,
  header.header-toggle button .bar::before,
  header.header-toggle button .bar::after {background-color: #000;}
  header.header-toggle button .menu-label{color: #000;}
}/* max-width:480px */

@media (max-width:375px){
 
}/* max-width:375px */

/*btn*/
.main-btn {position: relative; display: inline-block; width: 100%; padding: 20px; border: 1px solid #fff; border-radius: 50px; color: #fff;
  text-decoration: none; font-size: 17px; font-weight: 600; text-align: center; transition: background 0.3s, color 0.3s;}
.main-btn:hover {background-color: rgba(255,255,255,0.2);}
.white-arrow:after {content: ''; position: absolute; background: url(../image/white-arrow.png) center top / contain no-repeat;
	width: 16px; height: 16px; top: 50%; right: 30px; transform: translateY(-50%);}
.navy-arrow:after {content: ''; position: absolute; background: url(../image/navy-arrow.png) center top / contain no-repeat;
	width: 16px; height: 16px; top: 50%; right: 30px; transform: translateY(-50%);}
.navy-arrow:hover:after {background: url(../image/white-arrow.png) center top / contain no-repeat;}

@media (max-width:767px){
	.main-btn {font-size: 15px;}
}/* max-width:375px */

@media (max-width:375px){
	.main-btn {font-size: 15px;}
}/* max-width:375px */

/*footer*/
footer {position: relative; background-color: #294C7A; text-align: center; color: #fff; padding: 67px 0 12px;}
footer:before {content:"";
  position:absolute;
  left:0; right:0; top:-60px;
  height: 60px;
  pointer-events:none;
  background: no-repeat left top / 100% 100% url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920.011 60.228" preserveAspectRatio="none">\
  <path fill="%23294C7A" d="M1920.011,41.227 s-85.435,15.284-425.007,4.5 s-559.53-43.249-933.281-45.625 S0,36.227 0,36.227 l0.011,24 h1920 Z"/>\
</svg>'); z-index: 1;}


footer .f-logo {display: block; width: 255px; margin: 0 auto;}
footer nav {margin-top: 48px;}
footer nav ul {display: flex; justify-content: center; gap: 30px; font-size: 17px; font-weight: 600;}
footer .footer-btn-wrap {margin-top: 69px;}
footer .footer-btn-wrap a {font-size: 16px; max-width: 350px;}
footer .grouplink {font-size: 12px; font-weight: 900; font-family: "Zen Kaku Gothic New", sans-serif; margin-top: 116px;}
footer .sublink {font-size: 14px; font-weight: normal; margin-top: 22px;}
footer .copyright {font-size: 12px; font-weight: normal; font-family: "游ゴシック体", "Yu Gothic", YuGothic, sans-serif; margin-top: 16px;}
@media (max-width: 1536px) {
	footer:before {top:-29px;
  height: 30px;}
}
@media (max-width: 767px) {
	footer {padding: 60px 0 12px;}
	footer .f-logo {width: 197px;}
  footer nav {margin-top: 50px;}
	footer nav ul {flex-direction: column; gap: 30px; font-size: 18px;}
	footer .footer-btn-wrap {margin: 50px 20px 0;}
	footer .footer-btn-wrap a {font-size: 15px;}
	footer .grouplink {font-size: 14px; margin-top: 60px;}
	footer .sublink {margin-top: 24px;}
	footer .copyright {margin-top: 24px;}
}

@media (max-width:375px){
footer:before {top:-14px;
  height: 15px;}
	footer nav {margin-top: 40px;}
	footer nav ul {gap: 23px;}
}

.pagetop {
  position: fixed;
  right: 140px;
  bottom: 40px;
  width: 70px;  /* ボタンサイズ */
  height: 70px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 1000;
	border-radius: 33px;
  /* 初期は非表示 */
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity .25s, transform .25s;
}

.pagetop img {
  width: 100%;
  height: auto;
  display: block;
}

.pagetop.is-show {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.pagetop:hover {
  background-color: rgba(255,255,255,0.2);
}
.pagetop.second-page::after {  content:"";  width: 70px;  /* ボタンサイズ */
  height: 70px;
  position: absolute;
  inset:0;
  background: url("../image/page-up.svg") no-repeat center/cover;
  opacity:0;
  transition: .3s;}
.pagetop.second-page:hover::after {opacity:1;
}

/* 動きを減らす設定の人にはアニメーションなし */
@media (prefers-reduced-motion: reduce) {
  .pagetop {
    transition: none;
  }
}

@media (max-width: 1536px) {
	.pagetop {
		right: 70px;
		bottom: 40px;
	}
}

@media (max-width: 767px) {
	.pagetop {
		right: 20px;
		bottom: 40px;
		width: 44px;  /* ボタンサイズ */
		height: 44px;
	}
	.pagetop.second-page::after { width: 44px;height: 44px;}
}

.breadcrumb ol{font-family: "Noto Sans JP", sans-serif;font-size: 13px;margin-bottom: 90px;margin-top: 8px;
  display:flex; flex-wrap:wrap; gap:0; list-style:none;
}
.breadcrumb li{
  display:flex; align-items:center;
}
/* 2個目以降の前に「棒」を置く */
.breadcrumb li+li{
  position:relative;
  padding-left:28px;
  margin-left:0;
}
.breadcrumb li+li::before{
  content:"";
  position:absolute;
  left:4px; top:50%;
  width:20px; height:1px;
  background:#767676;
  transform:translateY(-50%);
}
.breadcrumb li a{color: #294C7A;}

