@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');

/*
  VERSION HISTORY
  v1.0.0: 新規作成 - 取材・掲載ページ専用スタイル
  v1.1.0: Figmaデザイン完全再現 - 背景色追加、ヒーローエリア分割、PC左右レイアウト、スライダーUI追加
  v1.1.1: 画像切り替えアニメーション用のトランジション追加
  v1.2.0: 共通ヘッダー/フッター/追従ボタン表示のための構造修正
  v1.3.0: Figma再現度向上 - 白カード背景の削除、直置きレイアウト、余白・配置の最適化
  v1.4.0: Figmaの完全トレース - ヘッダー透過対応、余白の拡大、フォントサイズの厳格化
  v1.5.0: DevHub読み込み対応のため、css/ディレクトリに移動
  v1.6.0: キャッシュ強制破棄のためCSS/JSパスに ?v=1.6.0 を付与
  v1.7.0: Figma構造完全一致 - リード文と上部コンタクトを統合、ボタン文字色強制、フォントサイズ最適化 - 文字数: 約8100文字, 行数: 350行
  v1.8.0: カード画像スライダー — ビューポート/トラックで横スライド、トランジション追加
  v1.8.1: スライド幅をビューポートいっぱいに固定（min-width:0 による縮小を解消）
  v1.8.2: スライダー viewport にドラッグ用 cursor / touch-action
*/

/* -----------------------------------
   Variables & Base
----------------------------------- */
:root {
    --yoho-navy: #112240;
    --yoho-yellow: #EABF4B;
    --yoho-cream: #F1E2B0;
}

#media_index main.p-media {
    background-color: var(--yoho-yellow);
    color: #000000;
    font-family: 'Noto Sans JP', sans-serif;
    padding-bottom: 0;
}

.u-pc_hidden { display: none !important; }

/* 共通幅コンテナ */
.p-media__container {
    max-width: 1200px;
    margin: 0 auto;
}

.p-media__content {
    padding: 64px 0 40px;
}

/* -----------------------------------
   Hero Area
----------------------------------- */
.p-media__hero {
    background-color: var(--yoho-navy);
    color: #ffffff;
    position: relative;
}

.p-media__hero-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 4%;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.p-media__hero-title {
    font-size: 40px;
    font-weight: ７00;
    color: #f8e133;
    margin: 0;
    padding-top: 60px;
    padding-bottom: 64px;
}

/* パンくず（PC版） */
.p-media__breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #ffffff;
}

.p-media__breadcrumb a {
    color: #ffffff;
    text-decoration: none;
}

.p-media__breadcrumb a:hover {
    text-decoration: underline;
}

/* -----------------------------------
   Intro & Contact Card (v1.7.0 統合)
----------------------------------- */
.p-media__intro-card {
    background-color: #f1e2b0;
    border-radius: 20px;
    padding: 50px 60px;
    margin-bottom: 86px;
}

.p-media__intro-section {
    text-align: center;
    margin-bottom: 64px; /* お問い合わせエリアとのマージン */
}

.p-media__intro-title {
    font-size: 28px; /* Figma合わせで微縮小 */
    font-weight: 700;
    margin-bottom: 24px;
}

.p-media__intro-text-wrap {
    font-size: 16px; /* Figma合わせで微縮小 */
    line-height: 1.8;
    font-weight: 500;
    display: inline-block;
    text-align: center;
}

.p-media__intro-text {
    margin-bottom: 24px;
}

.p-media__intro-note {
    font-size: 12px;
    font-weight: 400;
}

/* -----------------------------------
   Contact Inner / Box
----------------------------------- */
.p-media__contact-inner {
    text-align: center;
}

.p-media__contact-box--bottom {
    background-color: #f1e2b0;
    border-radius: 20px;
    padding: 70px 50px;
    text-align: center;
    margin-bottom: 0;
}

.p-media__contact-title {
    font-size: 22px; /* Figma合わせで微縮小 */
    font-weight: 700;
    margin-bottom: 40px;
}

.p-media__contact-grid {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 914px;
    margin: 0 auto;
}

.p-media__contact-item {
    flex: 1;
    text-align: center;
}

/* 中央の区切り線 */
.p-media__contact-line {
    width: 1px;
    height: 100px; /* やや短く調整 */
    background-color: #000000;
    opacity: 0.1;
    margin: 0 50px;
}

.p-media__contact-subtitle {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 16px;
}

