@charset "utf-8";

/*------------------------------------------------------------
	ヘッダー
------------------------------------------------------------*/
#gHeader .logo {
	/* width: 18.1rem; */
  height: 35px;
  aspect-ratio: 438 / 87;
  width: auto;
}
#gNavi li.on a {
	border-color: #0a81de;
}
@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: #0a81de;
	}
}
@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: #0a81de;
}
/*------------------------------------------------------------
	comFBox
------------------------------------------------------------*/
.comFBox {
  margin:18.48rem 0 0;
}
@media all and (max-width: 896px) {
	.comFBox {
    margin:0;
  }
}
.comFBox .fBox .lBox .logo {
	margin-bottom: 3.5rem;
	width: 23.6rem;
}
@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;
  	color: #fff;
  	font-size: 5.2rem;
  	font-weight: 700;
  	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: 8.2rem 2rem 7.7rem;
  	background-color: #7cc0dd;
  }
  #main .natural h3 {
  	margin-bottom: 3.7rem;
  	color: #fff;
  	font-size: 3.9rem;
  	letter-spacing: -0.05em;
  	line-height: 1.4;
  }
  #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: 2.2rem;
  	font-size: 1.8rem;
  	line-height: 1.88;
  }
  #main .natural .textBox .text:last-of-type {
  	margin-bottom: 0;
  }
  #main .natural .photoBox {
  	/* margin-top: -3rem; */
  	margin-top: -22px;
  	flex: 1;
  	text-align: center;
  }
  /* ================ */
  #main .business {
  	margin: 11.4rem 0 14.5rem;
  }
  #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;
  	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: #0a81de;
  	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: 12.2rem 0 8.7rem;
  	background-color: #f0f6f8;
  }
  #main .works .headLine01 {
  	width: 42rem;
  }
  #main .works .headLine01 .en {
  	color: #000;
  }
  #main .works .headLine01 .jp {
  	color: #222;
  }
  #main .works .worksBox .imgBox {
  	margin-bottom: 5rem;
  	flex: 1;
  	align-items: flex-end;
  	flex-direction: row-reverse;
  }
  #main .works .worksBox .imgBox .photoBox {
  	margin: -4.3rem auto 0;
  	width: 36.4rem;
  }
  #main .works .worksBox .imgBox .textBox {
  	padding-bottom: 1.1rem;
  	width: 30.8rem;
  }
  #main .works .worksBox h4 {
  	margin-bottom: 3.3rem;
  	font-size: 2.9rem;
  	line-height: 1.24;
  }
  #main .works .worksBox .imgBox .textBox .title {
  	font-size: 2rem;
  	font-weight: 700;
  }
  #main .works .worksBox .imgBox .textBox .text {
  	margin-bottom: 1.8rem;
  	font-size: 1.6rem;
  	font-weight: 700;
  }
  #main .works .worksBox .imgBox .textBox .snum {
  	padding-right: 0.5rem;
  	font-size: 3.7rem;
  }
  #main .works .worksBox .imgBox .textBox .bnum {
  	padding: 0 0.5rem 0 2.5rem;
  	font-size: 5rem;
  	line-height: 1.25;
  }
  #main .works .worksBox .imgBox .textBox .txt {
  	margin-bottom: 1.4rem;
  	font-size: 1.6rem;
  	line-height: 1.5625;
  }
  #main .works .worksBox .imgBox .textBox .notes {
  	font-size: 1.3rem;
  }
  #main .works .slideBox li {
  	margin-right: 5rem;
  	width: 31.5rem;
  }
  #main .works .slideBox .photo {
  	margin-bottom: 0.7rem;
  	border-radius: 1.5rem;
  	overflow: hidden;
  }
  #main .works .slideBox .textBox .ttl {
  	margin-bottom: 0.4rem;
  	font-weight: 700;
  	line-height: 2;
  }
  #main .works .slideBox .textBox .txt {
  	font-size: 1.4rem;
  	line-height: 1.78;
  }
}
@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);
  	}
  	#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:nth-of-type(2n) > 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: 6.8rem;
  		margin: 10rem 0 0;
  	}
  	#main .business .headLine01 {
  		margin-bottom: 3.7rem;
  	}
  	#main .business .imgBox {
  		margin: 0 2rem 5.5rem;
  		display: block;
  	}
  	#main .business .imgBox .textBox {
  		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: 8.5rem 0 9.7rem;
  	}
  	#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: #0a81de;
  }
  #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: #0a81de;
  }
  #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: #0a81de;
    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 .info:nth-of-type(2) {
      margin-top:20.39rem;
    }
    #main .info:nth-of-type(3) {
      margin-top:15rem;
    }
  }
}
@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;
    }
    #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;
  }
}
@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;
  	}
  }
}

/*------------------------------------------------------------
	TOPページLOGO・SVGアニメーション
------------------------------------------------------------*/
svg path {
  animation: none;
  fill: transparent;
  stroke: white;
}

