@charset "utf-8";
/* -----------------------------
	共通レイアウト
-------------------------------- */
.page-title-area .deco-premium,
.page-title-area .deco-startup{
	font-size: 1.8rem;
	margin: 0 0 0 15px;
	vertical-align: -0.4rem;
}

.logo-block {
	display: flex;
	justify-content: flex-start;
	align-items: flex-end;
	gap: 10px;
}

.logo-block .logo {
	max-width: 400px;
}

@media screen and (max-width: 768px){
	/*.logo-block {
		flex-wrap: wrap;
	}*/
	
	.logo-block .logo {
		max-width: 240px;
	}
	
	.page-title-area .deco-premium,
	.page-title-area .deco-startup {
		font-size: 1.2rem;
		margin: 0 0 0 8px;
		vertical-align: -0.6rem;
	}
	
}

/* -----------------------------
	intro-area
-------------------------------- */
.intro-area {
	padding: 80px 0;
	background: url("../img/dot.png");
	position: relative;
}

.intro-area .catch-block {
	position: relative;
}

.intro-area .catch {
	font-size: 4rem;
	font-weight: bold;
	line-height: 1.5;
}
.intro-area .catch.big {
	font-size: 4.4rem;
}

.intro-area .accent {
	color: #F15071;
}

.intro-area .large {
	font-size: 6.0rem;
	display: inline-block;
	padding: 0 5px;
}

.intro-area .min {
	font-size: 2.4rem;
}

.intro-area .logo-block {
	margin: 20px 0 30px;
}

.intro-area .logo {
	width: 400px;
}

.intro-area .txt-wrap {
	width: 58%;
}

.intro-area .bg-wrap {
	display: inline-block;
	position: absolute;
	top: 40px;
	right: -10%;
	background: url("../img/img-plan.png") center/cover, no-repeat;
	width: 52%;
	height: initial;
	aspect-ratio: 682 / 516;
	animation: fuwa 2s infinite;
}
@keyframes fuwa {
	0%,100% {
		transform: translateY(0);
	}
	
	50% {
		transform: translateY(-4px);
	}
}

/*納品型＆スタートアップ*/
/*納品型*/
.delivery .intro-area .img-wrap,
.startup .intro-area .img-wrap{
	position: absolute;
	top: 0;
	right: 0;
	background: url("../img/plan-delivery-mv.jpg") no-repeat left center / cover;
	width: 37%;
	height: 100%;
}
/*スタートアップ*/
.startup .intro-area .img-wrap {
	background: none;
	width: 60%;
	overflow: hidden;
}
.startup .intro-area .img-wrap::before {
	content: "";
	display: block;
	width: 1660px;
	height: 735px;
	position: absolute;
	top: -100px;
	left: 0;
	transform: rotate(-30deg);
	background: url("../img/plan-startup-mv.png") no-repeat left center / cover;
}

@media screen and (max-width: 768px){
	.intro-area {
		padding: 40px 0;
	}
	
	.intro-area .txt-wrap {
		width: 100%;
	}
	
	.intro-area .catch {
		font-size: 2.6rem;
		text-shadow: #fff 2px 0px 0px, #fff -2px 0px 0px, #fff 0px -2px 0px, #fff 0px 2px 0px, #fff 2px 2px 0px, #fff -2px 2px 0px, #fff 2px -2px 0px, #fff -2px -2px 0px, #fff 1px 2px 0px, #fff -1px 2px 0px, #fff 1px -2px 0px, #fff -1px -2px 0px, #fff 2px 1px 0px, #fff -2px 1px 0px, #fff 2px -1px 0px, #fff -2px -1px 0px, #fff 1px 1px 0px, #fff -1px 1px 0px, #fff 1px -1px 0px, #fff -1px -1px 0px;
		line-height: 1.6;
	}
	.intro-area .catch.large {
		font-size: 2.6rem;
	}

	.intro-area .large {
		font-size: 4.0rem;
		display: inline-block;
		padding: 0 3px;
		line-height: 0;
	}
	
	.intro-area .min {
		font-size: 1.8rem;
	}
	
	.intro-area .bg-wrap {
		right: -10%;
		top: -10px;
		width: 60%;
		height: initial;
	}
	
	.intro-area .logo-block {
		margin: 30px 0 20px;
	}
	
	.intro-area .logo {
		width: 240px;
	}
	
	/*納品型＆スタートアップ*/
	/*納品型*/
	.delivery .intro-area .img-wrap{
		position: static;
		top: auto;
		right: auto;
		width: 100%;
		height: 200px;
		margin: 0 auto 30px;
	}
	/*スタートアップ*/
	.startup .intro-area .img-wrap {
		position: absolute;
		width: 100%;
		height: 190px;
	}
	.startup .intro-area .img-wrap::before {
		width: 120%;
		height: initial;
		aspect-ratio: 1660 / 735;
		right: -40%;
		left: initial;
		top: 0;
	}
	.startup .intro-area .logo-block {
		margin: 60px 0 20px;
	}
	
}

/* -----------------------------
	.reccomend-area
-------------------------------- */
.reccomend-area {
	padding: 100px 0;
	background: #E7EDF7;
	position: relative;
}

.reccomend-area .ttl-block {
	display: flex;
	gap: 15px;
	align-items: flex-end;
	justify-content: center;
	position: relative;
	padding: 0 20px 20px;
	border-bottom: 1px solid var(--navy);
	width: fit-content;
	margin: 0 auto;
}

.reccomend-area .ttl-block::before {
	content: "";
	display: inline-block;
	position: absolute;
	bottom: -1px;
	left: 50%;
	transform: translateX(-50%);
	background: #E7EDF7;
	width: 20px;
	height: 3px;
}

.reccomend-area .ttl-block::after {
	content: "";
	display: inline-block;
	position: absolute;
	bottom: -18px;
	left: 49.8%;
	transform: translateX(-50%) rotate(-45deg);
	background: var(--navy);
	width: 1px;
	height: 20px;
}

.reccomend-area .ttl-txt {
	font-size: 3.4rem;
	color: var(--navy);
	font-weight: bold;
	line-height: 1.5;
}

.reccomend-area .reccomend-list {
	display: flex;
	flex-wrap: wrap;
	gap: 80px 20px;
	justify-content: flex-start;
	align-items: flex-start;
	margin: 100px 0 0;
}

.reccomend-area .reccomend-list li {
	position: relative;
	width: calc( ( 100% - 60px ) / 4 );
	background: #F9FAFB;
	padding: 20px 15px;
	text-align: center;
}
.reccomend-area .reccomend-list.col3 li {
	width: calc( ( 100% - 40px ) / 3 );
}

.reccomend-area .reccomend-list li::before,
.reccomend-area .reccomend-list li::after {
	position: absolute;
	width: 18px;
	height: 13px;
	background: url("../img/deco-want02.png") center/cover, no-repeat;
	
}

.reccomend-area .reccomend-list li::before {
	content: "";
	left: 10px;
	top: -7px;
}

.reccomend-area .reccomend-list li::after {
	content: "";
	right: 10px;
	bottom: -7px;
	transform: rotate(180deg);
}

.reccomend-area .reccomend-list .want-txt {
	font-weight: 800;
	line-height: 1.8;
}

.reccomend-area .reccomend-list .icon-wrap {
	position: absolute;
	top: -45px;
	right: 10px;
	width: 60px;
	height: 60px;
}

@media screen and (min-width: 1600px) {
	.reccomend-area::before {
		content: "";
		display: inline-block;
		position: absolute;
		bottom: -30px;
		right: 2%;
		background: url("../img/ill-wants01.png") center/cover, no-repeat;
		aspect-ratio: 265 / 269;
		width: 200px;
		height: initial;
	}
}

@media screen and (max-width: 768px){
	.reccomend-area {
		padding: 40px 0;
	}
	
	.reccomend-area::before {
		display: none;
	}
	
	.reccomend-area .ttl-block {
		flex-wrap: wrap;
		padding: 0 10px 10px;
		gap: 8px 10px;
	}
	
	.reccomend-area .ttl-block::after {
		bottom: -17px;
		left: 49.3%;
	}
	
	.reccomend-area .logo-block .logo {
		width: 210px;
	}
	
	.reccomend-area .ttl-txt {
		font-size: 2.0rem;
	}
	
	.reccomend-area .reccomend-list {
		gap: 20px;
		margin: 30px 0 0;
		flex-wrap: wrap;
	}
	
	.reccomend-area .reccomend-list li,
	.reccomend-area .reccomend-list.col3 li{
		width: 100%;
		padding: 20px 15px;
		display: flex;
	}
	
	.reccomend-area .reccomend-list .icon-wrap {
		top: initial;
		right: initial;
		width: 50px;
		height: 50px;
		position: relative;
	}
	
	.reccomend-area .reccomend-list .want-txt {
		font-weight: bold;
		line-height: 1.6;
		width: calc( 100% - 50px );
		text-align: left;
		font-size: 1.5rem;
		padding-left: 20px;
	}
	
}

/* -----------------------------
	about-area
-------------------------------- */
.about-area {
	padding: 100px 0;
	position: relative;
}

