@charset "UTF-8";

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

　■ 共通要素
　■ ページレイアウト
　■ メインレイアウト
　■ 画面追従(sticky)

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


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

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


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

/* ! ==================================================
　フット
================================================== */
.foot_main {
  display: flex;
  padding: 90px 0 0;
  padding: 30px;
  margin: auto 0 0;
}
.foot_main .copyright {
  color: #8E919E;
  font: 300 11px/1em 'helvetica','noto sans japanese',sans-serif;
  margin: 0 0 0 auto;
}


/* ! ====================================================================================================
　■ 詳細ページレイアウト
==================================================================================================== */
.layout_detail {
  display: flex;
  margin: -10px;
}
.layout_detail + .layout_detail {
  margin-top: 10px;
}
.layout_detail > * {
  padding: 10px;
}
.layout_detail > .layout_main {
  flex: 1 1 auto;
  min-width: 10px;
}
.layout_detail > .layout_aside {
  flex: 0 0 400px;
}
@media screen and (max-width: 1366px){
  .layout_detail > .layout_aside {
    flex: 0 0 340px;
  }
}

/* 個別 */
.head_600 > .layout_aside {
  flex: 0 0 600px;
}

/* ボタンエリア */
.layout_detail > [class*="btnarea"] {
  width: 100%;
}



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



/* 個別_headの位置(マージン) */
.head_left > .layout_head {
  margin: 0 20px 0 0;
}
.head_right > .layout_head {
  margin: 0 0 0 20px;
}

/* ハーフレイアウト */
.layout.half{
  margin: -5px;
  width: auto;
}
.layout.half .auto_layout{
  flex: 1 1 auto;
  min-width: 50%;
  padding: 5px;
}
.layout.half .auto_layout.layout_300 {
  flex: 0 0 240px;
  min-width: 240px;
}

/* ハーフレイアウト 薄く */
.layout.half.thin{
  margin: -5px;
}
.layout.half.thin > .auto_layout {
  padding: 5px;
}

/* 個別 */
.head_60 > .layout_head {
  flex: 0 0 60px;
  margin: 0 10px 0 0;
}
.head_100 > .layout_head {
  flex: 0 0 100px;
  margin: 0 20px 0 0;
}
.head_140 > .layout_head {
  flex: 0 0 140px;
  margin: 0 20px 0 0;
}
.head_150 > .layout_head {
  flex: 0 0 150px;
  margin: 0 20px 0 0;
}
.head_200 > .layout_head {
  flex: 0 0 200px;
}
.head_240 > .layout_head {
  flex: 0 0 240px;
}
.head_300 > .layout_head {
  flex: 0 0 300px;
}
.head_320 > .layout_head {
  flex: 0 0 320px;
  margin: 0 40px 0 0;
}
.head_360 > .layout_head {
  flex: 0 0 360px;
}
.head_400 > .layout_head {
  flex: 0 0 400px;
}
.head_500 > .layout_head {
  flex: 0 0 500px;
}
.head_600 > .layout_head {
  flex: 0 0 600px;
}


/* レスポンシブ */
@media screen and (max-width: 1366px){
  .layout_col_1366 {
    flex-direction: column;
  }
}
@media screen and (max-width: 1279px){
  .layout_col_1280 {
    flex-direction: column;
  }
  .layout_col_1280 > .layout_head {
    margin: 10px 0 0;
  }
}


/* 分割 */
.layout_split {
  display: flex;
  flex: 1 1 auto;
  min-width: 10px;
  margin: -10px;
}
.layout_split > * {
  padding: 10px;
}
.layout_split > .layout_panel {
  flex: 1 1 0;
}
.layout_split > .layout_half {
  flex: auto;
  width: 50%;
}
@media screen and (max-width: 1279px){
  .layout_split.col_1280 {
    flex-direction: column;
  }
  .layout_split.col_1280 > .layout_half {
    width: 100%;
  }
}

/* ! ====================================================================================================
　■ 画面追従(sticky)
==================================================================================================== */
.sticky {
  postion: -webkit-sticky;
  position: sticky;
  top: 0;
}

/* ! ====================================================================================================
　線ありタイトル(ヘッド)
==================================================================================================== */
.head.line {
  border-bottom: 1px solid #A2ADC1;
  margin: 0 0 10px;
  padding: 0 0 5px;
}


