@charset "utf-8";
@import 'typography.css';

/*-------------------------------------*/
/* マージン、パディングの調整 */
/*-------------------------------------*/

.m10{ margin:  10px; }

.m_auto{ margin: 0 auto; }

.m0{ margin: 0;}



.mB0{ margin-bottom:  0px; display: block;}
.mB5{ margin-bottom:  5px; display: block;}
.mB10{margin-bottom: 10px; display: block;}
.mB15{margin-bottom: 15px; display: block;}
.mB20{margin-bottom: 20px; display: block;}
.mB30{margin-bottom: 30px; display: block;}

.mT0{ margin-top: 0px; display: block;}
.mT5{ margin-top: 5px; display: block;}
.mT-10{margin-top: -10px; display: block;}
.mT10{margin-top: 10px; display: block;}
.mT15{margin-top: 15px; display: block;}
.mT20{margin-top: 20px; display: block;}
.mT30{margin-top: 30px; display: block;}
.mT50{margin-top: 50px; display: block;}

.mL5{ margin-left: 5px; display: block;}
.mL10{margin-left: 10px; display: block;}
.mL15{margin-left: 15px; display: block;}
.mL20{margin-left: 20px; display: block;}
.mL30{margin-left: 30px; display: block;}

.mR5{ margin-right: 5px;  display: block;}
.mR10{margin-right: 10px; display: block;}
.mR15{margin-right: 15px; display: block;}
.mR20{margin-right: 20px; display: block;}
.mR30{margin-right: 30px; display: block;}

.pB5{ padding-bottom: 5px;  display: block;}
.pB10{padding-bottom: 10px; display: block;}
.pB15{padding-bottom: 15px; display: block;}
.pB20{padding-bottom: 20px; display: block;}
.pB30{padding-bottom: 30px; display: block;}

.pT5{padding-top: 5px; display: block;}
.pT10{padding-top: 10px; display: block;}
.pT15{padding-top: 15px; display: block;}
.pT20{padding-top: 20px; display: block;}
.pT30{padding-top: 30px; display: block;}

.pR5{padding-right: 5px; display: block;}
.pR10{padding-right: 10px; display: block;}
.pR15{padding-right: 15px; display: block;}
.pR20{padding-right: 20px; display: block;}
.pR30{padding-right: 30px; display: block;}

.pL10{padding-left: 10px; display: block;}
.pL15{padding-left: 15px; display: block;}
.pL20{padding-left: 20px; display: block;}
.pL30{padding-left: 30px; display: block;}
.pL30_2{padding-left: 30px;}

.p10{padding: 10px;}

.indent {
  text-indent: 1em;
}

.indent2 {
  margin-left: 3em;
  text-indent: -1em;
}


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

.indent {
  text-indent: 0;
}

.indent2 {
  margin-left: 1em;
  text-indent: 0;
}
}

/*-------------------------------------*/
/* コンテンツを左に右に振り分ける */
/*-------------------------------------*/

/* float */
.fL { float : left; display: block; margin-left:10px; }
.fR { float : right; display: block; margin-left:10px; }

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

.fR, .fL{
        float : none;/*floatをnoneで解除*/
        margin-bottom : 20px;/*余白*/
        text-align : center;
    }
    
   

}

/* textAlign */
.tC{ text-align: center; display: block;}
.tR{ text-align: right; display: block;}
.tL{ text-align: left; display: block;}

li.yokonarabi{
display: inline;
  padding: 0 5px;
}

/*-------------------------------------*/
/* 背景色 */
/*-------------------------------------*/

.bg_w{

 background: rgba(255,255,255,0.5);
 
 }
/*-------------------------------------*/
/* 浮動コンテンツのクリア */
/*-------------------------------------*/
.clear{ display: block; clear:both; height:0;}

/*//clearFix Coponents//*/
.clear {clear:both;}
.clearfix{ display:block;} 
.clearfix:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
 }
 
.clearfix:after {
	content: url(pixel.gif);
	display: block;
	clear: both;
	height: 0;
}

/*-------------------------------------*/
/*
imgタグを含む<a>タグにクラスとして指定することで、
ロールオーバー時にハイライト表示　＜白＞
*/
/*-------------------------------------*/
.innerBorderWh a:hover img {
	margin: -1px;
	border: solid 1px #ccc;
}

