@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

.cta-box {
	background: transparent;
	border: 1px solid #128052;
	color: #333;
}

.cta-content {
	align-items: center;
}

.cta-heading {
	text-align: center;
}

.cta-left-and-right .cta-content .cta-thumb {
	width: 35%;
}

.cta-left-and-right .cta-content .cta-thumb img {

}

.cta-button {
    width: 45%;
    margin: 0 auto;
}

#media_image-3 a:hover {
	opacity: .6;
} 
.wp-block-image.aligncenter.size-large.simulation-sp {
	display: none;
}
.yobuzo-link-bn {
	text-align: center;
	display: block;
	margin: 0 auto;
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/

}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
.cta-left-and-right .cta-content .cta-thumb img {

}	

.cta-button {
    width: 80%;
}
	.simulation-pc {
		display: none;
	}
.wp-block-image.aligncenter.size-large.simulation-sp {
	display: block;
	}
}

/*ヘッダーロゴ*/
.header-in {
	position: relative;
}

.header-in .yobuzo-logo {
	position: absolute;
	top: 10px;
	left: 10px;
}

.header-in .yobuzo-logo img {
	width: 150px;
	height: auto;
}
@media screen and (max-width: 767px){
	#header {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 100;
	}
	.header {
		height: auto;
		background-color: #fff;
	}
	.header-in .yobuzo-logo {
		position: static;
		width: 20%;
	 }
	.tagline {
	display: none;
	}
	.header-in {
		justify-content: center;
		flex-direction: row;
		align-items: center;
	}
	.header-in .yobuzo-logo img {
	width: 100%;
	height: auto;
 }
	#content {
		margin-top: 50px;
	}
}

/*PCフッターバナー*/
#footer-banner-pc a {
 display: flex;
 justify-content: center;
 align-items: center;
 background-color: #157758;
 padding: 10px;
 width: 100%;
 margin: 10px auto;
 border-radius: 10px;
 text-decoration: none;
}

#footer-banner-pc a:hover {
	opacity: .6;
	background-color: #157758!important;
}

#footer-banner-pc a img {
 width: 80px;
 height: 80px;
 display: block;
 margin-right: 10px;
}

#footer-banner-pc a span {
 color: #fdfdfd;
 font-weight: bold;
 font-size: 1.2rem;
}

/*フッター追従バナー スマホ用*/
#fixed-banner {
 position: fixed;
 bottom: 0;
 left: 0;
 width: 100%;
 z-index: 100;
 opacity: 0;
 visibility: hidden;
 transition: opacity 0.8s ease, visibility 0.8s ease;
}

#fixed-banner a {
 display: flex;
 justify-content: center;
 align-items: center;
 background-color: #157758;
 padding: 10px;
 width: 85%;
 margin: 10px auto;
 border-radius: 10px;
 text-decoration: none;
}
#fixed-banner a:hover { 
 opacity: .6;
 background-color: #157758!important;
}

#fixed-banner a img {
 width: 50px;
 height: 50px;
 display: block;
 margin-right: 10px;
}

#fixed-banner a span {
 color: #fdfdfd;
 font-weight: bold;
}

.footer-widgets-mobile {
   height: 0;
   margin: 0;
}


/************************************
**ドライバーインタビュー用CSS
************************************/
.driver .wrap .main .post-293 .wp-block-image img, .driver .post-293 .eye-catch img {
	aspect-ratio: 5 / 2;
	object-fit: cover;
	object-position: 50% 10%;
}

.driver .post-865 .eye-catch {
	width: 100%;
}

.driver .post-865 .eye-catch img {
	width: 100%;
}

@media screen and (max-width: 768px) {
.driver .card-thumb img {
	object-fit: cover;
	object-position: 50%;
 }
}

.driver .wrap .main .post-291 .wp-block-image img, .driver .post-291 .eye-catch img {
	aspect-ratio: 5 / 2;
	object-fit: cover;
	object-position: 50% 50%;
}

.driver.public-page {
	background-color: #EEF1F5;
} 

.driver .article h2 {
	background-color: #1B47A8;
	color: #fdfdfd;
}

.driver .article h3 {
	border-left: 7px solid #1B47A8;
	border-top: none;
	border-bottom: none;
	border-right: none;
}

.driver .bold {
	font-weight: 700;
}

/* インタビュー一覧のカテゴリー表示位置 */
@media screen  and (max-width: 1024px) {
.driver .entry-card-thumb {
	position: relative;
}
.driver .entry-card-thumb .cat-label, .driver .related-list .cat-label {
    position: absolute;
	top: 70%;
	left: 5px;
 }

}

/* カテゴリー "interview" のカテゴリーだけ背景色を変える */

.driver .eye-catch-wrap .cat-label {
    background-color: #1B47A8;
}

.driver .related-list .cat-label {
    background-color: #1B47A8;
}

.driver .entry-categories-tags .cat-link {
    background-color: #1B47A8;
}

.driver .entry-card-thumb .cat-label {
    background-color: #1B47A8;
}

.interview-post .entry-card-thumb .cat-label {
    background-color: #1B47A8;
}

.driver h2 span {
	display: inline-block;
	margin-top: 10px;
	font-size: 1.25rem;
}
@media screen and (max-width: 834px){
 .driver h2 span {
	margin-top: 10px;
	font-size: 1.1rem;
 } 
}

.driver .entry-title{
	position: relative;
}

.driver .entry-title .subtitle {
 display: inline-block;
font-size: 1rem;
	margin-bottom: 8px;
}

/*インタビューページのヘッダー、フッター、バナー非表示*/
.driver .article-footer, .driver #fixed-banner, .driver #footer-banner-pc {
	display: none;
}

/* 写真切り替え */
.sp-image {
	display: none;
}

@media screen and (max-width: 1024px) {
	.sp-image {
		display: block;
	}
	
	.pc-image {
		display: none;
	}
}

/* スマホ版のテーブルをスクロールさせる */
@media screen and (max-width: 768px) {
  .sp-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .sp-table-scroll table {
    width: 1000px;
    min-width: 600px;
  }
}