.about-area .bg-wrap {
	position: absolute;
	top: 0;
	right: 0;
	background: url("../img/bg-plan.png")  no-repeat #E7EDF7;
	background-position: 300px 0;
	background-size: cover;
	width: 100%;
	height: 100%;
	z-index: -1;
}
/*20プラン*/
.startup .about-area {
	background: #F3F4F7;
}
.startup .about-area .bg-wrap {
	background: url("../img/plan-startup.jpg")  no-repeat #E7EDF7;
	background-position: right top;
	width: 32%;
	z-index: 0;
}

.about-area .catch {
	font-size: 3.4rem;
	color: var(--navy);
	line-height: 1.5;
	font-weight: bold;
}

.about-area .sub-catch {
	font-size: 2.4rem;
	font-weight: bold;
	line-height: 1.7;
	margin: 20px 0;
}

.about-area .txt-wrap {
	width: 780px;
}

.about-area .basic-txt + .basic-txt {
	margin: 10px 0 0;
}

@media screen and (max-width: 768px){
	.about-area {
		padding: 0 0 40px;
		background: #E7EDF7;
	}
	
	.about-area .bg-wrap {
		position: relative;
		top: initial;
		right: initial;
		background: url("../img/bg-plan.png") center/cover, no-repeat var(--navy);
		background-position: top right;
		background-size: cover;
		width: 100%;
		height: 55vw;
		z-index: 1;
	}
	/*20プラン*/
	.startup .about-area {
	}
	.startup .about-area .bg-wrap {
		background: url("../img/plan-startup.jpg")  no-repeat #E7EDF7 left center / cover;
		width: 100%;
		height: 45vw;
		z-index: 1;
	}

	.about-area .txt-wrap {
		width: 100%;
		padding: 30px 0 0;
	}
	
	.about-area .sub-catch {
		font-size: 2.0rem;
		letter-spacing: 0;
		margin: 15px 0;
	}
}

/* -----------------------------
	.service-area
-------------------------------- */
.service-area {
	padding: 100px 0 0;
	position: relative;
}

.service-index-block ul{
	display: flex;
	justify-content: space-between;
}
.service-index-block ul li{
	width: calc((100% / 5) - 20px);
	height: 220px;
	display: block;
	position: relative;
}
.service-index-block ul li a{
	height: 100%;
	border-radius: 200px;
	border: 1px var(--blue) solid;
	background: #fff;
	display: flex;
	flex-direction: column;
	box-shadow: 0 3px 15px rgba(0, 0, 0, .1);
	justify-content: center;
	align-items: center;
	padding: 0 20px;
	text-align: center;
}
.service-index-block ul li:hover a{
	box-shadow: none;
}
.service-index-block ul li a .num{
	color: var(--blue);
	font-size: 2.3rem;
	line-height: 1;
	position: absolute;
	  top: 30px;
    left: 50px;
}
.service-index-block ul li a img{
	width: 70px;
	object-fit: contain;
	height: auto;
}
.service-index-block ul li a .txt{
	color: var(--navy);
		font-size: 1.6rem;
	font-weight: 600;
	line-height: 1.5;
	margin: 10px 0 0;
}
.service-index-block ul li a::after{
	content: "\f107";
	position: absolute;
	bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
	color: var(--blue);
	font-size: 2rem;
	transition: .3s all;
}
.service-index-block ul li:hover a::after{
	bottom: 5px;
}

.service-area > .marquee {
	position: absolute;
	top: 60px;
	left: 0;
	font-size: 18.0rem;
	overflow: hidden;
	white-space: nowrap;
	font-weight: bold;
	font-family: 'Poppins', sans-serif;
  	animation: marquee 120s linear infinite;
	letter-spacing: .5rem;
	color: #F3F4F7;
	display: inline-block;
	z-index: -1;
}

.service-area > .marquee span {
	color: transparent;
	-webkit-text-stroke: 1px #DCDCDC;
	padding: 0 30px 0 0;
}

.service-area .service-block {
	width: 100%;
	margin: 100px 0 0;
	position: relative;
}

.service-area .service-block:has( .marquee ) {
	margin: 140px 0 0;
}


.service-area .service-block .marquee {
	position: absolute;
	top: -60px;
	left: 0;
	font-size: 12.0rem;
	/*overflow: hidden;*/
	white-space: nowrap;
	font-weight: bold;
	font-family: 'Poppins', sans-serif;
  	animation: marquee 200s linear infinite;
	letter-spacing: .9rem;
	display: inline-block;
	color: transparent;
	-webkit-text-stroke: 1px var(--blue);
	z-index: 1;
}

.service-area .service-block .marquee span {
	color: var(--blue);
}

.service-area .service-block .service-ttl {
	width: 100%;
	height: 420px;
	padding-left: calc( ( 100% - 1200px ) / 2 );
	position: relative;
	display: flex;
	justify-content: flex-start;
	align-items: flex-end;
}

.service-area .service-block .service-bg {
	margin: 0 0 0 auto;
	width: 90%;
	min-width: 1500px;
	height: 100%;
	position: absolute;
	top: 0;
	right: 0;
	z-index: -1;
}

.service-area .service-block.full-ordermade .service-bg {
	background: url("../img/bg-service01.jpg") center/cover, no-repeat;
}

.service-area .service-block.original-design .service-bg {
	background: url("../img/bg-service02.jpg") center/cover, no-repeat;
}

.service-area .service-block.after-support .service-bg {
	background: url("../img/bg-service03.jpg") center/cover, no-repeat;
}

.service-area .service-block.seo .service-bg {
	background: url("../img/bg-service04.jpg") center/cover, no-repeat;
}

.service-area .service-block.full-renewal .service-bg {
	background: url("../img/bg-service05.jpg") center/cover, no-repeat;
}

.service-area .service-block.cms .service-bg {
	background: url("../img/bg-service06.jpg") center/cover, no-repeat;
}
.service-area .service-block.server .service-bg {
	background: url("../img/bg-service07.jpg") center/cover, no-repeat;
}

.service-area .service-ttl .num {
	font-size: 8rem;
	font-weight: bold;
	-webkit-text-stroke: 1px #efefef;
	color: transparent;
	position: absolute;
	/*
	top: 50%;
	transform: translateY(-50%);
	*/
	bottom: 0;
	top: 10px;
	left: calc( calc( ( 100% - 1200px ) / 2 ) - 80px );
}

.service-area .service-ttl .service-ttl-txt {
	/*
	font-size: 4.6rem;
	color: #fff;
	font-weight: bold;
	line-height: 1.5;
	text-shadow: 0 0 6px rgba(0,0,0,.3);
	z-index: 1;
	margin: 0 0 50px;
	position: relative;
	*/
	font-size: 4.8rem;
	color: var(--navy);
	font-weight: bold;
	z-index: 1;
	margin: 0 0 60px;
	position: relative;
}
.service-area .service-ttl .service-ttl-txt span.txt-bg {
	line-height: 1.6;
	box-decoration-break: clone;	
	-webkit-box-decoration-break: clone;
	display: inline;
	background: #fff;
	padding: 4px 10px;
}

.service-area .service-ttl-txt .deco {
	display: inline-block;
	height: 40px;
	width: initial;
	margin-left: -40px;
	transform: rotate(-10deg);
}

.service-area .service-box {
	display: flex;
	margin: 80px 0 0;
	align-items: center;
}

.service-area .service-box .txt-wrap {
	width: 62%;
	padding: 0 100px 0 calc( ( 100% - 1200px ) / 2 );
}
.service-area .service-box .txt-wrap.wide {
	width: 1200px;
	margin: 0 auto;
	padding: 20px 0;
}

.service-area .service-box .bg-wrap {
	width: 38%;
	overflow: hidden;
	position: relative;
	padding: 0 5% 0 0;
}

.service-area .service-box .bg-wrap img{
	object-fit: contain;
}

.service-area .service-box .bg-wrap.h500 {
	height: 500px;
	width: auto;
}

.service-area .service-catch {
	font-size: 3.2rem;
	font-weight: bold;
	color: var(--blue);
	line-height: 1.8;
	position: relative;
	margin: 0 0 30px;
}

.service-area .service-catch::before {
	content: "";
	display: inline-block;
	position: absolute;
	top: 27px;
	left: -50px;
	width: 30px;
	height: 1px; 
	background: var(--blue);
}

.service-area .service-txt {
	line-height: 2.4;
}

.service-area .point-list {
	display: flex;
	padding: 50px;
	width: 1300px;
	margin: 100px auto 0;
	background: #F2F6FB;
	justify-content: space-around;
	position: relative;
}
.service-area .point-list.template {
	margin: 50px auto 0;
}

.service-area .point-list::before {
	content: "";
	display: inline-block;
	position: absolute;
	top: -8px;
	left: 20px;
	background: url("../img/double-quotation.svg") center/cover, no-repeat;
	width: 25px;
	height: initial;
	aspect-ratio: 25 / 18;
}

