@charset "UTF-8";


@media screen and (min-width:769px){
	/*202409追加*/
	.br_pc {
	display: block;
	}
	/*202409追加*/
	.br_sp {
	display: none;
	}
	/*202409追加*/
	#about .mtl {
		color: #ea5514;
	}

	/*202308追加*/
	#about .aboutcontent .innerbox.carbon {
		color: #fff!important;
		padding-top: 0;
		padding-bottom: 200px;
	}
	#about .aboutcontent .innerbox.carbon .tl {
	    font-size: 3.4rem;
	    line-height: 7.2rem;
	    font-weight: bold;
	    text-align: center;
	    width: 100%;
	}
	#about .aboutcontent .innerbox.carbon .phbox {
		width: 100%;
		background-color: #fff;
		margin: 3.8rem auto;
		padding: 0;
	}
	#about .aboutcontent .innerbox.carbon .phbox img {
		padding: 2.6rem;
	}

	#about .aboutcontent .innerbox.carbon .tx span {
		font-size: 2.4rem;
		line-height: 4rem;
		font-weight: bold;
		display: block;
		margin-bottom: 2rem;
	}

	#about header .innerbox .linkbox .obtn .overbox.about::after{
  		transform: scale(1, 1) !important;
	}
	
	#about.wbg{
		background:#fff;
	}
	
	#about.storybg{
		background:#fff;
	}
	
	#about header{
		background-color:rgba(0,0,0,0.5);
	}
	
	#about header.bg2{
		background-color:rgba(255,255,255,0.7);
	}
	
	#about.wbg header{
		background-color:rgba(255,255,255,1);
	}
	
	#about.wbg header .innerbox .linkbox a,
	#about.wbg header .innerbox .linkbox .obtn .overbox.about{
		position: relative;
		margin:0 0 0 40px;
		padding:0 0;
		display: block;
		color:#000;
		font-size:1.6rem;
		line-height: 1;
		cursor: pointer;
		font-weight: 500;
		white-space: nowrap;
	}
	
	#about.wbg header .innerbox .linkbox .obtn .overbox {
		color: #000;
	}
	
	#about.wbg header .innerbox .linkbox a::after,
	#about.wbg header .innerbox .linkbox .obtn .overbox.about::after{
  		background: #000;
	}
	
	#about.wbg header .contact_langbtn{
		border:1px solid #000;
	}
	
	#about.wbg header .contact_langbtn a.contact{
		color:#fff;
		background:#000;
	}
	
	#about.wbg header .contact_langbtn a.contact:hover{
		background:none;
		color:#000;
	}
	
	#about.wbg header .contact_langbtn .langbtn a:hover{
		color: #000;
	}
	
	#about.wbg header .contact_langbtn .langbtn a.active{
		color:#000;
		pointer-events: none;
	}
	
	#about.wbg header .contact_langbtn .langbtn ul li.current a{
		color: #000;
	}
	
	#about.wbg header .contact_langbtn .langbtn ul li.en-US{
		border-left:1px solid #000;
	}
	
	#about.wbg header .contact_langbtn .langbtn a:last-child{
		border-right:none;
	}
	/*202409変更*/
	#about .mainarea{
		width:100%;
		padding:140px 0 0 0;
		position: relative;
		z-index:2;
	}
	
	#about .mainarea .maintl{
		color:#fff;
		font-size:10rem;
		font-weight: 900;
		text-align: center;
		line-height: 1;
		margin:0 0 45px 0;
	}
	
	#about .mainarea .subtl{
		color:#fff;
		font-size:1.6rem;
		text-align: center;
		line-height: 3.2rem;
		margin:0 0 25px 0;
	}
	
	#about .mainarea.story .subtl{
		margin:0 0 25px 0;
	}
	/*202409変更*/
	#about .mainarea.box2{
		width:100%;
		padding:140px 0 0 0;
	}
	1
	#about .mainarea .msub{
		font-size:2.8rem;
		line-height: 1;
		margin:0 0 20px 0;
		text-align: center;
		color:#fff;
	}
	
	#about .mainarea.box2 .msub{
		font-size:2.8rem;
		line-height: 1;
		margin:0 0 20px 0;
		text-align: center;
		color:#000;
	}
	
	#about .mainarea.box2 .maintl{
		color:#000;
		font-size:10rem;
		font-weight: 900;
		text-align: center;
		line-height: 1;
		margin:0 0 45px 0;
	}
	
	#about .mainarea.box2 .subtl{
		color:#000;
		font-size:1.6rem;
		text-align: center;
		line-height: 3.2rem;
		margin:0 0 25px 0;
	}
	/*202409変更*/
	#about .aboutcontent{
		padding:140px 0 0 0;
	}
	/*202409変更*/
	#about .aboutcontent .innerbox{
		width: 1000px;
		margin:0 auto;
		padding:0 60px;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
	}
	
	#about .aboutcontent .innerbox.bg{
		background:url("../images/about/about-img5.svg") no-repeat;
		background-size:calc(100% - 40px);
		background-position: left 50% top 130px;
	}
	/*202409変更*/
	#about .aboutcontent .innerbox.box2{
		width:100%;
		max-width: 630px;
		padding:0 0;
        display: flex;
        flex-direction: row;
	}
	/*202409変更*/
	#about .aboutcontent .innerbox .box2 .num{
		width: 70px;
		height: fit-content;
		margin-right: 30px;
	}
	/*202409変更*/
	#about .aboutcontent .innerbox .box2 .num img{
		width: 100%;
		height: fit-content;
	}
	/*202409変更*/
	#about .aboutcontent .innerbox .box2 .tx{
		width: calc(100% - 70px - 30px);
	}
	/*202409変更*/
	#about .aboutcontent .innerbox .phbox{
		padding:0 75px 0 0 ;
		line-height: 0;
		width:45%;
		box-sizing: border-box;
	}
	
	#about .aboutcontent .innerbox .phbox.box2{
		order: 1;
		padding:0 0 0 0;
	}
	
	#about .aboutcontent .innerbox .phbox.box3{
		order: -1;
		padding:0 0 0 0;
	}
	/*202409変更*/
	#about .aboutcontent .innerbox .txcont{
		display: flex;
		align-content: center;
		flex-direction: column;
		width:55%;
		color:#fff;
	}
	
	#about .aboutcontent .innerbox .txcont.w100{
		width:100%;
		text-align: center;
	}
	
	#about .aboutcontent .innerbox .txcont.box2{
		padding:0 90px 0 calc((100% - 1180px) / 2 + 60px);
	}
	
	#about .aboutcontent .innerbox .txcont.box3{
		padding:0 calc((100% - 1180px) / 2 + 60px) 0 90px;
	}
	
	#about .aboutcontent .innerbox .txcont .mtl{
		font-size:5rem;
		margin:0 0 70px 0;
	}
	
	#about .aboutcontent .innerbox .txcont .msub{
		font-size:3.4rem;
		line-height: 7.2rem;
	}
	
	#about .aboutcontent .innerbox .txcont .num{
		height:150px;
		line-height: 0;
		margin:0 auto 45px;
	}
	
	#about .aboutcontent .innerbox .txcont .num img{
		width:auto;
		height:100%;
	}
	
	#about .aboutcontent .innerbox .txcont .tl{
		font-size:2.8rem;
		line-height: 4.2rem;
		margin: 0 0 25px 0;
	}
	
	#about .aboutcontent .innerbox .txcont .tx{
		font-sie:1.6rem;
		line-height: 2.8rem;
		text-align: justify;
	}
	
	#about .aboutcontent .innerbox .txcont.w100 .tx{
		padding:70px 0 0 0;
		text-align: center;
	}
	/*202409変更*/
	#about .aboutcontent .listcont{
		width:100%;
		padding:90px 0 90px 0;
		color:#fff;
		gap: 40px;
        display: flex;
        flex-direction: column;
	}
	
	#about .aboutcontent .listcont .box{
		width:calc((100% - 220px) / 3);
		position: relative;
	}
	
	#about .aboutcontent .listcont .box::after{
		content: "";
		width:calc(100% + 110px);
		border-bottom:1px solid #fff;
		position: absolute;
		top:60px;
		left:50%;
		z-index:1;
		transform: scaleX(0);
	}
	
	#about .aboutcontent .listcont .box::after{
		content: "";
		width:calc(100% + 110px);
		border-bottom:1px solid #fff;
		position: absolute;
		top:60px;
		left:50%;
		z-index:1;
		transform: scaleX(0);
	}
	
	#about .aboutcontent .listcont.active .box::after{
		animation-name: borderscale;
		animation-delay: 0s;
		animation-duration: 1s;
		animation-fill-mode: forwards;
		transform:scaleX(0);
		transform-origin: left top;
	}
	
	#about .aboutcontent .listcont.active .box:nth-child(2)::after{
		animation-name: borderscale;
		animation-delay: 2s;
		animation-duration: 1s;
		animation-fill-mode: forwards;
		transform:scaleX(0);
		transform-origin: left top;
	}
	
	#about .aboutcontent .listcont .box:last-child::after{
		display: none;
	}
	
	#about .aboutcontent .listcont .box .listmtl{
		width:120px;
		height:120px;
		border-radius: 50%;
		background:#ea5514;
		display: flex;
		justify-content: center;
		align-items: center;
		margin:0 auto;
		position: relative;
		z-index:2;
		transform:scale(0.2);
	}
	
	#about .aboutcontent .listcont.active .box .listmtl{
		animation-name: listscale;
		animation-delay: 0s;
		animation-duration: 0.5s;
		animation-fill-mode: forwards;
		transform:scale(0.2);
	}
	
	#about .aboutcontent .listcont.active .box:nth-child(2) .listmtl{
		animation-name: listscale;
		animation-delay: 1s;
		animation-duration: 0.5s;
		animation-fill-mode: forwards;
		transform:scale(0.2);
	}
	
	#about .aboutcontent .listcont.active .box:nth-child(3) .listmtl{
		animation-name: listscale;
		animation-delay: 2s;
		animation-duration: 0.5s;
		animation-fill-mode: forwards;
		transform:scale(0.2);
	}
	
	#about .aboutcontent .listcont .box .listmtl .inbox{
		font-size:2rem;
		line-height: 2.1rem;
		font-weight: 600;
		text-align: center;
		opacity: 0;
	}
	
	#about .aboutcontent .listcont.active .box .listmtl .inbox{
		animation-name: listmtl;
		animation-delay: 0.5s;
		animation-duration: 1s;
		animation-fill-mode: forwards;
		opacity: 0;
	}
	
	#about .aboutcontent .listcont.active .box:nth-child(2) .listmtl .inbox{
		animation-name: listmtl;
		animation-delay: 1.5s;
		animation-duration: 1s;
		animation-fill-mode: forwards;
		opacity: 0;
	}
	
	#about .aboutcontent .listcont.active .box:nth-child(3) .listmtl .inbox{
		animation-name: listmtl;
		animation-delay: 2.5s;
		animation-duration: 1s;
		animation-fill-mode: forwards;
		opacity: 0;
	}
	
	#about .aboutcontent .listcont .box .listmtl .inbox span{
		font-weight: normal;
	}
	
	#about .aboutcontent .listcont .box .ltxcont{
		opacity: 0;
	}
	
	#about .aboutcontent .listcont.active .box .ltxcont{
		animation-name: listtx;
		animation-delay: 1s;
		animation-duration: 1s;
		animation-fill-mode: forwards;
		opacity: 0;
	}
	
	#about .aboutcontent .listcont.active .box:nth-child(2) .ltxcont{
		animation-name: listtx;
		animation-delay: 2s;
		animation-duration: 1s;
		animation-fill-mode: forwards;
		opacity: 0;
	}
	
	#about .aboutcontent .listcont.active .box:nth-child(3) .ltxcont{
		animation-name: listtx;
		animation-delay: 3s;
		animation-duration: 1s;
		animation-fill-mode: forwards;
		opacity: 0;
	}
	
	#about .aboutcontent .listcont .box .ltl{
		font-weight: 600;
		font-size:1.7rem;
		line-height: 2.8rem;
		padding:45px 0 15px 0;
	}
	
	#about .aboutcontent .listcont .box .ltx{
		font-size:1.4rem;
		line-height: 2.4rem;
	}
	
	#about .aboutbottombtn .btncont{
		padding:30px 25px;
		display: flex;
		justify-content: space-between;
		background:#fff;
		position: relative;
		z-index:2;
	}
	
	#about .aboutbottombtn .btncont a{
		width:calc((100% - 10px) / 3);
		height:260px;
		position: relative;
		overflow: hidden;
	}
	
	#about .aboutbottombtn .btncont a::after{
		content: "";
		width:100%;
		height:100%;
		position: absolute;
		z-index: 3;
		top:0;
		left:0;
		background-color:rgba(0,0,0,0.7);
		transition: all 0.2s;
		opacity: 0;
	}
	
	#about .aboutbottombtn .btncont a.active::after{
		opacity: 1;
	}
	
	#about .aboutbottombtn .btncont a img{
		position: absolute;
		top:0;
		left:0;
		width:100%;
		height:100%;
		z-index:1;
	}
	
	#about .aboutbottombtn .btncont a .overbox{
		position: absolute;
		width:100%;
		height:100%;
		display: flex;
		align-content: center;
		justify-content: center;
		flex-direction: column;
		top:0;
		left:0;
		color:#fff;
		z-index:2;
		text-align: center;
		transition: all 0.2s;
	}
	
	#about .aboutbottombtn .btncont a .overbox .tl{
		font-size:3.8rem;
		line-height: 1;
		font-weight: 600;
		margin:0 0 10px 0;
	}
	
	#about .ourbrand_cont{
		padding:100px 0;
	}
	
	#about .ourbrand_cont.box2{
		padding:100px 0;
		/*background:#e6e6e6;*/
	}
	
	#about .ourbrand_cont .innerbox{
		width:1120px;
		margin:0 auto;
		position: relative;
		z-index: 2;
	}
	
	#about .ourbrand_cont .innerbox .mtl{
		font-size:5rem;
		font-weight: 600;
		margin:0 0 50px 0;
		text-align: center;
	}
	
	#about .ourbrand_cont .innerbox .mtl.box2{
		margin:0 0 70px 0;
	}
	
	#about .ourbrand_cont .innerbox .subtl{
		font-size:3.4rem;
		line-height: 7.2rem;
		margin:0 0 40px 0;
		text-align: center;
	}
	
	#about .ourbrand_cont.value .innerbox .subtl{
		margin:0 0 0 0;
	}
	
	#about .ourbrand_cont .innerbox .tx{
		font-size:1.6rem;
		line-height: 4.4rem;
		margin:0 0 50px 0;
		text-align: center;
	}
	
	#about .ourbrand_cont.value .innerbox .tx{
		margin:-5% 0 0 0;
	}
	
	#about .ourbrand_cont .innerbox .logo{
		width:545px;
		margin:0 auto;
		line-height: 0;
	}
	
	#about .ourbrand_cont .innerbox .listcont{
		padding:95px 95px 55px;
		background:#fff;
	}
	
	#about .ourbrand_cont .innerbox .listcont .box{
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin:0 0 95px 0;
	}
	
	#about .ourbrand_cont .innerbox .listcont .box:nth-child(2){
		margin:0 0 55px 0;
	}
	
	#about .ourbrand_cont .innerbox .listcont .box:last-child{
		margin:0 0 0 0;
	}
	
	#about .ourbrand_cont .innerbox .listcont .box .logobox{
		width:50%;
		text-align: center;
	}
	
	#about .ourbrand_cont .innerbox .listcont .box .logobox img{
		width:250px;
		display: inline-block;
	}
	
	#about .ourbrand_cont .innerbox .listcont .box .txcont{
		width:50%;
	}
	
	#about .ourbrand_cont .innerbox .listcont .box .txcont .tl{
		font-size:3rem;
		line-height: 1;
		margin:0 0 25px 0;
		font-weight: 600;
	}
	
	#about .ourbrand_cont .innerbox .listcont .box .txcont .ltx{
		font-size:1.6rem;
		line-height: 2.8rem;
	}
	
	#about .ourbrand_cont .wave{
		margin-top:-7%;
		position: relative;
		z-index:1;
	}
	
	#about .ourbrand_cont .valuelist{
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		margin:0 auto;
	}
	
	#about .ourbrand_cont .valuelist .box{
		width:calc((100% - 60px) / 2);
		position: relative;
		margin:0 0 60px 0;
	}
	
	#about .ourbrand_cont .valuelist .box .num{
		width:180px;
	}
	
	#about .ourbrand_cont .valuelist .box:first-child{
		display: flex;
		justify-content: flex-end;
		padding:0 80px 0 0;
		box-sizing: border-box;
		margin:0 0 0 0;
	}
	
	#about .ourbrand_cont .valuelist .box .tlbox{
		width:100%;
		height:100%;
		position: absolute;
		top:0;
		left:0;
		display: flex;
		align-items: center;
	}
	
	#about .ourbrand_cont .valuelist .box .tlbox span{
		font-size:8.6rem;
		line-height: 7.6rem;
		font-weight: 600;
	}
	
	#about .ourbrand_cont .valuelist .box .numtx{
		font-size:2.6rem;
		margin:0 0 10px 0;
	}
	
	#about .ourbrand_cont .valuelist .box .tl{
		font-size:4.5rem;
		line-height:5.5rem;
		color:#ea5514;
		font-weight: 600;
		margin:0 0 20px 0;
	}
	
	#about .ourbrand_cont .valuelist .box .ltx{
		font-size:1.6rem;
		line-height: 3.2rem;
	}

	#about .ourbrand_cont .credoinfo{

	}

	#about .ourbrand_cont .credoinfo p{
		font-size: 1.6rem;
        line-height: 3.2rem;
	}

	#about .ourbrand_cont .credoinfo a{
		color: #ea5514;
        text-decoration: underline;
        word-wrap: break-word;
	}

	#about .startbox .scrollmotion{
		z-index: 4;
		display: flex;
		justify-content: center;
		flex-direction: column;
		position: relative;
		padding:90px 0;
	}
	
	#about .startbox .scrollmotion .tx{
		color:#fff;
		font-weight: 400;
		line-height: 1;
		font-size:1.6rem;
		padding:0 0 10px 0;
		margin:0 auto;
	}
	
	#about .startbox .scrollmotion .border{
		height:110px;
		width:1px;
		background:#fff;
		overflow: hidden;
		position: relative;
		display: block;
		margin:0 auto;

	}
	
	#about .startbox .scrollmotion .border span{
		content: "";
		height:50%;
		width:1px;
		background:#ea5514;
		position: absolute;
		top:-50%;
		left:0;
		animation-name: scanime;
		animation-fill-mode:backwards;
		animation-duration:4s;
		animation-iteration-count:infinite;
		animation-timing-function:ease-in;
		animation-delay: 0s;
		animation-direction:normal;
	}
	
	#about .storycont{
		padding:120px 0;
	}
	
	#about .storycont.our_scanimation{
		opacity: 1;
		transition: all 1s;
	}
	
	#about .storycont.our_scanimation.active{
		opacity: 1;
	}
	
	#about .story_innerbox{
		width:1120px;
		margin:0 auto;
		z-index:2;
		position: relative;
	}
	
	#about .story_innerbox .num{
		text-align: center;
		position: relative;
		top:0;
		transition: all 0.5s;
		transition-delay: 0.5s;
	}
	
	#about .story_innerbox .num .inbox{
		display: inline-block;
		position: relative;
	}
	
	#about .story_innerbox .num .inbox .numill{
		height:170px;
	}
	
	#about .story_innerbox .num .inbox .numill img{
		width:auto;
		height:100%;
	}
	
	#about .story_innerbox .num .inbox .tx{
		position: absolute;
		top:0;
		left:0;
		width:100%;
		height:100%;
		display: flex;
		justify-content: center;
		align-items: center;
		color:#fff;
		font-size:3rem;
		font-weight: 600;
	}
	
	#about .story_innerbox .txcont{
		padding:100px 0 0 0;
		display: flex;
		justify-content: space-between;
		opacity: 0;
		transition: all 0.5s;
		transition-delay: 1s;
	}
	
	#about .story_innerbox .txcont.active{
		opacity: 1;
	}
	
	#about .story_innerbox .txcont .maintx{
		width:50%;
		font-size:4.5rem;
		line-height: 2em;
		color:#fff;
		font-weight: 500;
		position: relative;
		left:25%;
		transition:  all 0.5s;
		transition-delay: 0.5s;
	}
	
	#about .story_innerbox .txcont .maintx.active{
		left:0;
	}
	
	#about .story_innerbox .txcont .tx{
		width:50%;
		padding:0 0 0 95px;
		box-sizing: border-box;
		font-size:1.6rem;
		line-height: 3.2rem;
		color:#fff;
		transition:  all 1s;
		transition-delay: 0.5s;
		opacity: 0;
	}
	
	#about .story_innerbox .txcont .tx.active{
		opacity: 1;
	}
	
	#about .story_innerbox .txcont .tx span{
		font-size:1.2rem;
	}
	
	#about .story_innerbox .mtl{
		font-size:5rem;
		line-height: 1;
		font-weight: 600;
		text-align: center;
		margin:0 0 60px 0;
	}
	
	#about .story_innerbox .subtl{
		font-size:3.6rem;
		line-height: 7.4rem;
		font-weight: 400;
		text-align: center;
		margin:0 0 60px 0;
	}
	
	#about .story_innerbox .tx.tc{
		text-align: center;
		font-size:1.6rem;
		line-height: 3.2rem;
		color:#000;
		transition: all 1s;
		transition-delay: 0.5s;
		opacity: 0;
	}
	
	#about .story_innerbox .tx.tc.active{
		opacity: 1;
	}
	
	#about .bgbox{
		position: relative;
	}
	
	#about .bgbox .shine{
		width:100%;
		position: absolute;
		bottom:0;
		left:0;
		transform-origin: bottom left;
		transform: scale(0);
		transition: all 2s;
		transition-delay: 0.5s;
		display: block;
	}
	
	#about .bgbox .shine.active{
		transform: scale(1);
	}
	
	/*leftnavi*/
	#gnav {
		position: fixed;
		top:0;
		left:0;
		width:60px;
		z-index:10;
		height:100%;
		display: flex;
		flex-wrap: wrap;
		align-content:center;
	}
	
	#gnav li {
		float: none;
		padding: 0 4px;
		text-align: center;
		list-style: none;
	}
	
	#gnav li a {
		display: inline-block;
		padding:3px;
		cursor: pointer;
	}
	
	#gnav li a span{
		width:10px;
		height:10px;
		border-radius: 50%;
		background:#fff;
		display: block;
		border:1px solid #fff;
	}
	#gnav li a.current span {
		background:none;
	}	
	
	#gnav.sc{
		position: absolute;
		top:auto;
		left:0;
		z-index:2;
	}

	.back{
		width: 100%;
		top: 0;
		right: 0;
		height: 100vh;
		position: fixed;
		opacity: 0;
		transition: all 2s 0s ease;
	}
	.story1.active,.story2.active,.story3.active,.story4.active{
		opacity: 1;
	}
	.back2{
	    background: linear-gradient(rgba(9,9,9,1) 0%, rgba(61,98,173,1) 23%, rgba(121,107,175,1) 44%, rgba(243,153,79,1) 63%, rgba(253,210,62,1) 79%, rgba(255,255,255,1) 100%);
	}
	.story1{
        background: linear-gradient(rgba(0,0,3,1) 0%, rgba(0,94,173,1) 100%);
	}
	.story2{
        background: linear-gradient(180deg, rgba(0,91,172,1) 0%, rgba(95,103,174,1) 50%, rgba(187,161,203,1) 100%);
	}
	.story3{
        background: linear-gradient(180deg, rgba(166,136,189,1) 0%, rgba(239,133,125,1) 75%, rgba(243,152,0,1) 100%);
	}
	.story4{
        background: linear-gradient(rgba(243,152,0,1) 0%, rgba(253,210,62,1) 75%, rgba(255,255,255,1) 100%);
	}
}

