@charset "utf-8";
/* CSS Document */



/* ------------- */
/* TOP共通パーツ */
/* ------------- */
.secBox h2{text-align:center;position:relative;font-size:2rem;margin: 0 auto 1em;line-height: 1.2;font-weight: bold;}
.secBox h2 .ttl_sub{display:block;font-size: 60%;line-height:1;}
.secBox > .sectionInner .commonBtn{ text-align:center; max-width:200px; width:100%; margin:3em auto; font-size:125%;}
.secBox > .sectionInner .commonBtn a{ color:#c91433; border:1px solid #231815; padding:0.7em 0.5em 0.6em; display:block; line-height:1em; position:relative; overflow:hidden; cursor: pointer;}
.secBox > .sectionInner .commonBtn a:before{ content:">"; position:absolute; right:0.5em;}
.secBox > .sectionInner .commonBtn a:after{
	content:"";
	position:absolute;
	z-index:-1;
	top:0;
	left:-100%;
	width:100%;
	height:100%;
	transition:.2s linear;
}
.secBox > .sectionInner .commonBtn a:hover{ color:#fff; opacity:1;}
.secBox > .sectionInner .commonBtn a:hover:after{ left:0; background-color:#c91433;}



.widthMaxBox > .sectionInner{max-width:100%;width:100%;padding-left: 0;padding-right: 0;}
.widthMaxBox h2{max-width: 1000px;}
/* 800px以下*/
@media screen and (max-width:800px){
	.widthMaxBox h2{ width:90%; margin:0 auto; padding:0;}
	.secBox h2{font-size: 2rem;}
	.secBox h2:before{ margin-right:0.3rem;}
	.secBox h2:after{ margin-left:0.3rem;}
	.secBox > .sectionInner > p.tac{ margin:0.5em auto;}
}


/* ------ */
/* #pageDescriptionSec */
/* ------ */
#pageDescriptionSec{position:relative;overflow: hidden;/* min-height: 675px; *//* background: url(/contents/wp-content/uploads/2023/09/img_fv.png) no-repeat center center/cover !important; */}
#pageDescriptionSec .firstviewBoxInner{/* padding:8em 0; */}

#pageDescriptionSec .firstviewBoxInner h2,
#pageDescriptionSec .firstviewBoxInner .conseptTxt{text-align:center;position: absolute;right: 0;left: 0;margin: auto;}

#pageDescriptionSec .firstviewBoxInner h2{top: 130px;font-weight: 600;font-size: 20px;}
#pageDescriptionSec .firstviewBoxInner h2 span{font-size:33px;margin-bottom: 0.5em;display: inline-block;}
#pageDescriptionSec .firstviewBoxInner .conseptTxt{
    bottom: 100px;
    font-size: 16px;
}

#pageDescriptionSec h1{ text-align:center; color:#fff; font-size:4em; font-weight:normal; }
/*#pageDescriptionSec h1{ text-align:center; color:#fff; font-size:4em; font-weight:normal; font-family:"游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;}*/
#pageDescriptionSec h1 img{ margin:0 auto 1em;}
#pageDescriptionSec h1 img.ttl_img01{max-width: 360px;}

/* 既存パーツの調整 */
#pageDescriptionSec > .sectionInner{
    max-width: none;
    width: 100%;
    margin: 0 auto;
    padding: 0;
}
#pageDescriptionSec .firstviewBoxInner{
    max-width: 1100px;
    width: 90%;
    min-height: 675px;
    margin: 0 auto;
    padding: 60px 0 20px;
    position: relative;
    z-index: 1;
}

/* 800px以下*/
@media screen and (max-width:800px){
    #pageDescriptionSec{min-height: 380px;/* background:url(/contents/wp-content/uploads/2023/09/bg_FVsp.png) no-repeat center center/cover !important; */}
    #pageDescriptionSec h1{ width:90%; margin:auto; font-size:2.5em;}
    #pageDescriptionSec h1 img.ttl_img01{max-width: 100%;}

	#pageDescriptionSec .firstviewBoxInner{
    min-height: 0;
    padding: 4em 0 1em;
}
	#pageDescriptionSec .firstviewBoxInner h2,
	#pageDescriptionSec .firstviewBoxInner .conseptTxt{}
	
	#pageDescriptionSec .firstviewBoxInner h2{
    max-width: 100%;
    text-align: center;
    font-size: 1rem;
    position: static;
    margin: 0 auto 6em auto;
}
	#pageDescriptionSec .firstviewBoxInner h2 span{
    font-size: 1.4rem;
    margin-bottom: 0.5em;
    display: inline-block;
}
	#pageDescriptionSec .firstviewBoxInner .conseptTxt{
    font-size: 0.75rem;
    max-width: 100%;
    position: initial;
}
		
}

