/*
//////////////////////////////////////////////////////

2020 HTML5 by OrangeWorks

//////////////////////////////////////////////////////
*/
@font-face {
  font-family: 'themify';
  src: url("../fonts/themify/themify.eot?-fvbane");
  src: url("../fonts/themify/themify.eot?#iefix-fvbane") format("embedded-opentype"), url("../fonts/themify/themify.woff?-fvbane") format("woff"), url("../fonts/themify/themify.ttf?-fvbane") format("truetype"), url("../fonts/themify/themify.svg?-fvbane#themify") format("svg");
  font-weight: normal;
  font-style: normal;
}
html.fh5co-overflow, body.fh5co-overflow {
  overflow-x: auto;
}
html.fh5co-overflow #fh5co-header-section, html.fh5co-overflow #fh5co-main, html.fh5co-overflow #fh5co-hero, html.fh5co-overflow #fh5co-mobile-menu, html.fh5co-overflow #fh5co-footer, body.fh5co-overflow #fh5co-header-section, body.fh5co-overflow #fh5co-main, body.fh5co-overflow #fh5co-hero, body.fh5co-overflow #fh5co-mobile-menu, body.fh5co-overflow #fh5co-footer {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}


/* ボディ全体の要素 */

body {
			font-family: Arial, Roboto, “Droid Sans”, “游ゴシック”, YuGothic, “ヒラギノ角ゴ ProN W3”, “Hiragino Kaku Gothic ProN”, “メイリオ”, Meiryo, sans-serif;
			font-size: 14px;	/* 全体の文字サイズ */
			color: #333;	/*全体の文字色*/
			line-height: 1.6em;	/* 行間 */
			letter-spacing: 1px;	/* 文字間 */
			margin: 0px;
			padding: 0px;
			background: #fff ;			/* 背景色 */
}
@media screen and (max-width: 768px) {
  body {
    font-size: 14px;
    line-height: 1.5;
  }
}

::-webkit-selection {
  color: #ffffff;
  background: #57cecd;
}

::-moz-selection {
  color: #ffffff;
  background: #57cecd;
}

::selection {
  color: #ffffff;
  background: #57cecd;
}

a {
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -ms-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease;
  color: #0000BD;
}
a:hover, a:focus, a:active {
  color: #FF0000;
}
a:hover, a:focus, a:active {
  outline: none;
  color: #FF0000;
  text-decoration: none;
}

input {
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

img {
	border: none;
	vertical-align: bottom;
}

br {
   letter-spacing:normal;
}

table {
	border-collapse:collapse;
	font-size: 100%;
	border-spacing: 0;
}

hr {
		 display:none;
		 overflow:hidden;
		 line-height:0; 
}

.cleaner {
		 clear: both;
		 font-size: 0;
		 line-height: 0;
}


/* 全体の基本要素 */


h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
  margin: 0 0 12px 0;
  padding: 0;
  color: #000000;
}

h1, .h1 {
  font-size: 30px;
  line-height: 42px;
}

h2, .h2 {
  font-size: 26px;
  line-height: 38px;
}

h3, .h3 {
  font-size: 20px;
  line-height: 32px;
}

h4, .h4 {
  font-size: 16px;
  line-height: 28px;
}

h5, .h5 {
  font-size: 14px;
  line-height: 24px;
}

h6, .h6 {
  font-size: 12px;
  line-height: 24px;
}

ul, ol {
  padding-left: 15px;
  line-height: 26px;
}
ul ul, ul ol, ol ul, ol ol {
  padding-left: 25px;
}

ul, ol, p {
  margin: 0 0 20px 0;
}

.fh5co-serif {
  font-family: "Crimson Text", serif;
}

.fh5co-sans-serif {
  font-family: "Roboto", arial, sans-serif;
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="search"],
textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

@media screen and (max-width: 480px) {
  .col-xxs-12 {
    display: block;
    clear: both;
    width: 100%;
    float: left;
  }
}



/* ================ ヘッダー =============== */

header {
	box-sizing:border-box;
	position:relative;
	width:100%;
	border-top:15px solid #0B025D; 
	border-bottom:2px solid #0B025D;
	background:#fff; /* ヘッダーの背景色 */
}


.summary {
	position:absolute;
	top:16px;
	right:10px;
	margin:0;
}

.inner {
	position:relative;
	width:1100px;
	height:120px;
	margin:0 auto;
	padding:15px 10px 0px;　 /* （上、左右、下） */
 background: #fff;		/* ヘッター中央の背景色 */
}



/* ================ ヘッダーＴＥＬ ================ */

.h-tel {
  margin: 28px -40px 0px 0;
  text-align: right;
}

@media only screen and (max-width: 768px) {
.h-tel { display: none !important; }
}



/* ================　モバイルヘッダー　================ */


@media print, screen and (min-width:769px) {

	#spMenu {
		display:none;
	}

}

@media screen and (max-width:768px) {
	.lock {
		overflow:hidden;
	}

	header {
		z-index:2;
		box-sizing:border-box;
		position:fixed;
	 background:#fff; /* スマホヘッダーのイメージ画像 */
		border-top:8px solid #0B025D;
		border-bottom:0px solid #0B025D;
		top:0;
		left:0;
		width:100%;
		height:100px;　/* 背景画像の高さに合わせる */
		padding:0px 0px 0px; /* （上、左右、下） */
	}

	.summary { display: none !important; }

.inner {
	position:relative;
	width:100%;
	height:auto;
	margin:0px auto;　 /* （上、左右、下） */
	padding:15px 0px 0px;　 /* （上、左右、下） */
	background:#fff;　 /* ヘッダーの背景色に合わせる */
}


	#spMenu {
		display:block;
		z-index:2;
		position:fixed;
		top:10px;
		right:10px;
	}
	#spMenu:hover {
		cursor:pointer;
	}

}



/* ================ トップ背景画像でのスライドショー ================ */

