@charset "UTF-8";
/* ===================================================================
CSS information
 file name  :  layout.css
 style info :  全ページ共通 枠組みレイアウト生成用 cssの定義
=================================================================== */
/****************************************************************/
/* width */
/****************************************************************/
.w_100 { width: 100%; }

.w_98 { width: 98%; }

.w_95 { width: 95%; }

.w_93 { width: 93%; }

.w_90 { width: 90%; }

.w_88 { width: 88%; }

.w_85 { width: 85%; }

.w_83 { width: 83%; }

.w_80 { width: 80%; }

.w_78 { width: 78%; }

.w_70 { width: 70%; }

.w_68 { width: 68%; }

.w_65 { width: 65%; }

.w_63 { width: 63%; }

.w_60 { width: 60%; }

.w_58 { width: 58%; }

.w_55 { width: 55%; }

.w_53 { width: 53%; }

.w_50 { width: 50%; }

.w_48 { width: 48%; }

.w_45 { width: 45%; }

.w_43 { width: 43%; }

.w_40 { width: 40%; }

.w_38 { width: 38%; }

.w_35 { width: 35%; }

.w_33 { width: 33%; }

.w_30 { width: 30%; }

.w_28 { width: 28%; }

.w_25 { width: 25%; }

.w_23 { width: 23%; }

.w_20 { width: 20%; }

.w_18 { width: 18%; }

.w_15 { width: 15%; }

.w_13 { width: 13%; }

.w_10 { width: 10%; }

@media only screen and (max-width: 690px) { .w_100, .w_95.w_90, .w_85, .w_80, .w_75, .w_70, .w_65, .w_60, .w_55, .w_50, .w_45, .w_40, .w_35, .w_30, .w_25, .w_20, .w_15, .w_10, .w_98, .w_93, .w_88, .w_83, .w_78, .w_73, .w_68, .w_63, .w_58, .w_53, .w_48, .w_43, .w_38, .w_33, .w_28, .w_23, .w_18, .w_13 { width: 100%; } }

/****************************************************************/
/* contents width */
/****************************************************************/
.inner { width: calc(100% - 2%); margin-right: auto; margin-left: auto; max-width: 1280px; }

@media only screen and (max-width: 979px) { .inner { width: 94%; } }



.inner_s { width: 100%; margin-right: auto; margin-left: auto; max-width: 1120px; }

@media only screen and (max-width: 979px) { .inner_s { width: 94%; } }



#contents { width: calc(100% - 2%); margin-right: auto; margin-left: auto; max-width: 1280px; }

@media only screen and (max-width: 979px) { #contents { width: 94%; } }



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

@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 .flt img {
	max-width:100%;
	height:auto;
}

.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: 20px; }
  .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; } }

.flt > a { margin-right: auto; margin-left: auto; }

/****************************************************************/
/* col2 half middle */
/****************************************************************/
.col2_halfmid { display: table; width: 100%; }

.col2_halfmid_in { display: table-cell; vertical-align: middle; width: 50%; padding: 5%; }

@media only screen and (max-width: 690px) { .col2_halfmid { display: block; }
  .col2_halfmid_in { display: block; width: 100%; padding: 5%; }
  .col2_halfmid_in:last-child { min-height: 120px; } }

/****************************************************************/
/* background */
/****************************************************************/
.col_bg { background-color: #F7FAFB; padding: 15px 0; }

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

.col_bg.inner { padding: 15px; }

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

.col_bg_pwide { background-color: #F7FAFB; padding: 3% 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 #F7FAFB; 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; }


/****************************************************************/
/* addition */
/***************************************************************/

.img_radius img {
	border-radius:50%;
}

.per30_l_img {
	width:30%;
	float:left;
}
.per60_r_img {
	width:60%;
	float:right;
}

.per30_l_img img,
.per50_r_img img {
	max-width:100%;
	height:auto;
	margin-left:auto;
	margin-right:auto;
	display:block;
}

.gas_arr {
	position:relative;
}

.gas_arr::after {
	content:"";
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 75px 0 75px 40px;
	border-color: transparent transparent transparent #045574;
	position:absolute;
	right:-55px;
	top:50%;
	margin-top:-75px;
}

@media only screen and (max-width: 691px) { 

.per30_l_img {
	width:100%;
	float:none;
	margin-bottom:80px;
}
.per60_r_img {
	width:100%;
	float:none;
}


.gas_arr::after {
	content:"";
	border-style: solid;
	border-width: 40px 60px 0 60px;
	border-color: #045574 transparent transparent transparent;
	position:absolute;
	right:0;
	left:0;
	margin-left:auto;
	margin-right:auto;
	top:auto;
	bottom:-60px;
	margin-top:0;
}

}