/*
 * @file
 * Provides the layout styles for single layout section.
 */

/* 共通：コンテナの基本設定 */
.double-container {
  display: flex;
  width: 100%;
  flex-direction: row;
  flex-wrap: wrap; /* 子要素が100%になった時に折り返せるようにする */
}

/* 比率の設定：PC・タブレット用 */
@media (min-width: 769px) {
  .flex-1-1 .left-col  { flex: 1; }
  .flex-1-1 .right-col { flex: 1; }

  .flex-2-1 .left-col  { flex: 2; }
  .flex-2-1 .right-col { flex: 1; }

  .flex-3-1 .left-col  { flex: 3; }
  .flex-3-1 .right-col { flex: 1; }

  .flex-345-1 .left-col  { flex: 3.45; }
  .flex-345-1 .right-col { flex: 1; }

  .flex-4-1 .left-col  { flex: 4; }
  .flex-4-1 .right-col { flex: 1; }

  .flex-1-2 .left-col  { flex: 1; }
  .flex-1-2 .right-col { flex: 2; }

  .flex-1-3 .left-col  { flex: 1; }
  .flex-1-3 .right-col { flex: 3; }

  .flex-1-345 .left-col  { flex: 1; }
  .flex-1-345 .right-col { flex: 3.45; }

  .flex-1-4 .left-col  { flex: 1; }
  .flex-1-4 .right-col { flex: 4; }
}

/* スマホ用設定：一括で100%にする */
@media (max-width: 768px) {
  .double-container {
    flex-direction: column; /* 基本は縦並び */
  }

  /* クラスがついている時だけ逆転させる */
  .double-container.column-reverse {
    flex-direction: column-reverse;
  }

  /* 比率を無視して全幅にする */
  .left-col,
  .right-col {
    flex: 0 0 100% !important;
    max-width: 100%;
  }
}