@charset "utf-8";

/*		Contents
---------------------------------------------------------------------------

	HOME							[ / ]
	会社概要						[ /company/ ]
	企業理念						[ /identity/ ]
	事業案内						[ /business/ ]
	実績紹介						[ /works/ ]
	ご依頼から導入まで				[ /flow/ ]
	採用情報						[ /recruit/ ]
	お問い合わせ					[ /contact/ ]
	個人情報保護方針について		[ /privacy/ ]
	サイトマップ					[ /sitemap/ ]

------------------------------------------------------------------------ */

/* ========================================================================
	HOME							[ / ]
======================================================================== */
#home{
	overflow:hidden;
	padding:76px 0 0 0;
}

@media screen and (max-width:767px){
#home{
	padding:30px 0 0 0;
}
}


/* ----------------------------------------
	h2
---------------------------------------- */
#home h2{
	display:flex;
	flex-direction:column;
	align-items:center;
	margin:0 0 100px 0;
	font-weight:700;
	line-height:1;
}

#home h2 .en{
	font-size:22.0rem;
	color:#7498b3;
}

#home h2 .ja{
	margin:20px 0 0 0;
	font-size:3.6rem;
}

@media screen and (max-width:767px){
#home h2{
	margin:0 0 40px 0;
}

#home h2 .en{
	font-size:min(13.3333vw, 20.0rem); /* 1500px */
}

#home h2 .ja{
	font-size:2.4rem;
}
}


/* ----------------------------------------
	hero
---------------------------------------- */
#home .hero{
	display:flex;
	flex-wrap:wrap;
	gap:0 40px;
	position:relative;
	max-width:1728px;
	margin:0 auto 200px;
	padding:0 40px 476px;
}

#home .hero .block{
	position:relative;
	z-index:1;
}

#home .hero h2{
	display:block;
	margin:54px 0 34px 0;
	font-size:4.4rem;
	line-height:7.6rem;
}

#home .hero h2 span{
	color:#7498b3;
}

#home .hero p{
	font-size:1.6rem;
	line-height:2.0rem;
}

#home .hero .logo{
	flex:1;
	position:relative;
	text-align:right;
	z-index:1;
}

#home .hero .img{
	position:absolute;
	bottom:0;
	left:50%;
	width:1920px;
	margin-left:-960px;
	margin-top:-570px;
	padding-top:570px;
}

@media screen and (max-width:767px){
#home .hero{
	display:block;
	max-width:none;
	margin:0 auto 60px;
	padding:0;
}

#home .hero .block{
	padding:0 20px;
}

#home .hero h2{
	margin:0 0 20px 0;
	font-size:min(7.7464vw, 4.4rem); /* 568px */
	line-height:min(13.3802vw, 7.6rem); /* 568px */
}

#home .hero p{
	margin:0 0 20px 0;
	font-size:1.4rem;
	line-height:1.8rem;
}

#home .hero .logo{
	padding:0 40px 40px;
	text-align:center;
}

#home .hero .img{
	position:static;
	bottom:auto;
	width:auto;
	margin-left:0;
	margin-top:calc(420 / 760 * calc(-100% + 80px));
	padding-top:calc(420 / 760 * calc(100% - 80px));
}
}


/* ----------------------------------------
	about
---------------------------------------- */
#home .about{
	position:relative;
	min-height:1308px;
	margin:0 0 110px 0;
	padding:80px 0 0 0;
}

#home .about::before{
	content:"";
	position:absolute;
	top:0;
	right:50%;
	width:1606px;
	height:100%;
	margin:0 -646px 0 0;
	background:url(../../img/home/bg_about.jpg) no-repeat center bottom;
	background-size:cover;
}

#home .about h2,
#home .about h2 .en{
	align-items:flex-start;
	color:#ffffff;
}

#home .about p{
	margin:0 0 80px 0;
	font-size:2.0rem;
	font-weight:700;
	color:#ffffff;
	line-height:5.0rem;
}

#home .about p span{
	background:linear-gradient(transparent 65%, rgba(237,226,116,0.4) 65%);
	background-repeat:no-repeat;
	background-position:left bottom;
	background-size:0 100%;
	transition:all 0.6s ease;
}
#home .about p span.on{ background-size:100% 100%; }

#home .about p.lead{
	font-size:3.6rem;
	line-height:6.0rem;
}

#home .about p.lead span{
	display:inline-block;
	background:none;
	border-bottom:3px solid #ffffff;
	line-height:4.0rem;
}

@media screen and (max-width:767px){
#home .about{
	min-height:auto;
	margin:0 0 60px 0;
	padding:60px 0 20px 0;
	background:url(../../img/home/bg_about.jpg) no-repeat center bottom;
	background-size:cover;
}
#home .about::before{ content:none; }

#home .about h2{
	align-items:center;
}

#home .about p{
	margin:0 0 40px 0;
	font-size:1.6rem;
	line-height:3.6rem;
}

#home .about p.lead{
	font-size:min(5.1428vw, 3.6rem); /* 700px */
	line-height:min(8.5714vw, 6.0rem); /* 700px */
}

#home .about p.lead span{
	border-width:2px;
	line-height:min(5.7142vw, 4.0rem); /* 700px */
}
}


/* img
---------------------------------------- */
#home .about .img{
	position:absolute;
	top:380px;
	left:50%;
	margin:0 0 0 115px;
}

#home .about .img > img{
	max-width:none;
}

@media screen and (max-width:767px){
#home .about .img{
	position:static;
	margin:0 0 40px 0;
	text-align:center;
}

#home .about .img > img{
	max-width:100%;
}
}


/* ----------------------------------------
	business
---------------------------------------- */
#home .business{
	position:relative;
	margin:0 0 110px 0;
	padding:300px 0 141px 0;
}