/* ------ */
/* #businessSec */
/* ------ */
#businessSec{
    margin: -2em 0;
}
#businessSec .sectionInner{}
#businessSec .sectionInner #businessList{
    display: flex;
    justify-items: flex-start;
    /* flex-wrap: wrap; */
}
#businessSec .sectionInner #businessList .businessBox{
    width: 32%;
    padding: 20px;
    margin-right: 2%;
    margin-bottom: 1.5em;
    /* border: 1px solid; */
    border-radius: 10px;
    background: #fff;
    filter: drop-shadow(0px 0px 4px rgba(0,0,0,0.2));
}
#businessSec .sectionInner #businessList .businessBox:nth-child(3n){
    margin-right: 0;
}
#businessSec .sectionInner #businessList .businessBox .img{order:1;width: 100%;text-align: center;border-radius: 10px;overflow: hidden;}
#businessSec .sectionInner #businessList .businessBox h3.ttl{order:2;font-size: 24px;font-weight: bold;}
#businessSec .sectionInner #businessList .businessBox .txt{order:3;color: #333;}

@media screen and (max-width:800px){
	#businessSec{margin:auto}
	#businessSec .sectionInner{width:100%}
	#businessSec .sectionInner #businessList .businessBox{width: 32%;}
	#businessSec .sectionInner #businessList .businessBox img{width: 100%;height: auto;}
	#businessSec .sectionInner #businessList{
	    flex-wrap: nowrap;
	    display: flex;
	    width: 100%;
	    margin: auto;
	    overflow-x: scroll;
	    padding: 0 3em 0 1em;
	}

	/* スクロールバーの調整 */
	#businessSec .sectionInner #businessList::-webkit-scrollbar{ height:7px; width:100px;}
	#businessSec .sectionInner #businessList::-webkit-scrollbar-thumb{
		background: #003856; /* ツマミの色 */
		border-radius: 6px; /* ツマミ両端の丸み */
	}
	#businessSec .sectionInner #businessList::-webkit-scrollbar-track {
		margin:0 2em;
	  background: #00385673; /* トラックの色 */
	  border-radius: 6px; /* トラック両端の丸み */
	}
	#businessSec .sectionInner #businessList .businessBox{width: 70vw;margin: 1em;flex-shrink: 0;}
	#businessSec .sectionInner #businessList .businessBox:first-child{margin-left: calc((30vw - 3em) / 2);}
	#businessSec .sectionInner #businessList .businessBox:last-child{margin-right: calc((30vw - 4em) / 2);}
	#businessSec .sectionInner #businessList .businessBox:nth-child(3n){margin-right: 1em;}
	}


/* ------ */
/* 実績 */
/* ------ */

#ourClientsSec{}
#ourClientsSec button{display: none!important;}



/* ------ */
/* #newsSec */
/* ------ */
#newsSec{}
#newsSec .contentsBox{max-height: 180px;filter: drop-shadow(0px 0px 4px rgba(0,0,0,0.2));border-radius: 15px;background: #fff;padding: 2em;}
#newsSec .contentsBox ul{max-height: 120px;overflow-y:scroll;}
#newsSec .contentsBox ul::-webkit-scrollbar{width:10px;}
#newsSec .contentsBox ul::-webkit-scrollbar-track{background-color: #ccc;border-radius:10px}
#newsSec .contentsBox ul::-webkit-scrollbar-thumb{background-color: #17585d;border-radius:10px}

#newsSec .contentsBox li{font-size: 1em;padding: 0.5em;border-bottom: 1px solid #f1f1f1;}
#newsSec .contentsBox li .infoDate{order:1;width: 6.5em;}
#newsSec .contentsBox li .infoType{order:2;width: 8em;}
#newsSec .contentsBox li .infoType.news_release{color:#c0272d}
#newsSec .contentsBox li .infoType.notice{color:#662d90}

#newsSec .contentsBox li .infoTitle{order:3;}

