/* 
　＝＝ 目次 ＝＝ 

・全ページ共通
　- ヘッダー
　- フッター
・index（HOME）
　--aboutUNISIGHT
　--ourService
　--ourClients
　--information
・Information（お知らせ一覧）
・single（投稿：お知らせ-詳細）
・outline（会社情報）
・recruit（採用情報）
・interview（ユニサイトインタビュー）
・products（製品情報）
・page（固定ページ：製品情報-詳細）
・special（スペシャル）
・contact（お問い合わせ）

*/

section {
	padding-top: 8rem;
	padding-bottom: 10rem;
	display: inline-block;
}

article {
	padding-top: 8rem;
	padding-bottom: 5rem;
	display: inline-block;
}

article h2 {
	font-size: 2rem;
	line-height: 2.5rem;
	margin-bottom: 0.5rem;
}

article img {
	width: 100%;
	height: auto;
}

img,
span {
	display: inline-block;
}

ul {
	padding-left: 0;
	list-style: none;
}

/* ▼ 描画域の指定 */
.w-100per {
	width: 100%;
}

.wrap {
	padding-left: 1rem;
	padding-right: 1rem;
}

.wrap-720 {
	max-width: 720px;
	margin: auto;
	padding-left: 1rem;
	padding-right: 1rem;
}

.wrap-904 {
	max-width: 904px;
	margin: auto;
	padding-left: 1rem;
	padding-right: 1rem;
}

.wrap-1088 {
	max-width: 1088px;
	margin: auto;
	padding-left: 1rem;
	padding-right: 1rem;
}

.bgIMG {
	width: 100%;
	height: 100%;
	display: flex;
	position: fixed;
	margin: 0 auto;
	top: 20px;
	z-index: -1;
	background-repeat: no-repeat;
	background-size: contain;
}

/* ▼ 見出し・文字寄せ・余白 */
h1 img {
	/* サイト名 */
	width: 198px;
	height: 48px;
}

h2 {
	/* ページ名・記事タイトル・製品名 */
	font-size: 2rem;
	line-height: 2rem;
	font-weight: 500;
}

h3 {
	/* 製品名サブタイトル・ページ内カテゴリ名 */
	font-size: 0.8rem;
	font-weight: 500;
}

h4 {
	/* カード系タイトル */
	font-size: 1rem;
	font-weight: 400;
	color: rgba(255, 255, 255, 0.9);
	height: 3rem;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}

h5 {
	/* カード系サブタイトル */
	font-size: 1.5rem;
	font-weight: 500;
}

h6 {
	/* コピー文・強調文字 */
	font-size: 1.5rem;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.9);
}

/* ▼ 文字位置 */
.center {
	text-align: center;
}

.left {
	text-align: left;
}

.right {
	text-align: right;
}

/* ▼ 余白 */
.spacing-line {
	margin-right: 2rem;
}

.spacing-S {
	margin-bottom: 1rem;
}

.spacing-M {
	margin-bottom: 3rem;
}

.spacing-L {
	margin-bottom: 5rem;
}

.spacing-LL {
	margin-bottom: 10rem;
}

/* ▼ 文字サイズ・文字色 */
.font-S {
	font-size: 0.8rem;
}

.default-color {
	color: rgba(255, 255, 255, 0.9);
}

.flagile-color {
	color: rgba(255, 255, 255, 0.8);
}

.accent-color {
	color: rgb(141, 171, 49);
}

/* ▼ リンク・ボタン */
a {
	color: rgb(141, 171, 49);
	text-decoration: none;
}

.more {
	text-align: right;
	font-size: 0.88rem;
	color: rgba(255, 255, 255, 0.7);
}

.btn {
	padding: 1.5rem 3rem;
	display: inline-block;
	border: none;
	letter-spacing: 0.1rem;
	color: rgba(255, 255, 255, 0.9);
	background-color: rgb(141, 171, 49);
}

.btn:hover {
	cursor: pointer;
	background-color: rgb(123, 150, 42);
}

.link-arrow {
	width: 51px;
	height: 7px;
	margin-left: 1rem;
	margin-bottom: 4px;
	display: inline-block;
}

.btn-blue {
	padding: 1.5rem 3rem;
	display: inline-block;
	border: none;
	letter-spacing: 0.1rem;
	color: rgba(255, 255, 255, 0.9);
	background-color: rgb(0, 131, 184);
}

