@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
*/

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

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

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

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

    /* ↓以下に新しいコードを追加 */

/* グローバルナビゲーションのフォント設定 */
#navi .menu-header .menu-item a,
#navi .menu-header .menu-item .item-label {
    font-family: "A-OTF Shin Go Pro", "新ゴ", "Shin Go", sans-serif !important;
    font-weight: bold !important;
}

/*1023px以下のタッチデバイス（スマホ・タブレット）のみ*/

@media screen and (max-width: 1023px) {
    .hvn-header {
        max-width: 750px; /* スマホ最大幅 */
        margin: 0 auto;
        aspect-ratio: 1675/2560; /* スマホ画像のアスペクト比 */
        overflow: hidden;
        background-color: #000;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .hvn-header .hvn-swiper {
        width: 100%;
        height: 100%;
    }
    
    .hvn-header .hvn-swiper .swiper-slide {
        width: 100%;
        height: 100%;
    }
    
    .hvn-header .hvn-swiper .swiper-slide .img1 {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
    }
    
    .hvn-header .hvn-swiper .swiper-slide .img1 img {
        content: url('https://egawa-shinojima.com/wp-content/uploads/2025/06/egawa-shinojima-law-sp-image_1080-1650-sp-scaled.webp');
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        display: block;
        margin: 0;
        padding: 0;
    }
}

/* トップ画像のアスペクト比固定 */

/* 通常の16:9レイアウト */
@media screen and (min-width: 1024px) {
    .hvn-header {
        max-width: 1920px;
        margin: 0 auto;
        aspect-ratio: 16/9;
        overflow: hidden;
        background-color: #FFF;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .hvn-header .hvn-swiper {
        width: 100%;
        height: 100%;
    }
    .hvn-header .hvn-swiper .swiper-slide {
        width: 100%;
        height: 100%;
    }
    .hvn-header .hvn-swiper .swiper-slide .img1 {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
    }
    .hvn-header .hvn-swiper .swiper-slide .img1 img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        display: block;
        margin: 0;
        padding: 0;
    }
}

/* 正方形に近い画面サイズの場合 */
@media screen and (min-width: 1024px) and (max-aspect-ratio: 1.3/1) {
    .hvn-header {
        aspect-ratio: unset; /* アスペクト比を無効化 */
        height: 60vh; /* ビューポートの高さの60%に設定 */
    }
}