@charset "UTF-8";
@import url("https://use.typekit.net/ovh0jui.css");
@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@500;600;700&display=swap");

*,
*::before,
*::after {
	box-sizing: border-box;
}

:root {
	--wh: #fff;
	--iv1: #F9F9F9;
	--iv2: #f4f5f7;
	--gn1: #E2E9F1;
	--gn2: #012C55;
	--gn3: #1A4E85;
	--gy1: #585858;
	--gy2: #333333;
	--bk: #070707;
	--br_l: 37px;
	--br_m: 8px;
	--br_s: 4px;
}

.breadcrumbs {
	font-size: 12px;
	opacity: .7;
	padding: 3em 0 0;
}

.breadcrumbs span {
	opacity: 1;
}

.breadcrumbs a:hover {
	opacity: 1;
	text-decoration: underline
}

.ttlwrap2 {
	margin: clamp(5rem, 3.680rem + 5.634vw, 8.75rem) 0 clamp(2.5rem, 1.400rem + 4.695vw, 5.625rem);
}

.ttlwrap2 .ttl2 {
	margin-bottom: 22px
}

.ttlwrap2 .ttl2:after,
#mission .ttl2:after {
	width: .73em;

}

.ttl7 {
	font-size: 20px;
	font-weight: 700
}

.ttl2 {
	font-size: clamp(3rem, 2.296rem + 2.005vw, 5rem);
}

.anavi_list {
	position: fixed;
	top: 50%;
	right: 0;
	z-index: 8;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
}

.anavi_list li a {
	line-height: 1;
	padding: 8px 1em;
	font-size: 16px;
	text-align: right;
	display: inline-block;
	border-radius: 3em;
}

.anavi_list li.now a,
.anavi_list li a:hover {
	background: var(--gn2);
	color: #fff;
	font-weight: 700
}

/*---------------------------
vision
----------------------------*/
#vision {
	padding-bottom: 37vh;
}

.vision_ttl {
	font-size: clamp(2.1rem, 1.337rem + 1.877vw, 3.9rem);
	line-height: 1.4354;
	letter-spacing: .08em;
	font-weight: 600;
	margin-top: 78px;
	margin-bottom: 1em;
	position: relative;
}

.vision_ttl strong {
	background: linear-gradient(90deg, #012C55 0%, #14568F 40%, #2E86C9 80%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	font-size: 110%;
	text-shadow: none;
	font-weight: 600;
}

#vision .txtarea {
	font-size: 18px;
	line-height: 2.333;
	width: min(770px, 64%);
}

#vision .imgarea {
	font-size: 18px;
	line-height: 2.333;
	width: min(430px, 36%);
}

#vision .imgarea {
	display: flex;
	flex-direction: column;
	grid-row-gap: 88px;
	margin-top: -200px
}

#vision .imgarea .img {
	clip-path: inset(0 0 round var(--br_l) var(--br_l) var(--br_l) var(--br_l));
	position: relative
}

#vision .imgarea .img1 {
	width: min(306px, 71.162%)
}

#vision .imgarea .img2 {
	width: min(428px, 99.53%);
	right: -130px
}

#vision .imgarea .img3 {
	width: min(294px, 68.372%);
	left: 50px;
}

#mission ._inner {
	width: min(900px, 100%);
	margin: 0 auto;
	padding: 0 3.44%;
	position: relative;
	z-index: 1
}

#mission .ttl2 {
	font-size: clamp(3.088rem, 1.638rem + 3.04vw, 5.188rem);
	margin-bottom: .5em
}

#mission .txtarea p {
	font-size: 20px
}

.visionbox {
	padding-bottom: 80px;

}

.visionbox:not(:last-child) {
	border-bottom: 1px solid var(--gy1);
	margin-bottom: 80px;
}

.visionbox .ttl8 {
	line-height: 2
}

.value_list li {
	margin-bottom: 2em
}

.value_list .ttl8 {
	font-size: 30px;
	letter-spacing: 1px
}

.value_list p {
	padding-left: 2em
}

/*---------------------------
archive
----------------------------*/
.archive .ico_arrow {
	display: block;
}

.archive .newslist {
	width: 100%;
	margin-bottom: 40px
}

.p-news.archive {
	padding: 0 0 40px;
}

.single {
	padding: 100px 0;
}

.p-contents {
	width: min(900px, 100%);
	margin: 0 auto;
	padding: 0 6.44%;
}

.p-contents p {
	margin-bottom: 1em;
}

.p-contents strong {
	font-size: 110%;
}

.p-contents .cate {
	font-weight: 700;
	padding: 7px 20px;
	border: 1px solid #000;
	border-radius: 3em;
	display: inline-block;
	line-height: 1;
}

iframe.wp-embedded-content {
	width: 100%;
}

.datewrap {
	margin-bottom: 3em;
	align-items: center;
}

.datewrap .date {
	margin-right: 1em
}

.p-contents .ttlwrap1 .ttl1 {
	position: absolute;
	top: -60px;
	right: auto;
}

.p-contents .ttl3 {
	margin-bottom: .5em;
	line-height: 1.8
}

.p-contents .ttlwrap2 {
	border-bottom: 1px solid var(--gy1);
	margin: 0 0 3em;
}

.entry {
	margin-bottom: 80px
}

.pnavwrap {
	justify-content: center;
	column-gap: 80px;
	margin-bottom: 80px
}

/*---------------------------
特徴
----------------------------*/
.feature_mv {
	padding-bottom: 10vh
}

.feature_section {
	padding-bottom: 10vh;
	position: relative
}

.feature_section:before {
	content: '';
	width: 160%;
	height: 100vh;
	position: absolute;
	top: -15vh;
	left: -30%;
	border-radius: 50%;
	z-index: 0;
}

.feature_section.bg_iv1:before {
	background: var(--iv1);
}

.feature_section.bg_iv2:before {
	background: var(--iv2);
}

.feature_section .l-inner {
	padding: 0 8.33%
}
#faq.feature_section .l-inner{
	padding: 0 18.33% 0 8.33%;
}
.featureh1area {
	padding-bottom: 100px;
	align-items: center;
}

.featureh1area .imgarea {
	width: 45%;
	margin-right: -5%;
	margin-left: -10%;
}

.featurettl {
	display: flex;
	position: relative;
	left: -83px;
	margin-bottom: 45px
}

.featurettl .ttl2 .animate:first-child {
	color: var(--gn2)
}

.featurettl .icon {
	width: 73px;
	position: relative;
	left: -10px
}

.featurettl .icon:before {
	content: '';
	height: 1px;
	width: 100%;
	background: var(--gy2);
	position: absolute;
	top: -23px;
	right: 0;
	transform: rotate(23deg);
}

.featurettl .icon:after {
	content: '';
	height: 1px;
	width: 100%;
	background: var(--gy2);
	position: absolute;
	bottom: -8px;
	right: 0;
	transform: rotate(-23deg);
}

.ttlwrap3 .read {
	padding-left: 1em;
	border-left: 5px solid #000;
	font-weight: 500;
	font-size: 20px;
	letter-spacing: 1px;
}

.feature_read {
	align-items: baseline;
	margin-bottom: 20px
}

.feature_contents {
	margin-bottom: 100px
}

.feature_contents {
	align-items: center;
}

.feature_read .img {
	width: 43%;
	margin-left: -10%;
	margin-right: -10%;
}

.meritlist {
	margin: 30px auto 60px;
}

.meritlist .table {
	table-layout: fixed;
}

.meritlist .space {
	border-right: 1px solid #555;
	border-bottom: 1px solid #555;
	width: 84px
}

.meritlist .mainttl {
	width: calc(100% - 84px);
	border-bottom: 1px solid #555;
	font-size: clamp(3rem, 2.296rem + 3.005vw, 5rem);
	padding-left: 34px
}

.meritlist .mainttl .ttl {
	font-size: clamp(3rem, 2.296rem + 3.005vw, 5rem);
}

.meritlist .subttl {
	border-right: 1px solid #555;
	display: table-cell;
	width: 84px;
	text-align: center;
	font-size: 22px;
	font-weight: 600;
	padding: 2em 0;
}

.meritlist .subttl span {
	letter-spacing: 8px;
}

.meritbox {
	padding: 10px 0 10px 46px;
	position: relative;
}