.btn-blue:hover {
	cursor: pointer;
	background-color: rgb(83, 160, 190);
}

/* ページネーション */
.pnavi {
	display: inline-block;
}

.page-numbers {
	margin-right: 20px;
	margin-bottom: 20px;
	padding: 20px 26px;
	display: inline-block;
	font-size: 16px;
	color: rgba(255, 255, 255, 0.9);
	background: rgb(0, 0, 0);
}

.page-numbers:hover {
	cursor: pointer;
	background-color: rgb(83, 160, 190);
}

.current {
	padding: 20px 26px;
	background: rgb(0, 131, 184);
	color: rgba(255, 255, 255, 0.9);
}

.pagination .prev,
.pagination .next {
	background: transparent;
	box-shadow: none;
	color: #69a4db;
}

.pnavi .dots {
	color: rgb(255, 255, 255);
}

/* ＝＝＝＝ HEADER ＝＝＝＝ */
.PC-header {
	display: none;
}

.SP-header {
	width: 100%;
	height: 64px;
	padding: 4px 8%;
	position: fixed;
	display: flex;
	top: 0;
	z-index: 10;
	background-color: rgb(0, 0, 0);
}

.hamburger-menu {
	margin: 0 2.5rem 0 auto;
}

.menu-btn {
	width: 52px;
	height: 52px;
	position: fixed;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 90;
	background-color: rgb(0, 0, 0);
}

.menu-btn span,
.menu-btn span:before,
.menu-btn span:after {
	width: 24px;
	height: 3px;
	display: block;
	position: absolute;
	border-radius: 3px;
	background-color: rgba(255, 255, 255, 0.9);
	content: "";
}

.menu-btn span:before {
	bottom: 8px;
}

.menu-btn span:after {
	top: 8px;
}

#menu-click:checked ~ .menu-btn span {
	background-color: rgba(255, 255, 255, 0);
}

#menu-click:checked ~ .menu-btn span::before {
	bottom: 0;
	transform: rotate(45deg);
}

#menu-click:checked ~ .menu-btn span::after {
	top: 0;
	transform: rotate(-45deg);
}

#menu-click {
	display: none;
}

.menu-content {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 80;
	background-color: rgb(0, 0, 0);
}

.menu-content ul {
	padding: 0.5rem;
}

.menu-content ul li {
	list-style: none;
}

.menu-content ul li a {
	width: 100%;
	padding: 1em;
	display: block;
	position: relative;
	box-sizing: border-box;
	text-decoration: none;
	color: rgba(255, 255, 255, 0.9);
}

.menu-content ul li a::before {
	position: absolute;
	content: "";
	transform: rotate(45deg);
}

.menu-content ul li a:hover {
	color: rgb(141, 171, 49);
}

.menu-content {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 60px;
	left: 100%;
	/*leftの値を変更してメニューを画面外へ*/
	z-index: 80;
	background-color: rgba(0, 0, 0, 0.9);
	transition: all 0.5s;
	/*アニメーション設定*/
}

#menu-click:checked ~ .menu-content {
	left: 0;
	/*メニューを画面内へ*/
}

/* ＝＝＝＝ FOOTER ＝＝＝＝ */
footer {
	width: 100%;
	height: auto;
	padding: 2.5rem 8% 4rem 8%;
	text-align: left;
	background-color: rgb(0, 0, 0);
}

.PC-footer {
	display: none;
}

.SP-footer-logo {
	width: 90%;
	max-width: 373px;
}

.SP-footer-logo img {
	width: 358px;
	height: auto;
}

.SP-footer-co-name {
	font-size: 1.5rem;
	color: rgba(255, 255, 255, 0.9);
}

.SP-footer dl {
	text-align: left;
}

.SP-footer dt {
	font-size: 0.5rem;
	color: rgb(141, 171, 49);
}

.SP-footer dd {
	font-size: 0.9rem;
	letter-spacing: 0.1rem;
	line-height: 1.2rem;
	color: rgba(255, 255, 255, 0.8);
}

.copyRight {
	text-align: center;
	font-size: 0.5rem;
	letter-spacing: 0.2rem;
	line-height: 1rem;
	color: rgba(255, 255, 255, 0.7);
}

/* /////////////////////////////////// index /////////////////////////////////// */
.forPC {
	display: none;
}

.mainVisual {
	width: 100%;
	height: 80vh;
	display: inline-flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-content: center;
	justify-content: center;
	align-items: center;
}

