@charset "utf-8";
@media only screen and (min-width:467px){
    #header {
        position: static !important;
        width: 28% !important; 、max-height:770px !important;
        aspect-ratio: 400 / 770;
    }
    #header .inner { position: static !important; padding: 0 !important;}
    #header h1 { margin: auto !important; padding: 80px 0 150px !important; width: 90% !important;}
    #header h1 a {
        display: block !important;
        width: 100%; height: auto !important;
        aspect-ratio:356 / 550 !important;
        text-indent: -9999px !important;
        background:url("../img/logo1.png") no-repeat !important;
        background-size: 100% auto !important;
    }
    #header .btn_box { right: 20px !important;}
    #change { right: 20px !important;}
}


/*====================================================================================================
  TOP
====================================================================================================*/
#toppage h3 {
    position: relative;
    margin-bottom: 80px;
    font-family: "Zen Maru Gothic", sans-serif;
    font-size:  40px;
    font-weight:700;
    letter-spacing: 2px;
    color:#605A52;
}
#toppage h4 {
    position: relative;
    font-family: "Zen Maru Gothic", sans-serif;
    font-size:  46px;
    font-weight:700;
    letter-spacing: 2px;
    color:#605A52;
}
#toppage .b_more a {
    display: block;
    padding:15px 20px;
    color: #605A52; 
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    background: #B8E7F3 url("../img/icon_arrow_b.svg") no-repeat 95%center;
    background-size: 20px auto !important;
    border-radius: 7px;
}
#toppage .b_more2 { width: 200px;}
#toppage .b_more2 a {
    display: block;
    padding:10px 20px;
    color: #fff;
    font-size: 125%;
    font-weight: 600;
    text-decoration: none;
    background: #695B47 url("../img/icon_arrow_w.svg") no-repeat 90%center;
    background-size: 20px auto !important;
    border-radius: 50px;
}
@media only screen and (min-width:767px){
    #toppage .b_more a:hover { opacity: 0.7;}
    #toppage .b_more2 a:hover { opacity: 0.7;}
}
@media only screen and (max-width:768px){
   #toppage h3 { margin-bottom: 60px; font-size:  30px;}
   #toppage h4 { font-size:  35px;}
}
@media only screen and (max-width:468px){
    #toppage h3 { margin-bottom: 30px; font-size:  30px;}
    #toppage h4 { font-size:  30px;}
    #toppage .b_more a { padding: 10px 20px;}
}

/*------------------------------------------------------------
    MAINIMG
------------------------------------------------------------*/
.mainimg {
    position: absolute; top: 0; right: 0;
    width: 72%;
    border-bottom-left-radius: 145px;
    border-left: 15px solid #F8CBC8;
    border-bottom: 15px solid #F8CBC8;
    overflow: hidden;
}
.mainimg::before { 
    position: absolute; bottom: 0; left: 0; z-index: 999;
    display: block; clear: both; content:"";
    width: 100%; height: 135px;
    background: url("../img/wave3.png") no-repeat bottom center;
    background-size: auto 135px;
}
.mainimg .main_slider img {
    width: 100%; height: auto; object-fit: cover;
    aspect-ratio: 1000 / 770;
    transform-origin: center top;
    transform: scale(1.0);
    transition: 10s ease-out;
}
.mainimg .main_slider .slick-active img {
    transform: scale(1.1);
}
@media only screen and (max-width:768px){
}
@media only screen and (max-width:468px){
    .mainimg {
/*            position: static; */
            position: relative;
            width: 100%;
            border-bottom-left-radius:0;
            border: none;
    }
}



