@charset "UTF-8";
/* ===================================================================
CSS information
 file name  :  layout.css
 style info :  全ページ共通 枠組みレイアウト生成用 cssの定義
=================================================================== */
/****************************************************************/
/* contents width */
/****************************************************************/
.inner {
  width: 100%;
  padding: 0 24px;
  margin-right: auto;
  margin-left: auto;
  max-width: calc(1120px + 48px);
}

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

.inner_s {
  width: 100%;
  padding: 0 24px;
  margin-right: auto;
  margin-left: auto;
  max-width: calc(1024px + 48px);
}

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

#contents {
  width: 100%;
  padding: 0 24px;
  margin-right: auto;
  margin-left: auto;
  max-width: calc(1120px + 48px);
}

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

#contents_left {
  float: left;
  width: 75%;
}

#contents_right {
  float: right;
  width: 23%;
}

@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;
  }
}

/****************************************************************/
/* 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 {@include clearfix;}
.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);}*/
@media only screen and (max-width: 690px) {
  .col2_m .col, .col3_m .col,
  .col4_m .col, .col5_m .col {
    margin-bottom: 24px;
  }
}

.col2,
.col2_m {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.col2 .col {
  width: calc(100% / 2);
}

.col2_m .col {
  width: calc((100% - 24px * 1) / 2);
  margin-left: 24px;
}

.col2_m .col:first-child {
  margin-left: 0;
}

@media only screen and (max-width: 690px) {
  .col2 .col {
    width: 100%;
  }
  .col2_m .col {
    width: 100%;
    margin-left: 0;
  }
}
.col2_ti {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.col2_ti .col_l {  width: 56%;}
.col2_ti .col_r {
  width: calc(100% - 24px - 56%);
  margin-left: 24px;
}

@media only screen and (max-width: 690px) {
  .col2_ti {
    margin-left: 0;
    margin-top: -8px;
  }
  .col2_ti .col_l, .col2_ti .col_r {
    width: 100%;
    margin: 8px 0;
  }
}
.col2_it {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.col2_it .col_l {
  width: calc(100% - 24px - 66%);
  margin-right: 24px;
}
.col2_it .col_r {  width: 66%;}

@media only screen and (max-width: 690px) {
  .col2_it {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    margin-left: 0;
    margin-top: -8px;
  }
  .col2_it .col_l, .col2_it .col_r {
    width: 100%;
    margin: 8px 0;
  }
  .col2_it.sp_reverse .col_l {
    -webkit-box-ordinal-group: 3;
    -webkit-order: 2;
    -ms-flex-order: 2;
    order: 2;
  }
  .col2_it.sp_reverse .col_r {
    -webkit-box-ordinal-group: 2;
    -webkit-order: 1;
    -ms-flex-order: 1;
    order: 1;
  }
}
/* PC 2列 / タブレット 2列 / スマホ 2列 */
.col2_m_sp2 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.col2_m_sp2 .col {
  width: calc((100% - 24px * 1) / 2);
  margin-left: 24px;
}

.col2_m_sp2 .col:first-child {
  margin-left: 0;
}

@media only screen and (max-width: 979px) {
  .col2_m_sp2 .col {
    width: calc((100% - 24px * 1) / 2);
    margin-bottom: 24px;
  }
  .col2_m_sp2 .col:nth-child(2n + 1) {
    margin-left: 0;
  }
}

@media only screen and (max-width: 690px) {
  .col2_m_sp2 .col {
    width: calc((100% - 16px * 1) / 2);
    margin-bottom: 16px;
    margin-left: 16px;
  }
}

/* column 3 ************/
/*.col3::after,.col3_m::after {@include clearfix;}
.col3 .flt, .col3 .flr{ width: 33.33333%;}
.col3_m .flt, .col3_m .flr{ width: 32%;}.col3_m .flt{margin-right: 2%;}*/
/* PC 3列 / タブレット 3列 / スマホ 1列 */
.col3,
.col3_m {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.col3 .col {
  width: calc(100% / 3);
}

.col3_m .col {
  width: calc((100% - 24px * 2) / 3);
  margin-left: 24px;
}

.col3_m .col:first-child {
  margin-left: 0;
}

@media only screen and (max-width: 690px) {
  .col3 .col {
    width: 100%;
  }
  .col3_m .col {
    width: 100%;
    margin-left: 0;
  }
}

/* PC 3列 / タブレット 2列 / スマホ 2列 */
.col3_m_sp2 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.col3_m_sp2 .col {
  width: calc((100% - 24px * 2) / 3);
  margin-left: 24px;
}

.col3_m_sp2 .col:first-child {
  margin-left: 0;
}

@media only screen and (max-width: 979px) {
  .col3_m_sp2 .col {
    width: calc((100% - 24px * 1) / 2);
    margin-bottom: 24px;
  }
  .col3_m_sp2 .col:nth-child(2n + 1) {
    margin-left: 0;
  }
}

@media only screen and (max-width: 690px) {
  .col3_m_sp2 .col {
    width: calc((100% - 16px * 1) / 2);
    margin-bottom: 16px;
    margin-left: 16px;
  }
}

/* column 4 ************/
/*.col4::after,.col4_m::after {@include clearfix;}
.col4 .flt, .col4 .flr{ width: 25%;}
.col4_m .flt, .col4_m .flr{ width: 23.5%;}.col4_m .flt{margin-right: 2%;}*/
/* PC 4列 / タブレット 4列 / スマホ 1列 */
.col4,
.col4_m {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.col4 .col {
  width: calc(100% / 4);
}

.col4_m .col {
  width: calc((100% - 24px * 3) / 4);
  margin-left: 24px;
}

.col4_m .col:first-child {
  margin-left: 0;
}

@media only screen and (max-width: 690px) {
  .col4 .col {
    width: 100%;
  }
  .col4_m .col {
    width: 100%;
    margin-left: 0;
  }
}

/* PC 4列 / タブレット 2列 / スマホ 2列 */
.col4_m_sp2 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.col4_m_sp2 .col {
  width: calc((100% - 24px * 3) / 4);
  margin-left: 24px;
}

.col4_m_sp2 .col:first-child {
  margin-left: 0;
}

@media only screen and (max-width: 979px) {
  .col4_m_sp2 .col {
    width: calc((100% - 24px * 1) / 2);
    margin-bottom: 24px;
  }
  .col4_m_sp2 .col:nth-child(2n + 1) {
    margin-left: 0;
  }
}

@media only screen and (max-width: 690px) {
  .col4_m_sp2 .col {
    width: calc((100% - 16px * 1) / 2);
    margin-bottom: 16px;
    margin-left: 16px;
  }
}

/* column 5 ************/
/*.col5::after,.col5_m::after {@include clearfix;}
.col5 .flt, .col5 .flr{ width: 20%;}
.col5_m .flt, .col5_m .flr{ width: 18.5%;}.col5_m .flt{margin-right: 1.875%;}*/
.col5,
.col5_m {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.col5 .col {
  width: calc(100% / 5);
}

.col5_m .col {
  width: calc((100% - 24px * 4) / 5);
  margin-left: 24px;
}

.col5_m .col:first-child {
  margin-left: 0;
}

@media only screen and (max-width: 690px) {
  .col5 .col {
    width: 100%;
  }
  .col5_m .col {
    width: 100%;
    margin-left: 0;
  }
}

/* PC 5列 / タブレット 2列 / スマホ 2列 */
.col5_m_sp2 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.col5_m_sp2 .col {
  width: calc((100% - 24px * 4) / 5);
  margin-left: 24px;
}

.col5_m_sp2 .col:first-child {
  margin-left: 0;
}

@media only screen and (max-width: 979px) {
  .col5_m_sp2 .col {
    width: calc((100% - 24px * 2) / 3);
    margin-bottom: 24px;
  }
  .col5_m_sp2 .col:nth-child(3n + 1) {
    margin-left: 0;
  }
}

@media only screen and (max-width: 690px) {
  .col5_m_sp2 .col {
    width: calc((100% - 16px * 1) / 2);
    margin-bottom: 16px;
    margin-left: 16px;
  }
  .col5_m_sp2 .col:nth-child(3n + 1) {
    margin-left: 16px;
  }
  .col5_m_sp2 .col:nth-child(2n + 1) {
    margin-left: 0;
  }
}

@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;}*/
}

/****************************************************************/
/* background */
/****************************************************************/
.col_bg {
  background-color: #f5f5f5;
  padding: 16px;
}

@media only screen and (max-width: 979px) {
  .col_bg {
    padding: 16px;
  }
}

.col_bg.inner {
  padding: 16px;
}

@media only screen and (max-width: 979px) {
  .col_bg.inner {
    padding: 16px;
  }
}

.col_bg_pwide {
  background-color: #f5f5f5;
  padding: 5% 0;
}

@media only screen and (max-width: 979px) {
  .col_bg_pwide {
    padding: 3% 0;
  }
}

@media only screen and (max-width: 691px) {
  .col_bg_pwide {
    padding: 8% 0;
  }
}

.col_bg_pwide.inner {
  padding: 3%;
}

@media only screen and (max-width: 979px) {
  .col_bg_pwide.inner {
    padding: 3% 0;
  }
}

@media only screen and (max-width: 691px) {
  .col_bg_pwide.inner {
    padding: 8% 0;
  }
}

.col_bg_white {
  background-color: #ffffff;
  padding: 5% 0;
}

@media only screen and (max-width: 691px) {
  .col_bg_white {
    padding: 6% 0;
  }
}

.col_bg_white.inner {
  padding: 5%;
}

@media only screen and (max-width: 979px) {
  .col_bg_white.inner {
    padding: 6% 5%;
  }
}

.col_border {
  border: 1px solid #f5f5f5;
  padding: 3%;
}

@media only screen and (max-width: 691px) {
  .col_border {
    padding: 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;
}