@charset "UTF-8";

/* ! Frame Work Style ----------------------------------------------------------------------------------------------------

　■ 共通要素
　■ ページレイアウト
　■ メインレイアウト

---------------------------------------------------------------------------------------------------- */
/* ! ====================================================================================================
　■ 共通要素
==================================================================================================== */
.body_page {
  display: flex;
}
.body_page > * {
  flex: 1 1 auto;
  min-width: 10px;
}


/* ! ====================================================================================================
　■ ページレイアウト
==================================================================================================== */
/* ! ==================================================
　サイドバー・メイン
================================================== */
.layout_page {
  display: flex;
  width: 100%;
}
.layout_page > .aside {
  flex: 0 0 160px;
}
.layout_page > .main {
  flex: 1 1 auto;
  min-width: 10px;
}

/* ! サイドバー_min ============================== */
.layout_page > .aside_min {
  flex: 0 0 50px;
}


/* ! ====================================================================================================
　■ メインレイアウト
==================================================================================================== */
/* ! ==================================================
　ヘッド
================================================== */
.head_main {
  margin: 0 0 30px;
}

/* ! ==================================================
　フット
================================================== */
.foot_main {
  padding: 120px 0 0;
}


/* ! ====================================================================================================
　■ 詳細ページレイアウト
==================================================================================================== */
.layout_detail {
  display: flex;
  margin: -10px;
}
.layout_detail > * {
  padding: 10px;
}
.layout_detail > .layout_main {
  flex: 1 1 auto;
  min-width: 10px;
}
.layout_detail > .layout_aside {
  flex: 0 0 360px;
}



/* ! ====================================================================================================
　■ レイアウト
==================================================================================================== */
.layout {
  display: flex;
}
.layout.col {
  flex-direction: column;
}
.layout > .layout_head {
  flex: 0 0 300px;
  margin: 0 40px 0 0;
}
.layout > .layout_data {
  flex: 1 1 auto;
  min-width: 10px;
}


/* ライン */
.layout_head.line.left {
  border-left: 1px solid #B7BAC9;
  margin-left: 30px;
  padding-left: 30px; 
}

/* 分割 */
.layout_split {
  display: flex;
  flex: 1 1 auto;
  min-width: 10px;
  margin: -20px;
}
.layout_split > * {
  padding: 20px;
}
.layout_split > .layout_panel {
  flex: 1 1 0;
}
.layout_split > .layout_half {
  flex: 0 0 50%;
}

/* ヘッドを右側 */
[class*="head_right"] > .layout_head {
  margin: 0 0 0 20px;
}
/* ヘッドを左側 */
[class*="head_left"] > .layout_head {
  margin: 0 20px 0 0;
}


/* 個別 */
.head_40 > .layout_head {flex: 0 0 40px;}
.head_50 > .layout_head {flex: 0 0 50px;}
.head_60 > .layout_head {flex: 0 0 60px;}
.head_100 > .layout_head {flex: 0 0 100px;}
.head_140 > .layout_head {flex: 0 0 140px;}
.head_200 > .layout_head {flex: 0 0 200px;}
.head_240 > .layout_head {flex: 0 0 240px;}
.head_320 > .layout_head {flex: 0 0 320px;}
.head_360 > .layout_head {flex: 0 0 360px;}
.head_400 > .layout_head {flex: 0 0 400px;}
.head_600 > .layout_head {flex: 0 0 600px;}
.head_640 > .layout_head {flex: 0 0 640px;}