@charset "utf-8";



* {

	padding: 0;

	margin: 0;

	-webkit-box-sizing: border-box;

	-moz-box-sizing: border-box;

	box-sizing: border-box;

}



html {

  height: 100%;

}



body {

	color: #111;

	background-color: #F2F6F7;

	font-family: "游ゴシック", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, Osaka, "ＭＳ ゴシック", "MS Gothic", sans-serif;

	word-wrap: break-word;

	height: 100%;

	line-height: 2.2;

}



.font_mincho {

	font-family: "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "游明朝", YuMincho, "Sawarabi Mincho", "HG明朝E",  "ＭＳ Ｐ明朝", "MS PMincho", serif;

}



section,

article {

	display: block;

}



img {

	vertical-align: top;

}



a img {

	border-top-style: none;

	border-right-style: none;

	border-bottom-style: none;

	border-left-style: none;

	-webkit-transition: 0.2s linear;

	-moz-transition: 0.2s linear;

	transition: 0.2s linear;

}



a:hover img {

	filter: brightness(120%);

}



li {

	list-style-type: none;

}



a {

	color: #0099CC;

	-webkit-transition: 0.2s linear;

	-moz-transition: 0.2s linear;

	transition: 0.2s linear;

}

a:hover {

	color: #00CCCC;

	text-decoration: none;

}



table {

	border-collapse: collapse;

}

table td {

	border-collapse: collapse;

}



.clfix:after{

  content: "."; 

  display: block; 

  height: 0; 

  font-size:0;	

  clear: both; 

  visibility:hidden;

}



/*

ヘッダー

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

header {

	width: 100%;

	position: fixed;

	z-index: 300;

	transition: all 0.3s ease;

    -webkit-transition: all 0.3s ease;

    -moz-transition: all 0.3s ease;

    -o-transition: all 0.3s ease;

}



header.fixed {

	background-color: #FFF;

	background-color: rgba(242,246,247,0.9);

}





header h1 a img {

	display: block;

	position: absolute;

}



#g_navi ul li a.ac_menu {

	cursor: pointer;

	overflow: hidden;

}



.pankuzu {

	background-color: #15394A;

	font-size: 14px;

	line-height: 30px;

	color: #EEE;

	width: 100%;

	padding-top: 10px;

	padding-bottom: 10px;

}



.pankuzu ul {

	width: 96%;

	max-width: 1100px;

	margin-right: auto;

	margin-left: auto;

}



.pankuzu li {

	display: inline-block;

}



.pankuzu li a {

	text-decoration: none;

	color: #DDD;

}



.pankuzu li a::after {

	content: ">";

	padding-left: 10px;

	padding-right: 10px;

}



.pankuzu li a:hover {

	color: #FFF;

}



.pankuzu li i {

	padding-right: 5px;

}





/*

メインコンテンツ

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

.content {

	width: 100%;

	background-color: #F2F6F7;

	color: #111;

	padding-top: 50px;

	padding-bottom: 50px;

}

.cont_wrap {

	max-width: 1200px;

	width: 100%;

	margin-right: auto;

	margin-left: auto;

}



#sub_top {

	background-color: #555;

	background-repeat: no-repeat;

	background-position: top;

	background-attachment: fixed;

	height: 340px;

	line-height: 30px;

	padding-top: 180px;

	width: 100%;

	background-size: 100%;

	text-align: center;

	font-weight: bold;

	color: #FFF;

	font-size: 34px;

	letter-spacing: 0.1em;

	-moz-text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);

	-webkit-text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);

	-ms-text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);

	text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);

}



#index_top {

	height: 100%;

	width: 100%;

	position: relative;

	overflow: hidden;

}





#index_top #top_catch {

	position: absolute;

	top: 50%;

	left: 50%;

	z-index: 10;

	width: 560px;

	height: 500px;

	margin-top: -250px;

	margin-left: -280px;

	color: #FFF;

	background-color: #1BD;

	background-color: rgba(34,176,206,0.9);

	display: -webkit-flex;

	display: flex;

	-webkit-align-items: center;

	align-items: center;

	-webkit-justify-content: center;

	justify-content: center;

	-webkit-flex-flow: column;

	flex-flow: column;

	border-radius: 10px;

	-webkit-border-radius: 10px;

	-moz-border-radius: 10px;

}



#index_top #top_catch h2 {

	font-size: 50px;

	letter-spacing: 1px;

	font-family: "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "游明朝", YuMincho, "Sawarabi Mincho", "HG明朝E",  "ＭＳ Ｐ明朝", "MS PMincho", serif;

	font-weight: normal;

	line-height: 1.5;

	margin-bottom: 20px;

}

#index_top #top_catch p {

	font-size: 15px;

	font-weight: bold;

	letter-spacing: 1px;

	line-height: 2.4;

}



.content h2 {

	font-size: 28px;

	line-height: 2.2;

	margin-bottom: 20px;

	border-bottom-width: 1px;

	border-bottom-style: dotted;

	border-bottom-color: #15394A;

	font-weight: normal;

	letter-spacing: 1px;

	color: #111;

	text-align: center;

	font-family: "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "游明朝", YuMincho, "Sawarabi Mincho", "HG明朝E",  "ＭＳ Ｐ明朝", "MS PMincho", serif;

	padding-top: 30px;

	padding-right: 10px;

	padding-bottom: 30px;

	padding-left: 10px;

	clear: both;

}



.content h2 i {

	padding: 10px;

	color: #71F0BD;

}



.content h2 span {

	font-family: "游ゴシック", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, Osaka, "ＭＳ ゴシック", "MS Gothic", sans-serif;

	font-size: 24px;

	color: #42CBE3;

	font-weight: bold;

	letter-spacing: 0.1em;

}



.content h2 span.small {

	font-size: 18px;

	font-weight: normal;

	color: #555;

}



.content h3 {

	font-size: 24px;

	line-height: 30px;

	margin-bottom: 30px;

	position: relative;

	margin-top: 30px;

	padding-top: 15px;

	padding-right: 10px;

	padding-bottom: 15px;

	padding-left: 44px;

	font-weight: normal;

	color: #2E94AD;

	font-family: "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "游明朝", YuMincho, "Sawarabi Mincho", "HG明朝E",  "ＭＳ Ｐ明朝", "MS PMincho", serif;

	clear: both;

	letter-spacing: 0.05em;

}



.content h3::after {

	display: block;

	width: 3px;

	height: 20px;

	position: absolute;

	top: 20px;

	left: 20px;

	background-color: #82CCD5;

	content: '';

}



.content h3 span {

	font-size: 15px;

	color: #555;

	font-family: "游ゴシック", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, Osaka, "ＭＳ ゴシック", "MS Gothic", sans-serif;

	padding-left: 15px;

}

.content h4 {

	font-size: 20px;

	color: #597E84;

	border-bottom-width: 1px;

	border-bottom-style: dotted;

	border-bottom-color: #ADC4C7;

	letter-spacing: 0.1em;

	padding: 10px;

	font-weight: bold;

	clear: both;

	margin-top: 20px;

	margin-right: 30px;

	margin-bottom: 20px;

	margin-left: 30px;

}



.content p {

	font-size: 16px;

	padding: 10px;

	margin-bottom: 30px;

	margin-top: 20px;

	margin-right: 30px;

	margin-left: 30px;

}

.content .ul_news {
  width: 80%;           /* または max-width: 800px; など */
  margin: 0 auto;       /* 左右中央寄せ */
  list-style: none;     /* 不要なら箇条書きマークを消す */
  padding: 0;
}