/* Contact Button */
.p-media__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--yoho-navy);
    color: #ffffff !important; /* 文字色を強制的に白へ（v1.7.0修正） */
    font-size: 15px;
    font-weight: 700;
    text-decoration: none !important;
    padding: 16px 44px; /* Figma合わせでややスリムに */
    border-radius: 999px;
    transition: opacity 0.3s ease;
}

.p-media__btn:hover {
    opacity: 0.8;
}

.p-media__btn-arrow {
    position: relative;
}

.p-media__btn-arrow::after{
    content: "";
    left: 6px;
    width: 10px;
    height: 10px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    -webkit-transform: translate(-50%, -50%) rotate(45deg);
}

/* Contact Details */
.p-media__contact-number {
    font-size: 36px;
    font-weight: 500;
    font-family: "Inter", sans-serif;
    margin-bottom: 12px;
    line-height: 1;
}

.p-media__contact-hours {
    font-size: 14px;
    line-height: 1.6;
    font-weight: 500;
}

.p-media__contact-hours-note {
    display: block;
    font-size: 12px;
    font-weight: 400;
    margin-top: 6px;
}

/* -----------------------------------
   Examples Section
----------------------------------- */
.p-media__section-title {
    font-size: 40px;
    font-weight: 700;
    margin-bottom: 86px;
    text-align: left;
}

/* Card Layout */
.p-media__card {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 112px;
}

.p-media__card--mt {
    margin-top: 100px;
}

.p-media__card-vis {
    width: 49.5%; 
    position: relative;
}

.p-media__slider-viewport {
    overflow: hidden;
    border-radius: 20px;
    width: 100%;
    touch-action: none;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
}

.p-media__slider-viewport:active {
    cursor: grabbing;
}

.p-media__slider-track {
    display: flex;
    flex-wrap: nowrap;
    transition: transform 0.45s ease;
    will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
    .p-media__slider-track {
        transition: none;
    }
}

.p-media__slider-slide {
    flex: 0 0 100%;
    flex-shrink: 0;
    box-sizing: border-box;
    /* ビューポート幅いっぱいに並べる（min-width:0 だと1/3幅に潰れ translateX% と不整合） */
    min-width: 100%;
}

.p-media__card-img {
    width: 100%;
    height: auto;
    border-radius: 20px;
    aspect-ratio: 4/3;
    object-fit: cover;
    display: block;
}

.p-media__slider-slide .p-media__card-img {
    border-radius: 0;
}

/* Slider UI */
.p-media__slider-ui {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 32px;
    position: relative;
}

.p-media__slider-dots {
    display: flex;
    gap: 12px;
    margin-left: 10px;
}

.p-media__slider-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #ffffff;
    cursor: pointer;
    transition: background-color 0.2s;
}

.p-media__slider-dot.is-active {
    background-color: var(--yoho-navy);
}

.p-media__slider-arrows {
    display: flex;
    gap: 12px;
    position: absolute;
    right: 0;
}

.p-media__slider-arrow {
    width: 40px;
    height: 40px;
    border: 2px solid var(--yoho-navy);
    border-radius: 8px;
    background: transparent;
    color: var(--yoho-navy);
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s;
}

.p-media__slider-arrow:hover {
    background: rgba(23, 32, 54, 0.1);
}

/* Card Info */
.p-media__card-info {
    width: 50%;
    display: flex;
    flex-direction: column;
    padding-top: 40px;
    padding-left: 32px;
}

.p-media__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    margin-bottom: 20px;
    padding: 0;
}

.p-media__tag {
    background-color: var(--yoho-navy);
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    padding: 7px 10px;
    border-radius: 10px;
}

.p-media__card-subtitle {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 12px;
}

.p-media__card-title {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 24px;
}

.p-media__card-title-sub {
    display: block;
    font-size: 24px;
    margin-top: 8px;
}

.p-media__card-text {
    font-size: 16px;
    line-height: 1.6;
    font-weight: 500;
}

.p-media__card-note {
    font-size: 14px;
    margin-top: 16px;
    line-height: 1.4;
}

/* -----------------------------------
   Pickup Divider
----------------------------------- */
.p-media__pickup{
    padding-left: 64px;
}

.p-media__pickup-divider {
    display: flex;
    align-items: center;
    margin: -20px 0 60px;
}

.p-media__pickup-divider-text {
    font-size: 20px;
    font-weight: 700;
    margin-right: 24px;
}

.p-media__pickup-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background-color: #000000;
    opacity: 0.15;
    margin-top: 16px;
}

