@charset "UTF-8";
/*共通全体*/
*{margin:0;
padding:0;
box-sizing: border-box;}
html,body{height: 100vh;
overflow-y: auto;}
main{flex: 1;
position:relative;}

/*共通ボディ*/
body{font-family:'Zen Maru Gothic',sans-serif ;
font-size: 20px;
display: flex;
flex-direction: column;}

/*ボディ*/
body{background-color:#FFFCF3;}

/*共通ヘッダー*/
header{position: fixed;
top:30px;
left:50%;
transform:translateX(-50%);
width:50%;
max-width:500px;
padding:20px 40px;
background-color:#FFAE00;
border-radius:50px;
text-align: center;
z-index:1000;
display: block;}
.nav{list-style:none;
display:inline-block;}
.nav a{font-weight: 900;
text-decoration: none;
color: #FFFCF3;
padding:20px;}
nav ul{padding: 0;
margin: 0;}

/*ハンバーガー*/
.hanbaga{position:fixed;
width: 50px;
height: 50px;
z-index: 2000;
top: 10px;
right:30px;
display: none;
transition: all .5s;
box-sizing: border-box;}
.hanbaga span{position: absolute;
left: 0;
width: 100%;
height: 4px;
background-color: #FFAE00;
border-radius: 4px;
pointer-events: none;
transform-origin: center;
display: inline-block;
transition: all .5s;
box-sizing: border-box;}
.hanbaga span:nth-of-type(1){top:50%;
transform: translateY(-14px);}
.hanbaga span:nth-of-type(2){top:50%;}
.hanbaga span:nth-of-type(3){top:50%;
transform: translateY(14px);}
.hanbaga.active span:nth-of-type(1){transform: rotate(-45deg);}
.hanbaga.active span:nth-of-type(2){opacity: 0;}
.hanbaga.active span:nth-of-type(3){transform:rotate(45deg);}

/*ハンバーガーメニュー*/
.sp_menu{position: fixed;
inset: 0;
background-color: #FFAE00;
z-index: 1500;
display: flex;
align-items: center;
justify-content: center;
display: none;}
.sp_menu ul{list-style: none;
padding: 0;
margin: 0;
text-align: center;}
.sp_menu li{margin: 24px 0;}
.sp_menu a{color: #FFFCF3;
font-size: 28px;
font-weight: 700;
text-decoration: none;
letter-spacing: 0.1em;}
.sp_menu.active{display: flex;}
.hanbaga.active span{background-color: #FFFCF3;}
/*レスポンシブ*/
@media screen and (max-width:768px){
header{display:none;}
.hanbaga{display: block;}}

/*ほーむ*/
.home{max-width:1200px;
margin:0 auto;
padding:0 16px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:flex-start;
padding-top:250px;
gap:20px;}
.kanban{height:150px;}
.doa_t{height:300px;
content:url(../img/doa_toji.png);}
.doa_t:hover{content:url(../img/doa_aki.png);}

/*キャラ紹介*/
.body-k{background-image: url("../img/haikei-pc.png");
background-repeat: no-repeat;
background-position: center bottom;
background-size: cover;
background-attachment: fixed;
min-height: 100vh;
flex: 1;
overflow: hidden;}
.modoru{height:80px;
margin-top: 50px;
margin-left: 50px;
position: fixed;
z-index: 2000;}
.kyara{max-width:1200px;
margin:0 auto;
padding:0 16px;
position:static;
height:auto;
justify-content: center;
align-items: center;
gap:10px;}
.syoukai {display: flex;
flex-direction: column;
align-items: center;
margin-top: 100px;
z-index:10;}
.syoukai_w{height: 550px;}
.syoukai_bn{color:#FFFCF3 ;
margin-top: -425px;}
.sk_name{font-size: 50px;}
.sk_syoukaibun{margin-top: 30px;
font-size: 15px;}
.sk_honbun{margin-top: 15px;}
/*共通*/
.kyara{position: relative;}
.nom_t,.suwaru_t,.oekaki_t,.honyomu_t,.hyokkori_tp{position: absolute;}
.nom_t,.suwaru_t,.oekaki_t,.honyomu_t,.huzai_t,.hyokkori_tp{display:none;}
/*通常*/
.nom_t{height:525px; 
position: absolute;
top:100px;
left:100px;
z-index:20;}
/*座り*/
.suwaru_t{height:450px;
position: absolute;
top: 285px;
left:-10px;
z-index:20;}
/*お絵描き*/
.oekaki_t{height:300px;
position: absolute;
top:380px;
z-index:20;}
/*本読み*/
.honyomu_t{height:425px;
position: absolute;
top:280px;
left:-25px;
z-index:20;}
/*不在*/
.huzai_t{position: fixed;
inset: 0;
background: #030029;
z-index:9999;
opacity: 0.5;
pointer-events: none;}
/*ひょっこり*/
.hyokkori_t,.hyokkori_p{position: fixed;
bottom: 0;
left: 0;
height: 100vh;
width: auto;
pointer-events: none;}
.hyokkori_t{z-index: 20;}
.hyokkori_p{z-index:1000;}
/*レスポンシブ*/
@media screen and (max-width:768px){
.modoru{height: 60px;
margin-top: 20px;
margin-left:20px;}
.syoukai{margin-top: 100px;
margin-left: 0px;}
.syoukai_w{height: 350px;}
.syoukai_bn{margin-top: -270px;
margin-left: 20px;}
.sk_name{font-size: 20px;}
.sk_syoukaibun{font-size: 10px;
margin-top: 15px;}
.sk_honbun{margin-top: 10px;}
.nom_t{height: 400px;
margin-top:150px;
margin-left: -80px;}
.suwaru_t{height: 380px;
margin-top: 80px;
margin-left: 60px;}
.oekaki_t{height: 230px;
margin-top: 50px;}
.honyomu_t{height: 350px;
margin-top: 90px;
margin-left: 70px;}
}


/*ぎゃらりー*/
.gallery{max-width:1000px;
margin: 0 auto;
padding: 60px 20px;
display: grid;
grid-template-columns: repeat(3,1fr);
gap: 24px;
padding-top:130px;}
.gallery img{width:100%;
aspect-ratio: 4/3;
object-fit: cover;
display: block;
border-radius: 12px;}
.Xicon{display: block;
height: 100px;
margin: 0 auto;
margin-top: -40px;
padding-bottom:30px;}
/*レスポンシブ*/
@media screen and (max-width:768px){
.gallery{grid-template-columns: repeat(2,1fr);
gap:12px;
padding:70px 16px;}}

/*おしらせ*/
.news{max-width: 900px;
margin: 0 auto;
padding: 120px 16px 100px;
display: flex;
flex-direction: column;
gap: 30px;}
.news_box{background-color: #FFAE00;
border-radius: 50px;
padding: 60px 60px;
color: #FFFCF3;
margin-top: 30px;}
.news_box hr{border: none;
border-top: 2px solid #FFFCF3;
margin: 30px 0;}
.news_item{padding:10px 0px;
text-decoration: none;
color: #FFFCF3;
display: block;
text-decoration: none;}
.news_item:hover{opacity: 0.85;}
.news_hiniti{font-size:15px;
margin-bottom:5px;}
.news_title{font-size:25px;
font-weight: 700;}
/*レスポンシブ*/
@media screen and (max-width:768px){
.news_hiniti{font-size: 12px;}
.news_title{font-size: 22px;}
.news_box hr{border-top: 1px solid #FFFCF3;}
.news_item{padding: 5px 0px;}}

/*おしらせ詳細ページ*/
.news_syousai{max-width:900px;
margin: 0 auto;
padding: 120px 16px 5px;
display: flex;
flex-direction: column;
gap: 30px;}
.news_syousaibox{background-color: #FFAE00;
color: #FFFCF3;
border-radius: 50px;
padding: 50px 50px;}
.news_modoru{height: 60px;
margin-top: 50px;
margin-left: 50px;}
.news_syousai hr{border: none;
border-top: 2px solid #FFFCF3;
margin: 30px 0;}
.news_syousai h2{font-size:30px;}
.syousai_hiniti{font-size:20px;
text-align: right;
margin-top: -20px;}
.news_syousai a{color: inherit;}
.news_syousai a:hover{opacity: 0.8;}
/*レスポンシブ*/
@media screen and (max-width:768px) {
.news_syousai hr{border-top:1px solid #FFFCF3;
margin: 20px 0;}
.news_syousai h2{font-size: 20px;}
.syousai_hiniti{margin-top: 10px;
    font-size: 10px;}
.syoukai_honbun{font-size: 15px;}}

/*共通フッター*/
footer{background-color:#8E6852;
padding:25px;
position: relative;
z-index:50;}
.copyright{max-width: 1200px;
margin: 0 auto;
padding: 0 16px;}
.copyright p{text-align:center;
color:#FFFCF3}