.js-animate-active #tri-9 {
  animation: colorAnim-9 0.2s ease 0.0s forwards;
}
@keyframes colorAnim-9 {
  to {
    fill: #E8131F;
    stroke: white;
  }
}

.js-animate-active #tri-3 {
  animation: colorAnim-3 0.2s ease 0.05s forwards;
}
@keyframes colorAnim-3 {
  to {
    fill: #FC7E17;
    stroke: white;
  }
}

.js-animate-active #tri-10 {
  animation: colorAnim-10 0.2s ease 0.1s forwards;
}
@keyframes colorAnim-10 {
  to {
    fill: #E8131F;
    stroke: white;
  }
}

.js-animate-active #tri-33 {
  animation: colorAnim-33 0.2s ease 0.15s forwards;
}
@keyframes colorAnim-33 {
  to {
    fill: #FC7E17;
    stroke: white;
  }
}

.js-animate-active #tri-39 {
  animation: colorAnim-39 0.2s ease 0.2s forwards;
}
@keyframes colorAnim-39 {
  to {
    fill: #FC7E17;
    stroke: white;
  }
}

.js-animate-active #tri-18 {
  animation: colorAnim-18 0.2s ease 0.25s forwards;
}
@keyframes colorAnim-18 {
  to {
    fill: #FC7E17;
    stroke: white;
  }
}

.js-animate-active #tri-31 {
  animation: colorAnim-31 0.2s ease 0.3s forwards;
}
@keyframes colorAnim-31 {
  to {
    fill: #E8131F;
    stroke: white;
  }
}

.js-animate-active #tri-26 {
  animation: colorAnim-26 0.2s ease 0.35s forwards;
}
@keyframes colorAnim-26 {
  to {
    fill: #E8131F;
    stroke: white;
  }
}

.js-animate-active #tri-4 {
  animation: colorAnim-4 0.2s ease 0.4s forwards;
}
@keyframes colorAnim-4 {
  to {
    fill: #E8131F;
    stroke: white;
  }
}

.js-animate-active #tri-35 {
  animation: colorAnim-35 0.2s ease 0.45s forwards;
}
@keyframes colorAnim-35 {
  to {
    fill: #E8131F;
    stroke: white;
  }
}

.js-animate-active #tri-23 {
  animation: colorAnim-23 0.2s ease 0.5s forwards;
}
@keyframes colorAnim-23 {
  to {
    fill: #E8131F;
    stroke: white;
  }
}

.js-animate-active #tri-11 {
  animation: colorAnim-11 0.2s ease 0.55s forwards;
}
@keyframes colorAnim-11 {
  to {
    fill: #FC7E17;
    stroke: white;
  }
}

.js-animate-active #tri-30 {
  animation: colorAnim-30 0.2s ease 0.6s forwards;
}
@keyframes colorAnim-30 {
  to {
    fill: #FC7E17;
    stroke: white;
  }
}

.js-animate-active #tri-21 {
  animation: colorAnim-21 0.2s ease 0.65s forwards;
}
@keyframes colorAnim-21 {
  to {
    fill: #FC7E17;
    stroke: white;
  }
}

.js-animate-active #tri-12 {
  animation: colorAnim-12 0.2s ease 0.7s forwards;
}
@keyframes colorAnim-12 {
  to {
    fill: #E8131F;
    stroke: white;
  }
}

.js-animate-active #tri-25 {
  animation: colorAnim-25 0.2s ease 0.75s forwards;
}
@keyframes colorAnim-25 {
  to {
    fill: #FC7E17;
    stroke: white;
  }
}

.js-animate-active #tri-37 {
  animation: colorAnim-37 0.2s ease 0.8s forwards;
}
@keyframes colorAnim-37 {
  to {
    fill: #FC7E17;
    stroke: white;
  }
}

.js-animate-active #tri-38 {
  animation: colorAnim-38 0.2s ease 0.85s forwards;
}
@keyframes colorAnim-38 {
  to {
    fill: #E8131F;
    stroke: white;
  }
}

.js-animate-active #tri-28 {
  animation: colorAnim-28 0.2s ease 0.9s forwards;
}
@keyframes colorAnim-28 {
  to {
    fill: #E8131F;
    stroke: white;
  }
}

.js-animate-active #tri-13 {
  animation: colorAnim-13 0.2s ease 0.95s forwards;
}
@keyframes colorAnim-13 {
  to {
    fill: #FC7E17;
    stroke: white;
  }
}

.js-animate-active #tri-24 {
  animation: colorAnim-24 0.2s ease 1.0s forwards;
}
@keyframes colorAnim-24 {
  to {
    fill: #FC7E17;
    stroke: white;
  }
}

.js-animate-active #tri-20 {
  animation: colorAnim-20 0.2s ease 1.05s forwards;
}
@keyframes colorAnim-20 {
  to {
    fill: #FC7E17;
    stroke: white;
  }
}

