#page-nav {
border: none;
margin: 0px;
padding: 30px 0px 0px;
}
#page-nav .tab-nav-out {
}

.sutop-out {
	position: relative;
}

.tab-nav .new-window a {
}
.tab-nav li a:hover {
background-color: rgba(160,160,160,1.00);
border: 1px solid rgba(160,160,160,1.00);
}
.tab-nav li a::after {
transform: rotate(0deg);
}
.tab-nav .new-window a::after {
background-image: url(../../../common/images/link_arrow_nw.svg);
}
.tab-nav .new-window a:hover::after {
background-image: url(../../../common/images/link_arrow_nw_w.svg);
}



.nagoya .tab-nav li:nth-child(2) a,
.kansai .tab-nav li:nth-child(3) a,
.kyushu .tab-nav li:nth-child(4) a {
background-color: rgba(160,160,160,1.00);
border: 1px solid rgba(160,160,160,1.00);
color: rgba(255,255,255,1.00);
}
.nagoya .tab-nav li:nth-child(2) a::after,
.kansai .tab-nav li:nth-child(3) a::after,
.kyushu .tab-nav li:nth-child(4) a::after {
background-image: url(../../../common/images/link_arrow_ov.svg);
transform: rotate(90deg);
}


@media print, screen and (min-width: 375px) {

}


@media print, screen and (min-width: 768px) {

#page-nav {
padding: 80px 0px 0px;
}
.tab-nav li {
width: 25%;
}

}


@media print, screen and (min-width: 1024px) {

#page-nav {
padding: 100px 0px 0px;
}

}


@media print, screen and (min-width: 1200px) {

#page-nav {
padding: 110px 0px 0px;
}

}


@media print, screen and (min-width: 1400px) {

}



















#cont02 {
border: none;
padding: 30px 0px 40px;
margin: 0px;
}
#cont02 .contents-block-in {
max-width: 1080px;
}
.company-block {
}

.flex-2block,
.flex-3block {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.flex-2block > li,
.flex-3block > li {
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
padding: 0px 0px 15px;
}
.flex-2block > li:last-child,
.flex-3block > li:last-child {
padding: 0px;
}
#cont02 .photo-img-t05.width80 {
width: 60%;
margin: 0px auto;
padding: 0px;
}
.flex-3block .photo-img-t05.width80,
.flex-2block .photo-img-t05.width80 {
width: 60% !important;
margin: 0px auto;
padding: 0px;
}


@media print, screen and (min-width: 375px) {

#cont02 {
padding: 40px 0px 50px;
}

.flex-2block > li {
padding: 0px 0px 20px;
}

}


@media print, screen and (min-width: 768px) {

#cont02 {
padding: 60px 0px 80px;
}
.contents-block.left-skyblue-back.back-active#cont02::after {
right: 50%;
opacity: 1;
}

.flex-2block.width66 {
width: 75%;
margin: 0px auto;
}
.flex-2block li {
	-ms-flex-preferred-size: calc(50% - 13px);
	flex-basis: calc(50% - 13px);
}
.flex-3block li {
	-ms-flex-preferred-size: calc(33.33% - 13px);
	flex-basis: calc(33.33% - 13px);
}

.flex-3block.nallow li {
	-ms-flex-preferred-size: calc(33.33% - 1px);
	flex-basis: calc(33.33% - 1px);
}

#cont02 .photo-img-t05.width80 {
width: 60%;
}
.flex-3block .photo-img-t05.width80,
.flex-2block .photo-img-t05.width80 {
width: 74% !important;
}

}

/*
		<div class="contents-block-s">
			<ul class="flex-3block">
				<li>
					<div class="chart-title"><p>男女比</p></div>
					<div class="photo-img-t05 width80"><img src="images/nagoya_data02.svg" alt="男女比 イメージ" width="842" height="524"></div>
					<dl class="chart-cap">
						<dd class="chart-txt"><p><span class="chart-c01">■</span>男性</p></dd>
						<dd class="chart-txt"><p><span class="chart-c02">■</span>女性</p></dd>
						<dd class="chart-unit"><p>単位%</p></dd>
					</dl>
*/


@media print, screen and (min-width: 1024px) {
#cont02 {
padding: 60px 0px 100px;
}

.flex-2block li {
	-ms-flex-preferred-size: calc(50% - 16px);
	flex-basis: calc(50% - 16px);
}

