/*====================================================================================================
  TOP
====================================================================================================*/
#toppage { }
#toppage .btn { margin: 40px auto 0; width: 100%; max-width: 520px;}
#toppage .btn a {
    position: relative;
    display: block;
    padding: 15px 30px 15px 15px;
    color: #fff;
    font-size: 112.5%;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    background:#6FD2DC url("../img/arrow_w.svg") no-repeat 95% center;
    background-size:15px auto;
    border-radius:10px;
    box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.15);
}



/* MAINIMG ====================================================================================*/
#toppage .mainimg {
    position: relative;
    margin-bottom: 60px;
    background-image: url("../../img/h1_bg.png"), url("../../img/mainimg_bg.png");
    background-repeat: no-repeat, no-repeat;
    background-position: left bottom, center top;  
    background-size:auto auto, auto auto;  
}
#toppage .mainimg .inner { padding:0 0 70px;}
#toppage .mainimg .inner::before,
#toppage .mainimg .inner::after {
    display: block; clear: both; content:"";
    position: absolute; z-index: 9;
    background-size: 100% auto !important;
}
#toppage .mainimg .inner::before {
    top:-70px; right: -60px;
    width:132px; height:213px; aspect-ratio: 132 / 213;
    background: url("../../img/kazari01.png") no-repeat;
}
#toppage .mainimg .inner::after {
    bottom:20px; left:-50px;
    width:159px; height:202px; aspect-ratio: 159 / 202;
    background: url("../../img/kazari02.png") no-repeat;
}
#toppage .mainimg .main_slide { margin: 0 auto 20px; width: 96%; max-width: 1100px;}
#toppage .mainimg .main_slide img { border-radius: 30px;}
#toppage .mainimg .main_thumbnail { margin: auto; width:70%; max-width: 460px;}
#toppage .mainimg .main_thumbnail li { padding: 0 5px;}
#toppage .mainimg .main_thumbnail img { border-radius: 10px;}
@media only screen and (max-width:768px){
    #toppage .mainimg { margin-bottom:30px; background-size:100% auto, auto auto;}
    #toppage .mainimg .inner { padding:0 0 40px;}
    #toppage .mainimg .inner::before {
        top:-40px; right:-10px;
        width:50px;
    }
    #toppage .mainimg .inner::after {
        bottom:-140px; left:0;
        width:60px;

    }
    #toppage .mainimg .main_thumbnail li { padding: 0 5px;}
}



/* SEARCH ====================================================================================*/
#toppage .search_cont h2 {
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 80px;
    width:100%; height: 55px; max-width:580px;
    font-family: "Kiwi Maru", serif;
	font-size:275%;
	font-weight: 500;
    color: #12A4B2;
    text-align: center;
    background-image: url("../../img/tit_bg1.png"), url("../../img/tit_bg2.png");
    background-repeat: no-repeat, no-repeat;
    background-position: left center, right center;  
    background-size: 130px auto, 130px auto;  
}

/* KEYWORD and TAG */
#toppage #keytag {
    display: flex; flex-wrap: wrap; gap:40px;
    padding: 50px;
    background:#C2EBFA;
    border-radius: 30px;
}
#toppage #keytag .keyword { width:65%;}
#toppage #keytag .tag { width:calc(35% - 40px);}
#toppage #keytag dl dt { margin-bottom: 10px;}
#toppage #keytag dl dt span {
    font-family: "Kiwi Maru", serif;
	font-size:150%;
	font-weight: 600;
}
#toppage #keytag dl dt a { float: right; color: #222;}
#toppage #keytag .keyword dd { display: flex; gap:20px;}
#toppage #keytag .keyword .search form { position: relative; display: block;}
#toppage #keytag .keyword .search input.sa_txt {
	padding:10px 35px 10px 20px;
	width:100%;
	height:66px;
    font-size: 100%;
    font-weight: 400;
    color: #222;
    background:#fff;
    border: none;
    border-radius:5px;
    box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.15);
	box-sizing: border-box;
}
#toppage #keytag .keyword .search input.sa_bo {
    cursor: pointer;
	position: absolute; top: 0; bottom: 0; right:20px;
    margin: auto; padding-left: 40px;
    width:75px; height:35px;
    text-align: left;
	background:#67CDFF url("../img/icon_search_b.svg") no-repeat 5px center;
	background-size:30px auto;
    border-radius: 5px;
	border:none;
}
#toppage #keytag .tag dd { overflow: hidden;}
#toppage #keytag .tag dd p { float: left; margin-right: 15px;}
#toppage #keytag .tag dd p a { color: #000;}

