@charset "utf-8";

/*  common
----------------------------------------------------------------------------------------------------------- */
h2{font-family: 'Philosopher', sans-serif;
    font-weight: 700;
    font-size: clamp(20px,8vw,130px);
    color: #fff;
    text-align: center;
    width: 95%;
    margin: 0 auto 3% auto;
    text-shadow: -1px 1px 10px #7e5344, -1px 1px 10px #7e5344;
}



/*  characters
----------------------------------------------------------------------------------------------------------- */


.characters-wrapper{
background:url(../img/chara/characters-bg.jpg) #fff2dd top center no-repeat;
-moz-background-size:100% auto;
background-size:100% auto;
padding-top: 10%;
padding-bottom:10%;
font-weight: 600;
color: #685348;
text-align: center;
line-height:1.81;
font-size: clamp(18px,1.5vw,47px); /*最小値, 基準値, 最大値 */
}




.indexchara-list{}
.indexchara .swiper-wrapper{width: auto;}
.indexchara { overflow: hidden;}
.indexchara .swiper{ width: 95%; max-width: 1250px; margin: auto; }
.indexchara .thumb-wrapper { width: 95%; max-width: 1250px; margin: 3% auto;}
.indexchara .thumb-wrapper-pc-box{width: 100%; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; flex-wrap: wrap; margin: 10px auto;}
.indexchara .swiper { overflow: visible;}
.indexchara .swiper-fade .swiper-slide-active { pointer-events: auto; }
.indexchara .swiper-controller { position: absolute; top: 0; left: 0; right:0; width: 100%; max-width: 1330px; padding-top: 45.5%;}
  
.indexchara .swiper-button-prev,
.indexchara .swiper-button-next { height: 50px; width: 50px; display:inline-block;}