#home .business::before{
	content:"";
	position:absolute;
	bottom:0;
	left:50%;
	width:1400px;
	height:1px;
	background:#b0b0b0;
	transform:translateX(-50%);
}

#home .business .inner{
	max-width:1680px;
	width:auto;
	padding:0 40px;
}

#home .business h2{
	align-items:flex-end;
	position:relative;
	z-index:1;
}

#home .business h2 .en{
	font-size:clamp(18.0rem, 14.6666vw, 22.0rem);
}

#home .business p{
	margin:0 0 90px 0;
}

#home .business p.lead{
	position:absolute;
	top:-300px;
	right:40px;
	margin:0;
	font-size:3.6rem;
	font-weight:700;
	line-height:7.0rem;
}

#home .business p.lead > span{
	display:inline-block;
	padding:0 0 0 12px;
	background:#333132;
	color:#ffffff;
	line-height:6.4rem;
}
#home .business p.lead span span{ color:#7498b3; }

@media screen and (max-width:767px){
#home .business{
	margin:0 0 60px 0;
	padding:0 0 60px 0;
}
#home .business::before{ width:100%; }

#home .business .inner{
	max-width:none;
	width:auto;
	padding:0 20px;
}

#home .business h2{
	align-items:center;
}

#home .business h2 .en{
	font-size:min(13.3333vw, 20.0rem); /* 1500px */
}

#home .business p{
	margin:0 0 40px 0;
}

#home .business p.lead{
	position:static;
	margin:0 0 40px 0;
	padding:10px 20px;
	background:#333132;
	font-size:2.0rem;
	line-height:4.0rem;
}

#home .business p.lead > span{
	display:inline;
	padding:0;
	background:none;
	line-height:normal;
}
}


/* column
---------------------------------------- */
#home .business .column{
	position:relative;
	min-height:634px;
	margin:-226px 0 100px 0;
}

@media screen and (max-width:767px){
#home .business .column{
	min-height:auto;
	margin:0 0 60px 0;
}
}


/* block
---------------------------------------- */
#home .business .block{
	padding:226px 0 0 clamp(600px, 47.9166vw, 920px);
}

@media screen and (max-width:767px){
#home .business .block{
	padding:0;
}
}


/* ---------- widget_btn ---------- */
#home .business .widget_btn{
	justify-content:flex-start;
	margin:0;
}


/* img
---------------------------------------- */
#home .business .img{
	position:absolute;
	top:0;
	right:50%;
	margin:0 66px 0 0;
}

#home .business .img > img{
	max-width:none;
}

@media screen and (max-width:767px){
#home .business .img{
	position:static;
	margin:0 0 40px 0;
	text-align:center;
}

#home .business .img > img{
	max-width:100%;
}
}


/* dl
---------------------------------------- */
#home .business dl{
	display:flex;
	flex-direction:column;
	align-items:center;
	width:1200px;
	margin:0 auto;
	padding:80px 80px 20px;
	background:#ececec;
	border-radius:5px;
}

#home .business dl dt{
	margin:0 0 60px 0;
	text-align:center;
	font-size:4.0rem;
	font-weight:700;
	line-height:5.0rem;
}

#home .business dl dt span{
	display:inline-block;
	padding:0 4px 12px;
	border-bottom:4px solid #7498b3;
}

#home .business dl dd{
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
	gap:0 220px;
	margin:0 0 60px 0;
}

@media screen and (max-width:767px){
#home .business dl{
	width:auto;
	padding:40px 20px 20px;
}

#home .business dl dt{
	margin:0 0 30px 0;
	font-size:2.4rem;
	line-height:3.4rem;
}

#home .business dl dd{
	display:block;
	margin:0 0 20px 0;
}

#home .business dl dd ul{
	display:grid;
	grid-template-columns:repeat(2,1fr);
	gap:0px 20px;
	padding:0;
}

#home .business dl dd ul li{
	padding:0 0 10px 1.0em;
	text-indent:-1.0em;
	line-height:2.6rem;
}
}


/* ----------------------------------------
	works
---------------------------------------- */
#home .works{
	padding:0 0 200px 0;
}

#home .works .inner{
	max-width:1480px;
	width:auto;
	padding:0 40px;
}

#home .works h2 .en{
	font-size:clamp(18.0rem, 14.6666vw, 22.0rem);
	white-space:nowrap;
}

#home .works ul{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:0 64px;
	margin:0 0 100px 0;
	text-align:center;
}
#home .works ul li:nth-child(4){ display:none; }

#home .works ul li{
	font-size:2.2rem;
	font-weight:700;
	line-height:3.2rem;
}

#home .works ul li img{
	display:block;
	margin:0 auto 18px;
	border-radius:5px;
}

@media screen and (max-width:767px){
#home .works{
	padding:0 0 20px 0;
}

#home .works .inner{
	max-width:none;
	padding:0 20px;
}

#home .works h2 .en{
	font-size:min(13.3333vw, 20.0rem); /* 1500px */
}

#home .works ul{
	display:block;
	margin:0;
}

#home .works ul li:nth-child(4){ display:block; }

#home .works ul li{
	margin:0 0 40px 0;
	font-size:1.6rem;
	line-height:2.6rem;
}
}


/* ----------------------------------------
	client
---------------------------------------- */
#home .client{
	padding:0 0 200px 0;
	background:#ececec;
}

#home .client h2 .en{
	position:relative;
	font-size:20.0rem;
}

#home .client h2 .en::before{
	content:"";
	position:absolute;
	top:0;
	right:50%;
	width:max(100vw, 1280px);
	height:50%;
	background:#ffffff;
	transform:translateX(50%);
}

#home .client h2 .en span{
	display:block;
	width:100%;
	position:relative;
}