/* MOKUTEKI */
#toppage #mokuteki {
    clear:both;
    padding:140px 0 50px;
    width:100%; max-width:1400px;
    background-image: url("../../img/shabon_bg2.png"), url("../../img/shabon_bg1.png");
    background-repeat: no-repeat, no-repeat;
    background-position: right bottom, left 240px;
}
#toppage #mokuteki .mokuteki_list {
    display: flex; flex-wrap: wrap; justify-content: center; gap:20px;
    margin: 0 auto;
    width: 96%; max-width: 900px;
}
#toppage #mokuteki .mokuteki_list li { width: calc(33.3% - 13.33px); max-width: 300px;}
#toppage #mokuteki .mokuteki_list li a {
    display: flex; flex-direction: column; align-content: center;
    display: block;
    padding: 30px 0;
    aspect-ratio: 1 / 1;
    color: #fff;
    text-align: center;
    text-decoration: none;
    background-size: 100% auto !important;
    box-sizing: border-box;
}
#toppage #mokuteki .mokuteki_list li:nth-child(odd) a { background:url("../../img/mokuteki_bg1.png") no-repeat;}
#toppage #mokuteki .mokuteki_list li:nth-child(even) a { background:url("../../img/mokuteki_bg2.png") no-repeat;}
#toppage #mokuteki .mokuteki_list li a img { width: 70%; max-width: 130px; height: auto;}
#toppage #mokuteki .mokuteki_list li a span { 
    display: block;
    font-family: "Kiwi Maru", serif;
    font-size: clamp(112.5%, 2vw, 150%);
    line-height: 110%;
    letter-spacing: -2px;
    filter:drop-shadow(#005ED9 0 0 10px);
}

/* NENREI */
#toppage #nenrei {
    clear:both;
    margin: auto;
    padding: 100px 0 200px;
    width:100%; max-width:1200px;
    background-image: url("../../img/kazari04.png"), url("../../img/kazari05.png");
    background-repeat: no-repeat, no-repeat;
    background-position: right top, left 80%;
}
#toppage #nenrei .nenrei_list {
    display: flex; flex-wrap: wrap; justify-content: center; gap:20px;
    margin: 0 auto;
    width: 96%; max-width: 1000px;
}
#toppage #nenrei .nenrei_list li { width: calc(25% - 15px);}
#toppage #nenrei .nenrei_list li a {
    display: block;
    padding: 20px;
    aspect-ratio: 1 / 1;
    color: #222;
    text-align: center;
    text-decoration: none;
    background: #D3F1C6;
    border-radius: 10px;
    box-sizing: border-box;
}
#toppage #nenrei .nenrei_list li a img { width: 90%; height: auto; margin-bottom: 15px;}
#toppage #nenrei .nenrei_list li a span { 
    display: block;
    font-family: "Kiwi Maru", serif;
    font-size: clamp(112.5%, 2vw, 150%);
}
@media only screen and (max-width:768px){
    #toppage .search_cont h2 {
        margin: 0 auto 40px;
        max-width:400px;
        font-size:212.5%;
        background-size: 85px auto, 85px auto;  
    }
    #toppage #keytag { flex-direction: column; padding:50px 30px;}
    #toppage #keytag .keyword,
    #toppage #keytag .tag { width:100%;}
    #toppage #keytag dl dt { margin-bottom: 10px;}
    #toppage #keytag .keyword dd { flex-direction: column; gap:10px;}
    #toppage #mokuteki {
        background-position: right bottom, -20px 50px;
        background-size: 130px auto, 130px auto;
    }
    #toppage #mokuteki .mokuteki_list { gap:10px; width: 85%;}
    #toppage #mokuteki .mokuteki_list li { width: calc(50% - 5px);}
    #toppage #mokuteki .mokuteki_list li a { padding: 10px 0 20px;}
    #toppage #mokuteki .mokuteki_list li a img { width:50%;}
    #toppage #nenrei {
        padding-bottom:170px;
        background-position: right top, left 83%;
        background-size:80px auto, 40px auto;
    }    
    #toppage #nenrei .nenrei_list { gap:10px; width: 85%;}
    #toppage #nenrei .nenrei_list li { width: calc(50% - 5px);}
}
@media only screen and (max-width:468px){
}



