@charset "utf-8";

.info_contents {
	display:grid;
	grid-template-columns:1fr 1fr;
	margin-bottom:8rem;
}
#ctt h4 {
	font-size:4rem;	
	margin-bottom:3rem;
}
.imgwrap img{
	border-radius:4rem;	
}
.imgwrap > img {
	width:100%;
	max-width:640px;
}
.info {
	padding:3rem 0 0 6rem;
}
.info .subtit{
	display:inline-block;
	font-size:2rem;
	color:#fff;
	font-weight:bold;
	padding:10px 20px;
	border-radius:4rem;
	background-color:#01a6b5;
}
.info h5{
	font-size:4rem;
	margin: 3rem 0 4rem;
}
.info > p{
	font-size:2rem;
	line-height:1.6em;
}
.info .info_btn {
	display:flex;
	gap:5px;
}
.info .info_btn a{
	display:inline-block;
	font-size:1.8rem;	
	width:50%;
	padding:2rem 0 2rem 5rem;
	border:1px solid #333;
	margin-top:4rem;
	background-image:url('/theme/basic/img/download.png');
	background-repeat:no-repeat;
	background-position:right 4rem center;
}
.info .info_btn a:last-child{
	padding:2rem 0 2rem 3rem;
	background-position:right 3rem center;
}
.info .info_btn a:hover{
	color:#fff;
	border:1px solid transparent;
	background-image:url('/theme/basic/img/download_w.png');
}

.char_menu { 
	display:inline-flex;
	padding:6px;
	border: 1px solid #ddd;
	border-radius:4rem;
	margin:3rem 0 7rem;
	background-color:#fff;
}
.char_menu button { 
	width:160px;
	height:65px;
	font-size:2rem;
	font-weight:700;
	color:#333;
	border-radius:4rem;
}
.char_menu button.on{ 
	color:#fff;
	background-color:#01a6b5;
}
.char_menu li:nth-child(2) button.on{ 	background-color:#632e79;}
.chars #char02 .theme_color{ color:#632e79;}
.char_menu li:nth-child(3) button.on{ 	background-color:#789a0b;}
.chars #char03 .theme_color{ color:#789a0b;}
.char_menu li:nth-child(4) button.on{ 	background-color:#f18d00;}
.chars #char04 .theme_color{ color:#f18d00;}
.char_menu li:nth-child(5) button.on{ 	background-color:#c84700;}
.chars #char05 .theme_color{ color:#c84700;}
.char_menu li:nth-child(6) button.on{ 	background-color:#73c3c2;}
.chars #char06 .theme_color{ color:#73c3c2;}
.chars > div:nth-child(6) .cname{ color:#01a0af;}
.chars > div { 
	display:none;
}
.chars > div#char01 { 
	display:block;
}
.chars h5 {
	font-size:3rem;
	margin-bottom:4rem;
}
.chars .char_info {
	display:grid;
	grid-template-columns:400px 1fr;
	gap:7rem;
	border:1px solid #ddd;
	border-radius:4rem;
	margin-bottom:7rem;
}
.chars .char_info > div{
	display:grid;
	align-content:center;
}
.chars .char_info .cname{
	font-size:4rem;
	font-weight:bold;
	margin-bottom:3rem;
}
.chars .char_info .ctitle{
	font-size:3rem;
	font-weight:bold;
	margin-bottom:2rem;
}
.chars .char_info .ctext{
	font-size:1.8rem;
	line-height:1.5;
}
.chars .char_design{
	font-size:1.8rem;
	line-height:1.5;
	text-align:center;
	padding:6rem 0;	
	border:1px solid #ddd;
	border-radius:4rem;
	margin-bottom:7rem;
}
.chars .char_story{
	display:grid;
	grid-template-columns:repeat(3, 1fr);
	gap:3rem;
	padding:4rem;
	border-radius:4rem;
	background-color:#f5f5f5;
}
.chars .char_story img {
	width:100%;
}

@media all and (max-width:1280px) {
	.info_contents {
		grid-template-columns:1fr;
	}
	.info {
		padding: 10rem 0 0 0rem
	}	
	.char_menu {
		width:100%;
		position:relative;
		z-index:1;
	}
	.char_menu > li {
		width:33.33%;
	}
	.char_menu > li button{
		width:100%;
	}
	.chars .char_info {
		grid-template-columns: 1fr;
		border:0;
	}
	.chars .char_design img {
		width:100%;
	}

}
@media all and (max-width:640px){	
	.char_menu {
		flex-wrap:wrap;
	}
	.chars .char_info img {
		width:100%;
	}
	.chars .char_story{
		grid-template-columns: repeat(2, 1fr);
		gap: 1.5rem;
		padding:2rem;
	}
}