.meritbox:before {
	content: '';
	width: 45px;
	height: 1px;
	background: var(--gy2);
	position: absolute;
	left: 0;
	top: 33px
}

._fast .meritbox:before {
	top: 63px
}

.meritbox .ttl {
	padding-left: 60px;
	font-size: 28px;
	font-weight: 700;
	position: relative;
	line-height: 50px;
}

.meritbox .ttl:before {
	background: var(--gy2);
	border-radius: 3px;
	width: 50px;
	height: 50px;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #fff;
	position: absolute;
	left: 0;
	top: 0;
	font-weight: 400;
	font-size: 22px
}

.merit1 .ttl:before {
	content: "1";
}

.merit2 .ttl:before {
	content: "2";
}

.merit3 .ttl:before {
	content: "3";
}

.merit4 .ttl:before {
	content: "4";
}

.merit5 .ttl:before {
	content: "5";
}

.meritbox p {
	padding-left: 60px
}

.meritlist ._fast td {
	padding-top: 40px
}

.cloudimages {
	background: #ECEFF4;
	padding: 40px 32px;
	border-radius: var(--br_s);
	margin-bottom: 50px
}

.cloudimages .ttl {
	color: #fff;
	background: #676B6F;
	border-radius: var(--br_s);
	line-height: 1;
	text-align: center;
	padding: 5px;
	margin-bottom: 30px
}

.feature_contents .box1 {
	margin-bottom: 40px
}

/*
.feature_contents .list1 li{
	width: 50%
}
*/

.feature_contents .txtarea p {
	margin-bottom: 1em
}

#challenge .feature_read .img,
#simple .feature_read .img,
#fun .feature_read .img {
	width: 41%;
	margin-left: 0;
}

#challenge .ttl2:after {
	bottom: -12px
}

.box1wrap .ttl {
	position: relative;
	text-align: center;
	top: -1em
}

.box1wrap .ttl span {
	font-size: 20px;
	background: var(--iv1);
	padding: 0 1em;
	margin-top: -1em
}

.box1wrap .ttl strong {
	font-weight: 600
}

.box1wrap .box1 {
	padding: 0 5% 30px;
}

.feature_contents .img img {
	border-radius: var(--br_l)
}

.followlist {
	column-gap: 8px;
}

.followlist li {
	width: calc(100% / 4 - 6px);
}

.feature_contents .p-instagram {
	padding-top: 40px;
	padding-bottom: 0
}

/*---------------------------
about us
----------------------------*/

#aboutus,
#office {
	padding-bottom: 35vh;

}

.infographic {
	width: min(900px, 100%);
	margin: 0 auto
}

.infographic .ttl4 {
	font-weight: 500;
	font-size: 24px;
}

.infographicbox {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-bottom: 40px
}

.infographicbox .tip {
	background: var(--wh);
	padding: 30px 5% 20px;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	flex-direction: column;
	border-radius: var(--br_m);
}

.infographicbox .tip .ttl {
	color: #fff;
	border-radius: var(--br_m);
	line-height: 1;
	padding: 5px 1em;
	font-size: 16px;
	margin-bottom: 10px
}

.office .infographicbox .tip .ttl {
	background: var(--gn2);
}

.client .infographicbox .tip .ttl {
	background: #829dc4;
}

.infographicbox2 {
	width: calc(100% / 6 *2 - 6px);
}

.infographicbox4 {
	width: calc(100% / 6 *4 - 6px);
}

.infographicbox3 {
	width: calc(100% / 6 *3 - 6px);
}

.tip8 .txtarea p {
	margin-bottom: 2em
}

.tip8 .btn a {
	margin: 0 0 0 auto;
	padding-right: 42px;
}

.companylist {
	table-layout: fixed
}

.companylist th {
	width: 200px;
	padding: 10px 0 35px 0;
	line-height: 1.65;
}

.companylist td {
	padding: 10px 10px 35px 0;
	line-height: 1.65
}

#company .ttl3 {
	margin-bottom: 90px
}

.officesliderwrap {
	position: relative;
}

.officesliderwrap ._inner {
	width: min(900px, 100%);
	margin: 0 auto;
	position: absolute;
	z-index: 12
}

.officesliderwrap .swiper-button-prev,
.officesliderwrap .swiper-button-next {
	width: 60px;
	height: 60px;
}

.officesliderwrap .swiper-button-prev {
	left: -90px;
	background: url(../images/icon/ico_arrow_r_s.svg);
	background-size: cover;
	transform: rotate(180deg);
}

.officesliderwrap .swiper-button-next {
	right: -90px;
	background: url(../images/icon/ico_arrow_r_s.svg);
	background-size: cover;
}

.swiper-button-next:after,
.swiper-rtl .swiper-button-prev:after,
.swiper-button-prev:after,
.swiper-rtl .swiper-button-next:after {
	display: none
}

.officesliderwrap .swiper-pagination-bullets.swiper-pagination-horizontal {
	bottom: -25px;
}

.officeslider .swiper-slide {
	clip-path: inset(0 0 round 37px 37px 37px 37px);
}

.slider-thumbnail {
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	width: min(900px, 100%);
}

.swiper-container {
	width: 100%;
	max-width: 900px;
	margin: 0 auto
}

.swiper-container.officeslider {
	margin-bottom: 40px
}

.swiper-container .swiper-slide {
	opacity: .5;
}

.swiper-container.slider-thumbnail .swiper-wrapper {
	column-gap: 8px
}

.swiper-container.slider-thumbnail .swiper-wrapper .swiper-slide {
	width: calc(100% / 5 - 8px) !important;
	height: 100%;
	overflow: hidden;
	margin-bottom: 8px
}

.swiper-container .swiper-slide-thumb-active,
.swiper-container .swiper-slide-active {
	opacity: 1;
}

.swiper-container.slider-thumbnail .swiper-wrapper .swiper-slide img {
	width: 100%;
	height: auto
}

#faq {
	padding-bottom: 20vw
}
#faq .note{
	
}

/*---------------------------
member
----------------------------*/
#member {
	padding-bottom: 20vh
}

.membercard {
	margin-bottom: 20px
}

.membercard .txtarea {
	background: var(--wh);
	padding: 35px 10px;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 38.4615%;
	border-radius: 0 0 0 var(--br_l);
}

.membercard .imgarea {
	width: 61.5384%;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0 10px;
}

.membercard .txtarea .img {
	position: relative;
	width: 138px;
	margin-bottom: 10px
}

.membercard .txtarea .mbtiicon {
	position: absolute;
	top: -1em;
	right: 0;
	letter-spacing: 2px
}

.namewrap {
	text-align: center;
	line-height: 1
}

.namewrap .status {
	font-size: 12px;
    margin-bottom: .4em;
    line-height: 1.4;
}

.namewrap .name {
	font-size: 25px;
	font-weight: 500;
	margin-bottom: 5px;
	letter-spacing: 2px
}

.namewrap .kana {
	font-size: 14px;
	margin-bottom: 1em
}

.namewrap .btn a {
	font-size: 13px;
	color: #fff;
	background: var(--gy2);
	padding: 5px 2em 5px 1em;
	border-radius: 3em;
	position: relative
}

.namewrap .btn a:before {
	content: '';
	background: url(../images/icon/ico_arrow_r_wh.svg) no-repeat;
	background-size: cover;
	width: 8px;
	height: 7px;
	position: absolute;
	right: 1em;
}

.mbtiicon {
	border-left: 1px solid #000;
	border-bottom: 1px solid #000;
	padding: 0px 0 4px 8px;
	font-size: 17px;
	line-height: 1;
}

.mbtiicon:before {
	width: 1px;
	height: 14px;
	content: "";
	background-color: #000;
	transform: rotate(45deg);
	position: absolute;
	bottom: -7px;
	left: calc(50% - 10px);
}

#staff .circle_top {
	background: var(--iv1)
}

#staff .circlebox {
	margin-top: -170px;
}

#staff .circlebox_bottom {
	margin: -130px auto 80px;
	width: min(770px, 100%);
	background: var(--iv1)
}

.messagetxt p {
	margin-bottom: 1em
}

.messagetxt .sign {
	text-align: right;
	margin-top: 2em
}

#message .ttl5.ttlline .txtparts {
	width: 170px;
	top: -38px;
}

.profilebox {
	background: var(--wh);
	border: 1px solid var(--gy2);
	border-radius: 0 var(--br_l) 0 var(--br_l);
	padding: 5% 3%;
}