/*---------------------------------------------------------------------------
  CATEGORY
---------------------------------------------------------------------------*/
#toppage .category .inner { padding-bottom: 60px;}
#toppage .category h3 {
    height: 35px;
    margin-bottom: 30px;
    padding-left: 45px;
    background: url("../img/icon_search.svg") no-repeat;
    background-size: 36px auto;
}
#toppage .category ul { display: flex; justify-content: center; gap:10%;}
#toppage .category ul li { width: 185px; text-align: center;}
#toppage .category ul li a {text-decoration: none;}
#toppage .category ul li span {
    display: block;
    margin-top: 30px;
    font-family: "Zen Maru Gothic", sans-serif;
    font-size: 30px;
    font-weight: 700;
    color: #605A52;
    text-decoration: none;
}
@media only screen and (max-width:768px){
    #toppage .category ul li span { font-size: 25px;}
}
@media only screen and (max-width:468px){
    #toppage .category .inner { padding-bottom:20px;}
    #toppage .category ul { gap:5%;}
    #toppage .category ul li span { margin-top: 10px; font-size: 87.5%;}
}



/*---------------------------------------------------------------------------
  PICKUP
---------------------------------------------------------------------------*/
#toppage .pickup .inner { display: flex; flex-direction: column; gap:120px;}
#toppage .pickup .box { display: flex; align-items:center; gap:7%;}
#toppage .pickup .box:nth-child(2) { flex-direction: row-reverse;}
#toppage .pickup .box .pic { position: relative; width: 56%;}
#toppage .pickup .box .pic img { position: relative; border-radius: 30px; z-index: 8;}
#toppage .pickup .box .pic::after {
    position: absolute; top: 15px; left: 15px; z-index: 7;
    display: block; clear: both; content:"";
    width: 100%; height:100%;
    border-radius: 30px;
}
#toppage .pickup .box:nth-child(1) .pic:after { background:#F8CBC8;}
#toppage .pickup .box:nth-child(2) .pic:after { background:#FFF9A7;}
#toppage .pickup .box:nth-child(3) .pic:after { background:#B8E7F3;}
#toppage .pickup .box .cont { position: relative; display: flex; flex-direction: column; gap:40px; width: 37%;}
#toppage .pickup .box .come { font-size:125%; line-height: 150%;}
#toppage .pickup .box .cont::before {
    position: absolute; z-index: 9;
    display: block; clear: both; content:"";
     height: auto;
    aspect-ratio:178 / 157;
    background-size: 100% auto !important;
}
#toppage .pickup .box:nth-child(1) .cont::before {
    top: -120px; left: -120px;
    width:45%;
    aspect-ratio:186 / 173;
    background: url("../img/ornament1.png") no-repeat;
}
#toppage .pickup .box:nth-child(2) .cont::before {
    top: -50px; right: -70px;
    width:45%;
    aspect-ratio:160 / 116;
    background: url("../img/ornament2.png") no-repeat;
}
#toppage .pickup .box:nth-child(3) .cont::before {
    top: -100px; left: -150px;
    width:45%;
    aspect-ratio:186 / 173;
    background: url("../img/ornament3.png") no-repeat;
}
@media only screen and (max-width:768px){
    #toppage .pickup .box:nth-child(1) .cont::before { top: -30px; left: -120px; width:45%;}
    #toppage .pickup .box:nth-child(2) .cont::before { top:-50px; right:-50px;  width:45%;}
    #toppage .pickup .box:nth-child(3) .cont::before { top: -50px; left: -120px; width:45%; }
}
@media only screen and (max-width:468px){
    #toppage .pickup .inner { gap:80px;}
    #toppage .pickup .box { flex-direction: column !important; gap:50px;}
    #toppage .pickup .box .pic { width: 100%;}
    #toppage .pickup .box .pic::after { top: 10px; left: 10px;}
    #toppage .pickup .box:nth-child(1) .cont::before { top: -80px; left:inherit; right: 0; width:45%;}
    #toppage .pickup .box:nth-child(2) .cont::before { top:-70px; right:0;  width:45%;}
    #toppage .pickup .box:nth-child(3) .cont::before { top:-120px; left:inherit; right: 0; width:45%; }
    #toppage .pickup .box .cont { width: 100%; gap:20px;}
    #toppage .pickup .box .come {  font-size: 100%;}
}



