@charset "utf-8";

/**
 * main count
 */
.main-count{padding: 15px; background-color: var(--light-gray-color); text-align: center; }

/**
 * comment
 */
.main-comment{height: 60px; line-height: 60px; background-color: var(--white-color); }
.main-comment-title{float: left; width: 200px; background-color: var(--dark-blue-color); color: var(--white-color); text-align: center; }
.main-comment-slider{height: inherit; padding: 0 20px; margin-left: 200px; border: 1px solid var(--light-gray-color); border-left: 0; overflow: hidden; }
.main-comment-slider a:hover{text-decoration: underline; }
.main-comment-slider strong{margin-left: 10px; color: var(--base-color); }
/**
 * box1
 */
.mainbx1{padding: 20px 30px 20px; border: 1px solid var(--light-gray-color); background-color: var(--white-color); }
.mainbx1-title strong{margin-right: 5px; color: var(--base-color); }
.mainbx1-title-tag{display: inline-block; vertical-align: baseline; }
.mainbx1-title-tag small{display: inline-block; vertical-align: middle; height: 30px; line-height: 26px; padding: 0 10px; border-radius: 30px; border: 2px solid var(--gray-color); color: var(--gray-color); font-size: 50%; letter-spacing: -1px; }
.mainbx1-title-tag .active{border-color: var(--base-color); color: var(--base-color); }
.mainbx1-desc{position: relative; padding-right: 100px; margin: 10px 0 20px; letter-spacing: -0.5px; }
.mainbx1-desc a{position: absolute; top: 0; right: 0; width: 100px; text-align: right; }
.mainbx1-desc a:hover{color: var(--base-color); text-decoration: underline; }
.mainbx1-list-txt{margin-top: 10px; }
.mainbx1-list-txt a{display: block; text-align: center; font-weight: bold; }
.mainbx1-list-txt a:hover{text-decoration: underline; color: var(--base-color); }
.mainbx1-list-ranking{position: absolute; z-index: 2; bottom: 10px; right: 10px; font-size: 12px; color: var(--white-color); background-color: var(--base-color); width: 40px; height: 40px; line-height: 40px; border-radius: 100%; text-align: center; box-shadow: 5px 5px 10px var(--black-color); }

.mainbx1-desc > p.button {
	position: absolute;
	top: 0;
	right: 0;
	width: 110px;
	text-align: right;
}
.mainbx1-desc > p.button > button {
	padding-left: 3px;
	color: var(--gray-color);
}
.mainbx1-desc > p.button > button.on {
	color: var(--base-color);
	font-weight: bold;
	text-decoration: underline;
}

/**
 * box2
 */
.mainbx2{background-color: var(--white-color); }
.mainbx2 .active{border: 1px solid var(--light-gray-color); }
.mainbx2 h1{border: 1px solid var(--light-gray-color); }
.mainbx2-list{display: block; width: 100%; padding: 10px 25px; border: 1px solid var(--light-gray-color); border-top: 0; font-weight: bold; font-size: 120%; }
.mainbx2-list:hover{color: var(--main-color); }
.mainbx2-list strong{margin-right: 15px; color: var(--main-color); }
.mainbx2-list-img{display: inline-block; vertical-align: middle; margin-right: 15px; border-radius: 100%; max-width: 46px; height: 46px; overflow: hidden; }
.mainbx2-list-img img{display: block; width: 100%; }
/**
 * box3
 */
.mainbx3{border: 1px solid var(--light-gray-color); }
.mainbx3 .swiper-pagination{top: 10px; left: auto; bottom: auto; right: 10px; text-align: right; }
.mainbx3 .swiper-pagination span{width: 12px; height: 12px; }
/**
 * box4
 */
