@charset "UTF-8";
/*
Theme Name: MY THEME 
Author: Aini-ku
Description: Aini-kuオリジナルテーマ
Version: 1.10(2023.2 最新版)
*/


/* ===========================================
 メモ（memo）
 * ======================================== */
/*background-image: url("images/arrow_icon.png");*/

/* ===========================================
 共通（common）
 * ======================================== */
body {
	margin: 0;
	font-size: 16px;
}

img {
	max-width: 100%;
	height: auto;
}

:root {
	--main-gradient: linear-gradient(to right, #FF6151, rgba(229, 141, 51, 1));
}


/* 枠組み（container）
------------------------------------------ */
.wrapper {
	width: 100%;
	max-width: 100vw;
}

.container {
	width: 70%;
	margin: auto;
	padding: 30px 10px;
}

@media screen and (max-width:520px) {
	.container {
		width: 95%;
		margin: auto;
	}

}

/* レスポンシブ（responsive）
------------------------------------------ */
.pc {
	display: block !important;
}

.sp {
	display: none !important;
}

@media screen and (max-width:520px) {
	.sp {
		display: block !important;
	}

	.pc {
		display: none !important;
	}
}


/* FLEX（flex）
------------------------------------------ */
.flex {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}

.flex-between {
	justify-content: space-between;
}

.flex-center {
	justify-content: center;
}

.flex-start {
	justify-content: start;
}

.flex-align-start {
	align-items: start;
}

.flex-item10 {
	width: 10%;
}

.flex-item20 {
	width: 20%;
}

.flex-item25 {
	width: 25%;
}

.flex-item30 {
	width: 33%;
}

.flex-item45 {
	width: 45%;
}

.flex-item60 {
	width: 60%;
}

.flex-item70 {
	width: 70%;
}

@media screen and (max-width:520px) {

	.flex-item10,
	.flex-item20,
	.flex-item25,
	.flex-item30,
	.flex-item45,
	.flex-item60,
	.flex-item70 {
		width: 100%;
	}
}

/* POSITION（position）
------------------------------------------ */
.center {
	text-align: center;
}

.left {
	text-align: left;
}

.right {
	text-align: right;
}

/* WIDTH（width）
------------------------------------------ */
.w-80 {
	width: 80%;
}

.w-90 {
	width: 90%;
}

/* ===========================================
 アニメーション（anime）
 * ======================================== */
.fade {
	opacity: 0;
}

.fadeAnime {
	animation-name: fadeAnime;
	animation-duration: 2s;
	animation-fill-mode: forwards;
	opacity: 1;
}

@keyframes fadeAnime {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

.fadeDown {
	opacity: 0;
}

.fadeDownAnime {
	animation-name: fadeDownAnime;
	animation-duration: 2s;
	animation-fill-mode: forwards;
}

@keyframes fadeDownAnime {
	from {
		opacity: 0;
		transform: translateY(-100px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.fadeUp {
	opacity: 0;
}

.fadeUpAnime {
	animation-name: fadeUPAnime;
	animation-duration: 2s;
	animation-fill-mode: forwards;
	opacity: 0;
}

@keyframes fadeUPAnime {
	from {
		opacity: 0;
		transform: translateY(20px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/*左から右にフェードイン*/
.fadeIn {
	opacity: 0;
}

.fadeInAnime {
	animation-name: fadeInAnime;
	animation-duration: 2s;
	animation-fill-mode: forwards;
	opacity: 0;
}

@keyframes fadeInAnime {
	0% {
		opacity: 0;
		transform: translateX(-20px);
	}

	100% {
		opacity: 1;
		transform: translateX(0);
	}
}

/*右から左にフェードイン*/
.fadeIn2 {
	animation-name: fadeInAnime2;
	animation-duration: 2s;
	animation-fill-mode: forwards;
	opacity: 0;
}

@keyframes fadeInAnime2 {
	0% {
		opacity: 0;
		transform: translateX(20px);
	}

	100% {
		opacity: 1;
		transform: translateX(0);
	}
}

/*拡大フェードイン*/
.fadeScale {
	animation-name: fadeScaleAnime;
	animation-duration: 2s;
	animation-fill-mode: forwards;
	opacity: 0;
}

@keyframes fadeScaleAnime {
	0% {
		opacity: 0;
		transform: scale(0.9);
	}

	100% {
		opacity: 1;
		transform: scale(1);
	}
}

/*マーカー（蛍光ペン）アニメーション*/
.point {
	background: linear-gradient(transparent 70%, #FFF34D 70%);
	display: inline-block;
	background-repeat: no-repeat;
	background-size: 0% 100%;
	transition: background-size 1.5s;
}

.point.on {
	/* 横方向を100%にして、マーカーを引く */
	background-size: 100% 100%;
}


/* ===========================================
 ヘッダー（header）
 * ======================================== */
.header {
	width: 100%;
	height: 10vh;
	max-height: 150px;
	background: #fff;
	padding: 0 10%;
}

.sp .header_logo {
	background: #fff;
	padding: 10px;
}

.sp .header_logo img {
	width: 40%;
}

/* ===========================================
  LP（front-page.php）
 * ======================================== */
/*ページ内の共通*/
.lp1 .margin-top {
	margin-top: 7% !important;
}

.lp1 h2 {
	margin-bottom: 25px;
}

.lp1_image_container {
	background-image: url('images/LP1/fv_bg.jpg');
	background-repeat: no-repeat;
	background-size: cover;
	padding: 5%;
}

.lp1_image_container .lp1_title {
	width: 70vw;
}

.lp1_cta {
	width: 100%;
	margin-top: 100px;
}

.lp1_cta .midashi {
	font-size: 18px;
	font-weight: bold;
	line-height: 1.5em;
}

.lp1_cta .button_box {
	max-width: 80%;
	margin: 20px auto 0 auto;
}

.lp1_cta .button {
	max-width: 480px;
	border: solid 1px black;
	padding: 9px 15px;
	background: #fff;
}

.lp1_cta .button .title {
	font-size: 22px;
	margin-bottom: 3px;
	font-weight: bold;
}

.lp1_cta .button .tel,
.lp1_cta .button .mail {
	font-size: 35px;
	font-weight: bold;
	background: var(--main-gradient);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	/* 一部ブラウザ用 */
	color: transparent;
	margin-bottom: 0;
	line-height: 1.2em;
}

.lp1_cta .button .opening_hours {
	font-size: 0.8em;
	font-weight: bold;
	margin-top: 0;
}

/*実績*/
.lp1 .achievements {
	background: #4C97D8;
	padding: 7%;
}

.lp1 .achievements .title {
	width: 100%;
	max-width: 600px;
}

.lp1 .achievements .subtitle {
	font-size: 22px;
	font-weight: bold;
	color: #fff;
}

.lp1 .achievements .image_box {
	max-width: 850px;
	margin: 6% auto 0 auto;
}

.lp1 .achievements .image_box img {
	width: 92%;
}

/*サービス概要*/
.lp1 .service {
	background: url("images/LP1/dot_bg.jpg");
	background-size: contain;
	background-repeat: repeat;
	padding: 7%;
}

.lp1 .service .subtitle {
	display: inline-block;
	background-color: black;
	color: #fff;
	padding: 3px 15px;
	margin: 0 auto 15px auto;
	font-size: 1.5em;
	font-weight: bold;
}

.lp1 .service h2 {
	font-size: 2.0em;
	font-weight: bold;
	line-height: 1.3em;
	color: #0957BB;
}

.lp1 .service h2 .orange {
	font-size: 2.5em;
	background: var(--main-gradient);
	-webkit-background-clip: text;
	/* Safari/Chrome */
	-webkit-text-fill-color: transparent;
	/* Safari/Chrome */
	background-clip: text;
	/* 対応ブラウザ */
	color: transparent;
	/* 念のため */
	margin: 0 7px;
}

.lp1 .service .setsumei {
	font-weight: bold;
	line-height: 1.7em;
	margin: 5% auto;
}

.lp1 .service .setsumei .blue {
	color: #0957BB;
	text-decoration: underline;
}

.lp1 .service .main_image {
	max-width: 1000px;
	margin: auto;
}

.lp1 .service .image {
	margin: 3% auto 15px auto;
	max-width: 1000px;
}

.lp1 .service .equipment {
	max-width: 1000px;
	margin: auto;
	font-weight: bold;
	line-height: 1.7em;
}

/*事例*/
.lp1 .case {
	background: #F2F2F2;
	padding: 7.6% 7.6% 0 7.6%;
}

.lp1 .case .subtitle {
	display: inline-block;
	background-color: black;
	color: #fff;
	padding: 3px 15px;
	margin: auto;
	font-size: 1.5em;
	font-weight: bold;
}

.lp1 .case h2 {
	font-size: 2.0em;
	font-weight: bold;
	line-height: 1.8em;
	color: #0957BB;
	margin: 5% auto 5% auto;
}

.lp1 .case h2 .orange {
	font-size: 2.2em;
	background: var(--main-gradient);
	-webkit-background-clip: text;
	/* Safari/Chrome */
	-webkit-text-fill-color: transparent;
	/* Safari/Chrome */
	background-clip: text;
	/* 対応ブラウザ */
	color: transparent;
	/* 念のため */
	margin: 30px 7px 0 7px;
}

.lp1 .case .case_box {
	position: relative;
	background: white;
	padding: 5% 5% 0 5%;
	box-shadow:
		-10px 0 10px -6px rgba(0, 0, 0, 0.15),
		/* 左 */
		10px 0 10px -6px rgba(0, 0, 0, 0.15),
		/* 右 */
		0 -10px 10px -6px rgba(0, 0, 0, 0.15);
	/* 上 */
}

.lp1 .case .case_box h3 {
	color: #0957BB;
	font-weight: bold;
	padding-left: 6%;
	line-height: 1.5em;
}

.lp1 .case .case_box .setsumei {
	font-weight: bold;
	margin-top: 20px;
	padding-left: 6%;
}

/*強み*/
.lp1 .strengths {
	background: url("images/LP1/dot_bg.jpg");
	background-size: contain;
	background-repeat: repeat;
	padding: 7%;
}

.lp1 .strengths .subtitle {
	display: inline-block;
	background-color: black;
	color: #fff;
	padding: 3px 15px;
	margin: auto;
	font-size: 1.5em;
	font-weight: bold;
}

.lp1 .strengths h2 {
	font-size: 2.0em;
	font-weight: bold;
	line-height: 1.8em;
	color: #0957BB;
	margin: 5% auto 5% auto;
}

.lp1 .strengths h2 .orange {
	font-size: 2.5em;
	background: var(--main-gradient);
	-webkit-background-clip: text;
	/* Safari/Chrome */
	-webkit-text-fill-color: transparent;
	/* Safari/Chrome */
	background-clip: text;
	/* 対応ブラウザ */
	color: transparent;
	/* 念のため */
	margin: 0 5px;
}

.lp1 .strengths h2 .orange .mini {
	font-size: 0.8em;
	margin: 0 5px;
}

.lp1 .strengths .strengths_box {
	background: #fff;
	border: solid 0.5px grey;
	padding: 5%;
}

.lp1 .strengths .strengths_box h3 {
	color: #0957BB;
	font-weight: bold;
	font-size: 1.3em;
	margin-top: 0;
	line-height: 1.9em;
}

.lp1 .strengths .strengths_box .setsumei {
	font-weight: bold;
	margin-top: 20px;
}

.lp1 .strengths .strengths_box .orange {
	font-size: 1.5em;
	background: var(--main-gradient);
	-webkit-background-clip: text;
	/* Safari/Chrome */
	-webkit-text-fill-color: transparent;
	/* Safari/Chrome */
	background-clip: text;
	/* 対応ブラウザ */
	color: transparent;
	/* 念のため */
	margin-right: 5px;
}

.lp1 .strengths .strengths_box .image {
	width: 90%;
}

.lp1 .strengths .map {
	width: 100%;
	max-width: 500px;
	margin-top: 50px;
}

/*技術力*/
.lp1 .technic {
	background: #f2f2f2;
	padding: 7%;
}

.lp1 .technic h2 {
	font-size: 4.0em;
	font-weight: bold;
	line-height: 1.8em;
	color: #0957BB;
}

.lp1 .technic .subtitle img {
	max-width: 500px;
}

.lp1 .technic h3 {
	font-weight: bold;
	font-size: 1.7em;
	margin-top: 0;
	line-height: 1.5em;
}

.lp1 .technic h3 .mini {
	font-size: 0.6em;
}

.lp1 .technic h3 .orange {
	font-size: 1.5em;
	background: var(--main-gradient);
	color: #fff;
	padding: 0.3em 0.2em;
	/* 背景が見えるように余白を調整 */
	display: inline-block;
	margin-right: 5px;
}

.lp1 .technic .flex {
	margin-top: 6%;
	padding: 0 2%;
}

.lp1 .technic .setsumei {
	font-weight: bold;
	margin-top: 20px;
}

.technic .technic_achievements {
	background: #fff;
	padding: 5%;
	margin: 5% auto;
}

.lp1 .technic .technic_achievements .subtitle {
	display: inline-block;
	background-color: black;
	color: #fff;
	padding: 3px 15px;
	margin: auto;
	font-size: 1.5em;
	font-weight: bold;
}

.lp1 .technic .technic_achievements h2 {
	font-size: 2.0em;
}

.lp1 .technic .technic_achievements .image_box {
	width: 80%;
	margin: auto;
}

/*お客様の声*/
.lp1 .voice {
	background: #F3F5FC;
	padding: 7%;
}

.lp1 .voice .subtitle {
	display: inline-block;
	background-color: black;
	color: #fff;
	padding: 3px 15px;
	margin: auto;
	font-size: 1.5em;
	font-weight: bold;
}

.lp1 .voice h2 {
	font-size: 2.2em;
	font-weight: bold;
	line-height: 1.8em;
	color: #0957BB;
}

.lp1 .voice h2 .orange {
	font-size: 1.5em;
	background: var(--main-gradient);
	-webkit-background-clip: text;
	/* Safari/Chrome */
	-webkit-text-fill-color: transparent;
	/* Safari/Chrome */
	background-clip: text;
	/* 対応ブラウザ */
	color: transparent;
	/* 念のため */
}

.lp1 .voice .voice_box {
	width: 85%;
	margin: 5% auto 0 auto;
	box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
}

.lp1 .voice .voice_box .q {
	background: #2669BA;
	padding: 20px;
	color: #fff;
	font-size: 1.3em;
	font-weight: bold;
	margin-bottom: 0;
}

.lp1 .voice .voice_box .a {
	background: #fff;
	font-size: 1.1em;
	font-weight: bold;
	padding: 20px;
}

.lp1 .voice .voice_box .a .orange {
	color: #F7704D;
}

.lp1 .voice .voice_name {
	display: flex;
	align-items: center;
	gap: 0.5em;
	padding-left: 8%;
	font-size: 1.2em;
	font-weight: bold;
	margin-top: 20px;
}

.lp1 .voice .voice_name img {
	width: 60px;
	height: auto;
}

/*メッセージ*/
.lp1 .message {
	background: url("images/LP1/dot_bg.jpg");
	background-size: contain;
	background-repeat: repeat;
	padding: 7%;
}

.lp1 .message h2 {
	margin: 7% auto;
}

.lp1 .message .message_title {
	font-size: 1.5em;
	font-weight: bold;
	background: var(--main-gradient);
	color: #fff;
	padding: 0.3em 1em;
	/* 背景が見えるように余白を調整 */
	display: inline-block;
}

.lp1 .message .text {
	font-weight: bold;
	margin: 5% auto 0 auto;
	line-height: 2.5em;
}

/*よくあるご質問*/
.lp1 .qa {
	background: #F3F5FC;
	padding: 7%;
}

.lp1 .qa_title {
	position: relative;
	text-align: center;
	background: #F2F7FB;
	padding: 2em 1em;
}

.lp1 .qa_title .bg {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 120px;
	font-weight: bold;
	color: rgb(231, 240, 251);
	white-space: nowrap;
	pointer-events: none;
}

.lp1 .qa_title h2 {
	position: relative;
	font-size: 30px;
	font-weight: bold;
	color: black;
}

.lp1 .qa .qa_box {
	width: 85%;
	margin: 5% auto 0 auto;
	box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
}

.lp1 .qa .qa_box .q {
	background: linear-gradient(90deg,
			#2f3c79 0%,
			#3e5f9c 40%,
			#25b4b1 100%);
	padding: 20px;
	color: #fff;
	font-weight: bold;
	margin-bottom: 0;
}

.lp1 .qa .qa_box .a {
	background: #fff;
	font-weight: bold;
	padding: 20px;
}

.lp1 .qa .qa_box .circle {
	display: inline-block;
	width: 2em;
	height: 2em;
	line-height: 2em;
	text-align: center;
	border: 2px solid #fff;
	border-radius: 50%;
	font-weight: bold;
	margin-right: 10px;
}

/*最後のCTA*/
.lp1 .final_cta {
	background: #4A98D8;
	padding: 7%;
}

.lp1 .final_cta .final_cta_box {
	background: #fff;
	padding: 5%;
}

.lp1 .final_cta .final_cta_box h2 {
	font-weight: bold;
	line-height: 2.0em;
}

.lp1 .final_cta .final_cta_box h2 .orange {
	font-size: 1.5em;
	background: var(--main-gradient);
	-webkit-background-clip: text;
	/* Safari/Chrome */
	-webkit-text-fill-color: transparent;
	/* Safari/Chrome */
	background-clip: text;
	/* 対応ブラウザ */
	color: transparent;
	/* 念のため */
}

.lp1 .final_cta .lp1_cta {
	margin-top: 50px;
}



@media screen and (max-width:520px) {
	.lp1_image_container .lp1_title {
		width: 98%;
		margin: 50px auto 0 auto;
	}

	.lp1_cta .midashi {
		font-size: 17px;
	}

	.lp1_cta {
		margin-top: 50px;
	}

	.lp1_cta .button_box {
		max-width: 95%;
	}

	.lp1_cta .button {
		padding: 5px 10px;
		margin-top: 3px;
	}

	.lp1_cta .button .title {
		font-size: 16px;
	}

	.lp1_cta .button .tel,
	.lp1_cta .button .mail {
		font-size: 20px;
	}

	.lp1 .achievements {
		padding: 7% 5%;
	}

	.lp1 .achievements .subtitle {
		font-size: 20px;
		margin-top: 20px;
	}

	.lp1 .achievements .image_box img {
		width: 95%;
		margin-top: 6px;
	}

	.lp1 .service {
		padding: 7% 5%;
	}

	.lp1 .service .subtitle {
		font-size: 1.2em;
	}

	.lp1 .service h2 {
		font-size: 1.5em;
		line-height: 1.5em;
	}

	.lp1 .service h2 .orange {
		font-size: 1.5em;
	}

	.lp1 .service .image img {
		margin-top: 10px;
	}

	.lp1 .case {
		padding: 7% 5%;
	}

	.lp1 .case .subtitle {
		font-size: 1.2em;
	}

	.lp1 .case h2 {
		font-size: 1.2em;
	}

	.lp1 .case h2 .orange {
		font-size: 1.5em;
	}

	.lp1 .case .case_box .second {
		margin-top: 20px;
	}

	.lp1 .strengths {
		padding: 7% 5%;
	}

	.lp1 .strengths .subtitle {
		font-size: 1.2em;
	}

	.lp1 .strengths h2 {
		font-size: 1.0em;
	}

	.lp1 .strengths h2 .orange {
		font-size: 1.7em;
	}

	.lp1 .strengths .strengths_box .image {
		width: 100%;
		margin-bottom: 50px;
	}

	.lp1 .strengths .strengths_box .orange {
		font-size: 1.2em;
	}
}





/*フォーム*/
.lp1 .form {
	background: url("images/LP1/dot_bg.jpg");
	background-size: cover;
	background-repeat: no-repeat;
	padding: 7%;
}

.lp1 .form h2 {
	font-weight: bold;
	line-height: 1.5em;
}

.lp1 .form h2 .mini {
	font-size: 0.7em;
}

.lp1 .form .image_box {
	width: 80%;
	margin: 3% auto;
}

.lp1 .form .form_box {
	background: #F2F2F2;
	padding: 5%;
	margin: 7% auto;
}

.lp1 .form .form_box .title {
	font-weight: bold;
	font-size: 1.2em;
	line-height: 1.8em;
}

/*MW WP FORM*/
.cform {
	width: 65%;
	margin: 8% auto;
}

.cform th {
	width: 35%;
	padding: 20px 0 20px 10px;
	font-size: 16px;
	vertical-align: top;
}

.form input:not([type="checkbox"], [type="submit"]),
.form textarea {
	border: none;
	width: 100%;
	height: 100%;
	outline: none;
	background: #fff;
	border: solid 1px black;
	padding: 10px;
}

.form textarea {
	height: 200px;
}

.form textarea::placeholder {
	padding-top: 10%;
}

.policy {
	width: 65%;
	height: 200px;
	overflow-y: scroll;
	border: solid 0.5px grey;
	padding: 10px 6px;
	margin: auto;
}

.policy .policy_title {
	font-size: 20px;
	margin-bottom: 20px;
}

.policy_check {
	text-align: center;
	margin: 20px auto;
}


.required-srt {
	background-color: red;
	color: #FFF;
	font-size: 12px;
	padding: 5px;
	margin-left: 30px;
}

.any-srt {
	background: #0276C3;
	color: #FFF;
	font-size: 12px;
	padding: 5px;
	margin-left: 30px;
}

.submit_div {
	text-align: center;
}

.submit_div input {
	width: 350px;
	max-width: 100%;
	background: #fff;
	color: black;
	margin-top: 20px;
	margin-bottom: 10%;
	padding: 2% 5%;
	font-size: 15px;
	font-weight: bold;
	border: solid 1px black;
	border-radius: 100px;
}

.submit_div input:hover {
	opacity: 0.7;
}

.form input[type="checkbox"] {
	position: relative;
	width: 16px;
	height: 16px;
	border: 1px solid #000;
	vertical-align: -5px;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

.form input[type="checkbox"] {
	border-radius: 2px;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	border: solid 1px #fff;
}

.form input[type="checkbox"]:checked:before {
	position: absolute;
	top: 1px;
	left: 4px;
	transform: rotate(50deg);
	width: 4px;
	height: 8px;
	border-right: 2px solid black;
	border-bottom: 2px solid black;
	content: '';
}

/*タブレット横向き以下*/
@media screen and (max-width: 1199px) {
	.cform {
		width: 70%;
		table-layout: fixed;
		border-collapse: collapse;
	}

	.cform th,
	.cform td {
		padding: 10px;
		vertical-align: top;
	}

	.cform th {
		width: 40%;
		font-weight: bold;
		text-align: left;
		white-space: nowrap;
	}

	.contact-page .cform td {
		width: 60%;
	}

}

/*タブレット縦向き以下*/
@media screen and (max-width:991px) {
	.cform {
		width: 90%;
	}

	.policy {
		width: 90%;
	}
}

@media screen and (max-width:767px) {
	.policy .policy_title {
		font-size: 18px;
	}

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

	.cform th {
		text-align: center;
	}

	.cform td {
		height: 50px;
	}

	.cform td.otoiawase {
		height: 200px;
	}

	.form input,
	.form textarea {
		width: 100%;
	}

	.submit_div input {
		width: 80%;
	}
}




/* 投稿一覧（front-post）
------------------------------------------ */
.post .post_item {
	border: solid 1px grey;
	padding: 10px;
}

.post .post_date {
	text-align: right;
}

.post h4 {
	text-align: center;
}

/* ===========================================
 フッター（footer）
 * ======================================== */
.footer {
	width: 100%;
	padding: 20px;
	background: #fffaf0;
	text-align: center;
}