/*
 Theme Name:   WP QOLP Mido Child Aisle
 Template:     wp-qolp-mido
 Version:      1.0.0
*/
body {
		font-family: 'Inter', sans-serif;
		font-size: 16px;
}
/*----------トップページ----------*/
.aisle-hero-header {
		color: white;
		padding: 20px;
		box-sizing: border-box;
		position: relative;
		background:
				url("img/top-hero-back.png"), linear-gradient(90deg, #00ACEA 0%, #0FA0E3 100%);
		background-repeat: no-repeat;
		background-size: cover;
}
.aisle-box-set {
		max-width: 1000px;
		margin: 0 auto;
		position: relative;
}
.aisle-hero-box-1 {
		background-image: url("img/top-hero-h1-back.png");
		margin-top: 19px;
		background-repeat: no-repeat;
		background-size: contain;
		width: 612px;
		height: 248px;
		display: flex;
		justify-content: center; /* 横方向 */
		align-items: center; /* 縦方向 */
		padding-left: 35px;
}
.aisle-hero-box-2 {
		display: flex;
		justify-content: flex-end; /* 横方向の終端に寄せる */
		margin-right: 0px;
		padding-top: 28px;
		padding-bottom: 10px;
}
.aisle-hero-box-2 p {
		margin-top: 21px;
		margin-bottom: 21px;
		max-width: 560px;
		background-color: rgba(0, 172, 234, 0.54);
		font-size: 20px;
		line-height: 30px;
}
.aisle-hero-box-1 h1 {
		font-size: 50px;
		margin: 0px;
}
.aisle-hero-header .aisle-button {
		margin-bottom: 42px;
		margin-top: 24px;
}
/*Aisleとは?*/
.box-set1 .aisle-box-left {
		width: 320px; /* 固定幅 */
		margin-bottom: -43px;
}
.box-set1 .aisle-box-right {
		flex: 1; /* 残り全部 */
		padding-top: 26px;
		margin-left: 21px;
		margin-top: -16px;
		padding-right: 20px;
		padding-left: 10px;
		margin-bottom: 30px;
}
.box-set1 .aisle-box-right p {
		font-size: 20px;
}
.box-set1 .aisle-box {
		border: #00ACEA 1px solid;
		border-radius: 29px;
		padding: 0px 5px 31px;
		display: flex;
		justify-content: center;
		align-items: center;
		min-height: 100px; /* これが大事！ */
		margin-top: 0px;
}
.box-set1 .aisle-box.no-border {
		border: #00ACEA 0px solid;
}
.box-set1 .aisle-box div {
		width: 100%;
}
.box-set1 .aisle-box p {
		text-align: center;
		font-size: 20px;
		margin-top: 0px;
}
.box-set1 .aisle-box-full {
		background-image: url("img/grid-img.png");
		position: relative;
		padding: 10px 20px;
		border-radius: 27px;
		margin: 10px 10px 73px;
}
.box-set1 .aisle-box-full h2 {
		font-weight: bold;
		text-align: center;
		margin-top: 14px;
		margin-bottom: 39px;
}
.box-set1 .aisle-box-full p {
		position: relative;
		z-index: 1;
		padding-left: 26px;
		padding-right: 26px;
}
.box-set1 .aisle-box-full img {
		position: absolute;
		z-index: 0;
		right: 23px;
		width: 200px;
		top: 8px;
		opacity: 0.5;
}
/*なぜ出現設計なのか？*/
.aisle-blue-back {
		background-color: #00ACEA !important;
		border-top-right-radius: 75px;
		border-bottom-right-radius: 75px;
		margin-right: 34px !important;
		padding: 19px 69px 19px 75px;
}
.aisle-text {
		padding-left: 20px;
		padding-right: 20px;
		border-bottom: #FFFFFF 1px solid;
		padding-bottom: 41px;
}
/*サービス紹介*/
.aisle-services-box {
		border: #949494 1px solid;
		font-size: 20px;
}
.aisle-services-box-1 {
		height: 200px;
		text-align: center;
		color: #00ACEA;
}
.aisle-services-box-1 h2 {
		font-size: 30px;
		font-weight: bold;
}
.aisle-services-box-2 {
		background-image: url("img/grid-blue.png");
		background-size: cover;
		background-color: #00ACEA;
		color: #FFFFFF;
		text-align: center;
		height: 200px;
}
.box-set2 .aisle-box-full {
		position: relative;
		padding: 10px 20px 22px;
		border-radius: 0px;
		border: #676767 1px solid;
		margin: 0 auto;
		width: 95%;
		text-align: center;
}
.box-set2 .aisle-box-full ul {
		text-align: left;
		margin: 10px auto;
		max-width: 400px;
}
.box-set2 .aisle-box-full h2 {
		font-weight: bold;
		color: #00ACEA;
}
/*記事一覧*/
#area4 {
		background-color: #BCEFFF;
		padding-top: 20px;
		padding-bottom: 80px;
}
/*FAQ*/
.aisle-faq {
		padding: 42px 10px 0px;
}
.aisle-q {
		display: flex;
}
.aisle-a {
		display: flex;
		border-bottom: #ADADAD 1px solid;
		margin-bottom: 15px;
		padding-bottom: 40px;
}
.aisle-q .aisle-mark {
		background-image: url("img/polygon.png");
		background-repeat: no-repeat;
		padding: 16px 43px 19px 20px;
		font-size: 25px;
		color: white;
		font-weight: bold;
}
.aisle-a .aisle-mark {
		background-image: url("");
		background-repeat: no-repeat;
		padding: 16px 43px 19px 20px;
		font-size: 25px;
		color: #000000;
}
.aisle-qatext {
		padding-top: 23px;
}
.aisle-q .aisle-qatext {
		font-weight: bold;
}
/*会社情報　採用情報*/
.box-set3 .aisle-box-left {
		width: 248px; /* 固定幅 */
		margin-bottom: 26px;
		border-right: solid 1px rgba(115, 115, 115, 1.00);
		padding-top: 1px;
		margin-top: 38px;
}
.box-set3 .aisle-box-right {
		flex: 1; /* 残り全部 */
		padding: 15px 20px 15px 10px;
		margin-left: 21px;
		/* [disabled]margin-top: -16px; */
		margin-bottom: 30px;
		text-align: center;
		min-height: 300px;
}
.box-set3 .aisle-box-right p {
		font-size: 20px;
}
/*----------会社情報ページ---------*/
.aisle-big-column {
		min-height: 300px;
		padding: 50px 20px;
		margin: 20px 0px;
}
.aisle-big-column .aisle-option h3 {
		margin: 0;
		padding: 0;
		font-size: 22px;
}
.aisle-big-column .aisle-option p {
		margin-top: 0;
		margin-left: 32px;
		margin-bottom: 23px;
		padding: 0;
}
.aisle-box-border {
		border: solid 1px rgba(115, 115, 115, 1.00);
		border-radius: 20px;
		padding: 24px;
}
.aisle-box-border3 {
		border: solid 1px rgba(115, 115, 115, 1.00);
		border-radius: 20px;
		font-size: 30px;
		padding-top: 80px;
		padding-bottom: 80px;
}
/*----------採用情報ページ---------*/
.aisle-box-border2 {
		border: solid 1px rgba(115, 115, 115, 1.00);
		border-radius: 20px;
		padding: 10px 24px;
}
.aisle-box-border2 h3 {
		margin: 0;
}
.aisle-box-ul ul, .aisle-box-ul ol {
		margin-left: -10px;
}
/*----------共通パーツ---------*/
/*カスタムロゴ*/
.custom-logo {}
/*カスタムロゴ*/
.footer .custom-logo {
		max-width: 80%;
		width: 200px !important;
		position: relative;
		z-index: 1000;
		top: 10px !important;
		padding-left: 20px !important;
		filter: brightness(0) invert(1);
		margin-bottom: 27px;
}
/*フッタ*/
.sns-bar {
		background: #00ACEA;
		text-align: center;
}
.sns-set {
		display: flex;
		justify-content: flex-end;
		padding-top: 30px;
		margin-right: 40px;
}
.sns-set img {
		display: block; /* ← 追加！ */
		width: auto;
		height: 30px;
		padding-left: 20px;
}
.footer .address {
		font-size: 17px;
}
.footer .address .tel {
		font-size: 25px;
		font-weight: bold;
		background-image: url("img/tel-img.png");
		background-repeat: no-repeat;
		padding-left: 49px;
		padding-bottom: 21px;
		margin-top: 25px;
}
/*見出し*/
h2.aisle-blue {}
.editor-styles-wrapper h2.aisle-blue::before {
		content: "";
		display: inline-block;
		width: 22px; /* 四角の横幅 */
		height: 22px; /* 四角の縦幅 */
		background-color: #00ACEA; /* お好みの青 */
		margin-right: 8px; /* 見出し文字との間隔 */
		vertical-align: middle; /* テキストと垂直位置を合わせる */
		margin-bottom: 3px;
}
h2.aisle-blue::before {
		content: "";
		display: inline-block;
		width: 22px; /* 四角の横幅 */
		height: 22px; /* 四角の縦幅 */
		background-color: #00ACEA; /* お好みの青 */
		margin-right: 8px; /* 見出し文字との間隔 */
		vertical-align: middle; /* テキストと垂直位置を合わせる */
		margin-bottom: 3px;
}
.aisle-blue-block {
		display: inline-block;
		width: 100px; /* 四角の横幅 */
		height: 100px; /* 四角の縦幅 */
		background-color: #00ACEA; /* お好みの青 */
		margin-bottom: 3px;
}
.aisle-box-1 {
		padding: 10px;
}
.aisle-left-box-1 {
		border-right: 1px solid #000000;
		display: flex;
		align-items: center; /* 垂直方向の中央揃
	え */
		justify-content: center; /* 水平方向も中央にしたい場合 */ ;
		padding: 20px;
}
.aisle-right-box-1 {
		display: flex;
		align-items: center; /* 垂直方向の中央揃え */
		padding: 20px;
}
.aisle-arrow-down {
		margin-top: -19px;
		margin-bottom: 10px;
}
.aisle-box-b {
		border: 1px solid #000000;
		border-radius: 33px;
		padding-bottom: 21px;
}
.aisle-left-box-2 {
		border-right: 1px solid #000000;
		display: flex;
		align-items: center; /* 垂直方向の中央揃
	え */
		justify-content: center; /* 水平方向も中央にしたい場合 */ ;
		height: 100px !important;
		padding: 20px;
}
.aisle-right-box-2 {
		display: flex;
		align-items: center; /* 垂直方向の中央揃え */
		padding: 20px;
		height: 100px !important;
}
/*デザイン　配置*/
.content-center {
		display: flex;
		justify-content: center; /* 水平方向の中央 */
		align-items: center; /* 垂直方向の中央 */
}
/*フォント装飾*/
h2.text-h2 {
		font-size: 40px;
}
/*テキストに英語装飾*/
h2 {
		position: relative;
		z-index: 1;
}
.text-h2::before {
		content: ""; /* ここに英語を入れる */
		font-size: 80px;
		color: #383838;
		font-style: italic;
		position: absolute;
		top: -61px;
		left: 50px;
		z-index: -1;
		opacity: 0.17;
		white-space: nowrap;
		padding-right: 30px;
		display: block;
		padding-left: 0px;
}
.text-h2 {
		margin-top: 58px;
		padding-left: 19px;
}
.text-h2.about::before {
		content: "About";
}
.text-h2.planning::before {
		content: "Planning"; /* ここに英語を入れる */
		color: white;
}
.text-h2.services::before {
		content: "Services"; /* ここに英語を入れる */
}
.text-h2.faq::before {
		content: "FAQ"; /* ここに英語を入れる */
}
.text-h2.company::before {
		content: "Company"; /* ここに英語を入れる */
		font-size: 30px;
		top: -35px;
}
.text-h2.recruit::before {
		content: "Recruit"; /* ここに英語を入れる */
		font-size: 30px;
		top: -35px;
}
.text-h2.contact::before {
		content: "Contact"; /* ここに英語を入れる */
		font-size: 30px;
		top: -27px;
}
.text-h2.gpt::before {
		content: "Ask GPT!"; /* ここに英語を入れる */
		font-size: 30px;
		top: -27px;
}
/*ボタン*/
.aisle-button {
		color: #00ACEA;
		background-color: white;
		margin: 35px auto 0;
		width: 95%;
		max-width: 330px;
		border-radius: 27px;
		text-align: center;
		padding-top: 10px;
		padding-bottom: 10px;
		font-size: 20px;
		display: block
}
.aisle-button.blue {
		color: #FFFFFF;
		background-color: #00ACEA;
}
a.aisle-button {
		color: #00ACEA;
		text-decoration: none;
		height: 100%;
}
a.aisle-button:visited {
		color: #00ACEA;
}
a.aisle-button.blue:visited {
		color: #FFFFFF;
}
.aisle-blue-button {
		color: white;
		background-color: #00ACEA;
		margin: 0 auto;
		width: 90% !important;
		text-align: center;
		padding-top: 10px;
		padding-bottom: 10px;
		font-size: 20px;
		box-sizing: border-box;
		display: block
}
a.aisle-blue-button {
		color: #FFF6F6;
		text-decoration: none;
}
.aisle-blue-button a:visited {
		color: #FFF6F6 !important;
}
/*背景色
*/
.aisle-back-1 {
		background-color: #E0E0E0
}
.aisle-back-2 {
		background-color: #D0F3EE
}
/*記事ブロックの背景設定*/
.imgbox {
		background-image: url("img/post-back.png") !important;
}
/*========= レスポンシブCSS ===============*/
@media screen and (max-width: 767px) { /* スクリーンサイズが767px以下の場合に適用 */
		/*----------ヒーローヘッダ ---------*/
		.aisle-hero-box-1 {
				background-image: url("img/top-hero-h1-back.png");
				margin-top: 19px;
				background-repeat: no-repeat;
				width: 100%;
				height: auto;
				aspect-ratio: 16 / 7; /* 横:縦 = 16:9 の比率 */
				display: flex;
				justify-content: center; /* 横方向 */
				align-items: center; /* 縦方向 */
				padding-left: 0px;
		}
		.aisle-hero-box-1 h1 {
				font-size: 6vw; /* 画面幅の5% */
				padding-top: 0px;
				margin-top: -13px;
		}
		.aisle-hero-box-2 p {
				margin-top: 21px;
				margin-bottom: 21px;
				max-width: 560px;
				background-color: #00ACEA;
				font-size: 16px;
				line-height: 20px;
		}
		/*----------area1 Aisleとは?---------*/
	
	
	
	
	
		/*----------area2　なぜ出現設計なのか？---------*/
		.aisle-blue-back {
				background-color: #00ACEA !important;
				border-top-right-radius: 75px;
				border-bottom-right-radius: 75px;
				margin-right: 0px !important;
				padding-top: 50px;
				padding-left: 10px;
				padding-right: 10px;
		}
		/*----------共通---------*/
		.aisle-left-box-1 {
				border-right: 0px solid #000000;
				border-bottom: 1px solid #000000;
				padding: 20px;
		}
		.aisle-right-box-1 {}
		/*----------エディタボタン用---------*/
		.aisle-block-button {
				width: 90% !important; /* 各ボタンを100%にする */
				margin: 0 auto;
		}
}