@media screen and (max-width:450px){
	#newsSec .contentsBox{max-height: initial;padding: 1.5em 2em;}
	#newsSec .contentsBox ul{max-height: 40vh;}
	#newsSec .contentsBox li .infoTitle{width:100%;margin:0.5em 0}
}

/* ----------- */
/* INFORMATION */
/* ----------- */
#infoSec{}
#infoSec .sectionInner{padding-top:60px;}
#infoSec .infoBox{max-height: 14em;overflow-y:auto;}
#infoSec ul{ max-width:750px; width:100%; margin:0 auto;}
#infoSec li{font-size: 100%;margin:1.5em 0;}
#infoSec li .infoType{max-width:90px;width: 100%;margin:0 2em 0 0;border:1px solid #231815;padding: 0.4em;line-height:1em;font-size:75%;text-align:center;}
#infoSec li .infoDate{ margin:0 1em 0 0;}
#infoSec li .infoTitle{color:#231815;/* max-width: 750px; */width: 71%;margin: 0 0 0 0;font-size: 91%;}
#infoSec .infoBox::-webkit-scrollbar{width: 6px;}
#infoSec .infoBox::-webkit-scrollbar-track{
  background: #fff;
  border: none;
  border-radius: 30px;
  box-shadow: inset 0 0 2px #777; 
}
#infoSec .infoBox::-webkit-scrollbar-thumb{
  background: #666;
  border-radius: 10px;
  box-shadow: none;
}
@media screen and (max-width:800px){
	#infoSec .sectionInner{padding-top:2em;}
	#infoSec ul{ width:90%;}
	#infoSec li{margin: 0.8em 0 0.8em;padding: 0 0 0.8em;border-bottom: 1px solid #ccc;}
	#infoSec li span{ margin:0;}
	#infoSec li .infoType{margin:0;}
	#infoSec li .infoDate{width: calc(100% - 100px - 1em);margin: 0.5em 0 0 1em;line-height: 1em;font-size: 90%;}
	#infoSec li .infoTitle{width: 100%;}
}


/* ------- */
/* COMPANY */
/* ------- */
#companySec{}
#companySec #companyAboutBox{ background-color:#231815; padding:2em 0; margin:0 auto 5em; position:relative; overflow:hidden;}
#companySec #companyAboutBox .aboutBox{max-width:1000px;width:100%;max-height:400px;margin:0 auto;background-color:#fff;padding:1em 5em;position:relative;z-index:1;}
#companySec #companyAboutBox .aboutBox:before{ left:-600px; background:url(/images/top/img_company_side_l.png) no-repeat top left/cover;}
#companySec #companyAboutBox .aboutBox:after{ right:-600px; background:url(/images/top/img_company_side_r.png) no-repeat top left/cover;}
#companySec #companyAboutBox .aboutBox:before,
#companySec #companyAboutBox .aboutBox:after{
	content:"";
	position:absolute;
	width:580px;
	height:400px;
	top:0;
	bottom:0;
	margin:auto;
	z-index:0;
}
#companySec #companyAboutBox .aboutBox h3{ font-size:1.75rem; font-weight:normal; color:#d70835; border-bottom:1px solid #d70835; text-align:center;}
#companySec #companyAboutBox .aboutBox .areaBox{column-count: 2;column-gap: 5%;page-break-inside: avoid;break-inside: avoid;margin: 0 0 0em 0;padding: 1em 5% 0;max-height: 330px;}
#companySec #companyAboutBox .aboutBox .areaBox img{margin: 0em auto;}
@media screen and (max-width:800px){
	#companySec #companyAboutBox{padding: 0 5% 2em;margin: 0 auto 0em;background: none;/* background: url(/images/top/img_company_side_l.png) no-repeat center left -250%/auto 100%, url(/images/top/img_company_side_r.png) no-repeat center right -250%/auto 100%; */}
	#companySec #companyAboutBox .aboutBox{max-height:100%;padding: 0 3% 0;/* background: none; */text-align: center;}
	#companySec #companyAboutBox .aboutBox:before,
	#companySec #companyAboutBox .aboutBox:after{content:normal;}
	#companySec #companyAboutBox .aboutBox h3{font-size:1rem;padding: 0.5em 0 0.2em;line-height: 1;font-weight: bold;border-bottom: none;/* display: inline-block; */}
	#companySec #companyAboutBox .aboutBox .areaBox{max-height: none;display:flex;flex-direction: column;justify-content: center;align-items: center;flex-wrap: wrap;padding: 2em 0% 0;}
	#companySec #companyAboutBox .aboutBox .areaBox .areaInBox{width: 53%;order: 2;margin: 0 auto;text-align: center;}
	#companySec #companyAboutBox .aboutBox .areaBox .jpMap{margin: 0 0 -30% auto;}
	#companySec #companyAboutBox .aboutBox .areaBox .map2{margin: 0 auto 0 0;width: 44%;}
	#companySec #companyAboutBox .aboutBox .areaBox .areaInText{width: 100%;order: 1;margin: 0px auto -4em 0;padding: 0 0% 0 0;position: relative;z-index: 1;font-size: 89%;}
}

