@charset "UTF-8";
html { height:100%; min-height:100%; width:100%; }
body { height:100%; min-height:100%; width:100%; min-width:1080px; color:#333; background:#222; line-height:2; position:relative; }



/*校正用 20240603*/
div.test { display: none; }
body.test {}



a:link { color:#333; text-decoration:none; outline-style:none; border-bottom:1px dashed #333; }
a:visited { color:#333; text-decoration:underline; text-decoration:none; }
a:hover { color:#f96; text-decoration:none; transition:.25s; border-bottom:1px dashed #f96; }

.tc { text-align:center; }

/* sp */
.sp { display:none; }
.sp_off { display:block; }
br.sp { display:none; }
* { box-sizing:border-box; }

.contents { clear:both; padding:0; margin:0 auto; text-align:left; box-sizing:border-box; position:relative; }

/*--sp_menu/--*/
.sp_menu { display:none; width:50px; height:50px; position:absolute; top:0; right:0; cursor:pointer; z-index:2000; }
.sp_menu div { transition:0.25s; width:24px; height:3px; background-color:#fff; position:absolute; left:15px; border-radius:2px; border-radius:3px; }
.sp_menu div:nth-child(1) { top:16px; }
.sp_menu div:nth-child(2)  { top:24px; }
.sp_menu div:nth-child(3)  { top:32px; }
.sp_menu.on { }
.sp_menu.on div:nth-child(1) { top:24px; left:16px; transform:rotate(-45deg); }
.sp_menu.on div:nth-child(2) { opacity:0; }
.sp_menu.on div:nth-child(3) { top:24px; left:16px; transform:rotate(45deg); }

/*--HEAD/--*/
.header { background:url(../img/bg01.webp) center center /cover no-repeat; width:100%; position:relative; padding:100px 0; margin:0; }
.header .t_title { display:block; background:url(../img/t_title.png) center center /cover no-repeat; width:600px; padding-top:120px; height:0; margin:auto; border:none; }


/*SNS LIST*/
.sns_box { display:inline-block; overflow:hidden; line-height:0; font-size:0; position:absolute; left:16px; top:16px; height:auto; vertical-align:middle; margin:0; padding:0; }
.sns_box li { display:inline-block; vertical-align:top; margin:0 0; }
:root * > .sns_box li.fb { width:auto; }
.sns_box li.tw { margin:0 15px 0 0; }


/*--HEAD MENU--*/
.hm { text-align:center; background:url(../img/bg_hm.png) center center /160px repeat-x; list-style:none; width:100%; margin:-40px 0 0 0; padding:0; letter-spacing:-.4em; position:relative; z-index:10; }
.hm li { letter-spacing:normal; display:inline-block; vertical-align:top; width:80px; height:80px; padding:0; text-align:center; }
.hm li a { display:block; width:80px; height:80px; transition:.25s; border:none; }
.hm li:nth-child(1) a { background:url(../img/b_m04.png) center center /cover no-repeat; }
.hm li:nth-child(2) a { background:url(../img/b_m05.png) center center /cover no-repeat; }
.hm li:nth-child(3) a { background:url(../img/b_m06.png) center center /cover no-repeat; }
.hm li:nth-child(4) a { background:url(../img/b_m07.png) center center /cover no-repeat; }
.hm li:nth-child(5) a { background:url(../img/b_m08.png) center center /cover no-repeat; }
.hm li:nth-child(6) a { background:url(../img/b_m09.png) center center /cover no-repeat; }
.hm li:nth-child(7) a { background:url(../img/b_m10.png) center center /cover no-repeat; }
.hm li:nth-child(8) a { background:url(../img/b_m11.png) center center /cover no-repeat; }
.hm li:nth-child(9) a { background:url(../img/b_m12.png) center center /cover no-repeat; }
.hm li:nth-child(10) a { background:url(../img/b_m01.png) center center /cover no-repeat; }
.hm li:nth-child(11) a { background:url(../img/b_m02.png) center center /cover no-repeat; }
.hm li:nth-child(12) a { background:url(../img/b_m03.png) center center /cover no-repeat; }
.hm li a:hover { opacity:0.8; }
.hm.fixed { position:fixed; top:0; right:0; padding:0; margin:0; width:100%; background:rgba(0,0,0,0.2);  }
.hm.fixed li { width:50px; height:50px; }
.hm.fixed li a { width:50px; height:50px; }


.notice { text-align:center; line-height:1.5; padding:10px 20px; }


/*春*/
.haru_box { background:#e2ebdd; z-index:0; padding:80px 0 1px 0; margin:-40px 0 0 0; }
.inner { max-width:1600px; margin:auto; }
.text { background:#fff; position:relative; width:100%; max-width:540px; min-height:200px; }
.text ul { margin:0; padding:0; list-style:none; }
.text ul li { display:inline-block; width:100%; line-height:30px; padding:5px 0 5px 20px; font-size:1.2em; background:url(../img/i_green.png) left 10px /20px no-repeat; }
.text ul li a span { font-size:0.8em; }
.text .month { width:140px; height:140px; position:absolute; }
.cap { display:inline-block; width:auto; position:absolute; bottom:10px; background:rgba(0,0,0,0.5); color:#fff; padding:5px 10px; font-size:0.8em; line-height:1.5; }
.photo { position: relative; padding:50px 0; min-height:clamp(250px,28vw,450px); box-sizing: border-box; }

#m04 { position:relative; margin-bottom:50px; }
#m04 .photo { width:calc(50% + 50px);background:url(../img/p_m04.webp) center top /cover no-repeat;}
#m04 .text { padding:30px 30px 30px 80px; left:calc(100% - 50px); }
#m04 .month { background:url(../img/b_m04.png) center center /cover no-repeat; left:-70px; top:50%; margin:-70px 0 0 0;}

#m05 { position:relative; margin-bottom:50px; }
#m05 .photo { width:calc(50% + 50px); margin-left:calc(50% - 50px); background:url(../img/p_m05.webp) center center /cover no-repeat; }
#m05 .cap { right:0; }
#m05 .text { padding:30px 100px 30px 30px; left:-490px; }
#m05 .month { background:url(../img/b_m05.png) center center /cover no-repeat; right:-70px; top:50%; margin:-70px 0 0 0;}

#m06 { position:relative; margin-bottom:50px; }
#m06 .photo { width:calc(50% + 50px); background:url(../img/p_m06.webp) center center /cover no-repeat; }
#m06 .text { padding:30px 30px 30px 80px; left:calc(100% - 50px) ; }
#m06 .month { background:url(../img/b_m06.png) center center /cover no-repeat; left:-70px; top:50%; margin:-70px 0 0 0;}


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

#m07 { position:relative; margin-bottom:50px; }
#m07 .photo { height:auto; min-height: clamp(400px,50vw,850px); max-height:850px; width:calc(50% + 50px); margin-left:calc(50% - 50px);  background:url(../img/p_m07.webp) center top /100% no-repeat; position: relative;}
#m07 .photo_b { position:absolute; width:100%; height:150px; bottom:100%; background:url(../img/p_m07b.png) right bottom /100% no-repeat; display: none; }
#m07 .cap01 { bottom:auto; top:10px; right:0;}
#m07 .cap02 { bottom:auto; top:10px; right:0; display: none; }
#m07 .text { background: #fff; position: absolute; width: 100%; max-width: 600px; min-height: 200px; padding:30px 80px 30px 30px; left: auto; right:calc(100% - 50px);  top:50%; transform: translate(0, -50%); }
#m07 .text ul li { width:100%; }
#m07 .month { background:url(../img/b_m07.png) center center /cover no-repeat; right:-70px; top:50%; margin:-70px 0 0 0;}


#m08 { position:relative; margin-bottom:50px; }
#m08 .photo { width:100%; height:auto; padding:50% 0 0 0; background:url(../img/p_m08.webp) center top /cover no-repeat;}
#m08 .cap01 { bottom:auto; top:10px; }
#m08 .cap02 { bottom:auto; top:10px; left:auto; right:0; }
#m08 .text { padding:80px 30px 30px 30px; max-width:1080px; margin:-50px auto 50px auto; }
#m08 .text ul li { width:49.5%; }
#m08 .month { background:url(../img/b_m08.png) center center /cover no-repeat; left:calc(50% - 70px); top:-70px; margin:-0;}

#m09 { position:relative; margin-bottom:50px; }
#m09 .photo { width:calc(50% + 50px); margin-left:calc(50% - 50px); background:url(../img/p_m09.webp) center center /cover no-repeat; }
#m09 .cap { right:0; }
#m09 .text { padding:60px 100px 60px 30px; left:-490px; }
#m09 .month { background:url(../img/b_m09.png) center center /cover no-repeat; right:-70px; top:50%; margin:-70px 0 0 0;}


/*秋*/
.aki_box { background:#f1ebd4; z-index:0; padding:50px 0 1px 0; }
.aki_box .text ul li { background:url(../img/i_gold.png) left 10px /20px no-repeat; }

#m10 { position:relative; margin-bottom:50px; }
#m10 .photo { width:calc(50% + 50px); background:url(../img/p_m10a.webp) right top /cover no-repeat; position:relative; }
#m10 .photo_b { position:absolute; width:100%; height:100px; bottom:100%; background:url(../img/p_m10b.webp) right bottom /100% no-repeat; }
#m10 .text { padding:30px 30px 30px 80px; left:calc(100% - 50px) ; }
#m10 .month { background:url(../img/b_m10.png) center center /cover no-repeat; left:-70px; top:50%; margin:-70px 0 0 0;}

#m11 { position:relative; margin-bottom:50px; }
#m11 .photo { width:calc(50% + 50px); margin-left:calc(50% - 50px); background:url(../img/p_m11.webp) center 70% /cover no-repeat; }
#m11 .cap { right:0; }
#m11 .text { padding:30px 100px 30px 30px; left:-490px; }
#m11 .month { background:url(../img/b_m11.png) center center /cover no-repeat; right:-70px; top:50%; margin:-70px 0 0 0;}

#m12 { position:relative; margin-bottom:50px; }
#m12 .photo { width:calc(50% + 50px); background:url(../img/p_m12.webp) top 30% center /cover no-repeat;}
#m12 .text { padding:30px 30px 30px 80px; left:calc(100% - 50px) ; }
#m12 .month { background:url(../img/b_m12.png) center center /cover no-repeat; left:-70px; top:50%; margin:-70px 0 0 0; }


/*冬*/
.fuyu_box { background:#dee3eb; z-index:0; padding:50px 0 20px 0; }
.fuyu_box .text ul li { background:url(../img/i_navy.png) left 10px /20px no-repeat; }

#m01 { position:relative; margin-bottom:50px; }
#m01 .photo { width:calc(50% + 50px); margin-left:calc(50% - 50px); background:url(../img/p_m01a.webp) center top /100% no-repeat; position:relative; }
#m01 .photo_b { position:absolute; width:100%; height:150px; bottom:100%; background:url(../img/p_m01b.webp) center bottom /100% no-repeat; }
#m01 .cap { bottom:auto; top:10px; right:0; }
#m01 .text { padding:60px 100px 60px 30px; left:-490px; }
#m01 .month { background:url(../img/b_m01.png) center center /cover no-repeat; right:-70px; top:50%; margin:-70px 0 0 0;}

#m02 { position:relative; margin-bottom:50px; }
#m02 .photo { width:calc(50% + 50px); background:url(../img/p_m02.webp) center 80% /cover no-repeat; }
#m02 .text { padding:60px 30px 60px 80px; left:calc(100% - 50px) ; }
#m02 .month { background:url(../img/b_m02.png) center center /cover no-repeat; left:-70px; top:50%; margin:-70px 0 0 0;}

#m03 { position:relative; margin-bottom:50px; }
#m03 .photo { width:calc(50% + 50px); margin-left:calc(50% - 50px); background:url(../img/p_m03a.webp) center top /100% no-repeat; position:relative; }
#m03 .photo_b { position:absolute; width:100%; height:50px; bottom:100%; background:url(../img/p_m03b.webp) center bottom /100% no-repeat; }
#m03 .cap { right:0; }
#m03 .text { padding:60px 100px 60px 30px; left:-490px; }
#m03 .month { background:url(../img/b_m03.png) center center /cover no-repeat; right:-70px; top:50%; margin:-70px 0 0 0;}





/* facebook/ */
.fb_box { text-align:center; }
.fb_box h2 { border:none; background:none; }
.fb_box .title { max-width:480px; margin:0 auto 9px auto; text-align:left; position:relative; font-size:1em; }
.fb_box .title img { max-width:260px; }
.fb_box .more { display:block; }
.fb_box .fb { /*position:absolute; top:3px; right:40px; display:block;*/ display:inline-block; vertical-align:middle; width:32px; height:32px; background:url(../img/i_fb.svg) center center /32px no-repeat; margin:0 10px 0 0; }
.fb_box .tw { /*position:absolute; top:3px; right:0; display:block;*/ display:inline-block; vertical-align:middle; width:32px; height:32px; background:url(../img/i_tw.svg) center center /32px no-repeat; margin:0 10px 0 0; }

/*--iframe アスペクト比 --*/
div.iframeWrap {position:relative; width:100%; }
div.iframeWrap iframe {position:absolute; top:0; left:0; width:100% !important; height:100% !important;}
div.fb_iframe_widget { display:inline-block !important; position:relative; width:100%; margin:0 auto 20px auto; }
div.fb_iframe_widget iframe {position:absolute; top:0; left:0; width:100% !important; height:100% !important;}



/*--FOOTER/-- */
.footer { clear:both; margin:0; text-align:center; padding:15px 30px; line-height:20px; font-size:0.9em; position:relative; background:url(../img/bg01.webp) center center /cover no-repeat; color:#fff; }
.footer a { color:#fff; }

.gotop { display:block; position:fixed; right:10px; bottom:10px; width:80px; height:80px; background:url(../img/gotop.png) center center /cover no-repeat; border:none !important; }
.gotop:hover { opacity:0.8; border:none; }