.service-area .point-list::after {
	content: "";
	display: inline-block;
	position: absolute;
	bottom: -8px;
	right: 20px;
	background: url("../img/double-quotation.svg") center/cover, no-repeat;
	width: 25px;
	height: initial;
	aspect-ratio: 25 / 18;
	transform: scale(-1,-1);
}

.service-area .point-list li {
	list-style: none;
}

.service-area .point-list .line {
	width: 1px;
	height: auto;
	background: #ccc;
}

.service-area .point-list .num {
	font-size: 1.2rem;
	font-weight: bold;
	line-height: 1.2;
	color: var(--blue);
	width: 100%;
	display: inline-block;
}

.service-area .point-list .point-ttl {
	font-size: 2.0rem;
	font-weight: bold;
	line-height: 1.6;
	background-image: linear-gradient(to right, #FFDF60 0%, #FFDF60 50%, transparent 50%);
    background-repeat: no-repeat;
    background-position: 0 90%;
	background-size: 200% 6px;
	padding: 0 0 0 2px;
	transition: background-position 2s;
	width: fit-content;
}

.service-area .point-list .point-ttl::after {
	content: "\f00c";
	display: inline-block;
	color: var(--blue);
	font-size: 1.8rem;
	margin-left: 5px;
}

.service-area .point-list .point-txt {
	line-height: 1.6;
	margin: 10px 0 0;
}

.service-area .point-list li:has( .txt-wrap ) {
	display: flex;
}

.service-area .point-list .tool-wrap {
	display: flex;
	align-items: flex-end;
	gap: 10px;
	margin-left: 30px;
}

.service-area .point-list .tool-wrap .icon-wrap {
	background: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 8px;
	width: 60px;
	height: 60px;
}

.service-area .point-list .tool-wrap .icon-wrap img {
	width: 36px;
	height: auto;
	object-fit: cover;
}

.service-area .option-ttl {
	width: 100%;
	padding-left: calc( ( 100% - 1200px ) / 2 );
}

.service-area .option-ttl .en {
	font-size: 8.0rem;
	font-weight: bold;
	line-height: 1.2;
	color: var(--blue);
	background: #fff;
	display: inline-block;
	padding: 0 20px;
	letter-spacing: .8rem;
	margin-left: -20px;
}

.service-area .option-ttl .jp {
	font-size: 2.4rem;
	font-weight: bold;
	line-height: 1.5;
}

.service-area .option-box {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	margin: 100px auto 200px;
	position: relative;
	width: 100%;
}

.service-area .option-box::before {
	content: "";
	display: block;
	border: 1px solid var(--blue);
	width: 1400px;
	height: calc( 100% + 50px );
	position: absolute;
	top: 50px;
	left: 50%;
	transform: translateX(-50%);
	z-index: -1;
}

.service-area .option-box .txt-wrap {
	width: 65%;
	padding-left: calc( ( 100% - 1200px ) / 2 );
	padding-right: 100px;
}

.service-area .option-box .option-catch {
	font-size: 3.2rem;
	font-weight: bold;
	line-height: 1.7;
	margin: 30px 0;
}

.service-area .option-box .option-txt {
	line-height: 2.4;
}

.service-area .option-box .option-txt + .option-txt {
	margin: 10px 0 0;
}

.service-area .plan-btn {
	text-align: left;
	margin: 30px 0 0;
}

.service-area .plan-btn a {
	text-align: center;
}

.service-area .option-box .bg-wrap {
	width: 35%;
	height: 420px;
	overflow: hidden;
	position: relative;
}

.service-area .option-box .bg-wrap img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top;
}

.other-service-block {
	background: #ECF1F9;
	position: relative;
	margin: 180px 0 0;
	padding: 80px 0 100px;
}

.other-service-block .intro-img {
	width: 400px;
	position: absolute;
	top: -60px;
	left: 50%;
	transform: translateX(-50%);
}

.other-service-block .other-service-catch {
	font-size: 3.6rem;
	font-weight: bold;
	line-height: 1.6;
	text-align: center;
}

.other-service-box {
	background: #fff;
	padding: 60px;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	margin: 60px 0 0;
}

.other-service-box .txt-wrap {
	width: calc( 100% - 370px );
	padding-right: 60px;
}

.other-service-box .ttl-group {
	width: 100%;
	margin: 0 0 20px;
}

.other-service-box .ttl-group .num {
	font-size: 1.5rem;
	font-weight: bold;
	color: var(--blue);
	line-height: 1.6;
}

.other-service-box .ttl-group .other-service-ttl {
	font-size: 3.0rem;
	font-weight: bold;
	line-height: 1.5;
	padding: 0 0 10px;
	border-bottom: 1px solid #ccc;
	width: 100%;
}