/* スライダー全体 */
.slider{
  position: relative;
		margin: 0px 0px 0 0px;  /* マージン（上右下左） */
  padding-top: 45.0%; /* 画像の高さ÷画像の横幅（+1%大きい方がいい）*/
	 top: 0px;
  left: 0;
  overflow: hidden;
  width: 100%;
  height: 0;
  background-image: url(../images/slider01.jpg) no-repeat center center;
		background-size:contain;
}

/* スライダー画像 */
.slider .image{
  position: absolute;  /* 画像を重ねるので絶対 */
	 z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  background-repeat: no-repeat;
  background-position: center center;
}

/*
  �@スライド画像
  表示する画像を定義
*/
.slider .image:nth-of-type(1){
  background-image: url(../images/slider01.jpg);
		background-size:contain;
}
.slider .image:nth-of-type(2){
  animation-delay: 15s;  /* 表示する秒数 */
  background-image: url(../images/slider02.jpg);
		background-size:contain;
}
.slider .image:nth-of-type(3){
  animation-delay: 30s;  /* 表示する秒数 */
  background-image: url(../images/slider03.jpg);
		background-size:contain;
}

/*
  �Aアニメーション設定
  animation-durationのみ変更
*/
.slider .image{
  animation-name: anime;
  animation-delay: 0;
  animation-iteration-count: infinite; /* 無限ループ「infinite」 */
  animation-duration: 45s;  /* �@で設定したanimation-delayを合計を挿入 */
}

/* アニメーション定義 */
@keyframes anime {
  0% {
    opacity: 0;
  }
  8% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}



/* ================ 画像でのスライドショー ================ */


div.slide-show {
width: 100%; /* スライドショーの幅 */
max-width: 100%; /* スマホで表示が欠けないように */
position: relative;
margin: 0px 0px 0 0px;  /* マージン（上右下左） */
}

.slide-show img {
animation: show 12s infinite; /* 12秒のスライドショーを繰り返し */
max-width: 100%;
height: auto;
opacity: 0;
position: absolute; /* 画像を重ねて表示 */
left: 0;
top: 0;
}

@keyframes show {
0% {opacity: 0}
17% {opacity: 1}
33% {opacity: 1}
50% {opacity: 0}
}

.slide-show img:nth-of-type(1) {
position: relative;
}

.slide-show img:nth-of-type(2) {
animation-delay: 0s;
}

.slide-show img:nth-of-type(3) {
animation-delay: 4s;
}

.slide-show img:nth-of-type(4) {
animation-delay: 8s;
}

.resizeimage img { width: 100vw; }




/* ================ スマフォＴＥＬ ================ */

#tel-hero {
  margin-top: 0px;
  margin-bottom: 0px;
  background: #000;
  opacity: .97;
}
#tel-hero .tel-hero-wrap {
  padding-top: 1.5em;/* テキストの開始位置 */
  display: table;
  width: 100%;
  z-index: 99;
}
@media screen and (max-width: 768px) {
		#tel-hero {
		  margin-top: 0px;
		  margin-bottom: 0px;
		  background: #0B025D;
		  opacity: .77;
		}
  #tel-hero .tel-hero-wrap {
  padding-top: 1.0em;/* モバイル時のテキスト開始位置 */
  }
}
#tel-hero .tel-hero-wrap .tel-hero-intro {
  vertical-align: middle;
  text-align: center;
}


#tel-hero .tel-hero-wrap .tel-hero-intro > h4 {
  font-family: 'arial black'; テキストのフォント指定
  font-size: 36px;
  color: #005BAC;/* 文字色 */
  font-weight: bold;
}
@media screen and (max-width: 768px) {
  #tel-hero .tel-hero-wrap .tel-hero-intro > h4 a{
  font-size: 24px;
  color: #fff;/* 文字色 */
  font-weight: bold;
  }
}



/* ================ メイン画像 ================ */

/* テキスト入りメイン画像 */

#future-hero {
  background-color: #fff;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top;/* トップイメージ（背景画像）初期位置の設定 */
  float: left;
  width: 100%;
  display: table;
  position: relative;
  z-index: 20;
  color: #ffffff;
}
#future-hero .overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  background: #ffffff;
  opacity: .97;
}
@media screen and (max-width: 768px) {
  #future-hero {
    background-position: top;/* Ｍトップイメージ（背景画像）初期位置の設定 */
  }
}



/* 画像内のテキスト */

#future-hero .future-hero-wrap {
		padding: 5em 0em 5em 15em; /* テキストの位置（上右下左） */
  display: table;
  width: 100%;
}
@media screen and (max-width: 768px) {
  #future-hero .future-hero-wrap {
		padding: 1em 0em 0em 0em; /* テキストの位置（上右下左） */
  }
}
#future-hero .future-hero-wrap .future-hero-intro {
  vertical-align: middle;
  text-align: center;
  color: #ffffff;
}

#future-hero .future-hero-wrap .future-hero-intro > h1 {
  font-family:serif; /* 明朝体の指定 */
  font-size: 60px;
  line-height: 100%;
		letter-spacing: 0px;	/* 文字間 */
  color: #0B025D;/* h1の文字色 */
  font-weight: bold;
  text-shadow: 2px 2px 1px rgba(204,255,204, 0.2);
}
@media screen and (max-width: 768px) {
  #future-hero .future-hero-wrap .future-hero-intro > h1 {
  font-size: 32px;
  }
}

#future-hero .future-hero-wrap .future-hero-intro > h2 {
  font-family:serif; /* 明朝体の指定 */
  font-size: 32px;
  line-height: 150%;
		letter-spacing: 1px;	/* 文字間 */
  color: #DB0000;/* h2の文字色 */
  font-weight: bold;
  text-shadow: 2px 2px 1px rgba(204,255,204, 0.2);
}
@media screen and (max-width: 768px) {
  #future-hero .future-hero-wrap .future-hero-intro > h2 {
  font-size: 20px;
  line-height: 135%;
  }
}

