@charset "utf-8";

/*------------------------------------------------------------
	ヘッダー
------------------------------------------------------------*/
#gHeader .logo {
	/* width: 18.1rem; */
	/* width: 20rem; */
  height: 35px;
  aspect-ratio: 472 / 87;
  width: auto;
}
#gNavi li.on a {
	border-color: #303776;
}
@media all and (min-width: 897px) and (max-width: 1170px) {
  #gHeader .logo {
    width: 15rem;
  }
	#gHeader .hBox {
		padding-left: 1rem;
	}
	#gHeader #gNavi li:last-child {
		margin-right: 1rem;
	}
	#gNavi a {
		font-size: 1.5rem;
	}
}
@media all and (min-width: 897px) {
	#gNavi a:hover {
		border-color: #303776;
	}
}
@media all and (max-width: 896px) {
	#gHeader .logo {
		/* width: 13rem; */
    height: 20px;
	}
}
/*------------------------------------------------------------
	menu
------------------------------------------------------------*/
.menuBox { 
	min-width: 128rem;
}
.menuBox .innerBox .sub {
	margin: 3rem 10.5rem 0 0;
	max-width: 26.2rem;
}
.menuBox .innerBox .sub:nth-of-type(4n) {
	margin-right: 0;
}
@media all and (max-width: 896px) {
	.menuBox {
		min-width: 0;
	}

  /* menuBox01 */
  .menuBox01 {
    padding: 11rem 4.8rem 7rem;
  }
  .menuBox01 .link {
    margin-top: -4.3rem;
    /* margin-bottom: 7.8rem; */
    margin-bottom: 4rem;
  }
  .menuBox01 li {
    margin-top: 2.2rem;
    text-align: right;
  }
  .menuBox01 li a {
    font-size: 1.6rem;
    font-weight: 700;
    color: #222;
    font-family: "Noto Sans", sans-serif;
  }
  .menuBox01 .li01 a {
    font-weight: 600;
    color: #666;
    font-size: 1.5rem;
  }
  .menuBox01 .li02 {
    margin-top: 2rem;
  }
  .menuBox01 .link .li01 + .li02 {
    /* margin-top: 5.4rem; */
    margin-top: 3rem;
  }
  .menuBox01 .li03 {
    margin-top: 5rem;
  }
  .menuBox01 .li02 a {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 1rem;
    color: #767676;
  }
  .menuBox01 .subLogo {
    margin-left: auto;
    width: 15.1rem;
  }
}
/*------------------------------------------------------------
	フッター
------------------------------------------------------------*/
#gFooter {
	padding-top: 5.2rem;
}
#gFooter .fBox {
	margin-bottom: 6rem;
}
#gFooter .logo {
	margin: 0 auto 3.9rem;
	width: 23.3rem;
}
#gFooter .brandList {
	margin-bottom: 0;
}
#gFooter .brandList li {
	margin: 0 2rem;
}
#gFooter .brandList img {
	height: 2.4rem;
}
#gFooter address {
	padding: 4.5rem 0;
	background-color: #f5f8f8;
}
@media all and (max-width: 896px) {
	#gFooter {
		padding-top: 5.8rem;
	}
	#gFooter .logo {
		width: 23.5rem;
		margin: 0 0 4.5rem;
	}
	#gFooter .brandList {
		margin: -3rem 0 0;
	}
	#gFooter address {
		padding: 4.5rem 0;
		font-size: 1rem;
	}
}
/*------------------------------------------------------------
	headLine01
------------------------------------------------------------*/
.headLine01 .en {
	color: #303776;
}
/*------------------------------------------------------------
	comFBox
------------------------------------------------------------*/
.comFBox {
  margin:18.48rem 0 0;
}
@media all and (max-width: 896px) {
	.comFBox {
    margin:0;
  }
}
/* .comFBox {
  margin:0;
} */
.comFBox .fBox .lBox .logo {
	margin-bottom: 3.5rem;
	width: 25.4rem;
}
@media all and (max-width: 896px) {
	.comFBox .fBox .lBox .logo {
		margin-bottom: 3.8rem;
	}
  .comFBox .fBox .lBox .logo img{
		height: 4rem;
	}
}
/*------------------------------------------------------------
	Top-main
------------------------------------------------------------*/
body.home{
  #main {
  	margin-bottom: 0;
  }
  #main .mainVisual {
  	height: 100vh;
  	position: relative;
  	background: url(../img/index/main_img.jpg) no-repeat center top /cover;
  }
  #main .mainVisual .content {
  	position: relative;
  	height: 100%;
  }
  #main .mainVisual .text {
  	position: absolute;
  	bottom: 4.4rem;
  	left: 6.7rem;
  	font-size: 5.2rem;
  	font-weight: 700;
  	color: #fff;
  	letter-spacing: -0.05em;
  	line-height: 1.4;
  }
  #main .scroll {
  	width: 3rem;
  	height: 21rem;
  	right: 2.3rem;
  	bottom: -8.9rem;
  	position: absolute;
  	z-index: 10;
  }
  #main .scroll a::before {
  	position: absolute;
  	z-index: 9;
  	top: 0.2rem;
  	left: 0;
  	width: 1px;
  	height: 21rem;
  	content: "";
  	background-color: #666;
  }
  #main .natural {
  	margin: 3.4rem 3.5rem;
  	border-radius: 4.9rem;
  	padding: 8rem 2rem 7.5rem;
  	background-color: #8ea0d3;
  }
  #main .natural h3 {
  	margin: 0 auto 5.7rem;
  	color: #fff;
  	font-size: 4rem;
  	letter-spacing: -0.05em;
    max-width: 120rem;
  }
  #main .natural .imgBox {
  	align-items: flex-start;
  	flex-direction: row-reverse;
  }
  #main .natural .textBox {
  	padding-right: 7rem;
  	/* width: 59rem; */
  	width: 63rem;
  }
  #main .natural .textBox .text {
  	color: #fff;
  	font-weight: 500;
  	letter-spacing: -0.05em;
  	margin-bottom: 3.5rem;
  	font-size: 1.6rem;
  	line-height: 1.81;
  }
  #main .natural .textBox .text:last-of-type {
  	margin-bottom: 0;
  }
  #main .natural .photoBox {
  	flex: 1;
  	text-align: center;
  }

  /* ================ */
  #main .business {
  	margin: 11.4rem 0 18.48rem;
  }
  #main .business .headLine01 {
  	margin-bottom: 0.8rem;
  }
  #main .business .headLine01 .en {
  	color: #000;
  }
  #main .business .headLine01 .jp {
  	color: #222;
  }
  #main .business .imgBox {
  	margin: 0 3.5rem 6rem;
  }
  #main .business .imgBox > a {
  	margin: 0 0 6rem;
  	align-items: center;
    transition: .3s;
  }
  #main .business .imgBox:last-of-type {
  	margin-bottom: 0;
  }
  #main .business .imgBox .textBox {
  	padding-bottom: 1rem;
  	width: calc(50% - 20rem);
  }
  #main .business .imgBox .textBox .sub {
  	margin-left: auto;
  	width: 40rem;
  }
  #main .business .imgBox .textBox .title {
  	margin-bottom: 7rem;
  	font-weight: 700;
  	font-size: 2.7rem;
  	line-height: 1.33;
  }
  #main .business .imgBox .textBox .title .num {
  	margin-bottom: 3.7rem;
  	display: block;
  	font-family: "Raleway", sans-serif;
  	font-weight: 500;
  	color: #303776;
  	font-size: 2rem;
  }
  #main .business .imgBox .textBox .title .sml {
  	margin-top: 0.7rem;
  	display: block;
  	font-size: 1.3rem;
  }
  #main .business .imgBox .textBox .text {
  	margin-bottom: 9.45rem;
  	font-weight: 500;
  	font-size: 2rem;
  	line-height: 1.8;
  }
  #main .business .imgBox .photoBox {
  	width: calc(50% + 13.5rem);
  	border-radius: 3rem;
  	overflow: hidden;
  }
  #main .business .imgBox:nth-of-type(2n) > a {
  	flex-direction: row-reverse;
  }
  #main .business .imgBox:nth-of-type(2n-1) > a .textBox .sub {
  	margin: 0;
  }

	#main .works {
  	padding: 111px 0 70px;
  	background-color: #f0f6f8;
  }
  #main .works .headLine01 {
  	margin:0 0 2em;
  }
  #main .works .textBox p {
  	font-size: 1.8rem;
    font-weight: 400;
    line-height:  2.2;
  }
  @media all and (max-width: 896px) {
    #main .works .textBox p {
      width: 100%;
      font-size: 1.6rem;
      padding-top: 0;
      margin-bottom: 4rem;
    }
  }
  #main .works .headLine01 .en {
  	color: #000;
    margin:0 0 .1em;
  }
  #main .works .headLine01 .jp {
  	color: #222;
  }
  #main .works .worksBox {
    padding:0 0 5rem;
  }
  #main .works .worksBox .photoBox {
  	/* margin: 0 auto; */
  	margin: -1rem auto;
  	width: 50rem;
  }
  @media all and (max-width: 896px) {
    #main .works .worksBox .photoBox {
      width: 100%;
      margin: 0 auto;
    }
  }

  #main .works .worksBox .textBox {
  	/* padding-bottom: 1.1rem; */
  	/* width: 64rem; */
  	width: 59rem;
  }
  @media all and (max-width: 896px) {
    #main .works .worksBox .textBox {
      width: 100%;
      margin-bottom: 1rem;
    }
  }
  #main .works .worksBox h4 {
  	margin-bottom: 3.3rem;
  	font-size: 2.9rem;
  	line-height: 1.24;
  }
  #main .works .worksBox .textBox .title {
  	font-size: 2rem;
  	font-weight: 700;
  }
  #main .works .worksBox .textBox .text {
  	margin-bottom: 1.8rem;
  	font-size: 1.6rem;
  	font-weight: 700;
  }
  #main .works .worksBox .textBox .snum {
  	padding-right: 0.5rem;
  	font-size: 3.7rem;
  }
  #main .works .worksBox .textBox .bnum {
  	padding: 0 0.5rem 0 2.5rem;
  	font-size: 5rem;
  	line-height: 1.25;
  }
  #main .works .worksBox .textBox .txt {
  	margin-bottom: 1.4rem;
  	font-size: 1.6rem;
  	line-height: 1.5625;
  }
  #main .works .worksBox .textBox .notes {
  	font-size: 1.3rem;
  }
}
@media all and (min-width: 897px) {
  body.home{
    #main .business .imgBox > a .photoBox img {
      transition:transform ease 0.3s
    } 
    #main .business .imgBox > a:hover .photoBox img {
  		transform: scale(1.05);
    } 
    #main .business .imgBox > a:hover .comBtn .link span {
  		border-bottom-color: #000;
  	}
  	#main .business .imgBox > a:hover .comBtn .link::after {
  		transform: scale(1.6);
  	}
  }
}
@media all and (max-width: 896px) {
  body.home{
  	#main .mainVisual {
  		background-image: url(../img/index/main_img_sp.jpg);
      background-position: center 30%;
      background-size: cover;
      background-repeat: no-repeat;
  	}
  	#main .mainVisual .text {
  		bottom: 11rem;
  		left: 1.8rem;
  		font-size: 4rem;
      font-weight: 400;
  	}
  	#main .scroll {
  		width: 2.4rem;
  		right: 1rem;
  	}
  	#main .natural {
  		padding: 7.4rem 0 3.7rem !important;
  		margin: 2rem 2rem;
  		border-radius: 2rem;
  	}
  	#main .natural h3 {
  		margin-bottom: 2.7rem !important;
  		font-size: 2.8rem;
  		letter-spacing: -0.07em;
  		line-height: 1.428;
  	}
  	#main .natural .imgBox {
  		display: block;
  	}
    #main .business .imgBox a {
      display: block;
    }
  	#main .natural .textBox {
  		padding-right: 0;
  		width: auto;
  	}
  	#main .natural .textBox .text {
  		margin-bottom: 2.4rem !important;
  		font-size: 1.4rem !important;
  		line-height: 1.85 !important;
  	}
  	#main .natural .photoBox {
  		margin: 0 auto 5.6rem;
  		width: 20.5rem;
  	}
  	#main .business {
  		padding-bottom: 0;
  		margin: 10rem 0 7rem;
  	}
  	#main .business .headLine01 {
  		margin-bottom: 3.7rem;
  	}
  	#main .business .imgBox {
  		margin: 0 2rem 5.5rem;
  		display: block;
  	}
  	#main .business .imgBox .textBox {
  		padding-bottom: 1rem;
  		width: auto;
  	}
  	#main .business .imgBox .textBox .sub {
  		margin-left: 0;
  		width: auto;
  	}
  	#main .business .imgBox .textBox .title {
  		margin-bottom: 2rem;
  		font-size: 2.2rem;
  		line-height: 1.63;
  	}
  	#main .business .imgBox .textBox .title .num {
  		margin-bottom: 2rem;
  	}
  	#main .business .imgBox .textBox .title .sml {
  		margin-top: 0;
  	}
  	#main .business .imgBox .textBox .text {
  		margin-bottom: 3.3rem;
  		font-size: 1.6rem;
  		line-height: 1.75;
  	}
  	#main .business .imgBox .photoBox {
  		margin-bottom: 2.3rem;
  		width: auto;
  		border-radius: 1.5rem;
  	}
  	#main .business .imgBox .photoBox img {
  		width: 100%;
  	}
  	#main .works {
  		padding: 93px 0 47px;
  	}
  	#main .works .headLine01 {
  		margin-bottom: 5.5rem;
  		width: auto;
  	}
  	#main .works .worksBox {
  		display: block;
  	}
  	#main .works .worksBox .imgBox {
  		display: block;
  	}
  	#main .works .worksBox .imgBox .photoBox {
  		margin: 0 auto 2rem;
  		width: 34.9rem;
  	}
  	#main .works .worksBox .imgBox .textBox {
  		padding-bottom: 0;
  		width: auto;
  	}
  	#main .works .worksBox h4 {
  		margin-bottom: 2.3rem;
  		font-size: 2.9rem;
  		line-height: 1.24;
  	}
  	#main .works .worksBox .imgBox .textBox .text {
  		margin-bottom: 2.3rem;
  	}
  	#main .works .slideBox .textBox .ttl {
  		margin-bottom: 0.4rem;
  		font-size: 1.8rem;
  	}
  }
}
/*------------------------------------------------------------
    Business-main
------------------------------------------------------------*/
body.business{
  #main {
    margin-bottom: 0;
  }
  #main .pageTitle {
    margin-bottom: 0 !important;
  }
  #main .content {
    position: relative;
  }
  #main .fixBox {
    position: absolute;
    z-index: 101;
    left: 0;
    top: 8.4rem;
    height: calc(100% - 8.4rem);
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    padding-bottom:12rem;
  }
  #main .fixBox .scroll {
    width: 2.5rem;
    height: 11.9rem;
    position: sticky;
    bottom: 0;
    transition: opacity .5s;
    margin-top:12rem;
  }
  #main .fixBox .scroll.hidden {
    opacity:0;
    pointer-events:none;
  }
  #main .fixBox .scroll a {
    padding-left: 0.7rem;
    color: #222;
  }
  #main .fixBox .scroll a::after {
    background-color: #303776;
  }
  #main .fixList {
    position: sticky;
    left: 0;
    top: 16rem;
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.46;
    margin-bottom:12rem;
  }
  #main .fixBox.is-bottom .fixList {
    position:static;
  }
  #main .fixList li:not(:last-child) {
    margin-bottom: 2.1rem;
  }
  #main .fixList a {
    padding-left: 2.6rem;
    position: relative;
    display: inline-block;
  }
  #main .fixList a:hover {
    opacity: 0.7;
  }
  #main .fixList .num {
    position: absolute;
    left: 0;
    top: -1px;
    color: #A8A8A8;
    font-size: 1.5rem;
    font-weight: 500;
    font-family: "Raleway", sans-serif;
  }
  #main .fixList .on .num {
    color: #303776;
  }
  #main .info {
    padding: 4.6rem 0 0 0;
    margin:0 0 0 23.5rem;
  }
  #main .info:not(:first-child) {
    border-top: 1px solid #D8D8D8;
  }
  #main .textBox {
    width: 45rem;
    position:sticky;
    top:13rem;
  }
  #main .textBox h3 {
    margin-bottom: 3.2rem;
    min-height: 10.8rem;
    font-weight: 700;
    font-size: 3.8rem;
    line-height: 1.42;
  }
  #main .textBox h3 .sml {
    margin: -0.9rem 0 0 1.2rem;
    font-size: 1.7rem;
    display: inline-block;
    vertical-align: middle;
  }
  #main .textBox .title {
    margin: 0 -1rem 1.7rem 0;
    font-weight: 500;
    font-size: 2.4rem;
    line-height: 1.54;
  }
  #main .textBox p {
    line-height: 1.875;
    font-size: 1.6rem;
    color: #222;
  }
  #main .phoList li:not(:last-child) {
    margin-bottom: 4.8rem;
  }
  #main .imgBox {
    align-items:flex-start;
  }
  #main .imgBox img {
    width: 100%;
    border-radius: 1rem;
  }
  #main .phoList h4 {
    margin: 1.4rem 0 0.9rem;
    color: #303776;
    font-size: 2.2rem;
    font-weight: 700;
  }
  #main .phoList p {
    color: #222;
    font-size: 1.3rem;
    line-height: 1.84;
  }
  #main .sentinel{
    height:1px;
  }
}
@media all and (min-width: 897px) {
  body.business{
    #main .phoList,
    #main .phoBox {
      width: 44rem;
    }
    /* #main .phoBox {
      margin-top: 1.2rem;
    } */
    #main .info:nth-of-type(2) {
      /* margin-top:25.69rem; */
      margin-top:14.95rem;
      margin-bottom: 14.95rem;
    }
  }
}
@media all and (max-width: 896px) {
  body.business{
    #main .pageTitle {
      padding-bottom: 3.5rem;
      margin-bottom: 3.5rem !important;
    }
    #main .content {
      position: relative;
    }
    #main > .content {
      grid-template-columns: 1fr;
      gap: 0;
    }
    #main .fixBox {
      padding-top:0;
      margin-bottom: 0;
      position: static;
      height: fit-content;
    }
    #main .fixList {
      margin-bottom: 0;
    }
    #main .fixList li:not(:last-child) {
      margin-bottom: 1rem;
    }
    #main .info {
      padding: 0 0 8.7rem 0;
      margin:0;
    }
    #main .info:not(:first-child) {
      padding-top: 7.8rem;
      margin-bottom: 0;
    }
    #main .textBox {
      width: auto;
      margin: 0 0 3.7rem;
      position:static;
    }
    #main .textBox h3 {
      margin-bottom: 2.4rem;
      min-height: fit-content;
      font-size: 2.8rem;
      line-height: 1.5;
    }
    #main .textBox h3 .sml {
      margin-top: -0.5rem;
      font-size: 1.4rem;
    }
    #main .textBox .title {
      margin: 0 0 1.7rem;
      font-size: 1.8rem;
      line-height: 1.44;
    }
    #main .textBox p {
      line-height: 1.846;
      font-size: 1.3rem;
    }
    #main .phoList li:not(:last-child) {
      margin-bottom: 5.8rem;
    }
    #main .phoList h4 {
      margin: 1.9rem 0 1rem;
      font-size: 1.8rem;
    }
  }
}
/*------------------------------------------------------------
	company
------------------------------------------------------------*/
body.company{
  #main {
  	margin-bottom: 0;
  }
  #main section {
  	margin-bottom: 9rem;
  }
  #main .pageTitle {
  	margin-bottom: 8.4rem;
  }
  #main .dlBox {
  	margin: 0 2.5rem;
  }
  #main .dlBox dl {
  	width: 46.8%;
  	line-height: 2;
  }
  #main .dlBox dt {
  	margin-top: 0.5rem;
  	float: left;
  	font-weight: 700;
  	letter-spacing: -0.05em;
  }
  #main .dlBox  dd {
  	padding: 0.5rem 0 1.8rem 9.3em;
  	letter-spacing: -0.05em;
  }

  .ng-company-bottom {
    padding-bottom: 9.48rem;
  }
}
@media all and (max-width: 896px) {
  body.company{
  	#main section {
  		margin-bottom: 8.5rem;
  	}
  	#main .pageTitle {
  		padding-bottom: 3.5rem;
  		margin-bottom: 3rem;
  	}
  	#main .dlBox {
  		margin: 0;
  		display: block;
  	}
  	#main .dlBox dl {
  		width: auto;
  		line-height: 2;
  	}
  	#main .dlBox dt {
  		float: none;
  		font-size: 1.5rem;
  	}
  	#main .dlBox  dd {
  		padding: 0.4rem 0 2rem;
  		font-size: 1.5rem;
  		line-height: 1.66;
  		letter-spacing: -0.05em;
  	}

    .ng-company-bottom {
      padding-bottom: 0;
    }
  }
}
/*------------------------------------------------------------
	LOGO・SVGアニメーション
------------------------------------------------------------*/
svg path {
  animation: none;
  fill: transparent;
  stroke: white;
}
/*------------------------------------------------------------
	改行
------------------------------------------------------------*/
.br-sm {
  display: none;
}
@media all and (max-width: 896px) {
  .br-sm {
    display: block;
  }
}

.br-sm-hide {
  display: block;
}
@media all and (max-width: 896px) {
  .br-sm-hide {
    display: none;
  }
}

/*------------------------------------------------------------
	Development-title
------------------------------------------------------------*/

.n-development__title {
  margin-bottom: 68px;
}

.n-development__title b {
  font-size: 9rem;
}

.n-development__title .en {
  color: #000;
}
.n-development__title .jp {
  display: block;
  color: #222;
}

@media all and (max-width: 896px) {
  .n-development__title {
    margin-bottom: 40px;
  }
  .n-development__title .c-animated-title b {
    font-size: 5.2rem;
  }
}

/* =================== */
.mv__deco {
  position: fixed; /* 背景として固定 */
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  z-index: -100;
  transition: opacity 0.1s linear;
}

.mv__deco.is-transparent {
  opacity: 0.2;
}

@media all and (min-width: 897px) {
	.sp {
		display: none !important;
	}
}

.n-business-flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

@media all and (max-width: 896px) {
  .n-business-flex {
    display: block;
  }
}

.samall-word {
  font-size: .7em;
  line-height: 2;
  vertical-align: 0em;
  font-variant-position: sub; /* フォントに真の下付きがあれば使う */
}