.other-service-box .ttl-group .tag {
	background: linear-gradient(0deg, #195fcf, #1864d5, #1668db, #146de2, #1172e8, #0e76ee, #087bf5, #0180fb);
	display: inline-block;
	border-radius: 20px;
	font-size: 1.7rem;
	font-weight: bold;
	color: #fff;
	padding: 5px 20px;
	vertical-align: 0.4rem;
	margin-left: 15px;
}

.other-service-box .img-wrap {
	width: 370px;
	height: auto;
	position: relative;
}

.other-service-box .img-wrap img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.other-service-box .other-service-txt {
	line-height: 2.4;
}

.other-service-box .icon-list {
	display: flex;
	justify-content: flex-start;
	gap: 30px;
	width: 100%;
	margin: 60px 0 0;
}

.other-service-box .icon-list li {
	width: calc( ( 100% - 60px ) / 3 );
	background: #E5EBEE;
	position: relative;
	padding: 60px 20px 30px;
	text-align: center;
}

.other-service-box .icon-list li::before {
	content: "";
	display: inline-block;
	width: 100%;
	height: 1px;
	background: #fff;
	position: absolute;
	top: 10px;
	left: 0;
}

.other-service-box .icon-list li::after {
	content: "";
	display: inline-block;
	width: 100%;
	height: 1px;
	background: #fff;
	position: absolute;
	bottom: 10px;
	left: 0;
}

.other-service-box .icon-list .icon-wrap {
	background: #fff;
	border-radius: 40px;
	width: 80px;
	height: 80px;
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	top: -40px;
	left: 50%;
	transform: translateX(-50%);
}

.other-service-box .icon-list .icon-wrap img {
	width: 40px;
	height: auto;
	object-fit: cover;
}

.other-service-box .icon-list .list-num {
	position: absolute;
	color: #fff;
	font-size: 1.2rem;
	font-weight: bold;
	writing-mode: vertical-lr;
	top: 20px;
	left: -2px;
}

.other-service-box .icon-list .list-catch {
	font-size: 2.0rem;
	font-weight: bold;
	line-height: 1.7;
	background-image: linear-gradient(to right, #FCF996 0%, #FCF996 50%, transparent 50%);
    background-repeat: no-repeat;
    background-position: 0 100%;
	background-size: 200% 10px;
	padding: 0 0 0 2px;
	transition: background-position 2s;
	display: inline;
}

.other-service-box .icon-list .list-txt {
	margin: 15px 0 0;
}

.other-service-box .accordion-icon {
	display: none;
}

@media screen and (min-width: 769px){
	/*逆*/
	.service-area .service-box.reverse {
		flex-direction: row-reverse;
	}

	.service-area .service-box.reverse .txt-wrap {
		padding: 20px calc( ( 100% - 1200px ) / 2 ) 20px 100px;
	}

	.service-area .service-box.reverse .bg-wrap img {
	}
	
	.service-area .service-box.reverse .bg-wrap {
		padding: 0 0 0 5%;
	}
}
@media screen and (max-width: 768px){
	.service-area {
		padding: 40px 0 0;
	}
	.service-index-block ul{
		display: block;
	}
	.service-index-block ul li{
		width: 100%;
		height: auto;

	}
	.service-index-block ul li:nth-child(n + 2){
		margin: 10px 0 0 ;
	}
	.service-index-block ul li a{
			border-radius: 5px;
		display: flex;
		flex-direction: inherit;
		padding: 8px 10px 15px 20px;
	}
	.service-index-block ul li:hover a{
	}
	.service-index-block ul li a .num{
		        left: -10px;
        background: var(--blue);
        color: #fff;
        font-size: 1.2rem;
        border-radius: 5px;
        width: 26px;
        height: 26px;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.service-index-block ul li a img{
		width: 60px;
		margin: 0 20px 0 0;
	}
	.service-index-block ul li a .txt{
		flex: 1;
        text-align: left;
		font-size: 1.6rem;
		line-height: 1.6;
		margin: 0;
	}
	.service-index-block ul li a::after{
		bottom: 5px;
		font-size: 1.6rem;
	}
	.service-index-block ul li:hover a::after{
		bottom: 5px;
	}

	.service-area > .marquee {
		top: -20px;
		font-size: 9.0rem;
		letter-spacing: .5rem;
	}
	
	.service-area .service-block {
		margin: 40px 0 0;
	}
	
	.service-area .service-block:has( .marquee ) {
		margin: 70px 0 0;
	}
	
	.service-area .service-block .marquee {
		top: -40px;
		font-size: 6.0rem;
		letter-spacing: .3rem;
	}
	
	.service-area .service-block .service-bg {
		width: 100%;
		min-width: initial;
	}
	
	.service-area .service-block .service-ttl {
		width: 100%;
		height: auto;
		padding: 100px 0 0;
		min-height: 200px;
	}
	
	.service-area .service-ttl .service-ttl-txt {
		font-size: 2.6rem;
		margin: 0 0 10px 10px;
	}
	.service-area .service-ttl .service-ttl-txt span.txt-bg {
		line-height: 1.6;
		background: #fff;
		padding: 2px 5px;
	}

	
	.service-area .service-ttl .num {
		font-size: 5.0rem;
		top: 10px;
		transform: none;
		left: 10px;
		/*right: 20px;
		bottom: -8px;*/
		font-weight: 900;
	}
	
	.service-area .service-ttl-txt .deco {
		height: 20px;
		margin-left: 0;
		transform: rotate(-10deg);
		position: absolute;
		right: 0;
		bottom: 5px;
	}
	
	.service-area .service-box {
		flex-wrap: wrap;
		margin: 30px 0 0;
		padding: 0 20px;
	}
	
	.service-area .service-box .txt-wrap,
	.service-area .service-box .txt-wrap.wide{
		width: 100%;
		padding: 0;
		order: 2;
	}
	
	.service-area .service-box .bg-wrap {
		width: 100%;
		/*height: 60vw;*/
		height: auto;
		order: 1;
		padding: 0;
	}
	
	.service-area .service-box .bg-wrap.h500 {
		height: auto;
		width: 100%;
	}
	
	.service-area .service-box .bg-wrap img {
		/*left: 50%;
		transform: translateX(-50%);*/
		left: initial;
		top: initial;
		position: relative;
		width: 100%;
	}
	
	.service-area .service-catch {
		font-size: 2.4rem;
		line-height: 1.5;
		margin: 20px 0 0;
		padding: 0;
	}
	
	.service-area .service-txt {
		line-height: 2.2;
		margin: 15px 0 0;
	}
	
	.service-area .point-list {
		padding: 30px 20px;
		width: 100%;
		margin: 40px auto 0;
		flex-wrap: wrap;
		gap: 20px;
		flex-direction: column;
	}
	.service-area .point-list.template {
		margin: 40px auto 0;
	}
	
	.service-area .point-list .line {
		width: 100%;
		height: 1px;
	}
	
	.service-area .point-list .point-ttl {
		font-size: 2.0rem;
		display: inline;
	}
	
	.service-area .point-list li:has( .txt-wrap ) {
		flex-wrap: wrap;
	}
	
	.service-area .point-list .tool-wrap {
		margin-left: 0;
		margin: 10px 0 0;
		gap: 8px;
	}
	
	.service-area .point-list .tool-wrap .icon-wrap {
		width: 50px;
		height: 50px;
	}
	
	.service-area .point-list .tool-wrap .icon-wrap img {
		width: 32px;
	}
	
	.service-area .option-box {
		margin: 20px auto 60px;
		padding: 0 25px;
		flex-wrap: wrap;
	}
	
	.service-area .option-box::before {
		width: 96%;
		height: calc( 100% - 5px );
		top: 25px;
	}
	
	.service-area .option-ttl {
		padding-left: 0;
	}
	
	.service-area .option-ttl .en {
		font-size: 4.0rem;
		padding: 0 10px;
		letter-spacing: .2rem;
		margin-left: 0;
	}
	
	.service-area .option-ttl .jp {
		font-size: 2.1rem;
	}
	
	.service-area .option-box .txt-wrap {
		display: contents;
	}
	
	.service-area .option-box .option-catch {
		font-size: 2.6rem;
		margin: 20px 0 0;
		order: 2;
		width: 100%;
	}
	
	.service-area .option-box .cmn-more-txt {
		order: 3;
		margin: 20px 0 0;
	}
	
	.service-area .option-box .cmn-more-btn {
		order: 3;
	}
	
	.service-area .option-box .bg-wrap {
		width: 100%;
		height: 50vw;
		order: 1;
		margin: 20px 0 0;
	}
	
	.service-area .option-box .bg-wrap img {
		object-position: 0 -50px;
	}
	
	.service-area .plan-btn {
		width: 100%;
		margin: 20px 0 0;
	}
	
	.other-service-block {
		margin: 70px 0 0;
		padding: 70px 0 40px;
	}
	
	.other-service-block .intro-img {
		width: 80%;
		top: -40px;
	}
	
	.other-service-block .other-service-catch {
		font-size: 2.4rem;
	}
	
	.other-service-box {
		padding: 15px;
		margin: 20px 0 0;
	}
	
	.other-service-box .accordion-icon {
		right: 0;
		display: inline-block;
	}
	
	.other-service-box .txt-wrap {
		display: contents;
	}
	
	.other-service-box .img-wrap {
		width: 20vw;
		order: 1;
	}
	
	.other-service-box .ttl-group {
		width: calc( 100% - 20vw );
		margin: 0;
		order: 2;
		padding-left: 15px;
		position: relative;
	}
	
	.other-service-box .other-service-txt {
		line-height: 2.2;
		order: 3;
		margin: 20px 0 0;
		display: none;
	}
	
	.other-service-box .ttl-group .num {
		font-size: 1.0rem;
	}
	
	.other-service-box .ttl-group .other-service-ttl {
		font-size: 1.8rem;
		padding: 0 0 5px;
	}
	
	.other-service-box .ttl-group .tag {
		font-size: 1.2rem;
		padding: 3px 10px;
		vertical-align: initial;
		margin-left: 0;
		position: absolute;
		top: -25px;
		right: 0;
	}
	
	.other-service-box .icon-list {
		/*gap: 30px;*/
		margin: 30px 0 0;
		order: 4;
		/*flex-wrap: wrap;*/
		display: none;
	}
	
	.other-service-box .icon-list li + li {
		margin: 30px 0 0;
	}
	
	.other-service-box .icon-list li {
		width: 100%;
		padding: 30px 15px 15px;
		/*display: flex;
		flex-wrap: wrap;*/
	}
	
	.other-service-box .icon-list li::before {
		top: 5px;
	}
	
	.other-service-box .icon-list li::after {
		bottom: 5px;
	}
	
	.other-service-box .icon-list .icon-wrap {
		width: 50px;
		height: 50px;
		top: -25px;
	}
	
	.other-service-box .icon-list .icon-wrap img {
		width: 30px;
	}
	
	.other-service-box .icon-list .list-catch {
		font-size: 1.8rem;
		width: 100%;
	}
	
	.other-service-box .icon-list .list-txt {
		margin: 10px 0 0;
		font-size: 1.5rem;
	}
}


/* merit-box */
.service-area .merit-box{
	margin: 80px auto 0;
	background: #ECF1F9;
	padding: 30px;
}
.service-area .merit-box ul{
	display: flex;
	justify-content: space-between;
}
.service-area .merit-box li{
	width: calc((100% / 3) - 10px);
	background: #fff;
	padding: 20px;
}
.service-area .merit-box li img{
	width: 100%;
	height: auto;
	object-fit: contain;
	margin: 20px 0 0;
}
.service-area .merit-box li .num{
	color: var(--blue);
	    font-weight: bold;
}
.service-area .merit-box li .title{
	color: var(--blue);
	font-size: 2.6rem;
	line-height: 1.4;
}

/* matching-box */
.service-area .matching-box{
	margin: 50px 0 0;
	padding: 0 50px;
}

/* voice-list */
.service-area .voice-list{
	margin: 50px 0 0;

}
.service-area .voice-list .title{
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--navy);
    line-height: 1.3;
    font-size: 1.6rem;
    font-weight: 600;
    width: 171px;
	position: relative;
}
.service-area .voice-list .title::before{
    content: "";
    display: inline-block;
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: url(../img/fukidashi01.svg) center / cover, no-repeat;
    width: 171px;
    height: 55px;
    z-index: -1;
}
.service-area .voice-list ul{
	display: flex;
	justify-content: space-between;
	margin: 30px 0 0;
}
.service-area .voice-list ul li{
	width: calc((100% / 3) - 20px);
	background: #F9FAFB;
	padding: 20px 20px 20px 120px;
	position: relative;
}
.service-area .voice-list ul li::before{
	content: '\f10d';
	position: absolute;
	top: -10px;
	left: 10px;
	color: var(--blue);
	font-size: 3rem;
}
.service-area .voice-list ul li::after{
	content: '\f10e';
	position: absolute;
	bottom: -10px;
	right: 10px;
	color: var(--blue);
	font-size: 3rem;
}
.service-area .voice-list ul li .icon-wrap{
	position: absolute;
	width: 70px;
	top: 50%;
    left: 30px;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}

/* option-service-list */
.option-service-list{
	margin: 50px 0 0;
}
.option-service-list .title{
	font-size: 2.6rem;
	color: var(--blue);
	font-weight: bold;
}
.option-service-list ul{
	display: flex;
	justify-content: space-between;
	margin: 20px 0 0;
}
.option-service-list ul li{
	width: calc((100% / 6 ) - 10px);
	text-align: center;
background: #F2F6FB;
	padding: 10px;
}
.option-service-list ul li img{
	height: 80px;
	object-fit: contain;
}
.option-service-list ul li .txt{
	font-size: 1.6rem;
	margin: 10px 0 0;	
}

/* option-flow-list */
.option-flow-list{
	margin: 50px 0 0;
}
.option-flow-list .title{
	font-size: 2.6rem;
	color: var(--blue);
	font-weight: bold;
}
.option-flow-list ul{
	display: flex;
	justify-content: space-between;
	margin: 20px 0 0;
}
.option-flow-list ul li{
	width: calc((100% / 5 ) - 20px);
	border-radius: 15px;
    border: 1px solid #bbb;
	padding: 10px;
	position: relative;
	text-align: center;
}
.option-flow-list ul li::before{
	content: '';
	position: absolute;
	width: 26px;
	height: 1px;
	top: 0;
	right: 0;
	background: #bbb;
	top: 50%;
    left: -26px;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}
.option-flow-list ul li:first-of-type::before{
	display: none;
}
.option-flow-list ul li .num{
	color: var(--blue);
	font-size: 2rem;
	font-family: 'Poppins', sans-serif;
}

@media screen and (max-width: 768px){
	/* merit-box */
	.service-area .merit-box{
		padding: 15px;
		margin: 20px 0 0;
	}
	.service-area .merit-box ul{
		display: flex;
		flex-direction: column;
		gap: 15px;
	}
	.service-area .merit-box li{
		width: 100%;
		padding: 15px;
	}
	.service-area .merit-box li img{
		margin: 10px 0 0;
	}
	.service-area .merit-box li .num{
	}
	.service-area .merit-box li .title{
		font-size: 2rem;
	}

	/* matching-box */
	.service-area .matching-box{
		padding: 0 0 10px;
		margin: 40px 0 0;
		text-align: center;
	}
	.service-area .matching-box img{
		width: 100%;
		height: auto;
	}

	/* voice-list */
	.service-area .voice-list{

	}
	.service-area .voice-list .title{
	}
	.service-area .voice-list .title::before{
	}
	.service-area .voice-list ul{
		flex-direction: column;
		gap: 15px;
	}
	.service-area .voice-list ul li{
		width: 100%;
		padding: 10px 10px 10px 100px;
	}
	.service-area .voice-list ul li::before{
		font-size: 2.3rem;
	}
	.service-area .voice-list ul li::after{
		font-size: 2.3rem;
	}
	.service-area .voice-list ul li .icon-wrap{
		width: 55px;
	}
	.service-area .voice-list ul li p{
		font-size: 1.4rem;
	}

	/* option-service-list */
	.option-service-list{
		margin: 20px 0 0;
	}
	.option-service-list .title{
		font-size: 2rem;
		line-height: 1.5;
	}
	.option-service-list ul{
		flex-direction: column;
		gap:10px;
	}
	.option-service-list ul li{
		width: 100%;
		display: flex;
		align-items: center;
	}
	.option-service-list ul li img{
		margin: 0 20px 0 0;
		width: 60px;
		height: auto;
	}
	.option-service-list ul li .txt{
		text-align: left;
		margin: 0;
	}

	/* option-flow-list */
	.option-flow-list{
		margin: 20px 0 0;
	}
	.option-flow-list .title{
		font-size: 2rem;
		line-height: 1.5;
	}
	.option-flow-list ul{
		flex-direction: column;
		gap:20px;
		margin: 20px 0 0;
	}
	.option-flow-list ul li{
		width: 100%;
	}
	.option-flow-list ul li::before{
		width: 1px;
		height: 22px;
        top: -22px;
		left: 50%;
		transform: translateX(-50%);
		-webkit-transform: translateX(-50%);
		-ms-transform: translateX(-50%);

	}
	.option-flow-list ul li:first-of-type::before{
	}
	.option-flow-list ul li .num{
		position: absolute;
    top: -12px;
    background: #fff;
		line-height: 1;
	}
	
}

/* -----------------------------
	team-area
-------------------------------- */
.team-area {
	padding: 100px 0;
}

.team-area .flex-block {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.team-area .txt-wrap {
	width: calc( 100% - 530px );
}

.team-area .img-wrap {
	width: 500px;
}
.team-area .img-wrap img {
	width: 100%;
	height: auto;
}

.team-area .basic-txt {
	line-height: 2.4;
}

.team-area .flex-block {
	margin: 50px 0 0;
}

@media screen and (max-width: 768px){
	.team-area {
		padding: 40px 0;
	}
	
	.team-area .flex-block {
		margin: 20px 0 0;
		flex-wrap: wrap;
		justify-content: center;
	}
	
	.team-area .img-wrap {
		width: 100%;
		max-width: 500px;
	}
	
	.team-area .txt-wrap {
		width: 100%;
		padding-left: 0;
	}
	
	.team-area .basic-txt {
		line-height: 2.2;
	}
}




/* -----------------------------
	merit-area
-------------------------------- */
.merit-area {
	padding: 100px 0;
	background: #F2F6FB;
	position: relative;
}

.merit-area::before {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	background: url("../img/bg-plan30-merit.png") top left /cover, no-repeat;
	width: 40%;
	height: 100%;
}

.merit-area .txt-wrap {
	margin: 30px 0 0;
	width: 60%;
	position: relative;
	z-index: 1;
}

.merit-area .basic-txt + .basic-txt {
	margin: 10px 0 0;
}

.merit-area .merit-list {
	display: flex;
	width: 60%;
	gap: 15px;
	margin: 40px 0 0;
}

.merit-area .merit-list li {
	width: calc( ( 100% - 30px ) / 3 );
	background: #fff;
	padding: 30px 15px 25px;
	border-radius: 10px;
	text-align: center;
	position: relative;
}

.merit-area .merit-list .merit-num {
	position: absolute;
	top: -5px;
	left: 50%;
	transform: translateX(-50%);
	display: inline-block;
	font-size: 1.2rem;
	font-weight: bold;
	color: var(--navy);
	text-align: center;
}

.merit-area .merit-list .icon-wrap {
	width: 50px;
	margin: 0 auto;
}

.merit-area .merit-list .merit-txt {
	margin: 15px 0 0;
	font-size: 1.4rem;
	text-align: center;
	font-weight: bold;
	letter-spacing: 0;
}

@media screen and (max-width: 768px){
	.merit-area {
		padding: 0 0 40px;
	}
	
	.merit-area .inner {
		display: flex;
		flex-wrap: wrap;
	}
	
	.merit-area::before {
		position: relative;
		top: initial;
		right: initial;
		width: 100%;
		height: 54vw;
		background: url("../img/bg-plan30-merit.png") 0 -20px /cover, no-repeat;
	}
	
	.merit-area .ttl-block {
		margin: 30px 0 0;
		order: 1;
	}
	
	.merit-area .txt-wrap {
		margin: 15px 0 0;
		width: 100%;
		order: 3;
	}
	
	.merit-area .cmn-more-btn {
		order: 3;
	}
	
	.merit-area .merit-list {
		width: 100%;
		gap: 5px;
		margin: 30px 0 0;
		order: 2;
	}
	
	.merit-area .merit-list li {
		width: calc( ( 100% - 10px ) / 3 );
		padding: 20px 5px 20px;
	}
	
	.merit-area .merit-list .merit-num {
		white-space: nowrap;
		font-size: 1.2rem;
	}
	
	.merit-area .merit-list .icon-wrap {
		width: 40px;
	}
	
	.merit-area .merit-list .merit-txt {
		line-height: 1.5;
	}
}


/* -----------------------------
	インタビュー
-------------------------------- */
.interview-pickup-area{
	margin: 150px 0 0;
	position: relative;
}
.interview-pickup-area .marquee {
	position: absolute;
	top: -40px;
	left: 0;
	font-size: 18.0rem;
	overflow: hidden;
	white-space: nowrap;
	font-weight: bold;
	font-family: 'Poppins', sans-serif;
  	animation: marquee 120s linear infinite;
	letter-spacing: .5rem;
	color: #F3F4F7;
	-webkit-text-stroke: 1px rgba(255,255,255,.8);
	display: inline-block;
	z-index: -1;
}

.interview-pickup-area .marquee span {
	color: transparent;
	-webkit-text-stroke: 1px #DCDCDC;
	padding: 0 30px 0 0;
}
.int-title-block{
	display: flex;
	align-items: center;
}
.int-title-block .company{
	margin: 0 20px 0 0;
	font-size: 3.5rem;
	font-weight: bold;
}
.int-title-block .cate{
	display: flex;
    height: fit-content;
}
.int-title-block .cate li{
	border: solid 1px var(--blue);
	font-size: 1.5rem;
	margin: 0 10px 0 0;
	padding: 8px 10px;
	line-height: 1;
	background: #fff;
	color: var(--blue);
}
.interview-pickup-area .img-block{
	display: flex;
	justify-content: center;
	margin: 30px 0 0;
}
.int-profile-thumb-pc{
	width: 400px;
	margin: 0 50px 0 0;

}
.int-profile-thumb-pc img,
.int-profile-thumb-sp img{
	object-fit: contain;
}
.int-profile-thumb-sp {
    width: 350px;
}
.pfp .int-profile-thumb-sp {
	width: 260px;
}

#img_wide {
	width: 400px;
}

.interview-pickup-area .int-block{
	margin: 50px 0 0;
	background: #ECF1F9;
	padding: 100px 0;
}
@media screen and (max-width: 768px){
	.interview-pickup-area{
		margin: 80px 0 0;
	}
	.interview-pickup-area .marquee {
		font-size: 9rem;	
	}
	#img_wide {
		width: calc((100% / 2) - 10px);
	}
	.interview-pickup-area .int-block{
		margin: 20px 0 0;
		display: block;
		padding: 20px 0;
	}
	.int-title-block{
		display: block;
	}

	.int-title-block .company{
		font-size: 2.6rem;
	}
	.int-title-block .cate li{
		font-size: 1.2rem;
	}
	.interview-pickup-area .img-block{
		gap: 10px;
		padding: 0 10px;
	}
	.interview-pickup-area .img-block > p{
		width: calc((100% / 2) - 10px);
	}
	.int-profile-thumb-pc{
		width: 100%;
		margin: 0 0;
	}
	.int-profile-thumb-pc img,
	.int-profile-thumb-sp img{
	}
	.int-profile-thumb-sp {
		width: 100%;
	}
	.pfp .int-profile-thumb-sp {
		width: 35%!important;
	}
	
}

/*----- int-client-area -----*/
.int-client-area {
	padding: 0 0 20px;
	margin: -140px 0 0;
}

.int-client-area .inner {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 180px 30px 30px;
	background: #fff;
}
.interview-pickup-area .int-client-catch{
	font-size: 2.3rem;
	font-weight: bold;
	margin: 0 30px 0 0;
}
.int-client-txt-wrap {
	padding-right: 60px;
}

.int-client-ttl {
	font-size: 1.6rem;
	font-weight: bold;
	line-height: 1.5;
	color: var(--blue);
	position: relative;
	padding: 0 0 5px;
	border-bottom: 1px solid var(--blue);
}

.int-client-ttl::before {
	content: "";
	display: inline-block;
	position: absolute;
	bottom: -2px;
	left: 50%;
	transform: translateX(-50%);
	background: #fff;
	z-index: 1;
	width: 15px;
	height: 2px;
}

.int-client-ttl::after {
	content: "";
	display: inline-block;
	position: absolute;
	bottom: -13px;
	left: 49%;
	transform: translateX(-50%) rotate(-50deg);
	background: var(--blue);
	z-index: 1;
	width: 1px;
	height: 15px;
}

.int-client-logo {
	margin: 20px 0 0;
	text-align: center;
}

.int-client-logo img {
	width: initial;
	object-fit: cover;
	width: revert-layer;
}

.int-client-name {
	margin: 20px 0 0;
	line-height: 1.5;
	font-weight: bold;
}


.int-client-img-wrap {
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	gap: 30px;
	flex-wrap: wrap;
}

.int-client-img {
	text-align: center;
	width: 260px;
	margin: 0px 10px;
}

.int-client-img.full {
	width: 100%;
}

.int-client-position {
	font-size: 1.5rem;
	font-weight: 500;
	line-height: 1.5;
	margin: 15px 0 0;
	display: inline-block;
}

@media screen and (max-width: 768px){
	.int-client-area {
		padding: 30px 10px 0;
		margin: -80px 0 0;
	}
	
	.int-client-area .inner {
		flex-wrap: wrap;
		justify-content: center;
		padding: 70px 10px 20px;
		justify-content: space-between;
	}
	.interview-pickup-area .int-client-catch{
		font-size: 1.8rem;
		margin: 0 0 0 0;
	}
	.int-client-txt-wrap {
		padding-right: 0;
		text-align: center;
	}
	
	.int-client-img-wrap {
		gap: 15px;
		width: calc((100% / 3) - 5px);
		margin: 10px 0 0;
		justify-content: center;
	}
	.pfp .int-client-img-wrap {
		width: 100%;	
	}
	
	.int-client-img {
		text-align: center;
		width: calc( ( 100% - 15px ) / 2 );
		max-width: 280px;
		margin: 0;
	}
	.int-client-img.wide {
		width: 100%;
	}
	
	.int-client-img.full {
		max-width: initial;
	}
	
	.int-client-name {
		margin: 15px 0 0;
		font-size: 1.5rem;
	}
	
	.int-client-position {
		font-size: 1.3rem;
		margin: 5px 0 0;
		font-weight: 500;
	}
	
}
/*----- int-detail-area -----*/
.int-detail-area {
	padding: 30px 0 0;
	/*background: #F2FBFE;*/
}

.int-detail-block {
	background: #fff;
	padding: 80px;
	position: relative;
}

.int-detail-block:not(:last-child) {
	margin: 30px 0 80px;
}
.int-detail-block:last-of-type{
	margin: 30px 0 0;
}

.int-detail-q {
	font-size: 2.2rem;
	font-weight: bold;
	line-height: 1.5;
	color: var(--navy);
	text-align: center;
	padding: 12px 10px;
	border-top: 1px solid var(--navy);
	border-bottom: 1px solid var(--navy);
	display: inline-block;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: -25px;
	white-space: nowrap;
}

.int-detail-q::before {
	content: "";
	display: inline-block;
	position: absolute;
	bottom: -5px;
	left: 50%;
	transform: translateX(-50%);
	width: 16px;
	height: 16px;
	background: #fff;
}

.int-detail-q::after {
	content: "";
	display: inline-block;
	position: absolute;
	bottom: -15px;
	left: 50%;
	transform: translateX(-50%) rotate(-50deg);
	width: 1px;
	height: 18px;
	background: var(--navy);
}

.int-detail-q-en {
	color: var(--blue);
	display: inline-block;
	margin-right: 20px;
}

.int-detail-a {
	font-size: 2.8rem;
	font-weight: bold;
	line-height: 1.5;
	color: var(--orange);
	text-align: center;
	margin: 0 0 40px;
}

.int-detail-talk-box {
	width: 100%;
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	gap: 30px;
}

.int-detail-talk-box:has( + * ) {
	margin: 0 0 40px;
}

.int-detail-talk-thumb {
	width: 70px;
	text-align: center;
}

.int-detail-talk-thumb img {
	width: 100%;
	height: initial;
	border-radius: 50px;
}

.int-detail-talk-name {
	font-size: 1.3rem;
	letter-spacing: 0;
}

.int-detail-talk-txt-wrap {
	width: calc( 100% - 100px );
	background: #f8f8f8;
	padding: 30px;
	position: relative;
}

.int-detail-talk-txt-wrap::before {
	content: "";
	display: inline-block;
	position: absolute;
	top: 30px;
	left: -15px;
	width: 0;
	height: 0;
	border-style: solid;
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
	border-right: 15px solid #f8f8f8;
	border-left: 0;
}

.int-detail-talk-txt {
	line-height: 2;
}

.int-detail-talk-txt:has( + p ) {
	margin: 0 0 10px;
}

.int-detail-staff-txt {
	line-height: 1.8;
}

.int-detail-staff-txt:has( + div ) {
	margin: 0 0 40px;
}

@media screen and (max-width: 768px){
	.int-detail-area {
		padding: 30px 0 0;
	}
	
	.int-detail-block {
		padding: 20px 15px;
	}
	
	.int-detail-block:not(:last-child) {
		margin: 0 0 20px;
	}
	
	.int-detail-q {
		font-size: 1.8rem;
		padding: 10px;
		width: 100%;
		white-space: pre-wrap;
		position: relative;
		left: initial;
		top: initial;
		transform: none;
		margin: 0 0 20px;
	}
	
	.int-detail-a {
		font-size: 2.1rem;
		margin: 0 0 20px;
	}
	
	.int-detail-talk-box {
		gap: 15px;
	}
	
	.int-detail-talk-box:has( + * ) {
		margin: 0 0 20px;
	}
	
	.int-detail-talk-txt-wrap {
		width: calc( 100% - 75px );
		background: #f8f8f8;
		padding: 15px;
	}
	
	.int-detail-talk-txt-wrap::before {
		top: 20px;
		border-right: 10px solid #f8f8f8;
		left: -10px;
	}
	
	.int-detail-talk-thumb {
		width: 60px;
	}
	
	.int-detail-talk-txt {
		line-height: 1.8;
	}
}

/*高さを制限しているボックスの要素*/
.interview-pickup-area .container{
  position: relative;
  height: 1200px;
  overflow: hidden;
  transition: .4s;
  box-sizing: border-box;
}
.interview-pickup-area .pfp .container{
  height: 1000px;
}
.interview-pickup-area .container.active button{
	display: none;
}
/*グラデーションで隠す擬似要素*/
.interview-pickup-area .container:before{
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 200px;
    background: rgb(0, 0, 0);
    background: linear-gradient(0deg, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 100%);
    transition: .4s;
    z-index: 1;
}
/*クラス付与時のスタイル*/
.interview-pickup-area .container.active:before{
  opacity: 0;
  visibility: hidden;
}
/*テキストのスタイル*/
.interview-pickup-area p{
  font-size: 16px;
  line-height: 1.8;
}
/*ボタンのスタイル*/
.interview-pickup-area button{
	position: absolute;
	right: 20px;
	bottom: 50px;
	width: 250px;
	height: 60px;
	cursor: pointer;
	color: #fff;
	background: var(--blue);
	border: none;
	z-index: 1;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
	font-size: 2rem;
	border-radius: 5px;
}
@media screen and (max-width: 768px){
	.interview-pickup-area .container{
	}
	.interview-pickup-area .pfp .container{
	}
	.interview-pickup-area .container.active button{
	}
	.interview-pickup-area .container:before{
		width: calc(100% - 20px);
		left: 50%;
		transform: translateX(-50%);
		-webkit-transform: translateX(-50%);
		-ms-transform: translateX(-50%);
	}
	.interview-pickup-area .container.active:before{
	}
	.interview-pickup-area p{
	}
	.interview-pickup-area button{
		width: 230px;
		height: 55px;
		font-size: 1.5rem;
		bottom: 30px;
	}
}

/* -----------------------------
	faq
-------------------------------- */

/*納品型*/
.delivery .faq-area {
  padding: 0 0 100px;
}


@media screen and (max-width: 768px){
	
	/*納品型*/
	.delivery .faq-area{
		padding: 0 0 40px;
	}
	
}



/* -----------------------------
	20plan
-------------------------------- */
.lp-20plan{
	padding: 0 0 30px;
}
.lp-20plan img{
	width: auto;
	height: auto;
}

.lp-20plan .type_area {
	max-width: 1300px;
	margin: 0 auto;
	padding: 0 0 40px;
	background: #ECF1F9;
}

.lp-20plan .type_area .type_detail_wrapper {
	width: 1200px;
	padding: 10px 0 20px;
	margin: 0 auto;
}

.lp-20plan .type_area .title_area {
    position: relative;
}
.lp-20plan .type_area .type_catch {
	position: absolute;
	top: -70px;
	left: -10px;
    width: 400px;
}

.lp-20plan .type_area .type_title {
	font-size: 2.8rem;
	font-weight: 800;
	line-height: 1.2;
	padding: 10px 0;
}


.lp-20plan .type_area .type_txt {
	background: #fff;
	padding: 60px;
	position: relative;
    margin: 40px 0 0;
}

.lp-20plan .type_area .type_txt .detail_title {
  	display:flex;
	align-items: center;
	position: relative;
}

.lp-20plan .type_area .type_txt .detail_title .type_title_img {
    width: 80px;
	height: 80px;
    height: initial;
	aspect-ratio: 1 / 1;
    background: url("../img/icon-bg.png") center/cover, no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
	margin: 0 20px 0 0;
}
.lp-20plan .type_area .type_txt .detail_title .type_title_img img {
	width: 40px;
	height: 40px;
}

/*
.lp-20plan .type_area .type_txt .detail_title .type_title_img {
	margin: 0 30px 0 0;
}
*/

.lp-20plan .type_area .type_txt .detail_title .title_txt {
	font-size: 2.4rem;
	font-weight: bold;
    line-height: 1.4;
}
.lp-20plan .type_area .type_txt .detail_title .title_txt span {
	font-weight: 700;
    font-size: 1.4rem;
    display: block;
}
.lp-20plan .type_area .type_txt .detail_title .title_txt span.num {
    font-size: 1.6rem;
	color: #fff;
	width: 26px;
	height: 26px;
	line-height: 26px;
	text-align: center;
	margin: -20px 0 10px;
}
.lp-20plan .type_area .type_txt .detail_title .title_txt span.num.type01 {
    background: #CA9800;
}
.lp-20plan .type_area .type_txt .detail_title .title_txt span.num.type02 {
    background: #11BEAE;
}
.lp-20plan .type_area .type_txt .detail_title .title_txt span.num.type03 {
    background: #FF7827;
}

.lp-20plan .type_area .type_txt .detail_title::after {
	content: url("../img/20plan_type_line.html");
	position: absolute;
	bottom: -12px;
	left: 1px;
}

.lp-20plan .type_area .type_txt .type_copy {
	font-size: 3.0rem;
	font-weight: bold;
	line-height: 1.5;
	padding: 30px 0 15px;
	position: relative;
	z-index: 1;
}

.lp-20plan .type_area .type_txt .txt {
	width: 600px;
	position: relative;
	z-index: 1;
    padding: 0 0 20px;
}

.lp-20plan .type_area .type_txt .type_bg_img {
	position: absolute;
	top: 50px;
	right: -50px;
    width: 550px;
}

/*////// tag_area 共通タグ //////*/
.lp-20plan .type_area .tag_area {
  	display:flex;
	margin: 10px 0 0;
	position: relative;
	z-index: 1;
}

.lp-20plan .type_area .tag {
	box-sizing: border-box;
	border: 1px solid #38b29d;
	font-size: 1.4rem;
	text-align: center;
    /*
	width: 8.75%;
    */
	padding: 5px 15px;
	margin: 0 5px 10px 0;
}
.lp-20plan .type_area .type_detail#type01 .tag {
	border: 1px solid #FFCA27;
}
.lp-20plan .type_area .type_detail#type02 .tag {
	border: 1px solid #11BEAE;
}
.lp-20plan .type_area .type_detail#type03 .tag {
	border: 1px solid #FF7827;
}

