@charset "UTF-8";

/* =======================================================================

  Variables.css

======================================================================= */


:root {

  /* =======================================================================
    色
  ======================================================================= */
  --color-primary: #A63A50;
  --color-secondary: #BE9117;

  --color-bg-primary: #EAD9DD;
  --color-text-default: #414042;
  --color-bg-breadcrumb-gray: #FAF8F4;

  --color-notice: #dc3232;

  --color-bg-blue:#E6F1F4;
  --color-bg-gray:#F0EFEC;
  --color-gray-rgb: rgba(141, 139, 127, .5);

  /* =======================================================================
    Container
  ======================================================================= */
  --design-width-large: 144rem;
  
  /* 下記は未定 */
  --design-width-medium: 114rem;
  --design-width-moderate: 84rem;
  --design-width-moderate-small: 74rem;
  --design-width-small: 73.4rem;
  --design-width-lower-large: 144rem;

  /* =======================================================================
    フォント関係
  ======================================================================= */
  --font-noto-san: "Noto Sans JP";
  --font-jp: var(--font-noto-san), sans-serif;
  --font-montserrat: "Montserrat";
  --font-en: var(--font-montserrat), sans-serif;

  --font-main: var(--font-montserrat),var(--font-noto-san),sans-serif;

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-demi: 600;
  --fw-bold: 700;

  /* =======================================================================
    アニメーション
  ======================================================================= */
  --transition-duration: 0.3s;
  --transition-timing-function: ease;
  --transition-default: var(--transition-duration) var(--transition-timing-function);
  --hover-opacity: 0.6;


  /* ===============================================
    * z-index *
  =============================================== */

  --zindex-base: 1;
  --zindex-floating-element: 10;
  --zindex-header: 20;
  --zindex-hamburgermenu-bg: 30;
  --zindex-hamburgermenu-contents: 40;

 /* =======================================================================
  Container
  ======================================================================= */
  --container-default:100%;
  --container-thin:100%;
  --container-middle:100%;
  --padding-horizontal-global: 2rem;

  /* =======================================================================
  Height
  ======================================================================= */
  --header-ticker-height:36px;
  --header-middle-height:70px;

  --header-height: calc(var(--header-ticker-height) + var(--header-middle-height));
}

@media (min-width: 769px) {
  :root{
    --header-middle-height:100px;
  }
}

@media (min-width: 768px) {
  :root{
    /* =======================================================================
    Container
    ======================================================================= */
    --container-default:min(100%, calc(140rem + (var(--padding-horizontal-global) * 2)));
    --container-thin:min(100%, calc(96rem + (var(--padding-horizontal-global) * 2)));
    --container-middle:min(100%, calc(124rem + (var(--padding-horizontal-global) * 2)));
    /* --padding-horizontal-global: min(4.375%, 7rem); */
    --padding-horizontal-global: min(2.85svw,4rem);
  }
}

@media (min-width: 769px){
  :root{
    /* =======================================================================
    Height
    ======================================================================= */
    --header-ticker-height:38px;
    --header-middle-height:100px;
    --header-navi-height:70px;

    --header-height: calc(var(--header-ticker-height) + var(--header-middle-height) + var(--header-navi-height));
  }
}


@media (max-width: 767px) {
  :root{
  /* ===============================================
    * z-index *
  =============================================== */
  --height-header:7.2rem;
  }
}

@media (max-width: 430px) {
  :root{
    --header-middle-height:70px;
  }
}