#future-hero .future-hero-wrap .future-hero-intro > h3 {
  font-family:serif; /* 明朝体の指定 */
  font-size: 30px;
  line-height: 100%;
		letter-spacing: 0px;	/* 文字間 */
  color: #808000;/* h3の文字色 */
  font-weight: bold;
  text-shadow: 2px 2px 1px rgba(204,255,204, 0.2);
}
@media screen and (max-width: 768px) {
  #future-hero .future-hero-wrap .future-hero-intro > h3 {
  font-size: 18px;
  }
}

#future-hero .future-hero-wrap .future-hero-intro > p {
		margin: 0em 0em 0em 0em; /* （上右下左） */
		padding: 0em 0em 0em 0em; /* （上右下左） */
  font-size: 18px;
  line-height: 150%;
		letter-spacing: 1px;	/* 文字間 */
  color: #000000; /* 文字色 */
  text-shadow: 2px 2px 1px rgba(255,255,255, 0.5);
}
@media screen and (max-width: 768px) {
  #future-hero .future-hero-wrap .future-hero-intro > p {
  font-size: 15px;
  }
}

#future-hero .future-hero-wrap .btn:hover, #future-hero .future-hero-wrap .btn:active, #future-hero .future-hero-wrap .btn:focus {
  background: #fff;
  border-color: #fff;
}


body.inner-page #future-hero .future-hero-wrap {
  padding-top: 0em;
}
@media screen and (max-width: 768px) {
  body.inner-page #future-hero .future-hero-wrap {
    padding-top: 0em;
  }
}

@media screen and (max-width: 768px) {
  #future-hero, .future-hero-wrap {
    position: relative;
    padding: 1em 0 1em 0;/* モバイル時のテキスト余白調整 */
    height: inherit !important;
  }
}



/* ================ コンテンツ ================ */

/* コンテンツ */

#future-main {
  position: relative;
  float: left;
  width: 100%;
  margin:  0px 0px 50px 0px; /* （上右下左） */
  padding:  0px 0px 0px 0px; /* （上右下左） */
  font-size: 15px;
  line-height: 150%;
  clear: both;
}

/* 下線付きタイトル */

#future-main h2 {
  border-bottom: solid 2px #008842;
  margin:  0px 0px 30px 0px; /* （上右下左） */
  padding:  0px 0px 0px 0px; /* （上右下左） */
  font-size: 18px;
		font-weight:bold;
  color: #008842;
}



/* ================ 矢印背景のテキスト ================ */

#main-hero .main-hero-wrap {
  position: relative;
  margin-top: 0px;
  margin-bottom: 0px;
  padding-top: 0em;/* テキストの開始位置 */
  display: table;
  width: 100%;
  z-index: 99;
}
@media screen and (max-width: 768px) {
  #main-hero .main-hero-wrap {
  margin-top: 0px;
  margin-bottom: 0px;
  padding-top: 0em;/* モバイル時のテキスト開始位置 */
  }
}
#main-hero .main-hero-wrap .main-hero-intro {
  vertical-align: middle;
  text-align: center;
  color: #ffffff;
}

/*  矢印背景  */

#main-hero .bg-arrow {
    position: relative;
    margin: 0px 0px 0px 0px; /* （上右下左） */
    padding: 0px 0px 0px 0px; /* （上右下左） */
    background: #0B025D;
}
#main-hero .bg-arrow > div {
    position: relative;
    z-index: 2;
}
#main-hero .bg-arrow:after {
    content: "";
    position: absolute;
    display: block;
    left: 0;
    border-style: solid;
}
#main-hero .bg-arrow:after {
    bottom: 0;
    margin-bottom: -4.95vw;
    border-color: #0B025D transparent transparent;
    border-width: 5vw 50vw 0;
}

#main-hero .main-hero-wrap .main-hero-intro > h3 {
  font-size: 28px;
  line-height: 40px;
		letter-spacing: 4px;	/* 文字間 */
  color: #fff;/* h3の文字色 */
  font-weight: bold;
  padding: 20px 0px 0px 0px; /* （上右下左） */
}
@media screen and (max-width: 768px) {
  #main-hero .main-hero-wrap .main-hero-intro > h3 {
  font-size: 18px;
  line-height: 25px;
  }
}





/* ======== コンテンツ-main-（1カラム） ======== */

#fh5co-main {
  position: relative;
  float: left;
  width: 100%;
  clear: both;
}

@media screen and (max-width: 768px) {
  body.inner-page #fh5co-main {
    margin-top: 0px;
    padding-top: 20px;
  }
}


#fh5co-hero,
#fh5co-main,
#fh5co-logo-mobile-wrap {
  -moz-transform: translateX(0px);
  -webkit-transform: translateX(0px);
  -ms-transform: translateX(0px);
  transform: translateX(0px);
}


body.fh5co-mobile-menu-visible #fh5co-hero,
body.fh5co-mobile-menu-visible #fh5co-main,
body.fh5co-mobile-menu-visible #fh5co-logo-mobile-wrap {
  -moz-transform: translateX(275px);
  -webkit-transform: translateX(275px);
  -ms-transform: translateX(275px);
  transform: translateX(275px);
}


body.fh5co-mobile-menu-visible #fh5co-mobile-menu {
  -moz-transform: translateX(0);
  -webkit-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
}



/* ================ 1カラム 背景あり ================ */

#future-back {
  position: relative;
  float: center;
  width: 100%;
  margin:  0px 0px 0px 0px; /* （上右下左） */
  padding:  0px 0px 0px 0px; /* （上右下左） */
  font-size: 15px;
  line-height: 150%;
  clear: both;
}

#future-back {
  background-color: #fff;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top;/* （背景画像）初期位置の設定 */
  float: center;
  width: 100%;
  display: table;
  position: relative;
  z-index: 20;
  color: #ffffff;
}
#future-back .overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  background: #ffffff;
  opacity: .97;
}

#future-back .future-back-wrap {
  padding-top: 5em;/* テキストの開始位置 */
  padding-bottom: 5em;/* テキストの下余白 */
  display: table;
  width: 100%;
  color: #000000; /* 文字色 */
}