.lp-20plan .type_area .type_detail .type_sitemap_wrapper .tag {
	border: 1px solid #ccc!important;
}


.lp-20plan .type_area .cms_tag {
	background: #ffde7b;
	display: inline-table;
	font-size: 1.2rem;
	text-align: center;
	width: 45px;
	padding: 3px 0;
}
/*////// tag_area共通タグここまで //////*/

.lp-20plan .type_area .type_sitemap_wrapper {
	/*
	width: 1200px;
	box-sizing: border-box;
	margin: 0 auto;
	padding: 20px 0 80px;
	*/
	box-sizing: border-box;
}

.lp-20plan .type_area .sitemap_inner {
	/*
	background: #E8F2EF;
	padding: 30px;
	*/
	padding: 20px 0 0 ;
}

.lp-20plan .type_area .sitemap_inner .title_area {
	width: 100%;
}

.lp-20plan .type_area .sitemap_inner .title_area .sitemap_title {
	font-size: 1.6rem;
	line-height: 1.5;
}

.lp-20plan .type_area .sitemap_inner .title_area .sub_title {
	font-size: 1.6rem;
    text-align: center;
}


.lp-20plan .type_area .sitemap_inner .tag_area.sitemap_tag_area {
	display: flex;
  	flex-wrap: wrap;
	justify-content: space-between;
	margin: 20px auto 0;
	width: 100%;
	gap: 10px 10px;
}

