@charset "utf-8";

/* 追加CSS
=======================================================*/

/*** chara 
---------------------------------------------------***/
.chara_section {
	width: 100%;
	margin: 0 auto;
	padding:  20px 0 100px;
}





.chara-columns-list {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0; 
    margin: 0 auto 10px; 
	width: 80%;
}

.chara-columns-list li {
    width: calc(100% / 6 - 8px);   
    margin: 4px;
    box-sizing: border-box;
    background-color: #333;
    padding: 0px;
    text-align: center;
    border: 1px solid #ccc;
	

}
.chara-columns-list li p.name{
	text-align: center;
	font-weight: bold;
	color: #fff;
	padding: 5px 0;
}
.chara-columns-list li p.txt{
	text-align: left;
	padding:0 5px;
}
.chara-columns-list li img{
	width: 100% !important;
	height: auto;
	
}
.chara_titlelogo{
	text-align: center;
	padding: 0;
	margin: 0}

/*詳細
------------------------------------*/
.chara_name{
	font-family: "Noto Serif JP";
	font-weight: bold;
	padding: 20px 20px 5px 20px !important;
	font-size: 180%;
	color: #3A3A3A;
	line-height: 1em;
}



.chara_catch {
	font-family: "Noto Serif JP";
	margin: 10px 10px 0;
	font-size: 120%;
	text-decoration: inherit;
	font-weight: bold;
	font-style: italic;
	color:#555;
}
.pink{color: #EA2391 !important;}
.purple{color:#742d73 !important;}
.blue{color: #0839D0 !important;}
.skyblue{color: #64B5EE !important;}
.green{color: #028302 !important;}/*#09A62E*/
.red{color: #CE0003 !important;}
.yellow{color: #9d8905 !important;}/*#C1A908*/
.orange{color: #e43e06!important;;}/*#FF7800*/
.mossgreen{color: #4c6513 !important;}
.lightpurple{color:#9c68b3 !important;}
.redpurple{color:#930b5d !important;}

.chara_txt{
	margin: auto 1em 1em;
	color: #3A3A3A;
}

.chara_text_box,.chara_text_box_pink,.chara_text_box_purple,.chara_text_box_blue,.chara_text_box_skyblue,
.chara_text_box_green,.chara_text_box_red,.chara_text_box_yellow,.chara_text_box_orange,
.chara_text_box_mossgreen,.chara_text_box_lightpurple,.chara_text_box_redpurple{
	border: 2px #DDD solid;
	
	background-color: #fff;
	margin: 20px 14px;
	padding: 10px;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
}
.chara_text_box_pink{border: 2px #EA2391 solid;}
.chara_text_box_purple{border: 2px #742d73 solid;}
.chara_text_box_blue{border: 2px #0839D0 solid;}
.chara_text_box_skyblue{border: 2px #64B5EE solid;}
.chara_text_box_green{border: 2px #09A62E solid;}
.chara_text_box_red{border: 2px #CE0003 solid;}
.chara_text_box_yellow{border: 2px #C1A908 solid;}
.chara_text_box_orange{border: 2px #FF7800 solid;}
.chara_text_box_mossgreen{border: 2px #4c6513 solid;}
.chara_text_box_lightpurple{border: 2px #9c68b3 solid;}
.chara_text_box_redpurple{border: 2px #930b5d solid;}


/* 通常の li は1列 */
.chara_text_box li,.chara_text_box_pink li,.chara_text_box_purple li,.chara_text_box_blue li,
.chara_text_box_skyblue li,.chara_text_box_green li,.chara_text_box_red li,
.chara_text_box_yellow li,.chara_text_box_orange li,.chara_text_box_mossgreen li,.chara_text_box_lightpurple li,
.chara_text_box_redpurple li{
  width: 100%;
  box-sizing: border-box;
	border-bottom: dotted 1px #E9DFDF;
}

/* sep だけ2列 */
li.sep {
  width: 50%;
}







/*ロゴセット
----------------------------------------*/
.logo_bg{
	background-image: url("../images/about/bg_about.png");
	color: #fff;
	padding: 1em 0 3em;
	margin-top: 30px;
	border-top: #eca2c6 solid 6px;
}
.logo_set{
	width: 80%;
	margin: 2em auto 0;
	
}
.logo_set_6,.logo_set_5 {
  
display: flex;
  flex-wrap: wrap;
  gap: 10px;
	justify-content: center;

}
.logo_set_6 li,.logo_set_5 li{
	width: 120px;
	font-size: 80%;
}

.logo_set_6 li {
  width: calc((100% - 50px) / 6); /* gap10px × 5 */
	text-align: center;
}

.logo_set_5 li {
  width: calc((100% - 40px) / 5); /* gap10px × 5 */
  text-align: center;
}

.logo_set_6 img,.logo_set_5 img {
  max-width: 100%;
  height: auto;
}





.sp_only{
	display: none;
}
.pc_only{
	display: block;
}
/*---------------------------------------------------*/

/*---------------------------------------------------*/
/*1000px以内
----------------------------------------*/
@media only screen and (max-width: 1000px){
   .chara-columns-list {
	   width: 96%;
}
   .chara-columns-list li {
       width: calc(100% / 3 - 12px);   
}
	

	.sp_only{
	display: block;
}
	.pc_only{
	display: none;
}
	.chara_name,
	.chara_catch{
	text-align: left;
	}
	
	
	.logo_set_6 li,.logo_set_5 li {
    width: calc((100% - 20px) / 3); /* 3個並び（gap10px × 2） */
  }
	.chara_catch{
		padding: 0 0 10px;
}

	 }


.btn_about{
	width: 50%;
	margin: 0 auto;
	padding:30px 0 20px;
}


.btn_about ul {
  display: flex;
  padding: 0;
  margin: 0;
}

.btn_about li {
  list-style: none;
  width: calc(50% - 5px); /* 2列 + 隙間分 */
  margin-right: 10px;
}

.btn_about li:last-child {
  margin-right: 0;
}

.btn_about img {
  width: 100%;
  display: block;
}
@media only screen and (max-width: 1000px){
   .btn_about {
	   width: 96%;
}}
/*下部ボタン中身*/
.btn_about .btn_pane {
  margin-top: -11px
}

@media only screen and (max-width: 1000px) {
  .btn_about .btn_pane {
    margin-top: 0
  }
}

.btn_about .btn_pane .btn {
  min-width: 280px
}

@media only screen and (max-width: 1000px) {
  .btn_about .btn_pane .btn {
    min-width: 240px;
    min-width: 44vw
  }
}
