/*
Theme Name: sueyoshi
Theme URI: 
Author: base
Author URI: 
Description: スエヨシACS用 WordPress Theme
Version: 1.1
*/

/*--------------------------------------------------------------
This is main CSS file that contains custom style rules used in this template
--------------------------------------------------------------*/

/*------------------------------------*\
    Table of contents
\*------------------------------------*/

/*------------------------------------------------

CSS STRUCTURE:

1. VARIABLES

2. GENERAL TYPOGRAPHY
  2.1 General Styles
  2.2 Background Color
  2.3 Section
    - Section Paddings
    - Section Margins
    - Section Title
  2.4 Buttons
    - Primary Buttons
    - Button Hover Effect

3. CONTENT ELEMENTS
  - Dropdown
  - Breadcrumb
  - Pagination
  - Accordion
  - Form
  - Swiper
  - Modal Video

4. SITE STRUCTURE
  4.1 Header
  4.2 Brand Section
  4.3 About Section
  4.4 Services Section
  4.5 Project Section
  4.6 CTA Section

5. PAGES STYLE
  5.1 Projects Page
  5.2 Pricing page 
  5.3 Reviews page
  5.5 company page
    

  
/*--------------------------------------------------------------
/** 1. VARIABLES
--------------------------------------------------------------*/
:root {
  --primary-color: #e6383b;
  --secondary-color: #05213C;
  --black-color: #292929;
  --light-black-color: #343536;
  --dark-color: #313131;
  --body-color: #5A5A5A;
  --gray-color: #777F81;
  --light-color: #f3f6f8;

  /* Bootstrap Theme Color  */
  --bs-gray-100: #F6F6F6;
  --bs-gray-300: #DCDCDC;
  --bs-primary-text-emphasis: var(--primary-color);
  --bs-body-color-rgb: 90, 90, 90;
  --bs-light-rgb: rgba(255, 255, 255, 1);
  --bs-dark-rgb: 41, 41, 41;
  --bs-primary-rgb: 178, 142, 113;
}

/* Fonts */
:root {
  --heading-font: "Poppins", sans-serif;
  --body-font: "Poppins", sans-serif;
}

/*----------------------------------------------*/
/* 2 GENERAL TYPOGRAPHY
/*----------------------------------------------*/

/* 2.1 General Styles
/*----------------------------------------------*/
*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  box-sizing: border-box;
}

body {
  background-color: var(--light-color);
  font-family: var(--body-font);
  font-size: 16px;
  font-weight: 400;
  line-height: 164%;
  letter-spacing: 0.32px;
  color: var(--body-color);
  margin: 0;
}

p {
  color: var(--body-color);
}

a {
  color: inherit;
  text-decoration: none;
  transition: 0.3s ease-in-out;
}

a:hover {
  color: var(--primary-color);
}

.text-light {
  color: var(--light-color) !important;
}

.text-primary {
  color: var(--primary-color) !important;
}

.text-black {
  color: var(--black-color) !important;
}


a img{
  transition: 0.5s;
}

a img:hover{
  opacity: 0.7;
  transition: 0.5s;
}

.red{
  color: #b82a2c;
}
.bold{
  font-weight: bold;
}
.text-link{
  background-color: #f4d4d4;
  padding: 3px 7px;
  color: #000;
}
.text-link:hover{
  opacity: 70%;
  color: #000;
}

/* 2.2 Background Color
/*----------------------------------------------*/
.bg-light {
  background-color: var(--light-color) !important;
}

.bg-primary {
  background-color: var(--primary-color) !important;
}

.bg-secondary {
  background-color: var(--secondary-color) !important;
}

.bg-gray {
  background-color: var(--bs-gray-100) !important;
}


/*--------------------------------------------------------------
/** 2.3 Section
--------------------------------------------------------------*/
/* - Section Padding
--------------------------------------------------------------*/
.padding-xs {
  padding-top: 4em;
  padding-bottom: 4em;
}

.padding-small {
  padding-top: 8em;
  padding-bottom: 8em;
}