/*---------------------------------------------------------------------------
  INFORMATION
---------------------------------------------------------------------------*/
#toppage .info_search {}
#toppage .info_search .inner {
    display: flex; flex-wrap: wrap; justify-content: space-around; gap:30px 5%;
    padding: 80px 0 120px;
    background: url("../img/line.png") no-repeat top center;
    background-size: auto 5px;
}
#toppage .info_search .cont_l { width:45%;}
#toppage .info_search .cont_r { width:50%;}
#toppage .info_search h3 {
    height: 35px;
    margin-bottom: 30px;
    padding-left: 45px;
    background: url("../img/icon_search.svg") no-repeat;
    background-size: 36px auto;
}
#toppage .info_search form { 
    position: relative;
    display: block;
    margin-bottom: 30px;
    background: #fff;
    box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.10);
    border-radius:10px;
}
#toppage .info_search input.sa_txt {
	padding: 0 0 0 20px;
	width:calc(100% - 125px);
	height:60px;
    font-size: 100%;
    font-weight: 400;
    color: #222;
    border: none;
    box-sizing: border-box;
}
#toppage .info_search input.sa_bo {
    cursor: pointer;
	position: absolute; top: 0; bottom: 0; right:15px;
    margin: auto; padding-left: 25px;
    width:95px; height:40px;
    font-family: "BIZ UDGothic", sans-serif;
    font-size: 100%;
    color: #fff;
	background:#695B47 url("../img/icon_search_w.svg") no-repeat 15px center;
	background-size:23px auto;
    border: none;
    border-radius:50px;
}
#toppage .info_search .tag h5 {
    margin-bottom: 10px;
    padding-left: 35px;
    font-size: 137.5%;
    color: #695B47;
    background: url("../img/icon_tag.svg") no-repeat;
}
#toppage .info_search .tag span { display: inline-block;}
#toppage .info_search .tag a { text-decoration: underline; color: #222;}
#toppage .info_search .bana a { position: relative; display: block; aspect-ratio:500 / 293;}
#toppage .info_search .bana a::after,
#toppage .info_search .bana a img { border-radius: 10px;}
#toppage .info_search .bana a::before {
    position: absolute; bottom: -30px; right: -10px; z-index: 9;
    display: block; clear: both; content:"";
    width:35%; height:auto;
     aspect-ratio:176 / 256;
    background: url("../../img/bana1_2.png") no-repeat;
    background-size: 100% auto;
}
#toppage .info_search .bana a img { position: relative; z-index: 8;}
#toppage .info_search .bana a::after {
    position: absolute; top: 10px; left: 10px; z-index: 7;
    display: block; clear: both; content:"";
    width: 100%; height:100%;
    background:rgba(248,203,200,0.30);
    border-radius: 10px;
}
@media only screen and (min-width:767px){
    #toppage .info_search input.sa_bo:hover { opacity: 0.7;}
    #toppage .info_search .tag a:hover { text-decoration:none;}
}
@media only screen and (max-width:768px){
    #toppage .info_search .inner { padding: 80px 0;}
}
@media only screen and (max-width:468px){
    #toppage .info_search .inner { flex-direction: column; padding: 50px 0;}
    #toppage .info_search .cont_l,
    #toppage .info_search .cont_r { width:100%;}
    #toppage .info_search h3 {
        margin-bottom:20px;
        padding-left: 35px;
        background-size: 30px auto;
    }
}


