/*list2（service.htmlで利用している各ボックス）
---------------------------------------------------------------------------*/
/*各ボックスの設定*/
.list2 {
	position: relative;
	float: left;	/*左に回り込み*/
	width: 30%;		/*ボックス幅*/
	margin: 0 1.5% 40px;	/*上、左右、下へ、ボックスの外側に空けるスペース*/
	text-align: center;		/*内容を中央よせ*/
}
/*ボックス内の画像*/
.list2 figure {
	margin-bottom: 20px;	/*画像の下に空けるスペース*/
}
.list2 figure a:hover{
	opacity: 0.8;	/*マウスオン時。透明度80%にする。*/
}
/*ボックス内のh4（見出し）タグ*/
.list2 h4 {
	position: absolute;
	top: 0px;	/*list2ボックスの上から0pxの場所に配置*/
	width: 100%;	/*幅*/
	background: #ff0000;	/*背景色（古いブラウザ用）*/
	background: rgba(255,0,0,0.7);	/*背景色。0,0,0は黒の事で0.7は70%色がついた状態。*/
	color: #fff;	/*文字色*/
}
/*ボックス内のp（段落）タグ*/
.list2 p {
	padding: 0px !important;
}


/*画面幅680px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:680px){

/*ボックス内のh4（見出し）タグ*/
.list2 h4 {
	display: none;	/*スペースが狭くなって見出しの下に画像が隠れてしまうので、見出しを非表示にする。*/
}

/*各ボックスの設定*/
.list2 {
	position: relative;
	width: 98%;		/*ボックス幅*/
	margin: 0 1.5% 40px;	/*上、左右、下へ、ボックスの外側に空けるスペース*/

}

}



/*btn1
---------------------------------------------------------------------------*/
/*btn1共通*/
a.btn1 {
	text-decoration: none;display: inline-block;
	background: #072d38 url(../images/arrow1.png) no-repeat 15px center;	/*古いブラウザ用*/
	background: #072d38 url(../images/arrow1.png) no-repeat 15px 7px / 6px;	/*背景色、背景の矢印画像の読み込み、左から15pxの場所に配置。幅を6pxに。*/
	color: #FFF !important;
	border-radius: 2px;			/*角丸のサイズ。ほんの少しだけ角を丸くしています。*/
	padding-left:30px;
	padding-right:10px;
	
}
/*マウスオン時*/
a.btn1:hover{
	background: #cc0033 url(../images/arrow1.png) no-repeat 15px 7px / 6px;
}
/*contents内のbtn1。主にinfo.htmlやservice.htmlで使っています。*/
#contents a.btn1 {
	padding: 0px 35px 0px 50px;	/*上、右、下、左へのボックス内の余白*/
	letter-spacing: 0.2em;		/*文字間隔を広くとる設定*/
}





.migi img{float: right;width: 20%;padding: 8px;}
.hidari img{float: left;width: 20%;padding: 8px;}

/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){
.migi img{float: right;width: 40%;padding: 8px;}
.hidari img{float: left;width: 40%;padding: 8px;}

}


/* ひとつ前に戻る */
.prev{
	text-align: right;
	margin-top: 10px;
	margin-bottom: 20px;
}
.prev a:hover{
	color: rgb(75,152,39);
	text-decoration: underline;
}

/*================================================
 *  スマートフォン向けデザイン
 ================================================*/
@media screen and (max-width:767px) {

.prev{
	text-align: center;
}
.prev a{
	color: rgb(255,255,255);
	background-color: rgb(1,181,192);
	font-size: 90%;
	text-decoration: none;
	padding-top: 8px;
	padding-bottom: 8px;
	display: block;
	border-radius: 5px;

}

.prev a:hover{
	color: rgb(255,255,255);
	background-color: rgb(102,102,102);
	text-decoration: none;
}

}


/* ボタン
================================================ */
.buttonbox {
	clear: both;
	overflow: hidden;
	padding: 5px 0;
	text-align: center;
	width: 100%;
}


.button,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
  display: inline-block;
  height: 38px;
  padding: 0 10px;
  margin-right: 5px;
  margin-bottom: 5px;
  color: #fff;
  text-align: center;
  font-size: 14px;
  font-weight: 300;
  line-height: 38px;
  letter-spacing: .1rem;
  text-transform: none;
  text-decoration: none;
  white-space: nowrap;
  background-color: transparent;
  border: 1px solid #bbb;
  border-radius: 0;
  cursor: pointer;
  box-sizing: border-box; 
  background: #0b4353;
  }

.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,

.button:focus,
button:focus,
input[type="submit"]:focus,
input[type="reset"]:focus,
input[type="button"]:focus {
  color: #072d38;
  border-color: #072d38;
  background: #fff;
  outline: 0; 
  
  
  }


.buttonbox02 {
	color: #FFF;
	background-color: #072D38;
	text-align: center;
	padding-top: 8px;
	padding-right: 12px;
	padding-bottom: 8px;
	padding-left: 12px;
}

.buttonbox03 {
	color: #072D38;
	text-align: center;
	padding-top: 8px;
	padding-right: 12px;
	padding-bottom: 8px;
	padding-left: 12px;
	border: 3px solid #072D38;
}


/*================================================
 * テーブル
 ================================================*/

.col-head-type1 {
  border-collapse: collapse;
  width: 100%;
  margin-top:10px;
  
}
 

.col-head-type1 td {
   padding:2px;
   text-align: left;
     width: 80%;
     border: 1px solid #dbe1e8; 
}
 
.col-head-type1 th {
  background: #fff;
  text-align: left;
  width: 20%;
  border: 1px solid #dbe1e8; 
}
 
