@charset "utf-8";
/* CSS Document */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');

/*---------

base set

----------------------------**/

.event{
    --theme-color: rgb(0,140,207); /* 008ccf tab h3 & swiper */
    --bg-theme-main: rgb(237, 247, 249);
    --bg-theme-stripe: repeating-linear-gradient(90deg, var(--bg-site-main-cream), var(--bg-site-main-cream) 20px, 20px, rgb(253 248 236) 40px );
    --bg-theme-gradation: linear-gradient(0deg , rgba(255, 245, 226, 1) 0%, rgba(197, 236, 255, 1) 100%);
}

.month .number,
.date-item .date,
.event-popup .date span{
    font-family: 'Bebas Neue', cursive;}

/*---------

section

----------------------------**/

article{ padding-bottom: 5rem;}
body.event .section-wrap{ padding-bottom: 0;}
body.event .section-wrap .latest-event{ padding-bottom: 3em; padding-top: 3em;}

body.event .breadcrumb,
body.event main{ background-image: var(--bg-theme-stripe);}

/*body.event .section-wrap:nth-of-type(1) section{ padding-top: 0; padding-bottom: 0;}*/
body.event article .section-wrap:nth-of-type(1) h2{ padding-top: 5rem;}
body.event article .section-wrap:nth-of-type(1) .section-inner{ padding-bottom: 5rem; max-width: var(--width-min)}

/*--- theme
----------------------------**/

.theme-main{ background-color: var(--bg-theme-main);}

.theme-gradation{
    background: var(--bg-theme-main);
    background: var(--bg-theme-gradation);
}