/* 下線付きタイトル */
#future-back h2 {
  border-bottom: solid 2px #008842;
  margin:  0px 0px 20px 0px; /* （上右下左） */
  padding:  0px 0px 0px 0px; /* （上右下左） */
  font-family:serif; /* 明朝体の指定 */
  font-size: 40px;
  line-height: 100%;
		letter-spacing: 3px;	/* 文字間 */
  font-weight: bold;
  text-shadow: 2px 2px 1px rgba(204,255,204, 0.2);
}

#future-back p {
		margin: 0em 0em 0em 0em; /* （上右下左） */
		padding: 0em 0em 0em 0em; /* （上右下左） */
  font-size: 16px;
  line-height: 150%;
		letter-spacing: 1px;	/* 文字間 */
  color: #000000; /* 文字色 */
  text-shadow: 2px 2px 1px rgba(255,255,255, 0.5);
}

/* モバイル */

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

  #future-back .future-back-wrap {
  padding-top: 3.0em;/* モバイル時のテキスト開始位置 */
  padding-bottom: 3.0em;/* モバイル時のテキストの下余白 */
  }

  #future-back h2 {
  font-size: 30px;
  }

  #future-back p {
  font-size: 15px;
  }

}



/* ================ お問い合わせ =============== */

#fh5co-contact {
  padding: 7em 0;
}



/* ================ コンテンツ写真ギャラリーなど（works） =============== */

#fh5co-works .fh5co-work-item figure {
  margin-bottom: 0px !important;
  float: left;
  width: 100%;
}
#fh5co-works .fh5co-work-item .heading {
  font-size: 17px;
  margin-bottom: 40px;
}
#fh5co-works .fh5co-work-item .fh5co-category {
  color: #ccc;
  font-size: 13px;
  margin-bottom: 0;
}





/* ================ Spacer　余白を作る =============== */

.fh5co-spacer {
  clear: both;
  position: relative;
  border: none;
  padding: 0;
  margin: 0;
}


.fh5co-spacer-xlg {
  height: 150px;
}
@media screen and (max-width: 768px) {
  .fh5co-spacer-xlg {
    height: 70px;
  }
}


.fh5co-spacer-lg {
  height: 100px;
}
@media screen and (max-width: 768px) {
  .fh5co-spacer-lg {
    height: 50px;
  }
}


.fh5co-spacer-md {
  height: 80px;
}
@media screen and (max-width: 768px) {
  .fh5co-spacer-md {
    height: 30px;
  }
}


.fh5co-spacer-sm {
  height: 50px;
}
@media screen and (max-width: 768px) {
  .fh5co-spacer-sm {
    height: 20px;
  }
}


.fh5co-spacer-xs {
  height: 30px;
}
@media screen and (max-width: 768px) {
  .fh5co-spacer-xs {
    height: 20px;
  }
}


.fh5co-spacer-xxs {
  height: 20px;
}




.fh5co-letter-spacing {
  letter-spacing: 1px;
}

.fh5co-no-margin-bottom {
  margin-bottom: 0 !important;
}



.fh5co-uppercase-heading-sm {
  font-size: 14px;
  line-height: 26px;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: #ccc;
}

.form-group {
  margin-bottom: 30px;
}

.image-popup:hover {
  opacity: .7;
}

.fh5co-section-heading .fh5co-lead {
  position: relative;
}
.fh5co-section-heading .fh5co-lead > .fh5co-line {
  height: 2px;
  display: block;
  width: 100px;
  position: absolute;
  bottom: 0;
  left: 50%;
  margin-left: -50px;
  background: rgba(0, 0, 0, 0.3);
}



.fh5co-section-heading .fh5co-sub {
  font-size: 18px;
}



/* 
========================================

個別のクラス

========================================
*/

/* ================ ボタンパーツ ================ */

.btn {
  border-bottom: none !important;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 20px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  padding-left: 20px;
  padding-right: 20px;
  margin-right: 10px;
}
.btn:hover, .btn:focus, .btn:active {
  box-shadow: none;
  outline: none !important;
  border-color: transparent;
}
.btn.fh5co-btn-icon {
  text-transform: none !important;
  letter-spacing: normal !important;
  padding-left: 15px;
  padding-right: 15px;
}

.btn-outline {
  border: 2px solid #e85035 !important;/* オレンジボタン枠の色 */
  background: rgba(232,80,53, 0.85);/* オレンジボタンの色 */
  color: #2a2e37;
}
.btn-outline:hover, .btn-outline:active, .btn-outline:focus {
  border: 2px solid #f86942 !important;/* オレンジボタン枠　オンマウスの色 */
  background: #f86942 !important;/* オレンジボタン　オンマウスの色 */
  color: #ffffff;
}

.btn-primary {
  border: 2px solid #008842 !important;/* グリーンボタン枠の色 */
  background: rgba(0,102,51, 0.85);/* グリーンボタンの色 */
  color: #2a2e37;
}

.btn-primary:hover, .btn-outline:active, .btn-outline:focus {
  border: 2px solid #008842 !important;/* グリーンボタン枠　オンマウスの色 */
  background: #009933 !important;/* グリーンボタン　オンマウスの色 */
  color: #ffffff;
}

.btn-tokyo {
  border: 2px solid #0071E1 !important;/* ブルーボタン枠の色 */
  background: rgba(0,102,255, 0.85);/* ブルーボタンの色 */
  color: #2a2e37;
}

.btn-tokyo:hover, .btn-outline:active, .btn-outline:focus {
  border: 2px solid #00ADF9 !important;/* ブルーボタン枠　オンマウスの色 */
  background: #00ADF9 !important;/* ブルーボタン　オンマウスの色 */
  color: #ffffff;
}




.btn-success {
  background: #00e195;
}

.btn-danger {
  background: #e02745;
}

.btn-info {
  background: #0bbff2;
}

.btn-warning {
  background: #ffd042;
}

.btn-success,
.btn-info,
.btn-warning,
.btn-danger {
  border-color: transparent;
}