#home .client p.lead{
	text-align:center;
	font-size:4.4rem;
	font-weight:700;
	line-height:6.0rem;
}

#home .client p.lead span{
	color:#7498b3;
}

@media screen and (max-width:767px){
#home .client{
	padding:0 0 60px 0;
}

#home .client h2 .en{
	font-size:min(13.3333vw, 20.0rem); /* 1500px */
}

#home .client p.lead{
	font-size:2.4rem;
	line-height:4.0rem;
}
}


/* box
---------------------------------------- */
#home .client .box{
	margin:0 0 60px 0;
	padding:95px 80px 120px;
	background:#ffffff;
	border-radius:5px;
}

#home .client .box dl{
	padding:70px 0 0 0;
	text-align:center;
}

#home .client .box dl dt{
	margin:0 0 50px 0;
	font-size:2.2rem;
	font-weight:700;
	line-height:4.0rem;
}

#home .client .box dl ul{
	display:grid;
	grid-template-columns:repeat(5,1fr);
	justify-content:center;
}

#home .client .box dl ul li{
	font-weight:700;
	line-height:1;
}

#home .client .box dl ul li img{
	display:block;
	margin:0 auto 30px;
}

@media screen and (max-width:767px){
#home .client .box{
	margin:0 0 40px 0;
	padding:40px 20px;
}

#home .client .box dl{
	padding:30px 0 0 0;
}

#home .client .box dl dt{
	margin:0 0 30px 0;
	text-align:left;
	font-size:1.8rem;
	line-height:3.6rem;
}

#home .client .box dl ul{
	grid-template-columns:repeat(auto-fill, minmax(166px, 1fr));
	gap:20px;
}

#home .client .box dl ul li{
	line-height:2.4rem;
}

#home .client .box dl ul li img{
	margin-bottom:10px;
}
}

@media screen and (max-width:450px){
#home .client .box dl ul{
	grid-template-columns:repeat(auto-fill, minmax(calc(50% - 20px), 1fr));
}
}


/* list
---------------------------------------- */
#home .client .list{
	display:flex;
	justify-content:center;
	gap:0 100px;
	padding:0 0 65px 0;
	border-bottom:1px solid #b0b0b0;
}

#home .client .list ul li{
	margin:0 0 26px 0;
	padding:0 0 0 1.0em;
	text-indent:-1.0em;
}

@media screen and (max-width:767px){
#home .client .list{
	display:grid;
	grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));
	gap:0 20px;
	padding:0 0 20px 0;
}


#home .client .list ul{
	display:grid;
	justify-content:center;
}

#home .client .list ul li{
	margin:0 0 10px 0;
	padding:0 0 0 1.0em;
	text-indent:-1.0em;
}
}


/* ----------------------------------------
	area
---------------------------------------- */
#home .area{
	overflow:hidden;
	margin:0 0 140px 0;
	background:url(../../img/home/bg_area.jpg) no-repeat center;
	background-size:cover;
}

#home .area .inner{
	min-height:956px;
	padding:120px 0 0 0;
}

#home .area h2{
	align-items:flex-start;
}

#home .area h2 .en{
	font-size:20.0rem;
}

#home .area p{
	position:relative;
	padding:0 530px 100px 0;
	z-index:1;
}

#home .area figure{
	position:absolute;
	bottom:-192px;
	left:-150px;
}

#home .area figure img{
	max-width:none;
}

@media screen and (max-width:767px){
#home .area{
	margin:0 0 60px 0;
	padding:60px 0;
}

#home .area .inner{
	min-height:auto;
	padding:0 20px 294px;
}

#home .area h2{
	align-items:center;
}

#home .area h2 .en{
	font-size:min(13.3333vw, 20.0rem); /* 1500px */
}

#home .area p{
	padding:0 0 40px 0;
}

#home .area figure{
	left:50%;
	transform:translateX(-50%);
}

#home .area figure img{
	max-width:none;
	width:1106px;
	margin:0 -64px 0 0
}
}


/* ----------------------------------------
	bnr
---------------------------------------- */
#home .bnr{
	padding:0 0 100px 0;
}

#home .bnr h2 .en{
	font-size:20.0rem;
}

#home .bnr h2 .ja{
	margin-top:50px;
}

@media screen and (max-width:767px){
#home .bnr{
	padding:0 0 40px 0;
}

#home .bnr h2 .en{
	font-size:min(13.3333vw, 20.0rem); /* 1500px */
}

#home .bnr h2 .ja{
	margin-top:20px;
}
}


/* ========================================================================
	会社概要						[ /company/ ]
======================================================================== */
#company{
	padding:0 0 200px 0;
}

#company table{
	margin:0 0 200px 0;
}

@media screen and (max-width:767px){
#company{
	padding:0 0 60px 0;
}

#company table{
	margin:0 0 60px 0;
}
}


/* ----------------------------------------
	splide
---------------------------------------- */
#company .splide{
	width:800px;
	margin:0 auto 230px;
}

@media screen and (max-width:767px){
#company .splide{
	width:auto;
	margin:0 20px 90px;
}
}


/* ----------------------------------------
	map
---------------------------------------- */
#company .map iframe{
	width:100%;
	margin:0 0 50px 0;
}

@media screen and (max-width:767px){
#company .map iframe{
	height:100%;
	aspect-ratio:8/5;
	margin:0 0 20px 0;
}
}


/* ========================================================================
	企業理念						[ /identity/ ]
======================================================================== */
#identity{
	padding:0 0 100px 0;
}

#identity .inner > p{
	margin:0 0 60px 0;
	text-align:center;
	font-size:2.2rem;
	font-weight:700;
	line-height:4.0rem;
}