/* EVENT =====================================================================================*/
#toppage .event {
    position: relative;
    background-color: #F7F8C4;
    background-image: url("../../img/h1_bg2.png"), url("../../img/h1_bg.png");
    background-repeat: repeat-x, repeat-x;
    background-position: center top, center bottom;  
}
#toppage .event .inner { padding-top:300px; max-width: 2000px;}
#toppage .event .inner::before {
    display: block; clear: both; content:"";
    position: absolute;
    background-size: 100% auto !important;
}
#toppage .event .inner::before {
    top: -70px; left:0;
    width:177px; height:340px; aspect-ratio: 177 / 340;
    background: url("../../img/kazari06.png") no-repeat;
}
#toppage .event h3 {
    position: absolute; top: -100px; left: 0; right: 0; z-index: 999;
    margin: auto;
    padding-top: 160px;
    width: 389px; height: 364px; aspect-ratio: 389 / 364;
    font-family: "Kiwi Maru", serif;
    font-size: 275%;
	font-weight: 600;
    line-height: 100%;
    color: #12A4B2;
    text-align: center;
    background: url("../../img/event_bg.png") no-repeat;
    background-size: 100% auto;
}
#toppage .event .event_list {
    display: flex; flex-wrap: wrap; justify-content: space-between;
    margin: 0 2%;
}
#toppage .event .calendar {
    padding:40px 30px;
    width: 49%;
    background: #fff;
    box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.15);
    border-radius:10px;
}
#toppage .event .calendar { position: relative;}
#toppage .event .calendar h4 {
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 30px;
    width: 80%; height: 55px;
    font-family: "Kiwi Maru", serif;
	font-size:175%;
	font-weight: 600;
    color: #12A4B2;
    text-align: center;
    background-image: url("../../img/tit_bg1.png"), url("../../img/tit_bg2.png");
    background-repeat: no-repeat, no-repeat;
    background-position: left center, right center;  
    background-size: 62px auto, 62px auto;  
}
#toppage .event .calendar ul.month { margin: auto; text-align: center;}
#toppage .event .calendar ul.month::after { display: block; content:""; clear: both;}
#toppage .event .calendar ul.month li {display:inline;}
#toppage .event .calendar ul.month li.prev a,
#toppage .event .calendar ul.month li.next a {
    padding:2px 15px;
    color: #222; text-decoration: none;
    background-size: 14px auto !important;
    border-radius: 30px;
}
#toppage .event .calendar ul.month li.prev a {
    padding-left: 30px;
    background: #6FD2DC url("../img/arrow_prev.svg") no-repeat 14% center;
}
#toppage .event .calendar ul.month li.next a {
    padding-right: 30px;
    background: #6FD2DC url("../img/arrow_next.svg") no-repeat 83% center;
}
#toppage .event .calendar ul.month li.today { 
    margin: 0 30px; 
    font-family: 'Roboto', sans-serif;
    font-size: 175%; font-weight: bold;  color: #222;
    letter-spacing: 2px;
}
#toppage .event .calendar ul.month li.today small { font-size:70%; }
#toppage .event .calendar ul.week {	padding:20px 0 0; text-align:center; overflow: hidden;}
#toppage .event .calendar ul.week li { float:left; width:14.28%; line-height: 16px;}
#toppage .event .calendar ul.day { padding:15px 0; text-align:center; overflow: hidden;}
#toppage .event .calendar ul.day li { float:left; padding:5px 0; width:14.28%; min-height: 100px; border: 1px solid #fff; background:#F5FBFE; box-sizing: border-box;}
#toppage .event .calendar ul.day li:nth-child(7n+1) { color:#c52726;}
#toppage .event .calendar p.sday { font-size:75%;}
#toppage .event .calendar p.sday span  { display: none;}
#toppage .event .calendar div.naiyou {}
#toppage .event .calendar .eve1.cal,
#toppage .event .calendar .eve1.lnk,
#toppage .event .calendar .eve1.kubo,
#toppage .event .calendar .eve1.tais, 
#toppage .event .calendar .eve1.towa  { 
    margin: 0 5px;
