@charset "utf-8";
/* レスポンシブデザイン 共通
2016/11/29 作成 
*/

/*------------------------------------

ページ全体

-------------------------------------*/

a {
	color: #3498DB;
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}
a:visited {
	opacity: 0.7; 
}

html {
	font-family: "Helvetica Neue" , Helvetica , Arial , Verdana , Roboto , "游ゴシック" , "Yu Gothic" , "游ゴシック体" , "YuGothic" , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "Meiryo UI" , "メイリオ" , Meiryo , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif;
	font-size: 62.5%;
	line-height: 1.8em;
}

body{
	font-size:16px;
	font-size:1.6rem;
	color: #2C3E50;
}
embed,
iframe,
object{
	max-width: 100%;
}
article,aside,canvas,details,figcaption,figure,
header,footer,main,menu,nav,section,summary {
	display: block;
}
footer {

}

/*------------------------------------

ボタン

-------------------------------------*/


.button {
  flex: 1 1 auto;
  margin: 10px;
  padding: 20px;
  border: 2px solid #3498DB;
  text-align: center;
  text-transform: uppercase;
  position: relative;
  overflow:hidden;
  transition: .3s;
  }
  .button:hover {
    cursor: pointer;
		border-radius: 30px;
}


/*------------------------------------

色

-------------------------------------*/

/*グローバルナビのカラー*/
#global-nav li {
	background-color: #3498DB;
	border-right: 1px solid #2C3E50;
	border-top: 1px solid #2980B9;
}
#global-nav li a {
	color: #ECF0F1;
	text-shadow: -1px 0px 0px;
}
#global-nav li a:active {
	color: #2C3E50;
}
/*フッターのカラー*/

.clearfix #footer_line1 {
	background-color: #EFECCA;
}
.clearfix #footer_line2 {
	background-color: #EFECCA;
}
.clearfix #footer_line3 {
	background-color: #2C3E50;
}
.clearfix #footer_line3 small {
	color:#ECF0F1;
}

/*ヘッダーのカラー*/

header h1 {
	color:#2C3E50;
}


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

	/*スマホのグローバルナビのカラー*/

	#global-nav ul li{
	border-bottom: #F0EDBB 1px solid;
}

		/*スマホのリストのカラー*/
	
.left_column ul li,	
.right_column ul li {
	border-bottom: #F0EDBB 1px solid;
}
.left_column ul li a,
.right_column ul li a,
.left_column ul li input{
	color: #00585E;
}
	
.left_column ul li a:before, 
.right_column ul li a:before,
.left_column ul li input:before {
	background: #00585E;
}
.left_column ul li a:after,
.right_column ul li a:after,
.left_column ul li input:after {
	background: #fff;
}
}


/*------------------------------------

クラス

-------------------------------------*/

.txt_red_b {
	color:red;
	font-weight:bold;
}
.txt_al_c {
	text-align:center;
}
.txt_al_l{
	text-align:left;
}
.txt_al_r{
	text-align:right;
}
.f_p12{
	font-size:12px;
}
.f_p14{
	font-size:14px;
}
.f_p9{
	font-size:9px;
}
.f_em05{
	font-size:0.5em;
}
.f_em08{
	font-size:0.8em
}
.f_em1{
	font-size:1em;
}
.left {
	display: block;
	float: left;
}
.clear {
	clear: both;
}
.clearfix:after {
  content: "";
  clear: both;
  display: block;
}

/*------------------------------------

見出し

-------------------------------------*/