.content .ul_news li {

	font-size: 16px;

}

.content .ul_news li a span.date {

	padding-right: 20px;

	color: #888;

}



.content .ul_news li span.i_con {

	display: inline-block;

	padding-left: 5px;

	padding-right: 5px;

	background-color: #F90;

	color: #FFF;

	margin-right: 5px;

}

.content .ul_news li span.i_con.cl2 {

	background-color: #36BEAD;

}



.content .ul_news li a {

	display: block;

	color: #333;

	line-height: 30px;

	padding: 20px;

	border-bottom-width: 1px;

	border-bottom-style: dotted;

	border-bottom-color: #999;

	text-decoration: none;

}



.content .ul_news li a:hover {

	color: #000;

	background-color: #FFF;

}





.img_center {

	display: block;

	margin-left: auto;

	margin-right: auto;

	position: relative;

}



.img_center span {

	position: absolute;

	background-color: #333;

	background-color: rgba(0,0,0,0.8);

	color: #FFF;

	letter-spacing: 0.1em;

	padding: 10px;

	left: 0;

	top: 0;

}



.img_center div {

	position: absolute;

	background-color: #333;

	background-color: rgba(0,0,0,0.8);

	color: #FFF;

	letter-spacing: 0.1em;

	padding: 50px;

	right: 0;

	bottom: 0;

}





.img_left {

	float: left;

	padding-top: 20px;

	padding-right: 50px;

	padding-left: 30px;

	padding-bottom: 20px;

	max-width: 50%;

}

.img_right {

	float: right;

	padding-top: 20px;

	padding-right: 30px;

	padding-left: 50px;

	padding-bottom: 20px;

	max-width: 50%;

}



.img_left img,

.img_right img,

.img_center img {

	width: 100%;

}



.content .img_left p,

.content .img_right p {

	font-size: 14px;

	margin: 0px;

	text-align: center;

	letter-spacing: 0.1em;

	color: #455E65;

}



.content p.check {

	color: #FF3333;

}

.content p.p_st {

	font-size: 20px;

	color: #CA28B1;

}



.content .cont_wrap .txt_box {

	background-color: #E6EDEE;

	padding: 20px;

	margin: 20px;

}

.content .cont_wrap .txt_box h3 {

	margin-top: 0px;

	margin-bottom: 0px;

	text-align: center;

	padding-right: 0px;

	padding-left: 0px;

	border-bottom-width: 1px;

	border-bottom-style: solid;

	border-bottom-color: #B6CACD;

	border-radius: 0px;

	-webkit-border-radius: 0px;

	-moz-border-radius: 0px;

	color: #333;

}

.content .cont_wrap .txt_box h3::after {

	display: none;

}



a.ap {

	padding-top: 50px;

	margin-top: -50px;

}

.design03 {
 width: 100%;
 text-align: center;
 border-collapse: collapse;
 border-spacing: 0;
 border-top: solid 1px #778ca3;
}
.design03 tr:nth-child(2n+1) {
 background: #e9faf9;
}
.design03 th,
.design03 td {
 padding: 10px;
 border-bottom: solid 1px #778ca3;
}