/*    font-size: 62.5%; */
    font-size: 54.5%;
    line-height:110%;
    text-align: left;

}
#toppage .event .calendar .eve1.cal a {position: relative; padding-left: 10px;}
#toppage .event .calendar .eve1.kubo {position: relative; padding-left: 10px;}
#toppage .event .calendar .eve1.tais {position: relative; padding-left: 10px;}
#toppage .event .calendar .eve1.towa {position: relative; padding-left: 10px;}
#toppage .event .calendar .eve1.cal a::before,
#toppage .event .calendar .eve1.kubo::before,
#toppage .event .calendar .eve1.tais::before,
#toppage .event .calendar .eve1.towa::before  {
    position: absolute; top:5px; left: 0;
    display: block; clear: both; content:"";
    width: 5px; height: 5px;
    background: #6FD2DC;
    border-radius: 20px;
}

#toppage .event .calendar .eve1.tais::before  {
    background: #80DC6F;
}
#toppage .event .calendar .eve1.towa::before  {
    background: #FFE600;
}
#toppage .event .calendar .eve1.cal a::before  {
    background: #03040c;
}


#toppage .event .calendar .eve1.cal a { color: #03040c; text-decoration: none;}
#toppage .event .calendar .eve1.kubo { color: #03040c; text-decoration: none;}
#toppage .event .calendar .eve1.tais { color: #03040c; text-decoration: none;}
#toppage .event .calendar .eve1.towa { color: #03040c; text-decoration: none;}
#toppage .event .calendar .eve1.lnk a { color: #03040c !important; margin-left:1em;}
#toppage .event .calendar .eve1.cal a:hover  {text-decoration:underline;}
/*
#toppage .event .calendar .eve1.kubo a:hover  {text-decoration:underline;}
#toppage .event .calendar .eve1.tais a:hover  {text-decoration:underline;}
#toppage .event .calendar .eve1.towa a:hover  {text-decoration:underline;}
*/
#toppage .event .calendar .eve2 {
    position: relative;
    font-size: 62.5%;
    line-height:110%;
}
#toppage .event .calendar .eve2 span { position: relative; display:block; margin: 0 5px; padding-left: 10px;}
#toppage .event .calendar .eve2 span::before  {
    position: absolute; top:5px; left: 0;
    display: block; clear: both; content:"";
    width: 5px; height: 5px;
    background: #6FD2DC;
    border-radius: 20px;
}
#toppage .event .calendar .eve2 span.c1::before { background: #6FD2DC;}
#toppage .event .calendar .eve2 span.c2::before { background: #80DC6F;}
#toppage .event .calendar .eve2 span.c3::before { background: #FFE600;}
#toppage .event .calendar .eve2 a { color: #222; }
#toppage .event .calendar .memo { display: flex; justify-content: space-between;}
#toppage .event .calendar .memo .link { padding: 0;}
#toppage .event .calendar .memo .link a {
    padding-left: 20px;
    font-size: 87.5%; line-height:100%;
    color: #222;
    background: url("../img/arrow_next.svg") no-repeat left 7px;;
    background-size: 10px auto;
}
#toppage .event .calendar .memo .come { font-size: 87.5%;}
#toppage .event .calendar .memo .come span + span { margin-left:10px;}
#toppage .event .calendar .memo .come span { position: relative; padding-left: 20px;}
#toppage .event .calendar .memo .come span::before {
    position: absolute; top:5px; left: 0;
    display: block; clear: both; content:"";
    width: 12px; height: 12px;
    border-radius: 20px;
}
#toppage .event .calendar .memo .come span.c1::before { background: #6FD2DC;}
#toppage .event .calendar .memo .come span.c2::before { background: #80DC6F;}
#toppage .event .calendar .memo .come span.c3::before { background: #FFE600;}
#toppage .event .calendar .b_more {
    display:none;
    margin: 10px 0;
    padding: 20px;
    text-align: center;
    background: #f6f6f6;
    border-radius:50px;
}
@media only screen and (max-width:968px){
    #toppage .event .event_list { flex-direction: column; gap:40px;}
    #toppage .event .calendar { width: 100%;}
}
@media only screen and (max-width:768px){
    #toppage .event .inner { padding-top:150px;}
    #toppage .event h3 {
        position: absolute; top: -130px; left: 0; right: 0; z-index: 999;
        padding-top: 120px;
        width: 280px;
        font-size: 212.5%;
    }
    #toppage .event .inner::before {
        top: -110px; left:0;
        width:90px;
    }
    #toppage .event .calendar {padding:30px 20px;}
    #toppage .event .calendar ul.day li.sm_none { display: none;}
    #toppage .event .calendar ul.day li {
        float:none;
        padding:15px 20px;
        width:100%; min-height: auto !important;
        text-align: left;
        overflow: hidden;
    }
    #toppage .event .calendar ul.day li:nth-child(odd) { background: #fff;}
    #toppage .event .calendar p.sday { float: left; width: 70px;}
    #toppage .event .calendar p.sday span  { display:inline;}
    #toppage .event .calendar p.eve1,
    #toppage .event .calendar p.eve2 { font-size:75%;}
    #toppage .event .calendar p.eve1 { float: left; width: calc(100% - 80px);}
    #toppage .event .calendar p.eve2 { float: left; width: calc(100% - 80px); padding-top: 5px;}
    #toppage .event .calendar p.eve2 span { float: left;}
    #toppage .event .calendar p.eve2 a { float: right;}
    #toppage .event .calendar .memo { flex-direction: column-reverse; text-align: center;}
    #toppage .event .calendar .b_more {display: block;}
    #toppage .event  .btn {margin:0 auto;}

	#toppage .event .calendar div{
		margin-left:4.5em;
	}


	#toppage .event .calendar .eve1.cal,
	#toppage .event .calendar .eve1.lnk,
	#toppage .event .calendar .eve1.kubo,
	#toppage .event .calendar .eve1.tais, 
	#toppage .event .calendar .eve1.towa  { 
	    font-size: 90%;
	    line-height:1.2em;
	}


}
@media only screen and (max-width:468px){

}