#identity .key{
	margin:0 0 200px 0;
}

@media screen and (max-width:767px){
#identity{
	padding:0 0 60px 0;
}

#identity .inner > p{
	margin:0 0 40px 0;
	text-align:left;
	font-size:1.8rem;
	line-height:3.6rem;
}

#identity .key{
	margin:0 0 60px 0;
}
}


/* ----------------------------------------
	section
---------------------------------------- */
#identity section{
	padding:0 0 160px 0;
}

#identity section p{
	margin:0 0 40px 0;
	text-align:center;
	font-weight:500;
}

#identity section p.lead{
	display:flex;
	justify-content:center;
	text-align:left;
	font-size:3.6rem;
	font-weight:700;
	line-height:5.6rem;
}

@media screen and (max-width:767px){
#identity section{
	padding:0 0 40px 0;
}

#identity section p{
	margin:0 0 20px 0;
	text-align:left;
}

#identity section p.lead{
	font-size:2.0rem;
	line-height:4.0rem;
}
}


/* ========================================================================
	事業案内						[ /business/ ]
======================================================================== */

/* ----------------------------------------
	service
---------------------------------------- */
#business .service .point ul{
	display:flex;
	gap:0 39px;
}

#business .service .point ul li{
	width:374px;
	margin:0 0 200px 0;
	padding:30px 30px 40px;
	background:#f3f3f3;
}


#business .service .point dl dt{
	position:relative;
	margin:0 0 28px 0;
	padding:32px 0 0 0;
	text-align:center;
	font-size:2.4rem;
	font-weight:700;
	line-height:3.6rem;
}

#business .service .point dl dt::before{
	content:"";
	position:absolute;
	top:0;
	left:50%;
	width:20px;
	height:4px;
	background:#ede274;
	transform:translateX(-50%);
}

#business .service .point dl dd{
	line-height:3.0rem;
}

@media screen and (max-width:767px){
#business .service .point ul{
	display:block;
	padding:0 0 40px 0;
}

#business .service .point ul li{
	width:auto;
	margin:0 0 20px 0;
	padding:30px 20px;
}

#business .service .point dl dt{
	margin:0 0 20px 0;
	padding:24px 0 0 0;
	font-size:2.0rem;
	line-height:3.0rem;
}
}


/* flex
---------------------------------------- */
#business .service .point .flex{
	position:relative;
	margin:0 0 100px 0;
}

#business .service .point .block{
	padding:0 0 0 100px;
}

#business .service .point .block h3{
	margin:0 0 28px 0;
	padding:24px 0;
	border-top:2px solid #7498b3;
	border-bottom:2px solid #7498b3;
	font-size:3.2rem;
	font-weight:700;
	line-height:4.8rem;
}

#business .service .point .block h3 span{
	display:flex;
	justify-content:center;
	align-items:center;
	position:absolute;
	top:-28px;
	left:-24px;
	width:276px;
	height:60px;
	background:#333132;
	font-size:3.4rem;
	color:#ffffff;
	line-height:1;
}

@media screen and (max-width:767px){
#business .service .point .flex{
	display:block;
	margin:0 0 40px 0;
}

#business .service .point .block{
	padding:0;
}

#business .service .point .block h3{
	margin:40px 0 20px 0;
	padding:20px 0;
	font-size:2.2rem;
	line-height:3.8rem;
}

#business .service .point .block h3 span{
	top:-10px;
	left:-10px;
	width:180px;
	height:50px;
	font-size:2.4rem;
}
}


/* ----------------------------------------
	example
---------------------------------------- */
#business .example{
	padding:200px 0;
	background:#d8e6f0;
}

@media screen and (max-width:767px){
#business .example{
	padding:30px 0 60px 0;
}
}


/* ----------------------------------------
	faq
---------------------------------------- */
#business .faq{
	padding:200px 0 168px 0;
}

#business .faq dl{
	overflow:hidden;
	margin:0 0 32px 0;
	border-radius:10px;
	box-shadow:0 0 10px 0 rgba(0,0,0,0.14);
}

#business .faq dl dt{
	display:flex;
	align-items:center;
	position:relative;
	height:88px;
	padding:0 76px 0 0;
	font-size:2.2rem;
	line-height:3.2rem;
	font-weight:700;
	cursor:pointer;
}

#business .faq dl dt::before{
	content:"＋";
	display:flex;
	justify-content:center;
	align-items:center;
	position:absolute;
	top:0;
	right:0;
	width:76px;
	height:88px;
	font-size:3.6rem;
	font-weight:400;
	color:#7498b3;
}
#business .faq dl dt.close::before{ content:"－"; }

#business .faq dl dd{
	display:none;
	position:relative;
	min-height:88px;
	margin:54px 76px 80px 56px;
	padding:26px 0 0 128px;
}

#business .faq dl dt span,
#business .faq dl dd span{
	display:flex;
	justify-content:center;
	align-items:center;
	flex:none;
	width:88px;
	height:88px;
	margin:0 40px 0 0;
	background:#7498b3;
	border-radius:0;
	font-size:3.6rem;
	font-weight:700;
	color:#ffffff;
	transition-duration:0.2s;
}
#business .faq dl dd span{
	position:absolute;
	top:0;
	left:0;
	background:#3e3e3e;
	border-radius:10px;
	font-size:3.0rem;
}
#business .faq dl dt.close span{ border-bottom-right-radius:10px; }

@media screen and (max-width:767px){
#business .faq{
	padding:30px 0 40px 0;
}

#business .faq dl{
	margin:0 0 20px 0;
}

#business .faq dl dt{
	height:auto;
	padding:20px 50px 20px 70px;
	font-size:1.8rem;
	line-height:2.8rem;
}