/*

コンテンツ大ボタン

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

.btn_cnt a {

	font-size: 16px;

	color: #FFF;

	text-align: center;

	text-decoration: none;

	display: block;

	width: 240px;

	background-color: #11BBDD;

	margin-top: 20px;

	margin-right: auto;

	margin-bottom: 30px;

	margin-left: auto;

	line-height: 22px;

	padding-top: 10px;

	padding-bottom: 10px;

	clear: both;

	font-weight: bold;

	border-radius: 4px;

	-webkit-border-radius: 4px;

	-moz-border-radius: 4px;

}

.btn_cnt a i {

	padding-right: 10px;

}

.btn_cnt a:hover {

	color: #11BBDD;

	background-color: #FFF;

}



.btn_cnt.rt a {

	float: right;

	max-width: 220px;

	margin-right: 10px;

}





/*

トップへ戻るボタン

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

.to_top {

	position: fixed;

	bottom: 0px;

	right: 0px;

	z-index: 800;

}

.to_top a {

	text-decoration: none;

	text-align: center;

	display: block;

	width: 60px;

	height: 60px;

	background-color: #DCE7E9;

	color: #333;

	text-align: center;

	font-size: 32px;

	line-height: 60px

}

.to_top a:hover {

	background-color: #1BD;

	color: #FFF;

}



/*

フッター

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



footer {

	background-color: #DCE7E9;

	color: #345;

	clear: both;

	width: 100%;

	display: block;

	padding-top: 20px;

	border-bottom-width: 20px;

	border-bottom-style: solid;

	border-bottom-color: #D2E1E3;

}



footer .cont_wrap {

	display: -webkit-box;

	display: -moz-box;

	display: -webkit-flexbox;

	display: -moz-flexbox;

	display: -ms-flexbox;

	display: -webkit-flex;

	display: -moz-flex;

	display: flex;

	-webkit-box-lines: multiple;

	-moz-box-lines: multiple;

	-webkit-flex-wrap: wrap;

	-moz-flex-wrap: wrap;

	-ms-flex-wrap: wrap;

	flex-wrap: wrap;

	-webkit-justify-content: space-between;

	justify-content: space-between;

}



footer .cont_wrap .f_box {

	width: 20%;

	padding: 10px;

}



footer .cont_wrap .f_box.lg {

	width: 60%;

}



footer .cont_wrap p {

	font-size: 13px;

}



footer .cont_wrap ul {

	padding: 20px;

}



footer .cont_wrap ul li a {

	display: block;

	text-decoration: none;

	font-size: 13px;

	color: #555;

}



footer .cont_wrap ul li.contact a {

	text-align: center;

	color: #FFF;

	background-color: #1BD;

	font-size: 14px;

	padding: 2px;

	margin-top: 5px;

}



footer .cont_wrap ul li.contact a:hover {

	color: #1BD;

}

footer .cont_wrap ul li.contact a::before {

	display: none;

}



footer .cont_wrap ul li a::before {

	content: "・ ";

	color: #999;

}



footer .cont_wrap ul li a:hover {

	color: #111;

	background-color: #FFF;

}



address {

	clear: both;

	font-size: 12px;

	font-style: normal;

	padding: 20px;

	text-align: center;

	letter-spacing: 1px;

}



footer .box_pr {

	clear: both;

	width: 100%;

	display: block;

	text-align: center;

	font-size: 10px;

	color: #55838A;

	letter-spacing: 1px;

	background-color: #D2E1E3;

	padding-top: 18px;

	line-height: 22px;

}



.box_pr ul li {

	display: inline;

	padding: 5px;

}



.box_pr ul li a {

	color: #55838A;

}





/*

各種テーブル

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

.content table.table_01 {

	width: 96%;

	margin-top: 20px;

	margin-right: auto;

	margin-bottom: 30px;

	margin-left: auto;

}

.content table.table_01 th,

.content table.table_01 td {

	border-bottom-width: 1px;

	border-bottom-style: dotted;

	border-bottom-color: #888;

	padding: 20px;

}

.content table.table_01 th {

	font-size: 16px;

	white-space: nowrap;

	font-weight: normal;

	letter-spacing: 1px;

	width: 33%;

}

.content table.table_01 td {

	font-size: 14px;

	line-height: 30px;

	background-color: #FFF;

}



.small {

	font-size: smaller;

	color: #666;

}

.chui {

	color: #F03600;

}



.table_01 caption {

	font-size: 14px;

	line-height: 30px;

	background-color: #E5E5E5;

	color: #111;

	letter-spacing: 1px;

	padding-top: 5px;

	padding-bottom: 5px;

	border: 1px solid #FFF;

	box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 2px 0px;

	-webkit-box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 2px 0px;

	-moz-box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 2px 0px;

}

.table_01 th span {

	font-size: 12px;

	color: #CCC;

}





/*

トップ下部ピックアップ

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

.pick_up {

	width: 100%;

}





.pick_up ul {

	margin-left: auto;

	margin-right: auto;

	width: 100%;

	max-width: 1400px;

	display: -webkit-box;

	display: -moz-box;

	display: -webkit-flexbox;

	display: -moz-flexbox;

	display: -ms-flexbox;

	display: -webkit-flex;

	display: -moz-flex;

	display: flex;

	-webkit-box-lines: multiple;

	-moz-box-lines: multiple;

	-webkit-flex-wrap: wrap;

	-moz-flex-wrap: wrap;

	-ms-flex-wrap: wrap;

	flex-wrap: wrap;

	-webkit-justify-content: space-between;

	justify-content: space-between;

}



.pick_up ul li {

	width: 32%;

	position: relative;

}

.pick_up ul li a {

	display: block;

	overflow: hidden;

	position: relative;

	-webkit-transition: 0.2s linear;

	-moz-transition: 0.2s linear;

	transition: 0.2s linear;

}

.pick_up ul li a img {

	width: auto;

	max-width: 100%;

	z-index: 0;

}

.pick_up ul li a:hover img {

	-webkit-transform: scale(1.05);

	-moz-transform: scale(1.05);

	-o-transform: scale(1.05);

	-ms-transform: scale(1.05);

	transform: scale(1.05);

	opacity: 1;

	filter: alpha(opacity=100);

	-ms-filter: "alpha( opacity=100 )";

}



.pick_up ul li a::before {

	content: "";

	display: block;

	width: 100%;

	height: 100%;

	background-color: rgba(92,189,202,0.2);

	z-index: 5;

	position: absolute;

	top: 0;

	left: 0;

	-webkit-transition: 0.2s linear;

	-moz-transition: 0.2s linear;

	transition: 0.2s linear;

}



.pick_up ul li a:hover::before {

	background-color: rgba(54,190,173,0.9);

}





.pick_up ul li a div {

	color: #FFF;

	font-size: 32px;

	line-height: 1;

	text-decoration: none;

	text-align: center;

	display: block;

	width: 80%;

	margin-top: -20px;

	margin-left: -40%;

	position: absolute;

	left: 50%;

	top: 47%;

	font-weight: bold;

	-webkit-transition: 0.2s linear;

	-moz-transition: 0.2s linear;

	transition: 0.2s linear;

	z-index: 10;

}

.pick_up ul li a div span {

	font-size: 16px;

	letter-spacing: 2px;

}





/*

コンテンツボックス

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



.box_cont {

	width: 100%;

	max-width: 1200px;

	margin: auto;

	display: -webkit-box;

	display: -ms-flexbox;

	display: -webkit-flex;

	display: flex;

	-ms-flex-wrap: wrap;

	-webkit-flex-wrap: wrap;

	flex-wrap: wrap;

	-webkit-justify-content: space-between;

	justify-content: space-between;

	padding-top: 20px;

	padding-right: 20px;

	padding-left: 20px;

}



.box_cont .box_c_in {

	width: 48%;

	min-height: 200px;

	padding: 10px;

	border: 1px solid #CFDEE0;

	margin-bottom: 30px;

}



.box_cont .box_c_in:hover {

	background-color: #FFF;

	border-top-color: #1BD;

	border-right-color: #1BD;

	border-bottom-color: #1BD;

	border-left-color: #1BD;

}



.box_cont .box_c_in img {

	max-width: 100%;

	padding: 20px;

}



.content .box_cont .box_c_in h2 {

	padding-bottom: 10px;

	font-size: 24px;

	border-bottom-width: 1px;

	border-bottom-color: #CCC;

	padding-top: 10px;

}



/*

背景入り帯

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



.obi_001 {

	background-image: url(../img/obi_001.jpg);

	background-repeat: no-repeat;

	text-align: center;

	padding-top: 15%;

	padding-right: 20px;

	padding-bottom: 15%;

	padding-left: 20px;

	background-size: cover;

	background-attachment: fixed;

	background-position: center bottom;

	color: #FFF;

	margin-top: 50px;

	margin-bottom: 50px;

}



.content .obi_001 h2 {

	color: #FFF;

	border-bottom: none;

	padding-bottom: 0px;

}

.obi_001 p {

	line-height: 2.4;

}





.obi_002 {

	width: 100%;

	height: auto;

	background-image: url(../img/obi_002.jpg);

	background-repeat: no-repeat;

	background-size: cover;

	padding: 0 0 50%;

	position: relative;

}



.obi_002 .box_in {

	width: 100%;

	height: 100%;

	display: -webkit-box;

	display: -ms-flexbox;

	display: -webkit-flex;

	display: flex;

	-webkit-align-items: center;

	align-items: center;

	-webkit-justify-content: center;

	justify-content: center;

	-webkit-flex-flow: column;

	flex-flow: column;

	position: absolute;

	color: #FFF;

	background-color: rgba(54,190,173,0.8);

}



.obi_002 h2 {

	font-size: 36px;

}

.obi_002 p {

	line-height: 2;

	font-weight: bold;

}









@media screen and (min-width:960px){

body {

	font-size: 16px;

}



/*

ヘッダー

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

header {

	height: 90px;

}





header h1 a img {

	top: 23px;

	left: 10px;

	height: 44px;

}



.menu_btn,

.btn_close {

	display: none;

}



/*

PCグローバルナビ

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

#g_navi {

	position: absolute;

	right: 10px;

	top: 20px;

	width: auto;

	margin-left: 200px;

	display: block !important;

	z-index: 1000;

}



#g_navi ul li{

	display: inline;

}



#g_navi li a {

	width: auto;

	padding: 10px;

	line-height: 30px;

	display: block;

	color: #111;

	text-decoration: none;

	text-align: center;

	position: relative;

	float: left;

	letter-spacing: 1px;

	font-size: 14px;

	font-weight: bold;

}



#g_navi li a::before {

	display: block;

	height: 2px;

	position: absolute;

	top: 2px;

	width: 70%;

	left: 15%;

	background-color: rgba(17,187,221,0);

	content: '';

	-webkit-transition: 0.2s linear;

	-moz-transition: 0.2s linear;

	transition: 0.2s linear;

}



#g_navi li a:hover::before,

#g_navi li.active a::before {

	background-color: rgba(17,187,221, 1);

	top:0px;

	width: 80%;

	left: 10%;

}



#g_navi li a:hover,

#g_navi li.active a {

	color: #1BD !important;

}



#g_navi li.active a {

	cursor: default;

}



#g_navi.txt_w li a {

	color: #FFF;

}



header.fixed #g_navi.txt_w li a {

	color: #111;

}



#g_navi li.contact a {

	background-color: #1BD;

	color: #FFF !important;

	padding-left: 20px;

	padding-right: 20px;

	margin-left: 10px;

	border-radius: 4px;

	-webkit-border-radius: 4px;

	-moz-border-radius: 4px;

}

#g_navi li.contact a:hover {

	background-color: #FFF;

	color: #1BD !important;

}

#g_navi li.contact a::before {

	display: none;

}





/*

ヘッダー

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



#index_top {

	min-height: 850px;

}



#sub_top.sample {

	background-image: url(../img/sub_top_sample.jpg);

}

#sub_top.faq {

	background-image: url(../img/sub_top_faq.jpg);

}

#sub_top.contact {

	background-image: url(../img/sub_top_contact.jpg);

}

#sub_top.news {

	background-image: url(../img/sub_top_news.jpg);

}

#sub_top.concept {

	background-image: url(../img/sub_top_concept.jpg);

}

#sub_top.works {

	background-image: url(../img/sub_top_works.jpg);

}

#sub_top.about {

	background-image: url(../img/sub_top_about.jpg);

}



.no_pc {

	display: none !important;

}



}

/*-- /960px～ --*/