/* ! ====================================================================================================
　■ フレームワークレイアウト
==================================================================================================== */
.l {
  display: flex;
  flex-wrap: wrap;
  /* なくすとレスポンシブで折り返さない */
  flex: auto;
  min-width: 10px;
  margin: -5px;
}
.l.nowrap{
  flex-wrap: nowrap;
}
.l.start {
  align-items: flex-start;
  align-content: flex-start;
}
.l.center {
  align-items: center;
}
/* 上限を100%にしたい場合 */
.l.fit{
  max-width: calc(100% + 10px);
}
@media screen and (max-width: 1279px){
  .l.wrap_m {
    flex-wrap: wrap;
  }
}


.l + .l {
  margin-top: 5px;
}
.l > * {
  display: flex;
  flex-direction: column;
  padding: 5px;
}
.l > .row {
  flex-direction: row;
  align-items: stretch;
}
.l.nospace {
  margin: 0;
}
.l.nospace > * {
  padding: 0;
}
.l[data-space="20"]{
  margin: -10px;
}
.l[data-space="20"] > * {
  padding: 10px;
}
.l[data-space="20"] + .l[data-space="20"] {
  margin-top: 10px;
}
.l[data-space="30"]{
  margin: -15px;
}
.l[data-space="30"] > * {
  padding: 15px;
}
.l[data-space="30"] + .l[data-space="30"] {
  margin-top: 15px;
}
.l[data-space="40"]{
  margin: -20px;
}
.l[data-space="40"] > * {
  padding: 20px;
}
.l[data-space="40"] + .l[data-space="40"] {
  margin-top: 20px;
}
.l[data-space="60"]{
  margin: -30px;
}
.l[data-space="60"] > * {
  padding: 30px;
}
.l[data-space="60"] + .l[data-space="60"] {
  margin-top: 30px;
}
.l[data-space="80"]{
  margin: -40px;
}
.l[data-space="80"] > * {
  padding: 40px;
}
.l[data-space="80"] + .l[data-space="80"] {
  margin-top: 40px;
}
.l.space {
  margin: -15px;
}
.l.space > * {
  padding: 15px;
}

/* 結合 */
.l.union {
  margin: 0;
}
.l.union > * {
  padding: 0;
  margin: -1px 0 0;
}
.l_1 {
  flex: 0 0 8.3333%;
  width: 8.3333%;
}
.l_2 {
  flex: 0 0 16.6666%;
  width: 16.6666%;
}
.l_3 {
  flex: 0 0 25%;
  width: 25%;
}
.l_4 {
  flex: 0 0 33.3333%;
  width: 33.3333%;
}
.l_5 {
  flex: 0 0 41.6666%;
  width: 41.6666%;
}
.l_6 {
  flex: 0 0 50%;
  width: 50%;
}
.l_7 {
  flex: 0 0 58.3333%;
  width: 58.3333%;
}
.l_8 {
  flex: 0 0 66.6666%;
  width: 66.6666%;
}
.l_9 {
  flex: 0 0 75%;
  width: 75%;
}
.l_10 {
  flex: 0 0 83.3333%;
  width: 83.3333%;
}
.l_11 {
  flex: 0 0 91.6666%;
  width: 91.6666%;
}
.l_12 {
  flex: 0 0 100%;
  width: 100%;
}
.l_fix {
  flex: 0 0 200px;
  width: 200px;
}
.l_fix_30 {
  flex: 0 0 30px;
  width: 30px;
}
.l_fix_40 {
  flex: 0 0 40px;
  width: 40px;
}