.theme-white {background: #FFF;}

section.theme-main,
section.theme-gradation,
section.theme-white,
section.site-theme-bg-main{
    max-width: 103.6rem;
    margin-left: auto;
    margin-right: auto;
}

@media not all and (min-width:768px){

    .section-inner.tab-body{ padding-left: 0; padding-right: 0;}
    body.event section.tab{ padding-top: 0;}
}

/*---------

kv

----------------------------**/

.kv-wrap h1 > img{
    width: auto;
    height: 100%;
    max-height: 27rem;
}

.kv-wrap h1.event-index{
    display: grid;
    place-content: center;
}
@media not all and (min-width:1024px){
    .kv-wide-area .kv-wrap.event-top, .kv-wide-area .kv-wrap.event-top > picture img{
        height: 38.3vw;
        width: 100%;
    }
}
@media not all and (min-width:768px){

    .kv-wide-area .kv-wrap{ height: 27.1rem;}
    .kv-wrap h1 > img{ width: auto; max-height: 15rem;}
    .kv-wrap h1.event-index img{ max-height: 15rem; transform: translateY(-20%);}
}

@media (min-width:768px){

    .kv-wrap h1.event-index img{ max-height: 27rem;}
}
@media screen and (max-width: 768px){
    .kv-wide-area .kv-wrap.event-top, .kv-wide-area .kv-wrap.event-top > picture img{
        width: 100%;
        height: 72vw;
        max-height: 460px;
    }
}

.kv-body .border {
    display: inline-block;
    padding: 0 0.5em;
    border: 1px solid #000;
}

/*---------

event

----------------------------**/

/*--- conversation
----------------------------**/

.conversation_item{
    display: flex;
    align-items: center;
    margin-top: 1.8rem;
}

.conversation_item:nth-of-type(1){ margin-top: 4.8rem;}
.conversation_item:not(.teacher){ flex-flow: row-reverse;}

.conversation_item .converrstion-img{
    flex-basis: 16%;
    max-width: 5.4rem;
    min-width: 4.8rem;
    position: relative;
}

.conversation_item p{
    line-height: 1.6;
    padding: .75em 1em;
    border-radius: 1em;
    position: relative;
    margin-right: 1em;
    margin-left: 1em;
}

.conversation_item p span{ text-decoration: underline;}

.conversation_item p:after{
	right: 98%;
	top: 8%;
	border: solid transparent;
	content: "";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
    transform: rotate(16deg);
}

.conversation_item.teacher p{
    color: #FFF;
    margin-left: 1rem;
    background-color: rgba(4, 175, 210, 1);
}

.conversation_item.pink p{ background-color: rgba(255, 205, 227 ,1)}
.conversation_item.green p{ background-color: rgba(203 ,229 ,151 ,1);}
.conversation_item.purple p{ background-color: rgba(228 ,202 ,239 ,1);}
.conversation_item.blue p{ background-color: rgba(191, 227, 224 ,1)}

.conversation_item.teacher p::after{
    right: 98%;
    border-right-color: rgba(4, 175, 210, 1);
	border-width: 0 1.8rem 1.2rem 1.2rem;
    transform: rotate(16deg);
}

.conversation_item:not(.teacher) p::after{
    left: 98%;
    border-width: 0 1.4rem 1.4rem 1.8rem;
    transform: rotate(-16deg);
}

.conversation_item.pink p::after{ border-left-color: rgba(255, 205, 227 ,1);}
.conversation_item.green p::after{ border-left-color: rgba(203 ,229 ,151 ,1);}
.conversation_item.purple p::after{ border-left-color: rgba(228 ,202 ,239 ,1);}
.conversation_item.blue p::after{ border-left-color: rgba(191, 227, 224 ,1);}

@media (min-width:768px){

    .conversation_item p{  min-width: 50%;}
}

/*--- tab
----------------------------**/

.tab-body{
    position: relative;
}

.tab-menu.swiper{ padding-bottom: 0;}

.tab-menu .swiper-wrapper{
    width: 100%;
    display: flex; 
    align-items: flex-end;
}

.tab-menu .swiper-slide .tab-title{
    font-weight: bold;
    padding: 16px 0 8px;
    text-align: center;
    cursor: pointer;
    width: calc(100% - 5px);
}

.tab-menu .swiper-slide:nth-of-type(1) .tab-title{
    border-radius: 0 20px 0 0;
    background: #ffea5d;
}
.tab-menu .swiper-slide:nth-of-type(2) .tab-title{
    border-radius: 20px 0 0 0;
    background: #caebf9;
    margin: 0 0 0 auto;
}

.tab-menu .swiper-slide:nth-of-type(1) .tab-title::before,
.tab-menu .swiper-slide:nth-of-type(2) .tab-title::before{
    content: "";
    display: block;
    width: 3.2rem;
    height: 3.2rem;
    margin: 0 auto;
    background-repeat: no-repeat;
    background-size: contain;
}
.tab-menu .swiper-slide:nth-of-type(1) .tab-title::before{ background-image: url(../images/icon/icon-calender.png);}
.tab-menu .swiper-slide:nth-of-type(2) .tab-title::before{ background-image: url(../images/icon/icon-event.png);}
.tab-menu .swiper-slide span{ font-size: 2.2rem;}

.tab-menu .swiper-slide-thumb-active{
    cursor: auto;
}
.tab-menu .swiper-slide:nth-of-type(1).swiper-slide-thumb-active .tab-title{
    border-top: 25px solid #ffea5d;
    background-color: #FFF;
    padding-top: 8px;
}
.tab-menu .swiper-slide:nth-of-type(2).swiper-slide-thumb-active .tab-title{
    border-top: 25px solid #caebf9;
    background-color: #FFF;
    padding-top: 8px;
}

.swiper.tab-content{
    max-width: 100%;
    padding: 0;
    background-color: #FFF;
    overflow: hidden;
}

.tab-content .swiper-slide{
    text-align: center;
}

.tab-content .tab-inner{
    padding: 30px 0 124px;
    height: 100%;
    background: #fff;
}
.tab-content .swiper-slide .tab-inner{
    background: #fff;
    width: calc(100% - 10px);
}

.tab-content .swiper-slide:nth-of-type(1) .tab-inner{
    margin: 0 auto 0 0;
    border-radius: 0 20px 20px 0;
}

.tab-content .swiper-slide:nth-of-type(2) .tab-inner{
    margin: 0 0 0 auto;
    border-radius: 20px 0 0 20px;
}

.tab-content:has(.swiper-slide:nth-of-type(1).swiper-slide-active){
    background: #caebf9;
}
.tab-content:has(.swiper-slide:nth-of-type(2).swiper-slide-active){
    background: #ffea5d;
}


@media (min-width:768px){
    
    .tab-menu .swiper-slide .tab-title{
        width: calc(100% - 15px);
    }
    
    .tab-menu .swiper-slide span {
        font-size: 2.5rem;
    }

    .tab-content .tab-inner{
        padding: 40px 4% 124px;
    }

}


.swiper-button{
    position: absolute;
    margin: 0 auto;
    left: 0;
    right: 0;
    top: unset;
    bottom: 50px;
    z-index: 5;
    display: block;
    width: 86%;
    max-width: 300px;
    color: #333;
    text-align: center;
    background: #fff;
    line-height: 1em;
    height: auto;
    padding: 20px 10px 16px 10px;
}

.swiper-button span img{
    width: 26px;
    display: inline-block;
    margin: -0.4em .8rem 0 0;
    vertical-align: middle;
}

.swiper-button::before,
.swiper-button::after{
    content: "";
    display: block;
    width: 1rem;
    height: .1rem;
    background-color: #000;
    position: absolute;
    top: 50%;
    right: 2rem;
    transition: .3s;
}

.swiper-button::after{
    transform: translateY(-.4rem) rotate(45deg);
}

.swiper-button::before{
    width: 2rem;
}

.swiper-button-next{
    background: #caebf9;
}

.swiper-button-next::before{
    
}

.swiper-button-prev{
    background: #feea5c;
}

.swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled{
    opacity: 0;
}

.swiper-button-prev::before,
.swiper-button-prev::after{
    right: 0;
    left: 2rem;
}
.swiper-button-prev::after{
    transform: translateY(-.4rem) rotate(-45deg);
}

/*--- calender
----------------------------**/

.tab-content .week,
.calender_body {
    display: grid;
    /*    grid-template-columns: repeat(7, 14.28%);
    grid-template-columns: 18% 12.8% 12.8% 12.8% 12.8% 12.8% 18%;
*/
    grid-template-columns: 18% repeat(5, 12.8%) 18%;
    justify-content: space-between;
}

.calender_head,
.calender-foot{
    display: grid;
    margin: 5% 2%;
    justify-content: space-between;
}

.calender_head{
    grid-template-columns: 20% 1fr 20%;
    grid-auto-rows: 1fr;
    align-items: flex-end;
}

.calender-foot{ grid-template-columns: 20% 20%;}
.calender_head .month { line-height: 1.0;}
.calender_head .month .number:nth-of-type(2){ font-size: 3.5rem;}

.calender_head .pre,
.calender_head .next,
.calender-foot .pre,
.calender-foot .next{
    border:1px solid #CCC;
    border-radius: .5rem;
    position: relative;
}

.calender_head .pre,
.calender-foot .pre{ 
	padding-left: .75em;
    cursor: pointer;
}

.calender_head .next,
.calender-foot .next{ 
	padding-right: .75em;
    cursor: pointer;
}

.calender_head .pre::before,
.calender_head .next::after,
.calender-foot .pre::before,
.calender-foot .next::after{
    content: "";
    width: 8px;
    height: 8px;
    display: block;
    position: absolute;
    top: 50%;
    border-top: 1px solid #000;   
    border-right: 1px solid #000;
    transform: translateY(-4px) rotate(45deg);
}

.calender_head .pre::before,
.calender-foot .pre::before{
    left: .75em;
    transform: translateY(-4px) rotate(-135deg);
}

.calender_head .next::after,
.calender-foot .next::after{ right: .75em;}

.tab-content .week{
    border-top:1px solid #CCC;
    border-bottom:1px solid #CCC;
}

.date-item.today{ background-color: var(--bg-site-main-cream);}
.date-item.active{ background-color: var(--bg-site-main-blue);}

.tab-content .week .day:not(:last-child),
.calender_body .date-item:not(:nth-of-type(7n)){ border-right:1px solid #CCC}

.calender_body .date-item{
    border-bottom:1px solid #CCC;
    padding: 2%;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.disabled {
    cursor: auto!important;
}

.calender_body .date,
.event-popup .date{ font-size: 2.0rem;}
.calender_body .date-item:nth-of-type(7n) .date,
.event-popup .date .sat{ color: #27a3cc;}
.calender_body .date-item:nth-of-type(7n-6) .date,
.event-popup .date .dayoff{ color: #ff5580;}

.date-item span[class^="icon-"]{
    display: block;
    border-radius: .2rem;
    margin-bottom: 0.5em;
    color: #FFF;
}

.calender_body .date-item .disabled{
    display: block;
    color: #CCC;
}

.calender-icon-list{
    padding: 2%;
}
.calender-icon-list p{
    font-size: 1.1rem;
    text-align: left;
}

.calender-icon-list dl{
    font-size: 1.1rem;
    display: flex;
    padding: 0.8em;
    width: 25%;
}
@media (max-width: 768px){
    .calender-icon-list dl{
        padding: .5em;
        width: 50%;
    }
}

.calender-icon-list dt{
    color: #FFF;
    border-radius: .5rem;
    width: 22px;
    height: 22px;
}
@media (max-width: 768px){
    .calender-icon-list dt{
        width: 5px;
    }
}

.calender-icon-list dd{
    text-align: left;
    position: relative;
    padding: 0 0 0 0.7em;
    width:89%;
}
@media (max-width:768px){
    .calender-icon-list dd{
        font-size: 1.3rem;
        letter-spacing: 0;
        line-height: 1.5;
    }
}

#legend{
    display: flex;
    justify-content: left;
    flex-wrap: wrap;
    background: #f5f5f5;
    padding: 0.5em;
}

#legend_2{
    display: flex;
    justify-content: left;
    flex-wrap: wrap;
    background: #f5f5f5;
    padding: 0.5em;
}

.date-item .icon-sp-oc,
.icon-sp-oc dt{ background-color: rgba(255,25,153,1);}
.date-item .icon-oc,
.icon-oc dt{ background-color: rgba(32,55,138,1);}
.date-item .icon-orientation,
.icon-orientation dt{ background-color: rgba(36,180,176,1);}
.date-item .icon-info-session,
.icon-info-session dt{ background-color: rgba(210,163,122,1);}
.date-item .icon-guardians,
.icon-guardians dt{ background-color: rgba(154,205,49,1);}
.date-item .icon-sp-event,
.icon-sp-event dt{ background-color: rgba(96,32,132);}
.date-item .icon-campus-tour,
.icon-campus-tour dt{ background-color: rgba(253,110,109,1);}
.date-item .icon-online-oc,
.icon-online-oc dt{ background-color: rgba(39,163,204,1);}
.date-item .icon-online-info-session,
.icon-online-info-session dt{ background-color: rgba(255,138,0,1);}
.date-item .icon-training01,
.icon-training01 dt{ background-color: rgba(255,130,1184,1);}
.date-item .icon-training02,
.icon-training02 dt {
    background-color: rgba(98, 98, 98, 1);
}

@media not all and (min-width:920px) {
    .date-item span[class^="icon-"],
    .date-item .disabled {
  font-size: 8.5px;
  white-space: nowrap;
    }
}

@media not all and (min-width:768px){

    /*
    .tab-content .swiper-slide:nth-of-type(1){
        text-align: center;
        padding-left: 1%;
        padding-right: 1%;
    }
*/

    .tab-content .swiper-slide > p{ font-size: 3.2vw;}

    .date-item span[class^="icon-"],
    .date-item .disabled {
/*        font-size: 2.1vw;*/
/*        font-size: 1.95vw;*/
  font-size: 8.5px;
  white-space: nowrap;

    }
}

@media not all and (min-width:440px) {
    .date-item span[class^="icon-"],
    .date-item .disabled {
  font-size: 7.5px;
  white-space: nowrap;
    }
}

/*--- event-popup_wrap
----------------------------**/

@media (min-width:768px){

.calender_body .date-item{ padding: 4%;}
  
.event-popup {
    padding: 3%;
    overflow: auto;
}

.event-popup_wrap {
    width: 75%;
    background-color: #FFF;
    border: 1px solid #000;
    position: fixed;
    left: 50%;
    bottom: 13%;
    transform: translate(-50%, 110vh);
    transition: all .4s;
}

.event-popup_wrap.active {
    transform: translate(-50%, 0);
    z-index: 1500;
}

.event-popup {
    height: 100%;
    padding: 3%;
    overflow: auto;
}

.event-popup_body {
    border: 1px solid #CCC;
    display: grid;
    grid-template-columns: 10% 1fr;
}

.event-popup_list ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 2rem 10rem;
}

.event-popup .date, .event-popup_list {
    padding: 4rem;
}

.event-popup_list {
    border-left: 1px solid #CCC;
}

.event-popup_list ul li {
    padding-left: 4%;
    margin-bottom: 2%;
    border-left-style: solid;
    border-left-width: 2px;
    display: grid;
    align-items: center;
    grid-template-columns: 70% 1fr;
    grid-gap: 3rem;
    min-height: 2.8em;
}

.event-popup_list .application-button {
    /*-padding: 0.35em;-**/
    text-align: center;
    border: 1px solid #CCC;
    border-radius: 0.5rem;
    min-width: 50px;
}

.event-popup_list .application-button a{
    display: block;
    padding: 0.3em;
}

.event-popup_wrap.active {
    bottom: 35%;
}

.event-popup .date span {
    display: block;
}

.event-popup .date {
    text-align: center;
    line-height: 1.0;
}
}

.popup-trigger-close{
    content: "";
    display: block;
    width: 4.8rem;
    height: 4.8rem;
    border-radius: 2.4rem;
    border: none;
    background-color: #34aaff;
    border-radius: 50%;
    position: absolute;
    top: -24px;
    right: 5%;
    z-index: 70;
    appearance: none;
    cursor: pointer;
}

.sp-oc{ border-left-color: rgba(255,25,153,1);}
.oc{ border-left-color: rgba(32,55,138,1);}
.orientation{ border-left-color: rgba(36,180,176,1);}
.info-session{ border-left-color: rgba(210,163,122,1);}
.guardians{ border-left-color: rgba(154,205,49,1);}
.sp-event{ border-left-color: rgba(96,32,132);}
.campus-tour{ border-left-color: rgba(253,110,109,1);}
.online-oc{ border-left-color: rgba(39,163,204,1);}
.online-info-session{ border-left-color: rgba(255,138,0,1);}
.training01{ border-left-color: rgba(255,130,1184,1);}
.training02{ border-left-color: rgba(98,98,98,1);}

.popup-trigger-close .menu-line:nth-of-type(1) { top: 16px; transform: translate(-50%, 8px) rotate(-45deg); }
.popup-trigger-close .menu-line:nth-of-type(2) { top: 32px; transform: translate(-50%, -8px) rotate(45deg); }

@media not all and (min-width:768px){
  
.event-popup_wrap.active {
    height: auto;
}
.event-popup_list ul li {
    font-size: 1.2rem;
}
.event-popup_list ul li div{
    max-width: 73%;
    /*padding: 0.5em 0 0.5em 0;*/
}

.event-popup_body {
    padding: 0 2%;
}
.event-popup {
    padding: 1%;
}
.event-popup_list {
    padding: 10% 0 2% 4%;
}

.event-popup_list .application-button {
    font-size: 1.1rem;
    margin-bottom: 2%;
}
.event-popup_wrap.active {
    height: auto;
}

.event-popup_wrap.active {
    transform: translate(-50%, 0);
    z-index: 1500;
}

.event-popup_wrap {
    width: 90%;
    background-color: #FFF;
    border: 1px solid #000;
    position: fixed;
    left: 50%;
    bottom: 45%;
    transform: translate(-50%, 110vh);
    transition: all .4s;
}

.event-popup_body {
    padding: 0 2%;
    border: 1px solid #CCC;
    display: grid;
    grid-template-columns: 10% 1fr;
    grid-column-gap: 4%;
}

.event-popup .date {
    text-align: center;
    line-height: 1.0;
}

.event-popup .date, .event-popup_list {
    padding: 2rem 0;
}

.calender_body .date, .event-popup .date {
    font-size: 2.0rem;
}

.event-popup_list {
    border-left: 1px solid #CCC;
    padding: 10% 0 2% 4%;
}


.event-popup_list ul li {
    font-size: 1.2rem;
}

.event-popup_list ul li {
    line-height: 1.4;
    padding-left: 4%;
    margin-bottom: 2%;
    border-left-style: solid;
    border-left-width: 2px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 2.8em;
}

.event-popup_list .application-button {
    font-size: 1.1rem;
    margin-bottom: 2%;
}

.event-popup_list .application-button {
    flex-basis: 6em;
    /* padding: 0.5em; */
    text-align: center;
    border: 1px solid #CCC;
    border-radius: 0.5rem;
}

.event-popup_list .application-button a {
    display: block;
    padding: 0.8em;
}

.event-popup .date{
    padding-top: 2rem;
}
.event-popup .date span {
    display: block;
}
/* 20241001 OC注釈対応 */
.popup-memo {
    font-size: 1.15rem;
    display: block;
    text-indent: -1em;
    margin-left: 1em;
    margin-top: 1em;
}
}
.popup-memo {
    display: block;
    margin-top: 1em;
}
/* 20241001 OC注釈対応 */


/*--- event-list
----------------------------**/

.event-list{ margin-bottom: calc(1.6rem + 10%);} /* 20241018追加 */

.event-list ul li a{
    height: 100%;
    background-color: var(--bg-site-main-cream);
    display: grid;
    grid-template-columns:25% 75%;
    grid-auto-rows: auto;
    position: relative;
}

.event-list ul li{ position: relative;}
.event-list ul li a:hover{ opacity: 1;}

.event-list ul li::before{
    content: " ";
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgb(254 223 7), rgb(245 131 215) 34%, rgb(131 181 247) 72%, rgb(75 194 224) 97%);
    position: absolute;
    top: 4px;
    left: 4px;
}

.event-list ul li dl{
    text-align: left;
    padding: 4%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.event-list ul li dt,
.event-list ul li dd{
    width: 100%;
}

.event-list ul li dt{
    line-height: 1.2;
    font-weight: bold;
    position: relative;
    padding-left: 1.5em;
    margin-bottom: 0.4em;
}

.event-list ul li dt::before,
.event-list ul li dt::after{
    content: "";
    position: absolute;
    display: block;;
}

.event-list ul li dt::before{
    width: 1em;
    height: 1em;
    background-color: #FFF;
    border: 1px solid #000;
    top: 1px;
    left: 0;
}

.event-list ul li dt::after{
    width: 6px;
    height: 6px;
    border-top: 1px solid #000;
    border-right: 1px solid #000;
    transform: rotate(45deg);
    top: 6px;
    left: .25em;
}

.event-list ul li dd{ line-height: 1.6;}
.event-list ul li dd .theme-sub-color{ text-decoration: underline;}

.category-title {
    width: 100%;
    font-size: 2.3rem;
    font-weight: bold;
    padding: 1%;
    margin: 5rem auto 2.5rem;
    text-align: center;
    position: relative;
    border: 1px solid #000;
    outline: solid 1px #000;
    outline-offset: 1px;
}

@media not all and (min-width:768px){

    .event-list{ padding-left: 1rem; padding-right: 1rem;}
    .event-list ul li{ margin-bottom: 1.6rem;}
    .event-list ul li dd{ font-size: 1.2rem;}
}

@media (min-width:768px){

    .event-list ul{
        display: grid;
        grid-template-columns: repeat(2 , 48.5%);
        grid-auto-rows: auto;
        grid-gap: 2.4rem 2.8rem;
    }

    .event-list ul li dt::after{ top: .8rem;}
    .event-list ul li dt{ font-size: 2.0rem;}
}

/*---------

flow-list

----------------------------**/

.event .flow-list{
    max-width: 94rem;
    position: relative;
    z-index: 10;
}

.flow-list::after{
    content: " ";
    width: 0.2rem;
    height: 100%;
    display: block;
    background-color: #00c6ff;
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    z-index: -1;
}

.flow-list:not(.application-flow) .flow-list_title{
    font-weight: bold;
    padding-bottom: .5em;
    margin-left: 0;
    margin-bottom: 1em;
    border-bottom: 2px solid #000;
}

.flow-list .special .flow-list_title{
    border: none;
}

.flow-list .special .flow-list_title::after{
    content: "";
    display: block;
    width: 100%;
    height: .2rem;
    background: linear-gradient(111deg, rgba(207,175,108,1) 0%, rgba(141,80,26,1) 14%, rgba(153,98,50,1) 23%, rgba(174,128,68,1) 39%, rgba(84,36,8,1) 52%, rgba(253,254,239,1) 64%, rgba(156,96,22,1) 74%, rgba(198,158,72,1) 85%, rgba(253,254,239,1) 91%, rgba(132,103,60,1) 100%);;
}

.flow-list_body{
    padding: 4%;
    margin-bottom: 1rem;
    background-color: #FFF;
    border-radius: .8rem;
    text-align: left;
}

.flow-list_body.special{
    background-color: #fffeb2;
    background: url(../images/bg_event-sp.png) repeat center top;
}

.flow-list_title span{
    color: #FFF;
    font-size: 2.0rem;
    font-weight: 400;
    padding: 0 .25em;
    margin-right: 0.5em;
    font-family:HelveticaNeue, nimbus-sans, sans-serif;
    background: linear-gradient(to right,  #65c4f3 0%, #df89bc 100%);
}

.flow-list .flow-list_item{ border: none;}

figure{
    margin: 0 auto 1rem;
    padding: 4px;
    box-shadow: 2px 2px 3px 1px rgb(0 0 0 / 10%);
    background-color: #FFF;
}


@media not all and (min-width:768px){

    .flow-list_title ~ p{ text-align: left;}
    .flow-list_body figure{ width: 80%;}
}

@media (min-width:768px){

    .flow-list_body{
        display: grid;
        grid-template-columns: repeat(2 ,48%);
        grid-auto-rows: 1fr;
        gap: 2% 4%;
    }
    
    .flow-list_title{ font-size: 2.5rem;}
    .flow-list_body{ margin-bottom: 2rem;}
    .heading-area{ align-self: center;}
}

/*---------

form-area

----------------------------**/


/*--- form-progress
----------------------------**/

.form-progress{
    max-width: 70%;
    margin: 0 auto 10%;
    position: relative;
}

.form-progress:before{
    content: "";
    display: block;
    width: 93%;
    height: .4rem;
    margin: 0 auto;
    background-color: rgba(210,210,210,1);
}

.form-progress ol{
    display: flex;
    justify-content: space-between;
}

.form-progress ol li{
    font-size: 1.1rem;
    color: rgba(210,210,210,1);
    margin-top: 2.4rem;
    position: relative;
}

.form-progress ol li:nth-of-type(2){
    margin-left:10%;
    margin-right:10%;
}

.form-progress ol li:before{
    content: "";
    width: 2.4rem;
    height: 2.4rem;
    display: block;
    border-radius: 50%;
    position: absolute;
    top: -3.6rem;
    left: 50%;
    transform:translateX(-50%);
    background-size: 72%;
    background-position: center 50%;
    background-color: rgba(210,210,210,1);
}

.form-progress ol li:nth-of-type(1)::before{ background-image: url(../images/icon/form-progress01.png); background-size: 55%;}
.form-progress ol li:nth-of-type(2)::before{ background-image: url(../images/icon/form-progress02.png); background-size: 55%;}
.form-progress ol li:nth-of-type(3)::before{ background-image: url(../images/icon/form-progress03.png); background-size: 55%;}


.form-progress:not(.confirm):not(.complete) ol li:nth-of-type(-n+1)::before{ background-color: #00a2e6;}
.form-progress:not(.confirm):not(.complete) ol li:nth-of-type(-n+1){ color: #00a2e6;}

.form-progress.confirm ol li:nth-of-type(-n+2):before{ background-color: #00a2e6;}
.form-progress.confirm ol li:nth-of-type(-n+2){ color: #00a2e6;}
.form-progress.confirm:before{ background: linear-gradient(90deg, rgba(0,162,230,1) 0%, rgba(0,162,230,1) 50%, rgba(210,210,210,1) 50%, rgba(210,210,210,1) 100%);}

.form-progress.complete:before{ background-color: #00a2e6;}
.form-progress.complete ol li:nth-of-type(-n+3){color: #00a2e6;}
.form-progress.complete ol li:nth-of-type(-n+3):before{ background-color: #00a2e6;}


@media not all and (min-width:768px){

    .form-progress ol li:before{
        width: 2.4rem;
        height: 2.4rem;
    }
}

@media (min-width:768px){
    
    .form-progress ol li:before{
        width: 3.2rem;
        height: 3.2rem;
        top: -4.2rem;
    }
}

/*--- form-progress
----------------------------**/

form{
    max-width: 88.4rem;
    margin-left: auto;
    margin-right: auto;
}

.form-item{
    margin-bottom: 2rem;
}

.label{
    font-weight: bold;
    margin-right: .5em;
}

.required,
.optional{
    font-size: 1.2rem;
    padding: 0 .5em;
    text-align: center;
    display: inline-block;
    color: #FFF;
}

.required{ background-color: #fc4472;}
.optional{ background-color: #00b7ec;}

label select,
label input,
label textarea{
    display: block;
    width: 100%;
    background-color: #FFF;
    border: 1px solid #b5b5b5;
    padding: .5em;
    margin-top: 0.5em;
}

label input[type="radio"],
label input[type="checkbox"]{
    display: inline-block;
    width: auto;
    margin-top: -.25em;
}

label input[type="radio"]{
    position: relative;
    margin-right: .5em;
}

label input[name="zip"]{
    width: 40%;
    max-width: 8em;
}

.formitem_kanji_input input {
    display: inline;
}
.formitem_kanji_input input[type="text"] {
    width: calc(50% - 2em);
}
.formitem_kanji_input input[type="text"]:nth-child(2) {
    float: right;
}

.contents3 .formitem_kana_input input {
    display: inline;
}
.contents3 .formitem_kana_input input[type="text"] {
    width: calc(50% - 2em);
}
.contents3 .formitem_kana_input input[type="text"]:nth-child(2) {
    float: right;
}

.contents3 .form-item .formitem_tel {
    display: flex;
    justify-content: flex-start;
    margin: 0;
}

.contents3 .form-item .formitem_tel > div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-grow: 1;
}

.contents3 .form-item .formitem_tel > div:after {
    content: "";
    height: 1px;
    width: 2em;
    line-height: 2em;
    text-align: center;
    background: #000;
    margin: 1em;
}

.contents3 .form-item .formitem_tel > div:last-child::after {
    content:none;
}

.contents3 .form-item input[type="tel"] {
    width: 30%;
}

.contents3 .form-item .formitem_tel input[type="tel"] {
    width: 100%;
}


/*--- agree
----------------------------**/

.agree .notes{ margin-bottom: 2em;}
.agree .notes a{ color: #27a3cc;}

.agree input{
    width: 1.5em;
    height: 1.5em;
    border: 1px solid #b5b5b5;
    transform: translateY(-2px);
}

.agree button,
.send button{
    font-size: 2rem;
    color: #fff;
    width: 90%;
    max-width: 32rem;
    display: block;
    padding: .8em;
    margin: 2.4rem auto;
    border: none;
    border-radius: 2em;
    background-color: #CCC;
    pointer-events: none;
}

.send button,
.agree input[type="checkbox"]:checked ~  button{
    background-color: #00a2e6;
    pointer-events: auto;
}

.to-back{
    display: block;
    margin: 0 auto 1em;
    text-align: center;
    text-decoration: underline;
}

.purpose-privacy{
    width: 100%;
    padding: 2%;
    margin-bottom: 5rem;
    background-color: #FFF;
    border: 1px solid #b5b5b5;
}

.purpose-privacy_title{
    text-align: center;
    margin-bottom: 2em;
}


@media not all and (min-width:768px){

    .purpose-privacy p{
        font-size: 1.2rem;
    }

    .label{
        flex: 0 0 auto;
        font-weight: bold;
    }

    .purpose-privacy{
        height: 15rem;
        overflow-y: scroll;
    }
}

@media (min-width:768px){

    form{
        padding-left: 4%;
        padding-right: 4%;
    }
}

/*--- contact-box
----------------------------**/

form .contact-box{
    text-align: center;
    border: none;
}

form .contact-box .phone-number a{
    justify-content: center;
}

/*---------

form-area

----------------------------**/

@media not all and (min-width:768px){

    .button-area.event-schedule{ row-gap: 2rem;}
    .button-area.event-schedule .btn-line a{ min-width: 32rem;}
    .t_title{ font-size: 1em !important;}
    .t_osusume, .t_nittei{ font-size: 1em !important;}
}

@media (min-width:768px){

    .button-area.event-schedule{
        grid-template-columns: repeat(2, 40rem);
        gap: 2.4rem;
    }
}

/*---------

latest event

----------------------------**/

.latest-event{ background: var(--bg-site-main-blue);}
.latest-event h3{ color: var(--theme-color);}
.latest-event .latest-event-swiper.swiper{ /* max-width: var(--width-min); */padding-bottom: 2.4rem;}

 

.latest-event-swiper a{
    background-color: #fff;
    display: block;
    height: 100%;
    border-radius: 0.6rem;
    padding: 5.4% 10% 4.8% 7.2%;
    position: relative;
    overflow: hidden;
}

.latest-event-swiper .schedule time{
    font-size: 2.0rem;
    line-height: 1.0;
}

.latest-event-swiper .schedule span.week{
    color: #FFF;
    text-align: center;
    display: inline-block;
    width: 2.2rem;
    height: 2.2rem;
    line-height: 1.5;
    margin-left: .25em;
    border-radius: 90%;
    background-color: #000;
}

.latest-event-swiper ul li .event-name{
    font-size: 1.4rem;
    line-height: 1.6;
    font-weight: 500;
    margin-top: .25em;
    color: var(--theme-color);
}

.latest-event-swiper ul li::before,
.latest-event-swiper ul li::after,
.latest-event-swiper ul li a::after{
    content: "";
    display: block;
    position: absolute;
}

.latest-event-swiper ul li::before,
.latest-event-swiper ul li::after{
    background-color: #FFF;
    right: .4rem;
    height: .1rem;
    z-index: 1;
}
.latest-event-swiper ul li::before{ width: 1rem; bottom: .6rem;}
.latest-event-swiper ul li::after { width: .4rem; bottom: .8rem; transform: rotate(45deg);}

.latest-event-swiper ul li a::after{
    bottom: 0;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 2.5rem 2.5rem;
    border-color: transparent transparent var(--theme-color) transparent;
}
.latest-event-swiper ul li:hover{
	opacity:0.75;
}

 

/* カレンダーアイコン グレイ表示 */
.before span,
.today span {
    font-family: initial;
}

.before .date,
.today .date {
   /* font-size: initial;*/
}

.grayicon span {
    background-color: #e3e3e3 !important;
    font-family: initial;
    font-size: 12px !important;
}

@media (max-width:767px){

.grayicon span {
    background-color: #e3e3e3 !important;
    font-family: initial;
    font-size: 2.0vw !important;
    transform: scale(0.9);
}

}

/* 特別イベント */
.t_toggle {
	display: none;
}

.bg_event{
	background-color: white;
	margin: 2em auto;
	padding-bottom: 1em;
}

.t_title{
    font-size: 1.4em;
    text-indent: -3.7em;
    padding-left: 3.7em;
    padding-bottom: .3em;
    padding-right: .7em;
    font-family: 'm-plus-rounded-1c', sans-serif;
    font-style: normal;
    font-weight: 500;
    color: #333;
}
.t_title::before{
    content: "";
    width: 2.2em;
    height: 1.7em;
    display: inline-block;
    background-image: url(../../event/images/c6/event_img_04.png);
    background-repeat: no-repeat;
    background-size: cover;
    vertical-align: text-bottom;
    margin: 0 .7em;
}
.t_label {		/*タイトル*/
    padding: 0.5em;
    display: block;
    color: #000;
    background: #FFE49D;
    border-radius: 0.5em;
    text-align: center;
    font-style: normal;
    font-weight: 500;
}
.t_label::before{		/*タイトル横の矢印*/
	content:"";
	width: 6px;
	height: 6px;
    border-top: 8px solid #df9918;
    border-right: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 8px solid transparent;
	
	-webkit-transform: rotate(0deg);
	position: absolute;
	top:calc( 50% - 3px );
	right: 20px;
	transform: rotate(0deg);
}
.t_label,
.t_content {
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	transform: translateZ(0);
	transition: all 0.3s;
}
.t_content {		/*本文*/
	/*height: auto;*/
	margin-bottom:10px;
	padding:0 0.5em;
    background: #FFFAE9;
	overflow: hidden;
    position: relative;
	height: 0;
}
.t_content::after{
    background: url(../../event/images/c6/event_img_05.png);
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    top: 0;
    background-position-x: right;
    z-index: -1;
    right: 0;
}
.t_img{
    margin-top: 1em;
    padding: 0.5em;
    background: #fff;
    box-shadow: 0 1px 25px 0 rgb(0 0 0 / 10%);
    margin: 1em;
}

.t_title:nth-of-type(n+2){
    padding-top: 1em;	
}


.t_toggle:checked + .t_label + .t_content {	/*開閉時*/
	height: auto;
	/*height: 0;*/
	/*padding:20px ;*/
	transition: all .3s;
}
.t_toggle:checked + .t_label::before {
	transform: rotate(180deg) !important;
    top: calc( 50% - 10px );
}

.t_osusume, .t_nittei{
    padding: 0.3em;
    display: block;
    color: #000;
    background-image:repeating-linear-gradient(to right,#FBF0C2,#7CBCCC);
    text-align: center;
	position: relative;
    display: inline-block;
    width: 100%;
	margin-top: 1em;
    border-radius: 2em;
    /*font-family: m-plus-rounded-1c, sans-serif;*/
    font-weight: 500;
    font-size: 1.2em;
}

.t_osusume::before{		/*タイトル横の矢印*/
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -15px;
  border: 15px solid transparent;
  border-top: 15px solid #BAD5C7;
}

.t_osusume_text{
    background: white;
    /*border: 1px solid gray;*/
    margin-top: 1em;
    padding: 0.5em;
	word-break: break-all;
}

.t_nittei_text{
	
    background: #EFF7F9;
    /*border: 1px solid gray;*/
    margin-top: 1em;
    padding: 1em;
    margin-bottom: 1em;
}

.t_nittei::before{		/*タイトル横の矢印*/
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -15px;
  border: 15px solid transparent;
  border-top: 15px solid #BAD5C7;
}

.t_content .button-area.event-schedule .btn-line a {
    min-width: 30rem;
}


@media (min-width:768px){

	.t_event{
		padding: 1em;
	}
	
	.t_img{
		float: left;
		width: 50%;
	}
	
	.t_text{
		margin: 1em;
	}
	
}

/*---------

c8（無料送迎バス）
hojo（交通費補助）

----------------------------**/
.label-theme-color {
    text-align: center;
}
.label-theme-color span {
    font-size: 1.5rem;
    line-height: 1.6;
    font-weight: 500;
    padding: 0 1em;
    color: #FFF;
    background-color: var(--heading-site-main-color);
    display: inline-block;
}
 
h4.notice{
    color: rgb(255, 92, 168);
    text-align: center;
    border: 1px solid rgb(255, 92, 168);
    background: #FFF;
    padding: .4em 0;
    font-size: 1.6rem;
}
.notice-color {color: rgb(255, 92, 168);}

.img-large {margin-top: 2rem;}

@media (min-width:768px){
    .img-large {
        width: 70%;
        margin: 2rem auto 2rem;
    }
}

/*--- bus-list
----------------------------**/
.bus-list{
    width: 100%;
    margin: 0 auto;
    border: 1px solid #000;
    background: #FFF;
    margin-top: 1em;
}

.bus-list dl:not(:last-child) { border-bottom: 1px solid #000;}

.bus-list dt,
.bus-list dd{ padding: 3.2%;}
.bus-list dt{ padding-right: 4rem;}

.bus-list dt p,
.bus-list dd p{ margin-bottom: 0;}
.bus-list dd p:not(:last-child){ margin-bottom: 1em;}

.bus-list dt{ font-weight: normal;}

.bus-list dd{
    display: none;
    background-color:  var(--bg-site-main-cream);
}

.bus-list dl:last-child dd{ border-radius: 0 0 1rem 1rem;}

@media (min-width:768px){
    .bus-list dt,
    .bus-list dd{ padding: 1.5%;}
    
    .bus-list .button-area.event-schedule {
        grid-template-columns: repeat(2, 34rem);
    }
    .bus-list .button-area .btn-line a {
        min-width: 34rem;
    }
}

@media (min-width:1024px){
    .bus-list .button-area.event-schedule {
        grid-template-columns: repeat(2, 40rem);
    }
    .bus-list .button-area .btn-line a {
        min-width: 40rem;
    }
}

/*--- bus-timetable
----------------------------**/
.bus-timetable table {background: #FFF; font-size: 1.4rem;}

.bus-timetable table th{ font-weight: normal;}
.bus-timetable table thead{ font-size: 1.2rem; background: var(--bg-site-main-blue);}

.bus-timetable table th,
.bus-timetable table td{
    padding: .5em ;
    text-align: center;
    vertical-align: middle;
}
.bus-timetable table tbody th + td{text-align: left;}

.bus-timetable table thead th:not(:last-child),
.bus-timetable table tbody th:not(:last-child),
.bus-timetable table tbody td:not(:last-child){ border-right: 1px dotted #000;}

.bus-timetable table tbody tr:not(:last-child) th,
.bus-timetable table tbody tr:not(:last-child) td{ border-bottom: 1px dotted #000;}

.bus-timetable table thead{
    border-top: 1px solid #000;
}
.bus-timetable table tbody{
    border-top: 1px dotted #000;
    border-bottom: 1px solid #000;
}

.bus-timetable table tr th:nth-child(1) {width: 22%;}
.bus-timetable table tr th:nth-child(2), .bus-timetable table tr td:nth-child(2) {width: 40%;}
.bus-timetable table tr th:nth-child(3), .bus-timetable table tr td:nth-child(3) {width: 19%;}
.bus-timetable table tr th:nth-child(4), .bus-timetable table tr td:nth-child(4) {width: 19%;}

/*--- subsidy
----------------------------**/
.subsidy-nav{
    margin-top: 1em;
}

.subsidy-nav li{
    display: inline-block;
}

.subsidy-nav li a{
    display: block;
    position: relative;
    padding-right: 1.4em;
    margin-right: .8em;
}

.subsidy-nav li a:after{
    content: "";
    display: block;
    position: absolute;
    width: .8rem;
    height: .8rem;
    border-left: .2rem solid var(--heading-site-main-color);
    border-bottom: .2rem solid var(--heading-site-main-color);
    transform: rotate(-45deg);
    top: 1rem;
    right: .7rem;
}

.subsidy-list {
    border: 1px solid #bfbfbf;
    margin-top: 1em;
}

.subsidy-list dt {
    border-bottom: 1px solid #bfbfbf; 
    padding: .5em;
    background: #ededed; 
    font-weight: 700;
    text-align: center;
}
.subsidy-list dd { border-bottom: 1px solid #bfbfbf;padding: 1.2em 1em 0;}
.subsidy-list dl:last-child dd { border-bottom: none;}

.subsidy-list li {margin-bottom: 1em;}

.subsidy-list .site-theme-color.square {margin-top: 1rem;}
.subsidy-list .site-theme-color.square span{
    display: inline-block;
    min-width: 1.4em;
    text-align: center;
    line-height: 1.2;
    margin-right: 0.4em;
    border: 2px solid var(--heading-site-main-color);
    transform: translateY(-.2rem);
    background-color: #FFF;
}

/*--- supplement
----------------------------**/
.supplement {
    margin-top: 2em;
    padding: 4%;
    background-color: #fffeb2;
    border-radius: 20px;
}

.supplement h3 .diagonal-line {
    position: relative;
    white-space: nowrap;
    text-align: center;
}
.supplement h3 .diagonal-line::before,
.supplement h3 .diagonal-line::after {
    content: "";
    position: absolute; 
    top: 0px;
    display: block;
    width: 1px ;
    height: 100%;
    background: #000;
}
.supplement h3 .diagonal-line::before { left: -1rem; transform: rotate( -30deg ) }
.supplement h3 .diagonal-line::after { right: -1rem; transform: rotate( 30deg ) }

.supplement h3 .bold {font-weight: 700;}
.supplement .tel a::before {
    content: "";
    background-image: url("../images/icon/free-dial.png");
    display: inline-block;
    width: 2.4rem;
    height: 1.4rem;
    margin-right: .3rem;
    background-repeat: no-repeat;
    background-size: contain;
    transform: translateY(0.1rem);
}

.supplement p small {font-size: 1.1rem;}

/*---------

banner-list

----------------------------**/
.section-wrap ~ .banner-list {
    padding-top: 2rem;
    padding-bottom: 0;
}

/*---------

kv-btn

----------------------------**/
.event-top {
    display: block;
}	
.event-top .kv-body{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}
.event-index {
    width: 33%;
    max-width: 300px;
    margin: 10% auto 0 auto;
    margin-top: min(11%, 45px); /*h1位置(sp)*/
    font-size: 0;
}
.kv-wrap h1.event-index img {
    max-height: none;
    transform: none;
}
.event-btn {
    text-align: center;
    width: 55.6%;
    max-width: 300px;
    margin: 0 auto 20px auto;
}
.event-btn img:hover,
.event-btn img:active {
    opacity: .75;
}

@media (min-width: 769px) {
.event-index {
    margin: 55px auto 0 auto; /*h1位置(pc)*/
   }
}
}


.grayicon span .etc_event{
    color:black ;
    background:white !important;
}
.today span .etc_event{
    color:black ;
    background-color: var(--bg-site-main-cream)!important; 
}

.etc_event{
    color:rgb(78, 78, 78) ;
}

/* -------------------------------------
イベント項目13番目以降～非表示対応
----------------------------------------*/

#see_more  {
    border: black 1px solid;
    text-align: center;
    background-color: white;
    filter: drop-shadow(5px 5px 10px rgba(0,0,0,0.3));
    cursor:pointer;
    width:80%;
    float: right;
    margin:auto;
    z-index: 10;
}

#see_more  {
    position: absolute;
    bottom: 10px;
    width: 30%;
    left: 35%;
}

#see_more a::before  {
    content: '';
  width: 7px;
  height: 7px;
  border: 0;
  border-bottom: 1px solid #000;
  border-right: 1px solid #000;
  transform: rotate(45deg);
  position: absolute;
  top: -0.3rem;
  right: 2rem;
  bottom: 0;
  margin: auto;
}

@media not (min-width: 769px) {
    #see_more  {
    width: 50%;
    left: 25vw;
    bottom: 50px;
   }
}

/* -------------------------------------
イベント詳細から選ぶ　アイコン対応
----------------------------------------*/

@media not (min-width: 769px) {
    .event-infoicon01{
        font-size: 10px !important;
    }
    
    .event-infoicon02{
        font-size: 10px !important;
    }
    
    .event-infoicon03{
        font-size: 10px !important;
    }

    .event-infoitext{
        font-size: 12px !important;
    }
}


.event-infoicon{
    margin-bottom:10px;
    line-height: 2.3rem;
}

.event-infoicon01{
    background-color:#00B050;
    padding:3px 5px 3px 5px;
    color:#fff;
    margin-right: 3px;
    font-size: 12px;
}

.event-infoicon02{
    background-color:#E37D08;
    padding:3px 5px 3px 5px;
    color:#fff;
    margin-right: 3px;
    font-size: 12px;
}

.event-infoicon03{
    background-color:#2F5597;
    padding:3px 5px 3px 5px;
    color:#fff;
    margin-right: 3px;
    font-size: 12px;
}

.event-infoitext{
    font-size: 14px;
  }

#events-calendar .swiper-autoheight .swiper-wrapper {
    margin-bottom: -1px;
}

/* --------------------------------------
20240820
スクロール時の矢印追加
--------------------------------------*/
.latest-event-swiper.swiper-initialized .swiper-button-prev,
.latest-event-swiper.swiper-initialized .swiper-button-next {
    width: 44px;
    height: 44px;
    -webkit-tap-highlight-color:rgba(0,0,0,0);
    border-radius: 50%;
    /* border: 1px solid #111; */
    background-color: #fff;
    transform:translateY(-10px);
    box-shadow: 0px 0px 12px 0px rgba(133 133 133 / 90%);
}

.latest-event-swiper.swiper-initialized .swiper-button-prev::after,
.latest-event-swiper.swiper-initialized .swiper-button-next::after {
    content: "";
    position: absolute;
    top: 0;
}
.latest-event-swiper.swiper-initialized .swiper-button-prev::after {
    width: 20px;
    height: 20px;
    left: 16px;
    top: 13px;
    border-bottom: 2px solid #8f8f8f;
    border-left: 2px solid #8f8f8f;
    transform: translateY(-2px) rotate(45deg);
}

.latest-event-swiper.swiper-initialized .swiper-button-next::after {
    width: 20px;
    height: 20px;
    right: 16px;
    top: 13px;
    border-top: 2px solid #8f8f8f;
    border-right: 2px solid #8f8f8f;
    transform:translateY(-2px) rotate(45deg);
}

.swiper:not(.swiper-initialized) .swiper-button-prev,
.swiper:not(.swiper-initialized) .swiper-button-next {
    visibility: hidden;
}

/* 折り返しの非表示処理 */
.swiper-button-next.swiper-button-disabled,
.swiper-button-prev.swiper-button-disabled {
    visibility: hidden;
    cursor: auto;
    pointer-events: none
}

@media not all and (min-width: 768px) {
    .latest-event-swiper.swiper-initialized .swiper-button-prev {
        left: -2%;
    }
    .latest-event-swiper.swiper-initialized .swiper-button-next::after {
        width: 12px;
        height: 12px;
        right: 13px;
    }
    .latest-event-swiper.swiper-initialized .swiper-button-prev::after {
        width: 12px;
        height: 12px;
        left: 13px;
    }
    .latest-event-swiper.swiper-initialized .swiper-button-prev,
    .latest-event-swiper.swiper-initialized .swiper-button-next {
        width: 34px;
        height: 34px;
}
}

@media (min-width: 768px) {
    .latest-event-swiper .swiper-button-prev {
        left: -1%;
    }
    .latest-event-swiper .swiper-button-next {
        right: -1%;
    }
    .latest-event-swiper.swiper-initialized .swiper-button-prev,
    .latest-event-swiper.swiper-initialized .swiper-button-next {
        top: 10.5rem;
    }
}

@media not all and (min-width:1100px){
    .latest-event-swiper .swiper-button-next {
        right: 2%;
    }
    .latest-event-swiper .swiper-button-prev {
        left: 2%;
    }
}

/*-------------------
202410 バナーエリア
--------------------*/

.banner-list-flex{
	max-width: var(--width);
	display:flex;
	flex-wrap:wrap;
	justify-content:space-around;
	padding-top: 2rem;
    padding-bottom: 0;
	margin:auto;
}

.banner-list-flex a{
	width:46%;
	margin-top:20px;
}

@media (max-width: 768px) {
	.banner-list-flex a{
		width:95%;
	}
	.banner-list-flex a:first-child{
		margin-top:0px;
	}
}

.normalday {
    padding-bottom: 2px;
}

@media (max-width: 768px) {
    .normalday {
        padding-bottom: 0.5px;
    }
}

.calender_body .date-item .holiday {
    color: #ff5580 !important;
}
.event-popup .date .normalday {
    color: #000;
}

.event-popup .date .satday {
    color: #27a3cc;
}

.event-popup .date .sunday {
    color: #ff5580;
}

.event-popup .date .holiday {
    color: #ff5580;
}

.wide_icon {
    position: relative;
}

@media (min-width:768px) {
    .calender_body .date-item:nth-of-type(7n) {
        padding-left: 2%;
        padding-right: 2%;
        
    }
    .calender_body .date-item:nth-of-type(7n+1) {
        padding-left: 2%;
        padding-right: 2%;
    }
}
@media (max-width:768px) {

    .calender_body .date-item:nth-of-type(7n) {
        padding-left: 1%;
        padding-right: 1%;
        
    }
    .calender_body .date-item:nth-of-type(7n+1) {
        padding-left: 1%;
        padding-right: 1%;
    }
}

/*-------------------
202502 OCのポイント
--------------------*/
.oc-point{
	background: #d9f3ff;
	margin-top: 80px
}
.point-box{
	margin: 30px auto;
	display:flex;
	justify-content:center;
}
.point-box-text {
    position: relative;
    margin-top: 1em;
    padding: 1.8em 1.5em 1em 1.5em;
    border: 2px solid #2589d0;
	width:23%;
	background:#fff;
    margin-right: 20px;
}
.point-box-text > div {
    position: absolute;
    top: -1.15em;
    left: -.5em;
    padding: .4em 1.4em;
    border-radius: 25px;
    background-color: #2589d0;
    color: #fff;
    font-size: .9em;
}
.point-box-text > div::before {
    position: absolute;
    bottom: -7px;
    left: 50%;
    transform: translateX(-50%);
    width: 16px;
    height: 8px;
    background-color: #2589d0;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    content: '';
}
.point-box-text p {
    margin: 0;
}
@media (max-width: 768px) {
	.point-box{
		display:block;
	}
	.point-box-text{
		width:100%;
		margin-top:30px;
	}
}

/*---------
250806_コース対象追加
----------------------------**/
.event-message{ 
    border-bottom: 3px solid;
    border-top: 3px solid;
    padding: 1rem;
    color: #FDFB3F;
    background-color: #004190;

}

.event-message p{ 
    font-size: 1.8em;
    font-weight: bold;
    text-align: center;
    letter-spacing: -1.7px;
}
/* ---------------
20250902 OCポップアップ表示位置調整
------------------------------- */

.pop_event_name{
    font-weight: bold;
    line-height: 1.2;    
}
.pop_event_time{
    margin-top: 0.3em;
}

.event-popup_wrap{
    bottom: unset;
    top: 50%;
}
.event-popup_wrap.active{
    transform: translate(-50%, -40%);
}
.event-popup{
        overflow-y: auto;
        max-height: 80vh;
    }
@media (min-width:768px){
    .event-popup_wrap.active{
        bottom: unset;
        transform: translate(-50%, -45%);
    }
    .event-popup{
        max-height: 85vh;
    }
}


/*-----------------
250917 当日の流れ　画像位置の調整
--------------------------*/
.swiper-initialized .flow-list{
	max-width:100%;
}

/* =========================
  20251210 hover追加対応
============================*/
.calender_head .pre:hover,
.calender_head .next:hover,
.calender-foot .pre:hover,
.calender-foot .next:hover{
	opacity:0.6;
}
.event #category_list li:hover,
.event #workshop_list li:hover{
	opacity:0.75;
}
.flow-list_sanka a:hover{
	opacity:0.75;
}
.application-button a:hover{
	opacity:0.6;
}

/* ==========================
  フローティングバナー（追従バナー）
========================== */
.bl_floatingBanner {
    position: fixed;
    bottom: 35px;
    right: 80px;
    width: 290px;
    max-width: 100%;
    z-index: 55;
  }

  @media (max-width:960px){
    .bl_floatingBanner {
        position: fixed;
        bottom: 60px;
        right: 5px;
        width: 200px;
        max-width: 100%;
        z-index: 55;
      }
    }

  .bl_floatingBanner.js001_close {
    display: none;
  }
  .bl_floatingBanner_img {
    display: block;
    transition: 0.3s;
  }
  .bl_floatingBanner_img:hover {
    opacity: 0.6;
  }
  .bl_floatingBanner_close {
    width: 86px;
    height: 23px;
    position: absolute;
    right: 0;
    top: -23px;
    cursor: pointer;
    background-color: #555555;
    clip-path: polygon(15% 0, 100% 0, 100% 100%, 0 100%);
  }
  .bl_floatingBanner_close span:nth-of-type(1) {
    position: absolute;
    top: 2px;
    right: 17px;
    font-weight: bold;
    font-size: 1.4em;
    color: #fff;
  }
  /*
  .bl_floatingBanner_close span:nth-of-type(2) {
    position: absolute;
    top: 7px;
    right: 13px;
    width: 3px;
    height: 15px;
    background-color: #fff;
    transform: rotate(45deg);
  }
  */

  .slideinRight {
    animation: slideinRight 3s infinite;
  }
  
  @keyframes slideinRight {
    0% {
      transform: translateX(-50px);
    }
    100% {
      transform: translateX(0);
    }
  }

  .fadeRight{
    animation-name:fadeRightAnime;
    animation-duration:2.0s;
    animation-fill-mode:forwards;
    opacity:0;
    }
    
    @keyframes fadeRightAnime{
      from {
        opacity: 0;
      transform: translateX(100px);
      }
    
      to {
        opacity: 1;
      transform: translateX(0);
      }
    }

/* その場で */
.fadeIn{
    animation-name:fadeInAnime;
    animation-duration:2.0s;
    animation-fill-mode:forwards;
    opacity:0;
    }
    
    @keyframes fadeInAnime{
      from {
        opacity: 0;
      }
    
      to {
        opacity: 1;
      }
    }

.slidein {
    opacity: 0;
    transform: translate(0,0);
    transition: all 1.0s;
    &.slidein-left{
        transform: translate(-100%,0);
    }
    &.slidein-right{
        transform: translate(100%,0);
    }
    &.slidein-up{
        transform: translate(0,-100%);
    }
    &.slidein-bottom{
        transform: translate(0,100%);
    }
    &.scrollin{
    transform: translate(0, 0)!important;
    opacity: 1!important;
    }
}

.slidein02 {
    opacity: 0;
    transform: translate(0,0);
    transition: all 1.0s;
    &.slidein-left{
        transform: translate(-100%,0);
    }
    &.slidein-right{
        transform: translate(100%,0);
    }
    &.slidein-up{
        transform: translate(0,-100%);
    }
    &.slidein-bottom{
        transform: translate(0,100%);
    }
    &.scrollin{
    transform: translate(0, 0)!important;
    opacity: 1!important;
    }
}

@media (max-width: 960px) {
    .bl_floatingBanner {
        position: fixed;
        top: 280px;
        /* right: 24px; */
        right: 2px;
        width: 170px;
        max-width: 100%;
        z-index: 55;
    }
}

.bl_floatingBanner_close {
    width: 30px;
    height: 30px;
    position: absolute;
    /* right: -17px;
    top: -15px; */
    right: 10px;
    top: -20px;
    cursor: pointer;
    background-color: #127FF2;
    border-radius: 30px;
  }
  .bl_floatingBanner_close span:nth-of-type(1) {
    position: absolute;
    top: 13px;
    right: 7px;
    width: 15px;
    height: 3px;
    background-color: #fff;
    transform: rotate(45deg);
  }
  .bl_floatingBanner_close span:nth-of-type(2) {
    position: absolute;
    top: 7px;
    right: 13px;
    width: 3px;
    height: 15px;
    background-color: #fff;
    transform: rotate(45deg);
  }
  .bl_floatingBanner_close {
    clip-path: none;
  }

/*-------------------
 202507　交通費補助modal
-----------------------*/
.modal-wrapper {
  z-index: 1100;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 30px 10px;
  text-align: center
}
.modal-wrapper:not(:target) {
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s, visibility .3s;
}
.modal-wrapper:target {
  opacity: 1;
  visibility: visible;
  transition: opacity .4s, visibility .4s;
}
.modal-wrapper::after {
  display: inline-block;
  height: 100%;
  margin-left: -.05em;
  vertical-align: middle;
  content: "";
}
.modal-wrapper .modal-window {
  box-sizing: border-box;
  display: inline-block;
  z-index: 20;
  position: relative;
  width: 90%;
  max-width: 900px;
  padding: 20px 20px 15px;
  border-radius: 2px;
  background: #fff;
  box-shadow: 0 0 30px rgba(0, 0, 0, .6);
  vertical-align: middle
}
.modal-wrapper .modal-window .modal-content {
  max-height: 87vh;
  overflow-y: auto;
}
.modal-content p{
    text-align: left;
    width: 85%;
    margin: 0 auto;
}
.modal-overlay {
  z-index: 10;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgb(255 255 255 / 80%);
}
.modal-wrapper .modal-close {
  z-index: 1111;
  position: absolute;
  top: -3%;
  right: -4%;
  /* width: 35px; */
  color: #fff;
  font-size: 20px;
  font-weight: bold;
  line-height: 35px;
  text-align: center;
  text-decoration: none;
  text-indent: 0;
  background: #1aabb0;
  padding: 8px 16px;
  border-radius: 50px;
}
.modal-wrapper .modal-close:hover {
  color: #2b2e38 !important
}
.modal-h2{
	font-size:3.0rem;
	font-weight:600;
	position: relative;
	padding-bottom:30px;
    padding-top: 50px;
}
.modal-h2 span{
    font-size: 2.3rem;
}
.modal-h2::after{
    content: "";
    display: block;
    width: 5rem;
    height: .75rem;
    position: absolute;
    top: 82%;
    left: 50%;
    transform: translateX(-50%);
    background: url(../images/h2-line_sp.png) no-repeat center top;
    background-size: contain;
}
.block_head >.modal-h2{
	padding-top:20px;
}
.modal-content .notes-list li{
	margin-bottom:0.4em;
}
.subsidy-list ol{
    font-size: 1.6rem;
    text-align: left;
    line-height: 2.0;
}
.subsidy-list dt{
    font-size: 1.6rem;
    line-height: 2.0;
}
@media (max-width: 768px) {
	.modal-h2{
		font-size:2.6rem;
	}
	.modal-h2 span{
		font-size: 2.0rem;
	}
	.modal-content p{
		width:95%
	}
    .modal-content .notes-list li{
		font-size: 1.4rem;
	}
}

.modal-content ul.disc{
	text-align:left;
	font-size:1.6rem;
}
.modal-content .supplement p.label-theme-color{
	text-align:center;
}
.modal-content .supplement .notes-list{
	text-align:left;
}
.modal-content .supplement p{
	width:100%;
}
.modal-content .subsidy-nav{
	text-align: left;
}
.modal-content .subsidy-nav li{
	font-size:1.6rem;
}
.modal-content .subsidy-nav li a:after{
	top:0.7rem;
}
/*---------
250827_交通費補助ボタン変更
----------------------------**/

.event-btn span {
    background: rgb(255 255 255 / 80%);
    padding: 42px 6px 4px 6px;
    border-radius: 15px;
}

@media (min-width: 769px) {
    .event-btn span {
        background: rgb(255 255 255 / 80%);
        padding: 65px 6px 4px 6px;
        border-radius: 15px;
    }
}