/**//* for IE6 *//**/
* html .innerBorderWh a:hover {
	zoom: 1;
}
	* html .innerBorderWh a:hover img {
		/* for BackCompat mode
			margin-left: -2px;
			margin-right: -2px;
		over here */
		float: left;
		position: relative;
	}


/*-------------------------------------*/
/*
imgタグを含む<a>タグにクラスとして指定することで、
ロールオーバー時にハイライト表示　＜黄色＞
*/
/*-------------------------------------*/
.innerBorderYellow a:hover img {
	margin: -1px;
	border: solid 1px yellow;
}

/**//* for IE6 *//**/
* html .innerBorderYellow a:hover {
	zoom: 1;
}
	* html .innerBorderYellow a:hover img {
		/* for BackCompat mode
			margin-left: -2px;
			margin-right: -2px;
		over here */
		float: left;
		position: relative;
	}


/*-------------------------------------*/
/*
imgタグを含む<a>タグにクラスとして指定することで、
ロールオーバー時にハイライト表示　＜グレー＞
*/
/*-------------------------------------*/

.innerBorder a:hover img {
	margin: -1px;
	border: solid 1px #ccc;
}

/**//* for IE6 *//**/
* html .innerBorder a:hover {
	zoom: 1;
}
	* html .innerBorder a:hover img {
		/* for BackCompat mode
			margin-left: -6px;
			margin-right: -6px;
		over here */
		float: left;
		position: relative;
	}

/* ===============================================
	▼画像廻りライン
=============================================== */
img.line { border: solid 1px #cccccc;
padding:20px; }



/*-------------------------------------*/
/* 1pxの仕切り線を表示 */
/*-------------------------------------*/

/*//1px border//*/
div.border{
	width:100%;
	height:1px;
	background-color:#ccc;
	overflow:hidden;
}




/*-------------------------------------*/
/*マウスオーバー
/*-------------------------------------*/
a img.over{
	filter:alpha(opacity=100);
	-moz-opacity: 1.0;
	opacity: 1.0;
}
a:hover img.over{
	filter:alpha(opacity=60);
	-moz-opacity: 0.6;
	opacity: 0.6;
	
}


a:hover img.over_bs{

box-shadow: 10px 10px 10px rgba(0,0,0,0.5);
  transform: translateY(-10px);
  transition-duration: 0.5s;
  
  }

.ibr20 {
    border-radius: 20px;
    padding:1px;
}
/*-------------------------------------*/
/*縦位置
/*-------------------------------------*/

.va_ba {vertical-align:baseline;}
.va_t {vertical-align:top;}
.va_m {vertical-align:middle;}
.va_bo {vertical-align:bottom;}
.va_tt {vertical-align:text-top;}
.va_tb {vertical-align:text-bottom;}


/*-------------------------------------*/
/*BOX横並び揃える(Flexbox)
/*-------------------------------------*/

.df{
display:flex;
align-items:center;
justify-content: center;
}

.df_box{
width: 49%;
margin:1%;
flex-shrink: 0;
 text-align:center;
 align-self:flex-start;

}

.df_box2{
width: calc(100%/3);

margin: 1%;
flex-shrink: 0;
 text-align:center;
 align-self:flex-start;

}



.df_box_l{
width: 49%;
 margin: 1%;
flex-shrink: 0;
 align-self:flex-start;
}



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

.df{
display: flex;
  flex-direction: column;
  margin: 2em 0;
  padding: 0;
  flex-wrap: wrap;
  justify-content: center;

}

.df img{
margin: 0 0 0 -20px ;

}



.df_box{
width: 100%;
 margin: 1%;
 
 text-align:center;
}

.df_box2{
width: 100%;
 margin: 1%;
 
 text-align:center;
}




.df_box_l{
width: 100%;
 margin: 3%;
 text-align:left;

}

}

/*-------------------------------------*/
/*横並びメニュー(Flexbox)
/*-------------------------------------*/
ul.df_menu{    
   list-style: none;
    display:flex;
   align-items: center;
   justify-content: center;
}

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