/* ----------- */
/* BANNER */
/* ----------- */
#bannerSec{margin: -4em auto 2em;}
#bannerSec h2{margin:auto} 
#bannerSec p{margin: 1em auto;}
#bannerSec a{display:block}
#bannerSec img{opacity:1;transition: ease-in-out 0.3s;}  
#bannerSec img:hover{opacity:0.8;}    
@media screen and (max-width:800px){
	#bannerSec{margin: -3em auto 2em;}
	#bannerSec .sectionInner{margin: auto;padding: 0.7em 0;}
#bannerSec p{margin:auto;}    
}


/* ----------- */
/* BRAND */
/* ----------- */
#brandSec{}
#brandSec #brandSlider{ padding:0 0 2em; margin:0 auto 5em;}
#brandSec #brandSlider .brandItem{ max-width:320px; width:100%;}
#brandSec #brandSlider .brandItem span{ display:block;}
#brandSec #brandSlider .brandItem a{display: block;overflow:hidden;}
#brandSec #brandSlider .brandItem .brandImg{width: 40vw;height: 25vw;max-width: 100%;max-height: 15em;}
#brandSec #brandSlider .brandItem .brandImg img{object-fit: cover; width: 100%; height: 100%;}
#brandSec #brandSlider .brandItem .logoImg{ text-align:center; padding:1em; border-top:1px solid #231815; border-bottom:1px solid #231815;}
#brandSec #brandSlider .brandItem:not(:last-child) .logoImg{ border-left:1px solid #231815;}
#brandSec #brandSlider .brandItem .logoImg img{height: 50px;width:auto;margin:auto;}
#brandSec #brandSlider .slick-prev{ left:44%; transform:scale(-1,1);}
#brandSec #brandSlider .slick-next{ right:44%; transform:none;}
#brandSec #brandSlider .slick-prev,
#brandSec #brandSlider .slick-next{ top:100%; background:url(/images/common/icon_link01.png) no-repeat center/20px;}
#brandSec #brandSlider .slick-prev:before,
#brandSec #brandSlider .slick-next:before{ content:normal;}
@media screen and (max-width:800px){
	#brandSec #brandSlider .brandItem .logoImg img{height: 4em;width:auto;margin:auto;}
	#brandSec #brandSlider .brandItem:not(:last-child) .logoImg{/* border-left:none; */}
	#brandSec #brandSlider .slick-prev{ left:40%;}
	#brandSec #brandSlider .slick-next{ right:40%;}
}



/* --------- */
/* INTERVIEW */
/* --------- */
#interviewSec{}
#interviewSec #voiceList{max-width: 850px;margin:0 auto;}
#interviewSec .voiceBox{max-width:380px;width: 45%;/* min-height:250px; */max-height: 270px;margin: 2%;}
#interviewSec .voiceBox a{height:100%; 
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f4ecd6+0,fffffd+100 */border: 1px solid #eee;background: rgb(218 227 231); /* Old browsers */background: -moz-linear-gradient(45deg,  rgb(218 227 231) 0%, rgba(255,255,253,1) 100%); /* FF3.6-15 */background: -webkit-linear-gradient(45deg,  rgb(218 227 231) 0%,rgba(255,255,253,1) 100%); /* Chrome10-25,Safari5.1-6 */background: linear-gradient(45deg,  rgb(218 227 231) 0%,rgba(255,255,253,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4ecd6', endColorstr='#fffffd',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */}
#interviewSec .voiceBox a img{width:100%;height: calc(100% - 4em);object-fit: scale-down;font-size: 112.5%;}
#interviewSec .voiceBox a p{width:100%;background-color:#231815;padding:10px;font-size:112.5%;font-weight:bold;line-height:1.2em;color:#fff;margin:0;position:relative;height: 4em;display: flex;flex-direction: column;justify-content: center;}
#interviewSec .voiceBox a p:after{
	content:"";
	background-color:#fff;
	clip-path:polygon(0% 100%, 50% 0%, 100% 0%, 100% 100%);
	width:80px;
	height:100%;
	position:absolute;
	top:0;
	bottom:0;
	right:0;
	background-image:url(/images/common/icon_link01.png);
	background-repeat:no-repeat;
	background-size:20px;
	background-position:center right 1em;
}
#interviewSec .voiceBox a p span{ display:block; font-size:75%;}
@media screen and (max-width:800px){
	#interviewSec #voiceList{}
	#interviewSec .voiceBox{margin: 1em auto;width: 100%;max-height: none;}
	#interviewSec .voiceBox a{ height:auto;}
	#interviewSec .voiceBox a img{height: 15em;}
}

