@charset "UTF-8";

:root{
  /* ===============================================
    * Color *
  =============================================== */
/*
  --color-primary: #111690;
  --color-secondary: #E1E9F7; */

  --color-primary: #0869D3;
  --color-secondary: #F4F8FD;
  --color-tertiary: #418CD3;

  --color-emphasis: #FF3300;
  --color-text-default: #262626;
  --color-text-form: var(--color-gray-400);
  --color-textlink: var(--color-primary);
  --color-border: #DED8D4;
  --color-green: #17B755;


  --color-black: #000;
  --color-white: #fff;

  --color-gray-100: #f5f5f5;
  --color-gray-200: #e6e4e4;
  --color-gray-300: #dbdbdb;
  --color-gray-400: #7B7B7B;
  --color-gray-500: #7e7e7e;
  --color-gray-600: #4e4e4e;
  --color-btn-yellow: #F7D665;
  --color-bg-form: #f4f7fd;

  --color-bg: #F8F7F5;
  --color-bg-1: #FDF7EB;
  --color-bg-2: #F8F6F0;

  --color-social-apple-primary: #000;
  --color-social-facebook-primary: #0866FF;
  --color-social-x-primary: #000;
  --color-social-yahoo-primary: #ff0033;
  --color-social-google-primary: #000;
  --color-social-line-primary: #06C755;
  --color-social-amazon-primary: #F0C14B;


    /* cicon */
    --cicon-1: var(--color-emphasis);
    --cicon-2: var(--color-emphasis);
    --cicon-3: #418DE6;
    --cicon-4: var(--color-green);
    --cicon-5: var(--color-emphasis);
    --cicon-6: var(--color-primary);
    --cicon-7: var(--color-primary);
    --cicon-8: var(--color-primary);
    --cicon-9: var(--color-primary);
    --cicon-10: #E59E00;

   /* arrow */
   --link-arrow: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2210.618%22%20height%3D%2224.27%22%20viewBox%3D%220%200%2010.618%2024.27%22%3E%0A%20%20%3Cdefs%3E%0A%20%20%20%20%3CclipPath%20id%3D%22clip-path%22%3E%0A%20%20%20%20%20%20%3Crect%20id%3D%22%E9%95%B7%E6%96%B9%E5%BD%A2_2696%22%20data-name%3D%22%E9%95%B7%E6%96%B9%E5%BD%A2%202696%22%20width%3D%2210.618%22%20height%3D%2224.27%22%20fill%3D%22%23fff%22%20stroke%3D%22%23707070%22%20stroke-width%3D%221%22%2F%3E%0A%20%20%20%20%3C%2FclipPath%3E%0A%20%20%3C%2Fdefs%3E%0A%20%20%3Cg%20id%3D%22%E3%83%9E%E3%82%B9%E3%82%AF%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97_8%22%20data-name%3D%22%E3%83%9E%E3%82%B9%E3%82%AF%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97%208%22%20clip-path%3D%22url(%23clip-path)%22%3E%0A%20%20%20%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_10%22%20data-name%3D%22%E3%83%91%E3%82%B9%2010%22%20d%3D%22M1.21%2C0%2C.012%2C1.093%2C8.8%2C10.72%2C0%2C20.811l1.222%2C1.065L10.969%2C10.7Z%22%20transform%3D%22translate(-1.426%201.078)%22%20fill%3D%22%23fff%22%2F%3E%0A%20%20%20%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_10_-_%E3%82%A2%E3%82%A6%E3%83%88%E3%83%A9%E3%82%A4%E3%83%B3%22%20data-name%3D%22%E3%83%91%E3%82%B9%2010%20-%20%E3%82%A2%E3%82%A6%E3%83%88%E3%83%A9%E3%82%A4%E3%83%B3%22%20d%3D%22M1.229-.424%2C11.371%2C10.691%2C1.251%2C22.3-.423%2C20.84%2C8.4%2C10.725-.412%2C1.073ZM10.567%2C10.7%2C1.19.424l-.754.688%2C8.763%2C9.6L.423%2C20.782l.77.671Z%22%20transform%3D%22translate(-1.426%201.078)%22%20fill%3D%22%23fff%22%2F%3E%0A%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E%0A');
  --link-arrow-small: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%226%22%20height%3D%2210%22%20viewBox%3D%220%200%206%2010%22%3E%0A%20%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_52042%22%20data-name%3D%22%E3%83%91%E3%82%B9%2052042%22%20d%3D%22M-4693.179-6343.244a1%2C1%2C0%2C0%2C1-.707-.293%2C1%2C1%2C0%2C0%2C1%2C0-1.414l3.293-3.293-3.293-3.293a1%2C1%2C0%2C0%2C1%2C0-1.414%2C1%2C1%2C0%2C0%2C1%2C1.414%2C0l4%2C4a1%2C1%2C0%2C0%2C1%2C0%2C1.414l-4%2C4A1%2C1%2C0%2C0%2C1-4693.179-6343.244Z%22%20transform%3D%22translate(4694.179%206353.244)%22%2F%3E%0A%3C%2Fsvg%3E%0A');
  --arrow-black: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%225.169%22%20height%3D%2210%22%20viewBox%3D%220%200%205.169%2010%22%3E%0A%20%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_210%22%20data-name%3D%22%E3%83%91%E3%82%B9%20210%22%20d%3D%22M4.5%2C4.669-.332.374A.5.5%2C0%2C0%2C1-.374-.332.5.5%2C0%2C0%2C1%2C.332-.374L4.5%2C3.331l4.168-3.7a.5.5%2C0%2C0%2C1%2C.706.042.5.5%2C0%2C0%2C1-.042.706Z%22%20transform%3D%22translate(0.5%209.5)%20rotate(-90)%22%20fill%3D%22%23262626%22%2F%3E%0A%3C%2Fsvg%3E%0A');
  --arrow-blue: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%227.414%22%20height%3D%2212%22%20viewBox%3D%220%200%207.414%2012%22%3E%0A%20%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_211%22%20data-name%3D%22%E3%83%91%E3%82%B9%20211%22%20d%3D%22M5%2C6.414-.707.707a1%2C1%2C0%2C0%2C1%2C0-1.414%2C1%2C1%2C0%2C0%2C1%2C1.414%2C0L5%2C3.586%2C9.293-.707a1%2C1%2C0%2C0%2C1%2C1.414%2C0%2C1%2C1%2C0%2C0%2C1%2C0%2C1.414Z%22%20transform%3D%22translate(1%2011)%20rotate(-90)%22%20fill%3D%22%230869d3%22%2F%3E%0A%3C%2Fsvg%3E%0A');
  --arrow-green: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%227.414%22%20height%3D%2212%22%20viewBox%3D%220%200%207.414%2012%22%3E%0A%20%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_211%22%20data-name%3D%22%E3%83%91%E3%82%B9%20211%22%20d%3D%22M5%2C6.414-.707.707a1%2C1%2C0%2C0%2C1%2C0-1.414%2C1%2C1%2C0%2C0%2C1%2C1.414%2C0L5%2C3.586%2C9.293-.707a1%2C1%2C0%2C0%2C1%2C1.414%2C0%2C1%2C1%2C0%2C0%2C1%2C0%2C1.414Z%22%20transform%3D%22translate(1%2011)%20rotate(-90)%22%20fill%3D%22%2317b755%22%2F%3E%0A%3C%2Fsvg%3E%0A');

  --arrow-blue-slide: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2210.096%22%20height%3D%2223.077%22%20viewBox%3D%220%200%2010.096%2023.077%22%3E%0A%20%20%3Cdefs%3E%0A%20%20%20%20%3CclipPath%20id%3D%22clip-path%22%3E%0A%20%20%20%20%20%20%3Crect%20id%3D%22%E9%95%B7%E6%96%B9%E5%BD%A2_67%22%20data-name%3D%22%E9%95%B7%E6%96%B9%E5%BD%A2%2067%22%20width%3D%2210.096%22%20height%3D%2223.077%22%20fill%3D%22%230869d3%22%20stroke%3D%22%23707070%22%20stroke-width%3D%221%22%2F%3E%0A%20%20%20%20%3C%2FclipPath%3E%0A%20%20%3C%2Fdefs%3E%0A%20%20%3Cg%20id%3D%22%E3%83%9E%E3%82%B9%E3%82%AF%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97_7%22%20data-name%3D%22%E3%83%9E%E3%82%B9%E3%82%AF%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97%207%22%20clip-path%3D%22url(%23clip-path)%22%3E%0A%20%20%20%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_10%22%20data-name%3D%22%E3%83%91%E3%82%B9%2010%22%20d%3D%22M-740.2-1512.607l-1.139-1.039%2C8.353-9.154-8.365-9.6%2C1.162-1.013%2C9.268%2C10.632Z%22%20transform%3D%22translate(739.999%201534.659)%22%20fill%3D%22%230869d3%22%2F%3E%0A%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E%0A');

  /* ===============================================
    * Font *
  =============================================== */

  /* Font Family */
  --font-yu: 'Yu Gothic';
  --font-hiragino : "Hiragino sans", 'Hiragino Kaku Gothic ProN';
  --font-lato : 'Lato';
  --font-ja : var(--font-yu) , var(--font-hiragino);
  --font-en : var(--font-lato);
  --font-main : var(--font-en), var(--font-ja), sans-serif ;

  /* --font-notosans: 'Noto Sans JP';
  --font-ja: var(--font-notosans);
  --font-en: var(--font-notosans);
  --font-main: var(--font-en), var(--font-ja), sans-serif; */


  /* Font Weight (fw = font-weight) */

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


  /* ===============================================
    * Animation *
  =============================================== */

  --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;


  /* ===============================================
    * Box Model *
  =============================================== */

  --container-fluid: 100%;
  --container-default: min(100%, 114rem);

  --inner-width: 92%;


  /* ===============================================
    * Header *
  =============================================== */

  --height-ticker: 0rem;
  --height-header-primary: 5.2rem;
  --height-header-global-nav: 0rem;
  --height-header: calc(var(--height-ticker) + var(--height-header-primary) + var(--height-header-global-nav));


  /* ===============================================
    * Page Top Button *
  =============================================== */

  --page-top-size: 5.3rem;
  --page-top-position-right: 1rem;
  --page-top-position-bottom: 3rem;

}

@media screen and (min-width: 768px){
  :root{
    /* ===============================================
      * Box Model *
    =============================================== */

    --inner-width: min(71.25%, 114rem);
    --form-inner-width: 78rem;


    /* ===============================================
      * Header *
    =============================================== */

    --height-header-global-nav: 5.2rem;


    /* ===============================================
      * Page Top Button *
    =============================================== */

    --page-top-size: 7.1rem;
    --page-top-position-right: 4rem;
    --page-top-position-bottom: 4rem;
  }
}