.flex-3block li {
	-ms-flex-preferred-size: calc(33.33% - 16px);
	flex-basis: calc(33.33% - 16px);
}

}


@media print, screen and (min-width: 1200px) {
#cont02 {
padding: 60px 0px 120px;
}

.flex-2block li {
	-ms-flex-preferred-size: calc(50% - 20px);
	flex-basis: calc(50% - 20px);
}

.flex-3block li {
	-ms-flex-preferred-size: calc(33.33% - 20px);
	flex-basis: calc(33.33% - 20px);
}

}


@media print, screen and (min-width: 1400px) {
#cont02 {
padding: 60px 0px 140px;
}

}













/*
<section class="contents-block right-bule-back left-sec-title" id="cont03">
	<div class="contents-block-in">
		<h2 class="section-title animation"><p><span class="anitext">Location</span></p></h2>
		<h1 class="page-catch animation"><p>所在地</p></h1>
		<ul class="company-block">
			<li>
				<h3 class="box-catch animation"><p>九州支店</p></h3>
				<div class="recn-text animation">
					<p>〒812-0038<br>
福岡県福岡市博多区祇園町4-2 サムティ博多祇園BLDG 8階<br>
TEL: 092-283-1777<br><br>

JR線〔博多駅〕バスターミナル前より徒歩6分<br>
福岡県福岡市地下鉄空港線〔祇園駅〕5番出口より徒歩3分</p>
				</div><!-- medium-text -->
			</li>
			<li>
				<div class="cont-map animation"><iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d6647.034611574597!2d130.40983629478384!3d33.591879899725406!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x354191c08353fd87%3A0xcef6f26282de43d7!2z5a-M5aOr44Kk44Oz44OV44Kp44OD44Kv44K544O744ON44OD44OI77yI5qCq77yJ!5e0!3m2!1sja!2sjp!4v1665516151984!5m2!1sja!2sjp" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe></div>
			</li>
		</ul>

	</div><!-- contents-block-in -->
</section><!-- contents-block -->
*/
/*  */
.cont-map iframe {
width: 100%;
height: auto;
aspect-ratio: 16/16;
margin-top: 15px;
}

@media print, screen and (min-width: 375px) {

}


@media print, screen and (min-width: 768px) {

#cont03 .company-block li:first-child {
	-ms-flex-preferred-size: calc(58% - 10px);
	flex-basis: calc(58% - 10px);
padding: 0px;
}
#cont03 .company-block li:last-child {
-ms-flex-preferred-size: calc(42% - 10px);
flex-basis: calc(42% - 10px);
padding: 8px 0px 0px;
}

.cont-map iframe {
aspect-ratio: 16/16;
margin: 0px;
}

}


@media print, screen and (min-width: 1024px) {

#cont03 .company-block li:first-child {
	-ms-flex-preferred-size: calc(48% - 10px);
	flex-basis: calc(48% - 10px);
padding: 0px;
}
#cont03 .company-block li:last-child {
-ms-flex-preferred-size: calc(52% - 10px);
flex-basis: calc(52% - 10px);
padding: 8px 0px 0px;
}

.cont-map iframe {
aspect-ratio: 16/10;
}

}


@media print, screen and (min-width: 1200px) {

#cont03 .company-block li:first-child {
	-ms-flex-preferred-size: calc(45% - 10px);
	flex-basis: calc(45% - 10px);
}
#cont03 .company-block li:last-child {
-ms-flex-preferred-size: calc(55% - 10px);
flex-basis: calc(55% - 10px);
padding: 8px 0px 0px;
}

.cont-map iframe {
aspect-ratio: 16/9;
}

}


@media print, screen and (min-width: 1400px) {

}















