@charset "UTF-8";


@media only screen and (max-width:1200px) {
	
	
	
}

@media only screen and (max-width:1100px) {
	
	.moonimg_area::before{left:2%;}
	.moonimg_area::after{right:2%;}
	
	.mooncomment_box{max-width:800px;}
	.mooncomment_text{width:100%}
	.mooncomment_maintext{padding: 20px 0 0;}
	.mooncomment_img{width:54%;margin:auto;}
	
}


@media only screen and (max-width:900px) {
	
	.moonimg_area::before,.moonimg_area::after{top:150px;width:110px;}
	
	.phase{font-size:11px;}
	.zodiac{font-size:11px;}
	
}

@media only screen and (max-width:767px) {
	
	.moonimg_area::before,.moonimg_area::after{content:none;}
	
	.mooncomment_img{width:100%;max-width:360px;}
	
	.cell{min-height:auto;}
	.cell canvas{width:70%;height:auto;aspect-ratio:1/1;margin-bottom:8px;}
	.phase{display:none;}
	.zodiac{display:none;}
	

}

@media only screen and (max-width:580px) {
	
	.moonimg_area{padding:30px 20px 0;}
	.mainCanvas_box{width:calc(100% - 122px);height:auto;aspect-ratio:1/1;}
	.mainCanvas_box canvas{width:100%;}
	
	.mainPhase_box{font-size:9vw;}
	
	.mooncomment_area{padding:0;}
	.mooncomment_box::before,.mooncomment_box::after{top:10px;}
	.mooncomment_box::before{left:10px;}
	.mooncomment_box::after{right:10px;}
	.mooncomment_box{border-radius:0;padding:15px 40px 0;}
	.mooncomment_h2box{padding:28px 0 12px;}
	.mooncomment_h2box h2{max-width:330px;margin:auto;}
	.mooncomment_text{padding:0;}
	.mooncomment_maintext{text-align:justify;padding:30px 0 0;}
	#zodiacComment > div:nth-child(2){padding-bottom: 22px;}
	
	.calendar_head{padding: 15px 0 20px;}

}

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

	.moonimg_box{gap:17px;}
	.moonimg_button button{border-radius:7px;font-size:12px;line-height:1em;padding:6px;}
	.mainCanvas_box{width: calc(100% - 90px);}
	
	.moon-symbol{width:5vw;}
	#spZodiac span{font-size:3.8vw;}
	
	.mooncomment_box{padding:3.8vw 7vw 0;}
	.mooncomment_box::before, .mooncomment_box::after{width:31vw;}
	.mooncomment_h2box h2{max-width:none;width:fit-content;font-size:10.5vw;padding-left:1.5em;padding-right:.5em;}
	.mooncomment_h2box h2::before{top: auto;bottom:0;height:95%;}
	
	#moonspComment{font-size:16px;}
	.moonageComment{font-size:14px;}
	#zodiacComment > div{font-size:14px;}
	
	.mooncomment_img {width:100%;text-align:left;}
	.mooncomment_img span{bottom:auto;top:5vw;width:50%;right:-7%;}
	.mooncomment_img img[src*="haku"]{position:relative;width:80%;z-index:3;}
	.mooncomment_img a{z-index:5;font-size:18px;padding:2px 30px 1px 20px;right:-3%;bottom:25px;}
	
	.calendar_head{justify-content:space-between;padding:5vw 0 3vw;}
	button#prev, button#next{font-size:10px;padding:8px;border-radius:8px;}
	
	.cell{padding:2px;border-radius:2px;}
	.cell > div:nth-child(1){padding:0 2px;}
	.cell > div:nth-child(1) div{line-height:1.2em;font-size:9px;}
	.cell.selected{outline:2px solid rgba(177, 149, 82, 1);outline-offset:-2px;}
	.cell > div:nth-child(1) div.today_tag{top: -2px;right: -2px;font-size:7px;padding: 2px 4px;line-height:.9em;}
	

}