/* ============================================ */
.clearfix::after {
   content: "";
   display: block;
   clear: both;
}
body {
	background-image: url(../img/bg.png);
	background-size: 25px;
	padding: 15px 0 30px;
}
body > section { margin-top: 0; }
section {
	width: 100%;
	max-width: 750px;
	padding: 0 5%;
	margin: 15px auto 0;
	font-size: 14px;
}

/* ============================================ */
/* index */
h1 { 
	color: #151e5d; 
	text-align: center;
}

h1 p { 
	background: #151e5d; 
	padding: 5px 10px;
	display: inline-block;
	color: #fff;
	margin-bottom: 10px!important;
	border-radius :4px;

}
h1 div { 
	font-size: 1.75rem;
}

.description p {
	margin: 15px 0;
	line-height: 1.25rem;
}

.index h2  { 
	background: #fff;
	border-radius :12px;
	padding: 5px 10px;
	color: #151e5d;
	margin-bottom: 10px;
	font-weight: bold;
	margin: 0 auto;
	text-align: center;
}
.index .description ul li:first-child {
	 width: 100%;
	 border-bottom: 0.14286vw dashed #151e5d;
	 display: block;
	 padding-bottom: 8px;
	 margin: 30px auto 15px;
	 font-weight: bold;
}
.index .description ul li {
	line-height: 1.5em;
}

.index .btn {
	margin-top: 40px;
}

.index .btn ul {
	margin-top: 30px;
}

.index .btn ul li{
  float: right;
  width: 48%;
  margin-bottom: 30px;
}
.index .btn ul li:nth-child(odd){
  float: left;
}
.index .btn ul li a{
	background: #151e5d;
	color: #fff;
	border-radius :8px;
	height: auto;
	padding: 15px 5%;
	text-align: center;
	display: inline-block;
  width: 100%;
}

.index .btn ul li.south a {
	background: #FF849D;
}
.index .btn ul li.north a {
	background: #36A3EB;
}
.index .btn ul li.west a {
	background:  #FFD77C;
}
.index .btn ul li.east a {
	background: #74CDCD;
}
.index .btn ul li.none a{
	background: gray;
}
.index .btn ul li h3{
	 width: 100%;
	 border-bottom: 0.14286vw dashed #fff;
	 display: block;
	 font-size: 1.1rem;
	 padding-bottom: 8px;
}
.index .btn ul li p{
	 padding-top: 10px;
	 font-size: 0.75rem;
}


/* ============================================ */
/* view */
.option .content ul {
	line-height: 1.5em;
}
.option .content ul li{
    text-indent: -1.25em;
    padding-left: 1.5em;
	padding-bottom: 10px;
}
.option .content ul li:last-child{
	padding-bottom: 30px;
}
.option .content ul li:before {
    content: '・ ';
}
.option .content .chart + ul li:before {
    content: none;
}
/* ============================================ */
/* all */
/* ============================================ */
/* chara */
#south.chara h1 { color: #FF849D; }
#south.chara h3,
#south.chara h1 p {  background: #FF849D; }
#north.chara h1 { color: #36A3EB; }
#north.chara h3,
#north.chara h1 p {  background: #36A3EB; }
#west.chara h1 { color: #FFD77C; }
#west.chara h3,
#west.chara h1 p {  background: #FFD77C; }
#east.chara h1 { color: #74CDCD; }
#east.chara h3,
#east.chara h1 p {  background: #74CDCD; }

.chara #menu {
	margin-top: 3em;
}
.chara h3 {
  position: relative;
  padding: 1em 0.5em;
  background: #151e5d;
  margin-bottom: 35px;
  font-size: 1.15em;
}
#event.chara h3 {
	color: #fff;
}