.padding-medium {
  padding-top: 10em;
  padding-bottom: 10em;
}

.padding-large {
  padding-top: 12em;
  padding-bottom: 12em;
}

.padding-top {
  padding-top: 8em;
}

.padding-top2rem{
  padding-top: 2rem;
}

.padding-top4rem{
  padding-top: 4rem;
}

@media only screen and (max-width: 990px) {
  .padding-small {
    padding-top: 6em;
    padding-bottom: 6em;
  }
}

/* - Section Margin
--------------------------------------------------------------*/
.margin-small {
  margin-top: 8.125em;
  margin-bottom: 8.125em;
}

.margin-medium {
  margin-top: 10em;
  margin-bottom: 10em;
}

.margin-large {
  margin-top: 12em;
  margin-bottom: 12em;
}

.margin-top-1rem {
  margin-top: 1em;
}

.margin-top-2rem {
  margin-top: 2em;
}

.margin-top-4rem {
  margin-top: 4em;
}

.margin-top-6 {
  margin-top: 6em;
}

.margin-bot-1rem {
  margin-bottom: 1em;
}

.margin-bot-2rem {
  margin-bottom: 2em;
}

.margin-bot-4rem {
  margin-bottom: 4em;
}

.margin-bot-6rem {
  margin-bottom: 6em;
}



/* - Section Title
--------------------------------------------------------------*/
h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--dark-color);
  font-family: var(--heading-font);
  text-transform: capitalize;
  font-weight: 600;
  letter-spacing: 0.84px;
  line-height: 115%;
}

h6 {
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.3rem;
}

/* - Content width
--------------------------------------------------------------*/
.container-md {
  max-width: 1465px;
}

.container-lg {
  max-width: 1750px;
}

/* Animation */
@media (min-width: 200px) {
  .animate {
    animation-duration: 0.3s;
    -webkit-animation-duration: 0.3s;
    animation-fill-mode: both;
    -webkit-animation-fill-mode: both;
  }
}

/* Animate Slide */
@keyframes slide {
  0% {
    transform: translateY(1rem);
    opacity: 0;
  }

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

  0% {
    transform: translateY(1rem);
    opacity: 0;
  }
}

@-webkit-keyframes slide {
  0% {
    -webkit-transform: transform;
    -webkit-opacity: 0;
  }

  100% {
    -webkit-transform: translateY(0);
    -webkit-opacity: 1;
  }

  0% {
    -webkit-transform: translateY(1rem);
    -webkit-opacity: 0;
  }
}

.slide {
  -webkit-animation-name: slide;
  animation-name: slide;
}

/*--------------------------------------------------------------
/** 2.4 Buttons
--------------------------------------------------------------*/

.btn {
  --bs-btn-padding-x: 2rem;
  --bs-btn-padding-y: 1rem;
  --bs-btn-font-size: 1rem;
  --bs-btn-font-weight: 500;
  text-transform: uppercase;
  border-radius: 0px;
  transition: all 0.5s ease-in-out;
}

/* - Primary Buttons
--------------------------------------------------------------*/
.btn-primary {
  --bs-btn-color: var(--light-color);
  --bs-btn-bg: var(--primary-color);
  --bs-btn-border-color: var(--primary-color);
  --bs-btn-hover-color: var(--light-color);
  --bs-btn-hover-bg: var(--primary-color);
  --bs-btn-hover-border-color: var(--primary-color);
  --bs-btn-focus-shadow-rgb: 49, 132, 253;
  --bs-btn-active-color: var(--light-color);
  --bs-btn-active-bg: var(--primary-color);
  --bs-btn-active-border-color: var(--primary-color);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: var(--light-color);
  --bs-btn-disabled-bg: var(--primary-color);
  --bs-btn-disabled-border-color: var(--primary-color);
}

/* - Button Hover Effect
--------------------------------------------------------------*/
.btn-slide.btn-bg {
  background-color: var(--light-color);
}

.btn-slide {
  position: relative;
  display: inline-block;
  border: none;
  cursor: pointer;
  background-color: var(--secondary-color);
}