/*
<section class="contents-block" id="cont02">
	<div class="contents-block-in">
		<div class="contents-block-s">
			<ul class="flex-2block animation">
				<li>
					<div class="chart-b-pad">
						<div class="chart-title"><p>従業員数<br><strong>183</strong>人</p></div>
						<div class="photo-img-t05"><img src="images/data01.svg" alt="従業員数 イメージ" width="286" height="316"></div>
						<dl class="chart-cap">
							<dd class="chart-txt"><p><span class="chart-c01">■</span>インフラエンジニア</p></dd>
							<dd class="chart-txt"><p><span class="chart-c02">■</span>システムエンジニア</p></dd>
							<dd class="chart-txt"><p><span class="chart-c03">■</span>総合職</p></dd>
							<dd class="chart-unit"><p>単位（人）</p></dd>
						</dl>
					</div>
				</li>
				<li>
					<div class="chart-b-pad">
						<div class="chart-title"><p>平均年齢<br><strong>38</strong>歳</p></div>
						<div class="photo-img-t05"><img src="images/data02.svg" alt="平均年齢 イメージ" width="286" height="316"></div>
						<dl class="chart-cap">
							<dd class="chart-txt"><p><span class="chart-c01">■</span>20代</p></dd>
							<dd class="chart-txt"><p><span class="chart-c02">■</span>30代</p></dd>
							<dd class="chart-txt"><p><span class="chart-c03">■</span>40代</p></dd>
							<dd class="chart-txt"><p><span class="chart-c04">■</span>50代</p></dd>
							<dd class="chart-txt"><p><span class="chart-c05">■</span>60代</p></dd>
							<dd class="chart-unit"><p>単位%</p></dd>
						</dl>
					</div>
				</li>
*/
.data .flex-2block {
}
.data #cont02 .contents-block-in {
padding-right: 0px;
padding-left: 0px;
max-width: 1200px;
}
.data .flex-2block .chart-b-pad {
padding: 6% 15%;
}
.data .flex-2block li {
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
background-color: rgba(238,238,238,1.00);
}
.data .flex-2block li:nth-child(even) {
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
background-color: rgba(255,255,204,1.00);
}
.data .flex-2block .chart-b-pad.narrow {
padding: 6% 15px;
}
.data .chart-title {
padding: 0px 0px 10px;
}
.data .chart-title strong {
font-size: 40px;
line-height: 1.2em;
}

.data .plane-table {
font-size: 14px;
line-height: 1.4em;
}
.data .plane-table th {
padding: 5px 8px 5px 0px;
font-weight: normal;
text-align: left;
white-space: nowrap;
}
.data .plane-table td {
padding: 5px 0px 5px 8px;
font-weight: bold;
}



@media print, screen and (min-width: 375px) {
.data .flex-2block .chart-b-pad {
padding: 6% 18%;
}
.data .chart-title {
padding: 0px 0px 15px;
}
.data .chart-title strong {
font-size: 50px;
line-height: 1.2em;
}

}


@media print, screen and (min-width: 768px) {

.data .chart-title strong {
font-size: 60px;
line-height: 1.2em;
}

.data .flex-2block .chart-b-pad {
padding: 7% 20%;
}
.data .flex-2block li {
-ms-flex-preferred-size: 50%;
flex-basis: 50%;
}
.data .flex-2block li:nth-child(even) {
-ms-flex-preferred-size: 50%;
flex-basis: 50%;
}

.data .flex-2block li:nth-child(1),
.data .flex-2block li:nth-child(4),
.data .flex-2block li:nth-child(5) {
background-color: rgba(238,238,238,1.00);
}
.data .flex-2block li:nth-child(2),
.data .flex-2block li:nth-child(3),
.data .flex-2block li:nth-child(6) {
background-color: rgba(255,255,204,1.00);
}

.data .flex-2block .chart-b-pad.narrow {
padding: 7% 25px;
}

}


@media print, screen and (min-width: 1024px) {

.data .chart-title strong {
font-size: 70px;
line-height: 1.2em;
}

.data .flex-2block .chart-b-pad {
padding: 8% 23%;
}
.data .flex-2block .chart-b-pad.narrow {
padding: 8% 35px;
}

.data .plane-table {
font-size: 15px;
line-height: 1.4em;
}
.data .plane-table th {
padding: 5px 8px 5px 0px;
}
.data .plane-table td {
padding: 5px 0px 5px 8px;
}

}


@media print, screen and (min-width: 1200px) {

.data .flex-2block .chart-b-pad {
padding: 9% 26%;
}
.data .flex-2block .chart-b-pad.narrow {
padding: 9% 50px;
}

.data .plane-table {
font-size: 16px;
line-height: 1.4em;
}
.data .plane-table th {
padding: 8px 10px 8px 0px;
}
.data .plane-table td {
padding: 6px 0px 6px 10px;
}

}


@media print, screen and (min-width: 1400px) {

}



















@media print, screen and (min-width: 375px) {

}


@media print, screen and (min-width: 768px) {

}


@media print, screen and (min-width: 1024px) {

}


@media print, screen and (min-width: 1200px) {

}


@media print, screen and (min-width: 1400px) {

}