/* CSS Document */

/* ==========================================================================
    main
    ========================================================================== */

.flex{ display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex;}
.flex2{ display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; flex-wrap: wrap;}

.l-under-page img{width: 100%; max-width: auto;}

.head-box{position: relative;}
ul.head-img{display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; flex-wrap: wrap; }
li.head-logo{width: 50%; padding-top: 10%;}
li.head-chara{width: 50%;}

.section-cap-bg{}
.read-magin{max-width: 1080px; position: absolute; top:70%;}


.graph-box li{width: 45%; padding:2.5%; font-size: 25px;}

.graph-box-list{display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; flex-wrap: wrap;}
.graph-box-list dt{ width: 30px; height: 30px; margin: 13px 3% 2% 2%;}

.graph1{padding-top: 20%;}

.graph-r1{padding-top: 20%;}
.graph-r2{padding-top: 30%;}
.graph-r3{padding-top: 15%;}

.graph1 dt{background:#c7343b;}
.graph2 dt{background:#db9500;}
.graph3 dt{background:#4da15f;}
.graph4 dt{background:#0072bb;}
.graph5 dt{background:#4646c6;}
.graph6 dt{background:#8b1555;}
.graph7 dt{background:#9494a4;}

.development-comment{background:#353232; color:#fff; padding: 2%; margin-top:1%; font-weight: normal; line-height:1.41; }
.development-comment dt{width: 200px; border: solid 1px #ff0; padding: 0.5% 1%; text-align: center; color: #ff0;}
.development-comment dd{padding-top: 1%;}

.development-comment2{background:#353232; color:#fff; padding: 2%; margin-top:1%; font-weight: normal; line-height:1.41;}
.development-comment2 dt{width: 250px; padding: 0.5% 1%; text-align: center; color: #fff; background:#a00000;}
.development-comment2 dd{padding-top: 1%;}

a.linkpage{ color: #ffffdd !important;  text-decoration: underline; font-weight: normal;}
a.linkpage:visited { color: #ffffdd !important;  font-weight: normal;}
a.linkpage:hover { color: #ffffdd !important; font-weight: normal;}
a.linkpage:active { color: #ffffdd !important; font-weight: normal; }



.sub-title{ color: #a00000; font-size: 40px; text-align:center; border-bottom: solid 2px #a00000; font-weight: 600; padding-top: 5%;}
.sub-title-top{ color: #a00000; font-size: 40px; text-align:center; border-bottom: solid 2px #a00000; font-weight: 600; padding-top: 2%;}

.margin-bottom-box{position: relative;}
.chara-bottom{width: 25%; position: absolute; bottom:-10%; right:-10px;}

.chara-left-box{width: 80%;}


@media screen and (max-width: 1023px) {
.head-box{margin-bottom:15%;}
.l-under-page .section-cap-bg{padding: 4% 6% 4% 6%;}
.chara-left-box2{width: 80%;}

}

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

.l-section-inner_m{

width: 95%;
    margin: 0 auto;
    padding-left: 0!important;
    padding-right: 0!important;
    box-sizing: border-box;
}

li.head-logo{width: 100%; padding-top: 10%;}
li.head-chara{display:none;}

.head-box{padding-bottom:auto; }
.read-magin{max-width: 1080px; position: static; top:auto; bottom:0; }

.graph-box li{width: 95%; padding:2.5%; font-size: 3.5vw;}
.graph-box-list dt{ width: 20px; height:20px; margin: 1% 3% 2% 2%;}
.graph-r1, .graph-r2, .graph-r3{padding-top: 0;}


.sub-title{ color: #a00000; font-size: 20px; text-align:center; border-bottom: solid 2px #a00000; font-weight: 600; padding-top: 5%; margin-bottom: 5%;}
.sub-title-top{ color: #a00000; font-size: 20px; text-align:center; border-bottom: solid 2px #a00000; font-weight: 600; padding-top: 2%;  margin-bottom: 5%;}

.development-comment{background:#353232; color:#fff; padding: 4%; margin-top:1%; font-size: 16px;}
.development-comment dt{width: 200px; border: solid 1px #ff0; padding: 0.5% 1%; text-align: center; color: #ff0; margin: 0 auto;}
.development-comment dd{padding-top: 2%;}

.development-comment2{background:#353232; color:#fff; padding: 4%; margin-top:1%; font-size: 16px;}
.development-comment2 dt{width: 250px; padding: 0.5% 1%; text-align: center; color: #fff; background:#a00000; margin: 0 auto;}
.development-comment2 dd{padding-top: 2%;}


.chara-bottom{width: 30%; position: absolute; bottom:--20%; right:-50px;}

.chara-left-box{width: 85%;}
.chara-left-box2{width: 100%;}

}


@media screen and (max-width: 640px) {
.chara-left-box{width: 90%;}
}



.pc-only{display:block;}
.sp-only{display:none;}

@media screen and (max-width: 740px) {
.pc-only{display:none;}
.sp-only{display:block;}
}