#business .faq dl dt::before{
	width:50px;
	height:50px;
	font-size:2.4rem;
}

#business .faq dl dd{
	min-height:auto;
	margin:0 20px 20px 20px;
	padding:0 0 10px 70px;
}

#business .faq dl dt span,
#business .faq dl dd span{
	position:absolute;
	top:0;
	left:0;
	width:50px;
	height:50px;
	margin:0;
	border-bottom-right-radius:10px;
	font-size:2.4rem;
}
}


/* ========================================================================
	実績紹介						[ /works/ ]
======================================================================== */
#works .inner > p{
	margin:0 0 150px 0;
	text-align:center;
	font-size:2.2rem;
	font-weight:700;
	line-height:4.0rem;
}

#works .inner > section{
	padding:180px 0 200px 0;
	border-top:1px solid #b3b3b3;
}

@media screen and (max-width:767px){
#works .inner > p{
	margin:0 0 60px 0;
	font-size:1.8rem;
	line-height:2;
}

#works .inner > section{
	padding:40px 0;
}
}


/* ----------------------------------------
	bnr
---------------------------------------- */
#works .bnr{
	padding:200px 0 100px 0;
	border-top:1px solid #b3b3b3;
}

#works .bnr a{
	display:flex;
	flex-direction:column;
	justify-content:center;
	position:relative;
	min-height:484px;
	margin:0 0 100px 0;
	padding:0 162px 0 106px;
	background:url(../../img/works/bg_standard.jpg) no-repeat center;
	background-size:cover;
	color:#ffffff;
	text-decoration:none;
}
#works .bnr .advance a{ background-image:url(../../img/works/bg_advance.jpg); }

#works .bnr a::before{
	content:"";
	position:absolute;
	top:50%;
	right:52px;
	width:86px;
	height:86px;
	background:rgba(255,255,255,0.26);
	border:2px solid #ffffff;
	border-radius:50%;
	transform:translateY(-50%);
}

#works .bnr a::after{
	content:"";
	position:absolute;
	top:0;
	right:84px;
	width:26px;
	height:100%;
	background:url(../../img/common/arrow_01.png) no-repeat center;
	filter:invert(100%) sepia(0%) saturate(27%) hue-rotate(146deg) brightness(105%) contrast(100%);
}

#works .bnr h2{
	margin:0 0 30px 0;
	font-size:4.0rem;
	font-weight:700;
	line-height:1;
}

@media screen and (max-width:767px){
#works .bnr{
	padding:60px 0 20px 0;
}

#works .bnr a{
	min-height:auto;
	margin:0 0 40px 0;
	padding:40px 20px 90px;
}

#works .bnr a::before{
	top:auto;
	bottom:30px;
	right:50%;
	width:36px;
	height:36px;
	transform:translateX(50%);
}

#works .bnr a::after{
	top:auto;
	bottom:30px;
	right:50%;
	width:14px;
	height:40px;
	background-size:100% auto;
	transform:translateX(50%);
}

#works .bnr h2{
	margin:0 0 20px 0;
	font-size:2.0rem;
	line-height:3.0rem;
}
}


/* cat
---------------------------------------- */
#works .bnr .cat{
	display:flex;
	align-items:center;
	gap:0 30px;
	margin:0 0 56px 0;
}

#works .bnr .cat .en{
	position:relative;
	padding:0 0 0 30px;
	font-size:3.4rem;
	font-weight:600;
	line-height:1;
	white-space:nowrap;
}

#works .bnr .cat .en::before{
	content:"";
	position:absolute;
	top:50%;
	left:0;
	width:20px;
	height:2px;
	background:#7498b3;
}

#works .bnr .cat .ja{
	display:flex;
	justify-content:center;
	align-items:center;
	width:244px;
	height:48px;
	background:#7498b3;
	font-size:2.2rem;
	font-weight:700;
}
#works .bnr .advance .cat .ja{ background:#2f5b7d; }

@media screen and (max-width:767px){
#works .bnr .cat{
	display:flex;
	flex-direction:column;
	align-items:flex-start;
	margin:0 0 20px 0;
}

#works .bnr .cat .en{
	display:block;
	margin:0 0 20px 0;
	padding:0 0 0 30px;
	font-size:2.4rem;
}

#works .bnr .cat .en::before{
	content:"";
	position:absolute;
	top:50%;
	left:0;
	width:20px;
	height:2px;
	background:#7498b3;
}

#works .bnr .cat .ja{
	width:240px;
	height:40px;
	font-size:2.0rem;
}
}


/* ----------------------------------------
	list
---------------------------------------- */
#works .list .flex{
	align-items:stretch;
	gap:0 44px;
}

#works .list .block{
	width:578px;
	background:#f1f1f1;
}

#works .list dl{
	position:relative;
	padding:60px 40px;
}
#works .list dl.other{ margin:54px 0 0 0; }

#works .list dl.other::before{
	content:"";
	position:absolute;
	top:-54px;
	left:0;
	width:100%;
	height:54px;
	background:#ffffff;
}

#works .list dl dt{
	margin:0 0 35px 0;
	font-size:2.4rem;
	font-weight:700;
	line-height:1;
}

#works .list dl dd ul li{
	padding:0 0 0 1.0em;
	text-indent:-1.0em;
	font-size:1.6rem;
	line-height:3.6rem;
}

@media screen and (max-width:767px){
#works .list{
	padding-bottom:40px;
}

#works .list .flex{
	display:block;
}

#works .list .block{
	width:auto;
	background:none;
}

#works .list dl,
#works .list dl.other{
	margin:0 0 20px 0;
	padding:40px 20px;
	background:#f1f1f1;
}
#works .list dl.other::before{ content:none; }

#works .list dl dt{
	margin:0 0 20px 0;
	font-size:1.8rem;
	line-height:2.8rem;
}

