@charset "UTF-8";
/* ===================================================================
CSS information
 file name  :  layout.css
 style info :  全ページ共通 枠組みレイアウト生成用 cssの定義
=================================================================== */
.inner {
  max-width: 980px;
  width: calc(100% - 20px);
  margin-left: auto;
  margin-right: auto; }
  @media only screen and (max-width: 979px) {
    .inner {
      width: calc(100% - 16%); } }
  @media only screen and (max-width: 690px) {
    .inner {
      width: calc(100% - 8%); } }

.inner02 {
  max-width: 1120px;
  width: calc(100% - 20px);
  margin-left: auto;
  margin-right: auto; }
  @media only screen and (max-width: 979px) {
    .inner02 {
      width: calc(100% - 16%); } }
  @media only screen and (max-width: 690px) {
    .inner02 {
      width: calc(100% - 8%); } }



.inner_w {
  max-width: 1034px;
  width: calc(100% - 20px);
  margin-left: auto;
  margin-right: auto; }
  @media only screen and (max-width: 979px) {
    .inner_w {
      width: calc(100% - 8%); } }
  @media only screen and (max-width: 690px) {
    .inner_w {
      width: calc(100% - 8%); } }

/****************************************************************/
/* ftl */
/****************************************************************/
.flt {
  float: left; }

.flr {
  float: right; }

@media only screen and (max-width: 690px) {
  .flt {
    float: none; }
  .flr {
    float: none; } }

/****************************************************************/
/* column */
/****************************************************************/
/* column 2  ************/
.col2:after, .col2_m:after, .col2_ti:after, .col2_it:after {
  content: "";
  display: table;
  clear: both; }

.col2 .flt, .col2 .flr {
  width: 50%; }

.col2_m .flt, .col2_m .flr {
  width: 49%; }

.col2_ti .flt {
  width: calc(18.5% * 3 + 1.875% * 2); }

.col2_ti .flr {
  width: calc(18.5% * 2 + 1.875%); }

.col2_it .flt {
  width: calc(18.5% * 2 + 1.875%); }

.col2_it .flr {
  width: calc(18.5% * 3 + 1.875% * 2); }

/* column 3 ************/
.col3:after, .col3_m:after {
  content: "";
  display: table;
  clear: both; }

.col3 .flt, .col3 .flr {
  width: 33.33333%; }

.col3_m .flt, .col3_m .flr {
  width: 32%; }

.col3_m .flt {
  margin-right: 2%; }

/* column 4 ************/
.col4:after, .col4_m:after {
  content: "";
  display: table;
  clear: both; }

.col4 .flt, .col4 .flr {
  width: 25%; }

.col4_m .flt, .col4_m .flr {
  width: 23.5%; }

.col4_m .flt {
  margin-right: 2%; }

/* column 5 ************/
.col5:after, .col5_m:after {
  content: "";
  display: table;
  clear: both; }

.col5 .flt, .col5 .flr {
  width: 20%; }

.col5_m .flt, .col5_m .flr {
  width: 18.5%; }

.col5_m .flt {
  margin-right: 1.875%; }

@media only screen and (max-width: 979px) {
  /* column 4 ************/
  .col4 .flt, .col4 .flr {
    width: 50%; }
  .col4_m .flt, .col4_m .flr {
    width: 48%; }
  .col4_m .flt:not(:nth-child(2)) {
    margin-right: 4%; }
  .col4_m .flt:nth-child(2) {
    margin-right: 0; }
  .col4_m .flt {
    margin-bottom: 20px; } }

@media only screen and (max-width: 690px) {
  .col2 .flt, .col2 .flr {
    width: 100%; }
  .col2 .flt {
    margin-bottom: 20px; }
  .col2_m .flt, .col2_m .flr {
    width: 100%; }
  .col2_m .flt {
    margin-bottom: 20px; }
  .col2_ti .flt {
    width: 100%; }
  .col2_ti .flr {
    width: 100%; }
  .col2_ti .flt {
    margin-bottom: 20px; }
  .col2_it .flt {
    width: 100%; }
  .col2_it .flr {
    width: 100%; }
  .col2_it .flt {
    margin-bottom: 20px; }
  .col3 .flt, .col3 .flr {
    width: 100%; }
  .col3_m .flt, .col3_m .flr {
    width: 100%; }
  .col3_m .flt {
    margin-right: 0;
    margin-bottom: 20px; }
  .col4 .flt, .col4 .flr {
    width: 100%; }
  .col4_m .flt, .col4_m .flr {
    width: 100%; }
  .col4_m .flt {
    margin-right: 0; }
  .col5 .flt, .col5 .flr {
    width: 100%; }
  .col5_m .flt, .col5_m .flr {
    width: 100%; }
  .col5_m .flt {
    margin-right: 0;
    margin-bottom: 20px; } }