/*---------------------------------------------------------------------------
  EVENT
---------------------------------------------------------------------------*/
#toppage .event {
    position: relative;
    display: flex; gap:20px;
    padding: 60px;
    background: #F8CBC8;
    border-radius: 50px;
}
#toppage .event::before,
#toppage .event::after {
    position: absolute;
    display: block; clear: both; content:"";
    height: auto;
    background-size: 100% auto !important;
}
#toppage .event::before {
    top: -92px; left: 10px;
    width: 178px;
    aspect-ratio:178 / 157;
    background: url("../img/ornament4.png") no-repeat;
}
#toppage .event::after {
    bottom: -60px; right: 20px;
    width: 174px;
    aspect-ratio:174 / 86;
    background: url("../img/ornament5.png") no-repeat;
}
#toppage .event h4 { margin: 0 auto 40px; max-width:350px;}
#toppage .event .schedule {
    padding: 40px;
    width: calc(50% - 10px);
    background: #fff;
    border: 3px solid #605A52;
    border-radius: 25px;
    box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.10);
}
#toppage .calendar_pic { margin: 30px 0; padding:  0 5%;}
#toppage .event .btn { margin: auto; max-width: 480px;}
@media only screen and (min-width:767px){
}
@media only screen and (max-width:1080px){
    #toppage .event {  padding: 30px;}
    #toppage .event .schedule { padding: 40px 20px;}
}
@media only screen and (max-width:768px){
    #toppage .event {
        position: relative;
        flex-direction: column;
        margin: 60px 0; 
        padding:20px;
        background: #F8CBC8;
        border-radius: 20px;
    }
    #toppage .event .schedule { width: 100%; border-radius: 15px;}
    #toppage .event::before { top: -60px; left: 10px; width: 100px;}
    #toppage .event::after { bottom: -35px; right: 20px; width: 100px;}
    #toppage .event h4 { margin: 0 auto 20px;}
    #toppage .event .schedule { padding: 30px 10px;}
    #toppage .calendar_pic { margin: 10px 0;}
}