.lp-20plan .type_area .sitemap_inner .sitemap_tag {
	border: 1px solid #333;
	width: calc((100% - 40px) / 5);
	text-align: left;
	padding: 10px 0 10px 30px;
	position: relative;
	margin: 0;
	line-height: 1.4;
	font-size: 1.4rem;
}

.lp-20plan .type_area .sitemap_inner .sitemap_tag .cms_tag {
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
}

.lp-20plan .type_area .sitemap_inner .tag_caption {
	display:-webkit-box;
  	display:-ms-flexbox;
  	display:flex;
	font-size: 1.4rem;
	padding: 10px 0;
}

.lp-20plan .type_area .sitemap_inner .tag_caption .cms_tag {
	margin: 0 10px 0 0;
}

.lp-20plan .type_area .sitemap_inner .tag_area.sitemap_tag_area .inner {
	width: auto;
}

.lp-20plan .sample_inner{
	padding: 20px 0 20px;
}

.lp-20plan .sample_title {
	font-size: 1.6rem;
	font-weight: 800;
	line-height: 1.5;
	padding: 0 0 20px;
}

.lp-20plan .sample_list {
    display: flex;
	justify-content: space-around;
}

.lp-20plan .sample_list_title {
   	font-size: 1.6rem;
	font-weight: 800;
	line-height: 1.5;
	text-align: center;
	margin: 0 10px 20px 0;
	color: #333;
	padding: 10px 0;
	border-top: 2px #444 solid;
	border-bottom: 2px #444 solid;
}