.mainbx4{position: relative; padding: 20px 30px 20px; border: 1px solid var(--light-gray-color); background-color: var(--white-color); }
.mainbx4-title{margin-bottom: 20px; }
.mainbx4-title strong{margin-right: 5px; color: var(--base-color); }
.mainbx4-list a{position: relative; display: block; margin-top: 7px; padding-right: 90px; }
.mainbx4-list a:hover{text-decoration: underline; color: var(--base-color); }
.mainbx4-list span{position: absolute; top: 0; right: 0; width: 90px; letter-spacing: -0.5px; text-align: right; color: var(--gray-color); }
.mainbx4-list strong{margin-right: 5px; padding: 0 5px; background-color: var(--base-color); color: var(--white-color); border-radius: 4px; font-size: 14px; }
.mainbx4-more{position: absolute; top: 0; right: 0; width: 50px; height: 50px; line-height: 50px; border-left: 1px solid var(--light-gray-color); border-bottom: 1px solid var(--light-gray-color); text-decoration-line: center; text-align: center; color: gray; font-size: 30px; }
.mainbx4-more:hover{color: var(--base-color); }

.top-title { color: var(--main-color); }

.dbox > div > a, .dbox > div > div { background-image: none; }
.guide_box_19 { background-color:  inherit !important; }
.guide_box_19 .moving_icon { color: var(--base-color) !important; }

.main-comment small {
    display: inline-block;
    vertical-align: middle;
	margin:0;
    padding: 0;
    border-radius: 30px;
    border: 2px solid var(--base-color);
    color: var(--base-color);
    font-size: 90%;
    letter-spacing: 0;

	font-weight:bold;
	margin-right:10px;
	padding:6px 10px;
	line-height:1.1;
	background: var(--white-color);
}

.guide_box_19 {
	position:initial;
	top:0;
	background-color: rgba(0,0,0,0.7);
	width:auto;
	height:auto;
}

.guide_box_19 .moving_icon {
    text-align: center;
    font-size: 40px;
    font-weight: bold;
    color: var(--white-color);
    display: inline-block;
    width: 60px;
    height: 60px;
    border: 4px solid var(--base-color);
    border-radius: 50%;
	margin-top:5px; margin-left:5px;
}

.eveSwiperBx { max-height:378px; }
.eveSwiperBx.use { display:none; }
.eveSwiperBx .dbox img { max-width: 190px; max-height:261px; object-fit: cover; object-position: center top; }

@media (max-width: 1023px) and (min-width: 640px)
{
    .mainbx1-type1{margin: 0 -30px; }
    .mainbx1-type1 .swiper-container{padding: 0 30px; }
    .mainbx1-type1 .swiper-slide{width: 22%; }
    .mainbx1-type2{margin: 0 -30px; }
    .mainbx1-type2 .swiper-container{padding: 0 30px; }
    .mainbx1-type2 .swiper-slide{width: 45%; }
}
@media (max-width: 639px)
{
    .main-comment{height: 40px; line-height: 40px; }
    .main-comment-title{width: 110px; }
    .main-comment-slider{padding: 0 15px; margin-left: 110px; }

    .mainbx1{border-left: 0; border-right: 0; }
    .mainbx1-desc{padding-right: 60px; letter-spacing: -1px; }
    .mainbx1-desc a{width: 60px; color: var(--base-color); font-weight: bold; }
    .mainbx1-type1{margin: 0 -30px; }
    .mainbx1-type1 .swiper-container{padding: 0 30px; }
    .mainbx1-type1 .swiper-slide{width: 37%; }
    .mainbx1-type2{margin: 0 -30px; }
    .mainbx1-type2 .swiper-container{padding: 0 30px; }
    .mainbx1-type2 .swiper-slide{width: 80%; }

    /*.mainbx3{margin: 0 auto; max-width: 250px; }*/
    .mainbx3{margin: 0 auto; max-width: 100%; }

	div.mainbx1-desc { padding-right: 0; }
	div.mainbx1-desc > p.txt { display:none; }
	div.mainbx1-desc > p.button { width: 100%; position: static; }
	div.mainbx1-desc > p.button > button { font-weight: bold; padding-left: 5px; }
}