/* CALENDAR */
.calendar { position: relative; display: flex; flex-direction: column; gap:10px; overflow: hidden;}
.calendar ul.month { display: flex; justify-content: center; gap:20px;}
.calendar ul.month li.today { font-weight: 700; line-height: 35px;}
.calendar ul.month li.today b { font-size: 150%;}
.calendar ul.month li.today small { font-size: 112.5%;}
.calendar ul.month li.prev,
.calendar ul.month li.next { width: 90px;}
.calendar ul.month li.prev a,
.calendar ul.month li.next a {
    display: block;
    padding: 5px;
    color: #69635B; text-decoration: none; transition:.3s;
    font-weight: 700;
    background-color: #F8CBC8 !important;
    background-size: 22px auto !important;
    border-radius: 50px;
}
.calendar ul.month li.prev a { padding-right: 20px; text-align: right; background: url("../img/icon_prev.svg") no-repeat 12% center;}
.calendar ul.month li.next a { padding-left: 20px; text-align: left; background: url("../img/icon_next.svg") no-repeat 88% center;}
.calendar ul.week {	display: flex; flex-wrap: wrap; justify-content: center; gap:5px;}
.calendar ul.week li { padding:7px 0; width:calc(14.28% - 4.28px); text-align: center; font-weight: 600; line-height: 16px;}
.calendar ul.day { display: flex; flex-wrap: wrap; justify-content: center; gap:5px;}
.calendar ul.day li {  padding:7px 0; width:calc(14.28% - 4.28px); min-height: 80px; background:#F5FBFE; box-sizing: border-box;}
.calendar ul.day li .sday { font-size: 87.5%; text-align: center;}
.calendar ul.day li .sday span { display: none;}
.calendar ul.day li .come { padding:0 10px;}
.calendar ul.day li .come span {
    display: block;
    padding-left: 15px;
    line-height: 130%;
    background: url("../img/ornament13.png") no-repeat left 2px;
    background-size: 10px auto;
}
.calendar ul.day li .more { padding-left: 25px;}
.calendar ul.day li .come,
.calendar ul.day li .more { font-size: 75%;}
.calendar ul.day li .come a,
.calendar ul.day li .more a { color: #222; text-decoration: none;}
@media only screen and (min-width:767px){
    .calendar ul.month li.prev a:hover,
    .calendar ul.month li.next a:hover { opacity: 0.7;}
    .calendar ul.day li .come a:hover,
    .calendar ul.day li .more a:hover { text-decoration: underline;}
}
@media only screen and (max-width:1080px){
    .calendar ul.day li .come { padding:0 5px;}
    .calendar ul.day li .come span { padding-left: 8px; background-size: 5px auto;}
    .calendar ul.day li .more { padding-left: 15px;}
    .calendar ul.day li .come,
    .calendar ul.day li .more { font-size: 62.5%;}
}
@media only screen and (max-width:768px){
}
@media only screen and (max-width:468px){
    .calendar ul.month { gap:10px;}
    .calendar ul.month li.today { line-height: 25px;}
    .calendar ul.month li.today b { font-size: 112.5%;}
    .calendar ul.month li.today small { font-size: 87.5%;}
    .calendar ul.month li.prev,
    .calendar ul.month li.next { width: 60px;}
    .calendar ul.month li.prev a,
    .calendar ul.month li.next a { padding: 0; font-size: 75%; background-size: 15px auto !important;}
    .calendar ul.month li.prev a { padding-right: 10px; background-size: 10px auto;}
    .calendar ul.month li.next a { padding-left: 10px; background-size: 10px auto;}
    .calendar ul.week {	display:none;}
    .calendar ul.day { flex-direction: column; gap:2px;}
    .calendar ul.day li { display: flex; flex-wrap: wrap; justify-content: space-between; padding: 10px; width:100%; min-height: auto;}
    .calendar ul.day li .sday { text-align: left; font-size: 75%; width: 55px;}
    .calendar ul.day li .sday span { display: inline-block;}
    .calendar ul.day li .come { width:calc(100% - 55px - 40px);}
    .calendar ul.day li .more { width:40px; padding: 0; text-align: right;}
}



/*---------------------------------------------------------------------------
  INFORMATION
---------------------------------------------------------------------------*/
#toppage .information {
    margin: 120px 0 0;
    background:#fff url("../img/bg4.png") no-repeat 110% -20px;
    background-size:450px auto;
}
#toppage .information h3 { text-align: center;}
#toppage .information .info_cont { display: flex; flex-wrap: wrap; gap:40px;}
#toppage .information .news,
#toppage .information .topics { width:calc(50% - 20px);}
#toppage .news_list {
    margin-bottom: 40px;
    height: 390px;
    overflow: auto;
}
#toppage .news_list ul { padding: 15px 0; border-bottom: 1px solid #ddd; overflow: hidden;}
#toppage .news_list ul li { float: left;}
#toppage .news_list ul li:nth-child(1) { width: 95px; font-size: 87.5%;}
#toppage .news_list ul li:nth-child(2) { width: 90px; font-size: 87.5%; margin: 0 10px; color: #605A52; font-weight: 600; text-align: center; border-radius: 5px;}
#toppage .news_list ul li:nth-child(3) { width: calc(100% - 185px - 20px); line-height: 130%;}
#toppage .news_list ul li:nth-child(3) a { color: #222; text-decoration: none;}
#toppage .news_list ul li.cate1 { background: #F8CBC8;}
#toppage .news_list ul li.cate2 { background: #FFF9A7;}
#toppage .news_list ul li.cate3 { background: #B8E7F3;}
/* 2025/12/02 ADD [S] */
#toppage .news_list ul li.cate4 { background: #A5DE65;}
/* 2025/12/02 ADD [E] */
#toppage .information .topics {
    display: flex; flex-direction: column; gap:20px;
    padding: 30px;
    background: #FFFCF6;
    border: 3px solid #605A52;
    border-radius: 10px;
}
#toppage .information .topics .pic { margin-bottom: 20px;}
#toppage .information .topics .mid { margin-bottom: 20px; font-size:150%; font-weight: bold;}
@media only screen and (min-width:767px){
    #toppage .news_list ul li:nth-child(3) a:hover { opacity: 0.7; text-decoration: underline;}
}
@media only screen and (max-width:768px){
    #toppage .information .info_cont { flex-direction: column;}
    #toppage .information .news,
    #toppage .information .topics { width:100%;}
    #toppage .news_list { margin-bottom: 20px; height: 300px;}
    #toppage .news_list ul { padding: 20px;}
    #toppage .news_list ul li:nth-child(1) { width: 80px; font-size: 75%;}
    #toppage .news_list ul li:nth-child(2) { width: 80px; font-size: 75%;}
    #toppage .news_list ul li:nth-child(3) { width:100%; padding-top:5px;}
    #toppage .information .topics { padding: 20px;}
}
@media only screen and (max-width:468px){
    #toppage .information {
        background-position: 100px -20px;
        background-size: 300px auto;
    }
}