#works .list dl dd ul li{
	line-height:2;
}
}


/* ----------------------------------------
	maker
---------------------------------------- */
#works .maker .box{
	display:flex;
	justify-content:center;
	gap:0 300px;
	padding:100px 0;
	background:#f1f1f1;
}

@media screen and (max-width:767px){
#works .maker .box{
	flex-wrap:wrap;
	gap:0 20px;
	margin:0 0 20px 0;
	padding:40px 20px;
}
}


/* ----------------------------------------
	model
---------------------------------------- */
#works .model{
	margin:0 0 200px 0;
	padding:60px;
	background:#3a3a3a;
	color:#ffffff;
}

#works .model h2{
	position:relative;
	margin:0 0 36px 0;
	padding:11px 0 11px 310px;
	font-size:3.6rem;
	font-weight:700;
	line-height:4.6rem;
}

#works .model h2 span{
	display:flex;
	justify-content:center;
	align-items:center;
	position:absolute;
	top:0;
	left:0;
	width:280px;
	height:68px;
	background:#7498b3;
	font-size:2.6rem;
	line-height:1;
}
#works.advance .model h2 span{ background:#2f5b7d; }

@media screen and (max-width:767px){
#works .model{
	margin:0 0 60px 0;
	padding:40px 20px;
}

#works .model h2{
	display:flex;
	flex-direction:column;
	align-items:flex-start;
	margin:0 0 20px 0;
	padding:0;
	font-size:2.4rem;
	line-height:3.4rem;
}

#works .model h2 span{
	position:static;
	width:auto;
	height:50px;
	margin:0 0 15px 0;
	padding:0 20px;
	font-size:2.0rem;
}
}


/* ----------------------------------------
	navi
---------------------------------------- */
#works .navi{
	margin:0 0 200px 0;
	padding:200px 0 0 0;
	border-top:1px solid #b3b3b3;
}

#works .navi h2{
	margin:0 0 100px 0;
	text-align:center;
	font-size:5.0rem;
	font-weight:700;
	line-height:1;
}

#works .navi ul{
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	gap:30px 40px;
}

#works .navi ul li a{
	display:flex;
	justify-content:center;
	align-items:center;
	position:relative;
	width:468px;
	height:90px;
	background:#7498b3;
	border-radius:45px;
	font-size:2.4rem;
	font-weight:700;
	color:#ffffff;
	text-decoration:none;
}

#works .navi ul li a::before{
	content:"";
	position:absolute;
	top:50%;
	right:35px;
	border-style:solid;
	border-width:11px 6.5px 0 6.5px;
	border-color:#ffffff transparent transparent transparent;
	transform:translateY(-50%);
}

@media screen and (max-width:767px){
#works .navi{
	margin:0;
	padding:60px 0 40px 0;
}

#works .navi h2{
	margin:0 0 40px 0;
	font-size:3.0rem;
}

#works .navi ul{
	display:block;
}

#works .navi ul li a{
	width:100%;
	height:50px;
	margin:0 0 20px 0;
	font-size:1.6rem;
	line-height:1;
}

#works .navi ul li a::before{
	right:20px;
	border-width:10px 6px 0 6px;
}
}


/* ----------------------------------------
	case
---------------------------------------- */
#works .case{
	padding:0 0 200px 0;
}

#works .case:nth-of-type(even){
	margin-bottom:200px;
	padding-top:200px;
	background:#ececec;
}

#works .case h3{
	display:flex;
	align-items:center;
	gap:0 40px;
	margin:0 0 100px 0;
	font-size:3.2rem;
	font-weight:700;
}

#works .case h3 span{
	display:flex;
	justify-content:center;
	align-items:center;
	width:168px;
	height:74px;
	background:#2f5b7d;
	color:#ffffff;
}

#works .case table th{
	width:260px;
	vertical-align:top;
}

#works .case table td{
	background:#ffffff;
}

#works .case table ul li{
	padding:0 0 0 1.0em;
	text-indent:-1.0em;
}

@media screen and (max-width:767px){
#works .case{
	padding:0 0 20px 0;
}

#works .case:nth-of-type(even){
	margin-bottom:60px;
	padding-top:60px;
}

#works .case h3{
	display:block;
	margin:0 0 40px 0;
	font-size:2.4rem;
	line-height:3.4rem;
}

#works .case h3 span{
	margin:0 0 15px 0;
	width:150px;
	height:50px;
}

#works .case table{
	margin:0 0 40px 0;
}

#works .case table th{
	width:auto;
}
}


/* img
---------------------------------------- */
#works .case .img{
	display:flex;
	justify-content:center;
	gap:0 80px;
}

@media screen and (max-width:767px){
#works .case .img{
	display:block;
	padding:0 0 20px 0;
}

#works .case .img > img{
	display:block;
	margin:0 auto 20px;
}
}


/* ========================================================================
	ご依頼から導入まで				[ /flow/ ]
======================================================================== */

/* ----------------------------------------
	app
---------------------------------------- */
#flow .app{
	padding:0 0 200px 0;
}

#flow .app h2{
	margin:0 0 30px 0;
	text-align:center;
	font-size:5.0rem;
	font-weight:700;
	line-height:1;
}

#flow .app p{
	margin:0 0 120px 0;
	text-align:center;
	font-size:2.4rem;
	font-weight:700;
	line-height:1;
}

@media screen and (max-width:767px){
#flow .app{
	padding:0 0 60px 0;
}

#flow .app h2{
	margin:0 0 10px 0;
	font-size:3.0rem;
	line-height:5.0rem;
}

#flow .app p{
	margin:0 0 40px 0;
	font-size:1.8rem;
	line-height:2.8rem;
}
}


