/*
Theme Name: wp_theme
*/
@charset "utf-8";

/*-----------------------------------
テーマ用CSS設定　自由入力
-----------------------------------*/


/* ----------------------------------------------------------------------
 * Base
-----------------------------------------------------------------------*/
* {
	box-sizing: border-box;
	padding: 0;
	margin: 0;
}

body {
	width: 100%;
	background: #FFF;
	font-size: 16px;
	font-family: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;
	font-weight: 700;
	font-style: normal;
	line-height: 1.7;
}
/***リンク**********/
a {
	text-decoration: none;
	color: inherit;
	transition : 0.6s;
}
a:hover {
	/*opacity: 0.8;*/
}
/***画像**********/
img {
	display: block;
	width: 100%;
}
/***テーブル**********/
table {
	border-collapse: collapse;
	width: 100%;
	font-size: inherit;
}
th,td {
	text-align: left;
	padding: 5px 10px;
}


/* ----------------------------------------------------------------------
 * particles.js
-----------------------------------------------------------------------*/
#particles {
  width: 100%;
  height: 100%;
  margin: 0 auto;
}
canvas.particles-js-canvas-el {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -2;
}


/* ----------------------------------------------------------------------
 * 文字装飾
-----------------------------------------------------------------------*/
.text-line {background: linear-gradient(#FAF5EF 100%, #FAF5EF 100%);}
.memo {
	font-size: 0.8rem;
	color: #444;
	font-weight: normal;
}

/* ----------------------------------------------------------------------
 * パンくずリスト
-----------------------------------------------------------------------*/
ul.breadcrumb {
	display: flex;
	list-style: none;
	font-size: 12px;
	color: #666;
	font-weight: normal;
	margin-top: 10px;
	/*margin-bottom: 35px;*/
}
ul.breadcrumb li {
	margin-right: 10px;
}
ul.breadcrumb li:after {
	content: ">";
	margin-left: 10px;
}
ul.breadcrumb li:last-child:after { display: none; }


/* ----------------------------------------------------------------------
 * 追従ボタン
-----------------------------------------------------------------------*/
.fixed-btn {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 9999999;
	transition: all 3s ease-out;
}
.front-page .fixed-btn {
	display: none;
	opacity: 0;
}
.fixed-btn a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 350px;
	height: 60px;
	font-size: 1.2rem;
	background: #1D3657;
	color: #FFF;
	line-height: 1;
}
.fixed-btn a .txt span {
	display: block;
	font-size: 10px;
	margin-top: 5px;
}
.fixed-btn a {
	display: flex;
}
.fixed-btn a .icon {
	display: block;
	height: 30px;
	width: auto;
	margin-right: 10px;
	animation-name: transformMailIcon; 
	animation-duration: 3s;
	animation-delay: 0s;
	animation-iteration-count: infinite; 
}


/* ----------------------------------------------------------------------
 * ヘッダー
-----------------------------------------------------------------------*/
.header {
	width: 100%;
	height: 60px;
	padding: 0 50px 0 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 999999;
}
/***ロゴ***/
.header-logo {
	width: auto;
	height: 50px;
	display: flex;
	align-items: center;
	z-index: 2;
}
.header-logo img {
	display: block;
	width: auto;
	height: 30px;
}

/* ----------------------------------------------------------------------
 * フッター
-----------------------------------------------------------------------*/
.partner-bnrs {
	margin-top: 50px;
}
.footer {
	background: #000;
	color: #FFF;
	padding: 100px 10% 10px 10%;
	margin-top: 100px;
}
.footer .inner {display: flex;}
.footer .inner .block {width: 50%;}
.footer .company-info .logo img {
	display: block;
	width: 350px;
	height: auto;
}
.footer .company-info .name {
	font-size: 28px;
	margin-top: 20px;
}
.footer .company-info .data {margin-top: 20px;}
.footer .company-info .dtxt {
	margin-top: 5px;
}
.footer .company-info .htxt {
	display: inline-block;
	width: 50px;
	background: #FFF;
	color: #000;
	line-height: 1;
    text-align: center;
	margin-right: 5px;
}
/***ページ一覧***/
.footer .page-list ul {list-style: none;}
.footer .plist-ttl {
	font-family: "Oswald", sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 32px;
    letter-spacing: -1px;
    line-height: 1;
}
.footer .service-list {
	display: inline-block;
	border-top: solid 1px #FFF;
	border-bottom: solid 1px #FFF;
	padding: 20px 0;
	margin-top: 5px;
}
.footer .service-list li {
	width: 360px;
	font-size: 20px;
}
.footer .nmlpage-list {
	display: flex;
	margin-top: 20px;
}
.footer .nmlpage-list li:after {
	content: "|";
	margin-left: 15px;
	margin-right: 15px;
}
.footer .nmlpage-list li:last-of-type:after {display: none;}
.footer .nmlpage-list li:last-of-type {margin-right: 0;}
/***コピーライト***/
.l-copyright {
	text-align: center;
	margin-top: 30px;
	font-size: 12px;
	font-weight: normal;
	color: #EEE;
}


/* ----------------------------------------------------------------------
 * ハンバーガーメニュー
-----------------------------------------------------------------------*/
.hamburger-menu {
	width: 100%;
	height: 60px;
	padding: 0 20px;
	position: fixed;
	top: 0;
	right: 0;
}
.hamburger-menu ul { list-style: none; }
.hamburger-menu .menu-area {
	width: 100%;
	height: 50%;
	background: #FFF;
	/*padding-top: 60px;*/
	position: fixed;
	top: 0;
	left: 0;
	top: -50%;
	bottom: 0;
	overflow-x: hidden;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	transition: all .5s;
	z-index: 9999;
}
.hamburger-menu .logo {
	height: 60px;
	width: auto;
    display: flex;
    align-items: center;
	margin-left: 20px;
}
.hamburger-menu .logo img {
	display: block;
	width: auto;
	height: 30px;
}
.hamburger-menu nav {
	padding: 0 5%;
	margin-top: 30px;
}
.hamburger-menu .menu-cat .ttl {
	font-family: "Oswald", sans-serif;
	font-weight: 700;
	font-style: normal;
    font-size: 2rem;
	color: #1D3657;
	letter-spacing: 1;
    line-height: 1;
	margin-bottom: 10px;
}
.hamburger-menu .menu-cat ul {
	display: flex;
	font-size: 1.2rem;
	border-top: solid 1px #1D3657;
	border-bottom: solid 1px #1D3657;
	padding: 20px 5px;
}
.hamburger-menu .menu-cat li {
	width: calc(100% / 3);
	text-align: center;
}
.hamburger-menu .menu-cat li a {
	position: relative;
	padding-left: 20px;
}
.hamburger-menu .menu-cat li a:before {
	content: "\f0da";
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	color: #1D3657;
	position: absolute;
	left: 0;

}
.normal-menu {
	display: flex;
	/*justify-content: flex-end;*/
	justify-content: center;
	margin-top: 30px;
}
.normal-menu li {margin-right: 15px;}
.normal-menu li:last-of-type {margin-right: 0;}
.normal-menu li:after {
	content: "";
	display: inline-block;
	width: 1px;
	height: 10px;
	background: #AAA;
	border-right: 1px;
	margin-left: 15px;
}
.normal-menu li:last-of-type:after {display: none;}
/**/
.toggle-btn {
	width: 50px;
	height: 50px;
	cursor: pointer;
	padding: 10px;
	margin-top: 5px;
	position: fixed;
	top: 0;
	right: 20px;
	z-index: 99999;
}
.toggle-btn .line{
	width: 100%;
	height: 100%;
	position: relative;
}
.toggle-btn span {
	display: block;
	width: 100%;
	height: 1px;
	border-bottom: solid 2px #000;
	/*background: #333;*/
	transition: all 0.5s;
	position: absolute;
	left: 0;
}
.toggle-btn span:nth-child(1) { top: 0; }
.toggle-btn span:nth-child(2) { top: 14px; }
.toggle-btn span:nth-child(3) { bottom: 0; }
/*open:btn*/
.toggle-btn.open span:nth-child(1) {
  -webkit-transform: translateY(1px) rotate(-315deg);
  transform: translateY(14px) rotate(-315deg);
}
.toggle-btn.open span:nth-child(2) { opacity: 0; }
.toggle-btn.open span:nth-child(3) {
  -webkit-transform: translateY(-14px) rotate(315deg);
  transform: translateY(-14px) rotate(315deg);
}
/*open:navi*/
.hamburger-menu.open .menu-area {top: 0;}
/*mask*/
.hamburger-menu .mask {
	display: none;
	width: 100vw;
	height: 100vh;
	background: rgba(0,0,0,0.7);
	cursor: pointer;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 999;
	transition: all .5s;
}
.hamburger-menu .mask.open {display: block;	}

/* ----------------------------------------------------------------------
 * ローディング画面
-----------------------------------------------------------------------*/
.loading {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #1E1E1E;
	z-index: 9999999;
	font-size: 2em;
	opacity: 1;
	transition: opacity 0.5s ease;
}
.count_wrap {
	width: 100%;
	color: #FFF;
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
}
.loading .text {
	width: 100%;
	display: flex;
	justify-content: space-between;
	padding: 0 20px;
}
.loading .text img {
	display: block;
	width: 200px;
	height: auto;
}
.progress_bar {
	width: 100%;
	height: 1px;
	margin-top: 10px;
	position: relative;
}
#progress_bar_count {
	height: 100%;
	left: 0;
	position: absolute;
	background-image: linear-gradient(-225deg, #FFF 0%, #cbe9eb 48%, #A8DADD 100%);
	width: 0%; /* 初期値は0% */
}


/* ----------------------------------------------------------------------
 * ボタン：VIEW MORE
-----------------------------------------------------------------------*/
.linkarea-viewmore {
	margin-top: 30px;
}
.linkarea-viewmore.right {
	display: flex;
    justify-content: flex-end;
}
.viewmore {
	display: block;
	width: 300px;
	background: #000;
    color: #FFF;
    font-weight: normal;
    font-size: 20px;
    text-align: right;
    padding: 5px 20px;
	overflow: hidden;
}
.viewmore.long-text {width: auto;}
.viewmore:before {
	content: url(./svg/arrow-viewmore.svg);
    display: inline-block;
    margin-right: 5px;
}
.viewmore:hover:before,
.top-services .link:hover .viewmore:before/*topSERVICE*/ {
	animation-fill-mode: forwards;
	animation-duration: 0.5s;
	animation-name: transformArrow; 
	animation-delay: 0s;
}
@keyframes transformArrow {
	0% {
		transform: translateX(-100%);
	}
	100% {
		transform: translateX(0);
	}
}


/* ----------------------------------------------------------------------
 * キービジュアル
-----------------------------------------------------------------------*/
.keyvisual-area {
	width: 100%;
	height: 100vh;
	position: relative;
	overflow: hidden;
}
.keyvisual-area .wrap {
	width: 100%;
	height: 100%;
}
/*円*/
.keyvisual-area .wrap-circle {
	/*width: calc(100vh * 0.95);*/
	--item-count: 24; /*要素数*/
	--circle-radius: calc( (100vh * 0.95) / 2); /*円の半径 */
	--circle-orbit: calc( (100vh * 0.95) / 2 + 7.5px);/*円のラインの上に表示*/
	--item-size: 15px; /* 要素サイズ */
	width: calc(var(--circle-radius) * 2 + var(--item-size));
	height: calc(var(--circle-radius) * 2 + var(--item-size));
	position: absolute;
	right: 18%;
	top: 50%;
	transform: translateY(-50%);
	-ms-transform: translateY(-50%);
}
.keyvisual-area .wrap-circle .dot {
	width: var(--item-size);
	height: var(--item-size);
	background: #1D3657;
	border-radius: 100%;
	position: absolute;
	margin: -7.5px 0 0 -7.5px;
	top: 50%;
	left: 50%;
	z-index: 3;
	margin: calc(var(--item-size) / -2) 0 0 calc(var(--item-size) / -2);
	--index: 16;
	transform: rotate(calc(360deg / var(--item-count) * var(--index)))
		translateY(calc(var(--circle-orbit) * -1));
}
.keyvisual-area .wrap-circle .dot a {
	display: inline-block;
	width: 170px;
	transform: rotate(120deg);
    position: relative;
    top: 545%;
	right: 840%;
}
.keyvisual-area .wrap-circle .dot a:before {
	content: "SERVICE";
}
.keyvisual-area .wrap-circle .dot a:after {
	content: "\f0da";
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	margin-left: 5px;
}
.keyvisual-area .wrap-circle .dot a.company:before {content: "COMPANY";}
.keyvisual-area .wrap-circle .dot a.service:before {content: "SERVICE";}
.keyvisual-area .wrap-circle .dot a.sns:before {content: "SNS/ADVERTISING";}
.keyvisual-area .wrap-circle .dot a.maketing:before {content: "MARKETING";}
.keyvisual-area .wrap-circle .dot a.ballet:before {content: "THE BALLET SHOW";}
.keyvisual-area .wrap-circle .dot a.recruit:before {content: "RECRUIT";}
.keyvisual-area .wrap-circle .page-name {
	list-style: none;
	font-size: 8px;
	color: #888;
	font-weight: normal;
	position: absolute;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
}
.keyvisual-area .wrap-circle .page-name li.active {color: #000;}
.keyvisual-area .circle-width {
	border: 1px solid #000;
	border-radius: 50%;
}
.keyvisual-area .circle-height {
	position: relative;
	height: 0;
	padding-top: 100%;
}
.keyvisual-area .circle {
	position: absolute;
	/*top: calc((100% - 1em)/2);*/
	left: 0;
	right: 0;
	margin: 0;
	text-align: center;
}
/*テキスト/ロゴ*/
.keyvisual-area .texts {
	height: 100%;
	display: flex;
	align-items: center;
	margin-left: 5%;
}
.keyvisual-area .text {
	font-size: 1.5rem;
	margin-bottom: 20px;
	position: relative;
	z-index: 1;
}
.keyvisual-area .text span {
	background: #1D3657;
	color: #FFF;
	padding: 0 5px;
}
.keyvisual-area .texts img {
	display: block;
	width: 50%;
}
/*SCROLL*/
.keyvisual-area .scroll {
	font-weight: normal;
	transform: rotate(90deg);
	position: absolute;
	left: 5%;
	bottom: calc( 5vh + (92px / 2 - 1rem));
}
.keyvisual-area .scroll:after {
	content: "";
	display: inline-block;
	width: calc(31px * 1);
	height: calc(8px * 1);
	background: url(./svg/arrow-scroll.svg);
	background-size: cover;
	background-position: center;
	margin-left: 5px;
}
/***キューブ***/
#cube-wrap {
	width: 50%;
	height: 100%;
	position: absolute;
	right: 0;
	z-index: 2;
}
#cube {
	width: 100%;
	height: 100%;
}
@media screen and (max-width: 1024px) {
	.keyvisual-area .wrap {position: relative;}
	.keyvisual-area {
		display: flex;
		align-items: center;
		/*padding-top: 60px;*/
	}
	/*cube*/
	#cube-wrap {
		width: 100vw;
		height: 100vw;
		bottom: 0;
		/*right: -10%;*/
		left: 0;
		right: 0;
	}
	/*text*/
	.keyvisual-area .texts {
		height: auto;
		display: block;
		margin-left: 20px;
		margin-bottom: 35px;
	}
	.keyvisual-area .text {margin-bottom: 10px;}
	.keyvisual-area .texts img {
		width: 90%;
		max-width: 400px;
	}
	/*円*/
	.keyvisual-area .wrap-circle {
		--circle-radius: calc( (100vw * 0.8) / 2);
		--circle-orbit: calc(  (100vw * 0.8) / 2 + 7.5px);
		right: initial;
		position: relative;
		top: initial;
		right: initial;
		transform: initial;
		-webkit-transform: initial;
		-ms-transform: initial;
	}
	.keyvisual-area .circle-width {
		width: 100%;
		position: initial;
		transform: initial;
		-webkit-transform: initial;
		-ms-transform: initial;
	}
	.keyvisual-area .wrap-circle .page-name {
		transform: initial;
		-webkit-transform: initial;
		-ms-transform: initial;
		bottom: initial;
		left: 15px;
		top: 50%;
		transform: translateY(-50%);
		-webkit-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
	}
	/*scroll*/
	.keyvisual-area .scroll {
		position: initial;
		display: inline-block;
	}
}
@media screen and (max-width: 834px){
	.keyvisual-area .wrap-circle {
		--circle-radius: calc(100vw / 2);
		--circle-orbit: calc( (100vw / 2) + 7.5px);
	}
	.keyvisual-area .wrap-circle .dot {--index: 21.5;}
	.keyvisual-area .wrap-circle .dot a {
		transform: rotate(38deg);
        top: 385%;
        right: -10%;
	}
}
@media screen and (max-width: 768px) {
	.keyvisual-area .wrap-circle {margin-left: -5%;}
	.keyvisual-area .wrap-circle .page-name {left:  calc((100vw * 0.05) + 10px);}
}
@media screen and (max-width: 500px) {
	.keyvisual-area .wrap {height: auto;}
	#cube-wrap {
		left: initial;
		right: -10%;
	}
}