.btn-default:hover, .btn-default:active, .btn-default:focus,
.btn-success:hover,
.btn-success:active,
.btn-success:focus,
.btn-info:hover,
.btn-info:active,
.btn-info:focus,
.btn-warning:hover,
.btn-warning:active,
.btn-warning:focus,
.btn-danger:hover,
.btn-danger:active,
.btn-danger:focus {
  background: #282e3c;
  color: #ffffff;
}




.form-control {
  box-shadow: none !important;
  border: 2px solid #ccc;
}
.form-control:hover, .form-control:focus, .form-control:active {
  outline: none;
  box-shadow: none !important;
  border: 2px solid #57cecd;
}




/* =========== ジャバ要素をクラスで ============= */

.js .to-animate,
.js .feature-box,
.js .work-box,
.js .footer-box,
.js .animate-box {
  opacity: 0;
}



/* =========== 要素で下を空ける ============= */

.heading {
  margin-bottom: 3em;
}



/* =========== ブロック分けの記載（features）=========== */

#fh5co-features {
  padding: 5em 0;/* 余白 */
}
#fh5co-features .fh5co-feature {
  margin-bottom: 12px;/* 下の空き */
}
#fh5co-features .fh5co-feature .heading {
  font-size: 18px;
  margin-bottom: 20px !important;
  font-weight: normal;
  color: #2e2e2e;
}
#fh5co-features .fh5co-feature-icon {
  margin: 0 auto 2em auto;
  text-align: center;
  border-radius: 30px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
}
#fh5co-features .fh5co-feature-icon i {
  vertical-align: middle;
  font-size: 50px;
  color: #57cecd;
}





/* Header */

.fh5co-header {
  text-align: center;
}
.fh5co-header .fh5co-heading {
  font-weight: bold;
  font-size: 45px;
  line-height: 57px;
}
@media screen and (max-width: 768px) {
  .fh5co-header .fh5co-heading {
    font-size: 30px !important;
    line-height: 42px !important;
  }
}
.fh5co-header .fh5co-heading-sub {
  color: #777;
  font-size: 18px;
  line-height: 30px;
}






#fh5co-feature-slider .fh5co-item-slide-text {
  margin-top: 1em;
}
#fh5co-feature-slider .fh5co-item-slide-text > h2 {
  position: relative;
  padding-bottom: 20px;
}
#fh5co-feature-slider .fh5co-item-slide-text > h2 span {
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 40px;
  height: 3px;
  background: #ccc;
  background: rgba(0, 0, 0, 0.1);
}
@media screen and (max-width: 992px) {
  #fh5co-feature-slider .fh5co-item-slide-text {
    margin-top: 0em;
  }
}
@media screen and (max-width: 768px) {
  #fh5co-feature-slider .fh5co-item-slide-text {
    margin-top: 0em;
  }
}
@media screen and (max-width: 480px) {
  #fh5co-feature-slider .fh5co-item-slide-text {
    margin-top: 0em;
  }
}





#fh5co-testimonial {
  padding: 7em 0;
  background-size: cover;
}
#fh5co-testimonial.border-top {
  border-top: 1px solid whitesmoke;
}
@media screen and (max-width: 768px) {
  #fh5co-testimonial {
    padding: 7em 0;
  }
}
#fh5co-testimonial blockquote {
  padding-left: 0;
  width: 70%;
  margin: 0 auto;
  color: #ffffff;
  border-left: none;
  font-size: 45px;
  line-height: 57px;
}
@media screen and (max-width: 768px) {
  #fh5co-testimonial blockquote {
    width: 100%;
    font-size: 35px;
    line-height: 47px;
  }
}
#fh5co-testimonial blockquote p {
  text-align: center;
  color: #ffffff;
}
#fh5co-testimonial .fh5co-testimonial-author {
  font-size: 18px;
}
#fh5co-testimonial .fh5co-uppercase-heading-sm {
  color: #000000;
}




/* Social Icons */

.fh5co-social-icons {
  padding: 0;
}
.fh5co-social-icons li {
  list-style: none;
  display: inline;
  display: inline-block;
}
.fh5co-social-icons li a {
  height: 40px;
  width: 40px;
  border: 1px solid #ebebeb;
  display: table;
  text-align: center;
  color: #2e2e2e;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
}
.fh5co-social-icons li a:hover {
  background: #f86942;
  border: 1px solid #f86942 !important;
  color: #ffffff !important;
}
.fh5co-social-icons li i {
  display: table-cell;
  vertical-align: middle;
  font-size: 18px;
}






/* Pricing Tables */

@media screen and (max-width: 992px) {
  .fh5co-pricing-table-1 .fh5co-pricing-table-item {
    margin-bottom: 20px !important;
  }
}
@media screen and (max-width: 768px) {
  .fh5co-pricing-table-1 .fh5co-pricing-table-item {
    margin-bottom: 20px !important;
    float: left;
    width: 100%;
  }
}
.fh5co-pricing-table-1 .fh5co-pricing-table-item .fh5co-pricing-table-item-body,
.fh5co-pricing-table-1 .fh5co-pricing-table-item .fh5co-pricing-table-item-heading {
  text-align: center;
  float: left;
  width: 100%;
  padding: 1em 2em;
}
.fh5co-pricing-table-1 .fh5co-pricing-table-item .fh5co-pricing-table-item-heading {
  background: #57cecd;
  color: #ffffff;
}
.fh5co-pricing-table-1 .fh5co-pricing-table-item .fh5co-pricing-table-item-heading h3 {
  font-size: 70px;
  position: relative;
  display: inline-block;
}
.fh5co-pricing-table-1 .fh5co-pricing-table-item .fh5co-pricing-table-item-heading h3 sup {
  position: absolute;
  top: 2px;
  margin-left: -7px;
}
.fh5co-pricing-table-1 .fh5co-pricing-table-item .fh5co-pricing-table-item-heading h3 sup, .fh5co-pricing-table-1 .fh5co-pricing-table-item .fh5co-pricing-table-item-heading h3 span {
  font-size: 14px;
  text-transform: uppercase;
}
.fh5co-pricing-table-1 .fh5co-pricing-table-item .fh5co-pricing-table-item-heading p {
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
  letter-spacing: 3px;
  text-transform: uppercase;
}
.fh5co-pricing-table-1 .fh5co-pricing-table-item.fh5co-best-offer .fh5co-pricing-table-item-heading {
  background: #57cecd;
  color: #ffffff;
}
.fh5co-pricing-table-1 .fh5co-pricing-table-item .fh5co-pricing-table-item-body {
  border: 2px solid #ccc;
  border-top: none;
}
.fh5co-pricing-table-1 .fh5co-pricing-table-item .fh5co-pricing-table-item-body ul {
  padding: 0;
  margin: 0;
}
.fh5co-pricing-table-1 .fh5co-pricing-table-item .fh5co-pricing-table-item-body ul li {
  list-style: none;
  padding: 0;
  margin: 0 0 10px 0;
}
.fh5co-pricing-table-1 .fh5co-pricing-table-item.fh5co-best-offer .fh5co-pricing-table-item-body {
  border: 2px solid #57cecd;
  border-top: none;
}