.bgImg_MV {
	width: 100%;
	height: auto;
	position: fixed;
	top: 40px;
	left: 0;
	z-index: -1;
}

.img_MVtext {
	width: 80%;
	max-width: 528px;
	height: auto;
	margin: auto;
}

/* -- aboutUNISIGHT*/
.aboutUnisight {
	width: 100%;
	height: auto;
	padding-top: 4rem;
	padding-bottom: 10rem;
	background: rgb(0, 0, 0) url(../images/index/bg_UNI+SIGHT.svg) no-repeat
		center/contain;
}

.aboutUnisight h6 span {
	margin: 0.5rem;
}

/* -- ourService */
.ourService {
	width: 100%;
	margin: auto;
	padding-top: 4rem;
	padding-bottom: 10rem;
	background: rgba(0, 0, 0, 0.5) 0 0 no-repeat padding-box;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

.ourService h4 {
	font-size: 1.5rem;
	font-weight: 500;
	color: rgb(83, 160, 190);
}

.service-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}

.service-list li {
	max-width: 300px;
	min-height: 400px;
	margin: 8rem 1rem 3rem 1rem;
	padding: 5rem 2rem 1rem 2rem;
	display: inline-block;
	vertical-align: middle;
	font-size: 1rem;
	line-height: 1.85rem;
	color: rgba(255, 255, 255, 0.8);
	background-color: rgb(0, 0, 0);
}

.icon_software {
	width: 140px;
	height: 140px;
	margin: -65% auto 1rem auto;
	background: rgba(0, 0, 0, 0) url(../images/ourService/img_01_software.png)
		no-repeat center/auto;
}

.icon_consul {
	width: 140px;
	height: 140px;
	margin: -65% auto 1rem auto;
	background: rgba(0, 0, 0, 0) url(../images/ourService/img_02_consul.png)
		no-repeat center/auto;
}

.icon_web {
	width: 140px;
	height: 140px;
	margin: -65% auto 1rem auto;
	background: rgba(0, 0, 0, 0) url(../images/ourService/img_03_web.png) no-repeat
		center/auto;
}

.icon_material {
	width: 140px;
	height: 140px;
	margin: -65% auto 1rem auto;
	background: rgba(0, 0, 0, 0) url(../images/ourService/img_04_material.png)
		no-repeat center/auto;
}

.icon_selling {
	width: 140px;
	height: 140px;
	margin: -65% auto 1rem auto;
	background: rgba(0, 0, 0, 0) url(../images/ourService/img_05_selling.png)
		no-repeat center/auto;
}

/* -- ourClients */
.ourClients {
	width: 100%;
	padding-top: 4rem;
	padding-bottom: 10rem;
	background-color: rgb(0, 0, 0);
}