.profilebox .ttl4 {
	font-size: 23px;
	margin-bottom: 2.2em;
	font-weight: 500
}

.profilein {
	justify-content: space-between
}

.profilebox .imgarea {
	width: 26.333%
}

.profilebox .imgarea .img {
	margin-bottom: 32px
}

.profilebox .imgarea .img img {
	border-radius: var(--br_l);
}

.profilebox .btn2 {
	width: 100%;
}

.profilebox .btn2 a {
	line-height: 1.6
}

.profilebox .btn2 .ico {
	width: 15px;
	height: 15px;
	position: relative
}

.profilebox .btn2 .ico:before {
	background: #012C55;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	content: '';
	position: absolute;
	z-index: -1;
	top: -11px;
	right: -11px;
	filter: opacity(0.5);
}

.profilebox .txtarea {
	width: 64.25%
}

.profilebox .name {
	font-size: 28px;
	margin-bottom: 1em
}

.profilebox .kana {
	font-size: .6em;
	margin-left: 1em;
	letter-spacing: 1px
}

.history {
	margin-bottom: 28px
}

.history th,
.profilebox .list2 .ttl {
	width: 15.929%;
	font-weight: 400
}

/*---------------------------
service
----------------------------*/
.serviceflow {
	padding-bottom: 30vh;
}

.serviceflowlist {
	margin-left: 95px;
}

.stepbox {
	position: relative;
	padding-bottom: 20px;
	column-gap: 26px;
	padding: 40px 0 30px
}

.stepbox:not(:last-child) {
	border-bottom: 1px dotted var(--gy1);
}

.stepbox:before {
	content: '';
	width: 65px;
	height: 73px;
	position: absolute;
	top: 20px;
	left: -95px;
}

.stepbox:after {
	content: '';
	width: 1px;
	background: var(--gy1);
	height: 0;
	position: absolute;
	top: 120px;
	left: -60px;
	transition: 1.6s all
}

.stepbox.is-anim:after {

	height: calc(100% - 120px);
}

.step1:before {
	content: '';
	background: url(../images/icon/ico_step1.svg) no-repeat;
	background-size: cover;
}

.step2:before {
	content: '';
	background: url(../images/icon/ico_step2.svg) no-repeat;
	background-size: cover;
}

.step3:before {
	content: '';
	background: url(../images/icon/ico_step3.svg) no-repeat;
	background-size: cover;
}

.stepbox .left {
	width: 31.5833%
}

.stepbox .left .ttl {
	font-size: 30px;
	font-weight: 500;
	margin-bottom: .8em
}

.stepbox .left .txt {
	font-size: 18px;
	line-height: 1.85
}

.stepbox .right {
	width: calc(68.416% - 26px)
}

.stepbox .right .txtarea dt {
	color: #fff;
	border-radius: var(--br_m);
	line-height: 1;
	padding: 5px 1em;
	font-size: 20px;
	margin-bottom: 1em;
	background: var(--gn2);
	text-align: center;
}

.stepbox .right .txtarea dd {
	line-height: 1.85
}

.stepbox .list1 li {
	width: 33.3333%;
	line-height: 2.5;
	font-weight: 400;

}

#servicelist {
	padding: 80px 0 20vh;
	position: relative;
}

#servicelist:before {
	content: '';
	width: 160%;
	height: 100vh;
	position: absolute;
	top: -15vh;
	left: -30%;
	border-radius: 50%;
	z-index: 0;
	background: var(--iv2);
}

#servicelist .servicelist {
	margin-bottom: 90px
}

.servicecont {
	padding-top: 80px;
	width: min(1006px, 100%);
	margin: 0 auto 40px;
}

.servicecontttl {
	background: var(--wh);
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: clamp(1.5rem, 1.283rem + 0.927vw, 2.25rem);
	padding: .8em 1em;
	border-radius: var(--br_m);
	font-weight: 500;
	letter-spacing: 3px;
	margin-bottom: 1em
}

.servicecontttl .ico {
	margin-right: 30px
}

.servicecont .read {
	margin-bottom: 2em
}

.servicecontbox {
	column-gap: 4%;
	margin-bottom: 50px
}

.servicecont .inner {
	padding: 0 5%
}

.servicecontbox .img {
	width: min(365px, 40.555%);
}

.servicecontbox .img img {
	border-radius: var(--br_m)
}

.servicecontbox .txtarea {
	width: 55%;
}

.servicecontbox .txtarea p {
	line-height: 2;
}

.servicecontbox .txtarea .ttl {
	font-size: 20px;
	margin-bottom: 1em;
	line-height: 1.8
}

.servicecontbox .txtarea .ttl .icon {
	background: #fff;
	display: inline-block;
	font-size: 73%;
	padding: 2px 10px;
	border: 1px solid #333;
	border-radius: 4px;
}

#cont9 {
	margin-bottom: 40vh
}

/*---------------------------
contact
----------------------------*/
#contact .read {
	margin-bottom: 2em
}

.telarea {
	border: 1px solid var(--gy2);
	border-radius: var(--br_l);
	padding: 5%;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	width: min(900px, 90%);
	margin: 0 auto 80px
}

.telarea .ttl {
	font-size: 18px;
	font-weight: 700;
	margin-bottom: 1em
}

.contactform {
	width: min(900px, 90%);
	margin: 0 auto 20vw
}

#contact-confirm .contactform .inner {
	background: var(--iv2);
	padding: 40px 5%;
	width: 100%;
	border-radius: var(--bg_m);
	margin-bottom: 50px
}

#contact-confirm .contactform dd {
	border-bottom: 1px solid #d0d0d0;
}

.contactform dl {
	display: flex;
	justify-content: space-between;
	margin-bottom: 18px
}

.contactform dt {
	width: 250px;
	font-size: 18px;
	letter-spacing: 3px;
	font-weight: 500
}

.contactform dd {
	width: calc(100% - 280px);
}

.contactform input,
.contactform textarea {
	width: 100%;
	border-radius: var(--br_m);
	border: none;
	padding: 1em;
	font-size: 18px
}

.req {
	font-size: 68%;
	border: 1px solid var(--gy1);
	padding: 3px .7em 3px;
	border-radius: 3em;
	line-height: 1;
	display: inline-block;
	letter-spacing: 0;
}

.privacyarea {
	margin: 60px auto 30px;
	text-align: center;
}

.privacyarea a {
	text-decoration: underline
}

.btnwrap p {
	display: flex;
	justify-content: center;
	gap: 8px;
}

input.wpcf7-submit {
	background: var(--gy1);
	color: #fff;
	width: 750px;
	font-size: 27px;
	font-weight: 600;
	padding: 1em;
	display: block;
}

.pagewrap {
	margin: clamp(5rem, 3.680rem + 5.634vw, 8.75rem) 0 20vw;
}

.pagewrap .ttl {
	margin-bottom: 2em
}

.entry p {
	margin-bottom: 1em
}

.wpcf7-spinner {
	display: none
}

input.wpcf7-form-control.wpcf7-previous {
	border: 1px solid var(--gy1);
	background: none;
	width: 40%;
}

.ttl4:before {
	top: .85em;
}

/*---------------------------
recruit
----------------------------*/
#recruit .img img {
	border-radius: var(--br_m)
}

.recruitkv {
	background: url(../images/recruit/recruit_img1.jpg)no-repeat center center;
	background-size: cover;
	background-attachment: fixed;
	height:min(690px,70vh);
	color: #fff;
}

.recruitkv .ttl2:after {
	background: #fff
}

.readarea,
.readarea .ttl,
.readarea .txt {
	position: relative;
}

.readarea {
	padding-bottom:260px
}

.readarea .inner {
	position: relative;
	z-index: 1
}

.readarea:before {
	content: '';
	width: 160%;
	height: 700px;
	position: absolute;
	top: -100px;
	left: -30%;
	border-radius: 50%;
	background: var(--gn1);
	z-index: 0;
}

.readarea .ttl {
	text-align: center;
	font-size: clamp(27px, 16.545px + 2.788vw, 50px);
	line-height: 1.4354;
	letter-spacing: .08em;
	font-weight: 600;
	margin-bottom: 1em
}