.lp-20plan .sample_list_box:nth-child(-n+2) {
    margin: 0 80px 0 0;
}

.lp-20plan .sample_list img{
    width: 100%;
}

.lp-20plan .box_btn {
    margin: 20px auto 0;
    width: 260px;
}

.lp-20plan .box_btn .wrap {
    display: flex;
    width: 100%;
    justify-content: space-between;
}

.lp-20plan .box_btn .wrap a {
    display: flex;
    width: 120px;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    padding: 11px 0;
    border-radius: 5px;
	
	background: #19C1AC;
    color: #fff;
	position: relative;
}
.lp-20plan .box_btn .btn_pc a::before,
.lp-20plan .box_btn .btn_sp a::before{
    content: '';
    display: inline-block;
    width: 22px;
    height: 22px;
	position: static;
	margin: 0 10px 0 0;
}
.lp-20plan .box_btn .btn_pc a::before {
    background: url(../img/icon-monitor-wht.svg) no-repeat center center / contain;
}
.lp-20plan .box_btn .btn_sp a::before {
    background: url(../img/icon-smartphone-wht.svg) no-repeat center center / contain;
}

@media screen and (max-width:768px){
	
	.lp-20plan {
		padding: 0;
	}
	
	.lp-20plan .type_area {
		padding: 40px 10px 10px 10px;
        margin: 20px 0 0;
	}

	.lp-20plan .type_area .type_detail_wrapper {
		padding: 0 0 30px;
		width: 100%;
	}
	
	.lp-20plan .type_area .title_area {
		width: 100%;
		position: relative;
		padding: 0;
        margin: 0 0 -20px;
	}
	.lp-20plan .type_area .type_catch {
        top: -50px;
        left: 0;
        width: 240px;
	}

	.lp-20plan .type_area .type_txt {
        padding: 30px 20px;
        margin: 10px 0 0;
	}

	
    .lp-20plan .type_area .type_txt .detail_title .type_title_img {
		width: 60px;
		height: 60px;
		margin: 0 15px 0 0;
	}
	.lp-20plan .type_area .type_txt .detail_title .type_title_img img {
		width: 30px;
		height: 30px;
	}
	
	
    .lp-20plan .type_area .type_txt .detail_title .title_txt {
        font-size: 1.8rem;
    }
    .lp-20plan .type_area .type_txt .detail_title .title_txt span {
        font-size: 1.6rem;
    }
	.lp-20plan .type_area .type_txt .detail_title .title_txt span.num {
		font-size: 1.4rem;
		width: 20px;
		height: 20px;
		line-height: 20px;
		margin: -10px 0 3px;
	}
	
    .lp-20plan .type_area .type_txt .detail_title::after {
        content:'';
        background-image: url(../img/20plan_type_line.html);
        background-size: contain;
        display: inline-block;
        background-repeat: no-repeat;
        bottom: -5px;
        left: 0;
        width: 100%;
        height: 8px;
    }
    
    
	.lp-20plan .type_area .type_txt .type_copy {
		font-size: 2.0rem;
		line-height: 1.5;
		padding: 20px 0 20px;
	}

	.lp-20plan .type_area .type_txt .txt {
		width: 100%;
        padding: 0 0 10px;
	}

	.lp-20plan .type_area .type_txt .type_bg_img {
		position: static;
		margin: 0 0 20px;
        width: 100%;
	}

	.lp-20plan .type_area .type_txt .tag_area {
  		flex-wrap: wrap;
        justify-content: space-between;
		margin: 10px 0 0;
	}
	
	.lp-20plan .type_area .type_txt .tag {
		width: 48%;
		padding: 5px 0;
		margin: 0 0 3% 0;
        line-height: 1.3;
	}
	/*
	.lp-20plan .type_area .type_txt .tag:nth-child(3n){
		margin-right: 0; 
	}
	*/
    
	.lp-20plan .type_area .type_sitemap_wrapper {
		width: 100%;
		box-sizing: border-box;
		margin: 0 auto;
		padding: 0;
	}

	.lp-20plan .type_area .sitemap_inner {
		padding: 10px 0 0;
	}

	.lp-20plan .type_area .sitemap_inner .title_area {
		width: 100%;
	}

	.lp-20plan .type_area .sitemap_inner .title_area .sitemap_title {
		font-size: 1.6rem;
		line-height: 1.5;
		padding: 0 0 15px;
	}

	.lp-20plan .type_area .sitemap_inner .title_area .sub_title {
		font-size: 1.5rem;
        font-weight: bold;
        padding: 0 0 15px;
	}

	.lp-20plan .type_area .sitemap_inner .tag_area.sitemap_tag_area {
		width: 100%;
		padding: 0 0 20px;
	}

	/*
	.lp-20plan .type_area .sitemap_inner .sitemap_tag {
		font-size: 1.3rem; 
		line-height: 1.2;
		width: 48%;
		height: 53px;
		padding: 10px 0;
		position: relative;
	}
	*/
	.lp-20plan .type_area .sitemap_inner .sitemap_tag {
		width: calc((100% - 10px) / 2);
		margin: 0;
		padding: 8px 0 8px 5px;
		font-size: 1.4rem;
		position: relative;
	}
	.lp-20plan .type_area .sitemap_inner .sitemap_tag p {
		font-size: 1.3rem;
	}
	/*
	.lp-20plan .type_area .sitemap_inner .sitemap_tag .cms_tag {
		position: static;
		transform: none;
		margin: 0 auto;
	}
	*/
	/*
	.lp-20plan .type_area .sitemap_inner .sitemap_tag .inner {
		text-align: center;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translateY(-50%) translateX(-50%);
		-webkit-transform: translateY(-50%) translateX(-50%);
		width: 100%;
	}
	*/
	.lp-20plan .type_area .sitemap_inner .tag_area.sitemap_tag_area .inner {
		width: 100%;
	}
	

	.lp-20plan .type_area .sitemap_inner .tag_caption {
		margin-right: auto;
		padding: 0;
		font-size: 1.2rem;
		display: flex;
		align-items: center;
	}

	.lp-20plan .type_area .sitemap_inner .tag_caption .cms_tag {
		margin: 0 10px 0 0;
	}
	
	
	
	.lp-20plan .sample_inner {
		padding: 20px 0 10px;
	}
	.lp-20plan .sample_list {
		display: block;
		justify-content: space-around;
	}
	
	.lp-20plan .sample_list_box{
		padding: 20px 0 10px;
	}
	
	.lp-20plan .sample_list_box:nth-child(-n+2) {
		margin: 0;
	}
	
	.lp-20plan .sample_list{
		text-align: center;
	}
	.lp-20plan .sample_list img{
		width: 100%;
		max-width: 340px;
	}

	.lp-20plan .box_btn {
		margin: 0 auto 0;
		width: 260px;
	}
	
}