/* ----------------------------------------------------------------------
 * 見出し
-----------------------------------------------------------------------*/
/***大****/
.ttl-hidden {font-size: 0;}
.content-ttl {
	font-family: "Oswald", sans-serif;
	font-weight: 700;
	font-style: normal;
	font-size: 4.5rem;
	letter-spacing: -3px;
	line-height: 1;
}
.content-ttl .sub {
	display: block;
	font-family: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;
	font-size: 14px;
	letter-spacing: initial;
	margin-top: 10px;
}
/***中****/
.content-tt-p2 {
	font-size: 1.5rem;
	font-weight: 900;
	/*color: #1D3657;*/
	border-left: solid 8px #000; 
	padding-left: 15px;
	margin-bottom: 15px;
}
/***PERFORMANCE***/
.bg-gray .content-ttl {color: #1D3657;}


/* ----------------------------------------------------------------------
 * トップ：レイアウト
-----------------------------------------------------------------------*/
.container {
	padding: 0 5%;
	padding-top: 100px;
}
.content {margin-top: 30px;}
.container .separate {
	width: 100%;
	display: flex;
}
.page-container .separate {display: flex;}
.page-container .separate.algn-center {align-items: center;}
/***分割1:1***/
.page-container .sprt-1-1 .box {width: 50%;}
.page-container .sprt-1-1 .left {padding-right: 15px;}
.page-container .sprt-1-1 .right {padding-left: 15px;}
/***分割1:2***/
.container .sprt-1-2 .left,
.page-container .sprt-1-2 .left {
	width: 30%;
	margin-right: 30px;
}
.container .sprt-1-2 .right,
.page-container .sprt-1-2 .right {flex: 1}
/***PERFORMANCE***/
.container.bg-gray {
	height: 100vh;
	background: rgba(0,0,0,0.1);
	display: flex;
	align-items: center;
	padding: 50px 0;
	margin-top: 0;
}
.container.bg-transparent {
	padding: 50px 0 0 0;
	margin-top: 0;
}
.container.bg-gray.top-performance {padding: 20px 0;}
.top-performance .wrap {
	width: 100%;
	height: 100%;
}
.swiper-performance .sp {display: none !important;}
.swiper-performance img.pc {
	display: block;
	width: 100%;
	height: auto;
	margin-right: 0;
	position: absolute;
	padding-left: 350px;
}
.top-performance {position: relative;}
.top-performance .ttl {
	position: absolute;
	left: 5%;
	top: 100px;
	z-index: 1;
}
/*swiper*/
.swiper-performance {
	width: 100%;
	height: 100%;
	overflow: hidden;
	position: relative;
	z-index: 0;
	margin-right: 0;
}
.swiper-slide {
	display: flex;
	align-items: center;
	overflow: hidden;
}
.top-performance .swiper-horizontal>.swiper-pagination-bullets,
.top-performance .swiper-pagination-bullets.swiper-pagination-horizontal {
	width: auto;
	left: initial;
	top: 14%;
	right: 20px;
}
.swiper-pagination {
	position:absolute;
	z-index: 2;
}
.swiper-pagination-bullet {
	background: #888;
	opacity: initial;
}
.swiper-pagination-bullet-active {
	background: #1D3657;
	width: 10px;
	height: 10px;
}
.swiper-pagination-extra {
	font-weight: normal;
	position: absolute;
	left: 50px;
	top: 47%;
	z-index: 2;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
}
.swiper-button {
	position: absolute;
	z-index: 3;
	top: 50%;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
}
.swiper-button svg {display: none;}
.swiper-button:before {
	content: "";
	display: block;
	width: calc(16px * 1);
	height: calc(79px * 1);
}
.swiper-button-prev {left: 10px;}
.swiper-button-next {right :10px;}
.swiper-button-prev:before {
	background: url(./svg/slide-rfr-prev.svg);
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}
.swiper-button-next:before {
	background: url(./svg/slide-rfr-next.svg);
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}
/***ABOUT US***/
.container.bg-aboutus {
	width: 100%;
	height: 100vh;
	background: url(https://wibro.jp/wp-content/uploads/2025/10/wibro-member.jpg);
	background-size: cover;
	background-position: center;
	margin-top: 0;
}
/***APPROACH***/
#top-approach .content-ttl.u-tb {
	display: none;
	font-size: 40px;
	writing-mode: vertical-rl;
	width: 55px;
	height: 100%;
	border-right: solid 1px #000;
	position: sticky;
	top: 50px;
}
#top-approach .content-ttl.u-tb .sub {display: inline-block;}
#top-approach .separate {align-items: flex-start;}
#top-approach .left {
	position: sticky;
	top: 50px;
}
#top-approach .right {background: #FFF;}
#top-approach .approach .txt-bottmttl {font-size: 1.1rem;}
.top-approach .toc .aprch {margin-bottom: 20px;}
.top-approach .toc .aprch:last-of-type {margin-bottom: 0;}
.top-approach h3 {
	font-size: 1.5rem;
	font-weight: 900;
	margin-bottom: 10px;
}
.top-approach h3 span {
	display: block;
	font-size: 14px;
	font-weight: normal;
}
.top-approach .approach {
	padding-top: 50px;
	margin-bottom: 50px;
	position: relative;
}
.top-approach .approach:first-of-type {
	padding-top: 0;
	margin-top: 0;
}
.top-approach .approach:after {
	content: "";
	width: 250px;
	height: 1px;
	border-bottom: solid 1px #000;
	position: absolute;
	top: 0;
	left: 0;
}
.top-approach .approach:first-of-type:after {display: none;}
.top-approach-icons {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
}
.top-approach-icons li {
	width: calc( (100% - 50px) / 5);
	margin: 5px;
}
/***SERVICE***/
.top-services {
	display: flex;
	flex-wrap: wrap;
}
.top-services .link {
	display: block;
	width: calc( (100% -  60px ) / 3);
	margin: 0 10px;
	font-size: 14px;
	color: #FFF;
	position: relative;
}
.top-services.pc-hover:hover .link {opacity: 0.5;}
.top-services.pc-hover .link:hover {
	z-index: 3;
	opacity: 1;
}