/* ------ */
/* その他 */
/* ------ */
#otherContents{ background:url(/images/top/img_bg_other_pc.jpg) no-repeat top center/cover;}
#otherContents .secBox > .sectionInner{padding: 40px 60px 0;}
#otherContents > .secBox:last-child > .sectionInner{padding-bottom:40px;}
#otherContents .secBox h2{ color:#fff;}
#otherContents .secBox h2:before,
#otherContents .secBox h2:after{ background-color:#fff;}
#otherContents .secBox p{ color:#fff;}
#otherContents .commonBtn{ margin:2em auto 1em;}
#otherContents .commonBtn a{ border-color:#fff; color:#fff;}
#otherContents .commonBtn a:hover{ color:#c91433; opacity:0.8;}
#otherContents .commonBtn a:hover:after{ left:0; background-color:#fff;}

@media screen and (max-width:800px){
	#otherContents{ background-image:url(/images/top/img_bg_other_sp.jpg);}
	#otherContents .secBox > .sectionInner{padding: 2em 0;}
	#otherContents > .secBox:last-child > .sectionInner{padding-bottom:2em;}
	#otherContents .sectionInner{ margin:auto;}
	#otherContents .secBox p{ font-size:90%;}
}


/* -------------- */
/* TOPアニメーション*/
/* -------------- */
#animation_container{background-color:rgba(255, 255, 255, 1.00);width:1920px;height:700px;position: absolute;top: 0;left: calc(50% - 960px);}
#canvas{position: absolute;display: block;background-color:rgba(255, 255, 255, 1.00);left: 0;top: -30px;width:1536px;height:560px;}
#dom_overlay_container{pointer-events:none; overflow:hidden; width:1920px; height:700px; position: absolute; left: 0px; top: 0px; display: block;}

@media screen and (min-width: 481px) and (max-width:799px){
    #canvas{/* width: 100% !important; *//* height: 100% !important; */left: calc(100vw - 1920px);left: calc( ( 100vw - (1920px * 0.4) ) / 2 );top: 10%;transform: scale(0.4);transform-origin: left top;}
    #animation_container{width: 100% !important;height: 100% !important;top: 0%;left: 0;}
    #dom_overlay_container{width: 100% !important;height: 100% !important;}
}

@media screen and (max-width: 480px){
    #pageDescriptionSec{overflow: visible;}
    #canvas{/* width: 100% !important; *//* height: 100% !important; */left: calc(100vw - 1920px);width: 100% !important;height: auto !important;aspect-ratio: 4/5 !important;left: calc( ( 100vw - (1920px * 0.4) ) / 2 );left: 0;top: 0%;/* transform: scale(0.4); *//* transform-origin: left top; */}
    #animation_container{width: 100% !important;height: auto !important;aspect-ratio: 4/5 !important;top: initial;left: 0;bottom: 16%;}
    #dom_overlay_container{/* width: 100% !important; *//* height: 100% !important; */width: 100% !important;height: auto !important;aspect-ratio: 4/5 !important;}
}



/* 既存パーツの調整 
#pageDescriptionSec { background:none !important;}
#pageDescriptionSec{ overflow:hidden;}
.secBox .sectionInner{ padding:0}


@media screen and (max-width: 800px){
	#pageDescriptionSec { background:none !important;}
	#pageDescriptionSec .firstviewBoxInner h2 {
		max-width: 90%;
		to