.js-animate-active #tri-22 {
  animation: colorAnim-22 0.2s ease 1.1s forwards;
}
@keyframes colorAnim-22 {
  to {
    fill: #FC7E17;
    stroke: white;
  }
}

.js-animate-active #tri-29 {
  animation: colorAnim-29 0.2s ease 1.15s forwards;
}
@keyframes colorAnim-29 {
  to {
    fill: #E8131F;
    stroke: white;
  }
}

.js-animate-active #tri-43 {
  animation: colorAnim-43 0.2s ease 1.2s forwards;
}
@keyframes colorAnim-43 {
  to {
    fill: #E8131F;
    stroke: white;
  }
}

.js-animate-active #tri-0 {
  animation: colorAnim-0 0.2s ease 1.25s forwards;
}
@keyframes colorAnim-0 {
  to {
    fill: #FC7E17;
    stroke: white;
  }
}

.js-animate-active #tri-19 {
  animation: colorAnim-19 0.2s ease 1.3s forwards;
}
@keyframes colorAnim-19 {
  to {
    fill: #E8131F;
    stroke: white;
  }
}

.js-animate-active #tri-16 {
  animation: colorAnim-16 0.2s ease 1.35s forwards;
}
@keyframes colorAnim-16 {
  to {
    fill: #FC7E17;
    stroke: white;
  }
}

.js-animate-active #tri-42 {
  animation: colorAnim-42 0.2s ease 1.4s forwards;
}
@keyframes colorAnim-42 {
  to {
    fill: #FC7E17;
    stroke: white;
  }
}

.js-animate-active #tri-36 {
  animation: colorAnim-36 0.2s ease 1.45s forwards;
}
@keyframes colorAnim-36 {
  to {
    fill: #E8131F;
    stroke: white;
  }
}

.js-animate-active #tri-32 {
  animation: colorAnim-32 0.2s ease 1.5s forwards;
}
@keyframes colorAnim-32 {
  to {
    fill: #FC7E17;
    stroke: white;
  }
}

.js-animate-active #tri-41 {
  animation: colorAnim-41 0.2s ease 1.55s forwards;
}
@keyframes colorAnim-41 {
  to {
    fill: #E8131F;
    stroke: white;
  }
}

.js-animate-active #tri-2 {
  animation: colorAnim-2 0.2s ease 1.6s forwards;
}
@keyframes colorAnim-2 {
  to {
    fill: #E8131F;
    stroke: white;
  }
}

.js-animate-active #tri-27 {
  animation: colorAnim-27 0.2s ease 1.65s forwards;
}
@keyframes colorAnim-27 {
  to {
    fill: #FC7E17;
    stroke: white;
  }
}

.js-animate-active #tri-5 {
  animation: colorAnim-5 0.2s ease 1.7s forwards;
}
@keyframes colorAnim-5 {
  to {
    fill: #E8131F;
    stroke: white;
  }
}

.js-animate-active #tri-34 {
  animation: colorAnim-34 0.2s ease 1.75s forwards;
}
@keyframes colorAnim-34 {
  to {
    fill: #E8131F;
    stroke: white;
  }
}

.js-animate-active #tri-6 {
  animation: colorAnim-6 0.2s ease 1.8s forwards;
}
@keyframes colorAnim-6 {
  to {
    fill: #E8131F;
    stroke: white;
  }
}

.js-animate-active #tri-8 {
  animation: colorAnim-8 0.2s ease 1.85s forwards;
}
@keyframes colorAnim-8 {
  to {
    fill: #FC7E17;
    stroke: white;
  }
}

.js-animate-active #tri-14 {
  animation: colorAnim-14 0.2s ease 1.9s forwards;
}
@keyframes colorAnim-14 {
  to {
    fill: #E8131F;
    stroke: white;
  }
}

.js-animate-active #tri-15 {
  animation: colorAnim-15 0.2s ease 1.95s forwards;
}
@keyframes colorAnim-15 {
  to {
    fill: #FC7E17;
    stroke: white;
  }
}

.js-animate-active #tri-17 {
  animation: colorAnim-17 0.2s ease 2.0s forwards;
}
@keyframes colorAnim-17 {
  to {
    fill: #E8131F;
    stroke: white;
  }
}

.js-animate-active #tri-1 {
  animation: colorAnim-1 0.2s ease 2.05s forwards;
}
@keyframes colorAnim-1 {
  to {
    fill: #FC7E17;
    stroke: white;
  }
}

.js-animate-active #tri-7 {
  animation: colorAnim-7 0.2s ease 2.1s forwards;
}
@keyframes colorAnim-7 {
  to {
    fill: #E8131F;
    stroke: white;
  }
}

.js-animate-active #tri-40 {
  animation: colorAnim-40 0.2s ease 2.1s forwards;
}
@keyframes colorAnim-40 {
  to {
    fill: #E8131F;
    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;
  }
}

/* =================== */
.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;
}

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

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