.readarea .ttl strong {
	background: linear-gradient(90deg, #012C55 0%, #14568F 40%, #2E86C9 80%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	font-size: 110%;
	text-shadow: none;
	font-weight: 600;
}

.readarea .txt {
	font-size: 18px;
	line-height: 2;
	text-align: center;
}

.pagelinkarea {
	margin-top: -160px;
	column-gap: 3.8%;
	margin-bottom: 230px
}

.pagelinkbox {
	width: calc(100% / 3 - 2.59%);
}

.pagelinkbox .img {
	overflow: hidden
}
.pagelinkbox .img img{
	
}

.pagelinkbox .ttl {
	font-size: 40px;
	margin-bottom: .6em
}

.pagelinkbox .txt {
	line-height: 1.8;
	margin-bottom: 1em;
	display: block;
	min-height: 6em
}

.pagelinkbox .link {
	font-size: 16px;
	padding: 1.3em;
	border-radius: var(--br_s);
	box-shadow: 0 6px 3px 0px rgba(0, 0, 0, 0.08);
	width: 100%;
	justify-content: space-between;
	background-color: var(--wh);
	color: var(--bk);
	display: flex;
	font-weight: 600;
    transition: all .3s;
    -webkit-transition: all .3s;
    -o-transition: all .3s;
    -moz-transition: all .3s;
}
.pagelinkbox a:hover .link{
		background-color: var(--bk);
	color: var(--wh);
}
#recruitfeature{
	padding-bottom: 160px
}
.recruitfeaturebox{
	align-items: flex-start;
	margin-bottom: 80px
}
.recruitfeaturebox._reverse{
	flex-direction: row-reverse
}
.recruitfeaturebox .txtarea{
	width: 53%;
	background: var(--iv1);
	border-radius: var(--br_m);
	padding: 4.8% 4.8% 4.8% 10.23%;
	margin-right: -20%;
	position: relative;
	    margin-top: 80px;
}
.recruitfeaturebox._reverse .txtarea{
	margin-right:auto;
	margin-left: -20%;
	padding: 4.8% 10.23% 4.8% 4.8%;
}
.recruitfeaturebox .subttl{
	position: relative;
	padding-left: 1.5em;
	margin-bottom: 1em;
	font-size: 18px;
}
.recruitfeaturebox .subttl:before{
	position: absolute;
	content: '';
	width: 1em;
	background: var(--gy1);
	height: 1px;
	top: 50%;
	left: 0
}
.recruitfeaturebox .ttl{
	font-weight: 600
}
.recruitfeaturebox .img{
	    width: 63%;
    margin: 0 0 0 auto;
}
.recruitfeaturebox._reverse .img{
 margin: 0 auto 0 0;
}
#recruitfeature .box1{
	padding: 3em 5% 2.5em;
	margin-bottom: 100px
}
#recruitfeature .box1 .ttl8{
	background: var(--iv1);
    padding: 0 2em;
    display: block;
    position: initial;
    top: auto;
    left: auto;
    transform: translateX(0);
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    min-width: auto;
    margin-bottom: 1.4em;
}
#recruitfeature .box1 .ttl8 span:before,#recruitfeature .box1 .ttl8 span:after{
	display: none
}
.otherpoint2{
	text-align: center;
}
.otherpoint2 .ttl8{
	margin-bottom: 1em
}
.otherpoint2 .txt{
	    font-size: 18px;
    line-height: 2;
}
.recruit_bottomarea{
	padding: 120px 0
}
.recruit_bottomarea > section{
	margin-bottom: 120px
}
.recruit_bottomarea .ttl3{
	font-weight: 700;
	margin-bottom: 1em
}
.requirementsbox{
	background: var(--wh);
	padding: 4.8%;
	border: 1px solid var(--gy2);
	border-radius: var(--br_m)
}
.recruitflowlist{
	display: flex;
	column-gap: 10px;
}
.recruitflowlist li{
	width: calc(100% / 6 - 10px);
	position: relative;
	padding-top: 30px
}
.recruitflowlist li:before{
	content: '';
	width: 20px;
	height: 20px;
	background: var(--gn2);
	position: absolute;
	top: 0;
	left: 0;
	border-radius: 50%
}
.recruitflowlist li:after{
	content: '';
	width: calc(100% - 30px);
	height: 2px;
	background: var(--gy1);
	position: absolute;
	top: 8px;
	left: 30px;
}
.recruitflowlist .ttl{
	font-weight: 600;
	margin-bottom: .5em
}
.recruitflowlist .txt{
	line-height: 1.8;
}
.recruitflowlist .txt a{
	font-weight: 700;
	text-decoration: underline;
}
#requirements._now{
	padding: 120px 0
}
#requirements._now .l-row{
	column-gap: 50px;
	align-items: end;
	margin-bottom: 50px
}
#requirements._now .txtarea{
	width: 50%
}
#requirements._now .txtarea p{
	margin-bottom: 1em
}
#requirements._now .img{
	width: calc(50% - 50px)
}
#requirements._now .img img{
	border-radius: 30px;
}
#requirements._now .btn3{
	margin: 0 auto
}
.captcha {
    display: flex;
    justify-content: center;
    margin-bottom: 2em;
}

@media screen and (max-width:1200px) {
	.l-inner {
		padding: 0 3%
	}

	.stepbox .right,
	.stepbox .left {
		width: 100%;
	}

	.stepbox .left {
		margin-bottom: 2em
	}

	.pnavwrap {
		column-gap: 40px
	}
	.featurettl .icon {
	width: 55px;
	position: relative;
	left: 0px
}
	.serviceflow {
	padding-bottom: 15vh;
}
	#servicelist:before {
    width: 220%;
    height: 70vh;
    top: -7vh;
    left: -60%;
}
}

@media screen and (max-width:900px) {
	.infographicbox {
		width: min(500px, 100%);
		margin: 0 auto 30px
	}
}