@media only screen and (max-width: 800px) {
  .col-head-type1 tr,
  .col-head-type1 th,
  .col-head-type1 td {
    display: block;
    width: auto;
  }
  
  .col-head-type1 tr:first-child {
    border-top: 1px solid #dbe1e8;  
  }
  
  .col-head-type1 th,
  .col-head-type1 td {
    border-top: none;
  }
}

/*================================================
 * テーブル
 ================================================*/

.col-head-type2 {
  border-collapse: collapse;
  width: 95%;
  margin-top:5px;
  margin-left:15px;
  margin-right:5px;
}
 

.col-head-type2 td {
   padding:2px;
   text-align: left;
      width: 83%;
}
 
.col-head-type2 th {
  background: #fff;
  text-align: left;
  width: 12%;
}
 
@media only screen and (max-width: 800px) {
.col-head-type2 {
  margin-top:5px;
  margin-left:0;
  margin-right:0;
}


  .col-head-type2 tr,
  .col-head-type2 th,
  .col-head-type2 td {
    display: block;
    width: auto;
  }
  
  .col-head-type2 tr:first-child {
    border-top: 1px solid #dbe1e8;  
  }
  
  .col-head-type2 th,
  .col-head-type2 td {
    border-top: none;
  }
}


/* グリッド
---------------------------------------------------------------------------*/
.container {
    margin: 0 auto;
    max-width: 1200px;
    padding: 0 0.2rem;
    position: relative;
}
/* ブロックを縦に表示 */
.row {
    display: flex;
    flex-direction: column;
    padding: 0;
    width: 100%;
}
.col {
    display: block;
    flex: 1 1 auto;
    margin-left: 0;
    max-width: 100%;
    width: 100%;
}
/* 768px以上の表示 */
@media ( min-width : 768px ) {
.row {
    display: flex;
    flex-direction: row;
    padding: 0;
}
.col {
    margin-left: 4%;
}
	
.col:first-child { 
    margin-left: 0; 
}

.row .col.span-1 {
    flex: 0 0 4.66666666667%;
    max-width: 4.66666666667%;
}
.row .col.span-2 {
    flex: 0 0 13.3333333333%;
    max-width: 13.3333333333%;
}
.row .col.span-3 {
    flex: 0 0 22%;
    max-width: 22%;
}
.row .col.span-4 {
    flex: 0 0 30.6666666667%;
    max-width: 30.6666666667%;
}
.row .col.span-5 {
    flex: 0 0 39.3333333333%;
    max-width: 39.3333333333%;
}
.row .col.span-6 {
    flex: 0 0 48%;
    max-width: 48%;
}
.row .col.span-7 {
    flex: 0 0 56.6666666667%;
    max-width: 56.6666666667%;
}
.row .col.span-8 {
    flex: 0 0 65.3333333333%;
    max-width: 65.3333333333%;
}
.row .col.span-9 {
    flex: 0 0 74.0%;
    max-width: 74.0%;
}
.row .col.span-10 {
    flex: 0 0 82.6666666667%;
    max-width: 82.6666666667%;
}
.row .col.span-11 {
    flex: 0 0 91.3333333333%;
    max-width: 91.3333333333%;
}
.row .col.span-12 {
    flex: 0 0 100%;
    max-width: 100%;
}


/*===================カラム=============================*/
.solo, .full { float:left; width:98%; margin:1em 1%;display: flexbox;}

.duo, .half { float:left; width:48%; margin:1em 1%;}
.trio, .one-third { float:left; width:31.33%; margin:0.1em 1%; margin-bottom: 10px;}
.two-thirds { float:left; width:64.66%; margin:1em 1%;}
.quad, .quarter { float:left; width:23%; margin:1em 1%;}
.three-quarters { float:left; width:73%; margin:1em 1%;}
.penta, .twenty { float:left; width:18%; margin:1em 1%;}
.forty { float:left; width:38%; margin:1em 1%;} 
.sixty { float:left; width:58%; margin:1em 1%;}
.eighty { float:left; width:78%; margin:1em 1%;}

@media only screen and (max-width: 767px) {
	.solo, .full, .duo, .half, .trio, .one-third, .two-thirds, .quad, .quarter, .three-quarters, .penta, .twenty, .forty, .sixty, .eighty { width:98%; margin:2em 1%;}
}

/*===================コンテンツ=============================*/
.contents-top {
	clear: both;
	overflow: hidden;
	background: #072d38;	/*背景色*/
}

.contents-sub {
	clear: both;
	overflow: hidden;
	background: #072d38;	/*背景色*/
}

/*inner共通
---------------------------------------------------------------------------*/
.inner {
	max-width: 60%;	/*サイトの最大幅*/
	margin: 0 auto;
	padding: 0 2%;
}

.inner-top {
	max-width: 70%;	/*サイトの最大幅*/
	margin: 0 auto;

}

.inner-sub {
	max-width: 70%;	/*サイトの最大幅*/
	margin: 0 auto;

}


@media screen and (max-width:1500px) {
.inner {
	max-width: 98%;	/*サイトの最大幅*/
	margin: 0 auto;
	padding: 0 2%;
}
.inner-top {
	max-width: 100%;	/*サイトの最大幅*/
	margin: 0 auto;

}

.inner-sub {
	max-width: 100%;	/*サイトの最大幅*/
	margin: 0 auto;

}

}

@media screen and (max-width:1150px) {
.inner {
	max-width: 100%;	/*サイトの最大幅*/
	margin: 0 auto;
	padding: 0 2%;
}
.inner-top {
	max-width: 100%;	/*サイトの最大幅*/
	margin: 0 auto;

}
.inner-sub {
	max-width: 100%;	/*サイトの最大幅*/
	margin: 0 auto;

}

}