/*page*/
.page-container .top-services .link {
	width: calc( (100% -  40px ) / 2);
	margin: 10px;
}
.top-services .service-text-wrap {
	height: 300px;
	background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)),url(https://wibro.jp/wp-content/uploads/2025/10/service-1.png);
	background-size: cover;
	background-position: center;
	position: relative;
}
.top-services .service-text-wrap.service-1 {
	background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),url(https://wibro.jp/wp-content/uploads/2025/10/img-top-service.jpg);
	background-size: cover;
	background-position: center;
	position: relative;
}
.top-services .service-text-wrap.service-2 {
	background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),url(https://wibro.jp/wp-content/uploads/2025/10/img-top-recruit-1.jpg);
	background-size: cover;
	background-position: center;
	position: relative;
}
.top-services .service-text-wrap.service-3 {
	background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),url(https://wibro.jp/wp-content/uploads/2025/10/service-1.png);
	background-size: cover;
	background-position: center;
	position: relative;
}
.top-services .service-text {
	position: absolute;
	bottom: 20px;
	left: 20px;
}
.top-services .service-text .ttl {
	font-size: 24px;
	margin-bottom: 10px;
}
.top-services .service-text .ttl span {
	display: block;
	font-size: 14px;
	font-weight: normal;
}
.top-services ul {
	list-style: none;
	font-size: 12px;
	display: flex;
	margin-top: 15px;
}
.top-services li {
	border-left: solid 5px #FFF;
	padding: 0 5px;
	margin-right: 10px;
}
.top-services li:last-of-type {margin-right: 0;}
.top-services li span {
	display: block;
	font-size: 10px;
}
.top-services .viewmore {
	width: 100%;
	background: #000;
	color: #FFF;
	font-weight: normal;
	font-size: 20px;
	text-align: right;
	padding: 5px 20px;
}
.top-services .viewmore:before {
	content: url(./svg/arrow-viewmore.svg);
	display: inline-block;
	margin-right: 5px;
}
/***RECRUIT***/
.container.bg-photo-half {
	min-height: 500px;
	position: relative;
	overflow: hidden;
}
.container.bg-photo-half:after {
	content: "";
	display: block;
	width: 60%;
	height: 100%;
	background: url(https://wibro.jp/wp-content/uploads/2025/10/wibro-member.jpg);
	background-size: cover;
	background-position: center;
	position: absolute;
	right: 5%;
	top: 100px;
	z-index: -1;
}
#top-recruit .tb-img {
	display: none;
	width: 100%;
	margin-top: 20px;
}
#top-recruit .linkarea-viewmore {
	width: 32%;
	display: flex;
	justify-content: flex-end;
	margin-top: 50px;
}
/***パートナーバナー***/
.swiper-pbnr > .swiper-wrapper {
	-webkit-transition-timing-function:linear!important;
	-o-transition-timing-function:linear!important;
	transition-timing-function:linear!important;
}
/***アニメーション***/
.anime-p1 {opacity: 0;}
.anime-p1.on {
	transition: 3s;
	opacity: 1;
}