@media screen and (max-width:768px) {
	.ttl3 {
		font-size: 20px
	}

	.ttl4 {
		font-size: 18px;
		line-height: 1.7;
	}

	.ttl4:before {
		top: .75em;
	}

	.box1wrap .ttl span {
		font-size: 16px
	}

	.p-news {
		padding-top: 40px
	}

	.col6,
	.col4,
	.featureh1area .imgarea,
	.feature_contents .col5 {
		width: 100%;
	}

	.feature_section .l-inner {
		padding: 0 5%
	}

	.featureh1area {
		padding-bottom: 50px;
	}

	.feature_section:before {
		width: 220%;
		left: -60%;
		height: 45vh;
	}

	.featurettl {
		left: 0;
		margin-bottom: 30px
	}

	.featurettl .icon {
		width: 43px;
	}

	.featurettl .icon:before {
		top: -16px;
	}

	.featurettl .icon:after {
		bottom: -6px
	}

	.featureh1area .imgarea {
		margin-right: auto;
		margin-left: auto;
	}

	.ttlwrap3 .read {
		font-size: 15px;
		margin-bottom: 1em
	}

	.feature_read,
	.feature_contents {
		margin-bottom: 40px
	}

	.feature_contents._fun {
		margin-bottom: 0;
	}

	.feature_read .img,
	#challenge .feature_read .img,
	#simple .feature_read .img,
	#fun .feature_read .img {
		width: 70%;
		margin-left: auto;
		margin-right: auto;
	}

	.cloud_img1_sp {
		width: min(200px, 100%);
		margin: 0 auto 20px
	}

	.anavi_list {
		top: 65px;
		flex-direction: row;
		background: #fff;
		width: 100%;
		justify-content: center;
		transform: translateY(0);
		-webkit-transform: translateY(0);
		-ms-transform: translateY(0);
	}

	.anavi_list li a {
		font-size: 11px;
		text-align: center;
		padding: 8px 7px
	}

	.box1 .ttl8 {
		padding: 0 6%;
		width: 93%;
		font-size: 16px
	}

	.box1 .ttl8 span:before {
		right: -7%;
		width: 14px;
		height: 22px;
	}

	.box1 .ttl8 span:after {
		left: -7%;
		width: 14px;
		height: 22px;
	}

	.box1.ttl8list {
		padding-top: 2em
	}

	.followlist li {
		width: calc(100% / 2 - 6px);
		margin-bottom: 8px
	}

	.meritlist .subttl,
	.meritlist .space {
		width: 24px;
	}

	.meritlist .subttl {
		font-size: 16px
	}

	.meritlist .subttl span {
		letter-spacing: 2px;
	}

	.meritlist .mainttl {
		width: calc(100% - 24px);
		padding-left: 14px;
	}

	.meritlist ._fast td {
		padding-top: 20px;
	}

	._fast .meritbox:before {
		top: 33px;
	}

	.meritlist .mainttl .ttl {
		font-size: 34px;
	}

	.meritbox {
		padding: 10px 0 10px 14px;
	}

	.meritbox:before {
		width: 14px
	}

	.meritbox .ttl {
		font-size: 18px;
		padding-left: 35px;
		line-height: 1.6;
	}

	.meritbox .ttl:before {
		width: 30px;
		height: 30px;
		font-size: 15px;
	}

	.meritbox p {
		padding-left: 36px;
		font-size: 13px;
	}

	.cloudimages .ttl {
		font-size: 13px
	}

	.cloudimages {
		padding: 30px 12px;
		margin-bottom: 20px
	}

	.infographic .ttl4 {
		font-size: 16px
	}

	.infographicbox .tip .ttl {
		font-size: 12px;
		margin-bottom: 1em
	}

	.infographicbox2,
	.infographicbox4 {
		width: calc(100% / 6* 3 - 6px);
	}

	.sp_infographicbox6 {
		width: calc(100% / 6* 6 - 6px);
	}

	.tip1 {
		order: 1
	}

	.tip2 {
		order: 3
	}

	.tip3 {
		order: 2
	}

	.tip4 {
		order: 4
	}

	.tip5 {
		order: 5
	}

	.tip6 {
		order: 6
	}

	.tip7 {
		order: 7
	}

	#aboutus {
		padding-top: 50px;
	}

	.tip8 .img.col5 {
		width: min(200px, 70%);
		margin: 0 auto 20px
	}

	.tip8 .txtarea.col5 {
		width: 100%
	}

	.swiper-container.slider-thumbnail .swiper-wrapper .swiper-slide {
		width: calc(100% / 3 - 6px) !important;
	}

	.officeslider .swiper-slide {
		clip-path: inset(0 0 round 8px 8px 8px 8px);
	}

	.officesliderwrap .swiper-button-prev,
	.officesliderwrap .swiper-button-next {
		width: 30px;
		height: 30px;
	}

	.officesliderwrap .swiper-button-next {
		right: 0
	}

	.officesliderwrap .swiper-button-prev {
		left: 0;
	}

	.swiper-container .swiper-slide {
		opacity: 1;
	}

	.companylist th {
		margin-bottom: 0;
		padding: 20px 0 0;
	}

	.companylist td,
	.companylist th {
		width: 100%;
		display: block;
	}

	.companylist td {
		border-bottom: 1px solid #cecece;
		padding-bottom: 20px
	}

	.membercard {
		width: 100%;
		margin-bottom: 8px;
		        border-radius: 0 10px;
	}

	.membercard .txtarea {
		padding: 35px 5px 10px;
	}

	.membercard .txtarea .img {
		width: 80px;
		margin-bottom: 5px
	}

	.namewrap .status {
		font-size: 10px;
		margin-bottom: .5em;
	}

	.namewrap .name {
		font-size: 15px;
	}

	.namewrap .kana {
		font-size: 12px;
		margin-bottom: 0;
	}

	#member {
		padding-bottom: 7vh;
	}

	.membercard .txtarea .mbtiicon {
		position: absolute;
		top: -23px;
		right: -12px;
		letter-spacing: 2px;
	}

	.namewrap .btn a {
		font-size: 10px;
		margin-top: 5px;
	}

	#message {
		padding-bottom: 20vh
	}

	.membercard .txtarea {
		width: 41.4615%;
	}

	.membercard .imgarea {
		width: 58.5384%;
		padding: 10px;
	}

	#staff .circlebox {
		margin-top: 0;
	}

	#staff .circlebox_bottom {
		margin: 0 auto;
		padding-bottom: 40px;
		width: 100%;
	}

	#staff .circle_top {
		width: 100%;
		text-align: center;
	}

	.profilebox {
		padding: 10% 5%;
		width: 90%
	}

	.profilebox .ttl4 {
		font-size: 16px;
		margin-bottom: 2.2em;
	}

	.profilebox .imgarea,
	.profilebox .txtarea {
		width: 100%;
	}

	.profilebox .imgarea .img {
		width: min(200px, 70%);
		margin: 0 auto 20px
	}

	.profilebox .name {
		font-size: 20px
	}

	profilebox .list2 .ttl {
		justify-content: flex-start;
	}

	.profilebox .btn2 {
		margin: 0 auto;
	}

	#member .about-img img {
		aspect-ratio: auto;
	}

	.stepbox .right .col5 {
		width: 100%;
		margin-bottom: 20px
	}

	.serviceflowlist {
		margin-left: 40px;
	}

	.stepbox {
		padding: 30px 0 10px 10px;
	}

	.stepbox:before {
		width: 35px;
		height: 39px;
		top: 21px;
		left: -40px;
	}

	.stepbox:after {
		height: calc(100% - 66px);
		top: 75px;
		left: -24px;
	}

	.stepbox .left {
		margin-bottom: 1em
	}

	.stepbox .left .ttl {
		font-size: 20px;
		margin-bottom: .5em;
	}

	.stepbox .left .txt {
		font-size: 14px;
	}

	.stepbox .right .txtarea dt {
		font-size: 16px
	}

	.stepbox .list1 li {
		width: 50%;
		font-size: 13px;
	}

	.stepbox .right .img {
		width: min(280px, 100%);
	}

	.servicecontttl {
		font-size: 18px;
		letter-spacing: 1px
	}

	.servicecontttl .ico {
		margin-right: 20px;
		height: 36px;
	}

	.servicecontttl .ico img {
		height: 100%;
		width: auto;
	}

	#cont8 {
		margin-bottom: 15vh;
	}

	#servicelist {
		padding-top: 0;
	}

	#servicelist:before {
		width: 220%;
		height: 45vh;
		top: -10vh;
		left: -60%;
	}

	.servicelist {
		padding: 0
	}

	.contactform dl {
		display: block;
	}

	.contactform dt,
	.contactform dd {
		width: 100%
	}
	.contactform dt{
		margin-bottom: .6em
	}
	.contactform dt p {
		font-size: 15px;
		margin-bottom: 0
	}

	.p-contents .cate {
		padding: 5px 10px;
		font-size: 11px;
	}

	#vision {
		padding-bottom: 17vh;
	}

	#vision .imgarea {
		width: 100%;
		grid-row-gap: initial;
		margin-top: auto;
	}

	#vision .txtarea {
		width: 100%;
		font-size: 14px;
		line-height: 2;
		margin-bottom: 20px
	}

	#vision .imgarea .img1 {
		width: min(306px, 51.162%);
	}

	#vision .imgarea .img2 {
		width: min(428px, 52.53%);
		right: 0;
		margin: 0 0 0 auto;
	}

	#vision .imgarea .img3 {
		left: 50px;
		top: 20px;
	}

	.value_list .ttl8 {
		font-size: 27px
	}

	#mission {
		padding-bottom: 0
	}
	.readarea {
    padding-bottom: 40px;
}
	.readarea:before {
    content: '';
    width: 220%;
    height: 420px;
    position: absolute;
    top: -50px;
    left: -60%;
    border-radius: 50%;
    background: var(--gn1);
    z-index: 0;
}
	.recruitkv{
		height: 50vh;
		    background-attachment: inherit;
	}
	.pagelinkarea{
		margin-top: 0;
		padding-top: 60px;
		margin-bottom: 80px
	}
	.pagelinkbox {
    width: 100%;
		margin-bottom: 20px;
		        padding-bottom: 20px;
        border-bottom: 1px solid #d9d9d9;
}
	.pagelinkbox:last-child{
		border-bottom: none
	}
	.readarea .txt{
		font-size: 14px;
		text-align: left;
		padding: 0 5%
	}
	.pagelinkbox a {
    display: flex;
		flex-wrap: wrap;
}
	.pagelinkbox .img {
    width: min(200px, 58%);
		margin-bottom: 10px
}

	.pagelinkbox .spbloc{
		margin-left: 16px;
		width: calc(43% - 20px);
		margin-bottom: 10px
	}
	.pagelinkbox .ttl{
		        font-size: 24px;
        line-height: 1;
        margin-bottom: 10px;
	}
	.pagelinkbox .txt {
    line-height: 1.6;
    margin-bottom: 1em;
    display: block;
    min-height: auto;
}
.recruitfeaturebox .txtarea,.recruitfeaturebox._reverse .txtarea {
    width: 100%;
    padding: 5%;
    margin-right: 0;
    margin-top: 0;
	        margin-left: 0;
}
	.recruitfeaturebox .img{
		width: 100%
	}
	#recruit .recruitfeaturebox .img img{
		border-radius: 0;
	}
	.recruitfeaturebox .subttl{
		font-size: 14px
	}
	.recruitfeaturebox,.recruitfeaturebox._reverse{
		    flex-direction: column-reverse;
		    margin-bottom: 40px;
	}
	.otherpoint .list1 li {
    padding-left: 1.9em;
   font-size: 16px;
    line-height: 1.5;
    margin-bottom: 1.6em;
}
	.otherpoint .list1 li:before{
		top: 3px;
	}
	#recruitfeature{
		padding-bottom: 80px
	}
	.recruit_bottomarea {
    padding: 80px 0;
}
	.recruitflowlist{
		    display: block;
	}
	.recruitflowlist li {
    width: 100%;
    position: relative;
    padding-top: 0;
    padding-left: 30px;
		margin-bottom: 30px
}
	.recruitflowlist li:before {
    content: '';
    width: 16px;
    height: 16px;
    background: var(--gn2);
    position: absolute;
    top: 6px;
    left: 0;
    border-radius: 50%;
}
	.recruitflowlist li:after {
    content: '';
    height: 100%;
    width: 1px;
    background: var(--gy1);
    position: absolute;
    top: 30px;
    left: 7px;
}
	.recruit_bottomarea > section{
		margin-bottom: 80px
	}
	.recruit_bottomarea .ttl3 {
    margin-bottom: 1.6em;
}
	.servicecontbox .img {
		width: min(375px, 100%);
		margin: 0 auto 20px;
	}

	.servicecontbox .txtarea {
		font-size: 14px;
		line-height: 2;
		width: 100%;
		margin-bottom: 40px
	}

	.servicecont {
		padding-top: 20px;
	}

	.servicecontbox .txtarea .ttl {
		font-size: 18px
	}
	#recruitfeature .box1 .ttl8{
		padding: 0;
		text-align: left;
		margin-bottom: 2em
	}
	#recruitfeature .otherpoint .list1 li{
		font-size: 14px;
        font-weight: 400;
	}
	.otherpoint2{
		text-align: left;
	}
	.otherpoint2 .txt{
		line-height: 1.8;
		font-size: 14px
	}
	#requirements._now{
	padding: 60px 0
}
#requirements._now .l-row{
	margin-bottom: 30px
}
#requirements._now .txtarea{
	width: 100%;
	margin-bottom: 40px
}