/* INFORMATION ===============================================================================*/

#toppage .information {}
#toppage .information .inner { display: flex; flex-wrap: wrap;}
#toppage .information .inner::before,
#toppage .information .inner::after {
    display: block; clear: both; content:"";
    position: absolute;
    background-size: 100% auto;
}
#toppage .information .inner::before {
    top: -70px; right: -60px;
    width:122px; height:210px;
    background: url("../../img/kazari07.png") no-repeat;
}
#toppage .information .inner::after {
    bottom:20px; left:-90px;
    width:108px; height:116px;
    background: url( "../../img/kazari03.png") no-repeat;
    transform: rotate(180deg);
}
#toppage .information h3 {
    margin-bottom: 80px;
    width: 100%;
    font-family: "Kiwi Maru", serif;
    font-size: 275%;
    font-weight: 500;
    text-align: center;
    color: #12A4B2;
}

/* NEWS */
#toppage .information .news,
#toppage .information .pickup { position: relative; margin: 0 2%; width: 46%;}
/* #toppage .news_list { height: 335px; overflow:auto;} */
#toppage .news_list { min-height: 335px;}
#toppage .news_list ul { padding:15px 0; overflow: hidden; border-bottom: 1px solid #ddd;}
#toppage .news_list ul:nth-child(odd) { background: #fff;}
#toppage .news_list ul li { float: left;}
#toppage .news_list ul li:nth-child(1) { width:90px;}
#toppage .news_list ul li:nth-child(2) { width:90px; text-align: center; color:#fff; font-size: 87.5%; font-weight: bold; border-radius:5px;}
#toppage .news_list ul li:nth-child(3) { width:calc(100% - 90px - 90px); padding-left: 10px; }
#toppage .news_list ul li:nth-child(3) a { color: #222; line-height: 110%; text-decoration: none; }
#toppage .news_list ul li:nth-child(2).cate0 { color: #12A4B2; border: 2px solid #12A4B2;}
#toppage .news_list ul li:nth-child(2).cate1 { color: #E98D3D; border: 2px solid #E98D3D;}
#toppage .news_list ul li:nth-child(2).cate2 { color: #179BDE; border: 2px solid #179BDE;}
#toppage .news_list ul li:nth-child(2).cate3 { color: #32B10D; border: 2px solid #32B10D;}
#toppage .news_list ul li:nth-child(2).cate4 { color: #E98D3D; border: 2px solid #E98D3D;}
#toppage .news_list ul li:nth-child(2).cate5 { color: #179BDE; border: 2px solid #179BDE;}
#toppage .news_list ul li:nth-child(2).cate6 { color: #32B10D; border: 2px solid #32B10D;}

