@charset "utf-8";
@import 'typography.css';
@import 'footermenu.css';
@import 'box.css';
@import 'table.css';
@import 'breadcrumb.css';
@import 'button.css';
@import 'footer2022.css';


/*-------------------------------------*/
/* スマホ用　画面の枠からは飛び出ないよう！ */
/*-------------------------------------*/

@media only screen and (max-width: 750px) {
    img { max-width: 100%; }
}




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

.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; display: block;}

.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;
justify-content: center;
  align-items: center;
  width: 100%;
}


.df2{
display:flex;
justify-content: center;
  align-items: center;
  width: 100%;
}



.df_box{
width: calc(100%/2);
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;

}


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

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

}




.df_box_l{
width: calc(100%/2);
 margin: 1%;
flex-shrink: 0;
 align-self:flex-start;
}

.df_box .df_box2 .df_box_l > p{
indent: none;
padding: 15px;
line-height: 150%;
}

.rinen_bg{
background-image: url(../capi_img/shacho2024.jpg);    /* 背景画像指定 */
    background-size:  cover;                /* 画像のサイズ指定 */
    
    filter: brightness(110%) opacity(80%);
}





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

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

}

.df img{
margin: 0 auto;
padding: 5px;

}



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

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




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

}


.df_box_l.rinen_sp{
height:1400px;

}

.rinen_bg{
background-image: url(../capi_img/shacho2024_sp.jpg);    /* 背景画像指定 */
    background-size: contain; 
    background-position:  50% 100%;               /* 画像のサイズ指定 */
    
    filter: brightness(110%) opacity(80%);
    background-repeat: no-repeat;
    
}




}

/*-------------------------------------*/
/*横並びメニュー(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%;
  }
  
  
 /*------------UFCレッド-----------*/ 
 

.image_txt p.ufc{
  position: absolute;
  top: 60%;/*中央配置*/
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0; /*余計な隙間を除く*/
  color: #000;/*文字を黒に*/
  background: rgba(210,11,11,1);/*背景色*/
  font-size: 0.85em;
  line-height: 2;/*行高は1に*/
  padding: 5px 10px !important;/*文字周りの余白*/
  
 }

  
  
/*-------------------------------------*/
/*リスト
/*-------------------------------------*/
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;
}



/*-------------------------------------*/
/* 改行、スマホorPCだけ・・・設定 */
/*-------------------------------------*/

br.xs {
 display: none;
}
br.sm {
 display: none;
}
br.lg {
 display: block;
}


//タブレット
@media screen and (max-width: 979px) {
 br.xs {
  display: none;
 }
 br.sm {
  display: block;
 }
 br.lg {
  display: none;
 }
}

//スマホ
@media screen and (max-width: 480px) {
 br.xs {
  display: block;
 }
 br.sm {
  display: none;
 }
 br.lg {
  display: none;
 }
 

}

/*PCで改行無効*/
.pc_hid{
    display: none;
}

/*スマートフォンで改行有効*/
@media screen and (max-width:768px) {
    .pc_hid{
        display: block;
    }
}



/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.action_pc { display: block !important; }
.action_sp { display: none !important; }
 
/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (max-width: 750px) {
.action_pc { display: none !important; }
.action_sp { display: block !important; }
}



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

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


/*-------------------------------------*/
/* 引用文
/*-------------------------------------*/

blockquote {
		border-left: solid 0.5em rgba(224, 224, 224, 0.75);
		font-style: italic;
		padding: 1em 0 1em 2em;
	}
	
	
	
/*-------------------------------------*/
/* PC横ならびリスト→SP縦リスト
/*-------------------------------------*/

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

#list01 {
  background: #fff;
}

#list01 .logo {
  text-align: center;
  padding: 20px 0;
  border-bottom: 1px solid #000;
}

#list01 .logo a {
  display: inline-block;
}

#list01 .logo img {
  width: 120px;
}


#list01 ul.list_nav {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 20px 0;
    justify-content: space-between;
    width: 90%;
    text-align: center;
    margin: 0 auto;
  }
  
  #list01 .list_nav a {
  color: #000;
}

  #list01 .list_nav a:hover {
   color: #ca353b;
    border-bottom: 1px solid #555555;
    padding: 0 10px;
    
  }



@media screen and (max-width: 640px) {
  //SPのみ
  #list01 {
    text-align: center;
    margin: 10px auto;
  }

  #list01 .list_nav li {
    border-top: 1px solid #555555;
  }

  #list01 .list_nav li:last-child {
    border-bottom: 1px solid #555555;
  }

  #list01 .list_nav li a {
    padding: 12px 20px;
    text-align: left;
  }
}


/*-------------------------------------*/
/* imgフィルター
/*-------------------------------------*/
.img_filter80 {
  filter: opacity(80%);
}


/*-------------------------------------*/
/* YouTube動画の埋め込みをレスポンシブ対応する方法
/*-------------------------------------*/
@media screen and (max-width: 480px) {

.youtube__aspect-ratio {
    width: 100%;
    aspect-ratio: 16 / 9;
}
.youtube__aspect-ratio iframe {
    width: 100%;
    height: 100%;
}

}