#requirements._now .img{
	width: 100%
}
	#requirements._now .btn3 > *{
		font-size: 13px
	}
	#requirements._now .ico_hand {
    width: 33px;
    height: 21px;
}
	#office {
	padding-bottom: 15vh;

}
	#faq.feature_section .l-inner {
    padding: 0 5%;
}
}

.accordion {
  list-style: none;
  border-top: 1px solid #ccc;
}

.accordion-q-prefix {
  display: block;
  position: absolute;
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-variation-settings: "wdth" 75;
  line-height: 1;
}

@media print, (min-width: 768px) {
  .accordion-q-prefix {
    left: 20px;
    top: 24px;
    font-size: 30px;
  }
}

@media screen and (max-width: 767px) {
  .accordion-q-prefix {
    left: 0;
    top: 18px;
    font-size: 20px;
  }
}

.accordion-q-content {
  display: block;
  font-weight: 400;
  line-height: 1.6;
}

@media print, (min-width: 768px) {
  .accordion-q-content {
    font-size: 20px;
  }
}

@media screen and (max-width: 767px) {
  .accordion-q-content {
    font-size: 16px;
  }
}

.accordion-q-icon {
  display: block;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

@media print, (min-width: 768px) {
  .accordion-q-icon {
    right: 20px;
    width: 20px;
    height: 20px;
  }
}

@media screen and (max-width: 767px) {
  .accordion-q-icon {
    right: 10px;
    width: 16px;
    height: 16px;
  }
}

.accordion-q-icon::before,
.accordion-q-icon::after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: #000;
}

@media print, (min-width: 768px) {
  .accordion-q-icon::before,
  .accordion-q-icon::after {
    top: 9px;
  }
}

@media screen and (max-width: 767px) {
  .accordion-q-icon::before,
  .accordion-q-icon::after {
    top: 7px;
  }
}

.accordion-q-icon::after {
  transform: rotate(90deg);
  transition: transform 400ms;
}

.accordion-q button {
  display: block;
  position: relative;
  width: 100%;
  box-sizing: border-box;
  border: none;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  appearance: none;
  cursor: pointer;
  transition: opacity 400ms;
}

@media print, (min-width: 768px) {
  .accordion-q button {
    padding: 25px 60px 25px 97px;
  }
}

@media screen and (max-width: 767px) {
  .accordion-q button {
    padding: 16px 36px 16px 51px;
  }
}

@media print, (min-width: 768px) {
  .accordion-q button:hover,
  .accordion-q button:active {
    opacity: 0.5;
  }
}

.accordion-a {
  display: none;
  overflow: hidden;
}

.accordion-a-inner {
  position: relative;
}

@media print, (min-width: 768px) {
  .accordion-a-inner {
    padding: 5px 0 30px 97px;
  }
}

@media screen and (max-width: 767px) {
  .accordion-a-inner {
    padding: 5px 0 25px 51px;
  }
}

.accordion-a-prefix {
  position: absolute;
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-variation-settings: "wdth" 75;
  line-height: 1;
}

@media print, (min-width: 768px) {
  .accordion-a-prefix {
    left: 20px;
    top: 1px;
    font-size: 30px;
  }
}

@media screen and (max-width: 767px) {
  .accordion-a-prefix {
    left: 0;
    top: 9px;
    font-size: 20px;
  }
}


@media print, (min-width: 768px) {
  .accordion-a-content p + p {
    margin-top: 25px;
  }
}

@media screen and (max-width: 767px) {
  .accordion-a-content p + p {
    margin-top: 20px;
  }
}

.accordion > li {
  border-bottom: 1px solid #ccc;
}

.accordion > li.is-open .accordion-q-icon::after {
  transform: rotate(0deg);
}
.accordion .btn1{
	margin-top: 10px
}
.accordion .ico_arrow_r_c{
	    margin-left: 10px;
	    margin-right: 0px;
	    width: 24px;
    height: 24px;
}
/*----------------------------
infographic (CSS版)
数値の更新は page-about.php 内のテキストと style="--v: " "--n: " を書き換えるだけでOK
----------------------------*/
.ig {
	--ig-ink: #333;
	--ig-navy: var(--gn2);
	--ig-mid: #35618e;
	--ig-steel: #7c9ec4;
	--ig-fill: #dde6f0;
	--ig-gold: #e9b93b;
	width: 100%;
	container-type: inline-size;
}

.ig-num {
	font-family: "Oswald", "roc-grotesk", sans-serif;
	font-weight: 400;
	line-height: 0.9;
	letter-spacing: -0.03em;
	color: var(--ig-steel);
}

.ig-note {
	display: block;
	font-size: 12px;
	font-size: clamp(10px, 4.2cqw, 13px);
	color: #555;
	font-weight: 400;
	text-align: right;
	margin-top: 0.9em;
}

/* 大きな数字+% (有休取得率・退職率・クラウド会計デビュー率) */
.ig-big {
	position: relative;
	display: flex;
	align-items: baseline;
	justify-content: center;
	white-space: nowrap;
	padding: 1cqw 0 2cqw;
}

.ig-big .ig-num {
	font-size: 90px;
	font-size: 54cqw;
}

.ig-big_dec,
.ig-big_pct {
	font-family: "Oswald", "roc-grotesk", sans-serif;
	line-height: 1;
	font-size: 40px;
	font-size: 20cqw;
}

.ig-big_dec {
	color: var(--ig-steel);
}

.ig-big_pct {
	color: var(--ig-ink);
	margin-left: 0.06em;
}

