@charset "UTF-8";
/* CSS Document */

/*************************************
　　　　　　　　　　　ボタン
***********************************/

/*-----------戻るボタン（半透明）【共通】----------*/
.back {
 position: fixed;
 bottom: 10px;
 right: 10px; 
 z-index: 2; 
 filter:alpha(opacity=50);
 -moz-opacity:0.50;
 -khtml-opacity: 0.50;
 opacity:0.50;
}


/*--------詳細へのボタン（茶色バック）【共通】--------*/
p.button-readmore{
padding:0px 0px 0px;
margin-right: 10px;
text-align:right;
}
p.button-readmore a{
padding:5px 10px;
border-radius:10px;
font-size:13px;
font-size: 1.3rem;
color:#fff;
text-decoration: none;
 background: -webkit-linear-gradient(top, #998d7f 0%, #5a544b 100%);
 background-color: #5a544b  ;
}

p.button-readmore a:hover{background:#488fdd;}



/*************************************
　　　　　　　　　　　矢印
***********************************/

/*-----------ベース-style1〜３----------*/
.arrow{
position: relative;
display: inline-block;
padding: 0 0 0 16px;
color: #000;
vertical-align: middle;
text-decoration: none;
font-size: 15px;
  font-size: 1.5rem;

}
.arrow::before,
.arrow::after{
position: absolute;
top: 0;
bottom: 0;
left: 0;
margin: auto;
content: "";
vertical-align: middle;
}
/*-矢印▶（青）-----*/
.style1::before{
left: 4px;
box-sizing: border-box;
width: 6px;
height: 6px;
border: 6px solid transparent;
border-left: 6px solid #344899;
}
.tyle1::after{
left: 0;
width: 8px;
height: 6px;
border-left: 4px solid #344899;
}

/*-角丸ベタ三角右(青）-*/
.style2::before{
width: 17px;
height: 16px;
-webkit-border-radius: 25%;
border-radius: 25%;
 background: -webkit-linear-gradient(top, #3e62ad 0%, #191970 100%);
background: linear-gradient(to bottom, #3e62ad 0%, #191970 100%);
 background-color: #344899 ;
}
.style2::after{
left: 7px;
box-sizing: border-box;
width: 7px;
height: 5px;
border: 5px solid transparent;
border-left: 5px solid #fff;
}

/*-くの字矢印(黄色）-*/
.style3::before{
width: 14px;
height: 14px;
-webkit-border-radius: 25%;
border-radius: 25%;
 background: -webkit-linear-gradient(top, #FADF00 0%, #DAA520 100%);
background: linear-gradient(to bottom, #FADF00 0%, #DAA520 100%);
 background-color: #DAA520 ;
 vertical-align:middle;
  margin-right: 3px;
}
.style3::after{
left: 4px;
width: 4px;
height: 4px;
border-top: 1px solid #fff;
border-right: 1px solid #fff;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}

/*-右上に曲がった矢印アイコン-*/
.style6::before {
left: 8px;
box-sizing: border-box;
width: 6px;
height: 6px;
border: 6px solid transparent;
border-left: 6px solid #7a0;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
.style6::after {
top: 8px;
left: -3px;
border: 0 solid transparent;
border-left: 4px solid #7a0;
border-radius: 0 0 0 10px;
width: 9px;
height: 9px;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}






/*-三角の矢印アイコン（正円背景））-*/
.style4-2::before{
width: 14px;
height: 14px;
-webkit-border-radius: 50%;
border-radius: 50%;
background: #917f0c;
}
.style4-2::after{
left: 5px;
box-sizing: border-box;
width: 8px;
height: 8px;
border: 4px solid transparent;
border-left: 5px solid #fff;
}



/*-角丸ベタ(青）[Q]-*/
.style4::before{
  content: "Q";
color:#fff;
font-weight:bold;
padding:0px 4px 8px 5px;
width: 14px;
height: 14px;
-webkit-border-radius: 25%;
border-radius: 25%;
 background: -webkit-linear-gradient(top, #3f7af2 0%, #121254 100%);
background: linear-gradient(to bottom, #3f7af2 0%, #121254 100%);
 background-color: #344899 ;
}
.style4::after{
display: block; 
　width: 5px; 
　height: 5px; 
　border-bottom: 2px solid #fff; 
　border-right: 2px solid #fff; 
　-webkit-transform: 
　rotation(45deg); content: ""; 
}


/*-角丸ベタ(茶）[Q]-*/
.style5::before{
  content: "Q";
color:#fff;
font-weight:bold;
padding:0px 4px 8px 5px;
width: 14px;
height: 14px;
-webkit-border-radius: 25%;
border-radius: 25%;
 background: -webkit-linear-gradient(top, #AF9B52 0%, #7A6B38 100%);
background: linear-gradient(to bottom, #AF9B52 0%, #7A6B38 100%);
}
.style5::after{
display: block; 
　width: 5px; 
　height: 5px; 
　border-bottom: 2px solid #fff; 
　border-right: 2px solid #fff; 
　-webkit-transform: 
　rotation(45deg); content: ""; 
}




/*-----------下向き(流れ）----------*/

.arrow1{
width: 40px;
float: left;
margin: 0px 0px 0px 20px;
}
.arrow1::before{
  content: "";
  display: block;
  margin: 0 auto;
  width: 15px;
  height: 15px;
  background: #8CACFF;
}
.arrow1::after{
  content: "";
  display:block;
  border-top: 20px solid #8CACFF;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  transform-origin: left top;
  transform: scaleY(.5);
}

.arrow2{
width: 40px;
float: left;
margin: 0px 0px 0px 20px;
}
.arrow2::before{
  content: "";
  display: block;
  margin: 0 auto;
  width: 15px;
  height: 30px;
  background: #8CACFF;
}
.arrow2::after{
  content: "";
  display:block;
  border-top: 20px solid #8CACFF;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  transform-origin: left top;
  transform: scaleY(.5);
}

.arrow3{
width: 40px;
float: left;
margin: 0px 0px 0px 20px;
}
.arrow3::before{
  content: "";
  display: block;
  margin: 0 auto;
  width: 15px;
  height: 60px;
  background: #8CACFF;
}
.arrow3::after{
  content: "";
  display:block;
  border-top: 20px solid #8CACFF;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  transform-origin: left top;
  transform: scaleY(.5);
}



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

/*---------スライダー付テーブル----------*/
table.fee {
	width: 100%;
	margin: 0 auto;
	border-collapse: collapse;
	border-spacing:0;
}
th, td {
	margin: 0;
	padding: 4px 10px 4px 10px;
	font-size: 14px;
	font-size: 1.4rem;
	border: 0px solid #ccc;
	
}
th {
	background: #E5E5E5;
	text-align: center;
}

table.fee {
	display: block;
	position: relative;
}
thead.fee {
	display: block;
	float: left;
}
tbody.fee {
	display: block;
	position: relative;
	width: auto;
	overflow-x: auto;
	white-space: nowrap;
}
thead.fee th {
	display: block;
}
tbody.fee td {
	display: block;
}
tbody.fee tr {
	display: inline-block;
}
th:not(:last-child) {
	border-bottom: none;
}
td:not(:last-child) {
	border-bottom: none;
}
td {
	border-left: none;
}

/**----レスポンシブテーブルデザイン 表----**/
table.resbase{
	width: 97%;
  border-collapse: collapse;
  border: solid 1px #999999;
  margin: 0px 0px 0px 5px;
  border: 2px solid #999999;
  overflow: hidden;
  word-break: break-all;
  word-wrap: break-word;
}
.resbase th{
  border-collapse: collapse;
  min-width: 80px;
  font-size: 14px;
  font-size: 1.4rem;
  font-weight: bold;
  border: solid 1px #999999;
  padding: 4px 10px 4px 10px;
  background-color: #E5E5E5;
  word-break: break-all;
  word-wrap: break-word;
}
.resbase td{
  border-collapse: collapse;
  font-size: 14px;
  font-size: 1.4rem;
  border: solid 1px #999999;
  padding: 4px 7px 4px 7px;
  width: auto;
overflow: hidden;
word-break: break-all;
word-wrap: break-word;
}
 
 /*------------------------------  
　　　　表（テーブル）【共通】
-------------------------------*/

/*--最小幅指定　テーブル--*/
table.base {
  border-collapse: collapse;
  border: solid 1px #999999;
  margin: 0px 15px 4px 10px;
}
td.base {
  border-collapse: collapse;
  font-size: 14px;
    font-size: 1.4rem;
  border: solid 1px #999999;
  padding: 4px 7px 4px 7px;
  width: auto;
}

td.base_b {
  border-collapse: collapse;
  font-size: 14px;
    font-size: 1.4rem;
  border: solid 1px #999999;
  padding: 4px 7px 4px 7px;
  width: auto;
  text-align: center;
  font-weight: bold;
}

td.base_50 {
  border-collapse: collapse;
  font-size: 14px;
    font-size: 1.4rem;
  border: solid 1px #999999;
  padding: 4px 6px 4px 6px;
  min-width: 50px;
}

/*--2文字--*/
th.min30 {
  border-collapse: collapse;
  font-size: 14px;
    font-size: 1.4rem;
  font-weight: bold;
  text-align: center;
  border: solid 1px #999999;
  padding: 4px 6px 4px 6px;
  background-color: #E5E5E5;
  min-width: 30px;
  max-width: 120px; 
}
/*--3文字--*/
th.min40 {
  border-collapse: collapse;
  font-size: 14px;
    font-size: 1.4rem;
  font-weight: bold;
  text-align: center;
  border: solid 1px #999999;
  padding: 4px 6px 4px 6px;
  background-color: #E5E5E5;
  min-width: 40px;
  max-width: 120px; 
}

/*--文字--*/
th.min50 {
  border-collapse: collapse;
  font-size: 14px;
    font-size: 1.4rem;
  font-weight: bold;
  text-align: center;
  border: solid 1px #999999;
  padding: 4px 6px 4px 6px;
  background-color: #E5E5E5;
  min-width: 50px;
  max-width: 80px; 
}
/*--4文字--*/
th.min60 {
  border-collapse: collapse;
  font-size: 14px;
    font-size: 1.4rem;
  font-weight: bold;
  text-align: center;
  border: solid 1px #999999;
  padding: 4px 6px 4px 6px;
  background-color: #E5E5E5;
  min-width: 60px;
  max-width: 130px; 
}

/*--4文字--*/
th.min70 {
  border-collapse: collapse;
  font-size: 14px;
    font-size: 1.4rem;
  font-weight: bold;
  text-align: center;
  border: solid 1px #999999;
  padding: 4px 6px 4px 6px;
  background-color: #E5E5E5;
  min-width: 70px;
  max-width: 130px; 
}
 
 
 
/*************************************
　　　　 文字関連のスタイル 　【共通】
***********************************/

/*-----文字インデント　【共通】-----*/
.att1p {
  padding-left: 1em;
  text-indent: 0em;
}
.att1.5p {
  padding-left: 1.5em;
  text-indent: 0.8em;
}
.att2p {
  padding-left: 2em;
  text-indent: 0em;
}
.att3p {
  padding-left: 3em;
  text-indent: 0em;
}

.att4p {
  padding-left: 4em;
  text-indent: 0em;
}
.att5p {
 padding-left: 5em;
 text-indent: 0em;
}
.att6p {
 padding-left: 6em;
 text-indent: 0em;
}
.att8p {
 padding-left: 8em;
 text-indent: 0em;
}

.att1-1 {
 padding-left: 2em;
 text-indent: -1em;
}

.att {
 padding-left: 1em;
 text-indent: -1em;
}
.att2 {
 padding-left: 2em;
 text-indent: -2em;
}
.att3 {
 padding-left: 3em;
 text-indent: -3em;
}
.att4 {
 padding-left: 4em;
 text-indent: -4em;
}
.att5 {
 padding-left: 5em;
 text-indent: -5em;
}
.att6 {
 padding-left: 6em;
 text-indent: -6em;
}


p.small{
font-size: 14px;
line-height:1.4;
}


/*--（上付き文字）--*/

span.sup {
font-size: 13px;
font-size: 1.3rem;
vertical-align:super;
}

/*--下付き文字--*/
span.sub {
font-size: 13px;
font-size: 1.3rem;
vertical-align:sub;
}


/*--小文字--*/
.smle {
font-size: 13px;
font-size: 1.3rem;
line-height:1.4;
}



/*---------------------------------------------- 
            画像関連 　【共通】
----------------------------------------------*/

/*-----画像の下はみ出し止め本文最後に【共通】-----*/
br.clear {
  display: block;
  clear: both;
}

/*-----------画像の中央寄せ【共通】----------*/
p.img_center{
 text-align: center;
}

/*---------- 画像の回り込み （要確認）？？？？----------*/
img.picture {
  margin: 0 10px 10px 0;
  float: left;
}
img.picture_r {
  margin: 0 5px 10px 10px;
  float: right;
}

/*---???------*/
.img_a {
  display: block;
}
.img_b {
  display: none;
}