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

html, body { /*overflow-x:hidden; overflow-y:auto; */}
body { min-width:320px; padding:0; }


/* sp */
.sp { display:block; }
.sp_off { display:none; }
br.sp { display:inline-block; }


/*--sp_menu/--*/
.sp_menu { display:block; }

/*--HEAD/--*/
.header { padding:50px 0 30px 0; }
.header .t_title { display:block; background:url(../img/t_title.png) center center /cover no-repeat; width:70%; padding-top:22%; height:0; margin:auto; border:none; }

/*SNS LIST*/
.sns_box { }


/*--HEAD MENU--*/
.hm { position:relative; max-width:500px; display:none; margin:-40px auto; background:none; }

/*春*/
.haru_box { padding:40px 0 60px 0; margin:0; }
.photo {  min-height:30vw;  }
.text ul li { line-height:20px; padding:5px 0 5px 20px; font-size:1.0em; }
.text .month { width:80px; height:80px; position:absolute; }

#m04 { margin-bottom:20px; }
#m04 .photo { width:50%; padding:0; }
#m04 .text { padding:20px 20px 20px 50px; left:100%; top:-20px; }
#m04 .month { left:-40px; top:50%; margin:-30px 0 0 0;}

#m05 { margin-bottom:60px; }
#m05 .photo { width:50%; padding:0; margin-left:50%; }
#m05 .text { padding:20px 50px 20px 20px; left:-100%; top:20px; }
#m05 .month { right:-40px; top:50%; margin:-50px 0 0 0;}

#m06 { margin-bottom:20px; }
#m06 .photo { width:50%; padding:0; }
#m06 .text { padding:20px 20px 20px 50px; left:100%; top:-20px; }
#m06 .month { left:-40px; top:50%; margin:-30px 0 0 0;}

/*夏*/
.natsu_box { padding:0 0 1px 0; }
.natsu_box .text ul li { background:url(../img/i_red.png) left 5px /20px no-repeat; }

#m07 { margin-bottom:20px; padding-top:20px; }
#m07 .photo { /*width:100%;*/ width:50%; padding:0; margin-left:50%; }
#m07 .photo_b { height:85px; display: none; }
#m07 .text { width:100%; max-width:600px; min-height:200px; padding:20px 50px 20px 20px; margin:0; left:-100%;   }
#m07 .text ul li { width:100%; }
#m07 .month { /*left:calc(50% - 40px); top:-40px;*/  right:-40px;  top: calc(50% - 40px); margin:0;}


#m08 { margin-bottom:20px; }
#m08 .photo { width:100%; }
#m08 .text { width:calc(100% - 40px); padding:40px 20px 20px 20px; margin:-20px 20px 30px 20px; }
#m08 .text ul li { width:100%; }
#m08 .month { left:calc(50% - 40px); top:-40px; margin:-0;}

#m09 { margin-bottom:60px; }
#m09 .photo { width:50%; padding:0; margin-left:50%; }
#m09 .text { padding:20px 50px 20px 20px; left:-100%; top:20px; }
#m09 .month { right:-40px; top:50%; margin:-50px 0 0 0;}


/*秋*/
.aki_box { padding:40px 0 20px 0; }
.aki_box .text ul li { background:url(../img/i_gold.png) left 5px /20px no-repeat; }

#m10 { margin-bottom:20px; }
#m10 .photo { width:50%; padding:0; }
#m10 .photo_b { height:16.666%; background:url(../img/p_m10b.webp) right bottom /cover no-repeat; }
#m10 .text { padding:20px 20px 20px 50px; left:100%; top:-20px; }
#m10 .month { left:-40px; top:50%; margin:-30px 0 0 0;}

#m11 { margin-bottom:60px; }
#m11 .photo { width:50%; padding:0; margin-left:50%; background: url(../img/p_m11.webp) left top 55% /120% no-repeat; }
#m11 .text { padding:20px 50px 20px 20px; left:-100%; top:20px; }
#m11 .month { right:-40px; top:50%; margin:-50px 0 0 0;}

#m12 { margin-bottom:20px; }
#m12 .photo { width:50%; padding:0; }
#m12 .text { padding:20px 20px 20px 40px; left:100%; top:-20px; }
#m12 .month { left:-40px; top:50%; margin:-30px 0 0 0;}

/*冬*/
.fuyu_box { padding:40px 0 20px 0; }
.fuyu_box .text ul li { background:url(../img/i_navy.png) left 5px /20px no-repeat; }

#m01 { margin-bottom:60px; }
#m01 .photo { width:50%; padding:0; margin-left:50%; }
#m01 .text { padding:20px 50px 20px 20px; left:-100%; top:20px; min-height:150px; }
#m01 .month { right:-40px; top:50%; margin:-50px 0 0 0;}

#m02 { margin-bottom:20px; }
#m02 .photo { width:50%; padding:0; }
#m02 .text { padding:20px 20px 20px 50px; left:100%; top:-20px; }
#m02 .month { left:-40px; top:50%; margin:-30px 0 0 0;}

#m03 { margin-bottom:60px; }
#m03 .photo { width:50%; padding:0; margin-left:50%; }
#m03 .text { padding:20px 50px 20px 20px; left:-100%; top:20px; }
#m03 .month { right:-40px; top:50%; margin:-50px 0 0 0;}




/*--FOOTER/-- */
.footer { padding:15px 0; }
.gotop { display:block; position:fixed; right:10px; bottom:10px; width:50px; height:50px; }


.alignright { float:none; margin:0 auto 1em auto; }
.alignleft { float:none; margin:0 auto 1em auto; }