/* ----------------------------------------------------------------------
 * トップ：デザイン
-----------------------------------------------------------------------*/
.txt-bottmttl {
	font-size: 1.2rem;
	color: #1D3657;
}
/***ABOUT US***/
.bg-aboutus {position: relative;}
.bg-aboutus .aboutus-txt {
	width: 45%;
	color: #FFF;
	position: absolute;
	right: 5%;
	bottom: 50px;
}
.aboutus-txt .concept {
	font-size: 1.1rem;
	margin-top: 10px;
	margin-bottom: 20px;
}
.bg-aboutus .mission {
	font-size: 16px;
	display: flex;
	margin-top: 20px;
}
.bg-aboutus .mission .txts {margin-right: 30px;}
.bg-aboutus .mission .txts:last-of-type {margin-right: 0;}
.bg-aboutus .mission .htxt {
	font-weight: 400;
	padding-left: 35px;
	position: relative;
}
.bg-aboutus .mission .htxt:before {
	content: "";
	width: 30px;
	height: 1;
	background: #FFF;
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
}


/* ----------------------------------------------------------------------
 * 固定ページ：ページタイトル
-----------------------------------------------------------------------*/
.page-ttl-wrap {
	width: 1140px;
	height: 260px;/*+60px*/
	display: flex;
	align-items: center;
	padding-top: 60px;
	margin: 0 auto;
}
.page-ttl .ttl {
	font-size: 2.3rem;
	font-weight: 900;
	margin-left: -2px;
}
.page-ttl .sub {color: #1D3657;}


/* ----------------------------------------------------------------------
 * 固定ページ：ページトップ画像
-----------------------------------------------------------------------*/
.pagetop-img {
	width: 1140px;
	height: 450px;
	margin: 0 auto;
}
.pagetop-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}