/* tab
---------------------------------------- */
#flow .tab{
	display:grid;
	grid-template-columns:repeat(2,1fr);
	justify-content:center;
	gap:0 8px;
}

#flow .tab li{
	width:596px;
}

#flow .tab a{
	display:flex;
	justify-content:center;
	align-items:center;
	height:94px;
	background:#dedede;
	border-top-left-radius:20px;
	border-top-right-radius:20px;
	font-size:2.6rem;
	font-weight:700;
	line-height:2.6rem;
	text-decoration:none;
	transition-duration:0.2s;
}

#flow .tab a:hover,
#flow .tab .active{
	background:#a4b9c9;
	color:#ffffff;
}

@media screen and (max-width:767px){
#flow .tab{
	gap:0 4px;
}

#flow .tab li{
	width:auto;
}

#flow .tab a{
	height:100%;
	padding:10px;
	border-top-left-radius:10px;
	border-top-right-radius:10px;
	text-align:center;
	font-size:1.6rem;
	line-height:2.4rem;
}
}


/* panel
---------------------------------------- */
#flow .panel{
	padding:0 50px 60px;
	background:#a4b9c9;
	text-align:center;
}

#flow .panel h3{
	padding:80px 0 60px 0;
	font-size:3.6rem;
	font-weight:700;
	color:#ffffff;
	line-height:1;
}

#flow .panel .box{
	padding:80px 44px;
	background:#ffffff;
	border-radius:10px;
}

#flow .panel .meeting{
	display:flex;
	justify-content:center;
	align-items:center;
	padding:0 0 60px 0;
	font-size:2.0rem;
	font-weight:500;
}

#flow .panel .meeting img{
	margin:0 20px 0 0;
}

#flow .panel .free{
	margin:0 0 -10px 0;
	padding:50px 0 0 0;
	font-size:2.0rem;
	font-weight:500;
}

@media screen and (max-width:767px){
#flow .panel{
	padding:0 20px 40px;
}

#flow .panel h3{
	padding:30px 0;
	font-size:2.4rem;
	line-height:3.4rem;
}

#flow .panel .box{
	padding:40px 20px;
}

#flow .panel .meeting{
	padding:0 0 30px 0;
	font-size:1.6rem;
	line-height:2.4rem;
}

#flow .panel .meeting img{
	width:40px;
	margin:0 10px 0 0;
}

#flow .panel .free{
	margin:0;
	padding:30px 0 0 0;
	font-size:1.6rem;
}
}


/* ========================================================================
	採用情報						[ /recruit/ ]
======================================================================== */
#recruit section{
	padding:150px 0 200px 0;
	border-top:1px solid #b3b3b3;
}

@media screen and (max-width:767px){
#recruit section{
	padding:30px 0 60px 0;
}
}


/* ----------------------------------------
	job
---------------------------------------- */
#recruit .job p span{
	background:linear-gradient(transparent 69.3%, #d9e3ed 0%);
}

#recruit .job .flex{
	align-items:center;
	margin:0 0 150px 0;
	background:#f2f2f2;
}

#recruit .job .flex ul{
	padding:0 80px;
}

#recruit .job .flex ul li{
	padding:8px 0 8px 1.0em;
	text-indent:-1.0em;
	font-weight:700;
}

#recruit .job .flex ul li::before{
	content:"■";
	color:#7498b3;
}

@media screen and (max-width:767px){
#recruit .job p span{
	background:linear-gradient(transparent 66.7%, #d9e3ed 0%);
}

#recruit .job .flex{
	flex-direction:column;
	margin:0 0 40px 0;
}

#recruit .job .flex ul{
	padding:30px 20px 20px;
}

#recruit .job .flex ul li{
	padding:0 0 10px 1.0em;
}
}


/* ----------------------------------------
	recruit
---------------------------------------- */
#recruit .recruit{
	padding-bottom:100px;
}

@media screen and (max-width:767px){
#recruit .recruit{
	padding-bottom:20px;
}
}


/* ----------------------------------------
	message
---------------------------------------- */
#recruit .message{
	padding-bottom:120px;
}

#recruit .message ul li{
	display:flex;
	margin:0 0 80px 0;
}

#recruit .message ul li figure{
	width:326px;
	padding:10px 20px 0 0;
	text-align:center;
}

#recruit .message ul li figcaption{
	margin:30px 0 0 0;
	font-size:2.2rem;
	font-weight:700;
	line-height:1;
}

#recruit .message ul li dl{
	flex:1;
	padding:76px 76px 20px;
	background:#f3f3f3;
	border-radius:10px;
}

#recruit .message ul li dl dt{
	margin:0 0 20px 0;
	padding:0 0 10px 0;
	border-bottom:1px solid #7498b3;
	font-size:2.4rem;
	font-weight:700;
	line-height:3.6rem;
}

#recruit .message ul li dl dt img{
	margin:0 15px 0 5px;
}

#recruit .message ul li dl dd{
	margin:0 10px 50px;
	line-height:3.0rem;
}

@media screen and (max-width:767px){
#recruit .message{
	padding-bottom:20px;
}

#recruit .message ul li{
	display:block;
	margin:0 0 40px 0;
}

#recruit .message ul li figure{
	width:auto;
	padding:0 0 30px 0;
}

#recruit .message ul li figure img{
	width:120px;
}

#recruit .message ul li figcaption{
	margin:15px 0 0 0;
	font-size:1.8rem;
}

#recruit .message ul li dl{
	padding:40px 20px 10px;
}

#recruit .message ul li dl dt{
	font-size:2.0rem;
	line-height:3.0rem;
}

#recruit .message ul li dl dt img{
	width:30px;
}

#recruit .message ul li dl dd{
	margin:0 10px 30px;
}
}


