@charset "UTF-8";
/* CSS Document */


#chara-page{ background:rgba(255,229,0,0.5);min-height: 1000px;width: 100%; max-width: 1100px; margin: 0 auto; }

ul.y-navi{ position: fixed; left: 0; bottom: 35%;; z-index: 99;}
ul.y-navi li {list-style: none;}
ul.y-navi li:first-child img{width: 100px;}
ul.y-navi li img{width: 75px; margin: 0 0 5px;}
ul.y-navi li img:hover{opacity: 0.8;}

@media screen and (max-width: 768px){
ul.y-navi{  top:inherit;bottom: 50px ;}
ul.y-navi li {float: left;}
ul.y-navi li:first-child {padding-top: 10px;}

}


/*ゆるまるズとは*/
#chara-page{padding-top: 100px;}
#chara-page h1{}
#chara-page h1 img{width: 330px; margin: 0 0 20px 0px;}

.y-about,
.y-about2,
.y-about3{background-color: rgba(0,0,0,0.7); color: #fff;  line-height: 1.6;font-weight: bold; font-size: 17px;text-align: center;border-radius: 30px 100px 30px 60px; width: fit-content; float: left;}

.opc{}
.osp{display: none;}

.y-about span,
.y-about2 span,
.y-about3 span{display: inline-block; color: #F1FF10; font-weight: bold; font-size: 20px; line-height: 1.3;
font-family: "Noto Sans JP", sans-serif;margin-bottom: 5px;}

.y-about{margin: -50px 0px 30px 60px;padding: 20px 20px 30px; }
.y-about2{margin: -350px 0px 0px 50px; padding: 40px 40px 30px 20px; }
.y-about3{margin: 50px 0px 0px 150px; padding: 40px 30px 40px 30px; }

@media screen and (max-width: 1050px){
.y-about3{clear: left; margin: 50px 0 0 40%;}

}
@media screen and (max-width: 1000px){
#chara-page{padding-top: 30px;}

.opc{display: none;}
.osp{display:inline-block;}

.y-about,
.y-about2,
.y-about3{margin: 0px auto;float: none;}
}

@media screen and (max-width: 700px){
#chara-page{padding-top: 60px;}
}


.charactor::after,
.charactor div::after
{ content: " "; display: block; clear: both;}

.charactor div{}
.charactor .chara1,
.charactor .chara2,
.charactor .chara3
{width: 450px;min-height:400px;  background-repeat: no-repeat;background-size: 100% 100%; font-family: "M PLUS 2", sans-serif; float: left;
font-weight: 900; font-style: normal;}

@media screen and (max-width: 1000px){
.charactor .chara1,
.charactor .chara2,
.charactor .chara3
{width:90%;float:none;}
}
@media screen and (max-width: 600px){
.charactor .chara1,
.charactor .chara2,
.charactor .chara3
{background-position: center 200px;background-size: 100% 75%;}
}

.charactor .chara1{background-image: url("img/kumo1.png");}
.charactor .chara2{background-image: url("img/kumo2.png");}
.charactor .chara3{background-image: url("img/kumo3.png");}

.charactor div ul li{font-weight: bold; font-size: 15px;text-align: left;
line-height: 1.3; margin: 5px; float: left;border-radius: 20px; padding: 10px;}
.charactor div ul li:nth-of-type(2){clear: left;}
.charactor div ul li span{display: inline-block;margin-right: 10px;}

.charactor .chara1{width: 550px; margin-top: 100px; padding: 50px 0;}
.charactor .chara1 ul{margin-left:30px;}
.charactor .chara1 ul li{ background-color:rgba(227,236,255,1.00); }
.charactor .chara1 ul li span{color: #2e5188 }
.charactor .chara1 img.topimg{width: 220px; margin: -150px 0 0 70px;position: absolute;}
.gaoimg{position: absolute; width: 200px;}
.charactor .chara1 ul li:first-of-type,
.charactor .chara1 ul li:last-of-type{background-color:transparent; }
.charactor .chara1 img.yokoimg{width: 100px; }
.charactor .chara1 img.nameimg{width: 280px; }
.charactor .chara1 img.miniimg{width: 100px; }

@media screen and (max-width: 1000px){
.charactor .chara1
{width: 80%; margin:100px auto 50px; padding: 50px 0 0;}
.charactor .chara1 ul li:nth-of-type(4){clear: left;}
.charactor .chara1 ul li:nth-of-type(7) span{display: block;}
.charactor .chara1 img.topimg{ margin: -100px 0 0 50px;}
}

@media screen and (max-width: 768px){
.charactor .chara1
{width: 100%; margin:100px auto 50px; padding: 50px 0 0;}
.charactor .chara1 ul{margin-left:15px;}
.charactor .chara1 ul li:nth-of-type(3){clear: left;}
.charactor .chara1 ul li:nth-of-type(4){clear: inherit;;}
.charactor .chara1 ul li:nth-of-type(7) span{display: inline-block;}
.charactor .chara1 ul li:last-of-type{float: right;}
.charactor .chara1 img.topimg{ margin: -100px 0 0 50px;}
}
@media screen and (max-width: 600px){
.charactor .chara1{margin:50px auto 0;}
.charactor .chara1 img.topimg{ margin: 0 auto; position: relative;}
.charactor .chara1 ul li:first-of-type{width: 100%; text-align: center; margin-left: -20px;}
.charactor .chara1 img.nameimg{width: 350px; }
}


.charactor .chara2{width: 500px; margin: 80px 0 0 -50px; padding: 50px 0 15px;}
.charactor .chara2 ul{margin-left:30px; margin-top: 40px;}
.charactor .chara2 ul li{ background-color: rgba(255,245,193,1.00);}
.charactor .chara2 ul li span{color: #dc7954;}
.charactor .chara2 img.topimg{width: 230px; margin: -100px 0 0 80px;position: absolute;}
.charactor .chara2 ul li:first-of-type,
.charactor .chara2 ul li:last-of-type{background-color:transparent; }

.charactor .chara2 img.yokoimg{width: 100px; }
.charactor .chara2 img.nameimg{width: 280px; }
.charactor .chara2 img.miniimg{width: 100px; }

@media screen and (max-width: 1050px){
.charactor .chara2{width: 450px; margin: 80px 0 0 -50px; padding: 50px 0 15px;}
.charactor .chara2 img.topimg{ margin: -100px 0 0 40px;}
}
@media screen and (max-width: 1000px){
.charactor .chara2
{width: 80%; margin:50px auto; padding: 50px 0 0;}
.charactor .chara2 ul li:nth-of-type(3),
.charactor .chara2 ul li:nth-of-type(5),
.charactor .chara2 ul li:nth-of-type(8){clear: left;}
.charactor .chara2 img.topimg{margin: -50px 0 0 0px;}
}
@media screen and (max-width:768px){
.charactor .chara2
{width: 100%; margin:50px auto; padding: 50px 0 0;}
.charactor .chara2 ul{margin-left:15px;}
}
@media screen and (max-width: 600px){
.charactor .chara2{margin:0px auto ;padding: 30px 0 0;}
.charactor .chara2 img.topimg{ margin: 0 auto; position: relative;}
.charactor .chara2 ul{margin-top: 0px;}
.charactor .chara2 ul li:first-of-type{width: 100%; text-align: center;margin-left: -10px;}
.charactor .chara2 img.nameimg{width: 350px; }
}



.charactor .chara3{width: 450px; margin:-60px 0 0 140px; padding: 50px 0;}
.charactor .chara3 ul{margin-left:30px;margin-top: 30px;}
.charactor .chara3 ul li{ background-color: rgba(203,255,237,1.00);}
.charactor .chara3 ul li:nth-last-child(2),
.charactor .chara3 ul li:nth-last-child(4){clear: left;}
.charactor .chara3 ul li span{ color: #7bb247;}
.charactor .chara3 img.topimg{width: 200px; margin: 150px 0 0 150px;position: absolute;}
.charactor .chara3 ul li:first-of-type,
.charactor .chara3 ul li:last-of-type{background-color:transparent; }
.charactor .chara3 img.yokoimg{width: 100px; }
.charactor .chara3 img.nameimg{width: 280px; }
.charactor .chara3 img.miniimg{width: 100px; }

@media screen and (max-width: 1000px){
.charactor .chara3
{width: 80%; margin:50px auto; padding: 30px 0;}
.charactor .chara3 img.topimg{margin: 230px 0 0 120px;}
}
@media screen and (max-width:768px){
.charactor .chara3
{width: 100%; margin:50px auto; padding: 50px 0 0;}
.charactor .chara3 ul{margin-left:15px;}
}
@media screen and (max-width: 600px){
.charactor .chara3{margin:50px auto ;padding: 30px 0 0;}
.charactor .chara3 img.topimg{ margin: 0 auto; position: relative;}
.charactor .chara3 ul{margin-top: 0px;}
.charactor .chara3 ul li:first-of-type{width: 100%; text-align: center; margin-left: -10px;}
.charactor .chara3 ul li:nth-last-child(3){clear: left;}
.charactor .chara3 img.nameimg{width: 350px; }
}



/*ゆるまるタイムズ埋め込み*/

.y-logo_title{width: 350px; margin: 100px auto 30px;}

.y-title{text-align: center;}
.y-title img.eshop{width: 275px; margin-top: 30px;}
.y-title img.eshop:hover{opacity: 0.8!important; }

.y-title p{background: #fff; color: #000; padding: 10px 20px; width: fit-content;　margin: 45px auto; border-radius: 20px; font-weight: bold; font-size: 13px; text-align: center; line-height: 1;display:inline-block;font-family: "Noto Sans JP", sans-serif;}

#y-times{/*background: rgba(255,255,255,0.8); */ }
#y-times::after
{ content: " "; display: block; clear: both;}




.y-times_umekomi{ margin: 40px 0; width: 100%; text-align: center;}
.y-times_umekomi:first-child{ }
.y-times_umekomi:last-child{}


.insta{ width: 100%; margin: 0 auto;padding-top: 20px; max-width: 350px;}
.tik{ width: 100%; margin: 0 auto;max-width: 350px;}
.tw{ width: 100%; margin: 0 auto;padding-top: 10px;}

.youtube_short{ margin: 0 auto; max-width: 350px; width: 100%; /* 伸縮する横幅 */}
.youtube_short iframe{
 aspect-ratio: 9 / 16;
 width: 100%;
 height: 100%;
}


/*トップページ*/
.top-chara{width:100%; background:#ffe500; padding:10px 10px 20px;border-radius: 20px; border: 1px #000 solid; margin: 0 auto;}
.top-chara .chara_title{ width:350px;}

.top-chara div{width: auto;}
.top-chara div:nth-of-type(1){margin: -20px 200px 0 0;}
.top-chara div:nth-of-type(2){margin:-140px 0 0 120px;}
.top-chara div:nth-of-type(3){margin:-110px 140px 0 0px; }

.top-chara div .charaimg{}
.top-chara div:nth-of-type(1) .charaimg{width: 160px;}
.top-chara div:nth-of-type(2) .charaimg{height: 145px;}
.top-chara div:nth-of-type(3) .charaimg{height: 140px;}

.top-chara .charaname{ height: 25px;}

.top-chara .doga{width: 100%; aspect-ratio: 16 / 9; margin: 5px 0 0px;}
.top-chara .doga iframe{ width: 100%; height: 100%;}
.y-times_logo{ width: 110px; margin-right: 220px;}

/*
.top-chara a{color: #000;}
.top-chara a:hover{color: #636363;}*/

.y-logo{width: 160px;border: #000 dotted 4px;border-radius: 40px; margin: 10px 0 0 170px;}
.top-chara p.text1,
.top-chara p.text2{font-family: "M PLUS 2", sans-serif; 
font-weight: 900; font-style: normal;font-size: 21px;}

.top-chara p.text1{ margin: 0px 0 0 160px;transform: rotate( 10deg );}
.top-chara p.text2{ margin: -40px 0 30px 140px;transform: rotate( -10deg );}
.top-chara p.text3{ font-size: 16px;font-weight: 900; text-align: left; line-height: 1.2;
font-family: "Noto Sans", sans-serif; margin-top: 40px;}
.top-chara p.text3 span{display: inline-block;font-family: "M PLUS 2", sans-serif; width: 100%;color: #fc2b55;
font-weight: 900; font-style: normal;font-size: 21px; text-align: center;margin: 0px auto;}

.top-chara iframe{width: 100%;}
.top-chara .eshop{width: 275px; /*margin-top: 15px;*/}
.top-chara img.eshop:hover{opacity: 0.8!important;}

.top_umekomi img{width:300px; border-radius: 150px; margin: 20px auto 30px;}
.top_umekomi img:hover{opacity: 0.7;}

@media screen and (max-width: 1000px){
.top-chara{width:500px;margin: 40px auto 20px;padding:20px 10px 30px;}
.top_umekomi{width: 100%; max-width: 400px; margin: 50px auto 20px;}

.top-chara .chara_title,
.top-chara .eshop{width: 100%; max-width: 400px;}
}

@media screen and (max-width: 600px){
.top-chara{width:90%;}
}