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

#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: 96%;
  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: 94%;
  margin-bottom: 30px;
}
#contents_right {
  margin-top: 30px;
}
}
/****************************************************************/
  /* ftl */
  /****************************************************************/
.flt {
  float: left;
}
.flr {
  float: right;
}

.flr.seminar_img img{
	min-width:240px;
	height:auto;
}

@media only screen and (max-width: 980px) {
.flr.seminar_img img{
	min-width:auto;
	width:100%;
	height:auto;
}
}

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

.flr.seminar_img img{
	width:240px;
	height:auto;
}

}
/****************************************************************/
  /* column */
  /****************************************************************/
  /* column 2  ************/
.col2::after, .col2_m::after, .col2_ti::after, .col2_it::after,.col2_ti02::after, .col2_it02::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_ti02 .flt { width: calc(18.5% * 3.5 + 1.875% * 2);}
.col2_ti02 .flr { width: calc(18.5% * 1.5 + 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_ti02 .flt { width: 100%;}
  .col2_ti02 .flr { width: 100%;padding-left: 0;margin-top: 24px;}
  .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: #EEEEEE;
  padding: 16px;
}

@media only screen and (max-width: 979px) {
/*.col_bg {
  padding: 10px 0;
}*/
}
.col_bg.inner {
  padding:20px 15px;
}

@media only screen and (max-width: 979px) {
.col_bg.inner {
  padding: 10px;
}
}
.col_bg_pwide {
  background-color: #EEEEEE;
  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 #EEEEEE;
  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;
}