/* Nav Links */

.fh5co-nav-links ul {
  padding: 0;
  margin: 0;
}
.fh5co-nav-links ul li {
  padding: 0;
  margin: 0 0 .5em 0;
  list-style: none;
}
.fh5co-nav-links ul li.active a {
  color: #2e2e2e;
  border-bottom: 2px solid #57cecd;
}





/* ========画像のポジション======== */

img.fh5co-align-right {
  float: right;
  margin: 0 0 .5em 1em;
}
@media screen and (max-width: 480px) {
  img.fh5co-align-right {
    width: 100%;
    margin: 0 0 .5em 0;
  }
}
img.fh5co-align-left {
  float: left;
  margin: 0 1em .5em 0;
}
@media screen and (max-width: 480px) {
  img.fh5co-align-left {
    width: 100%;
    margin: 0 0 .5em 0;
  }
}
img.fh5co-align-center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

a > img.fh5co-align-right {
  float: right;
  margin: 0 0 .5em 1em;
}
@media screen and (max-width: 480px) {
  a > img.fh5co-align-right {
    width: 100%;
    margin: 0 0 .5em 0;
  }
}
a > img.fh5co-align-left {
  float: left;
  margin: 0 1em .5em 0;
}
@media screen and (max-width: 480px) {
  a > img.fh5co-align-left {
    width: 100%;
    margin: 0 0 .5em 0;
  }
}
a > img.fh5co-align-center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}



/* ========会社概要　アクセスマップ======== */


/* テーブル要素（table css） */

#campany table {
width: 95%; /* 概要リストの幅 */
font-size: 1.0em;
vertical-align:middle;
margin:0 auto;
table-layout:fixed;
border:1px solid #999999;
}
#campany th {
background-color:#3E97C1;
padding:12px;
text-align:center;
color:#fff;
border:1px solid #999999;
}
#campany td {
padding:12px;
border:1px solid #999999;
}



/* アクセスマップ(iframe) */

div.iframe-map {
position: relative;
width: 100%;
padding-top: 75%; /* サイズ比 */
}

div.iframe-map iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}



/* ========メールフォームエリア======== */


/* --- フォームエリア --- */
.contact {
width: 95%; /* フォームエリアの幅 */
font-size: 1.0em;
padding:0px 0px 0px 0px;
}
/* --- フォームエリア内の段落 --- */
.contact p {
line-height: 150%;
}
/* --- テーブル --- */
.contact table {
width: 100%; /* テーブルの幅 */
background-color: #f9f9f9; /* テーブルの背景色 */
border: 0px #c0c0c0 solid; /* テーブルの境界線 */
}
/* --- 見出しセル（th） --- */
.contact th {
width: 30%; /* 見出しセルの幅 */
padding: 0px 10px; /* 見出しセルのパディング（上下、左右） */
background-color: #f5f5f5; /* 見出しセルの背景色 */
border-bottom: 1px #c0c0c0 dotted; /* 見出しセルの下境界線 */
text-align: center;
line-height: 150%;
}
/* --- 見出しセル内の補足テキスト --- */
.contact th span.supplement {
font-weight: normal;
}
/* --- データセル（td） --- */
.contact td {
padding: 20px 10px 20px; /* データセルのパディング（上、左右、下） */
background-color: #ffffff; /* データセルの背景色 */
border-bottom: 1px #c0c0c0 dotted; /* データセルの下境界線 */
font-size: 1.25em;
line-height: 150%;
}
/* --- データセル内の補足テキスト --- */
.contact td span.supplement {
font-size: 0.7em;
color: #808080;
}

.contact td span.supplement2 {
color: #FF0000;
}

/* --- 必須項目セル --- */
.contact td.required {
width: 7%; /* 必須項目セルの幅 */
padding: 0px 3px; /* 必須項目セルのパディング（上下、左右） */
background-color: #c4e6fa; /* 必須項目セルの背景色 */
text-align: center;
}
/* --- 任意項目セル --- */
.contact td.arbitrary {
background-color: #e0f1fc; /* 任意項目セルの背景色 */
}

/* --- フォーム部品 --- */
.contact input,
.contact select,
.contact textarea {
margin-bottom: 6px; /* フォーム部品の下マージン */
}

/* --- フォーム部品のサイズ --- */
/* --- （長めのテキスト入力欄） --- */
#company,#email,#address {
width: 100%; /* フォーム部品の幅 */
}
#section, #name, #name1 {
width: 80%; /* フォーム部品の幅 */
}
/* --- （中めのテキスト入力欄） --- */
#tel,#fax1 {
width: 70%; /* フォーム部品の幅 */
}
/* --- （短めのテキスト入力欄） --- */
#zip1, {
width: 60%; /* フォーム部品の幅 */
}
/* --- （複数行のテキスト入力欄） --- */
#message {
width: 100%; /* フォーム部品の幅 */
height: 15em; /* フォーム部品の高さ */
}

/* --- ボタン --- */
.contact p.button {
margin: 20px 0 0; /* ボタンのマージン（上、左右、下） */
text-align: center;
}