.p-media__pickup .p-media__card-vis{
    width: 46.6%;
}

.p-media__pickup .p-media__card-info{
    padding-left: 0px;
}

/* -----------------------------------
   Media Queries (SP)
----------------------------------- */
@media screen and (max-width: 768px) {
    .u-sp_hidden { display: none !important; }
    .u-pc_hidden { display: block !important; }
    /* u-pc_hidden の block が .p-media__tags の flex を潰さないようにする */
    .p-media__tags.u-pc_hidden {
        display: flex !important;
    }
    .p-media__hero {
    }
    .p-media__hero-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
    .p-media__hero-title {
        font-size: 30px;
        padding: 32px 0px;
    }
    .p-media__intro-card{
        margin-bottom: 56px;
    }
    .p-media__intro-card,
    .p-media__contact-box--bottom {
        padding: 24px 16px 32px;
    }
    .p-media__contact-grid {
        flex-direction: column;
        gap: 32px;
    }
    .p-media__contact-line {
        display: none;
    }
    .p-media__card {
        flex-direction: column;
        gap: 0px;
        margin-bottom: 56px;
    }
    .p-media__card:last-child{
        margin-bottom: 104px;
    }
    .p-media__card-vis,
    .p-media__card-info {
        width: 100%;
    }
    .p-media__card-title {
        font-size: 24px;
        margin-bottom: 16px;
    }
    .p-media__slider-ui {
        margin-top: 16px;
    }
    .p-media__content{
        padding: 32px 20px 40px;
    }
    .p-media__intro-title{
        margin-bottom: 16px;
    }
    .p-media__intro-text-wrap{
        line-height: 1.6;
        text-align: left;
    }
    .p-media__intro-note{
        font-size: 14px;
        font-weight: 500;   
    }
    .p-media__contact-title{
        margin-bottom: 24px;
    }
    .p-media__intro-section{
        margin-bottom: 32px;
    }
    .p-media__btn-arrow::after{
        left: 10px;
    }
    .p-media__section-title{
        margin-bottom: 56px;
        font-size: 30px;
    }
    .p-media__tag{
        padding: 6px 10px;
    }
    .p-media__tags{
        margin-bottom: 10px;
    }
    .p-media__slider-dot{
        width: 8px;
        height: 8px; 
    }
    .p-media__slider-dots{
        gap: 16px;
    }
    .p-media__card-info{
        padding-top: 24px;
        padding-left: 0px;
    }
    .p-media__card--mt{
        margin-top: 0px;
    }
    .p-media__pickup{
        padding-left: 0px;
    }
    .p-media__pickup-divider{
        margin: -20px 0 16px;
    }
    .p-media__card-vis{
        width: 100%;
    }
    .p-media__pickup .p-media__card{
        margin-bottom: 56px;
        padding: 0px 16px;
    }
    .p-media__pickup-divider-text{
        font-size: 18px;
    }
    .p-media__card-subtitle{
        margin-bottom: 8px;
    }
    .p-media__pickup .p-media__card-vis{
        width: 100%;
    }
}


/*
===== Customization ===========================*/
#media_index {
    background-color: #112240;
}

#media_index .p-media__content {
  padding-bottom: 20px;
}

#media_index .p-media__intro-title {
    font-size: 36px;
    font-weight: 700;
    line-height: calc(48 / 36);
}

#media_index .p-media__contact-title {
    font-size: 26px;
    line-height: 1.6;
}

.p-media__contact-line {
    opacity: 0;
}

#media_index .p-media__contact-grid {
    position: relative;
    align-items: flex-start;
}

#media_index .p-media__contact-grid::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 1px;
    height: 100%;
    background: #A99E7B;
}

#media_index .p-media__contact-subtitle {
  margin-bottom: 24px;
}

#media_index .p-media__contact-item .c-nav_04 a {
    width: 303px;
}

#media_index .p-media__contact-number {
    padding: 12px 0 0;
    font-size: 36px;
    letter-spacing: 0;
}

#media_index .p-media__intro-card__bottom {
  padding-top: 32px;
  padding-bottom: 32px;
}

#media_index .p-media__intro-card__bottom .p-media__contact-title {
    margin-bottom: 24px;
}

#media_index .p-media__pickup-divider {
  margin-top: -60px;
}

#media_index .p-media__pickup-divider-text {
  margin-right: 12px;
}

#media_index .p-media__pickup-divider::after {
  margin-top: 20px;
}