.chara h3:after {
  position: absolute;
  content: '';
  top: 100%;
  left: 5%;
  border: 10px solid transparent;
  width: 0;
  height: 0;
  border-top: 18px solid #151e5d;
}
#south.chara h3:after {
	border-top: 18px solid #FF849D;
}
#north.chara h3:after {
	border-top: 18px solid #36A3EB;
}
#west.chara h3:after {
	border-top: 18px solid  #FFD77C;
}
#east.chara h3:after {
	border-top: 18px solid #74CDCD;
}
.comment h4,
.index h4,
.chara h4 {
	font-size: 1.15em;
	font-weight: bold;
	padding-bottom: 10px;
	margin-bottom: 10px;
	text-align: center;
	border-bottom: 6px double #151e5d;
}
#south.chara h4 {
	border-bottom: 6px double  #FF849D;
}
#north.chara h4 {
	border-bottom: 6px double #36A3EB;
}
#west.chara h4 {
	border-bottom: 6px double  #FFD77C;
}
#east.chara h4 {
	border-bottom: 6px double #74CDCD;
}
.chara #menu li:first-child a {
	width: 100%;
}
#event.chara #menu li a {
	width: 100%;
}
.chara #menu li a {
	padding: 5px 10px;
	display: inline-block;
	float: right;
	width: 49%;
	text-align: center;
	border: solid 1px #ccc;
    padding: 1em;
    display: block;
    color: #333;
    font-weight: bold;
    margin-bottom: 10px;
    background-color: #fff;
}
.chara #menu li:nth-child(even) a{
	float: left;
}
#event.chara #menu li a{
	float: left;
}
#event.chara #menu li:nth-child(even) a{
	float: right;
}
.chara .pair,
.chara .sector,
.chara .event,
.chara .how {
	padding-bottom: 30px;
}
.chara .chart {
	width: 32%;
	float: left;
}
.chara .chart canvas {
	width: 100%!important;
  height: auto!important;
}
.chara .chart + ul {
	width: 65%;
	float: right;
	padding-top: 10px;
}
.chara .how .chart {
	width: 48%;
	float: left;
}
.chara .how .chart02 {
	width: 48%;
	float: right;
}
.chara .how h5 {
	font-weight: bold;
	text-align: center;
	margin: 20px 0 10px;
}
.chara .how p {
	line-height: 1.75em;
	font-size: 0.85em;
}

.chara .pair li,
.chara .sector li,
.chara .event li{ 
  margin-bottom: 12px;
  font-size: 0.9em;
}

.chara .pair li span,
.chara .sector li span,
.chara .event li span, 
.chara .how li span{ 
  position: relative;
}
#event.chara .sector li.east span::before,
.chara .sector .allSector li:nth-child(2) span::before,
.chara .pair li span::before,
.chara .sector li span::before,
.chara .event li span::before,
.chara .how li span::before{ 
  background-color: #74CDCD;
  content: '';
  position: absolute;
  bottom: 3px;
  display: inline-block;
  opacity: 0.5;
  width: 100%;
  height: 5px;
  transform:skewX(-50deg);
  z-index: -1;
}
#event.chara .sector li.south span::before,
.chara li.south span::before,
.chara .sector .allSector li span::before,
.chara .pair li:first-child span::before,
.chara .sector li:first-child span::before,
.chara .event li:first-child span::before {
  background-color: #FF849D;
}
#event.chara .sector li.north span::before,
.chara .sector .allSector li:nth-child(3) span::before,
.chara .pair li:nth-child(2) span::before,
.chara .sector li:nth-child(2) span::before ,
.chara .event li:nth-child(2) span::before {
  background-color: #36A3EB;
}
#event.chara .sector li.west span::before,
.chara .sector .allSector li:first-child span::before,
.chara .pair li:nth-child(3) span::before,
.chara .sector li:nth-child(3) span::before,
.chara .event li:nth-child(3) span::before {
  background-color: #FFD77C;
}
.chara .how ul { margin-top: 20px; }
.chara .how li { width: 48%; }
.chara .how li:first-child { float: right; }
.chara .how li:first-child span::before {
  background-color: #FF849D;
}
.chara .how li:nth-child(2) { float: left; text-align: right; }
.chara .how li:nth-child(2) span::before {
  background-color: #36A3EB;
}

/* view  */
.view .accordion {
 margin: 0em auto;
}
.view #event01.accordion {
	margin-top: 30px;
}



/* comment */
#comment .comment h4 {
	margin-top: 30px;
}
#comment .comment ul {
	line-height: 1.5em;
}
#comment .comment ul li{
    text-indent: -1.25em;
    padding-left: 1.5em;
	padding-bottom: 10px;
}

#comment .comment ul li.res,
#comment .comment ul li.none{
    text-indent: 0em;
    padding-left: 0em;
}
#comment .comment ul li:last-child{
	padding-bottom: 30px;
}
#comment .comment ul li:before {
    content: '・ ';
}
#comment .comment ul li.res:before ,
#comment .comment ul li.none:before {
    content: '';
}
#comment .comment ul li.res {
	font-size: 0.85em;
    background: #dcdcdc;
    padding: 15px;
    color: #151e5d;
    border-radius: 10px;
    margin-bottom: 30px;
}