.btn-slide.hover-slide-right::before {
  top: 0;
  bottom: 0;
  left: 0;
  height: 100%;
  width: 3%;
  position: absolute;
  content: "";
  background-color: var(--primary-color);
  transition: 0.3s ease-in-out;
}

.btn-slide span {
  position: relative;
  display: inline-block;
  top: 0;
  left: 0;
  width: 100%;
  transition: 0.3s;
  font-weight: 600;
}

.btn-slide.hover-slide-right:hover::before {
  width: 100%;
}

.btn-slide.hover-slide-right:hover span {
  color: var(--light-color);
}

/*--------------------------------------------------------------
/** 3.CONTENT ELEMENTS
--------------------------------------------------------------*/

/* Dropdown
------------------------------------------------------------- */
.dropdown-item {
  text-transform: uppercase;
  font-weight: 500;
  color: var(--dark-color);
  font-family: var(--heading-font);
}

.dropdown-item.active,
.dropdown-item:hover,
.dropdown-item:active {
  color: var(--dark-color);
  background-color: var(--bs-gray-300);
}

.dropdown-toggle::after {
  border: none;
  margin-left: 0em;
  vertical-align: 0em;
}


/* Breadcrumb
------------------------------------------------------------- */
.breadcrumb-item+.breadcrumb-item::before {
  color: var(--bs-light);
  position: relative;
}


/* Pagination
------------------------------------------------------------- */
.pagination {
  --bs-pagination-color: var(--black-color);
  --bs-pagination-hover-color: #fff;
  --bs-pagination-hover-bg: var(--primary-color);
  --bs-pagination-hover-border-color: var(--primary-color);
  --bs-pagination-focus-color: #fff;
  --bs-pagination-focus-bg: var(--primary-color);
  --bs-pagination-focus-box-shadow: none;
  --bs-pagination-active-bg: var(--primary-color);
  --bs-pagination-active-border-color: var(--primary-color);
}


/* Accordion
------------------------------------------------------------- */
.accordion {
  --bs-accordion-btn-icon: url('https://api.iconify.design/ion/caret-down.svg?color=%23F2B821&width=30');
  --bs-accordion-btn-active-icon: url('https://api.iconify.design/ion/caret-down.svg?color=%23F2B821&width=30');
  --bs-accordion-border-radius: 0px;
}

.accordion-button:focus {
  box-shadow: none;
}

.accordion-button:not(.collapsed) {
  background-color: transparent;
  box-shadow: none;
}


/* Form
------------------------------------------------------------- */
.form-control:focus {
  border: 1px solid #acacac;
  box-shadow: none;
}


/* Swiper
------------------------------------------------------------- */
.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 8px);
  width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 12px));
  height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 12px));
}

.swiper-pagination-bullet.swiper-pagination-bullet-active {
  background: var(--dark-color);
}


/* Modal Video
------------------------------------------------------------- */
.modal-dialog {
  max-width: 800px;
  margin: auto;
  height: 100vh;
  display: flex;
  align-items: center;
}

.modal-content {
  padding: 0;
  background-color: #f5f3ef;
  border: none;
  border-radius: 0
}



/* Subtitle
------------------------------------------------------------- */


/* アクセントカラー */
.cstm-box-corner-accent {
  margin: 2em auto; /* 外側余白 */
  padding: 2em; /* 内側余白 */
  border: 3px solid #c1c1c1; /* ベースの実線 */
  position: relative; /* 配置（基準） */
  z-index: 0; /* 重なり順 */
  max-width: 90%; /* 最大幅 */
  font-weight: normal;
  margin-top: 4rem;
  font-size: 160%;
  line-height: 1.6;
}

.cstm-box-corner-accent:before {
  border-top: 3px solid var(--primary-color); /* 上辺の線の色（#8293AA） */
  border-left: 3px solid var(--primary-color); /* 左辺の線の色（#8293AA） */
  content: ''; /* 擬似要素にコンテンツなし */
  display: block; /* 擬似要素をブロック表示 */
  position: absolute; /* 配置（位置を指定） */
  top: -3px; /* 上から-3pxずらす */
  left: -3px; /* 左から-3pxずらす */
  width: 30px; /* 幅20px */
  height: 30px; /* 高さ20px */
  z-index: 1; /* 重なり順（前面に表示） */
}