@media screen and (min-width:1200px){



header h1 a img {

	left: 50%;

	margin-left: -590px;

}



header #g_navi {

	right: 50%;

	margin-right: -590px;

}



}



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



body {

	font-size: 16px;

}



body.fixed {

	overflow: hidden;

}



img {

	max-width: 100% !important;

	height: auto;

	width /***/:auto;

	margin-left:auto;

	margin-right:auto;

}



.content h4 {

	margin-right: 10px;

	margin-left: 10px;

}





/*

メニューボタン

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



.menu_btn {

	display: block;

	height: 40px;

	width: 40px;

	text-align: center;

	padding-top: 5px;

	padding-bottom: 5px;

	position: fixed;

	z-index: 5000;

	top: 5px;

	right: 5px;

	border-radius: 3px;

	-webkit-border-radius: 3px;

	-moz-border-radius: 3px;

	cursor: pointer;

}

.menu_btn:hover {

	cursor: pointer;

}



.menu_btn span {

	width: 28px;

	height: 2px;

	display: block;

	position: absolute;

	left: 50%;

	top: 50%;

	margin-left: -14px;

	background-color: #1BD;

}

.menu_btn span {

    transition: all 0.3s;

    transform: rotate(0deg);

	-webkit-transform: rotate(0deg);  

    -moz-transform: rotate(0deg);    

  }

.menu_btn span.top {

    transform: translateY(-8px);

	-webkit-transform: translateY(-8px);  

    -moz-transform: translateY(-8px);    

  }

.menu_btn span.bottom {

    transform: translateY(8px);

	-webkit-transform: translateY(8px);  

    -moz-transform: translateY(8px);    

}





.menu_btn:hover span.top {

    transform: translateY(-10px);

	-webkit-transform: translateY(-10px);  

    -moz-transform: translateY(-10px);    

}

.menu_btn:hover span.bottom {

    transform: translateY(10px);

	-webkit-transform: translateY(10px);  

    -moz-transform: translateY(10px);    

}



.menu_btn.opened span {

	background-color: #7BC;

}



.menu_btn.opened span.middle {

    background: rgba(255, 255, 255, 0);

	 transform: translateX(30px);

	 -webkit-transform: translateX(30px);  

    -moz-transform: translateX(30px);    

}

.menu_btn.opened span.top {

    transform: rotate(-45deg) translateY(0px);

	-webkit-transform: rotate(-45deg) translateY(0px);  

    -moz-transform: rotate(-45deg) translateY(0px);    

}

.menu_btn.opened span.bottom {

    transform: rotate(45deg) translateY(0px);

	-webkit-transform: rotate(45deg) translateY(0px);  

    -moz-transform: rotate(45deg) translateY(0px);    

}



/*

グローバルナビ

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

#g_navi {

	position: fixed;

	width: 100%;

	height: 100%;

	top: 0px;

	overflow: auto;

	z-index: 3000;

	background-color: #F2F6F7;

	background-color: rgba(242,246,247,0.85);

	display: none;

	padding-left: 10%;

}

#g_navi ul {

    display: -webkit-flex;

    display: flex;

    -webkit-flex-flow: column;

    flex-flow: column;

    -webkit-justify-content: center;

    justify-content: center;

    min-height: 100%;

}





#g_navi ul li a {

	color: #111;

	text-decoration: none;

	display: block;

	padding: 10px;

	line-height: 22px;

	font-size: 14px;

	font-weight: bold;

	letter-spacing: 1px;

}

#g_navi ul li a:hover {

	color: #1BD;

}



#g_navi ul li.contact a {

	text-align: center;

	background-color: #1BD;

	color: #FFF;

	width: 90%;

}



#g_navi ul li.contact a:hover,

#g_navi li.active a {

	color: #1BD;

}

#g_navi li.active a::before {

	content: "・";

}



#g_navi li.active a {

	cursor: default;

}



/*

メニューシャドウ

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

.bg_bl {

	background-color: #FFF;

	height: 100%;

	width: 100%;

	opacity: 0.80;

	filter: alpha(opacity=80);

	-ms-filter: "alpha( opacity=80 )";

	display: block;

	position: fixed;

	z-index: 2000;

}





/*

ヘッダー

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



header {

	height: 52px;

}



header h1 a img {

	top: 10px;

	left: 10px;

	height: 36px;

}



header .h_menu {

	display: none;

}



header #info {

	display: none;

}





#sub_top.sample {

	background-image: url(../img/sub_top_sample_sp.jpg);

}

#sub_top.faq {

	background-image: url(../img/sub_top_faq_sp.jpg);

}

#sub_top.contact {

	background-image: url(../img/sub_top_contact_sp.jpg);

}

#sub_top.news {

	background-image: url(../img/sub_top_news_sp.jpg);

}

#sub_top.concept {

	background-image: url(../img/sub_top_concept_sp.jpg);

}

#sub_top.works {

	background-image: url(../img/sub_top_works_sp.jpg);

}

#sub_top.about {

	background-image: url(../img/sub_top_about_sp.jpg);

}





/*

フッター

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

footer {

	border-bottom-width: 60px;

}



footer .cont_wrap .f_box {

	width: 50%;

	text-align: center;

}

footer .cont_wrap .f_box.lg {

	width: 100%;

}



.no_sp {

	display: none;

}



}

/*-- /～960px --*/







