@charset "UTF-8";

/**
 * Layout: layout.css
 * ページ全体を構成する「器（大枠）」のスタイルを管理する。
 * ヘッダー、フッター、メインエリア、サイドバー、コンテナ幅、グリッドシステムなど、
 * 複数のページで共通して使用されるレイアウト構造を定義。
 * * 運用ルール:
 * - 接頭辞「l-」を使用すること。
 * - 原則として、内部の細かなパーツ（ボタン、装飾等）のスタイルは記述しない。
 * - ページ固有のレイアウト調整が必要な場合は Projectレイヤーでの上書きを検討すること。
 */

  /* ==========================================================================
   Layout: Wrap (.l-wrap)
   役割: ページ全体
   ========================================================================== */
    .l-wrap {
      background-color: var(--color-blue-dark-900);
      background-image: url(../../images/common/background/footer_bg_small.webp);
      background-position: center bottom;
      background-repeat: no-repeat;
      background-size: contain;
      color: var(--color-white-900);
    }
    .l-wrap:before{
      background-image: url(../../images/common/illust/header_deco01.webp);
      background-position: center;
      background-repeat: no-repeat;
      background-size: contain;
      content: "";
      display: inline-block;
      height: 100px;
      position: absolute;      
      right: 0;
      top: 0;
      width: 100px;
    }

    @media screen and (min-width: 768px) {
      .l-wrap {}
      .l-wrap:before{}
    }/* min-width: 768px */

    @media screen and (min-width: 1025px) {
      .l-wrap {
        background-image: url(../../images/common/background/footer_bg_large.webp);
      }
      .l-wrap:before{
        height: 200px;
        width: 200px;
      }
    }/* min-width: 1025px */

    @media screen and (min-width: 1040px) {
      .l-wrap {}
      .l-wrap:before{}
    }/* min-width: 1040px */


 /* ==========================================================================
   Layout: Container (.l-container)
   役割: コンテンツ幅指定
   ========================================================================== */
    .l-container {
      margin: 0 auto;
      padding: 0 20px;
      }

    .l-container-narrow {
      margin: 0 auto;
      padding: 0 20px;
      }

    @media screen and (min-width: 768px) {
      .l-container {}

      .l-container-narrow {}
    }/* min-width: 768px */

    @media screen and (min-width: 800px) {
      .l-container {}

      .l-container-narrow {
        padding: 0;
        max-width: 800px;
      }
    }/* min-width: 800px */

    @media screen and (min-width: 1025px) {
      .l-container {}

      .l-container-narrow {}
    }/* min-width: 1025px */

    @media screen and (min-width: 1040px) {
      .l-container {
        padding: 0;
        max-width: 1000px;
      }

      .l-container-narrow {}      
    }/* min-width: 1040px */


 /* ==========================================================================
   Layout: Header (.l-header)
   役割: ヘッダー指定
   ========================================================================== */
   .l-header{}

    @media screen and (min-width: 768px) {
      .l-header{}

    }/* min-width: 768px */

    @media screen and (min-width: 1025px) {

    }/* min-width: 1025px */
    

 /* ==========================================================================
   Layout: Main (.l-main)
   役割: メインコンテンツ指定
   ========================================================================== */

 /* ==========================================================================
   Layout: Footer (.l-footer)
   役割: フッター指定
   ========================================================================== */
   .l-footer{
    overflow: hidden;
    padding: 5.9375rem 0 2.5rem;
   }

   .l-footer__logo{
    margin: 0 0 2.8125rem;
    position: relative;
   }
   .l-footer__logo:before,
   .l-footer__logo:after{
      background-position: center;
      background-repeat: no-repeat;
      background-size: contain;
      content: "";
      display: inline-block;
      position: absolute;
      z-index: var(--zindex-deco);
   }
   .l-footer__logo:before{
      background-image: url(../../images/common/illust/cloud_left.webp);
      height: 154px;
      left: -2rem;
      top: -3rem;
      width: 194px;
   }
   .l-footer__logo:after{
      background-image: url(../../images/common/illust/cloud_right_petal.webp);
      height: 180px;
      right: 0;
      top: -2rem;
      width: 159px;
   }

   .l-footer__logo-figure{
    margin: 0 auto;
    max-width: 252px;
   }

   .l-copyright{}

   .l-copyright__logo{
    margin: 0 auto;
    max-width: 158px;
   }

   .l-copyright__link{
    display: inline-block;
    width: 100%;
   }

   .l-copyright__text{
    font-size: 0.75rem;
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-one-line);
    margin: 1em 0 0;
   }

   
    @media screen and (min-width: 768px) {
      .l-footer{}

      .l-footer__logo{}
      .l-footer__logo:before,
      .l-footer__logo:after{}
      .l-footer__logo:before{}
      .l-footer__logo:after{}

      .l-footer__logo-figure{}

      .l-copyright{}

      .l-copyright__logo{}

      .l-copyright__link{}

      .l-copyright__text{}

    } /* min-width: 768px */

    @media screen and (min-width: 1025px) {
      .l-footer{
        padding: 6.25rem 0 4.125rem;
        position: relative;
      }
      .l-footer:before,
      .l-footer:after{
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        bottom: 0;
        content: "";
        display: inline-block;
        position: absolute;
      }
      .l-footer:before{
        background-image: url(../../images/common/illust/footer_deco01.webp);
        height: 225px;
        left: 0;
        width: 220px;
      }
      .l-footer:after{
        background-image: url(../../images/common/illust/footer_deco02.webp);
        height: 106px;
        right: 0;
        width: 114px;
      }

      .l-footer__logo{
        margin: 0 0 3.25rem;
      }
      .l-footer__logo:before,
      .l-footer__logo:after{
        display: none;
      }
      .l-footer__logo:before{}
      .l-footer__logo:after{}

      .l-footer__logo-figure{
        max-width: 294px;
      }

      .l-copyright{}

      .l-copyright__logo{
        max-width: 185px;
      }

      .l-copyright__link{}

      .l-copyright__text{}

    } /* min-width: 1025px */