@charset "UTF-8";

/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/*    カラー設定                                    */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */

 /* カラー定義
    初期値は default のみだが、
    任意の文字列をキーとして使って色を定義すれば、
    サイト内で複数のカラー定義を持てる
  ------------------------------------ */

// 背景等の基調カラー
$base-color-map: (
  default:  rgb(81,72,63)
 );
// ロゴ等の基本カラー
$main-color-map:  (
  default:  rgb(160,155,215)
);
$main-color-deep-map:  (
  default:  rgb(120,115,195)
);
// アクセントカラー
$accent-color-map: (
  default:  #ee3
);


 /* 引数でキーを指定して
    上記のマップで定義したカラーを返すfunction

    $contents-type: "second-color";
    のように $contents-type のキー値を変えておけば
    getBaseColor($contents-type);
    を使用した際に、別カラーをセットできる仕組み
    
    $base-color-map: (
      default:       rgb(81,72,63)
      second-color:  rgb(81,72,63)
    );

  ------------------------------------ */
@function getBaseColor($key: default) {
    @return map-get($base-color-map, $key);
}
@function getMainColor($key: default) {
    @return map-get($main-color-map, $key);
}
@function getMainColorDeep($key: default) {
    @return map-get($main-color-deep-map, $key);
}
@function getAccentColor($key: default) {
    @return map-get($accent-color-map, $key);
}


 /* カラー定義
  ------------------------------------ */
$text-color:    #fff;
$base-color:    getBaseColor($contents-type);
$main-color:    getMainColor($contents-type);
$main-color-deep:    getMainColorDeep($contents-type);
$accent-color:  getAccentColor($contents-type);


/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/*    プロパティ                                    */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */

//ページ幅
$page-width-max:  1200px;  //主要コンテンツの最大幅
$page-width-min:   350px;  //主要コンテンツの最小幅

//一般的な画像のアスペクト比
$aspect-ratio: 2 / 3;

//ウインドウ内部の左右余白
$pc-padding: 5rem; 
$sp-padding: 1.5rem;

//フォントサイズを定義 （文字サイズ可変にするためremにはしない）
$font-size-xl: 175.0%;  //2.8rem
$font-size-ll: 150.0%;  //2.4rem
$font-size-l:  125.0%;  //2.0rem
$font-size-m:  112.5%;  //1.8rem
$font-size-d:  100.0%;  //1.6rem
$font-size-s:   87.5%;  //1.4rem
$font-size-ss:  75.0%;  //1.2rem
$font-size-xs:  62.5%;  //1.0rem


//ブレイクポイントを定義
$breakpoint-s: 400px !default;
$breakpoint-m: 768px !default;  // startup.js の breakpoint_m_value と同じ値で設定する
$breakpoint-l: 1200px !default;



/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/*    継承用（試作）                                */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */

 /* 仮）疑似要素

        ::before, ::after で要素付加するときに書きがちな処理
  ------------------------------------ */
      %_pseudo_element{
        content: "";
        position: absolute;
        display: inline-flex;
        background-size: contain;
        background-position: 50% 50%;
        background-repeat: no-repeat;
      }

 /* 画像の伸縮表示
      img要素に対して適用する。imgの幅と高さも定義すること
      上記「アスペクト比を保った表示ボックス」と併用推奨
  ------------------------------------ */
      // エリア内に収めるように表示 
      ._img_contain,
      %_img_contain {
        object-fit: contain!important;
      }
  
      // エリア内をカバーするように表示 
      ._img_cover,
      %_img_cover {
        object-fit: cover!important;
      }


/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/*    mixin 定義                                    */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */

 /* アスペクト比を保った表示ボックス
    ※ 旧ブラウザを無視するなら  aspect-ratio: ●/●; で済むが
       非対応ブラウザにも適用したい場合の処理
       ・横幅は基本100％で扱う。100%幅以外にしたい場合はこの要素よりも親要素で適用させる
       
    想定しているHTML構造
      <p class="Image">
        <img src="XXXX">
      </p>
    などで、.Image に適用させ、img に object-fit でフィット方法を併記して使う
       
       
    適用例 ）
     .Image{
         @include aspect-ratio(); //デフォルトのアスペクト比を使う場合
     }     
     .Image{
         @include aspect-ratio(6 / 19); //個別にアスペクト比を指定して使う場合
     } 
  ------------------------------------------------------------------------ */
  @mixin aspect-ratio($ratio: $aspect-ratio) {   
    width: 100%;
    position: relative;
    padding-top: calc(100% * #{$ratio});  // padding-top は幅に対しての％になるのを利用してボックスの高さを定める
    > *{
      // 子要素をボックス内にフィットさせるための記述
      width: 100%;
      height: 100%;
      position: absolute;        
      top: 0; right: 0; bottom: 0; left: 0;
    }
  }


  
 /* flex 関連のプロパティをまとめて定義
       
    適用例 ）
     .hogehoge{
         @include flex();
     }  
     .hogehoge{
         @include flex(center, flex-end);
     }  
  ------------------------------------------------------------------------ */
  @mixin flex($justify:space-between, $align:center) {
    display: flex;
    justify-content: $justify;
    align-items: $align;
  }






 /* レスポンシブ 対応用 ブレイクポイントによる条件分岐 
    適用例 ）
    @include media-query(under-bp-m) {
       $breakpoint-m よりも小さいウィンドウ幅の処理をここに書く
    }     
  ------------------------------------------------------------------------ */

//メディアクエリを定義
$breakpoints: (
     'over-bp-s': 'screen and (min-width: ' +  $breakpoint-s        + ')',
    'under-bp-s': 'screen and (max-width: ' + ($breakpoint-s - 1px) + ')',
     'over-bp-m': 'screen and (min-width: ' +  $breakpoint-m        + '), print',
    'under-bp-m': 'screen and (max-width: ' + ($breakpoint-m - 1px) + ')',
     'over-bp-l': 'screen and (min-width: ' +  $breakpoint-l        + ')',
    'under-bp-l': 'screen and (max-width: ' + ($breakpoint-l - 1px) + '), print',
) !default;

//メディアクエリを呼び出す mixin を定義
@mixin media-query($breakpoint) {
  @if map-has-key($breakpoints, $breakpoint) {
      @media #{ map-get($breakpoints, $breakpoint) } {
          @content;
      }
  } @else {
      @warn "Unfortunately, no value could be retrieved from `#{$breakpoint}`. "
      + "Please make sure it is defined in `$breakpoints` map.";
  }
}