ul.df_menu{    
    width: 100%;
    list-style: none;
    display: flex;
    flex-flow: column;
align-items: center;
}

ul.df_menu li{    
  width: 90%;
   margin: 3%;

}


}

/*-------------------------------------*/
/*画像の上に文字
/*-------------------------------------*/
.image_txt {/*テキスト左上　親div*/
  position: relative;/*相対配置*/
  width: 80%;
  margin: 0 auto;
  }

.image_txt p{
  position: absolute;
  top: 0;/*画像の左上に配置*/
  left: 0;
  margin: 0; /*余計な隙間を除く*/
  color: #000;/*文字を黒に*/
  background: rgba(255,255,255,0.8);/*背景色*/
  font-size: 0.85em;
  line-height: 2;/*行高は1に*/
  padding: 5px 10px !important;/*文字周りの余白*/
  
 }

.image_txt img {
  width: 100%;
  }
  
  
  
  
  
  .image_txt_b {/*テキスト右下　親div*/
  position: relative;/*相対配置*/
  width: 80%;
  margin: 0 auto;
  }

.image_txt_b p{
  position: absolute;
  bottom: 0;/*画像の左上に配置*/
  right: 0;
  margin: 0; /*余計な隙間を除く*/
  color: #000;/*文字を黒に*/
  background: rgba(255,255,255,0.8);/*背景色*/
  font-size: 0.85em;
  line-height: 2;/*行高は1に*/
  padding: 5px 10px !important;/*文字周りの余白*/
  
 }

.image_txt_b img {
  width: 100%;
  }
  
  
  
/*-------------------------------------*/
/*リスト
/*-------------------------------------*/
dl.list01 dt {
	width:auto;
	height:auto;
	margin:10px 0;
	padding:10px;
}


dl.list01 dd {
padding-left:15px;
margin:5px 10px;
}


dl.list01 dd:before {
content:"●";
color:#ed6d1f;
padding-right:5px;

}

dl.list02 {
	height:100px;
	margin-bottom:20px;
}

dl.list02 dt.dt03 {
	width:280px;
	height:36px;
	text-indent:-9999px;
	margin:15px 0;

}

dl.list02 dd {
	width:100%;
	float:left;
	display:inline;
	background:url(../capi_img/jiban_img/circle.gif)  no-repeat left 3px;
	padding-left:15px;
	margin:5px 0;
	}
	



/*-------------------------------------*/
/*シンプルボーダーボタン
/*-------------------------------------*/
.square_btn {
    display: inline-block;
    margin: 1em;
    padding: 0.3em 1em;
    text-decoration: none;
    color: #000;
    border: solid 1px #67c5ff;
    border-radius: 3px;
    transition: .4s;
}

.square_btn:hover {
    background: #67c5ff;
    color: white;
}



.ellipse_btn {
  display: inline-block;
  padding: 8px 20px;
  border-radius: 25px;
  border: solid 1px #67c5ff;
  text-align: center;
  
}
@media screen and (max-width: 640px) {

.ellipse_btn {
  display: inline-block;
  width: 85%;
  padding: 8px 20px;
  border-radius: 25px;
  border: solid 1px #67c5ff;
  text-align: center;
  
}
}


.btn_home{
    width:100%;

   
}
.btn_home a{
    display:block;
     width:15%;
    margin: 0;
    padding: 2px 0;
    text-decoration: none;
    background:#FFFDFC;
    text-align:center;
    border:2px solid #0F11FF;
    color:#000000;
    font-size:1.5em;
    font-weight:bold;
    border-radius:50px;
    -webkit-border-radius:50px;
    -moz-border-radius:50px;
}
.btn_home a:hover{
    background:#0099FF;
    color:#FFFFFF;
    margin-left:0px;
    margin-top:0px;
    border:2px solid #FFFFFF;
    box-shadow:none;
}



/*-------------------------------------*/
/* 改行 */
/*-------------------------------------*/

@media screen and (min-width:481px) {
.br_onoff {
  display: block;
}
}

@media screen and (max-width:480px) {
.br_onoff {
  display: none;
}
}

/*-------------------------------------*/
/* PCのみ表示*/
/*-------------------------------------*/

@media screen and (max-width: 979px) {
.pc_dn{
  display: none;
}
}