.cstm-box-corner-accent:after {
  border-bottom: 3px solid var(--primary-color); /* 上辺の線の色（#8293AA） */
  border-right: 3px solid var(--primary-color); /* 左辺の線の色（#8293AA） */
  content: ''; /* 擬似要素にコンテンツなし */
  display: block; /* 擬似要素をブロック表示 */
  position: absolute; /* 配置（位置を指定） */
  bottom: -3px; /* 上から-3pxずらす */
  right: -3px; /* 左から-3pxずらす */
  width: 30px; /* 幅20px */
  height: 30px; /* 高さ20px */
  z-index: 2; /* 重なり順（前面に表示） */
}

/* ボックス内の段落 */
.cstm-box-corner-accent p {
  margin:0;
  color: #333;
}



/*リード文*/
.lead{
  background: url(images/lead_07.png) no-repeat;
  background-size: contain;
  background-position: center center;
  margin-top: 1rem;
}

.lead p{
  font-size: 1.5rem;
  line-height: 1.8;
  color: #111;
  width: 90%;
  margin: 0 auto;
}

.lead-photo{
  background: url(images/33634826_s.jpg) no-repeat;
  background-size: cover;
  background-position: center center;
  margin-top: 1rem;
  
}

.lead-photo p{
  font-size: 1.6rem;
  line-height: 1.8;
  color: #fff;
  width: 88%;
  margin: 0 auto;
}

.lead-bg{
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  padding: 4rem 0;
}



/* news
------------------------------------------------------------- */
.top-news-img{
  max-width: 300px;
  width: 100%;
}

.news{
  padding: 1px 12px;
  background-color: var(--primary-color);
  color: #fff;
  font-size: 80%;
  border-radius: 10px;
}

.event{
  padding: 1px 12px;
  background-color: #f68935;
  color: #fff;
  font-size: 80%;
  border-radius: 10px;
}

.merchandise{
  padding: 1px 12px;
  background-color: #00a133;
  color: #fff;
  font-size: 80%;
  border-radius: 10px;
}

.news a:hover{
  color: #f4989a!important;
}

.event a:hover{
  color: #f7b37f!important;
}

.merchandise a:hover{
  color: #7aed9f!important;
}



@media screen and (max-width: 990px){
  #blog .card-image{
    text-align: center;
    margin-bottom: 1rem;
  } 
}

/* contact
------------------------------------------------------------- */

/*ContactForm7カスタマイズ*/
table.CF7_table{
	width:90%;
	margin:3rem auto 0;
	border: 3px solid #e5e5e5;
}

table.CF7_table tr{
	border-top: 1px solid #e5e5e5;
}

.single .entry-content table.CF7_table,
.page .entry-content table.CF7_table{
	display:table;
}

table.CF7_table p{
  text-align: left;
  margin: 1rem;
}

.CF7_req{
  display: inline;
}

/*エラー・警告箇所*/
.screen-reader-response p{
  color: #b82a2c;
  font-weight: bold;
  margin-top: 3rem;
}

.screen-reader-response ul{
  display: none;
}

.wpcf7-not-valid-tip{
  display: block;
  color: #b82a2c;
}

#con_caution{
  color: #b82a2c;
  margin: 2rem 0;
  font-weight: bold;
}

#con_caution p{
  margin: 0 !important;
  color: #b82a2c;
  width: 100%;
}


/*入力欄*/
.CF7_table input, .CF7_table textarea {
	border: 1px solid #d8d8d8;
  padding: 10px;
  width: 100%;
}

.CF7_table ::placeholder {
	color:#797979;
}

/*「必須」文字*/
.CF7_req{
	font-size:.9em;
	padding: 5px;
	background: var(--secondary-color);
	color: #fff;
	border-radius: 3px;
	margin-right:1em;
}

