@charset "UTF-8";
/* =====================================================
海外購入繁殖牝馬の取組み バナー 共通CSS
使用箇所：TOPページ / /about/ 固定ページ / 海外遠征日記詳細ページ（column配下）
読み込み側で に link 追加すること
背景：transparent（各ページの背景色を継承）
タイトル表示順：日本語(上・緑) → 英語(下・黒) ※既存サイト流儀
===================================================== */
.challenge-banner-box {
padding: 80px 30px 80px;
background: transparent;
}
@media (max-width: 767px) {
.challenge-banner-box {
padding: 60px 20px 60px;
}
}
/* /about/ ページ限定：下セクション「その土地」との余白を広げる
PC時のみ下paddingを 80→140 に拡張。上は変えず上下の見た目均等さを保つ。
TOPヘッダー・記事ページには影響しない */
@media (min-width: 768px) {
body.about .challenge-banner-box {
padding-bottom: 140px;
}
}
.challenge-banner-box .challenge-banner-inner {
max-width: 990px;
width: 100%;
margin: 0 auto;
}
/* バナー自前タイトル（.c-ttl-jp 等に依存しない・自己完結） */
.challenge-banner-box .challenge-banner__ttl-jp {
font-size: 2.2rem;
letter-spacing: 0.08em;
font-weight: 700;
color: #09572F;
text-align: center;
line-height: 1.5;
margin: 0;
}
.challenge-banner-box .challenge-banner__ttl-en {
font-size: 1.4rem;
letter-spacing: 0.15em;
color: #000;
text-align: center;
line-height: 1.5;
margin: 6px 0 0;
font-weight: 400;
}
@media (max-width: 767px) {
.challenge-banner-box .challenge-banner__ttl-jp {
font-size: 1.8rem;
}
.challenge-banner-box .challenge-banner__ttl-en {
font-size: 1.2rem;
}
}
.challenge-banner {
display: flex;
align-items: stretch;
margin-top: 34px;
color: #000;
cursor: pointer;
transition: opacity 0.5s;
}
@media (max-width: 767px) {
.challenge-banner {
flex-direction: column;
margin-top: 26px;
}
}
@media only screen and (min-width: 1025px) {
.challenge-banner:hover {
opacity: 1;
}
.challenge-banner:hover .challenge-banner__img img {
transform: scale(1.06);
}
}
.challenge-banner__txtbox {
flex: 0 0 50%;
background: #F0EDE5;
padding: 36px 34px 36px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
@media (max-width: 767px) {
.challenge-banner__txtbox {
flex: none;
width: 100%;
padding: 28px 20px 28px;
align-items: stretch;
order: 2;
}
}
.challenge-banner__txtbox .txt {
font-size: 1.4rem;
line-height: 1.92em;
letter-spacing: 0.05em;
font-weight: 500;
margin: 0;
text-align: left;
}
@media (max-width: 767px) {
.challenge-banner__txtbox .txt {
font-size: 1.3rem;
line-height: 1.85em;
text-align: left;
}
/* SP時は .pc クラスの
だけ非表示。裸
は活かす（「とは。」後の改行） */
.challenge-banner__txtbox .txt br.pc {
display: none;
}
}
.challenge-banner__btn {
margin-top: 22px;
padding-right: 0;
}
@media (max-width: 767px) {
.challenge-banner__btn {
margin: 20px auto 0;
}
}
.challenge-banner__img {
flex: 0 0 50%;
overflow: hidden;
background: #d9d9d9;
aspect-ratio: 5 / 3;
}
.challenge-banner__img img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
transition: transform 0.5s;
}
@media (max-width: 767px) {
.challenge-banner__img {
flex: none;
width: 100%;
order: 1;
aspect-ratio: 5 / 3;
}
}