/*
 Theme Name: Arkhe Child
 Template: arkhe
 */
@import url("../arkhe/style.css"); /* 親テーマのCSSをインポート */
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@400;500;700;900&display=swap');

.grecaptcha-badge { visibility: hidden; }
#main{
	background-color: #f5f5f4;
}
#main .main_wrap{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
}
#main .main_wrap .main_txt{
    width: 50%;
    padding-left: 10%;
    text-align: left;
}
#main .main_wrap .main_txt h2 {
    margin-bottom: 30px;
}
#main .main_wrap #slide{
	width: 50%;
}
.bgextend {
  animation-name: bgextendAnimeBase;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  position: relative;
  overflow: hidden;
  opacity: 0;
}
@keyframes bgextendAnimeBase {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.bgappear {
  animation-name: bgextendAnimeSecond;
  animation-duration: 1s;
  animation-delay: 0.6s;
  animation-fill-mode: forwards;
  opacity: 0;
}
@keyframes bgextendAnimeSecond {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.bgLRextend::before {
  animation-name: bgLRextendAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #a0bc5a;
}
@keyframes bgLRextendAnime {
  0% {
    transform-origin: left;
    transform: scaleX(0);
  }
  50% {
    transform-origin: left;
    transform: scaleX(1);
  }
  50.001% {
    transform-origin: right;
  }
  100% {
    transform-origin: right;
    transform: scaleX(0);
  }
}
.bgappearTrigger, .bgLRextendTrigger {
  opacity: 0;
}
#slide {
    margin-inline: auto;
    overflow: hidden; /* 画像がはみ出ないようにする */
    opacity: 0;
    transition: opacity .3s linear;
    border-bottom-left-radius: 10vmax;
}
#slide .slick-img img {
  width: 100%;
}
@keyframes zoomUp {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.15); /* 拡大率 */
  }
}
.add-animation {
  animation: zoomUp 10s linear 0s normal both;
}
#slide.slick-initialized {
  opacity: 1;
}

@media screen and (max-width:768px){
	#main .main_wrap {
    flex-direction: column-reverse;
}
	#main .main_wrap #slide {
    width: 85%;
    margin: 0 0 0 auto;
}
	#main .main_wrap .main_txt {
    width: 100%;
    padding: 10% 5%;
}
#main .main_wrap .main_txt h2 {
    font-size: 1.5em;
}
	#main .main_wrap .main_txt h3 {
    font-size: 1.1em;
}   
	.js-scrollable{
  white-space: nowrap;  /* 文字の折り返しはなくす */
}
}
@media not all and (min-width: 1000px) {
	.c-headLogo__img {
    opacity: 0;
}
	[data-btns=r-l] .l-header__body {
    grid-template-areas: "search left center right menu";
    grid-template-columns: var(--ark-searchW) calc(15% - var(--ark-searchW)) 60% calc(25% - var(--ark-drawerW)) var(--ark-drawerW);
}
    .l-header__logo {
       
    }
	.l-header__logo::after {
		content:"株式会社 雄陽工業";
		    font-size: 1.2rem;
    padding: 0 10px;
	}
}
/*ContactForm7カスタマイズ*/
table.CF7_table{
	margin:0 auto;
}

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

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

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

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

/*「必須」文字*/
.CF7_req{
	font-size:.9em;
	padding: 5px;
	background: #f79034;/*オレンジ*/
	color: #fff;
	border-radius: 3px;
	margin-right:1em;
}

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

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

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

}

/* 「送信する」ボタン */
.wpcf7 input.wpcf7-submit {
	background-color:#f79034;/* オレンジ*/
	border:0;
	color:#fff;
	font-size:1.2em;
	font-weight:bold;
	margin:0 auto;
}

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

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