/*「任意」文字*/
.CF7_unreq{
	font-size:.9em;
	padding: 5px;
	background: #bdbdbd;
	border-radius: 3px;
	margin-right:1em;
}

/* タイトル列 */
@media screen and (min-width: 768px){
	.CF7_table th{
	width:30%;
	background-color:#ebedf5;
	}
}

/* レスポンシブ */
@media screen and (max-width: 768px){
	table.CF7_table{
	width:100% !important;
	}
	.CF7_table tr, .CF7_table td, .CF7_table th{
	display: block;
	width: 100%;
	line-height:2.5em;
	}
	.CF7_table th{
	background-color:#ebedf5;
	}

  .CF7_table tbody,
  .CF7_table tr{
    width: 100% !important;
  }

  table.CF7_table p{
    text-align: left;
    margin: 0;
  }
}

/* 「送信する」ボタン */
.wpcf7 input.wpcf7-submit {
	background-color: var(--secondary-color);
  border:0;
	color:#fff!important;
	font-size:1.2em;
	margin:0 auto;
  padding: 1rem 2rem;
  transition: .3s;
}

.wpcf7 input.wpcf7-submit:hover{
  /* opacity: 0.7;
  transition: all 0.5s ease-in-out; */
  background-color: var(--primary-color);
}

/* .CF7_btn{
	text-align:center;
	margin-top:20px; 
}*/

.wpcf7-spinner{
	width:0;
	margin:0;
}





/* ページトップボタン
------------------------------------------------------------- */

#page-top a{
  display: flex;
  justify-content:center;
  align-items:center;
  background:var(--secondary-color);
  border-radius: 5px;
  width: 60px;
  height: 60px;
  color: #fff;
  text-align: center;
  text-transform: uppercase; 
  text-decoration: none;
  font-size:0.7rem;
  transition:all 0.3s;
  line-height: 1.2 !important;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

#page-top a:hover{
  background:var(--primary-color);
}

/*リンクを右下に固定*/
#page-top {
  position: fixed;
  right: 10px;
  bottom:10px;
  z-index: 2;
    /*はじめは非表示*/
  opacity: 0;
  transform: translateY(100px);
}

/*　上に上がる動き　*/

#page-top.UpMove{
  animation: UpAnime 0.5s forwards;
}
@keyframes UpAnime{
  from {
    opacity: 0;
  transform: translateY(100px);
  }
  to {
    opacity: 1;
  transform: translateY(0);
  }
}

/*　下に下がる動き　*/

#page-top.DownMove{
  animation: DownAnime 0.5s forwards;
}
@keyframes DownAnime{
  from {
    opacity: 1;
  transform: translateY(0);
  }
  to {
    opacity: 1;
  transform: translateY(100px);
  }
}




/* 採用バナー */
@media screen and (min-width: 990px){
	.recruit_bn_pc{
	  display: block !important;
	}
  .recruit_bn_sp{
    display: none !important;
  }
}

/* レスポンシブ */
@media screen and (max-width: 990px){
	.recruit_bn_pc{
	  display: none !important;
	}
  .recruit_bn_sp{
    display: block !important;
  }
}








/*----------------------------------------------*/
/* 4 SITE STRUCTURE */
/*----------------------------------------------*/

/* 4.1 Header
/*----------------------------------------------*/
.header-top span{
  display: inline-block;
  font-size: 80%;
  padding-left: 0.4rem;
  vertical-align: bottom;
  margin-bottom: -8px;
}

a.nav-link {
  text-transform: capitalize;
  font-weight: 500;
  color: var(--dark-color);
  font-family: var(--heading-font);
  transition: all 0.3s ease-in-out;
}

a.nav-link::after {
  content: "";
  text-align: center;
  display: block;
  width: 0;
  height: 2px;
  background: var(--primary-color);
  transition: width 0.9s;
}

a.nav-link.active::after,
a.nav-link:focus::after,
a.nav-link:hover::after {
  width: 100%;
  transition: width 0.9s;
}

#primary-header .dropdown .search::after {
  content: none;
}