/* ----------------------------------------------------------------------
 * 固定ページ
-----------------------------------------------------------------------*/
.page-container {margin-top: 100px;}
.page-container.bg-gray {
	background: #EFEFEF;
	padding: 50px 0;
}
.page-container .inner-content {
	width: 1140px;
	background: #FFF;
	margin: 0 auto;
}
.page-container.bg-gray .inner-content {background: transparent;}
.page-container .inner-block {margin-top: 50px;}
/***見出し調整***/
.page-container .content-ttl {font-size: 4rem;}
.page-container .content-ttl .sub {margin-top: 5px;}
.page-container .txt-bottmttl {font-size: 1.1rem;}
/***見出し：横並び***/
.sectionttl-flex {
	display: flex;
	align-items: center;
}
.sectionttl-flex .sub.txt-bottmttl {
	padding-left: 30px;
	margin-left: 30px;
	position: relative;
}
.sectionttl-flex .sub.txt-bottmttl:before {
	content: "";
	width: 1px;
	height: 60px;
	border-left: solid 1px #000;
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
}


/* ----------------------------------------------------------------------
 * 固定ページ：装飾等
-----------------------------------------------------------------------*/
/**/
.reasons {
	list-style: none;
	font-size: 1.1rem;
}
.reasons li {margin-bottom: 40px;}
.reasons li:last-of-type {margin-bottom: 0;}
.reasons .ttl {
	font-size: 1.3rem;
	font-weight: 900;
	color: #1D3657;
	margin-bottom: 10px;
}
.reasons .ttl span {
	display: inline-block;
	color: #FFF;
	background: #1D3657;
	padding: 0 5px;
	margin-right: 5px;
}
/***矢印つきボックス***/
.arrow-box {
	list-style: none;
	display: flex;
}
.arrow-box li {
	width: calc(100% / 3);
	text-align :center;
	background: #FFF;
	border-top: solid 1px #1D3657;
	border-bottom: solid 1px #1D3657;
	border-left: solid 1px #1D3657;
	display: flex;
    flex-direction: column;
	padding: 30px;
	position: relative;
}
.arrow-box li:last-of-type {border-right: solid 1px #1D3657;}
.arrow-box li:after {
	content: url(./svg/slide-rfr-next.svg);
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
}
.arrow-box li:first-of-type::after {content: "";}
.arrow-box .ttl {
	font-size: 1.2rem;
	color: #1D3657;
	flex-grow: 1;
	display: flex;
    flex-direction: column;
	justify-content: center;
	margin-bottom: 20px;
}
/***SNS運用サポート説明***/
.support-list {list-style: none;}
.support-list li {
	display: flex;
	align-items: center;
	margin-bottom: 10px;
}
.support-list li:last-of-type {margin-bottom: 0;}
.support-list img {
	display: block;
	width: 140px;
	height: auto;
	margin-right: 20px;
}
.support-list .ttl {
	font-size: 1.3rem;
	color: #1D3657;
	margin-bottom: 10px;
}
/***画像横並び：3列***/
.imgs-3clm {
	display: flex;
	align-items: flex-start;
}
.imgs-3clm img {
	display: block;
	width: calc( (100% - 90px) / 3);
	height: auto;
	margin-right: 30px;
}
.imgs-3clm img:last-of-type {margin-right: 0;}
/***横並び***/
.flex-box {display: flex;}
/***横並び：3列***/
.flex-box.clm3 .box {
	width: calc( (100% - 40px) / 3);
	margin-right: 20px;
	border: solid 1px #1D3657;
}
.flex-box.3clm .box:last-of-type {margin-right: 0;}
/******/
.list-typ1 {
	background: #E5F4F5;
	padding: 30px;
}
.list-typ1 .ttl {
	display: inline-block;
	background: #1D3657;
	color: #FFF;
	padding: 0px 20px;
	margin-bottom: 20px;
	position: relative;
}
.list-typ1 .ttl:after {
	content: "";
	display: block;
	width: 30px;
	height: 100%;
	background: linear-gradient(45deg, rgba(255,255,255,0) 0%, rgb(29,54,87) 0%, rgb(29,54,87) 50%, rgba(255,255,255,0) 0%);
	position: absolute;
	top: 0;
	right: -29px;
	bottom: 0;
}
.list-typ1 ul {list-style: none;}
.list-typ1 li {
	position: relative;
	padding-left: 15px;
	margin-bottom: 20px;
}
.list-typ1 li:last-of-type {margin-bottom: 0;}
.list-typ1 li:before {
	content: "\f0da";
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	color: #1D3657;
	position: absolute;
	left: 0;
}
/***枠線***/
.box-line {
	border: solid 2px #1D3657;
	color: #1D3657;
	background: #FFF;
	border-radius: 5px;
	padding: 20px;
}
/***採用情報：VISION＆MISSION***/
.team-vision-wrap {display: flex;}
.team-vision {
	width: 50%;
	border: solid 1px #FFF;
	text-align: center;
	background: #1D3657;
	color: #FFF;
	font-size: 1.5rem;
	padding: 30px;
}
.team-vision .ttl {
	width: 130px;
	line-height: 1.2;
	font-family: "Oswald", sans-serif;
	font-weight: 700;
    font-style: normal;
	background: #FFF;
    color: #1D3657;
    padding: 0;
	margin: 0 auto;
	margin-bottom: 15px;
}
/***採用情報：募集要項***/
/*テーブル*/
table.job-description {
	font-size: 14px;
    font-weight: bold;
	margin: 0;
}
table.job-description th,
table.job-description td {
	border-top: solid 1px #1D3657;
    padding: 10px;
}
table.job-description tr:last-of-type {border-bottom: solid 1px #1D3657;}
table.job-description th {
	width: 20%;
	color: #1D3657;
    background: #efefef;
    text-align: center;
}
table.job-description td {
	background: #FFF;
	color: #333;
}
table.job-description ul {
	margin-top: 5px;
	list-style: none;
}
table.job-description li {
	padding-left: 17px;
	position: relative;
	margin-bottom: 10px;
}
table.job-description li:last-of-type {margin-bottom: 0;}
table.job-description li:before {
	content: "\f111";
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	color: #1D3657;
	font-size: 7px;
	position: absolute;
	left: 0;
	top: 8px;
}
/*応募リンク：上部*/
.boshu-toplink {
	background: #E5F4F5;
    text-align: center;
    padding: 10px;
    margin-bottom: 10px;
}
.boshu-toplink a {
	border-bottom: solid 1px #1D3657;
	color: #1D3657;
}
.boshu-toplink a:after {
    content: "\f0da";
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    padding-left: 5px;
}
/*応募リンク：下部*/
.boshu-bottomlink {
	text-align: center;
	background: #E5F4F5;
	padding: 20px;
	margin-top: 10px;
}
.boshu-bottomlink .ttl span {
	display: block;
	color: #000;
	font-size: 0.8rem;
}
.boshu-bottomlink a {
	width: 350px;
    height: 55px;
    background: #1D3657;
    font-size: 1.2rem;
    color: #FFF;
    line-height: 1.5;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 10px;
    position: relative;
	margin: 0 auto;
	margin-top: 15px;
}
.boshu-bottomlink a:after {
	content: url(./svg/arrow_crcl-white.svg);
    display: block;
    width: 30px;
    height: 30px;
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}
/***会社概要***/
table.company-info {font-weight: bold;}
table.company-info th,
table.company-info td {
	border-top: solid 1px #666;
    padding: 10px;
}
table.company-info th {
	background: #efefef;
	color: #1D3657;
}
table.company-info tr:last-of-type {border-bottom: solid 1px #666;}
table.company-info td {background: #FFF;}
/***SNS運用：スライド***/
.swiper-sns-prfrmnc {
	width: 100%;
	position: relative;
	overflow: hidden;
	padding: 0 20px;
	margin-top: 30px;
	/*ページャ調整*/
	padding-top: 30px;
}
.swiper-sns-prfrmnc .swiper-wrapper {height: auto;}
.swiper-sns-prfrmnc .swiper-button-prev {left: 0;}
.swiper-sns-prfrmnc .swiper-button-next {right: 0;}
.swiper-sns-prfrmnc .swiper-horizontal>.swiper-pagination-bullets,
.swiper-sns-prfrmnc .swiper-pagination-bullets.swiper-pagination-horizontal {
	width: auto;
	left: initial;
	right: 20px;
	top: -5px;
}
/***マーケティング代行***/
.marke-agency {background: #FFF;}
.marke-agency .ttl {
	height: 100px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #1D3657;
	color: #FFF;
	font-size: 1.2rem;
	text-align: center;
}
.marke-agency ul {
	list-style: none;
	padding: 20px;
}
.marke-agency li {
	position: relative;
    padding-left: 15px;
    margin-bottom: 20px;
	position: relative;
}
.marke-agency li:last-of-type {margin-bottom: 0;}
.marke-agency li:before {
	content: "\f0da";
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    color: #1D3657;
    position: absolute;
    left: 0;
}
/***THE BALLET SHOW***/
.balletsow-apl3 {
	display: flex;
	margin-top: 20px;
}
.balletsow-apl3 .box {
	width: calc(100% / 3);
	height: 250px;
	background: #ccc;
	position: relative;
}
.balletsow-apl3 .box:after {
	content: "";
	display: block;
	width: 50px;
	height: 50px;
	background: url(./svg/x-w-50.svg);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	position: absolute;
	right: -25px;
	top: 50%;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	z-index: 1;
}
.balletsow-apl3 .box:last-of-type:after {display: none;}
.balletsow-apl3 .text {
	font-size: 1.3rem;
	width: 80%;
    text-align: center;
	color: #FFF;
	background: #000;
	padding: 0 10px;
	position: absolute;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
}
.balletsow-apl3 .box.img1 {
	background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url(https://wibro.jp/wp-content/uploads/2025/10/img-page-ballet-1.jpg);
	background-size:cover;
	background-repeat: no-repeat;
	background-position: center;
}
.balletsow-apl3 .box.img2 {
	background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url(https://wibro.jp/wp-content/uploads/2025/10/img-page-ballet-2.jpg);
	background-size:cover;
	background-repeat: no-repeat;
	background-position: center;
}
.balletsow-apl3 .box.img3 {
	background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url(https://wibro.jp/wp-content/uploads/2025/10/img-page-ballet-3.jpg);
	background-size:cover;
	background-repeat: no-repeat;
	background-position: center;
}
/****/
.flex-img.clm2 {
	display: flex;
	flex-wrap: wrap;
}
.flex-img img {
	width: calc( (100% - 20px) / 2);
	margin: 5px;
}


/* ----------------------------------------------------------------------
 * アコーディオン
-----------------------------------------------------------------------*/
.acd {margin-bottom: 20px;}
.acd .label {
	background: #1D3657;
	color: #FFF;
	font-size: 1.3rem;
	cursor: pointer;
	padding: 10px;
	position: relative;
}
.acd .contents {
	display: none;
	padding: 10px 5px;
}
.acd .label:before{/*閉*/
	content: "\f0d7";
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	position: absolute;
	right: 20px;
}
.acd .label.active:before{content: "\f0d8";}


/* ----------------------------------------------------------------------
 * お問い合わせ
-----------------------------------------------------------------------*/
.page-container.contact {margin-top: 30px;}
 .form-wrap {
	background: #FFF;
	/*border: solid 1px #CCC;*/
	padding: 30px;
}
.contact-form {margin-bottom: 30px;}
.contact-form th,
.contact-form td {
	border-bottom: solid 1px #666;
	padding: 20px;
}
.contact-form th {background: #F5F5F5;}
.contact-form tr:first-child th,
.contact-form tr:first-child td {
	border-top: solid 1px #666;
}
.contact-form tr th {color: #1D3657;}
/**/
input,
textarea,
select {
	font-size: 16px;
	font-family: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;
	padding: 5px;
}
textarea {width: 100%;}
.contact .btn-area {text-align: center;}
.wpcf7-list-item {margin: 0;}
.btn-submit {
	width: 300px;
	background: #1D3657;
	font-weight: 700;
	font-size: 18px;
	color: #FFF;
	letter-spacing: 5px;
	border: none;
	padding: 10px 0;
	margin-top: 30px;
}
.wpcf7-spinner {display: none;}
/*reCAPTCHA*/
.grecaptcha-badge {visibility: hidden;}
.recaptcha-text {
	font-size: 11px;
	color: #888;
	line-height: 1.5;
	text-align: center;
	margin-top: 20px;
}


/* ----------------------------------------------------------------------
 * Youtube
-----------------------------------------------------------------------*/
.youtube-wrap {
	width: 100%;
	position: relative;
	padding-bottom: 56.25%; /*16:9*/
}
.youtube-wrap iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}


/* ----------------------------------------------------------------------
 * 改行
-----------------------------------------------------------------------*/
.br-500 {display: none;}
.br-768 {display: none;}


/* ----------------------------------------------------------------------
 * ブレイクポイント
-----------------------------------------------------------------------*/
@media screen and (max-width: 1300px) {
	/***ヘッダー***/
	.toggle-btn {right: 10px;}
	/******/
	.container {
		padding: 0 20px;
		padding-top: 80px;
	}
	.page-container {margin-top: 80px;}
	/***TOP:PERFORMANCE***/
	.container.bg-gray {
		height: auto;
		width: 100%;
	}
	.top-performance .txt-bottmttl {font-size: 0;}
	.top-performance .results {
		display: block;
		padding-left: 25%;
	}
	.top-performance .result {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin: 0;
		margin-bottom: 25px;
	}
	.top-performance .result:last-of-type {margin-bottom: 0;}
	.container.bg-gray.top-performance {
		display: flex;
		align-items: center;
	}
	.top-performance .ttl {
		position: initial;
		padding-left: 20px;
	}
	.top-performance .pfms-data {
		width: calc(100% - 20px);
		padding: 30px 20px;
	}
	.swiper-backface-hidden .swiper-slide {overflow: hidden;}
	.swiper-performance {padding-top :30px;}
	.top-performance .swiper-horizontal>.swiper-pagination-bullets,
	.top-performance .swiper-pagination-bullets.swiper-pagination-horizontal {top: -5px;}
	.swiper-pagination-extra {
		top: 10px;
		left: 10%;
	}
	.top-performance .swiper-button-next {right: -12px;}
	.top-performance .swiper-button-prev {left: -12px;}
	.swiper-performance .pc {display: none !important;}
	.swiper-performance .sp {display: block !important;}
	.swiper-performance img.sp {
		width: 100%;
		height: auto;
		position: initial;
	}
	/***TOP:RECRUIT***/
	.container.bg-photo-half:after {
		top: 50px;
		right: 20px;
	}
	/***固定ページ***/
	.page-container .inner-content {
		width: 100%;
		padding: 0 20px;
	}
	/***固定ページ：ページタイトル***/
	.page-ttl-wrap {
		width: 100%;
		padding: 60px 20px 0 20px;
	}
	.pagetop-img {width: 100%;}
}
@media screen and (max-width: 1024px) {
	/**/
	.content {margin-top: 20px;}
	/**/
	.keyvisual-area .text {
		font-size: 1rem;
	}
	/***footer***/
	.footer {padding: 100px 20px 10px 20px;}
	.footer .inner {justify-content: space-around;}
	.footer .inner .block {width: auto;}
	/***TOP:ABOUT US***/
	.bg-aboutus .aboutus-txt {
		width: auto;
		right: 20px;
	}
	.aboutus-txt .concept .inner {display: inline-block;}
	/***TOP:APPROACH***/
	#top-approach.container {
		display: flex;
		align-items: flex-start;
		padding-left: 0;
	}
	#top-approach .content-ttl.u-tb {display: block;}
	#top-approach .content-ttl.pc {display: none;}
	#top-approach .separate {
		display: block;
		padding-left: 30px;
	}
	#top-approach .left {
		width: 100%;
		margin-bottom: 50px;
		position: initial;
	}
	#top-approach .txt-bottmttl {margin-top: 0;}
	.top-approach .approach:first-of-type:after {display: block;}
	.top-approach .approach:first-of-type {padding-top: 50px;}
	/***TOP:SERVICE***/
	.top-services .link {
		width: calc((100% - 40px) / 2);
		margin: 10px;
	}
	/***TOP:RECRUIT***/
	#top-recruit.container {
		padding-left: 0;
		padding-right: 0;
	}
	#top-recruit .content-ttl,
	#top-recruit .txt-bottmttl,
	#top-recruit .content {
		padding: 0 20px;
	}
	.container.bg-photo-half:after {display: none;}
	#top-recruit .tb-img {display: block;}
	#top-recruit .content.text {
		margin-top: -15px;
	}
	#top-recruit .linkarea-viewmore {
		width: 100%;
		padding: 0 20px;
	}
	/**/
	.imgs-3clm img {
		width: calc((100% - 40px) / 3);
		margin-right: 20px;
	}
	/**↑1024*******/
}
@media screen and (max-width: 834px){
	/***footer***/
	.footer {padding: 100px 20px 10px 20px;}
	.footer .inner {
		flex-direction: column;
		align-items: center;
	}
	.footer .inner .block {
		margin: 0;
		margin-bottom: 50px;
	}
	/***見出し***/
	.content-ttl {font-size: 56px;}
	.content-ttl .sub {font-size: 12px;}
	/***ハンバーガーメニュー***/
	.hamburger-menu .menu-area {
		height: 100%;
		top: -100%;
	}
	.hamburger-menu .menu-cat ul {display: block;}
	.hamburger-menu .menu-cat li {
		width: 100%;
		text-align: left;
	}
	.hamburger-menu .menu-cat li a {
		display: block;
		width: 100%;
		height: 100%;
		padding-top: 5px;
		padding-bottom: 5px;
	}
	/***TOP:ABOUT US***/
	.bg-aboutus .aboutus-txt {
		width: 100%;
		bottom: 20px;
		right: initial;
		left: 0;
		padding: 0 20px;
	}
	
	/*data*/
	.top-performance .result .no {font-size: 64px;}
	.top-performance .result .no .unit {font-size: 36px;}
	.top-performance .result .sns-name {font-size: 16px;}
	/**/
	.swiper-wrapper {height: auto;}
	/***TOP:SERVICE***/
	.top-services {display: block;}
	.top-services .link,
	.page-container .top-services .link {
		width: 100%;
		margin: 0;
		margin-bottom: 20px;
	}
	.top-services .link:last-of-type {margin-bottom: 0;}
	.top-approach-icons li {
		width: calc( (100% - 30px) / 3);
	}
	/***見出し：横並び***/
	.sectionttl-flex {display: block;}
	.sectionttl-flex .sub.txt-bottmttl {
		padding-left: 0;
		margin-left: 0;
		margin-top: 20px;
	}
	.sectionttl-flex .sub.txt-bottmttl:before {display: none;}
	/***固定ページ：ページタイトル***/
	.page-ttl .ttl {font-size: 2rem;}
	/***固定ページ***/
	.page-container .separate {display: block;}
	.page-container .sprt-1-2 .left {
		width: 100%;
		margin-right: 0;
		margin-bottom: 30px;
	}
	.page-container .sprt-1-1 .box {width: 100%;}
	.page-container .sprt-1-1 .right {padding-left: 0;}
	.page-container .sprt-1-1 .left {
		padding-right: 0;
		margin-bottom: 20px;
	}
	/******/
	.flex-box.clm3 {display: block;}
	.flex-box.clm3 .box {
		width: 100%;
		margin-right: 0;
		margin-bottom: 20px;
	}
	/******/
	/**/
	.reasons li {margin-bottom: 20px;}
	/**/
	.arrow-box {
		flex-direction: column;
	}
	.arrow-box li {
		width: 100%;
		border-left: solid 1px #1D3657;
		border-right: solid 1px #1D3657;
		border-top: solid 1px #1D3657;
		border-bottom: none;
	}
	.arrow-box li:last-of-type {border-bottom: solid 1px #1D3657;}
	.arrow-box li:after {display: none;}
	.arrow-box li:before {
		content: url(./svg/arrow-down.svg);
		position: absolute;
		top: -0.5px;
		left: 50%;
		transform: translateX(-50%);
		-webkit-transform: translateX(-50%);
		-ms-transform: translateX(-50%);
	}
	.arrow-box li:first-of-type:before {content: "";}
	/***固定ページ：THE BALLET SHOW***/
	.balletsow-apl3 {display: block;}
	.balletsow-apl3 .box {width: 100%;}
	.balletsow-apl3 .text {bottom: 50px;}
	.balletsow-apl3 .box:after {
		top: initial;
		right: initial;
		bottom: -30px;
		left: 50%;
		transform: translateX(-50%);
		-webkit-transform: translateX(-50%);
		-ms-transform: translateX(-50%);
	}
	/*****/
	.flex-img.clm2 {display: block;}
	.flex-img img {
		width: 100%;
		margin: 0 0 10px 0;
	}
	/**↑834*******/
}
@media screen and (max-width: 768px){
	body {font-size: 14px;}
	/**改行***/
	.br-768 {display: block;}
	/***お問い合わせ***/
	.contact-form th,
	.contact-form td {
		padding: 10px;
	}
	.contact-form th {width: 120px;}
	input,
	textarea,
	select {width: 100%;}
}
@media screen and (max-width: 500px){
	/*改行*/
	.br-500 {display: block;}
	/**/
	.main-menu .menu-list {width: 80%;}
	/***追従ボタン***/
	.fixed-btn {
		width: 100%;
		bottom: 0;
		left: 0;
		right: initial;
	}
	.fixed-btn a {width: 100%;}
	/***フッター***/
	.footer {padding-bottom: 70px;}
	.footer .company-info .name {font-size: 24px;}
	.footer .company-info .logo img {width: 300px;}
	.footer .page-list ul {width: 100%;}
	.footer .service-list li {
		width: auto;
		padding: 5px 0;
	}
	.footer .nmlpage-list {
		justify-content :center;
		flex-wrap: wrap;
		font-size: 12px;
	}
	.footer .nmlpage-list li {
		/*width: calc(100% / 2);*/
	}
	/**ボタン：VIEW MORE***/
	.viewmore {width: 100%;}
	.viewmore.long-text {
		width: 100%;
		font-size: 17px;
		padding: 10px 15px 10px 0;
	}
	/**/
	.txt-bottmttl {font-size: 1.1rem;}
	/***TOP:ABOUT US***/
	.aboutus-txt .concept {font-size: 16px;}
	.bg-aboutus .mission {font-size: 14px;}
	/***TOP:APPROACH***/
	#top-approach .separate {padding-left: 20px;}
	#top-approach .approach .txt-bottmttl {font-size: 16px;}
	.bg-aboutus .mission .txts {margin-right: 10px;}
	/***TOP:RECRUIT***/
	#top-recruit .linkarea-viewmore {margin-top: 30px;}
	/***TOP:SERVICE***/
	.top-services .service-text {
		width: 100%;
		padding: 10px;
		left: 50%;
		transform: translateX(-50%);
		-webkit-transform: translateX(-50%);
		-ms-transform: translateX(-50%);
	}
	.top-services li {width: calc(100% / 3);}
	.top-services .clm2 li {width: calc(100% / 2);}
	.top-services li span {font-size: 9px;}
	/***パンくずリスト***/
	ul.breadcrumb {font-size: 11px;}
	/***固定ページ：ページタイトル***/
	.page-ttl .ttl {
		font-size: 1.5rem;
		line-height: 1.3;
		margin-top: 5px;
	}
	.pagetop-img {height: 350px;}
	/***固定ページ：見出し***/
	.page-container .content-ttl {font-size: 3.5rem;}
	/*** 固定ページ：装飾等***/
	/**/
	.imgs-3clm {display: block;}
	.imgs-3clm img {
		width: 100%;
		margin-right: 0;
		margin-bottom: 20px;
	}
	.imgs-3clm img:last-of-type {margin-bottom: 0;}
	/***固定ページ：SNS運用***/
	.reasons .ttl {font-size: 1.2rem;}
	.swiper-sns-prfrmnc {}
	.swiper-sns-prfrmnc .swiper-button-next {right: -14px;}
	.swiper-sns-prfrmnc .swiper-button-prev {left: -14px;}
	/***固定ページ：採用情報***/
	.boshu-bottomlink a {width: 100%;}
	.team-vision-wrap {display: block;}
	.team-vision {
		width: 100%;
	}
	.list-typ1 {padding: 20px;}
	/***お問い合わせ***/
	.form-wrap {padding: 0;}
	.contact-form th {
		width: 113px;
		font-size: 13px;
	}
}