/*サンプルページ*/
#wrapper.sample_pc{
	width: 100%;
	text-align: center;
}

#contents.sample_sp{
	text-align: center;
}

/* 3タイプナビ　*/
.lp-20plan .type_detail_wrapper .cate_nav {
	display: flex;
	justify-content: flex-end;
}
.lp-20plan .type_detail_wrapper .cate_nav li {
	width: 30%;
	margin: 0 15px;
	text-align: center;
}

.lp-20plan .type_detail_wrapper .cate_nav li a{
	font-weight: bold;
	display: block;
	padding: 25px 10px 10px 10px;
	position: relative;
	background: #fff;
	color: var(--blue);
	border: 2px var(--blue) solid;
}/*
.lp-20plan .type_detail_wrapper .cate_nav li.cate01 a{
	color: #CA9800;
	border: 2px #CA9800 solid;
}
.lp-20plan .type_detail_wrapper .cate_nav li.cate02 a{
	color: #11BEAE;
	border: 2px #11BEAE solid;
}
.lp-20plan .type_detail_wrapper .cate_nav li.cate03 a{
	color: #FF7827;
	border: 2px #FF7827 solid;
}
*/
.lp-20plan .type_detail_wrapper .cate_nav li a::after{
	content: "\f107";
    font-family: 'FontAwesome';
    font-size: 1.8rem;
	margin: 4px auto 0;
	display: block;
	position: static;
	color: var(--blue);
}


@media screen and (max-width:667px){
	
	
	/* 3タイプナビ　*/
	.lp-20plan .type_detail_wrapper .cate_nav {
		justify-content: space-around;
		width: 100%;
		margin: 0 auto;
		padding: 0 0 10px;
	}
	.lp-20plan .type_detail_wrapper .cate_nav li {
		width: 100%;
		margin: 0 2px;
		line-height: 1.4;
		letter-spacing: 0;
	}

	.lp-20plan .type_detail_wrapper .cate_nav li a{
		display: block;
		padding: 15px 2px 10px 2px;
		font-size: 1.5rem;
	}
	.lp-20plan .type_detail_wrapper .cate_nav li a::after{
		margin: 0 auto;
		line-height: 1;
	}
	
	
}

#com-contact .contact-area .tel-block{
	display: block;
	padding: 20px;
}
#com-contact .contact-area .tel-block .com-title{
	font-size: 2.2rem;
    font-weight: bold;
    line-height: 1.6;
    color: var(--navy);
}
#com-contact .contact-area .tel-block .com-title i{
	margin: 0 10px 0 0;
}
#com-contact .contact-area .tel-block .tel .num{
	font-size: 4rem;
}
@media screen and (max-width:667px){
	#com-contact .contact-area .tel-block{
	}
	#com-contact .contact-area .tel-block .com-title{
	}
	#com-contact .contact-area .tel-block .com-title i{
		margin: 0 5px 0 0;
	}
	#com-contact .contact-area .tel-block .txt{
		margin: 10px 0 0;
	}
	#com-contact .contact-area .tel-block .tel .num{
		font-size: 3.6rem;

	}
}