h1 { font-size:2.0em; }
h2 { font-size:1.8em; }
h3 { font-size:1.6em; }
h4 { width:calc(100% + 20px); padding:8px 10px; margin:1.5em -10px 0.5em -10px; line-height:1.5; }
h4 { width:calc(100% + 20px); padding:8px 10px; margin:1.5em -10px 0.5em -10px; line-height:1.5; }
h4:first-child { margin:0 -10px 0.5em -10px !important; }
h4 a::before { right:0; }
h4 a::after { left:0; }

h5, .mceContentBody h5 { font-size:1.2em; }
h2 .comment { display:block; }
h3 .comment { display:block; }
h4 .comment { display:block; }
h5 .comment { display:block; }
h4 .comment.link { float:none; padding:0 0 0 20px; }


}


@media screen and (max-width:480px) {
	
/*春*/
.haru_box { padding:40px 0; }
.text { min-height:200px;}

#m04 { margin-bottom:280px; }
#m04 .photo { width:100%; height:auto; padding:0; }
#m04 .text { width:calc(100% - 40px); padding:40px 20px 20px 20px; left:20px; top:auto; bottom:-250px }
#m04 .month { left:calc(50% - 40px); top:-40px; margin:0;}
#m04 .cap { bottom:auto; top:10px; }

#m05 { margin-bottom:220px; }
#m05 .photo { width:100%; padding:0; margin:0; }
#m05 .text { width:calc(100% - 40px); padding:40px 20px 20px 20px; left:20px; top:auto; bottom:-190px; }
#m05 .month { left:calc(50% - 40px); top:-40px; margin:0; }
#m05 .cap { bottom:auto; top:10px; right:auto; left:0; }

#m06 { margin-bottom:270px; }
#m06 .photo { width:100%; height:auto; padding:0; }
#m06 .text { width:calc(100% - 40px); padding:40px 20px 20px 20px; left:20px; top:auto; bottom:-270px; }
#m06 .month { left:calc(50% - 40px); top:-40px; margin:0;}
#m06 .cap { bottom:auto; top:10px; right:0; }


/*夏*/
.natsu_box { padding:0 0 20px 0; }

#m07 { margin-bottom:320px; }
#m07 .photo { width:100%; padding:0; margin: 0; }
#m07 .photo_b { height:40px; display: none; }
#m07 .text { width:calc(100% - 40px); padding:40px 20px 20px 20px; left:20px; top:auto; bottom:-290px; transform:translate(0,0); }
#m07 .month { left:calc(50% - 40px); top:-40px; margin:0; }
#m07 .cap { bottom:auto; top:10px; right:auto; left:0; }

#m09 { margin-bottom:100px; }
#m09 .photo { width:100%; padding:25% 0 0 0; margin:0; }
#m09 .text { min-height:100px; width:calc(100% - 40px); padding:40px 20px 20px 20px; left:20px; top:auto; bottom:-80px; }
#m09 .month { left:calc(50% - 40px); top:-40px; margin:0; }
#m09 .cap { bottom:auto; top:10px; right:auto; left:0; }


/*秋*/
.aki_box { padding:40px 0 20px 0; }

#m10 { margin-bottom:210px; }
#m10 .photo { width:100%; height:auto; padding:0; }
#m10 .text {  width:calc(100% - 40px); padding:40px 20px 20px 20px; left:20px; top:auto; bottom:-180px; }
#m10 .month { left:calc(50% - 40px); top:-40px; margin:0;}
#m10 .cap { bottom:auto; top:10px; }

#m11 { margin-bottom:210px; }
#m11 .photo { width:100%; padding:0; margin:0; }
#m11 .text { width:calc(100% - 40px); padding:40px 20px 20px 20px; left:20px; top:auto; bottom:-180px; }
#m11 .month { left:calc(50% - 40px); top:-40px; margin:0; }
#m11 .cap { bottom:auto; /*top:10px;*/ top:36%; right:auto; left:0; }

#m12 { margin-bottom:250px; }
#m12 .photo { width:100%; height:auto; padding:0;}
#m12 .text { min-height:100px; width:calc(100% - 40px); padding:40px 20px 20px 20px; left:20px; top:auto; bottom:-220px; }
#m12 .month { left:calc(50% - 40px); top:-40px; margin:0;}
#m12 .cap { bottom:auto; top:10px; }

/*冬*/
.fuyu_box { padding:40px 0 20px 0; }

#m01 { margin-bottom:110px; }
#m01 .photo { width:100%; height:auto; margin:0; padding:25% 0 0 0; }
#m01 .text { width:calc(100% - 40px); padding:40px 20px 20px 20px; left:20px; top:auto; bottom:-80px; min-height:100px; }
#m01 .month { left:calc(50% - 40px); top:-40px; margin:0;}
#m01 .cap { bottom:auto; top:10px; }

#m02 { margin-bottom:180px; }
#m02 .photo { width:100%; height:auto; padding:0;}
#m02 .text { width:calc(100% - 40px); padding:40px 20px 20px 20px; left:20px; top:auto; min-height:170px; bottom:-150px; }
#m02 .month { left:calc(50% - 40px); top:-40px; margin:0;}
#m02 .cap { bottom:auto; top:10px; }

#m03 { margin-bottom:110px; }
#m03 .photo { width:100%; height:auto; margin:0; padding:30% 0 0 0; }
#m03 .text { width:calc(100% - 40px); padding:40px 20px 20px 20px; left:20px; top:auto; min-height:100px; bottom:-90px; }
#m03 .month { left:calc(50% - 40px); top:-40px; margin:0;}
#m03 .cap { bottom:20%; }


}