@charset "UTF-8";


main { margin-bottom: 0; }
.w1360 { max-width: 1360px; margin-right: auto; margin-left: auto; }


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

    header

------------------------------------------------------*/
/* .detail-menu { display: none; } */

@media (min-width: 768px) {
    header { width: 24.74%; max-width: 475px; min-width: 270px; height: 100%; max-height: 655px; padding-left: 0; /*padding-left: 210px;*/ /*padding-left: 13.125%;*/ /*padding-top: 40px; padding-bottom: 60px;*/ position: absolute; }
    header > div { background: #665EC0; padding-top: 40px; padding-bottom: 60px; display: -webkit-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; -webkit-box-align: end; align-items: flex-end; }
    header .head-logo { padding-right: 25px; }
    header .head-logo a { display: block; max-width: 204px; text-align: center; margin-left: 30px; }
    header .head-logo img { margin-bottom: 15px; margin-right: 0; }
    header .head-nav ul { display: none; }
    header .head-search { background: none; padding: 10px 25px 0 25px; width: auto; }
    
    header .gloval-nav { position: relative; padding-left: 0; top: 0; right: 0; }

    header .detail-menu { min-height: 655px; top: -100px; padding-top: 185px; }
    header .l_col-menu > li:nth-of-type(3) .detail-menu { padding-top: 165px; }
}

@media (max-width: 767px) {
}


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

	main visual

------------------------------------------------------*/
#main-visual { position: relative; }
#main-visual > div.l_col-2 { max-width: 1056px; }
#main-visual > div h1 { width: 100%; }
#main-visual > div .main-visual-nav { display: -webkit-box; display: flex; }
#main-visual > div .main-visual-nav li {}
#main-visual > div .main-visual-nav li a { text-align: center; display: block; height: 100%; text-decoration: none; color: #665EC0; font-weight: bold; display: -webkit-box; display: flex; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center; }
#main-visual > div .main-visual-nav li.bg-hover-a a:hover { background: rgba(111, 181, 204, 0.5); }
#main-visual > div .main-visual-nav li.bg-hover-b a:hover { background: rgba(111, 181, 204, 0.5); }
#main-visual > div .main-visual-nav li.bg-hover-c a:hover { background: rgba(111, 181, 204, 0.5); }
#main-visual > div .main-visual-nav li.bg-hover-d a:hover { background: rgba(111, 181, 204, 0.5); }

#main-visual > div .main-visual-slider .slick-slide img { width: 100%; height: 100%; object-fit: cover; }

#main-visual .main-visual-bg-slider { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; }
#main-visual .main-visual-bg-slider .slick-list { height: 100%; }
#main-visual .main-visual-bg-slider .slick-track { height: 100%; }
#main-visual .main-visual-bg-slider .slick-slide { /*background: linear-gradient(to right, #fff, #FFCCDF);*/ }
#main-visual .main-visual-bg-slider .slick-slide.slide-1 { background: linear-gradient(to left, #FFCCDF 30%, #FFF); }
#main-visual .main-visual-bg-slider .slick-slide.slide-2 { background: linear-gradient(to left, #9EC7E8 30%, #FFCCDF); }
#main-visual .main-visual-bg-slider .slick-slide.slide-3 { background: linear-gradient(to right, #9EC7E8 22%, #A49EDA); }
#main-visual .main-visual-bg-slider .slick-slide.slide-4 { background: linear-gradient(to right, #A99EDA, #fff); }
/* #main-visual .main-visual-bg-slider .slick-slide:nth-of-type(5) {} */
/* #main-visual .main-visual-bg-slider .slick-slide:nth-of-type(6) {} */
/* #main-visual .main-visual-bg-slider .slick-slide:nth-of-type(7) {} */

@media (min-width: 768px) {
    #main-visual { /*background: linear-gradient(to right, #fff, #FFCCDF);*/ width: 75.27%; min-height: 655px; margin-left: auto; padding: 60px 3.47% 45px 3.47%; }
    #main-visual > div.l_col-2 > div:first-of-type { width: auto; }
    #main-visual > div.l_col-2 > div:last-of-type { width: calc(100% - 362px - 6.93%); max-width: 590px; }
    #main-visual > div h1 { max-width: 364px; }
    #main-visual > div .main-visual-nav { border: 1px solid #fff; margin-left: 84px; margin-top: 105px; max-width: 278px; height: 255px; flex-wrap: wrap; }
    #main-visual > div .main-visual-nav li { width: 50%; height: 50%; border: 1px solid #fff; }
    #main-visual > div .main-visual-nav li a { transition: background 0.4s; background: rgba(255,255,255,0.5); letter-spacing: 0.1em; }
    
    #main-visual > div .main-visual-slider { margin-bottom: 0; }
    #main-visual > div .main-visual-slider .slick-dots { bottom: -40px;}
    #main-visual > div .main-visual-slider .slick-dots li { width: 50px; height: 10px; margin: 0;}
    #main-visual > div .main-visual-slider .slick-dots li button { padding: 0; width: 100%; height: 100%;}
    #main-visual > div .main-visual-slider .slick-dots li button::before { content: ""; background-color: #B8D6F9; height: 10px; width: 100%; opacity: 1; }
    #main-visual > div .main-visual-slider .slick-dots li.slick-active button:before { background-color: #6FB5CC;}
}

@media (min-width: 1281px) {
    #main-visual > div.l_col-2 > div:first-of-type { padding-top: 40px; }
}

@media (max-width: 1280px) and (min-width: 768px) {
    #main-visual { padding: 30px 3.47% 45px 3.47%; }
    #main-visual > div.l_col-2 { display: block; text-align: center; }
    #main-visual > div.l_col-2 > div:last-of-type { width: auto; margin: 0 auto; }
    #main-visual > div h1 { max-width: 215px; margin: 0 auto 30px; }
    #main-visual > div .main-visual-nav { display: none; }
}

@media (max-width: 767px) {
    #main-visual { padding-bottom: 105px; }
    #main-visual > div h1 { max-width: 182px; margin: 25px auto 25px; -webkit-filter: drop-shadow(0 0 15px #fff); filter: drop-shadow(0 0 15px #fff); }
    #main-visual > div .main-visual-nav { position: absolute; bottom: 0; left: 0; right: 0; margin: 0 auto; background: #B8D6F9; padding: 10px 15px; }
    #main-visual > div .main-visual-nav li { width: calc(100% / 4); height: 85px; border-top: 2px solid #fff; border-bottom: 2px solid #fff; border-right: 2px solid #fff; }
    #main-visual > div .main-visual-nav li:first-of-type { border-left: 2px solid #fff; }
    #main-visual > div .main-visual-nav li a { font-size: 1.2rem; }

    #main-visual > div .main-visual-slider { margin-bottom: 20px; }
    #main-visual > div .main-visual-slider .slick-dots { bottom: -20px; height: 20px; font-size: 0; }
    #main-visual > div .main-visual-slider .slick-dots li { margin: 0; }
    #main-visual > div .main-visual-slider .slick-dots li button { font-size: auto; }
    #main-visual > div .main-visual-slider .slick-dots li button:before { opacity: 1; background: #B8D6F9; width: 7px; height: 7px; font-size: 0; border-radius: 50%; content: ''; line-height: 0; position: relative; display: block; }
    #main-visual > div .main-visual-slider .slick-dots .slick-active button:before { background: #6FB5CC; }
}


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

	

------------------------------------------------------*/
#site-nav { padding: 20px; }
#site-nav ul {}
#site-nav ul li { width: calc((100% / 3) - 18px ); max-width: 430px; }
#site-nav ul li a { display: block; text-align: center; text-decoration: none; font-weight: bold; color: #665EC0; font-size: clamp(1.7rem, 1.55vw, 2.4rem); letter-spacing: 0.1em; background: #B8D6F9; border-bottom: 5px solid; padding: 16px 5px; }
#site-nav ul li a span { position: relative; }
#site-nav ul li a span svg { fill: #665EC0; position: absolute; top: 50%; left: 0; transform: translateY(-50%); }
#site-nav ul li.request a span { padding-left: 60px; }
#site-nav ul li.application a span { padding-left: 53px; }
#site-nav ul li.event a span { padding-left: 52px; }
#site-nav ul li.request a span svg { width: 40px; height: 26px; }
#site-nav ul li.application a span svg { width: 33px; height: 31px; }
#site-nav ul li.event a span svg { width: 32px; height: 30px; }
#site-nav ul li a:hover { color: #fff; border-color: #5292A6; background: #6FB5CC; }
#site-nav ul li a:hover span svg { fill: #fff; }

@media (min-width: 768px) {
    #site-nav ul li a { transition: all 0.4s; }
    #site-nav ul li a span svg { transition: all 0.4s; }
}

@media (min-width: 768px) and (max-width: 1100px) {
    #site-nav ul li.request a span { padding-left: 43px; }
    #site-nav ul li.application a span { padding-left: 36px; }
    #site-nav ul li.event a span { padding-left: 36px; }
    #site-nav ul li.request a span svg { width: 33px; height: 26px; }
    #site-nav ul li.application a span svg { width: 26px; height: 31px; }
    #site-nav ul li.event a span svg { width: 26px; height: 30px; }
}

@media (max-width: 767px) {
}


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

	

------------------------------------------------------*/
#emphasize-slider { background: #B8D6F9; }
#emphasize-slider .emphasize-slider-contents {}
#emphasize-slider .emphasize-slider-contents .slick-slide { margin: 0 7px; }
#emphasize-slider .emphasize-slider-contents a { text-decoration: none; color: #393472; }
#emphasize-slider .emphasize-slider-contents a p.title { font-size: 1.4rem; text-align: center; }

@media (min-width: 768px) {
    #emphasize-slider { padding: 30px 0 25px; margin-bottom: 50px; }
    #emphasize-slider .emphasize-slider-contents a { transition: all 0.4s; }
    #emphasize-slider .emphasize-slider-contents a:hover { opacity: 0.8; }
    #emphasize-slider .emphasize-slider-contents a figure { margin-bottom: 20px; }
}

@media (max-width: 767px) {
    #emphasize-slider { padding: 0 0 20px; }
    #emphasize-slider .emphasize-slider-contents { margin: 0; }
    #emphasize-slider .emphasize-slider-contents a figure { margin-bottom: 0; }
    #emphasize-slider .emphasize-slider-contents a p.title { display: none; }
    #emphasize-slider .emphasize-slider-contents .slick-dots { bottom: -20px; height: 20px; font-size: 0; }
    #emphasize-slider .emphasize-slider-contents .slick-dots li { margin: 0; }
    #emphasize-slider .emphasize-slider-contents .slick-dots li button:before { content: ''; opacity: 1; background: #fff; width: 7px; height: 7px; border-radius: 50%; position: relative; display: block; }
    #emphasize-slider .emphasize-slider-contents .slick-dots .slick-active button:before { background: #6FB5CC; }
}


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

	

------------------------------------------------------*/
#event {}
#event .container { max-width: 1460px; }
#event .title { text-align: center; font-weight: bold; color: #665EC0; }
#event .event-slider-contents { position: relative; }
#event .event-slider-contents .slick-track {}
#event .event-slider-contents .slick-slide { margin: 0 5px; max-width: 264px; }
#event .event-slider-contents a { text-decoration: none; }
#event .event-slider-contents a .thumb {}
#event .event-slider-contents a .thumb figure { margin-bottom: 0; overflow: hidden; }
#event .event-slider-contents a .thumb figure img { height: 100%; width: 100%; object-fit: cover; }
#event .event-slider-contents a .thumb .category { text-align: center; color: #fff; background: #665EC0; letter-spacing: 0; font-weight: bold; }
#event .event-slider-contents a .text {}
#event .event-slider-contents .slide-arrow { border: none; background: none; position: absolute; top: 50%; cursor: pointer; }
#event .event-slider-contents .slide-arrow.prev-arrow { left: 0; transform: translateY(-50%); }
#event .event-slider-contents .slide-arrow.next-arrow { right: 0; transform: translateY(-50%) scale(-1, 1);  }
#event .btn-c a { margin: 0 auto; width: 205px; height: 40px; line-height: 40px; padding: 0; }

@media (min-width: 768px) {
    #event .title { font-size: 3.0rem; margin-bottom: 50px; }
    #event .event-slider-contents { padding: 0 50px; }
    #event .event-slider-contents a { transition: all 0.4s; }
    #event .event-slider-contents a:hover { opacity: 0.8; }
    #event .event-slider-contents a .text { padding: 30px; }
    #event .event-slider-contents a .thumb figure { height: 200px; width: 264px; }
    #event .event-slider-contents a .thumb .category { font-size: 1.4rem; padding: 4px 10px; }
}

@media (max-width: 767px) {
    #event { background: url(/campusview/common/top/bg_event.png) no-repeat left top / 118px auto, #E6E6E6; padding: 15px 15px 35px; margin-bottom: 60px; }
    #event .title { font-size: 1.6rem; margin-bottom: 15px; }
    #event .event-slider-contents { margin-bottom: 20px; }
    #event .event-slider-contents > div:not(:last-of-type) { margin-bottom: 10px; }
    #event .event-slider-contents a { display: -webkit-box; display: flex; }
    #event .event-slider-contents a .thumb { max-width: 173px; display: -webkit-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: reverse; flex-direction: column-reverse; }
    #event .event-slider-contents a .thumb figure {/* min-height: 136px; height: 100%;*/ height: 136px; width: 173px; }
    #event .event-slider-contents a .thumb .category { font-size: 1.2rem; padding: 4px 9px; }
    #event .event-slider-contents a .text { padding: 10px; width: calc(100% - 173px); background: #fff; margin-bottom: 0; }
    #event .event-slider-contents a .text p { font-size: 1.2rem; }
}


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

	

------------------------------------------------------*/
#other-bnr-slider { background: #D7E1E7; }
#other-bnr-slider .container { max-width: 1460px; }
#other-bnr-slider .other-bnr-slider-contents { position: relative; }

/* slider */
#other-bnr-slider .other-bnr-slider-contents .slick-slide { margin: 0 15px; max-width: 240px; width: 100%; }
#other-bnr-slider .other-bnr-slider-contents .slick-slide img { width: 100%; }
#other-bnr-slider .other-bnr-slider-contents .slide-arrow { border: none; background: none; position: absolute; top: 2px; cursor: pointer; z-index: 1; }
#other-bnr-slider .other-bnr-slider-contents .slide-arrow.prev-arrow {}
#other-bnr-slider .other-bnr-slider-contents .slide-arrow.next-arrow { transform: scale(-1, 1); }


@media (min-width: 768px) {
    #other-bnr-slider { padding: 50px 0; }
    #other-bnr-slider .container { padding: 0 70px; }
    #other-bnr-slider .other-bnr-slider-contents .slide-arrow.prev-arrow { left: 0; }
    #other-bnr-slider .other-bnr-slider-contents .slide-arrow.next-arrow {right: 0; }

    #other-bnr-slider .other-bnr-slider-contents.min-4 .slick-track ,
    #other-bnr-slider .other-bnr-slider-contents.min-3 .slick-track ,
    #other-bnr-slider .other-bnr-slider-contents.min-2 .slick-track ,
    #other-bnr-slider .other-bnr-slider-contents.min-1 .slick-track { transform: none !important; margin-left: auto; margin-right: auto; }

}


@media (min-width: 1360px) {
    #other-bnr-slider .other-bnr-slider-contents.min-4 .slick-track { width: calc((240px + 30px) * 4) !important; }
    #other-bnr-slider .other-bnr-slider-contents.min-3 .slick-track { width: calc((240px + 30px) * 3) !important; }
    #other-bnr-slider .other-bnr-slider-contents.min-2 .slick-track { width: calc((240px + 30px) * 2) !important; }
    #other-bnr-slider .other-bnr-slider-contents.min-1 .slick-track { width: calc((240px + 30px) * 1) !important; }
}

@media (max-width: 1360px) and (min-width: 768px) {
    #other-bnr-slider .other-bnr-slider-contents.min-4 .slick-track ,
    #other-bnr-slider .other-bnr-slider-contents.min-3 .slick-track ,
    #other-bnr-slider .other-bnr-slider-contents.min-2 .slick-track ,
    #other-bnr-slider .other-bnr-slider-contents.min-1 .slick-track { width: auto !important;}

    #other-bnr-slider .other-bnr-slider-contents.min-4 .slick-track { width: calc((240px + 30px) * 2) !important; }
    #other-bnr-slider .other-bnr-slider-contents.min-3 .slick-track { width: calc((240px + 30px) * 2) !important; }
    #other-bnr-slider .other-bnr-slider-contents.min-2 .slick-track { width: calc((240px + 30px) * 2) !important; }
    #other-bnr-slider .other-bnr-slider-contents.min-1 .slick-track { width: calc((240px + 30px) * 1) !important; }

    #other-bnr-slider .other-bnr-slider-contents.min-4 .slick-slide ,
    #other-bnr-slider .other-bnr-slider-contents.min-3 .slick-slide { margin-bottom: 15px;}
}



@media (max-width: 767px) {
    #other-bnr-slider { padding: 25px 0; }
    #other-bnr-slider .container { margin: 0; }
    #other-bnr-slider .other-bnr-slider-contents .slide-arrow.prev-arrow { left: 9px; }
    #other-bnr-slider .other-bnr-slider-contents .slide-arrow.next-arrow { right: 9px; }

}

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

	journal

------------------------------------------------------*/
/* #journal { overflow: hidden; }
#journal > .container { max-width: 1245px; }
#journal > .container .inner { margin-left: auto; margin-right: 0; }
#journal .l_col-2 > div:first-of-type { margin-left: auto; position: relative; }
#journal .l_col-2 > div:first-of-type h2 { background: #665EC0; text-align: right; margin-top: 0; position: relative; }
#journal .l_col-2 > div:first-of-type h2::after { content: ''; position: absolute; background: url(/campusview/common/top/img_kogakkan-journal-02.png) no-repeat center / 100%; }
#journal .l_col-2 > div:first-of-type .text {}
#journal .l_col-2 > div:first-of-type .text p { color: inherit; }

#journal .journal-slider {}
#journal .journal-slider .journal-slider-contents { margin: 0; height: 100%; }
#journal .journal-slider .journal-slider-contents .slick-list { height: 100%; }
#journal .journal-slider .journal-slider-contents .slick-track { height: 100%; }
#journal .journal-slider .journal-slider-contents .slick-slide { position: relative; }
#journal .journal-slider .journal-slider-contents a { color: inherit; }
#journal .journal-slider .journal-slider-contents figure { margin-bottom: 0; height: 100%; overflow: hidden; }
#journal .journal-slider .journal-slider-contents img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; transition-duration: 0.5s; transition-timing-function: ease; }
#journal .journal-slider .journal-slider-contents img:hover { transform: scale(1.2); transition-duration: 0.5s; }
#journal .journal-slider .journal-slider-contents h3 { font-family: var(--font_02); font-weight: var(--font_02_weight); letter-spacing: 0; }
#journal .journal-slider .journal-slider-contents .text-wrap { position: absolute; bottom: 20px; right: 0; background: rgba(255,255,255,0.78); max-width: 74.03%; padding: 10px; }
#journal .journal-slider .journal-slider-contents .text-wrap h3 { font-weight: bold; font-size: 1.4rem; }
#journal .journal-slider .journal-slider-contents .text-wrap .text { letter-spacing: 0.01em; font-weight: bold; margin-bottom: 0; line-height: 1.4; }
#journal .journal-slider .journal-slider-contents .text-wrap .text p { color: inherit; font-size: 1.4rem; }
#journal .journal-slider .journal-slider-contents .date { position: absolute; opacity: 0; }
#journal .journal-slider .journal-slider-contents #dayWrap { position: absolute; top: 0; left: 0; padding: 5px 10px 5px 10px; width: 155px; height: 35px; background: rgba(255,255,255,0.78); color: #000; font-size: 1.4rem; letter-spacing: 0.05em; line-height: 1.8; }
#journal .journal-slider .journal-slider-contents #dayWrap span { display: none; }
#journal .journal-slider .journal-slider-contents .slick-dots { z-index: 1; position: absolute; top: 0; left: 155px; padding: 4px 10px 4px 0; background: rgba(255,255,255,0.78); width: 100px; height: 35px; }
#journal .journal-slider .journal-slider-contents .slick-dots li { width: 26px; height: 26px; margin: 0; }
#journal .journal-slider .journal-slider-contents .slick-dots li:not(:last-of-type) { margin: 0 5px 0 0; }
#journal .journal-slider .journal-slider-contents .slick-dots li button { width: 26px; height: 26px; background: #897D94; color: #fff; font-size: 1.4rem; text-align: center; }
#journal .journal-slider .journal-slider-contents .slick-dots li button::before { content: none; }
#journal .journal-slider .journal-slider-contents .slick-dots li.slick-active button { background: #5699A6; }
#journal .btn-c a { margin: 0 auto; width: 205px; height: 40px; line-height: 40px; padding: 0; }


@media (min-width: 768px) {
    #journal { background: #B8D6F9; }
    #journal > .container {}
    #journal > .container .inner {}
    #journal .l_col-2 > div:first-of-type { padding-bottom: 20px; background: #B8D6F9; width: calc(100% - 36.64% - 30px ); padding-top: 102px; -webkit-clip-path: polygon(162px 0%, 100% 0, 100% 100%, 0% 100%); clip-path: polygon(162px 0%, 100% 0, 100% 100%, 0% 100%); }
    #journal .l_col-2 > div:first-of-type::before { content: ''; position: absolute; animation: 0; bottom: 0; left: 0; width: 30px; height: calc(300%); background: #fff; transform: rotate(25deg); transform-origin: left bottom; }
    #journal .l_col-2 > div:first-of-type h2 { padding: 22px 34.371% 22px 150px; margin-bottom: 15px; }
    #journal .l_col-2 > div:first-of-type h2::before { content: ''; position: absolute; top: -84px; left: 147px; background: url(/campusview/common/top/img_kogakkan-journal-01.png) no-repeat center / 100%; width: 138px; height: 94px; }
    #journal .l_col-2 > div:first-of-type h2::after { width: 97px; height: 102px; bottom: -77px; right: 88px; }
    #journal .l_col-2 > div:first-of-type .text { max-width: 340px; margin-left: 135px; }

    #journal .journal-slider { background: #fff; padding: 0 20px; width: 36.64%; }
    #journal .journal-slider .journal-slider-contents {}
}

@media (min-width: 768px) and (max-width: 1050px) {
    #journal > .container {}
    #journal > .container .inner {}
}

@media (max-width: 767px) {
    #journal { }
    #journal > .container { margin: 0; }
    #journal > .container .inner { display: block; }
    #journal .l_col-2 > div:first-of-type {}
    #journal .l_col-2 > div:first-of-type h2::before { content: ''; position: absolute; animation: 0; bottom: 0; left: 33px; width: 30px; height: calc(127%); background: #fff; transform: rotate(25deg); transform-origin: left bottom; }
    #journal .l_col-2 > div:first-of-type h2 { text-align: center; padding: 30px 0; margin-bottom: 75px; }
    #journal .l_col-2 > div:first-of-type h2::after { width: 72px; height: 75px; bottom: -30px; right: 15px; }
    #journal .l_col-2 > div:first-of-type h2 img { width: 100%; max-width: 150px; }
    #journal .l_col-2 > div:first-of-type .text { max-width: 275px; margin: 0 auto 40px; }

    #journal .journal-slider {}
    #journal .journal-slider .journal-slider-contents { padding: 0 15px; border-top: 10px solid #B8D6F9; border-bottom: 10px solid #B8D6F9; margin-bottom: 20px; }
} */

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

[kogakkan-journal]

------------------------------------------------------*/
#kogakkan-journal {}
#kogakkan-journal .l_col-journal {}
#kogakkan-journal .l_col-journal > .info { position: relative;}
#kogakkan-journal .l_col-journal > .info > div {}
#kogakkan-journal .l_col-journal > .info .title { text-align: center; position: relative; background-color: #665EC0;}
#kogakkan-journal .l_col-journal > .info .title::before { content: url(/common/images/img_kogakkan-journal-01.png); display: inline-block; transform: scale(0.5); position: absolute; left: 75px; top: -132px;}
#kogakkan-journal .l_col-journal > .info .title::after { content: url(/common/images/img_kogakkan-journal-02.png); display: inline-block; transform: scale(0.5); position: absolute; right: 60px; bottom: -132px;}
#kogakkan-journal .l_col-journal > .info .title img { width: 210px; height: 56px; }
#kogakkan-journal .l_col-journal > .info .text {}
#kogakkan-journal .l_col-journal > .info .text p { font-size: 1.4rem; }
#kogakkan-journal .l_col-journal > .info .btn,
#kogakkan-journal .l_col-journal > .slider .btn { position: relative; display: block; width: 206px; height: 40px; background-color: #6FB5CC; text-align: center; color: #fff; text-decoration: none; font-size: 1.4rem; margin-left: auto; margin-right: auto; padding-top: 8px;}
#kogakkan-journal .l_col-journal > .info .btn::before,
#kogakkan-journal .l_col-journal > .slider .btn::before { content: ''; position: absolute; top: 50%; right: 12px; border-top: 2px solid #fff; border-right: 2px solid #fff; transform: translateY(-50%) rotate(45deg); width: 8px; height: 8px; }
#kogakkan-journal .l_col-journal > .slider { background-color: #fff;}
#kogakkan-journal .l_col-journal .slick-slide { position: relative; background: #fff; }
#kogakkan-journal .l_col-journal .text-wrap { position: absolute; bottom: 20px; background: rgba(255,255,255,0.78); max-width: 74.03%; padding: 10px; color: #000; }
#kogakkan-journal .l_col-journal .text-wrap h3 { font-weight: bold; font-size: 1.4rem; }
#kogakkan-journal .l_col-journal .text-wrap .text { letter-spacing: 0.01em; font-weight: bold; margin-bottom: 0; line-height: 1.4; }
#kogakkan-journal .l_col-journal .text-wrap .text p { color: inherit; font-size: 1.5rem; }
#kogakkan-journal #journal-slider { margin-bottom: 0;}
#kogakkan-journal #journal-slider .date { position: absolute; opacity: 0;}
#kogakkan-journal #journal-slider img { object-fit: cover; width: 100%; height: 100%; }
#kogakkan-journal #dayWrap { z-index: 1; position: absolute; top: 0; left: 0; background-color: rgba(255,255,255,0.8); color: #333; font-size: 1.4rem; height: 38px; width: 130px; text-align: center; padding-top: 6px; }
#kogakkan-journal #dayWrap span { display: none; }
#kogakkan-journal .slick-dots { display: -webkit-box; display: -ms-flexbox; display: flex; z-index: 1; position: absolute; top: 0; left: 130px; padding: 4px 3px 4px 0; background-color: rgba(255,255,255,0.8); height: 38px; width: 110px; }
#kogakkan-journal .slick-dots li { margin: 0 5px 0 0; width: 28px; height: 28px; line-height: normal; }
#kogakkan-journal .slick-dots li button { transition-duration: 0.5s; display: block; width: 28px; height: 28px; background: #897D94; color: #fff; font-size: 12px; text-align: center; }
#kogakkan-journal .slick-dots li button::before { display: none;}
#kogakkan-journal .slick-dots li.slick-active button { background-color: #5699A6; }


@media (min-width: 768px) {
    #kogakkan-journal { background-color: #B8D6F9;}
    #kogakkan-journal .l_col-journal { margin-bottom: 40px; }
    #kogakkan-journal .l_col-journal > .info { width: 64%; height: 338px; padding-top: 100px;}
    #kogakkan-journal .l_col-journal > .info::before { content: ''; position: absolute; width: 30px; height: 120%; background-color: #fff; left: 20px; top: -10%; transform: rotate(24deg); }
    #kogakkan-journal .l_col-journal > .info::after { content: ''; position: absolute; width: 50px; height: 100%; left: -34px; top: 0; background-color: #B8D6F8; transform: rotate(24deg);}
    #kogakkan-journal .l_col-journal > .info .title { margin-bottom: 15px; padding: 22px 0;}
    #kogakkan-journal .l_col-journal > .info .text { margin-bottom: 10px; width: 310px; margin-left: auto; margin-right: auto;}
    #kogakkan-journal .l_col-journal > .info .btn { transition: background-color 0.2s;}
    #kogakkan-journal .l_col-journal > .info .btn:hover { background-color: #665EC0;}
    #kogakkan-journal .l_col-journal > .slider { width: 36%; position: relative; }
    #kogakkan-journal .l_col-journal > .slider::before { content: ''; position: absolute; top: 0; left: 0; right: 0; background: #B8D6F9; width: calc(100% - 35px); height: 100%; margin: 0 auto; }
    #kogakkan-journal .l_col-journal .slick-slide { height: 338px;}
    #kogakkan-journal .l_col-journal > .slider .btn { display: ;}
    #kogakkan-journal .l_col-journal .text-wrap { right: 10px; }
    #kogakkan-journal #journal-slider { margin-left: 17px;}
}

@media screen and (min-width:768px) and ( max-width:1220px) {
    #kogakkan-journal .l_col-journal > .info .title::after { right: -40px;}
    #kogakkan-journal #journal-slider { margin-left: 5px; margin-right: 5px;}
    #kogakkan-journal .l_col-journal > .slider::before { width: calc(100% - 10px); }
}

@media (max-width: 767px) {
    #kogakkan-journal .l_col-journal { margin: 0; }
    #kogakkan-journal .l_col-journal > .info { width: 100%; margin-bottom: 50px; }
    #kogakkan-journal .l_col-journal > .info .title { padding: 30px 10px; margin-bottom: 30px; width: calc(100% + 40px); left: -20px; }
    #kogakkan-journal .l_col-journal > .info .title::before { content: ''; position: absolute; width: 30px; height: 120%; background-color: #fff; left: 35px; top: -10%; transform: rotate(14deg); }
    #kogakkan-journal .l_col-journal > .info .title::after { transform: scale(0.35); right: -50px; bottom: -95px; }
    #kogakkan-journal .l_col-journal > .info .title img { width: 50%; max-width: 210px; height: auto; }
    #kogakkan-journal .l_col-journal > .info .text { width: 100%; margin-left: auto; margin-right: auto; max-width: 275px; text-align: center; margin-bottom: 40px; }
    #kogakkan-journal .l_col-journal > .info .text p { font-size: 1.3rem;}
    #kogakkan-journal .l_col-journal > .info .btn {}
    #kogakkan-journal .l_col-journal > .slider { width: 100%;}
    #kogakkan-journal .l_col-journal > .info #journal-slider .text { margin-bottom: 0; }
    #kogakkan-journal .l_col-journal .text-wrap { right: 0px; }
    #kogakkan-journal #journal-slider { margin-bottom: 20px; border: 1px solid #B8D6F8; border-top-width: 10px; border-bottom-width: 10px; border-left-width: 0; border-right-width: 0; padding: 0 15px; }
    #kogakkan-journal .l_col-journal .slick-slide { height: 69vw;}
    #kogakkan-journal #journal-slider .slick-slide img { width: 100%;}

}