.ig-big .ig-note {
	position: absolute;
	right: 0;
	bottom: 0;
}

/* 今年で14周年 */
.ig-anniv {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	gap: 10px;
	padding: 2.6cqw 16px 1cqw;
}

.ig-anniv .ig-num {
	font-size: 100px;
	font-size: 70cqw;
}

.ig-anniv_side {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-bottom: 1cqw;
}

.ig-anniv_lead {
	position: relative;
	font-size: 15px;
	font-size: 10cqw;
	font-weight: 700;
	color: var(--ig-ink);
	padding: 0 1em;
	white-space: nowrap;
}

.ig-anniv_lead::before,
.ig-anniv_lead::after {
	content: "";
	position: absolute;
	top: 50%;
	width: 1.5px;
	height: 1.1em;
	background: var(--ig-ink);
}

.ig-anniv_lead::before {
	left: 0.4em;
	transform: translateY(-50%) rotate(-35deg);
}

.ig-anniv_lead::after {
	right: 0.4em;
	transform: translateY(-50%) rotate(35deg);
}

.ig-anniv_unit {
	font-size: 38px;
	font-size: 24cqw;
	font-weight: 400;
	line-height: 1;
	color: var(--ig-ink);
}

/* 横棒グラフ共通行 */
.ig-hrow_lbl {
	color: #111;
	text-align: right;
	white-space: nowrap;
	font-size: 14px;
	font-size: clamp(12px, 5cqw, 21px);
	padding-right: 0.6em;
}

.ig-hrow_track {
	display: flex;
	align-items: center;
	gap: 0.5em;
	border-left: 1px solid #111;
	padding: 0;
	min-width: 0;
}

.ig-hrow_bar {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	height: clamp(22px, 8.5cqw, 40px);
	width: calc(var(--v) * var(--scale, 1) * 1%);
	background: var(--ig-fill);
	border-radius: 0 8px 8px 0;
	flex-shrink: 0;
}

.ig-hrow_track b {
	font-family: "Oswald", "roc-grotesk", sans-serif;
	font-weight: 600;
	color: var(--ig-steel);
	font-size: 15px;
	font-size: clamp(13px, 5.5cqw, 23px);
	white-space: nowrap;
}

.ig-hbar_rows,
.ig-age_bars {
	display: grid;
	grid-template-columns: max-content 1fr;
	align-items: center;
}

/* メンバー平均年齢 */
.ig-age {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	padding:  0;
}

.ig-age_bars {
	min-width: 0;
	--scale: 1.9;
}

.ig-age .ig-hrow_lbl {
	font-size: clamp(13px, 4.2cqw, 24px);
}

/*
.ig-age .ig-hrow_track {
	padding: 3px;
}
*/

.ig-age .ig-hrow_bar {
	height: clamp(20px, 7.5cqw, 42px);
	border-radius: 0 10px 10px 0;
}

.ig-age .ig-hrow_bar b {
	font-family: "Oswald", "roc-grotesk", sans-serif;
	font-weight: 600;
	color: var(--ig-mid);
	font-size: clamp(12px, 3.6cqw, 20px);
	padding-right: 0.8em;
}

.ig-age_big {
	position: relative;
	text-align: right;
	white-space: nowrap;
	padding-top: 7cqw;
}

.ig-age_big .ig-num,
.ig-age_big .ig-age_unit {
	display: inline;
	vertical-align: baseline;
}

.ig-age .ig-num {
	font-size: 80px;
	font-size: 26cqw;
}

.ig-age_unit {
	font-size: 36px;
	font-size: 12cqw;
	font-weight: 400;
	line-height: 1.1;
	color: var(--ig-ink);
}

.ig-age_badge {
	position: absolute;
	top: 9cqw;
	right: -1cqw;
	width: clamp(40px, 12cqw, 60px);
	height: auto;
}

/* 男女比ドーナツ */
.ig-gender_main {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1cqw;
}

.ig-gender_note {
	display: block;
	text-align: right;
	margin-top: 2cqw;
}

.ig-gender_donut {
	position: relative;
	flex: 0 0 66cqw;
	max-width: 220px;
	aspect-ratio: 1;
	border-radius: 50%;
	background: conic-gradient(from 204deg, var(--ig-mid) 0 calc(var(--male) * 1%), #aec3dc 0 100%);
}

.ig-gender_donut::before {
	content: "";
	position: absolute;
	inset: 28%;
	background: var(--wh);
	border-radius: 50%;
}

.ig-gender_total {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: "Oswald", "roc-grotesk", sans-serif;
	font-weight: 600;
	font-size: 12.5cqw;
	color: var(--ig-navy);
	line-height: 1;
}

.ig-gender_total small {
	font-family: YakuHanJP, "Noto Sans JP", sans-serif;
	font-size: 0.55em;
	font-weight: 700;
	margin-left: 0.1em;
}

.ig-gender_ico {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 10.5%;
	color: var(--wh);
}

.ig-gender_ico._man {
	left: 6.5%;
}

.ig-gender_ico._woman {
	right: 6.5%;
}

.ig-gender_list {
	display: flex;
	flex-direction: column;
	gap: 4cqw;
	margin: 0;
}

.ig-gender_list > div {
	display: flex;
	gap: 0.4em;
}

.ig-gender_list dt {
	font-size: 14px;
	font-size: clamp(12px, 6cqw, 20px);
	font-weight: 700;
	color: var(--ig-ink);
}

.ig-gender_list dd {
	margin: 0;
	display: flex;
	align-items: baseline;
	gap:4px
}

.ig-gender_list .ig-num {
	font-size: 44px;
	font-size: 21cqw;
}

.ig-gender_list small {
	font-size: 20px;
	font-size: 9cqw;
	font-weight: 900;
	color: var(--ig-ink);
	line-height: 1;
}

/* 社員数・売上推移 */
.ig-trend {
	position: relative;
	padding-top: 0.5cqw;
}

.ig-trend._labeled {
	padding-left: 2cqw;
}

.ig-trend_max,
.ig-trend_min {
	position: absolute;
	left: 0;
	font-family: "Oswald", "roc-grotesk", sans-serif;
	font-weight: 400;
	font-size: 15px;
	font-size: clamp(13px, 6.5cqw, 24px);
	color: #111;
	line-height: 1;
}

.ig-trend_max {
	top: 2cqw;
}

.ig-trend_min {
	bottom: calc(clamp(18px, 9cqw, 32px) + 6px);
	left: 10px
}

.ig-trend_chart {
	position: relative;
	display: flex;
	align-items: flex-end;
	height: 42cqw;
	max-height: 260px;
	border-left: 1px solid #111;
	border-bottom: 1px solid #111;
}

.ig-trend_chart i {
	position: relative;
	flex: 1 1 0;
	height: calc(var(--n) / var(--max) * 100%);
	background: var(--ig-fill);
	border-right: 1px solid var(--wh);
}

.ig-trend_chart i::after {
	content: "";
	position: absolute;
	bottom: -8px;
	right: 0px;
	width: 1px;
	height: 6px;
	background: #111;
}

.ig-trend_arrow {
	position: absolute;
	right: 7%;
	bottom: 14%;
	width: 42%;
	height: auto;
}

.ig-trend_years {
	display: flex;
	justify-content: space-between;
	font-family: "Oswald", "roc-grotesk", sans-serif;
	font-weight: 400;
	font-size: 16px;
	font-size: clamp(14px, 7cqw, 20px);
	color: #111;
	line-height: 1;
	margin-top: 10px;
}

/* クラウド会計デビュー率 */
.ig-cloud.col5 {
	width: 48%;
}

.ig-cloud {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5cqw;
	padding: 1cqw 0;
}

.ig-cloud_bubble {
	flex: 0 0 34cqw;
	max-width: 160px;
	width: 34cqw;
	height: auto;
}

.ig-cloud_num {
	position: relative;
	display: flex;
	align-items: baseline;
	padding-top: 9cqw;
}

.ig-cloud .ig-num {
	font-size: 74px;
	font-size: 36cqw;
	color: var(--ig-steel);
}

.ig-cloud .ig-big_dec {
	color: var(--ig-steel);
	font-size: 33px;
	font-size: 16cqw;
}

.ig-cloud .ig-big_pct {
	font-size: 33px;
	font-size: 16cqw;
}

.ig-cloud_rays {
	position: absolute;
	top: -1cqw;
    left: 5%;
    width: 42%;
	height: auto;
}




/* infographic 調整 */
.ig i,
.ig b {
	font-style: normal;
}

.ig-gender_list dt,
.ig-gender_list dd {
	white-space: nowrap;
}

.ig-age {
	position: relative;
}

.ig-age_big .ig-note {
	white-space: normal;
	margin-top: 0.6em;
}

/* 狭いコンテナでは縦積みに */
@container (max-width: 430px) {
	.ig-age {
		grid-template-columns: 1fr;
		gap: 5cqw;
	}

	.ig-age_big {
		justify-self: center;
		padding-top: 3cqw;
	}

	.ig-age .ig-num {
		font-size: 34cqw;
	}

	.ig-age_unit {
		font-size: 15cqw;
	}

	.ig-gender {
		gap: 5cqw;
	}

/*
	.ig-gender_donut {
		flex-basis: 46cqw;
	}
*/

	.ig-gender_list .ig-num {
		font-size: 17cqw;
	}
}

/* 画像時代は img の固有幅で広がっていたため、CSS化に伴い幅を明示 */
.infographicbox6 {
	width: 100%;
}

@media screen and (max-width:768px) {
	.tip8 .ig-cloud.col5 {
		width: 100%;
		margin: 0 auto 20px;
	}
}

/* コラム一覧のみ: タイトル下の余白を詰める */
.p-column.archive .ttlwrap2 {
	margin-bottom: 20px;
}

/*----------------------------
法人紹介ページ
----------------------------*/
.p-corporate .corp_section {
	padding-top: 70px;
	padding-bottom: 80px;
}

/* ごあいさつ */
.corp_greeting {
	width: min(820px, 100%);
	margin: 0 auto;
	line-height: 2.2;
}

.corp_greeting p {
	margin-bottom: 1.4em;
}

.corp_greeting .sign {
	text-align: right;
	font-weight: 700;
	line-height: 1.8;
	margin-top: 2.5em;
}

/* 法人名の由来 */
.corp_origin_wrap {
	padding-top: 70px;
}

.corp_origin_lead {
	text-align: center;
	font-size: 17px;
	font-weight: 500;
	line-height: 2;
	margin-bottom: 48px;
}

.corp_origin_grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 32px;
	margin-bottom: 56px;
}

