@charset "UTF-8";
/* ===================================================================
CSS information
 file name  :  layout.css
 style info :  レイアウト cssの定義
=================================================================== */
/*@mixin title02{
	padding: 80px 0;
    width: 100%;
    margin: 0;
	display: table;
    background-color: $accent-color2;
    @media only screen and (max-width: 690px) {
    	padding: 40px 0;
    }
}*/
/*-----------------------------------------------------------------*/
/* contents width */
/*-----------------------------------------------------------------*/
#contents,
.inner {
  width: 100%;
  padding: 0 24px;
  margin-right: auto;
  margin-left: auto;
  max-width: calc(1130px + 48px);
}

@media only screen and (max-width: 690px) {
  #contents,
  .inner {
    padding: 0 3%;
  }
}

body#top #contents {
  margin-top: 24px;
}

@media only screen and (max-width: 690px) {
  body#top #contents {
    margin-bottom: 16px;
  }
}

#contents_left,
.inner_left {
  float: left;
  width: 800px;
}

@media only screen and (max-width: 1129px) {
  #contents_left,
  .inner_left {
    width: calc(100% - 264px);
  }
}

@media only screen and (max-width: 979px) {
  #contents_left,
  .inner_left {
    float: none;
    width: 100%;
  }
}

#contents_right,
.inner_right {
  float: right;
  width: 304px;
}

@media only screen and (max-width: 1129px) {
  #contents_right,
  .inner_right {
    width: 240px;
  }
}

@media only screen and (max-width: 979px) {
  #contents_right,
  .inner_right {
    float: none;
    width: 100%;
    margin-top: 30px;
  }
}

@media only screen and (max-width: 979px) {
  #contents {
    width: 100%;
    margin-bottom: 40px;
  }
  #contents_left {
    float: none;
    width: 100%;
  }
  #contents_right {
    float: none;
    width: 100%;
    margin-top: 40px;
  }
}

@media only screen and (max-width: 690px) {
  #contents {
    width: 100%;
    margin-bottom: 30px;
  }
  #contents_right {
    margin-top: 30px;
  }
}

/*-----------------------------------------------------------------*/
/* float */
/*-----------------------------------------------------------------*/
.flt_pc {
  float: left;
}

.flr_pc {
  float: right;
}

@media only screen and (max-width: 979px) {
  .flt_pc {
    float: none;
  }
  .flr_pc {
    float: none;
  }
}

.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: 15px;
  }
  .col2_m .flt, .col2_m .flr {
    width: 100%;
  }
  .col2_m .flt {
    margin-bottom: 15px;
  }
  .col2_ti .flt {
    width: 100%;
  }
  .col2_ti .flr {
    width: 100%;
  }
  .col2_ti .flt {
    margin-bottom: 15px;
  }
  .col2_it .flt {
    width: 100%;
  }
  .col2_it .flr {
    width: 100%;
  }
  .col2_it .flt {
    margin-bottom: 15px;
  }
  .col3 .flt, .col3 .flr {
    width: 100%;
  }
  .col3_m .flt, .col3_m .flr {
    width: 100%;
  }
  .col3_m .flt {
    margin-right: 0;
    margin-bottom: 15px;
  }
  .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: 15px;
  }
}

/*-----------------------------------------------------------------*/
/* youtube */
/*-----------------------------------------------------------------*/
.youtube {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}

.youtube iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}

/*-----------------------------------------------------------------*/
/* width */
/*-----------------------------------------------------------------*/
.t-default .w5, .w5 {
  width: 5%;
}

.t-default .w10, .w10 {
  width: 10%;
}

.t-default .w15, .w15 {
  width: 15%;
}

.t-default .w20, .w20 {
  width: 20%;
}

.t-default .w25, .w25 {
  width: 25%;
}

.t-default .w30, .w30 {
  width: 30%;
}

.t-default .w35, .w35 {
  width: 35%;
}

.t-default .w40, .w40 {
  width: 40%;
}

.t-default .w45, .w45 {
  width: 45%;
}

.t-default .w50, .w50 {
  width: 50%;
}

.t-default .w55, .w55 {
  width: 55%;
}

.t-default .w60, .w60 {
  width: 60%;
}

.t-default .w65, .w65 {
  width: 65%;
}

.t-default .w70, .w70 {
  width: 70%;
}

.t-default .w75, .w75 {
  width: 75%;
}

.t-default .w80, .w80 {
  width: 80%;
}

.t-default .w85, .w85 {
  width: 85%;
}

.t-default .w90, .w90 {
  width: 90%;
}

.t-default .w95, .w95 {
  width: 95%;
}

.t-default .w100, .w100 {
  width: 100%;
}

.t-default .w5_pctab, .w5_pctab {
  width: 5%;
}

.t-default .w10_pctab, .w10_pctab {
  width: 10%;
}

.t-default .w15_pctab, .w15_pctab {
  width: 15%;
}

.t-default .w20_pctab, .w20_pctab {
  width: 20%;
}

.t-default .w25_pctab, .w25_pctab {
  width: 25%;
}

.t-default .w30_pctab, .w30_pctab {
  width: 30%;
}

.t-default .w35_pctab, .w35_pctab {
  width: 35%;
}

.t-default .w40_pctab, .w40_pctab {
  width: 40%;
}

.t-default .w45_pctab, .w45_pctab {
  width: 45%;
}

.t-default .w50_pctab, .w50_pctab {
  width: 50%;
}

.t-default .w55_pctab, .w55_pctab {
  width: 55%;
}

.t-default .w60_pctab, .w60_pctab {
  width: 60%;
}

.t-default .w65_pctab, .w65_pctab {
  width: 65%;
}

.t-default .w70_pctab, .w70_pctab {
  width: 70%;
}

.t-default .w75_pctab, .w75_pctab {
  width: 75%;
}

.t-default .w80_pctab, .w80_pctab {
  width: 80%;
}

.t-default .w85_pctab, .w85_pctab {
  width: 85%;
}

.t-default .w90_pctab, .w90_pctab {
  width: 90%;
}

.t-default .w95_pctab, .w95_pctab {
  width: 95%;
}

.t-default .w100_pctab, .w100_pctab {
  width: 100%;
}

@media only screen and (max-width: 690px) {
  .w5_pctab, .w10_pctab, .w15_pctab, .w20_pctab, .w25_pctab,
  .w30_pctab, .w35_pctab, .w40_pctab, .w45_pctab, .w50_pctab,
  .w55_pctab, .w60_pctab, .w65_pctab, .w70_pctab, .w75_pctab,
  .w80_pctab, .w85_pctab, .w90_pctab, .w95_pctab, .w100_pctab {
    width: 100%;
  }
}