.headline01 {
	padding-bottom: .5em;
	border-bottom: 1px solid #ccc;
}
.headline02 {
	padding-bottom: .5em;
	border-bottom: 1px solid #ccc;
}
.headline02:first-letter {
	margin-right: .1em;
	font-size: 1.5em;
}
.headline03 {
	padding-bottom: .5em;
	border-bottom: 3px double #ccc;
}
.headline04 {
	padding: .75em 0;
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
}
.headline05 {
	position: relative;
	padding: 1em 0;
}
.headline05::before,
.headline05::after {
	position: absolute;
	left: 0;
	content: '';
	width: 100%;
	height: 6px;
	box-sizing: border-box;
}
.headline05::before {
	top: 0;
	border-top: 2px solid #ccc;
	border-bottom: 1px solid #ccc;
}
.headline05::after {
	bottom: 0;
	border-top: 1px solid #ccc;
	border-bottom: 2px solid #ccc;
}
.headline06 {
	padding: .25em 0 .25em .75em;
	border-left: 6px solid #ccc;
}
.headline07 {
	padding: .25em 0 .5em .75em;
	border-left: 6px solid #ccc;
	border-bottom: 1px solid #ccc;
}
.headline08 {
	position: relative;
	padding: .25em 0 .5em .75em;
	border-left: 6px solid #3498db;
}
.headline08::after {
	position: absolute;
	left: 0;
	bottom: 0;
	content: '';
	width: 100%;
	height: 0;
	border-bottom: 1px solid #ccc;
}
.headline09 {
	padding: .5em .75em;
	background-color: #f6f6f6;
}
.headline10 {
	padding: .5em .75em;
	background-color: #f6f6f6;
	border-radius: 6px;
}
.headline11 {
	padding: .5em .75em;
	background-color: #f6f6f6;
	border-bottom: 1px solid #ccc;
}
.headline12 {
	padding: .5em .75em;
	background-color: #f6f6f6;
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
}
.headline13 {
	padding: .5em .75em;
	background-color: #f6f6f6;
	border-left: 6px solid #ccc;
}
.headline14 {
	position: relative;
	padding: .5em .75em;
	background-color: #f0f0f0;
	border-radius: 6px;
}
.headline14::after {
	position: absolute;
	top: 100%;
	left: 30px;
	content: '';
	width: 0;
	height: 0;
	border: 10px solid transparent;
	border-top: 15px solid #f0f0f0;
}
.headline15 {
	position: relative;
	padding: .5em .75em;
	background-color: #f0f0f0;
	border-radius: 6px;
	box-shadow: 2px 2px 4px rgba(0, 0, 0, .1) inset;
}
.headline15::after {
	position: absolute;
	top: 100%;
	left: 30px;
	content: '';
	width: 0;
	height: 0;
	border: 10px solid transparent;
	border-top: 15px solid #f0f0f0;
}
.headline16 {
	padding: .5em .75em;
	background-color: #f6f6f6;
	border: 1px solid #eee;
	box-shadow: 1px 1px 0 rgba(255, 255, 255, .5) inset, -1px -1px 0 rgba(100, 100, 100, .1) inset;
}
.headline17 {
	padding: .5em .75em;
	background: #f4f4f4;
	border-top: 1px dashed #ccc;
	border-bottom: 1px dashed #ccc;
	box-shadow: 0 7px 10px -5px rgba(0, 0, 0, .1) inset;
}
.headline18 {
	position: relative;
	padding: 0 .4em .1em;
}
.headline18::after {
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: -1;
	content: '';
	width: 100%;
	height: 10px;
	background-color: #ECF0F1;
}
.headline19 {
	padding: .5em .75em;
	background: -webkit-linear-gradient(top, #69b4e6 0%, #3498db 100%);
	background: linear-gradient(to bottom, #69b4e6 0%, #3498db 100%);
	color: #fff;
	text-shadow: 1px 1px 1px rgba(0, 0, 0, .3);
}
.headline20 {
	padding: .75em 1em;
	border: 1px solid #ccc;
	border-top: 3px solid #3498db;
	background: -webkit-linear-gradient(top, #fff 0%, #f0f0f0 100%);
	background: linear-gradient(to bottom, #fff 0%, #f0f0f0 100%);
	box-shadow: 0 -1px 0 rgba(255, 255, 255, 1) inset;
}
.headline21 {
	position: relative;
	padding: 0 .5em .5em 1.7em;
	border-bottom: 1px solid #ccc;
}
.headline21::after {
	position: absolute;
	top: .4em;
	left: .4em;
	z-index: 2;
	content: '';
	width: 12px;
	height: 12px;
	background-color: #ccc;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

/*------------------------------------

hr

-------------------------------------*/

hr.style01{
	border-top: 1px solid #8c8b8b;
}
hr.style02 {
	border-top: 3px double #8c8b8b;
}
hr.style03 {
	border-top: 1px dashed #8c8b8b;
}
hr.style04 {
	border-top: 1px dotted #8c8b8b;
}
hr.style05 {
	background-color: #fff;
	border-top: 2px dashed #8c8b8b;
}
hr.style06 {
	background-color: #fff;
	border-top: 2px dotted #8c8b8b;
}
hr.style07 {
	border-top: 1px solid #8c8b8b;
	border-bottom: 1px solid #fff;
}
hr.style08 {
	border-top: 1px solid #8c8b8b;
	border-bottom: 1px solid #fff;
}
hr.style08:after {
	content: '';
	display: block;
	margin-top: 2px;
	border-top: 1px solid #8c8b8b;
	border-bottom: 1px solid #fff;
}
hr.style09 {
	border-top: 1px dashed #8c8b8b;
	border-bottom: 1px dashed #fff;
}
hr.style10 {
	border-top: 1px dotted #8c8b8b;
	border-bottom: 1px dotted #fff;
}

/*------------------------------------

ul,ol #list

-------------------------------------*/
#list ul li a{
	color: black;
}
ul.list01, ol.list01{
  background: #fcfcfc;/*背景色*/
  padding: 0.5em 0.5em 0.5em 2em;/*ボックス内の余白*/
  border: solid 3px gray;/*線の種類 太さ 色*/
}

ul li.list01, ol li.list01 {
  line-height: 1.5; /*文の行高*/
  padding: 0.5em 0; /*前後の文との余白*/
	}

ul.list02, ol.list02{
  color: #668ad8;/*文字色*/
  border: dashed 2px #668ad8;/*破線 太さ 色*/
  background: #f1f8ff; /*背景色*/
  padding: 0.5em 0.5em 0.5em 2em;
}

ul li.list02, ol li.list02 {
  line-height: 1.5;
  padding: 0.5em 0;
}
ul.list03, ol.list03 {
  color: #1e366a;
  border-top: solid #1e366a 1px;/*上のボーダー*/
  border-bottom: solid #1e366a 1px;/*下のボーダー*/
  padding: 0.5em 0 0.5em 1.5em;
}

ul li.list03, ol li.list03 {
  line-height: 1.5;
  padding: 0.5em 0;
}
ul.list04, ol.list04 {
  background: #fffde8;
  box-shadow: 0px 0px 0px 10px #fffde8;/*線の外側*/
  border: dashed 2px #ffb03f;/*破線*/
  border-radius: 9px;
  margin-left: 10px;/*はみ出ないように調整*/
  margin-right: 10px;/*はみ出ないように調整*/
  padding: 0.5em 0.5em 0.5em 2em;
}

ul li.list04, ol li.list04 {
  line-height: 1.5;
  padding: 0.5em 0;
}
ul.list05, ol.list05{
  background: #f1f8ff;
  box-shadow: 0px 0px 0px 10px #f1f8ff;/*線の外側*/
  border: dashed 2px #668ad8;/*破線*/
  border-radius: 9px;
  margin-left: 10px;/*はみ出ないように調整*/
  margin-right: 10px;/*はみ出ないように調整*/
  padding: 0.5em 0.5em 0.5em 2em;
}

ul li.list05, ol li.list05 {
  line-height: 1.5;
  padding: 0.5em 0;
}
ul.list06 {
  border: solid 2px skyblue;
  border-radius: 5px;
  padding: 0.5em 1em 0.5em 2.3em;
  position: relative;
}

ul li.list06 {
  line-height: 1.5;
  padding: 0.5em 0;
  list-style-type: none!important;
}

ul li.list06:before {/*疑似要素*/
  font-family: FontAwesome;
  content: "\f138";/*アイコンの種類*/
  position: absolute;
  left : 1em;/*左端からのアイコンまでの距離*/
  color: skyblue;/*アイコン色*/
}
ul.list07 {
  border: solid 2px #ffb03f;
  padding: 0.5em 1em 0.5em 2.3em;
  position: relative;
}

ul li.list07 {
  line-height: 1.5;
  padding: 0.5em 0;
  list-style-type: none!important;/*ポチ消す*/
}

ul li.list07:before {/*疑似要素*/
  font-family: FontAwesome;
  content: "\f00c";
  position: absolute;
  left : 1em; /*左端からのアイコンまで*/
  color: #ffb03f; /*アイコン色*/
}
ul.list08 {
  border: solid 2px #E74C3C;
  background: #ECF0F1;
  padding: 0.5em 1em 0.5em 2.3em;
  position: relative;
}

ul li.list08 {
  line-height: 1.5;
  padding: 0.5em 0;
  list-style-type: none!important;/*ポチ消す*/
}

ul li.list08:before {
  font-family: FontAwesome;
  content: "\f1b0";/*アイコン種類*/
  position: absolute;
  left : 1em; /*左端からのアイコンまで*/
  color: #E74C3C; /*アイコン色*/
}
ul.list09 {
  box-shadow :0px 0px 3px silver;
  border: solid 1px whitesmoke;
  padding: 0.5em 1em 0.5em 2.3em;
  position: relative;
  background: #fafafa;
}

ul li.list09 {
  line-height: 1.5;
  padding: 0.5em 0;
  list-style-type: none!important;
}

ul li.list09:before {
  font-family: FontAwesome;
  content: "\f0da";
  position: absolute;
  left : 1em; /*左端からのアイコンまで*/
  color: gray; /*アイコン色*/
}
ul.list10 {
  border: solid 2px #ffb03f;
  padding: 0 0.5em;
  position: relative;
}

ul li.list10 {
  line-height: 1.5;
  padding: 0.5em 0 0.5em 1.4em;
  border-bottom: dashed 1px silver;
  list-style-type: none!important;
}

ul li.list10:before {
  font-family: FontAwesome;
  content: "\f138";/*アイコン種類*/
  position: absolute;
  left : 0.5em; /*左端からのアイコンまで*/
  color: #ffb03f; /*アイコン色*/
}

ul li.list10:last-of-type{
  border-bottom: none;
}
ul.list11 {
  padding: 0;
  position: relative;
}

ul li.list11 {
  color: white;
  background: #81d0cb;
  line-height: 1.5;
  padding: 0.5em 0.5em 0.5em 2em;
  border-bottom: 2px solid white;
  list-style-type: none!important;
  font-weight: bold; /*好みで太字に*/
}

ul li.list11:before {/*疑似要素*/
  font-family: FontAwesome;
  content: "\f14a";
  position: absolute;
  left : 0.5em; /*左端からのアイコンまでの距離*/
  color: white; /*アイコン色*/
}