@media (max-width: 768px) {
    #media_index .p-media__content {
        padding-bottom: 52px;
    }

    #media_index .p-media__contact-number {
        padding: 4px 0 0;
        font-size: 32px;
    }

    #media_index .p-media__intro-card__bottom {
        margin-bottom: 0;
    }

    #media_index .p-media__intro-title {
        font-size: 24px;
        line-height: 1.8;
    }

    #media_index .p-media__intro-note {
        padding-left: 1em;
        text-indent: -1em;
    }

    #media_index .p-media__contact-title {
        font-size: 22px;
    }

    #media_index .p-media__contact-grid {
        align-items: center;
    }

    #media_index .p-media__contact-grid::after {
        display: none;
    }

    #media_index .p-media__contact-subtitle {
    margin-bottom: 16px;
    }

    #media_index .p-media__pickup-divider {
    margin-top: -20px;
    }

    #media_index .p-media__card-title {
        line-height: calc(32 / 24);
    }
}

/* p-slide
--------------------*/
#media_index .p-slide {
	position: relative;
	padding: 0 0 56px;
}

#media_index .p-slide .swiper {
	border-radius: 16px;
	overflow: hidden;
}

#media_index .p-slide .swiper-button-prev,
#media_index .p-slide .swiper-button-next {
	display: block;
	top: inherit;
	bottom: 0;
	width: 40px;
	height: 40px;
	margin: 0;
	border: 2px solid #112240;
	border-radius: 8px;
	transition: all .3s ease;
}

#media_index .p-slide .swiper-button-prev {
	left: inherit;
	right: 64px;
}

#media_index .p-slide .swiper-button-next {
	right: 0;
}

#media_index .p-slide .swiper-button-prev:after {
	content: "";
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 6px;
	height: 12px;
	background: url(/assets/img/common/bullet_arrow_05_n.svg) no-repeat 50% 50%;
	background-size: 6px auto;
}

#media_index .p-slide .swiper-button-next:after {
	content: "";
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 6px;
	height: 12px;
	background: url(/assets/img/common/bullet_arrow_01_n.svg) no-repeat 50% 50%;
	background-size: 6px auto;
}

#media_index .p-slide .swiper-button-disabled {
	display: none !important;
}

#media_index .p-slide .swiper-pagination {
	bottom: 8px;
	font-size: 0;
	line-height: 0;
	z-index: 10;
}

#media_index .p-slide .swiper-pagination-bullet {
	margin: 0 8px;
	width: 16px;
	height: 16px;
	background: #ffffff;
	transition: all .3s ease;
	opacity: 1;
}

#media_index .p-slide .swiper-pagination-bullet:hover {
	background: #112240;
}

#media_index .p-slide .swiper-pagination-bullet-active {
	background-color: #112240 !important;
}

@media (min-width: 769px) {
	#media_index .p-slide .swiper-button-prev:hover,
	#media_index .p-slide .swiper-button-next:hover {
		background: #112240;
	}

	#media_index .p-slide .swiper-button-prev:hover:after {
		background: url(/assets/img/common/bullet_arrow_05_y.svg) no-repeat 50% 50%;
		background-size: 6px auto;
	}

	#media_index .p-slide .swiper-button-next:hover:after {
		background: url(/assets/img/common/bullet_arrow_01_y.svg) no-repeat 50% 50%;
		background-size: 6px auto;
	}
}

@media (max-width: 768px) {
	#media_index .p-slide {
		padding: 0 0 24px;
	}

	#media_index .p-slide .swiper {
		border-radius: 10px;
	}

	#media_index .p-slide .swiper-button-prev,
	#media_index .p-slide .swiper-button-next {
		display: none;
	}

	#media_index .p-slide .swiper-pagination {
		bottom: 0;
	}

	#media_index .p-slide .swiper-pagination-bullet {
		margin: 0 8px;
		width: 8px;
		height: 8px;
	}

	#media_index .p-slide .swiper-pagination-bullet:hover {
		background: #ffffff;
	}
}

/* footer
--------------------*/
footer .p-contact,
footer .nav_torikumi {
    display: none;
}

footer .footer_inner {
    padding-top: 64px;
}

footer .p-cans ul {
    margin-top: 0;
}

@media (max-width: 768px) {
    footer .footer_inner {
        padding-top: 48px;
    }

    .c-bread_crumbs {
        margin-top: 0;
    }

    footer .p-cans ul {
        margin-top: 32px;
    }
}