.corp_origin_card {
	background: var(--wh);
	border-radius: 14px;
	padding: 44px 40px;
	box-shadow: 0 2px 12px rgba(1, 44, 85, 0.06);
}

.corp_origin_word {
	text-align: center;
	font-family: "roc-grotesk", sans-serif;
	font-size: 40px;
	font-weight: 700;
	line-height: 1;
	color: var(--gn2);
	letter-spacing: 0.06em;
	margin-bottom: 12px;
}

.corp_origin_ttl {
	text-align: center;
	font-size: 19px;
	font-weight: 700;
	color: var(--gn2);
	border-bottom: 2px solid #cfdae6;
	padding-bottom: 0.7em;
	margin-bottom: 1.2em;
}

.corp_origin_card p {
	line-height: 2.1;
	font-size: 15px;
}

.corp_origin_close {
	text-align: center;
	font-size: 17px;
	line-height: 2.2;
	margin-bottom: 1.5em;
}

.corp_origin_close strong {
	display: block;
	font-size: 19px;
	line-height: 1.6;
	color: var(--gn2);
}

.corp_origin_close2 {
	text-align: center;
	font-weight: 700;
	line-height: 2;
}

/* 役員紹介 */
.officer_grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 40px 36px;
	align-items: start;
}

.officer_card {
	position: relative;
	background: var(--wh);
	border-radius: 14px;
	padding: 36px 34px;
	box-shadow: 0 2px 12px rgba(1, 44, 85, 0.06);
}

.officer_top {
	display: flex;
	gap: 26px;
	margin-bottom: 26px;
}

.officer_photo {
	flex: 0 0 44%;
	aspect-ratio: 4 / 5;
	border-radius: 10px;
	overflow: hidden;
}

.officer_photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.officer_head {
	flex: 1;
	padding-top: 44px;
}

.officer_label {
	position: absolute;
	top: 0;
	right: 28px;
	font-family: "roc-grotesk", sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.25em;
	color: var(--wh);
	background: var(--gn2);
	border-radius: 0 0 var(--br_m) var(--br_m);
	padding: 0.7em 1.6em;
}

.officer_position {
	font-size: 14px;
	font-weight: 500;
	color: var(--gn2);
	letter-spacing: 0.2em;
	margin-bottom: 6px;
}

.officer_name {
	font-size: 26px;
	font-weight: 500;
	letter-spacing: 0.15em;
	line-height: 1.3;
	color: var(--gn2);
}

.officer_kana {
	font-family: "roc-grotesk", sans-serif;
	font-size: 12px;
	letter-spacing: 0.25em;
	color: #8a94a3;
	margin-top: 8px;
}

.officer_message {
	font-size: 15px;
	line-height: 2.1;
	margin-bottom: 24px;
}

.officer_sec h4,
.officer_qual h4 {
	font-size: 15px;
	font-weight: 700;
	color: var(--gn2);
	margin-bottom: 8px;
}

.officer_sec p {
	font-size: 13.5px;
	line-height: 1.95;
	margin-bottom: 20px;
}

.officer_qual {
	background: #eef2f7;
	border-radius: 10px;
	padding: 18px 22px;
}

.officer_qual h4 {
	margin-bottom: 6px;
}

.officer_qual ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0 20px;
}

.officer_qual li {
	font-size: 14px;
	line-height: 1.7;
	position: relative;
	padding-left: 1em;
}

.officer_qual li::before {
	content: "・";
	position: absolute;
	left: 0;
}

/* 事務所概要 */
.corp_company_wrap {
	padding-top: 70px;
}

.corp_office {
	margin-bottom: 1.2em;
	line-height: 2;
}

.corp_office:last-child {
	margin-bottom: 0;
}

.corp_office_label {
	display: inline-block;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	color: var(--wh);
	background: var(--gn2);
	border-radius: var(--br_s);
	padding: 0.45em 1em;
	margin-right: 1em;
}

/* オフィス写真 */
.corp_photos {
	padding: 70px 0 90px;
}

.corp_photos_grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

.corp_photos_grid img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: 12px;
}

@media screen and (max-width: 900px) {
	.corp_origin_grid,
	.officer_grid {
		grid-template-columns: 1fr;
	}
}

@media screen and (max-width: 768px) {
	.p-corporate .corp_section {
		padding-bottom: 50px;
	}

	.corp_origin_lead,
	.corp_origin_close,
	.corp_origin_close2 {
		text-align: left;
	}

	.corp_origin_close {
		font-size: 15px;
	}

	.corp_origin_close strong {
		font-size: 17px;
	}

	.p-corporate #company .ttl3 {
		margin-bottom: 30px;
	}

	.corp_origin_card {
		padding: 30px 24px;
	}

	.corp_origin_card p {
		line-height: 1.7;
	}

	.corp_origin_word {
		font-size: 32px;
	}

	.officer_card {
		padding: 26px 22px;
	}

	.officer_top {
		gap: 16px;
	}

	.officer_photo {
		flex-basis: 42%;
	}

	.officer_head {
		padding-top: 40px;
	}

	.officer_name {
		font-size: 21px;
	}

	.corp_photos_grid {
		grid-template-columns: 1fr;
	}

	.corp_photos {
		padding: 40px 0 60px;
	}
}

/* 法人紹介: セクション個別調整 */
.p-corporate #faq {
	background: var(--gn1);
}

.p-corporate #faq.bg_iv1:before {
	background: var(--gn1);
}

.p-corporate #office {
	padding-bottom: 40px;
}

/* 法人名の由来: ロゴヒーロー(ブランドガイドライン表紙モチーフ) */
.corp_origin_hero {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--gn2);
	border-radius: 14px;
	padding: clamp(60px, 8vw, 110px) 6%;
	margin-bottom: 56px;
}

.corp_origin_hero img {
	width: min(270px, 55%);
	height: auto;
}

@media screen and (max-width: 768px) {
	.corp_origin_hero {
		border-radius: 10px;
		margin-bottom: 36px;
	}

	.corp_origin_hero img {
		width: min(200px, 60%);
	}
}