.indexchara .swiper-button-prev:after,
.indexchara .swiper-button-next:after{ background-repeat: no-repeat; background-size: contain; content: ""; height: 50px; margin: auto; width: 50px; display:block;}
.indexchara .swiper-button-next, .indexchara .swiper-container-rtl .swiper-button-prev{background:none; right:-5px; left: auto; position: absolute; top:50%;  z-index:200; boder: solid 1px #ff0;}
.indexchara .swiper-button-prev, .indexchara .swiper-container-rtl .swiper-button-next{background:none; right:auto; left:-5px; position: absolute; top:50%;  z-index:200;}


.indexchara .swiper-button-prev:after{ background-image: url(../img/top/arrow-back.png); }
.indexchara .swiper-button-next:after{ background-image: url(../img/top/arrow-next.png);}

.indexchara img { height: auto; width: 100%;}

.indexchara .slide { width: 98.5%; display: block; overflow: hidden;  }
.indexchara .slide-media { display: block;}
.indexchara .thumb-wrapper {  }
.indexchara .thumb-media { cursor: pointer; width: calc(16.6% - 10px); background:#308791; margin: 0.2% 3px;  box-shadow:rgba(57, 54, 43, 0.309804) 0px 0px 3px 3px; border: solid 2px #fff1db;}
.indexchara .thumb-media-active { background:#ff6732; }
.indexchara .thumb-media-active{}

.charabg{}
.chara-img{width: 46%; margin-left: 7%;}
.chara-pf{width: 42%;  color: #fff; margin-right: 5%; font-size: clamp(12px,1.3vw,18px); font-weight: 400; text-align: left; text-shadow:  #685348 1px 1px 10px, #685348 -1px 1px 10px, #685348 1px -1px 10px, #685348 -1px -1px 10px; padding-bottom: 5%;
display: flex; flex-direction: column-reverse;
}
.chara-pf-wp{ display: flex; flex-direction: column; width: 100%; height: 100%;}
.chara-box{margin-top: auto; }
.chara-mini-chara{width: 30%; max-width: 200px; margin-left: auto; margin-bottom: auto; padding-top: 5%;}

.chara-pf-name{font-family: 'Philosopher', sans-serif;  font-size: clamp(30px,3.8vw,50px); line-height:1.5; margin-bottom:0.5%; font-weight: 700; letter-spacing: 0.1em;}
.chara-pf-cv{font-weight: 700; letter-spacing: 0.1em;}
.chara-pf-txt{padding-top: 5%; width: 100%; transform: rotate(0.05deg);}

.characters-bg-all{
	width: calc(100% - 25px);
	max-width: 1230px;
	font-feature-settings: "palt" 1;
	margin:0 auto 0 auto;
	text-align: center;
	border-image: url(../img/chara/chara-cont-bg.gif) 25;
	border-style:solid; border-width:10px;
	background: #685348;
}


.charano1{background: url(../img/chara/chara1-main.png); background-size: cover;}
.charano2{background: url(../img/chara/chara2-main.png); background-size: cover;}
.charano3{background: url(../img/chara/chara3-main.png); background-size: cover;}
.charano4{background: url(../img/chara/chara4-main.png); background-size: cover;}
.charano5{background: url(../img/chara/chara5-main.png); background-size: cover;}

.charano6{background: url(../img/chara/chara6-main.png); background-size: cover;}
.charano7{background: url(../img/chara/chara7-main.png); background-size: cover;}
.charano8{background: url(../img/chara/chara8-main.png); background-size: cover;}
.charano9{background: url(../img/chara/chara9-main.png); background-size: cover;}
.charano10{background: url(../img/chara/chara10-main.png); background-size: cover;}
.charano11{background: url(../img/chara/chara11-main.png); background-size: cover;}
.charano12{background: url(../img/chara/chara12-main.png); background-size: cover;}
.charano13{background: url(../img/chara/chara13-main.png); background-size: cover;}


.charabg1{background: url(../img/chara/chara1-bg.png) top right no-repeat; background-size:auto 100%; }
.charabg2{background: url(../img/chara/chara2-bg.png) top right no-repeat; background-size:auto 100%; }
.charabg3{background: url(../img/chara/chara3-bg.png) top right no-repeat; background-size:auto 100%; }
.charabg4{background: url(../img/chara/chara4-bg.png) top right no-repeat; background-size:auto 100%; }
.charabg5{background: url(../img/chara/chara5-bg.png) top right no-repeat; background-size:auto 100%; }

.charabg6{background: url(../img/chara/chara6-bg.png) top right no-repeat; background-size:auto 100%; }
.charabg7{background: url(../img/chara/chara7-bg.png) top right no-repeat; background-size:auto 100%; }
.charabg8{background: url(../img/chara/chara8-bg.png) top right no-repeat; background-size:auto 100%; }
.charabg9{background: url(../img/chara/chara9-bg.png) top right no-repeat; background-size:auto 100%; }
.charabg10{background: url(../img/chara/chara10-bg.png) top right no-repeat; background-size:auto 100%; }
.charabg11{background: url(../img/chara/chara11-bg.png) top right no-repeat; background-size:auto 100%; }
.charabg12{background: url(../img/chara/chara12-bg.png) top right no-repeat; background-size:auto 100%; }
.charabg13{background: url(../img/chara/chara13-bg.png) top right no-repeat; background-size:auto 100%; }


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

.characters-wrapper{
background:url(../img/chara/characters-bg.jpg) #f5e3c6 top center no-repeat;
-moz-background-size:100% auto;
background-size:100% auto;
}

.indexchara .slide { width: 100%; display: block; overflow: hidden;  }

.indexchara .swiper{ width: 100%; max-width: 1250px; margin: auto; }
.indexchara .thumb-wrapper { width: 100%; max-width: 1250px; margin: auto; }

.characters-bg-all{width: 100%; background:transparent; border-image:none; border-style:none;}
.indexchara-list{ display: flex; flex-direction: column;}
.indexchara{background:none;}


.charabg{width: 100%; display:block;}
.chara-pf{width: 90%; background:#f5e3c6; color: #72563f; font-size: clamp(15px,3vw,20px); padding-bottom: 5%; padding-top: 5%; margin: 0 auto; padding:5%;
text-shadow: none;
}
.chara-img{width: 100%; padding: 0; margin: 0; height: auto;  display:block;}
.chara-pf-name{ font-size:9.3vw; line-height: 10vw; margin-bottom: 3vw; }
.chara-pf-cv{ font-size:4vw; }

.chara-pf-txt{padding-top: 0; width: 100%;}
.chara-pf-wp{flex-direction: column-reverse;}
.indexchara .swiper-controller{ padding-top: 160%;}
.chara-mini-chara{width: 50%; max-width: 400px; margin: 0 auto; padding-top: 5%;}

.charano1{background: url(../img/chara/chara1-main-sp2.png)0 0 no-repeat; background-size: 100% auto;}
.charano2{background: url(../img/chara/chara2-main-sp2.png)0 0 no-repeat; background-size: 100% auto;}
.charano3{background: url(../img/chara/chara3-main-sp2.png)0 0 no-repeat; background-size: 100% auto;}
.charano4{background: url(../img/chara/chara4-main-sp2.png)0 0 no-repeat; background-size: 100% auto;}
.charano5{background: url(../img/chara/chara5-main-sp2.png)0 0 no-repeat; background-size: 100% auto;}
.charano6{background: url(../img/chara/chara6-main-sp.png)0 0 no-repeat; background-size: 100% auto;}
.charano7{background: url(../img/chara/chara7-main-sp.png)0 0 no-repeat; background-size: 100% auto;}
.charano8{background: url(../img/chara/chara8-main-sp.png)0 0 no-repeat; background-size: 100% auto;}
.charano9{background: url(../img/chara/chara9-main-sp.png)0 0 no-repeat; background-size: 100% auto;}
.charano10{background: url(../img/chara/chara10-main-sp.png)0 0 no-repeat; background-size: 100% auto;}
.charano11{background: url(../img/chara/chara11-main-sp.png)0 0 no-repeat; background-size: 100% auto;}
.charano12{background: url(../img/chara/chara12-main-sp.png)0 0 no-repeat; background-size: 100% auto;}
.charano13{background: url(../img/chara/chara13-main-sp.png)0 0 no-repeat; background-size: 100% auto;}



.charabg1{background: transparent; }
.charabg2{background: transparent; }
.charabg3{background: transparent; }
.charabg4{background: transparent; }
.charabg5{background: transparent; }
.charabg6{background: transparent; }
.charabg7{background: transparent; }
.charabg8{background: transparent; }
.charabg9{background: transparent; }
.charabg10{background: transparent; }
.charabg11{background: transparent; }
.charabg12{background: transparent; }
.charabg13{background: transparent; }

.indexchara .thumb-wrapper-pc-box{width: 95%; margin: 0 auto; justify-content: center; padding-bottom: 5%;}
.indexchara .thumb-media { margi: 10px 0; cursor: pointer; width: calc(32.6% - 10px);  margin: 3px;}


}