#primary-header .search-dropdown .dropdown-menu {
  width: 260px;
}

#primary-header .search-dropdown .dropdown-menu input {
  min-width: 100%;
}

#primary-header .search-dropdown .dropdown-menu button {
  padding: 0 12px;
  min-height: -webkit-fill-available;
  border-radius: 0.25rem;
}

@media only screen and (max-width: 990px) {
  a.nav-link {
    font-size: 1.5rem;
  }

  a.nav-link.active::after,
  a.nav-link:focus::after,
  a.nav-link:hover::after {
    width: 0%;
  }

  a.nav-link.active,
  a.nav-link:focus,
  a.nav-link:hover {
    color: var(--primary-color) !important;
  }


  /*ハンバーガーメニュー内装飾*/
  .offcanvas{
    background-color: #effff1;
  }

  .offcanvas-body{
    padding: 0!important;
  }

.offcanvas-body li{
  text-align: center !important;
  padding: 1rem 0rem !important;
  border-bottom: 1px dotted #d1d1d1;
}


  #header nav a span{
    display: none;
  }


}


#billboard h2{
  line-height: 1.6!important;
}


/* 4.2 Brand Section
/*----------------------------------------------*/
img.brand-image {
  filter: contrast(0);
  transition: all 0.3s ease-in;
}

img.brand-image:hover {
  filter: contrast(1);
}


/* 4.3 About Section 
/*----------------------------------------------*/
svg.play-icon {
  animation: play 1.5s alternate infinite ease-in;
}

@keyframes play {
  0% {
    transform: scale(.8);
  }

  100% {
    transform: scale(1.1);
  }
}



/* 4.4 Services Section
/*----------------------------------------------*/
/* Jarallax */
.jarallax {
  min-height: 350px;
  transition: all 0.5s ease-in-out;
}

.service-block {
  transition: all 0.5s ease-in-out;
}

.service-block:hover .jarallax {
  opacity: 0;
}

.service-btn {
  transition: all 0.5s ease-in-out;
}

.service-block:hover .service-btn {
  color: #fff/*var(--dark-color)*/;
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}


/* 4.5 Project Section
/*----------------------------------------------*/
.swiper-slide.swiper-width {
  width: auto !important;
}

.project-content .portfolio-img {
  transition: all 0.5s ease-in-out;
}

.project-content:hover .portfolio-img {
  opacity: 0.3;
}

.portfolio-description {
  opacity: 0;
  transition: all 0.5s ease-in-out;
  text-align: center;
}

.project-content:hover .portfolio-description {
  opacity: 1;
}



/* 4.6 CTA Section
/*----------------------------------------------*/
.border-dotted {
  border: 2px dashed rgba(255, 255, 255, 0.5);
}



/* 4.7 PARTNER Section
/*----------------------------------------------*/
#Patner {
  background-color: #fff;
}
#Patner img {
  padding-bottom: 4px;
}




/* 4.8 FOOTER Section
/*----------------------------------------------*/
#footer{
  background-color: #010f1d;
  color: #fff;
  margin-top: 6rem;
}

.footer-menu{
  width: 1090px;
  margin: auto;
}

.footer-menu ul{
  /*display: flex;
  justify-content: center;*/
  width: 100%;
  margin: 0 auto;
  padding: 0;

}

.footer-menu ul li{
  display: inline-block;
  margin: 0.1rem 0.6rem;
  min-width: 100px;
}

.footer-logo{
  text-align: center;
  margin-top: 2rem;
}

.footer-txt{
  text-align: center;
  padding-top: 15px;
}

.footer-link{
  display: flex;
  justify-content: center;
  margin: 2rem 0 0 0;
  padding: 0;
}

.footer-link li{
    list-style: none;
}
.footer-link a{
    display: block;
    padding: 0 13px;
    border-right: 1px solid #010f1d;
    background: var(--bs-danger-text-emphasis);
    font-size: 0.7rem;
}

.footer-link a:hover{
  color: #ff5252;
}



/*----------------------------------------------*/
/* 5 PAGES STYLE */
/*----------------------------------------------*/


