@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700;900&family=Noto+Serif+JP:wght@300;400;500;600;700;900&family=Zen+Maru+Gothic:wght@400;500;700;900&family=M+PLUS+1+Code:wght@300;400;500;600;700&display=swap');

// 色
$color-main: #363333;
$color-text: #000;
$color-active: #F7A918;
$color-base: #28468C;
//$color-base: #7D76AD;
$color-background: #fff;
$color-disable: #888888;
$textColor: #1E2330;
$primary: #4D18FF;

// フォント
//フォント指定
$sns_font_gothic: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", Osaka, Helvetica, Arial, sans-serif;
$sns_font_default: 'Noto Sans JP', sans-serif;
$sns_font_mintyou: '游明朝', 'Yu Mincho', YuMincho, 'Noto Serif JP', serif;
$sns_font_title: 'M PLUS 1 Code', sans-serif;


// レイアウト幅
$layout-screen-inner: 1920px;
$layout-width-inner: 1400px;
// ブレークポイント
$breakpoints: (
  "sp": "(max-width: 767px)",
  "tab": "(min-width: 768px) and (max-width: #{$layout-width-inner - 1px})",
  //タブレットサイズからスマホまで
  "tab-down": "(max-width: #{$layout-width-inner - 1px})",
  //タブレットサイズより小さいものすべて
  "pc": "(min-width: #{$layout-width-inner}) and (max-width: #{$layout-screen-inner })",
  //カンプの指定サイズからタブレットサイズまで
  "pc-up": "(min-width:  #{$layout-width-inner + 1px})",
  //インナーの指定サイズより大きい
  "sr-up": "(min-width:  #{$layout-screen-inner + 1px})",
  //スクリーンの指定サイズより大きい
  "retina": "only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx)",
);

// メディアクエリー
@mixin mq($breakpoint: sp) {
  @media #{map-get($breakpoints, $breakpoint)} {
    @content;
  }
}

/* loading
===================================== */
.itmar_loading {
  font-size: clamp(4.5px, 0.52vw, 15px);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  opacity: 0.7;
  z-index: 100;

  &.body {
    position: fixed;
  }

  .loadingMsg {
    position: absolute;
    color: #eee;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 20px;
  }

  .loading_icon {
    box-sizing: border-box;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    position: absolute;
    top: -80%;
    left: 50%;
    transform: translateX(-50%);
    box-shadow:
      0 -30px 0 #eee,
      /*  上  */
      21px -21px 0 #ddd,
      /* 右上 */
      30px 0 0 #ccc,
      /*  右  */
      21px 21px 0 #bbb,
      /* 右下 */
      0 30px 0 #aaa,
      /*  下  */
      -21px 21px 0 #999,
      /* 左下 */
      -30px 0 0 #666,
      /*  左  */
      -21px -21px 0 #000;
    /* 左上 */
    animation: load_rotate 1s steps(8) 0s infinite;
  }
}

/* result msg
===================================== */
#result_msg {
  font-size: clamp(12px, 1.2vw, 25px);
  position: fixed;
  display: none;
  left: 50%;
  transform: translateX(-50%);
  top: 15em;
  border-radius: 10px;
  background-color: rgba(0, 0, 0, 0.7);
  padding: 1em 2em;
  color: #fff;
  z-index: 70;

  @include mq(sp) {
    font-size: calc(100vw / 39);
    padding: 1em;
  }
}

/* sp-only
===================================== */
.sp-only {
  display: none;
}

@include mq(sp) {
  .sp-only {
    display: inline;
  }
}


/* modalバックグラウンド
===================================== */
.modal_bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #5c5c5c;
  opacity: 0.8;
  z-index: 40;
  display: none;

  &.white {
    opacity: 0.9;
    background-color: #fff;
  }
}

/* keyframes
===================================== */
@keyframes load_rotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}