@charset "UTF-8";
/* CSS Document */
/* グローバルメニュー　ここから */
.nav-link-color {
	display: block;
	color: #000000;
	text-decoration: none;
}
.nav-link-color:hover,.nav-link-color:focus {
	color: #ECC64A;
}
/* グローバルメニュー　ここまで */
/* グローバルサブメニューカラー ここから */
.gSubMenu a {
    display: block;
}
.gSub_btn-yellow {
  color: #000000;
  background-color: #ECC64A; /*#0d6efd*/
  border-color: #ECC64A;
  text-decoration: none;
}
.gSub_btn-yellow:hover {
  color: #fff;
  background-color: #000000; /*#0a58ca*/
  border-color: #000000;
}
.gSub_btn-black {
  color: #fff;
  background-color: #000000; /*#0d6efd*/
  border-color: #000000;
  text-decoration: none;
}
.gSub_btn-black:hover {
  color: #000000;
  background-color: #ECC64A; /*#0a58ca*/
  border-color: #ECC64A;
}
/* グローバルサブメニューカラー ここまで */
/* 共通ページヘッダー ここから */
@media screen and (min-width: 768px) {
  .page-header {
    height: 35vw;
    min-height: 300px;
    max-height: 800px;
  }
}
@media screen and (max-width: 767px) {
  .page-header {
    padding-top: 10.6666666667vw;
    height: 54.6666666667vw
  }
}
@media screen and (min-width: 768px) {
  .page-header_in {
    height: 100%;
    padding-top: 150px;
  }
}
@media screen and (max-width: 767px) {
  .page-header_in {
    height: 100%;
    padding-top: 0%;
  }
}
.page-header_title {
  padding-top: 22px;
  padding-bottom: 22px;
  padding-left: 20px;
  padding-right: 20px;
  background-color: rgba(255, 255, 255, 0.75);
  line-height: 0.8;
  letter-spacing: 0rem;
}
/* 共通ページヘッダー ここまで */
/* 共通ページ ここから */
.p-illust {
	background: url("../images/common/p-illust.png") no-repeat 330px -10px;
background-size: auto 170px;
}
/* 共通ページ ここまで */
/* TOP ここから */
#particularity01 {
	height: 8rem;
}
#particularity02 {
	height: 8rem;
}
#particularity03 {
	height: 8rem;
}
/* 親要素に `position: relative;` と `padding-bottom` を設定 */
.video-container {
            position: relative;
            width: 100%;
            padding-bottom: 41.7%; /* 16:9 のアスペクト比 (9 / 16 * 100%) */
            height: 0;
            overflow: hidden; /* 子要素がはみ出さないように */
            background-color: #000; /* 動画が読み込まれるまでの背景色 */
        }
/* 動画自体は親要素の絶対配置の子要素として配置 */
        .video-container video {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: contain; /* または cover, fill */
        }
/* TOP ここまで */
/* サービス案内ヘッダー ここから */
.bg-service {
  background-image: url("../images/service/service_headerImg.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
/* サービスヘッダー ここまで */
/* サービス案内ページ ここから */
.service_menu a {
  display: block;
}
.service_btn-yellow_left {
  color: #3E3E3E;
  background-color: #ECC64A;
  border-color: #ECC64A;
  border-top-left-radius: 0.3rem;
  border-bottom-left-radius: 0.3rem;
  text-decoration: none;
}
.service_btn-yellow_left:hover {
  color: #fff;
  background-color: #3E3E3E;
  border-color: #3E3E3E;
}
.service_btn-yellow {
  color: #3E3E3E;
  background-color: #ECC64A;
  border-color: #ECC64A;
  text-decoration: none;
}
.service_btn-yellow:hover {
  color: #fff;
  background-color: #3E3E3E;
  border-color: #3E3E3E;
}
.service_btn-yellow_right {
  color: #3E3E3E;
  background-color: #ECC64A;
  border-color: #ECC64A;
  border-top-right-radius: 0.3rem;
  border-bottom-right-radius: 0.3rem;
  text-decoration: none;
}
.service_btn-yellow_right:hover {
  color: #fff;
  background-color: #3E3E3E;
  border-color: #3E3E3E;
}
#constructionFlow {
  height: 8rem;
}
#repaintDocument {
  height: 4.8rem;
}
#planPrice {
  height: 8rem;
}
#costGuideline {
	height: 4.8rem;
}
#paintIntroduction {
  height: 8rem;
}
#price63 {
  height: 8rem;
}
#price77 {
  height: 8rem;
}
#price79 {
  height: 8rem;
}
#price85 {
  height: 8rem;
}
#price93 {
  height: 8rem;
}
/* サービス案内ページ 外壁塗料紹介 ブルー囲み文字 ここから */
.enclosedText_blue {
	margin-top: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	margin-right: 5px;
	padding: 4px 15px;
	border-radius: 15px;
	background-color: #2D90E7;
	color: #fff;
	vertical-align: 8%;
}
/* サービス案内ページ 外壁塗料紹介 ブルー囲み文字 ここまで */
/* サービス案内ページ ここまで */

/* 施工事例ヘッダー ここから */
.bg-works {
  background-image: url("../images/works/works_headerImg.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
/* 施工事例ヘッダー ここまで */
/* 施工事例ページ ここから */
.bg-gradation-blue_green {
  background: linear-gradient(to bottom right, #64B7FF, #6EFCC0);
}
.translucent-85 {
  background-color: rgba(255, 255, 255, 0.85);
}
/* 施工事例ページ ここまで */
/* 採用情報ヘッダー ここから */
.bg-recruit {
  background-image: url("../images/recruit/recruit_headerImg.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
/* 採用情報ヘッダー ここまで */
/* 会社案内ヘッダー ここから */

/*.bg-about { 動画ではなく静止画を配置する場合のコード
  background-image: url(" ");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}*/

.bg-about {
  position: relative;
  width: 100%;
  height: 35vw; /* または好きな高さ */
  overflow: hidden;
}
.bg-about video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  transform: translate(-50%, -50%);
  object-fit: cover;
  z-index: 1;
}

.bg-about .content {
  position: relative;
  z-index: 2;
  /* テキストやボタンなどを上に置くならここに */
}
/* 会社案内ヘッダー ここまで */
/* 会社案内ページ ここから */
#accessInfo {
	height: 4.8rem;
}
/* アクセスマップレスポンシブ ここから */
.map {
  position: relative;
  width: 100%;
  padding-top: 40.00%;
  /* 16:9のアスペクト比 */
  height: 0;
}
.map iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
/* アクセスマップレスポンシブ ここまで */
/* 会社案内ページ ここまで */
/* よくある質問ヘッダー ここから */
.bg-faq {
  background-image: url("../images/faq/faq_headerImg.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
/* よくある質問ヘッダー ここまで */
/* お問い合わせヘッダー ここから */
.bg-contact {
  background-image: url("../images/contact/contact_headerImg.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
/* お問い合わせヘッダー ここまで */
/* お問い合わせページ ここから */
.privacyPolicy_TxtBox {
	height: 13.2rem;
	margin: 0 0 2.3rem;
	padding: 1.4rem 1.4rem 1.4rem;
	background-color: white;
	border: 1px solid #ddd;
	line-height: 1.5;
}
/* お問い合わせページ ここまで */