@media screen and (max-width:768px){
	/*202409追加*/
	.br_pc {
	display: none;
	}
	/*202409追加*/
	.br_sp {
	display: block;
	}
	/*202409追加*/
	#about .mtl {
		color: #ea5514;
	}

	/*202308追加*/
	#about .aboutcontent .innerbox.carbon {
		color: #fff!important;
		padding-top: 0;
		padding-bottom: 200px;
	}
	#about .aboutcontent .innerbox.carbon .tl {
	    font-size: 2rem;
	    line-height: 3.8rem;
	    font-weight: bold;
	    text-align: center;
	    width: 100%;
	}
	#about .aboutcontent .innerbox.carbon .phbox {
		width: 100%;
		background-color: #fff;
		margin: 3.8rem auto;
		padding: 0;
	}
	#about .aboutcontent .innerbox.carbon .phbox img {
		padding: 2.6rem;
	}

	#about .aboutcontent .innerbox.carbon .tx span {
		font-size: 2rem;
		line-height: 3.8rem;
		font-weight: bold;
		display: block;
		margin-bottom: 2rem;
	}

	
	#about.wbg{
		background:#fff;
	}
	
	#about.storybg{
		background:#fff;
	}
	
	#about header{
		background-color:rgba(0,0,0,0.5);
	}
	
	#about header.bg2{
		background-color:rgba(255,255,255,0.7);
	}
	
	#about.wbg header{
		background-color:rgba(255,255,255,1);
	}
	
	#about header{
		background-color:rgba(0,0,0,0.5);
	}
	
	#about .mainarea{
		width:100%;
		padding:100px 10% 0;
		position: relative;
		box-sizing: border-box;
		z-index:2;
	}
	
	#about .mainarea .maintl{
		color:#fff;
		font-size:3.6rem;
		font-weight: 900;
		text-align: center;
		line-height: 1;
		margin:0 0 35px 0;
	}
	
	#about .mainarea .subtl{
		color:#fff;
		font-size:1.2rem;
		text-align: left;
		line-height: 2.4rem;
		margin:0 0 25px 0;
	}
	
	#about .mainarea.story .subtl{
		margin:0 0 25px 0;
	}
	
	#about .mainarea.box2{
		width:100%;
		padding:100px 10% 0;
		position: relative;
		box-sizing: border-box;
		z-index:2;
	}
	
	#about .mainarea .msub{
		font-size:1.5rem;
		line-height: 1;
		margin:0 0 20px 0;
		text-align: center;
		color:#fff;
	}
	
	#about .mainarea.box2 .msub{
		font-size:1.5rem;
		line-height: 1;
		margin:0 0 20px 0;
		text-align: center;
		color:#000;
	}
	
	#about .mainarea.box2 .maintl{
		color:#000;
		font-size:3.6rem;
		font-weight: 900;
		text-align: center;
		line-height: 1;
		margin:0 0 35px 0;
	}
	
	#about .mainarea.box2 .subtl{
		color:#000;
		font-size:1.2rem;
		text-align: left;
		line-height: 2.4rem;
		margin:0 0 25px 0;
	}
	
	#about .aboutcontent{
		padding:80px 0 0 0;
	}
	
	#about .aboutcontent .innerbox{
		width:80%;
		margin:0 auto;
		padding:0 0;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
		flex-direction:column;
	}
	
	#about .aboutcontent .innerbox.bg{
		width:100%;
		background:url("../images/about/about-img5.svg") no-repeat;
		background-size:calc(100%);
		background-position: left 50% top 130px;
	}
	/*202409変更*/
	#about .aboutcontent .innerbox.box2{
		width:100%;
		max-width: 630px;
		padding:0 0;
        display: flex;
        flex-direction: row;
	}
	/*202409変更*/
	#about .aboutcontent .innerbox .box2 .num{
		width: 70px;
		height: fit-content;
		margin-right: 30px;
	}
	/*202409変更*/
	#about .aboutcontent .innerbox .box2 .num img{
		width: 100%;
		height: fit-content;
	}
	/*202409変更*/
	#about .aboutcontent .innerbox .box2 .tx{
		width: calc(100% - 70px - 30px);
	}

	#about .aboutcontent .innerbox .phbox{
		padding:0 0 0 0 ;
		line-height: 0;
		width:170px;
		box-sizing: border-box;
	}
	
	#about .aboutcontent .innerbox .phbox.box2{
		order: 1;
		padding:30px 0 0 0;
		width:100%;
	}
	
	#about .aboutcontent .innerbox .phbox.box3{
		order: 1;
		padding:30px 0 0 0;
		width:100%;
	}
	
	#about .aboutcontent .innerbox .txcont{
		display: flex;
		align-content: center;
		flex-direction: column;
		width:100%;
		padding:40px 0 0 0;
		color:#fff;
	}
	
	#about .aboutcontent .innerbox .txcont.w100{
		width:80%;
		text-align: center;
		margin:0 auto;
	}
	
	#about .aboutcontent .innerbox .txcont.box2{
		padding:0 0 0 0;
	}
	
	#about .aboutcontent .innerbox .txcont.box3{
		padding:0 0 0 0;
	}
	
	#about .aboutcontent .innerbox .txcont .mtl{
		font-size:2.6rem;
		margin:0 0 30px 0;
		text-align: center;
	}
	
	#about .aboutcontent .innerbox .txcont .msub{
		font-size:2rem;
		line-height: 3.8rem;
		text-align: center;
	}
	
	#about .aboutcontent .innerbox .txcont .num{
		height:70px;
		line-height: 0;
		margin:0 auto 20px;
	}
	
	#about .aboutcontent .innerbox .txcont .num img{
		width:auto;
		height:100%;
	}
	
	#about .aboutcontent .innerbox .txcont .tl{
		font-size:1.8rem;
		line-height: 3.2rem;
		margin: 0 0 30px 0;
		text-align: center;
		padding:0 10%;
	}
	
	#about .aboutcontent .innerbox .txcont .tx{
		font-sie:1.4rem;
		line-height: 2.6rem;
		text-align: justify;
		padding:0 10%;
	}
	
	#about .aboutcontent .innerbox .txcont.w100 .tx{
		padding:30px 0 0 0;
		text-align: justify;
	}
	/*202409変更*/
	#about .aboutcontent .listcont{
		width:100%;
		padding:90px 0 90px 0;
		color:#fff;
		gap: 30px;
        display: flex;
        flex-direction: column;
	}
	
	#about .aboutcontent .listcont .box{
		width:80%;
		position: relative;
		margin:0 auto;
		padding:0 0 100px 0;
	}
	
	#about .aboutcontent .listcont .box::after{
		content: "";
		height:70px;
		border-right:1px solid #fff;
		position: absolute;
		bottom:15px;
		left:50%;
		z-index:1;
		transform: scaleY(0);
		transform-origin: top;
	}
	
	#about .aboutcontent .listcont.active .box::after{
		animation-name: borderscale2;
		animation-delay: 0s;
		animation-duration: 1s;
		animation-fill-mode: forwards;
		transform:scaleY(0);
		transform-origin: left top;
	}
	
	#about .aboutcontent .listcont.active .box:nth-child(2)::after{
		animation-delay: 2s;
	}
	
	#about .aboutcontent .listcont .box:last-child::after{
		display: none;
	}
	
	#about .aboutcontent .listcont .box .listmtl{
		width:80px;
		height:80px;
		border-radius: 50%;
		background:#ea5514;
		display: flex;
		justify-content: center;
		align-items: center;
		margin:0 auto;
		position: relative;
		z-index:2;
		transform:scale(0.2);
	}
	
	#about .aboutcontent .listcont.active .box .listmtl{
		animation-name: listscale;
		animation-delay: 0s;
		animation-duration: 0.5s;
		animation-fill-mode: forwards;
		transform:scale(0.2);
	}
	
	#about .aboutcontent .listcont.active .box:nth-child(2) .listmtl{
		animation-name: listscale;
		animation-delay: 1s;
		animation-duration: 0.5s;
		animation-fill-mode: forwards;
		transform:scale(0.2);
	}
	
	#about .aboutcontent .listcont.active .box:nth-child(3) .listmtl{
		animation-name: listscale;
		animation-delay: 2s;
		animation-duration: 0.5s;
		animation-fill-mode: forwards;
		transform:scale(0.2);
	}
	
	#about .aboutcontent .listcont .box .listmtl .inbox{
		font-size:1.4rem;
		line-height: 1.6rem;
		font-weight: 600;
		text-align: center;
		opacity: 0;
	}
	
	#about .aboutcontent .listcont.active .box .listmtl .inbox{
		animation-name: listmtl;
		animation-delay: 0.5s;
		animation-duration: 1s;
		animation-fill-mode: forwards;
		opacity: 0;
	}
	
	#about .aboutcontent .listcont.active .box:nth-child(2) .listmtl .inbox{
		animation-name: listmtl;
		animation-delay: 1.5s;
		animation-duration: 1s;
		animation-fill-mode: forwards;
		opacity: 0;
	}
	
	#about .aboutcontent .listcont.active .box:nth-child(3) .listmtl .inbox{
		animation-name: listmtl;
		animation-delay: 2.5s;
		animation-duration: 1s;
		animation-fill-mode: forwards;
		opacity: 0;
	}
	
	#about .aboutcontent .listcont .box .listmtl .inbox span{
		font-weight: normal;
	}
	
	#about .aboutcontent .listcont .box .ltxcont{
		opacity: 0;
	}
	
	#about .aboutcontent .listcont.active .box .ltxcont{
		animation-name: listtx;
		animation-delay: 1s;
		animation-duration: 1s;
		animation-fill-mode: forwards;
		opacity: 0;
	}
	
	#about .aboutcontent .listcont.active .box:nth-child(2) .ltxcont{
		animation-name: listtx;
		animation-delay: 2s;
		animation-duration: 1s;
		animation-fill-mode: forwards;
		opacity: 0;
	}
	
	#about .aboutcontent .listcont.active .box:nth-child(3) .ltxcont{
		animation-name: listtx;
		animation-delay: 3s;
		animation-duration: 1s;
		animation-fill-mode: forwards;
		opacity: 0;
	}
	
	#about .aboutcontent .listcont .box .ltl{
		font-weight: 600;
		font-size:1.6rem;
		line-height: 2.8rem;
		padding:20px 0 30px 0;
		text-align: center;
	}
	
	#about .aboutcontent .listcont .box .ltx{
		font-size:1.2rem;
		line-height: 2.4rem;
	}
	
	#about .aboutbottombtn .btncont{
		padding:30px 10%;
		display: flex;
		justify-content: space-between;
		background:#fff;
		position: relative;
		z-index:2;
		flex-direction: column;
	}
	
	#about .aboutbottombtn .btncont a{
		width:100%;
		padding-top:60%;
		position: relative;
		overflow: hidden;
		margin:0 0 5px 0;
	}
	
	#about .aboutbottombtn .btncont a::after{
		content: "";
		width:100%;
		height:100%;
		position: absolute;
		z-index: 3;
		top:0;
		left:0;
		background-color:rgba(0,0,0,0.7);
		transition: all 0.2s;
		opacity: 0;
	}
	
	#about .aboutbottombtn .btncont a.active::after{
		opacity: 1;
	}
	
	#about .aboutbottombtn .btncont a img{
		position: absolute;
		top:0;
		left:0;
		width:100%;
		height:100%;
		z-index:1;
	}
	
	#about .aboutbottombtn .btncont a .overbox{
		position: absolute;
		width:100%;
		height:100%;
		display: flex;
		align-content: center;
		justify-content: center;
		flex-direction: column;
		top:0;
		left:0;
		color:#fff;
		z-index:2;
		text-align: center;
		transition: all 0.2s;
	}
	
	#about .aboutbottombtn .btncont a .overbox .tl{
		font-size:2.8rem;
		line-height: 1;
		font-weight: 600;
		margin:0 0 10px 0;
	}
	
	#about .aboutbottombtn .btncont a .overbox .sub{
		font-size:1.4rem;
		line-height: 1;
		font-weight: 600;
	}
	
	#about .ourbrand_cont{
		padding:80px 0;
	}
	
	#about .ourbrand_cont.box2{
		padding:80px 0;
		/*background:#e6e6e6;*/
	}
	
	#about .ourbrand_cont .innerbox{
		width:100%;
		margin:0 auto;
		position: relative;
		z-index: 2;
	}
	
	#about .ourbrand_cont .innerbox .mtl{
		font-size:2.6rem;
		font-weight: 600;
		margin:0 0 20px 0;
		text-align: center;
	}
	
	#about .ourbrand_cont .innerbox .mtl.box2{
		margin:0 0 40px 0;
	}
	
	#about .ourbrand_cont .innerbox .subtl{
		font-size:1.8rem;
		line-height: 3rem;
		margin:0 0 40px 0;
		text-align: center;
	}
	
	#about .ourbrand_cont.value .innerbox .subtl{
		margin:0 0 0 0;
	}
	
	#about .ourbrand_cont .innerbox .tx{
		font-size:1.4rem;
		line-height: 2.6rem;
		margin:0 auto 30px;
		text-align: left;
		width:80%;
	}
	
	#about .ourbrand_cont.value .innerbox .tx{
		margin:-5% auto 0;
	}
	
	#about .ourbrand_cont .innerbox .logo{
		width:250px;
		margin:0 auto;
		line-height: 0;
	}
	
	#about .ourbrand_cont .innerbox .listcont{
		padding:20px;
		background:#fff;
		width:80%;
		margin:0 auto;
	}
	
	#about .ourbrand_cont .innerbox .listcont .box{
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin:0 0 95px 0;
		flex-direction: column;
	}
	
	#about .ourbrand_cont .innerbox .listcont .box:nth-child(2){
		margin:0 0 55px 0;
	}
	
	#about .ourbrand_cont .innerbox .listcont .box:last-child{
		margin:0 0 0 0;
	}
	
	#about .ourbrand_cont .innerbox .listcont .box .logobox{
		width:50%;
		text-align: center;
	}
	
	#about .ourbrand_cont .innerbox .listcont .box .logobox img{
		width:250px;
		display: inline-block;
	}
	
	#about .ourbrand_cont .innerbox .listcont .box .txcont{
		width:100%;
	}
	
	#about .ourbrand_cont .innerbox .listcont .box .txcont .tl{
		font-size:2rem;
		line-height: 1;
		margin:20px 0 15px 0;
		font-weight: 600;
		text-align: center;
	}
	
	#about .ourbrand_cont .innerbox .listcont .box .txcont .ltx{
		font-size:1.4rem;
		line-height: 2.6rem;
	}
	
	#about .ourbrand_cont .wave{
		margin-top:-7%;
		position: relative;
		z-index:1;
	}
	
	#about .ourbrand_cont .valuelist{
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		margin:0 auto;
		flex-direction: column;
		width:80%;
	}
	
	#about .ourbrand_cont .valuelist .box{
		width:100%;
		position: relative;
		margin:0 0 30px 0;
	}
	
	#about .ourbrand_cont .valuelist .box .num{
		width:90px;
	}
	
	#about .ourbrand_cont .valuelist .box:first-child{
		display: flex;
		justify-content: flex-end;
		padding:0 0 0 0;
		box-sizing: border-box;
		margin:0 0 40px 0;
	}
	
	#about .ourbrand_cont .valuelist .box .tlbox{
		width:100%;
		height:100%;
		position: absolute;
		top:0;
		left:0;
		display: flex;
		align-items: center;
	}
	
	#about .ourbrand_cont .valuelist .box .tlbox span{
		font-size:4.6rem;
		line-height: 4rem;
		font-weight: 600;
	}
	
	#about .ourbrand_cont .valuelist .box .numtx{
		font-size:1.8rem;
		margin:0 0 10px 0;
	}
	
	#about .ourbrand_cont .valuelist .box .tl{
		font-size:2.5rem;
		line-height:3rem;
		color:#ea5514;
		font-weight: 600;
		margin:0 0 20px 0;
	}
	
	#about .ourbrand_cont .valuelist .box .ltx{
		font-size:1.4rem;
		line-height: 2.6rem;
	}

	#about .ourbrand_cont .credoinfo{
		margin:0 auto;
		width:80%;
	}

	#about .ourbrand_cont .credoinfo p{
		font-size: 1.4rem;
        line-height: 2.6rem;
	}

	#about .ourbrand_cont .credoinfo a{
		color: #ea5514;
        text-decoration: underline;
        word-wrap: break-word;
	}
	
	#about .startbox .scrollmotion{
		z-index: 4;
		display: flex;
		justify-content: center;
		flex-direction: column;
		position: relative;
		padding:90px 0;
	}
	
	#about .startbox .scrollmotion .tx{
		color:#fff;
		font-weight: 400;
		line-height: 1;
		font-size:1.6rem;
		padding:0 0 10px 0;
		margin:0 auto;
	}
	
	#about .startbox .scrollmotion .border{
		height:70px;
		width:1px;
		background:#fff;
		overflow: hidden;
		position: relative;
		display: block;
		margin:0 auto;

	}
	
	#about .startbox .scrollmotion .border span{
		content: "";
		height:50%;
		width:1px;
		background:#ea5514;
		position: absolute;
		top:-50%;
		left:0;
		animation-name: scanime;
		animation-fill-mode:backwards;
		animation-duration:4s;
		animation-iteration-count:infinite;
		animation-timing-function:ease-in;
		animation-delay: 0s;
		animation-direction:normal;
	}
	
	#about .storycont{
		padding:160px 0 0 0;
	}
	
	#about #first .storycont{
		padding:0 0 0 0;
	}
	
	#about #fifth .storycont{
		padding:160px 0 80px 0;
	}
	
	#about .storycont.our_scanimation{
		opacity: 1;
		transition: all 1s;
	}
	
	#about .storycont.our_scanimation.active{
		opacity: 1;
	}
	
	#about .story_innerbox{
		width:80%;
		margin:0 auto;
		z-index:2;
		position: relative;
	}
	
	#about .story_innerbox .num{
		text-align: center;
		position: relative;
		top:0;
		transition: all 0.5s;
		transition-delay: 0.5s;
	}
	
	#about .story_innerbox .num.active{
		top:0;
	}
	
	#about .story_innerbox .num .inbox{
		display: inline-block;
		position: relative;
	}
	
	#about .story_innerbox .num .inbox .numill{
		height:70px;
	}
	
	#about .story_innerbox .num .inbox .numill img{
		width:auto;
		height:100%;
	}
	
	#about .story_innerbox .num .inbox .tx{
		position: absolute;
		top:0;
		left:0;
		width:100%;
		height:100%;
		display: flex;
		justify-content: center;
		align-items: center;
		color:#fff;
		font-size:1.5rem;
		font-weight: 600;
	}
	
	#about .story_innerbox .txcont{
		padding:30px 0 0 0;
		display: flex;
		justify-content: space-between;
		opacity: 0;
		flex-direction: column;
		transition: all 0.5s;
		transition-delay: 1s;
	}
	
	#about .story_innerbox .txcont.active{
		opacity: 1;
	}
	
	#about .story_innerbox .txcont .maintx{
		width:100%;
		font-size:2rem;
		line-height: 2em;
		color:#fff;
		font-weight: 500;
		position: relative;
		left:0;
		transition:  all 0.5s;
		transition-delay: 0.5s;
		text-align: center;
	}
	
	#about .story_innerbox .txcont .maintx.active{
		left:0;
	}
	
	#about .story_innerbox .txcont .tx{
		width:100%;
		padding:40px 0 0 0;
		box-sizing: border-box;
		font-size:1.4rem;
		line-height: 2.6rem;
		color:#fff;
		transition:  all 1s;
		transition-delay: 0.5s;
		opacity: 0;
	}
	
	#about .story_innerbox .txcont .tx.active{
		opacity: 1;
	}
	
	#about .story_innerbox .txcont .tx span{
		font-size:1.2rem;
	}
	
	#about .story_innerbox .mtl{
		font-size:3rem;
		line-height: 1;
		font-weight: 600;
		text-align: center;
		margin:0 0 40px 0;
	}
	
	#about .story_innerbox .subtl{
		font-size:1.8rem;
		line-height: 3rem;
		font-weight: 400;
		text-align: center;
		margin:0 0 30px 0;
	}
	
	#about .story_innerbox .tx.tc{
		text-align: left;
		font-size:1.4rem;
		line-height: 2.6rem;
		color:#000;
		transition: all 1s;
		transition-delay: 0.5s;
		opacity: 0;
	}
	
	#about .story_innerbox .tx.tc.active{
		opacity: 1;
	}
	
	#about .bgbox{
		position: relative;
	}
	
	#about .bgbox .shine{
		position: absolute;
		bottom:0;
		left:0;
		transform-origin: bottom left;
		transform: scale(0);
		transition: all 2s;
		transition-delay: 0.5s;
	}
	
	#about .bgbox .shine.active{
		transform: scale(1);
	}
	
	/*leftnavi*/
	#gnav {
		position: fixed;
		top:0;
		left:0;
		width:60px;
		z-index:10;
		height:100%;
		display: flex;
		flex-wrap: wrap;
		align-content:center;
	}
	
	#gnav li {
		float: none;
		padding: 0 4px;
		text-align: center;
		list-style: none;
	}
	
	#gnav li a {
		display: inline-block;
		padding:3px;
		cursor: pointer;
	}
	
	#gnav li a span{
		width:10px;
		height:10px;
		border-radius: 50%;
		background:#fff;
		display: block;
		border:1px solid #fff;
	}
	#gnav li a.current span {
		background:none;
	}	
	
	#gnav.sc{
		position: absolute;
		top:auto;
		left:0;
		z-index:2;
	}

	.back{
		width: 100%;
		top: 0;
		right: 0;
		height: 100vh;
		position: fixed;
		opacity: 0;
		transition: all 2s 0s ease;
	}
	.story1.active,.story2.active,.story3.active,.story4.active{
		opacity: 1;
	}
	.back2{
	    background: linear-gradient(rgba(9,9,9,1) 0%, rgba(61,98,173,1) 23%, rgba(121,107,175,1) 44%, rgba(243,153,79,1) 63%, rgba(253,210,62,1) 79%, rgba(255,255,255,1) 100%);
	}
	.story1{
        background: linear-gradient(rgba(0,0,3,1) 0%, rgba(0,94,173,1) 100%);
	}
	.story2{
        background: linear-gradient(180deg, rgba(0,91,172,1) 0%, rgba(95,103,174,1) 50%, rgba(187,161,203,1) 100%);
	}
	.story3{
        background: linear-gradient(180deg, rgba(166,136,189,1) 0%, rgba(239,133,125,1) 75%, rgba(243,152,0,1) 100%);
	}
	.story4{
        background: linear-gradient(rgba(243,152,0,1) 0%, rgba(253,210,62,1) 75%, rgba(255,255,255,1) 100%);
	}
}