/* page-content all
/*----------------------------------------------*/
#jarallax-container-0{
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: -100;
  clip-path: polygon(0px 0px, 100% 0px, 100% 100%, 0px 100%);
}

#jarallax-container-0 div{
  background-position: 50% 50%;
  background-size: cover;
  background-repeat: no-repeat;
  background-image: url('images/banner3.jpg');
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 659px;
  overflow: hidden;
  pointer-events: none;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  will-change: transform, opacity;
  margin-top: 119px;
  transform: translate3d(0px, -48.5px, 0px);
}


.page-contnt{
  background-color: #f3f6f8;
}



.page-contnt h2{
  text-align: center;
  background-color: #fff;
  color: #5f3031;
  padding: 2.6rem;
  border-radius: 3px;
  box-shadow: 0px 6px 6px -6px rgba(0, 0, 0, 0.3);
  font-size: 1.6rem;
  margin-top: 4rem;
  border: 1px solid #f6f6f6;
}

.page-contnt h2 span{
  display: inline-block;
  vertical-align: middle;
  font-size: 1rem;
  color: #f4989a;
  margin-left: 1rem;
  font-weight: normal;
}

.page-contnt h3{
  font-size: 1.4rem;
  text-align: left;
  margin: 5rem 2rem 3rem 2rem;
}

.page-contnt p{
  text-align: left;
  margin: 2rem 2rem;
}




/* 5.1 Projects Page
/*----------------------------------------------*/

button.filter-button {
  border: 0;
  background: transparent;
  text-transform: uppercase;
  transition: all 0.5s ease-in-out;
  border-radius: 20px;
}

button.filter-button.active,
button.filter-button:hover {
  color: var(--bs-light);
  background: var(--primary-color);
}


/*--------------------------------------------------------------
 5.2 Pricing page 
  --------------------------------------------------------------*/
.plan-post {
  border: 1px solid var(--secondary-color);
}

span.price-tick {
  color: var(--primary-color);
}

.price-option {
  height: 300px;
}


/*--------------------------------------------------------------
 5.3 Reviews page
--------------------------------------------------------------*/

.reviews-components {
  box-shadow: 0px 12px 90px rgba(12, 12, 12, 0.06);
}

iconify-icon.quote {
  font-size: 60px;
  color: var(--primary-color);
}

.rate {
  color: var(--primary-color);
}






/*--------------------------------------------------------------
 5.4 company page
--------------------------------------------------------------*/

#company table{
  width: 93%;
  border-collapse: collapse;
  margin: 5rem auto 3rem auto;
}

#company table tr{
  border-bottom: solid 1px white;
}

#company table tr:last-child{
  border-bottom: none;
}

#company table th{
  position: relative;
  width: 30%;
  background-color: var(--secondary-color);
  color: white;
  text-align: center;
  padding: 20px 0;
  font-weight: normal;
}

#company table th:after{
  display: block;
  content: "";
  width: 0px;
  height: 0px;
  position: absolute;
  top:calc(50% - 10px);
  right:-10px;
  border-left: 10px solid var(--secondary-color);
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}

#company table td{
  text-align: left;
  width: 70%;
  text-align: center;
  background-color: #eee;
  padding: 20px 0;
}

#company iframe{
  display: block;
  margin: 5rem auto 3rem auto;
}

.suppList{
  width: 93%;
  margin: 5rem auto 3rem auto;
}

.suppList ul{
  float: left;
  width: 45%;
}

.suppList li{
  text-align: left;
}

.conResults li:first-child{
  list-style-type: none;
  font-size: 120%;
  font-weight: bold;
  text-indent: -2rem;
  padding-bottom: 0.6rem;
}




/*--------------------------------------------------------------
 5.5 system page
--------------------------------------------------------------*/
.txt-red{
  color: #b82a2c;
  font-size: 180%;
  text-decoration: underline;
  display: inline-block;
}


/*--------------------------------------------------------------
 5.6 news page
--------------------------------------------------------------*/
#news p{
  margin: 1rem 0;
}