/* ----------------------------------------
	flow
---------------------------------------- */
#recruit .flow ol{
	display:flex;
	gap:0 55px;
	margin:0 0 100px 0;
}

#recruit .flow ol li{
	position:relative;
}

#recruit .flow ol li::before{
	content:"";
	position:absolute;
	top:50%;
	right:-40px;
	border-style:solid;
	border-width:15px 0 15px 20px;
	border-color:transparent transparent transparent #ede274;
	transform:translateY(-50%);
}
#recruit .flow ol li:last-child::before{ content:none; }

#recruit .flow dl{
	padding:80px 0;
	background:url(../../img/recruit/bg_flow.png) no-repeat right top #d8e6f0;
}

#recruit .flow dl dt{
	margin:0 0 30px 0;
	text-align:center;
	font-size:3.0rem;
	font-weight:700;
	line-height:5.0rem;
}

@media screen and (max-width:767px){
#recruit .flow ol{
	flex-wrap:wrap;
	justify-content:center;
	gap:20px 0;
	margin:0 -15px 60px;
}

#recruit .flow ol li{
	width:33.33%;
	padding:0 15px;
	text-align:center;
}

#recruit .flow ol li::before{
	right:-5px;
	border-width:10px 0 10px 10px;
}
#recruit .flow ol li:nth-child(3n)::before{ content:none; }

#recruit .flow dl{
	padding:40px 20px;
	background-size:199px auto;
}

#recruit .flow dl dt{
	margin:0 0 20px 0;
	font-size:2.0rem;
	text-align:left;
	line-height:3.6rem;
}
}


/* widget_btn
---------------------------------------- */
#recruit .flow .widget_btn{
	margin:0;
}

#recruit .flow .widget_btn span{
	min-width:628px;
	min-height:126px;
	padding:0 18px 0 0;
}

#recruit .flow .widget_btn span::before{
	width:58px;
	height:58px;
}

#recruit .flow .widget_btn span::after{
	right:38px;
	filter:invert(12%) sepia(0%) saturate(0%) hue-rotate(183deg) brightness(93%) contrast(70%);
}

@media screen and (max-width:767px){
#recruit .flow .widget_btn span{
	min-width:auto;
	min-height:auto;
	padding:16px 50px 16px 20px;
}

#recruit .flow .widget_btn span::before{
	width:30px;
	height:30px;
}

#recruit .flow .widget_btn span::after{
	right:20px;
	width:10px;
}
}


/* ========================================================================
	お問い合わせ					[ /contact/ ]
======================================================================== */
#contact{
	padding:0 0 100px 0;
}

#contact p{
	margin:0 0 100px 0;
}

#contact table th{
	position:relative;
	padding:25px 40px 25px 106px;
	text-align:left;
}

#contact table th .must{
	position:absolute;
	top:50%;
	left:40px;
	margin:0;
	transform:translateY(-50%);
}

@media screen and (max-width:767px){
#contact{
	padding-bottom:20px;
}

#contact p{
	margin:0 0 40px 0;
}

#contact table th{
	padding:12px 20px 12px 80px;
}

#contact table th .must{
	left:20px;
}

#contact table td{
	padding:20px;
}
}


/* ----------------------------------------
	must
---------------------------------------- */
#contact .must{
	display:inline-block;
	width:46px;
	margin:0 10px 4px 0;
	padding:6px 0;
	background:#7498b3;
	text-align:center;
	vertical-align:bottom;
	font-size:1.4rem;
	font-weight:500;
	color:#ffffff;
	line-height:1;
}

@media screen and (max-width:767px){
#contact .must{
	width:40px;
	font-size:1.2rem;
}
}


/* ----------------------------------------
	error
---------------------------------------- */
#contact .error{
	margin:0 0 100px 0;
}

#contact .error p{
	margin:0;
	text-align:center;
	color:#dd0000;
}

@media screen and (max-width:767px){
#contact .error{
	margin:0 0 40px 0;
}
}


/* ----------------------------------------
	confirm
---------------------------------------- */
#contact table.confirm th{
	padding:25px 40px;
	text-align:center;
}

@media screen and (max-width:767px){
#contact table.confirm th,
#contact table.confirm td{
	padding:12px 20px;
}
}


/* ========================================================================
	個人情報保護方針について		[ /privacy/ ]
======================================================================== */
#privacy{
	padding:0 0 100px 0;
}

#privacy p{
	margin:0 0 100px 0;
}

#privacy dl dt{
	font-weight:700;
}

#privacy dl,
#privacy dl dd{
	padding:0 0 50px 0;
}

#privacy ul li{
	padding:0 0 0 1.0em;
	text-indent:-1.0em;
}

@media screen and (max-width:767px){
#privacy{
	padding:0 0 20px 0;
}

#privacy p{
	margin:0 0 40px 0;
}

#privacy dl{
	padding:0;
}

#privacy dl dd{
	padding:0 0 40px 0;
}
}


/* ========================================================================
	サイトマップ					[ /sitemap/ ]
======================================================================== */
#sitemap{
	padding:0 0 170px 0;
}

#sitemap .flex{
	justify-content:center;
	gap:0 200px;
}

#sitemap .flex ul li{
	margin:0 0 30px 0;
}

#sitemap .flex a{
	display:inline-block;
	font-size:2.0rem;
	font-weight:700;
	text-decoration:none;
}
#sitemap .flex a:hover{ text-decoration:underline; }

@media screen and (max-width:767px){
#sitemap{
	padding:0 0 40px 0;
}

#sitemap .flex{
	gap:0 40px;
}

#sitemap .flex ul li{
	margin:0 0 20px 0;
}

#sitemap .flex a{
	font-size:min(4.5vw, 1.8rem); /* 400px */
}
}