/* PICKUP */
#toppage .pickup { padding: 50px 40px; background: rgba(194,235,250,0.20); border-radius:5px;}
#toppage .pickup .pickup_list { overflow: hidden;}

#toppage .pickup .pickup_list a.topilink { color:#03040c}
#toppage .pickup .pickup_list a.topilink p:hover { text-decoration:underline}

#toppage .pickup .photo { float: left; width: 50%;}
#toppage .pickup .come { float: right; width: 44%;}
#toppage .pickup .come h4 { margin: 20px 0; font-size: 150%; line-height: 130%;}
#toppage .pickup::before,
#toppage .pickup::after {
    display: block; clear: both; content:"";
    position: absolute;
}
#toppage .pickup::before {
    top: -20px; left: -10px;
    width: 74px; height: 79px;
    background: url("../../img/kazari08.png") no-repeat;
}
#toppage .pickup::after {
    bottom: -20px; right: -20px;
    width: 87px; height: 88px;
    background: url("../../img/kazari09.png") no-repeat;
}
@media only screen and (min-width:768px){
    #toppage .news_list ul li:nth-child(3) a:hover { text-decoration: underline;}
}
@media only screen and (max-width:768px){
    #toppage .information .inner::before {right:0;}
    #toppage .information .inner::after { display: none;}
    #toppage .information h3 { margin-bottom: 40px; font-size: 212.5%;}
    #toppage .information .news,
    #toppage .information .pickup { position: relative; margin: 0 2%; width: 96%;}
    #toppage .news_list ul li:nth-child(3) { clear: both; width:100%; margin:10px 0 0; }
    #toppage .news .btn { margin-top: 20px;}
    #toppage .information .pickup { margin-top: 80px; padding:40px 30px;}
    #toppage .pickup .photo { float:none; margin: auto; width: 50%;}
    #toppage .pickup .come { float:none; width:100%;}
    #toppage .pickup .come h4 br { display: none;}
}
@media only screen and (max-width:468px){
}


/* 2025/07/25 add */
#toppage .mainimg img{
	width:100%;
	height:auto;
}

#toppage .pickup_list img{
	max-width:100%;
	max-height:285px;
	height:auto;
	width:auto;
}