.l_fix_50 {
  flex: 0 0 50px;
  width: 50px;
}
.l_fix_60 {
  flex: 0 0 60px;
  width: 60px;
}
.l_fix_100 {
  flex: 0 0 100px;
}
.l_fix_105 {
  flex: 0 0 105px;
}
.l_fix_120 {
  flex: 0 0 120px;
}
.l_fix_160 {
  flex: 0 0 160px;
}
.l_fix_200 {
  flex: 0 0 200px;
}
.l_fix_220 {
  flex: 0 0 220px;
}
.l_fix_230 {
  flex: 0 0 230px;
}
.l_fix_240 {
  width: 240px;
  min-width: 240px;
}
.l_fix_250 {
  width: 250px;
  min-width: 250px;
}
.l_fix_260 {
  width: 260px;
  min-width: 260px;
}
.l_fix_280 {
  width: 280px;
  min-width: 280px;
}
.l_fix_300 {
  width: 300px;
  flex: 0 0 300px;
}
.l_fix_320 {
  flex: 0 0 320px;
  width: 320px;
}
.l_fix_340 {
  flex: 0 0 340px;
  width: 340px;
}
.l_fix_360 {
  flex: 0 0 360px;
  width: 360px;
}
.l_fix_400 {
  width: 400px;
}
.l_fix_440 {
  width: 440px;
}
.l_fix_500 {
  width: 500px;
}
.l_auto {
  flex: 1 1 auto;
  min-width: 1px;
}
@media screen and (max-width: 1440px){
  .l_reverse_xl {
    flex-direction: row-reverse;
  }
  .l_2_xl {
    flex: 0 0 16.6666%;
    width: 16.6666%;
  }
  .l_3_xl {
    flex: 0 0 25%;
    width: 25%;
  }
  .l_4_xl {
    flex: 0 0 33.3333%;
    width: 33.3333%;
  }
  .l_5_xl {
    flex: 0 0 41.6666%;
    width: 41.6666%;
  }
  .l_6_xl {
    flex: 0 0 50%;
    width: 50%;
  }
  .l_7_xl {
    flex: 0 0 58.3333%;
    width: 58.3333%;
  }
  .l_8_xl {
    flex: 0 0 66.6666%;
    width: 66.6666%;
  }
  .l_9_xl {
    flex: 0 0 75%;
    width: 75%;
  }
  .l_10_xl {
    flex: 0 0 83.3333%;
    width: 83.3333%;
  }
  .l_12_xl {
    flex: 0 0 100%;
    width: 100%;
  }
}
@media screen and (max-width: 1366px){
  .l_2_l {
    flex: 0 0 16.6666%;
    width: 16.6666%;
  }
  .l_3_l {
    flex: 0 0 25%;
    width: 25%;
  }
  .l_4_l {
    flex: 0 0 33.3333%;
    width: 33.3333%;
  }
  .l_5_l {
    flex: 0 0 41.6666%;
    width: 41.6666%;
  }
  .l_6_l {
    flex: 0 0 50%;
    width: 50%;
  }
  .l_7_l {
    flex: 0 0 58.3333%;
    width: 58.3333%;
  }
  .l_8_l {
    flex: 0 0 66.6666%;
    width: 66.6666%;
  }
  .l_9_l {
    flex: 0 0 75%;
    width: 75%;
  }
  .l_10_l {
    flex: 0 0 83.3333%;
    width: 83.3333%;
  }
  .l_12_l {
    flex: 0 0 100%;
    width: 100%;
  }
}
@media screen and (max-width: 1279px){
  .l.wrap_m {
    flex-wrap: wrap;
  }
  .l_reverse_m {
    flex-direction: row-reverse;
  }
  .l_2_m {
    flex: 0 0 16.6666%;
    width: 16.6666%;
  }
  .l_3_m {
    flex: 0 0 25%;
    width: 25%;
  }
  .l_4_m {
    flex: 0 0 33.3333%;
    width: 33.3333%;
  }
  .l_5_m {
    flex: 0 0 41.6666%;
    width: 41.6666%;
  }
  .l_6_m {
    flex: 0 0 50%;
    width: 50%;
  }
  .l_7_m {
    flex: 0 0 58.3333%;
    width: 58.3333%;
  }
  .l_8_m {
    flex: 0 0 66.6666%;
    width: 66.6666%;
  }
  .l_9_m {
    flex: 0 0 75%;
    width: 75%;
  }
  .l_10_m {
    flex: 0 0 83.3333%;
    width: 83.3333%;
  }
  .l_12_m {
    flex: 0 0 100%;
    width: 100%;
  }
}
@media screen and (max-width: 1080px){
  .l_2_s {
    flex: 0 0 16.6666%;
    width: 16.6666%;
  }
  .l_3_s {
    flex: 0 0 25%;
    width: 25%;
  }
  .l_4_s {
    flex: 0 0 33.3333%;
    width: 33.3333%;
  }
  .l_5_s {
    flex: 0 0 41.6666%;
    width: 41.6666%;
  }
  .l_6_s {
    flex: 0 0 50%;
    width: 50%;
  }
  .l_7_s {
    flex: 0 0 58.3333%;
    width: 58.3333%;
  }
  .l_8_s {
    flex: 0 0 66.6666%;
    width: 66.6666%;
  }
  .l_9_s {
    flex: 0 0 75%;
    width: 75%;
  }
  .l_10_s {
    flex: 0 0 83.3333%;
    width: 83.3333%;
  }
  .l_12_s {
    flex: 0 0 100%;
    width: 100%;
  }
}