/*

無限ループ

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

.loop_wrap_base {

	width: 100%;

	height: auto;

	overflow: hidden;

	background-color: #F2F6F7;

	padding-top: 30px;

	padding-bottom: 30px;

}





.loop_wrap_base h2 {

	font-weight: normal;

	color: #111;

	text-align: center;

	line-height: 1.2;

	padding: 10px;

	font-size: 24px;

}

.loop_wrap_base h2 span {

	letter-spacing: 0.2em;

	font-size: 14px;

	color: #555;

}



.loop_wrap {

  display: flex;

  width: 220%;

  height: auto;

}



.loop_wrap ul {

  width: 100%;

  height: auto;

  display: -webkit-box;

	display: -moz-box;

	display: -webkit-flexbox;

	display: -moz-flexbox;

	display: -ms-flexbox;

	display: -webkit-flex;

	display: -moz-flex;

	display: flex;

	-webkit-box-lines: multiple;

	-moz-box-lines: multiple;

	-webkit-flex-wrap: wrap;

	-moz-flex-wrap: wrap;

	-ms-flex-wrap: wrap;

	flex-wrap: wrap;

	-webkit-justify-content: space-between;

	justify-content: space-between;

}



.loop_wrap ul li {

	width: 20%;

}



.loop_wrap ul li a {

	display: block;

	text-decoration: none;

	color: #555;

	text-align: center;

	line-height: 1.6;

	font-size: 14px;

	position: relative;

}

.loop_wrap ul li a img {

	width: 100%;

	display: block;

	margin-bottom: 5px;

}



.loop_wrap ul li a span {

	display: inline-block;

	background-color: #36BEAD;

	color: #FFF;

	font-size: 12px;

	position: absolute;

	top: 0;

	left: 0;

	padding: 5px;

	letter-spacing: 1px;

	z-index: 10;

}



.loop_wrap ul li a span.cl_2 {

	background-color: #333;

}



.loop_wrap ul li a span.cl_3 {

	background-color: #FF9900;

}



@keyframes loop {

  0% {

    transform: translateX(100%);

  }

  to {

    transform: translateX(-100%);

  }

}



@keyframes loop2 {

  0% {

    transform: translateX(0);

  }

  to {

    transform: translateX(-200%);

  }

}



.loop_wrap ul:first-child {

  animation: loop 50s -25s linear infinite;

}



.loop_wrap ul:last-child {

  animation: loop2 50s linear infinite;

}



.loop_wrap:hover ul {

  animation-play-state: paused;

}







/*

SNSボタン

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



.h_sns {

	padding: 5px;

	position: fixed;

	top: 130px;

	right: 0px;

	background-color: rgba(17,187,221,0.8);

	border-radius: 8px 0px 0px 8px;

	-webkit-border-radius: 8px 0px 0px 8px;

	-moz-border-radius: 8px 0px 0px 8px;

}

.h_sns li a {

	display: block;

	padding: 10px;

	color: #FFF;

	line-height: 30px;

	width: 50px;

	text-align: center;

	text-decoration: none;

	font-size: 18px;

	border-radius: 5px;

	-webkit-border-radius: 5px;

	-moz-border-radius: 5px;

}



.h_sns li a:hover {

	background-color: #FFF;

	color: #1BD;

}





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

.h_sns {

	width: 100%;

	display: -webkit-box;

	display: -moz-box;

	display: -webkit-flexbox;

	display: -moz-flexbox;

	display: -ms-flexbox;

	display: -webkit-flex;

	display: -moz-flex;

	display: flex;

	-webkit-box-lines: multiple;

	-moz-box-lines: multiple;

	-webkit-flex-wrap: wrap;

	-moz-flex-wrap: wrap;

	-ms-flex-wrap: wrap;

	flex-wrap: wrap;

	-webkit-justify-content: space-between;

	justify-content: space-between;

	top: auto;

	bottom: 0;

	-webkit-box-sizing: border-box;

	-moz-box-sizing: border-box;

	box-sizing: border-box;

	border-radius: 0px;

    -webkit-border-radius: 0px;

    -moz-border-radius: 0px;

	padding-right: 60px;

}



.h_sns li {

	width: 25%;

}

.h_sns li a {

	width: 100%;

	text-align: center;

	-webkit-box-sizing: border-box;

	-moz-box-sizing: border-box;

	box-sizing: border-box;

}

	

#index_top #top_catch {

	top: 25%;

	left: 5%;

	width: 90%;

	height: 50%;

	margin-top: 0px;

	margin-left: 0px;

}





#index_top #top_catch h2 {

	font-size: 40px;

}



#index_top #top_catch p {

	font-size: 12px;

}



#sub_top {

	height: 180px;

	padding-top: 100px;

}



.content {

	padding-top: 20px;

	padding-bottom: 20px;

}



.content p {

	margin-bottom: 20px;

	margin-top: 10px;

	margin-right: 10px;

	margin-left: 10px;

}



.img_left,

.img_right {

	float: none;

	display: block;

	margin-left: auto;

	margin-right: auto;

	padding-left: 10px;

	padding-right: 10px;

	padding-bottom: 10px;

	max-width: 100%;

}



.pick_up ul li {

	width: 100%;

}



.content .ul_news li span.date {

	padding-right: 0px;

	display: block;

}



.obi_001 {

	background-image: url(../img/obi_001_sp.jpg);

	padding-left: 10px;

	padding-right: 10px;

}



.obi_001 p {

	text-align: left;

	margin-left: 15px;

	margin-right: 15px;

	font-size: 14px;

}



.obi_002 {

	background-image: url(../img/obi_002_sp.jpg);

	padding: 0 0 100%;

}



.loop_wrap {

  width: 400%;

}



.box_cont {

	padding-right: 10px;

	padding-left: 10px;

}



.box_cont .box_c_in {

	width: 100%;

	padding: 5px;

}



.content .cont_wrap .txt_box {

	margin-left: 0px;

	margin-right: 0px;

}

}



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



input,

textarea {

	max-width: 300px !important;

}



.content table.table_01 th,

.content table.table_01 td {

	width: 100% !important;

	display: block;

}



.content table.table_01 th {

	background-color: #F6F6F6;

}





#index_top #top_catch h2 {

	font-size: 30px;

}



#sub_top {

	font-size: 24px;

}



.content h2 {

	font-size: 24px;

}



.content .obi_001 h2 {

	font-size: 22px;

}



}



/*

エフェクト

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

.effect {

	opacity: 0;

	filter: alpha(opacity=0);

	-ms-filter: "alpha( opacity=0 )";

	transform: translateY(20px);

	-webkit-transform: translateY(20px);  

    -moz-transform: translateY(20px); 

	-webkit-transition: 1.0s ease-out;

	-moz-transition: 1.0s ease-out;

	transition: 1.0s ease-out;

}

.effect.d_02 {

transition-delay:0.2s;

-webkit-transition-delay:0.2s;

}

.effect.d_04 {

transition-delay:0.4s;

-webkit-transition-delay:0.4s;

}

.effect.d_06 {

transition-delay:0.6s;

-webkit-transition-delay:0.6s;

}

.effect.d_08 {

transition-delay:0.8s;

-webkit-transition-delay:0.8s;

}

.effect.start {

	opacity: 1;

	filter: alpha(opacity=100);

	-ms-filter: "alpha( opacity=100 )";

	transform: translateY(0px);

	-webkit-transform: translateY(0px);  

    -moz-transform: translateY(0px);    

}





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



 

.obi_002 .box_in p a.tel {

	font-size: 24px;

	color: #FFF;

	text-decoration: none;

	line-height: 1.2;

}

.obi_002 .box_in p a.tel strong {

	padding-left: 10px;

	font-size: 150%;

}







.content .box_att {

	margin-top: 30px;

}



.content .box_att h2 {

	font-weight: normal;

	font-size: 24px;

	color: #3EADBD;

	padding: 15px;

	border-bottom-color: #8ED1DB;

}

.content .box_att p {

	font-size: 14px;

	margin: 0px;

	color: #328B98;

}





/*

FAQ

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

dl.faq {

	display: block;

	margin: auto;

	width: 90%;

}



dl.faq dt {

	font-family: "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "游明朝", YuMincho, "Sawarabi Mincho", "HG明朝E",  "ＭＳ Ｐ明朝", "MS PMincho", serif;

	font-size: 20px;

	color: #FFF;

	background-color: #278498;

	display: block;

	position: relative;

	width: 80%;

	margin-left: 20%;

	margin-bottom: 20px;

	border-radius: 20px;

	-webkit-border-radius: 20px;

	-moz-border-radius: 20px;

	padding-top: 20px;

	padding-right: 20px;

	padding-bottom: 20px;

	padding-left: 50px;

}



dl.faq dt::before{

	font-family: "游ゴシック", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, Osaka, "ＭＳ ゴシック", "MS Gothic", sans-serif;

	font-size: 24px;

	content: "Q.";

	position: absolute;

	left: 20px;

	top: 13px;

}

dl.faq dt::after{

    border: solid transparent;

    content:'';

    height:0;

    width:0;

    pointer-events:none;

    position:absolute;

    border-color: rgba(39, 132, 152, 0);

    border-top-width:16px;

    border-bottom-width:16px;

    border-left-width:8px;

    border-right-width:8px;

    border-bottom-color:#278498;

    bottom:100%;

    right:30px;

}

dl.faq dd {

	font-size: 16px;

	background-color: #FFF;

	display: block;

	position: relative;

	width: 80%;

	padding: 20px;

	margin-bottom: 50px;

	border-radius: 20px;

	-webkit-border-radius: 20px;

	-moz-border-radius: 20px;

	box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 5px 0px;

	-webkit-box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 5px 0px;

	-moz-box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 5px 0px;

	padding-top: 20px;

	padding-right: 20px;

	padding-bottom: 20px;

	padding-left: 50px;

}

dl.faq dd::after{

	border: solid transparent;

	content: '';

	height: 0;

	width: 0;

	pointer-events: none;

	position: absolute;

	border-color: rgba(255,255,255,0.0);

	border-top-width: 16px;

	border-bottom-width: 16px;

	border-left-width: 8px;

	border-right-width: 8px;

	border-bottom-color: #FFFFFF;

	bottom: 100%;

	left: 30px;

}



dl.faq dd::before{

	font-size: 24px;

	content: "A.";

	position: absolute;

	left: 20px;

	top: 13px;

}





/*

事例一覧＆ギャラリー

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



.works_list li {

	display: block;

	float: left;

	width: 25%;

	padding: 20px;

}



.works_list li a {

	display: block;

	text-decoration: none;

	width: 100%;

	padding: 10px;

	border: 1px solid #F2F6F7;

	position: relative;

}



.works_list li a:hover {

	background-color: #FFF;

	border: 1px solid #DDE7EA;

}



.works_list li a span {

	display: block;

	color: #FFF;

	font-size: 12px;

	background-color: #36BEAD;

	position: absolute;

	top: 5px;

	left: 5px;

	z-index: 10;

	padding-top: 2px;

	padding-right: 5px;

	padding-bottom: 2px;

	padding-left: 5px;

}



.works_list li a span.cl_2 {

	background-color: #333333;

}



.works_list li a span.cl_3 {

	background-color: #FF9900;

}



.works_list li a img {

	width: 100%;

	height: 180px;

	object-fit: cover;

}



.works_list li a p {

	color: #111;

	text-align: left;

	margin: 0px;

}



.g_list li {

	display: block;

	float: left;

	width: 20%;

	padding: 20px;

}



.g_list li a {

	display: block;

	width: 100%;

	height: 150px;

	overflow: hidden;

}



.g_list li a img {

	width: 100%;

	height: 150px;

	object-fit: cover;

}



.g_list li a img:hover {

	-webkit-transform: scale(1.05);

	-moz-transform: scale(1.05);

	-o-transform: scale(1.05);

	-ms-transform: scale(1.05);

	transform: scale(1.05);

}





/*

Facebook

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



.content .cont_wrap .box_left {

	width: 50%;

	float: left;

	padding: 10px;

}

.content .cont_wrap .box_right {

	width: 50%;

	float: right;

	text-align: center;

	padding-right: 10px;

	padding-bottom: 20px;

	padding-left: 10px;

}









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



.content .cont_wrap .box_left {

	width: 100%;

	float: none;

}

.content .cont_wrap .box_right {

	width: 100%;

	float: none;

	overflow: hidden;

}



.content .cont_wrap .box_right .fb-page {

	width: 100% !important;

}



.works_list li {

	width: 33.33%;

}



.g_list li {

	width: 33.33%;

}



}



/*

ページャー

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



.pager {

	padding-top: 50px;

	padding-bottom: 50px;

	clear: both;

}



.pager .pagination {

  text-align: center;

}



.pager .pagination li {

	display: inline;

	margin: 0 2px;

	padding: 0;

	display: inline-block;

	width: 36px;

	height: 36px;

	text-align: center;

	position: relative;

}





.pager .pagination li a{

	vertical-align: middle;

	position: absolute;

	top: 0;

	left: 0;

	width: 100%;

	height: 100%;

	text-align: center;

	display: table;

	color: #FFF;

	text-decoration: none;

	background-color: #333333;

}



.pager .pagination li a span{

  display:table-cell;

  vertical-align:middle;

}



.pager .pagination li a:hover,

.pager .pagination li a.active{

	color: #000;

	background-color: #F9F9F9;

}



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

.pager {

	padding-top: 20px;

	padding-bottom: 20px;

}

  .pager .pagination li{

    display: none;

  }



  .pager .pagination li.pre,

  .pager .pagination li.next{

    display: inline-block;

    width: 40%;

    height: 40px;

    text-align: center;

  }



  .pager .pagination li.pre a,

  .pager .pagination li.next a{

    width: 100%;

    text-align: center;

  }



  .pager .pagination li.pre span::after{

    content: "　前の10件へ";

  }



  .pager .pagination li.next span::before{

    content: "次の10件へ　";

  }

  

  .works_list li {

	width: 50%;

	padding: 10px;

}



.g_list li {

	width: 50%;

}



.img_center span {

	font-size: 14px;

	padding: 5px;

}



.img_center div {

	font-size: 12px;

	padding: 20px;

}



dl.faq {

	width: 96%;

}



dl.faq dt {

	font-size: 18px;

	width: 90%;

	margin-left: 10%;

}



dl.faq dd {

	width: 90%;

}



}