/*================================================
 *      フッター
 ================================================*/

@media print, screen and (min-width:769px) {

/*フッター全体*/

footer {
	clear: both;
	text-align: center;
	background: #0B025D;	/*背景色*/
	color: #FFF;			/*文字色*/
	padding-top: 15px;
	padding-bottom: 15px;
}

.address{
	clear: both;
 padding:30px 0px 20px 0px; /* 余白（上右下左） */
 font-size:0.75em;
 color:#fff;
 text-align:center;
}


footer a {
	color: #FFF;	/*文字色*/
	text-decoration: none;
	margin:20px 20px 20px 0px; /* 余白（上右下左） */
 padding:0px 0px 0px 15px; /* 余白（上右下左） */
 background: url(../images/bg_footmenu.gif) 0 50% no-repeat;

}
footer a:hover {
	color: #FC0;	/*マウスオン時の文字色*/
}


/*フッターメニュー*/

.footermenu {
	text-align: right;
	width: 1000px;
	margin: 0px auto;
	margin-bottom: 20px;
	overflow: hidden;
	font-size: 11px;	/*文字サイズ*/
}
.footermenu ul {
	float: left;
	width: 22.8%;	/*１列あたりの幅*/
	height: 100px;	/*１列あたりの高さ。※メニュー量に応じて調整して下さい。*/
	border-right: 1px solid #fff;	/*列ごとの右側に入る線の設定*/
	padding-left: 15px;	/*境界線との間にとるスペース*/
	list-style:none;
}
/*一番左の線*/
.footermenu ul:first-child {
	border-left: 1px solid #fff;
}
}



/* ======== フッター  ipad 向けデザイン ======== */

@media screen and (max-width:768px)
{
footer {
	clear: both;
	text-align: center;
	background: #FFF;	/*背景色*/
	color: #FFF;			/*文字色*/
	padding-top: 15px;
	padding-bottom: 15px;
}

.address{
	clear: both;
 padding:30px 20px 30px 20px; /* 余白（上右下左） */
 font-size:0.65em;
 color:#fff;
 text-align:center;
}

footer a {
	color: #FFF;	/*文字色*/
	text-decoration: none;
	margin:20px 20px 20px 0px; /* 余白（上右下左） */
 padding:0px 0px 0px 15px; /* 余白（上右下左） */
 background: url(../images/bg_footmenu.gif) 0 50% no-repeat;
}
footer a:hover {
	color: #FC0;	/*マウスオン時の文字色*/
}

.footermenu {
	text-align: left;
	width: 95%;
	margin: 0px auto;
	margin-bottom: 20px;
 padding:0px 0px 0px 20px; /* 余白（上右下左） */
	overflow: hidden;
}
.footermenu ul {
float: left;
width: auto;	/*１列あたりの幅*/
height: 100px;	/*１列あたりの高さ。※メニュー量に応じて調整して下さい。*/
border-right: 0px solid #fff;	/*列ごとの右側に入る線の設定*/
padding-left: 40px;	/*境界線との間にとるスペース*/
list-style:none;
}

}



/* ======== フッター固定ボトムメニュー ======== */

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

/*メニューをページ下部に固定*/
#sp-fixed-menu{
   position: fixed;
   width: 100%;
   bottom: 0px;
   font-size: 0;
   opacity: 0.9;
   z-index: 99;
			border-bottom:15px solid #584007;
}

/*メニューを横並びにする*/
#sp-fixed-menu ul{
   display: flex;
   list-style: none;
   padding:0;
   margin:0;
   width:100%;
}

#sp-fixed-menu li{
   justify-content: center;
   align-items: center;
   width: 100%;
   padding:0;
   margin:0;
   font-size: 14px;
   border-right: 1px solid #fff;
}

/*スタートメニュー（左）*/
#sp-fixed-menu li:first-child{
   background: #000000;
}

/*中間メニュー*/
#sp-fixed-menu li{
   background: #000000;
}

/*エンドメニュー（右）*/
#sp-fixed-menu li:last-child{
   background: #000000;
   border-right: 0px solid #fff;
}

/*ボタンを調整*/
#sp-fixed-menu li a{
   color: #fff;
   text-align: center;
   display:block;
   width: 100%;
   padding:18px 0; /* メニューのパディング（上下、左右） */
}
}



/* ========　ページトップへの戻り　======== */

.totop {
	position:fixed;
	bottom:30px;
	right:50px;
 z-index: 99;
}
.totop a {
	display:block;
	text-decoration:none;
}
.totop img {
	background:#000;
}
.totop img:hover {
	background:#C2C2C2;
}

@media only screen and (max-width: 768px) {
	.totop {
		position:fixed;
		bottom:100px; /* ボトムアイコンの上にするための100px */
		right:2px;
	}
	.totop img {
  width: 70%;
	}
}



/* ========　諸費用の比較表　======== */

/* テーブル要素（table css） */

#kaisha table {
width: 99%; /* 概要リストの幅 */
font-size: 0.90em;
vertical-align:middle;
margin:0 auto;
table-layout:fixed;
border:1px solid #999999;
}
#kaisha th {
background-color:#004891;
padding:12px;
text-align:center;
color:#fff;
border:1px solid #999999;
}
#kaisha td {
padding:12px;
border:1px solid #999999;
}

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

#kaisha table {
width: 100%; /* 概要リストの幅 */
font-size: 0.80em;
vertical-align:middle;
margin:0 auto;
table-layout:fixed;
border:1px solid #999999;
}
#kaisha th {
background-color:#004891;
padding:6px;
text-align:center;
color:#fff;
border:1px solid #999999;
}
#kaisha td {
padding:6px;
border:1px solid #999999;
}

}


/* ========　オリジナルＣＳＳ　======== */


/* パソコンのみで表示"pc"のclass */

.pc { display: block !important; }
.sp { display: none !important; }
.pm { display: block !important; }
.sm { display: none !important; }

/* タブレット以下で表示"sp"のclass */

@media only screen and (max-width: 768px) {
.pc { display: none !important; }
.sp { display: block !important; }
}