.ourClients ul {
	max-width: 904px;
	margin: auto;
	padding: 0 0.5rem;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.ourClients li {
	margin: 0.5rem;
}

.clients-banner {
	width: 260px;
	height: 100px;
}

/* -- Information */
.index-info {
	width: 100%;
	padding-top: 2rem;
	padding-bottom: 10rem;
	display: inline-block;
	background: rgba(0, 0, 0, 0.5) 0 0 no-repeat padding-box;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

.index-info h2 img {
	max-width: 246px;
	height: auto;
	margin-bottom: -0.8rem;
}

.index-info-lists {
	width: 80%;
	height: auto;
	margin: 1rem 2.5rem 2.5rem 2.5rem;
	padding: 1.5rem 2rem;
	display: inline-block;
	background-color: rgba(0, 0, 0, 0.9);
	text-align: left;
}

.index-info-title {
	width: 90%;
	margin-bottom: 1rem;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}

/* /////////////////////////////////// Information（お知らせ‐一覧） /////////////////////////////////// */
.information {
	width: 100%;
	height: auto;
}

.information ul {
	max-width: 904px;
	margin: auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.information li {
	width: 300px;
	height:auto;
	margin: 2rem;
	text-align: left;
	background-color: rgb(0, 0, 0);
}

.information-img {
	width: 100%;
	height: auto;
	object-fit: cover;
	aspect-ratio: 3 / 2;
	vertical-align: bottom;
	object-position:center;
}

.information-text {
	width: 300px;
	padding: 1rem;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}

/* /////////////////////////////////// page（お知らせ‐詳細） /////////////////////////////////// */
.info-contents {
	margin-bottom: 1rem;
	color: rgba(255, 255, 255, 0.8);
}

/* /////////////////////////////////// OutLine（会社情報） /////////////////////////////////// */
.outline {
	width: 100%;
	height: auto;
}

.outline-wrap {
	margin: auto;
	padding: 3rem 10%;
	text-align: left;
	background-color: rgba(0, 0, 0, 0.7);
}

.outline dl {
	margin: auto;
	padding: 3rem 10%;
	text-align: left;
}

.outline dt {
	font-size: 0.88rem;
	color: rgb(141, 171, 49);
}

.outline dd {
	text-align: left;
	margin-bottom: 2rem;
	letter-spacing: 0.1rem;
	line-height: 1.6rem;
}

/* .outline dd isms-img {
	width: 118px;
	height: auto;
} */

/* /////////////////////////////////// Recruit（採用情報） /////////////////////////////////// */
.recruit {
	width: 100%;
	height: auto;
}

.recruit h3 {
	padding: 0.8em;
	font-size: 1rem;
	font-weight: 500;
	background-color: rgb(123, 150, 49);
	color: rgba(255, 255, 255, 0.9);
	letter-spacing: 0.8rem;
}

.recruit dl {
	margin: auto;
	padding: 3rem 8%;
	text-align: left;
	background-color: rgb(0, 0, 0);
}

.recruit dt {
	font-size: 0.88em;
	color: rgb(141, 171, 49);
}

.recruit dd {
	margin-bottom: 2rem;
	letter-spacing: 0.1rem;
	line-height: 1.6rem;
}

/* /////////////////////////////////// Interview /////////////////////////////////// */
.interview {
	width: 100%;
}

.interview p {
	text-align: justify;
	text-justify: inter-ideograph;
}

.intro-text {
	padding: 1rem 1rem 0 1rem;
}

.intro-name {
	margin-left: 1rem;
	font-size: 2rem;
	font-weight: 500;
}

.question {
	font-size: 1.25rem;
	font-weight: 500;
	color: rgb(141, 171, 49);
}

.answer {
	margin-left: 2rem;
	margin-right: 1rem;
	padding-left: 2rem;
	border-left: 2px solid rgb(141, 171, 49);
	font-weight: 400;
	line-height: 1.8rem;
}

/* /////////////////////////////////// Products（製品情報‐一覧） /////////////////////////////////// */
.products {
	width: 100%;
	height: auto;
}

.products ul {
	max-width: 904px;
	margin: auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.products li {
	width: 300px;
	height:auto;
	margin: 2rem;
	text-align: left;
	background-color: rgb(0, 0, 0);
}

.products h4 {
	height: 1.5rem;
	margin-bottom: 0;
	font-size: 1.5rem;
}

.products h5 {
	margin: 0;
	font-size: 1rem;
	color: rgb(141, 171, 49);
}

.products-img {
	width: 100%;
	height: auto;
	object-fit: cover;
	aspect-ratio: 3 / 2;
	vertical-align: bottom;
	object-position:center;
}

.products-text {
	width: 300px;
	padding: 1rem;
	font-size: 0.8rem;
	line-height: 1.2rem;
}

.products-text p {
	height: 3rem;
	margin: 0.8rem auto;
	color: rgba(255, 255, 255, 0.8);
}

/* /////////////////////////////////// page（製品情報‐詳細） /////////////////////////////////// */
.product-explane {
	margin-bottom: 6rem;
	line-height: 1.8rem;
}

.product-explane h3 {
	margin-bottom: 0.8rem;
	font-size: 1rem;
	color: rgb(141, 171, 49);
}

.product-explane h4 {
	height: auto;
	font-size: 1.5rem;
}

.product-detail {
	padding: 3rem 8%;
	text-align: left;
	background-color: rgb(0, 0, 0);
}

.product-detail dl {
	margin: 2rem auto 10rem auto;
	text-align: left;
}

.product-detail dt {
	font-size: 0.88rem;
	color: rgb(123, 150, 49);
}

.product-detail dd {
	margin-bottom: 2rem;
}

.detail-table {
	border-collapse: collapse;
	font-weight: 400;
	color: rgb(255, 255, 255);
	background-color: rgba(255, 255, 255, 0.2);
}

.detail-table th {
	margin: 0;
	padding: 0.5rem;
	font-weight: 500;
	background-color: rgba(0, 0, 0, 0.2);
}

.detail-table td {
	padding: 1rem 1.5rem;
}

.th-color {
	background-color: rgba(255, 255, 255, 0.1);
}

.detail-list {
	margin-left: 1rem;
	list-style: circle;
}

.detail-caption {
	font-size: 0.88rem;
}

.btn-area {
	padding-bottom: 10rem;
	display: flex;
	flex-direction: column;
}

/* /////////////////////////////////// Special /////////////////////////////////// */
.special {
	width: 100%;
	height: auto;
	padding-bottom: 0;
}

.special-category {
	font-size: 2rem;
	color: rgba(255, 255, 255, 0.9);
}

.special h4 {
	width: 268px;
	height: 4rem;
	font-size: 1.25rem;
	font-weight: 500;
}

.special ul {
	max-width: 904px;
	margin: auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.special li {
	height: 340px;
	margin: 2rem;
	display: inline-block;
	background-color: rgb(0, 0, 0);
}

.movie-text {
	width: 300px;
	padding: 0.5rem 1rem 1rem 1rem;
	text-align: left;
	background-color: rgb(0, 0, 0);
}

.bg-mura {
	width: 100%;
	height: auto;
	padding-top: 4rem;
	padding-bottom: 10rem;
	background: rgb(0, 0, 0) url(../images/special/bg_mura_forPC.svg) no-repeat
		center/contain;
}

.mura {
	max-width: 600px;
	margin: auto;
	padding-left: 1rem;
	padding-right: 1rem;
	text-align: center;
	display: inline-block;
}

.mura h6 {
	margin: 0.8rem auto;
	font-size: 1.5rem;
	letter-spacing: 0.1rem;
	text-align: left;
}

.make-mura {
	margin: 0 auto 2rem auto;
}

.mura-text p {
	text-align: left;
	color: rgba(255, 255, 255, 0.8);
}

/* /////////////////////////////////// Contact（お問い合わせ） /////////////////////////////////// */
.contact {
	width: 100%;
	height: auto;
}

.attention {
	padding: 1rem 3rem 1.5rem 2rem;
	display: inline-block;
	line-height: 1.8rem;
	font-size: 0.88rem;
	background-color: rgba(255, 255, 255, 0.2);
}

.attention ul {
	margin-left: 2rem;
	list-style: inside;
	text-align: left;
}

.attention li {
	text-align: justify;
	text-indent: -1.4rem;
}

form {
	width: 100%;
	display: inline-block;
	text-align: left;
}

::placeholder {
	font-weight: 500;
	color: rgba(0, 0, 0, 0.3);
}

.contact span {
	display: inline;
}

.mandatory {
	margin-left: 1em;
	padding: 0px 6px 1px 6px;
	border-radius: 2px;
	font-size: 0.8rem;
	font-weight: 500;
	color: rgb(255, 255, 255);
	background-color: rgb(247, 122, 38);
}

.inquiry {
	width: 100%;
	height: 3.75rem;
	margin-top: 4px;
	padding: 20px;
	border: 1px solid rgb(112, 112, 112);
	color: rgba(0, 0, 0, 0.9);
}

textarea {
	width: 100%;
	margin-top: 4px;
	padding: 20px;
}

textarea:focus,
.inquiry:focus {
	outline: 0;
	border: 3px solid rgb(141, 171, 49);
}

.submit-btn-area {
	margin-right: 0;
	margin-left: auto;
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
}

/* contact form 7
 * バリデーション表示の調整 */

/* 送信完了時 */
.wpcf7 form.sent .wpcf7-response-output,
.wpcf7 form.wpcf7-response-output {
	padding: 1rem;
	background: rgb(220, 243, 252);
	color: rgb(0, 131, 184);
}

.wpcf7 form .wpcf7-response-output {
	margin: 0;
}

/* 送信失敗時 */
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output {
	padding: 1rem;
	background: rgb(160, 36, 48);
	color: rgb(255, 255, 255);
}

.wpcf7 form.spam .wpcf7-response-output {
	padding: 1rem;
	background: rgb(235, 241, 217);
	color: rgb(77, 82, 61);
}

/* 送信時・入力に問題があった等のメッセージ */
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output {
	padding: 1rem;
	background: rgb(255, 245, 211);
	color: rgb(247, 122, 38);
}

/* 各項目に対してのエラーメッセージ */
span .wpcf7-not-valid-tip {
	color: rgb(247, 122, 38);
	font-weight: 400;
}

/* reCAPTCHA マーク非表示 */
.grecaptcha-badge {
	visibility: hidden;
}