.archive-list-img{
  width: 100%;
  max-width: 398px;
}



/*--------------------------------------------------------------
 5.6 case page
--------------------------------------------------------------*/
.casesImg img{
  width: 100%;
  max-width: 900px;
}

#cases p span{
  color: var(--primary-color);
}



/*--------------------------------------------------------------
 5.6 keysystem page
--------------------------------------------------------------*/
#keysystem #keyInn div,
#keysystem #keyInn h4{
  text-align: left!important;
  
}

#keyInn img{
  max-height: 300px;
  padding-right: 10px;
}

@media screen and (max-width: 990px){
  #keyInn img{
    max-height: 100%;
    padding-right: 10px;
    padding-bottom: 1.4rem;
    width: 100%;
  }
}

#keysystem #keyInn h4 {
    display: flex;
    align-items: center;
    padding: .5em .7em;
    background-color: #f2f2f2;
    color: #333333;
    margin-top: 5rem;
}

#keysystem #keyInn h4::before {
    display: inline-block;
    width: 5px;
    height: 1.5em;
    margin-right: .5em;
    background-color: var(--primary-color);
    content: '';
}

#keysystem #keyInn h5 {
    position: relative;
    padding: .5em 1.2em;
    color: #333333;
    text-align: left;
    margin-top: 4rem;
}

#keysystem #keyInn h5::before,
#keysystem #keyInn h5::after {
    display: inline-block;
    position: absolute;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    border: 2px solid var(--primary-color);
    content: '';
}

#keysystem #keyInn h5::before {
    top: calc(50% - 3px);
    left: 0;
}

#keysystem #keyInn h5::after {
    top: calc(50% + 3px);
    left: 5px;
}

#keysystem #keyInn span{
  text-align: left;
  display: block;
}

.key_unit div{
  line-height: 2;
  border-bottom: #f0c0c0 dashed 1px;
  padding-bottom: 4rem;
}
.key_unit img{
  display: block;
  float: left;
  padding-right: 2vw!important;
}

.key-kugiri{
  border-top: #c6c6c6 dotted 5px;
  margin-top: 5rem;
}

.key_unit h5 span{
  display: inline!important;
}



/*--------------------------------------------------------------
 5.6 products page
--------------------------------------------------------------*/
.product-camera{
  background-image: url(images/billboard.jpg);
}

.product-cover{
  width: 100%;
  background-size: cover;
  background-position: 50% 50%;
  min-height: 300px;
  display: grid;
  place-items: center;
}

.product-bg{
  background-color: #000;
  opacity: 0.7;
  color: #fff;
  font-size: 200%;
  width: 100%;
  padding: 2rem 2rem;
  text-align: center;
}

#products img{
  width: 100%;
}



/*--------------------------------------------------------------
 5.6 contact page
--------------------------------------------------------------*/
.wpcf7 li{
  color: var(--primary-color)!important;
}
.contact-p div{
  margin-top: 6rem;
}

.pricheck{
  margin-top: 2rem;
  border: 1px solid #ddd;
}

.check01{
  background-color: #fff;
  padding: 2rem 1rem 1rem 1rem;
}

.check01 a{
  text-decoration: underline;
}

.check02{
  padding: 2rem 0 2rem 0;
  background-color: #feeeee;
}

.check02 p{
  margin-bottom: 0;
  color: #111;
}

.check02 .wpcf7-list-item-label{
  padding-left: 10px;
}

.check02 input{
  width: 16px;
  height: 16px;
}


/*--------------------------------------------------------------
 5.6 single works page
--------------------------------------------------------------*/
.works-single-image img{
  max-width: 100%;
  height: 100%;

}









/*reCAPTCHA v3 バッジを左下に移動*/
.grecaptcha-badge {
  width: 70px !important;
  overflow: hidden !important;
  transition: all 0.3s ease !important;
  left: 10px !important;
  z-index:100;
}
.grecaptcha-badge:hover {
  width: 256px !important;
}







/*ログイン画面リンクスタイル*/
#backtoblog a,
#nav a {
  color: #fff !important;
}