/* スマートフォンのみで表示"sp"のclass */

@media only screen and (max-width: 480px) {
.pm { display: none !important; }
.sm { display: block !important; }
}


/* iframeのレスポンシブ */

.iframe-wrap {
		  position: relative;
		  width: 98%;
				margin: -10px 0px 50px 8px; /* マージン（上右下左） */
		  padding-top: 300px; /* フレームの高さ指定 */
		  overflow:auto; 
		  -webkit-overflow-scrolling:touch;
		  border:0px solid #ccc; 
}
.iframe-wrap iframe {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    border:none;
    display:block;
}


.fun-button{ float:right; padding:0px 8px 0px 0px; vertical-align:middle; }


div#pan-url       { width:100%; display:block; overflow:hidden; margin:12px auto 0; }
div#pan-list      { float:left; margin:3px 0; }
div#pan-list  ul  { margin:0; padding:0; font-size:13px; }
div#pan-list  li  { 	display:inline; line-height:120%; list-style-type:none; }
div#pan-list  li a{ 	padding-right:10px; background:url(../images/topicpath.gif) no-repeat right; }


.strong{ font-weight:bold; }
.white  { color : #ffffff ; }
.black  { color : #000000 ; }
.blue   { color : #000094 ; }
.green  { color : #008000 ; }
.red    { color : #FF0F0F; }	 
.orange { color : #FF641A; }	 
.pink   { color : #FF00FF; }	 

.text10 {font-size: 10px; line-height : 150% ; }
.text10w {font-size: 10px; line-height : 150% ; }
.text12 {font-size: 12px; line-height : 150% ; }
.text12w {font-size: 12px; line-height : 160% ; }
.text14 {font-size: 14px; line-height : 150% ; }
.text14w {font-size: 14px; line-height : 200% ; }
.text15 {font-size: 15px; line-height : 150% ; }
.text16 {font-size: 16px; line-height : 150% ; }
.text18 {font-size: 18px; line-height : 150% ; }
.text20 {font-size: 20px; line-height : 150% ; }
.text26 {font-size: 26px; line-height : 150% ; }
.text30 {font-size: 30px; line-height : 150% ; }
.text40 {font-size: 40px; line-height : 150% ; }
.text50 {font-size: 50px; line-height : 100% ; }


@media screen and (max-width: 768px) {
.text15 {font-size: 14px; line-height : 130% ; }
.text40 {font-size: 24px; line-height : 130% ; }
.text50 {font-size: 30px; line-height : 100% ; }
}


/* 日本語の大文字（明朝体） */

.text60 {
		font-size: 60px;
		font-family:  'MS Mincho'; テキストのフォント指定 */
		letter-spacing: 0px;
		line-height : 120% ; 
		}

@media screen and (max-width: 768px) {
.text60 {
		font-size: 30px;
		font-family:  'MS Mincho'; テキストのフォント指定 */
		letter-spacing: 0px;
		line-height : 120% ; 
		}
}

/* 英字の大文字 */

.text70 {
		font-size: 60px;
		font-family: 'arial black';/* テキストのフォント指定 */
		letter-spacing: 0px;
		line-height : 120% ; 
		}

@media screen and (max-width: 768px) {
.text70 {
		font-size: 30px;
		font-family: 'arial black';/* テキストのフォント指定 */
		letter-spacing: 0px;
		line-height : 120% ; 
		}
}


.text80 {
		font-size: 80px;
		font-family: 'arial black';/* テキストのフォント指定 */
		letter-spacing: 0px;
		line-height : 120% ; 
		}

@media screen and (max-width: 768px) {
.text80 {
		font-size: 30px;
		font-family: 'arial black';/* テキストのフォント指定 */
		letter-spacing: 0px;
		line-height : 120% ; 
		}
}

.float-left  { float:left; }
.float-center{ float:center; }
.float-right { float:right; }
.align-center { text-align:center; }
.align-left  { text-align:left; margin-left:10px ; }
.align-right  { text-align:right; margin-right:10px ; }

.middle { vertical-align:middle;}　/* テキスト縦方向の中央揃え位置指定 */


@media screen and (max-width:768px){
	.center-photo {
	  display: block;
	  margin: 0 auto;
	  margin-left: auto;
	  margin-right: auto;
	}
}



.padding-6px{ padding:6px; }
.padding6   { padding:6px; }
.padding12  { padding:12px; }
.padding16  { padding:16px; }
.padding20  { padding:20px; }
.padding30  { padding:30px; }
.padding-b6 { padding-bottom:6px; }
.padding-b12{ padding-bottom:12px; }
.padding-b20{ padding-bottom:20px; }
.padding-b30{ padding-bottom:30px; }
.padding-t6 { padding-top:6px; }
.padding-t12{ padding-top:12px; }
.padding-t20{ padding-top:20px; }
.padding-t30{ padding-top:30px; }
.margin6   { margin:6px; }
.margin12  { margin:12px; }
.margin20  { margin:20px; }
.margin30  { margin:30px; }
.margin-b6 { margin-bottom:6px; }
.margin-b12{ margin-bottom:12px; }
.margin-b20{ margin-bottom:20px; }
.margin-b30{ margin-bottom:30px; }
.margin-t6 { margin-top:6px; }
.margin-t12{ margin-top:12px; }
.margin-t20{ margin-top:20px; }
.margin-t30{ margin-top:30px; }



/* 特殊なマージン */

.margin-b-20{ margin-bottom:-30px; }

@media screen and (max-width: 480px) {
.margin-b-20{ margin-bottom:-20px; }
}

.padding-le12{ padding-left:12px; }
.padding-le20{ padding-left:20px; }

@media screen and (max-width:768px){
.padding-le20{ padding-left:0px; }
}


/* 改行の指示（ＰＣとスマホ） */

@media screen and (min-width: 680px){   
  .bpc { display:inline-block; }
  .bsm { display:none; }
}
@media screen and (max-width: 680px){   
  .bpc { display:none; }
  .bsm { display:inline-block; }
}



/*# sourceMappingURL=style.css.map */