@keyframes listtx {
    0% {
        opacity:0%;
    }
    100% {
        opacity:100%;
    }
}

@keyframes listmtl {
    0% {
        opacity:0%;
    }
    100% {
        opacity:100%;
    }
}

@keyframes listscale {
    0% {
        transform:scale(0.2);
    }
    100% {
       transform:scale(1);
    }
}

@keyframes borderscale {
    0% {
        transform:scaleX(0);
    }
    100% {
       transform:scaleX(1);
    }
}

@keyframes scanime {
    75% {
        top:-50%;
    }
    100% {
        top:100%;
    }
}
@keyframes listtx {
    0% {
        opacity:0%;
    }
    100% {
        opacity:100%;
    }
}

@keyframes listmtl {
    0% {
        opacity:0%;
    }
    100% {
        opacity:100%;
    }
}

@keyframes listscale {
    0% {
        transform:scale(0.2);
    }
    100% {
       transform:scale(1);
    }
}

@keyframes borderscale {
    0% {
        transform:scaleX(0);
    }
    100% {
       transform:scaleX(1);
    }
}

@keyframes scanime {
    75% {
        top:-50%;
    }
    100% {
        top:100%;
    }
}

@keyframes borderscale2 {
    0% {
        transform:scaleY(0);
    }
    100% {
       transform:scaleY(1);
    }
}

#about.story .aboutbottombtn .btncont .b_our_story{
display: none;
}