@charset "UTF-8";


/* =========================================
   レスポンシブ・クリッカブルマップ
========================================= */
/* 画像を囲む基準の箱 */
.lifetasu_img_lp .c-image-map {
    position: relative; /* ここを基準にリンクを配置する */
    display: block;
  }
  
  
  /* 読み上げソフト用テキスト（画面からは隠す） */
  .lifetasu_img_lp .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
  }
  
  /* -----------------------------------------
     位置・サイズの指定（PC用画像に対する指定）
  ----------------------------------------- */
  /* 応募するボタン（※数値は仮です） */
  .lifetasu_img_lp .link-apply {
    top: 74%;
    left: 42.5%;
    width: 50.5%;
    height: 11.5%;
  }
  
  /* 注意事項リンク（※数値は仮です） */
  .lifetasu_img_lp .link-note {
    top: 90%;
    left: 69%;
    width: 24%;
    height: 4%;
  }
  
  /* -----------------------------------------
     位置・サイズの指定（スマホ用画像に対する指定）
  ----------------------------------------- */
  /* ※PCとスマホで画像の比率やレイアウトが変わる場合は、数値を上書きします */
  @media only screen and (max-width: 767px) {
    .lifetasu_img_lp .link-apply {
        top: 87%;
        left: 7.5%;
        width: 85%;
        height: 6.7%;
    }
    .lifetasu_img_lp .link-note {
        top: 96%;
        left: 21%;
        width: 71%;
        height: 3%;
    }
  }
      /* =================================================================クリッカブルエリアここまで */


/* =========================================
   lifetasu_brandstory 専用スタイル
========================================= */
body{
    padding: 0;
}

.p-lifetasu_brandstory {
    width: 100%;
}



  /* -----------------------------------------
     セクションと背景・インナーの構造
  ----------------------------------------- */
  .p-lifetasu_brandstory .section {
    position: relative;
    width: 100%;
    overflow: hidden; 
  }
  
  /* 背景画像の picture ラッパー */
  .p-lifetasu_brandstory .bg-picture {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    display: block;
  }
  
  /* 背景画像の img 本体（object-fitで敷き詰める） */
  .p-lifetasu_brandstory .bg-picture img {
    width: 100%;
    height: 100%;
    object-fit: cover; 
    object-position: center; 
  }
  
  /* コンテンツ幅を 1056px に制限するインナー */
  .p-lifetasu_brandstory .inner {
    position: relative;
    z-index: 1; 
    max-width: 1056px;
    width: 100%;
    margin: 0 auto; 
  }
  
  /* -----------------------------------------
     画像とpictureの基本設定（2倍画像対応）
  ----------------------------------------- */
  /* pictureタグ自体もブロック要素にしておく */
  .p-lifetasu_brandstory picture {
    display: block;
    width: 100%;
  }
  
  /* 全体の画像リセット（ここで2倍画像が枠に合わせて縮小されます） */
  .p-lifetasu_brandstory img {
    /* max-width: 100%;
    width: 100%; 
    height: auto;
    vertical-align: bottom;
    margin: 0;
    padding: 0;
    border: none;
    display: block;  */
  }
/* -----------------------------------------
   スマホ表示時のレイアウト調整
----------------------------------------- */
@media only screen and (max-width: 767px) {

    /* 基本は左右に24pxの余白を空ける */
    .p-lifetasu_brandstory .inner {
      /* padding: 0 24px; */
      box-sizing: border-box; 
    }
    
    /* 追加：is-full-sp がついている inner だけは余白をゼロにする */
    .p-lifetasu_brandstory .inner.is-full-sp {
      padding: 0;
    }
    
  }