@charset "utf-8";
/* CSS Document */
:root{
    --site-point-color: rgb(255, 253, 56);
    /*--heading-site-main-color: rgb(255, 92, 168); medical */
    /*--heading-site-main-color: rgb(26, 171, 176);  civil servant */
    --heading-site-main-color: rgb(24, 89, 182); /* other */
}

.animation{
    --theme-color: rgba(66, 119, 217, 1); /* #4277d9 */
    --bg-theme-sub: rgba(236, 242, 251, 1); /* #ecf2fb */
}

.talentseiyu{
    --theme-color: rgba(119, 196, 8, 1); /* #77c408 */
    --bg-theme-sub: rgba(242, 249, 231, 1); /* #f2f9e7 */
}
.writer{
    --theme-color: rgb(255, 122, 51); /* #ff7a33 */
    --bg-theme-sub: rgb(255, 242, 235); /* fff2eb */
}

.illustration{
    --theme-color: rgba(255, 162, 0); /* ffa200 */
    --bg-theme-sub: rgba(255, 246, 230); /* fff6e6 */
}
/*---------

base

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

.section-wrap{ transition: .7s; opacity: .4;}
.section-wrap.view{ opacity: 1;}
.section-wrap section { transform: translateY(5rem); transition: .7s;}
.section-wrap.view section { transform: translateY(0);}

.bus-timetable .link_access{
    color:blue;
    text-decoration: underline;
}

/*--- font-set
----------------------------**/

div[class$="employment-rate"],
.qualification-list_number{
    font-family: 'Spartan', sans-serif;
    letter-spacing: -.08em;
    line-height: 1.0;
}

.point-number{
    font-family: 'Noto Serif Display', serif;
}

.point-number::before{
    content: "point";
    font-family: 'Petit Formal Script', cursive;
    color: var(--theme-color);
}

/*---------

section

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

section[class^="theme-"]{
	background-size: auto auto;
	padding-top: 5rem;
	padding-bottom: 5rem;
	margin-bottom: 5rem;
}

/*---------

title

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

.kv-body h1, h3, h4{ font-weight: 500;}
h3:not(:first-child), h4:not(:first-child), h5:not(:first-child), h6:not(:first-child){ margin-top: 2rem;}
h5, h6{ font-weight: bold;}
.kv-body h1{ line-height: 1.1;}

section > h2{
    position: relative;
    padding-bottom: 1em;
} /* tokyo only */

section > h2 small{
    display: block;
    margin-top: .25em;
} /* /support/kyufu/ */

.heading-area { text-align: center; margin-bottom: 0.4em;}
.heading-area h3{ margin-bottom: .25em;}

h3.site-theme-color,
h4.site-theme-color,
span.site-theme-color{ color: var(--heading-site-main-color);}

h3.site-theme-blue,
h4.site-theme-blue{
    padding: .4em 0;
    margin-bottom: 1em;
    background-color: var(--bg-site-main-blue);
    border-bottom: 1px solid #000;}

.site-theme-point{
    padding: .8em .4em;
    background-color: var(--site-point-color);}

h3[class^="site-theme-"] span,
h4[class^="site-theme-"] span,
h3[class^="theme-"] span,
h4[class^="theme-"] span{ font-size: 1.6rem; display: block;}

/*--- lower theme color
----------------------------**/

h3.theme-color,
h4.theme-color{	color: var(--theme-color);}

/*--- site course color
----------------------------**/

h3.theme-business  { color: var(--theme-business);}
h3.theme-accountant{ color: var(--theme-accountant);}
h3.theme-sports    { color: var(--theme-sports);}
h3.theme-it   { color: var(--theme-it);}
h3.theme-medical   { color: var(--theme-medical);}

/*--- h2 Decoration
----------------------------**/

section > h2::after{
    content: "";
    display: block;
    width: 10rem;
    height: 1rem;
    position: absolute;
    bottom: -.2em;
    left: 50%;
    transform: translateX(-50%);
    background: url(../images/h2-line_sp.png) no-repeat center top;
    background-size: contain;
}

section.results > h2::after, 
section.campus-calender > h2::after{ background-image: url(../images/h2-line_sp_white.png) ;}

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

    h1, .news-detail > h2{ font-size: 2.1rem;}
    section > h2{ font-size: 2.8rem;}
    section > h2 span{ font-size: 1.7rem;}
    section > h2 small{ font-size: 1.5rem;}
    .kv-body h1 span{ font-size: 1.8rem;}
    .kv-body h1 + p{ font-size: 1.2rem;}
}

@media (min-width:768px){

    h1, .news-detail > h2{ font-size: 3.6rem;}
    section > h2{ font-size: 4.5rem;}
    section > h2 span{ font-size: 3.4rem;}
    section > h2 small{ font-size: 2.8rem;}
    .news-detail > h2{ font-size: 4.0rem;}
    .kv-body h1 span{ font-size: 2.8rem;}
    .kv-employment-rate_body h1 + p{ font-size: 1.8rem;}
    section > h2::after{ width: 20rem; height: 1.5rem; bottom: 0; background-image: url(../images/h2-line_pc.png);}
    section.results > h2::after, 
    section.campus-calender > h2::after{ background-image: url(../images/h2-line_pc_white.png);}
}

/*---------

p

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

.lead,.title-lead{ text-align: center;}
.text-right{ text-align: right;}
p.kv-lead{ line-height: 1.8; margin-top: 0.75em;}
.section-inner > p:not(:last-child){ margin-bottom: 1em;}
small.reception-hours{ font-size: 1.0rem;}

@media (min-width:768px){

    small.reception-hours{ font-size: 1.2rem;}
}

/*---------

button text-link

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

/*--- a
----------------------------**/

p a:not([class]),
p a:not([class]):link,
p a:not([class]):visited{
	text-decoration: underline;
}

p a:hover,
p a:active{
	text-decoration: none;
}

.banner-list a img:hover,
.banner-list a img:active{ opacity: .75;}

/*--- button-area
----------------------------**/

.button-area,
.button-list-area,
.text-link-area{ display: grid; margin-left: auto; margin-right: auto;}
.button-area:not(:last-child),
.button-list-area:not(:last-child){ margin-bottom: 3.2rem;}

.button-area{
	grid-auto-rows: 1fr;
	place-content: center;
}

.button-list-area{ row-gap: 1.8rem;}

.button-area a,
.button-list-area a{
	display: block;
    background-color: #fff;
    border: 1px solid #c9c9c9;
}

.button-area a,
.button-list-area a,
.text-link-area a{ text-align: center;}

.button-area a{ padding: 1em .5em;}
.button-list-area a{ padding: .75em;}

.button-area:not(.event-schedule) .btn-line:not(:first-child){ margin-top: 1.6rem;}

.btn-line a{
	width: 98%;
	max-width: 90vw;
	min-width: 28rem;
	padding: 1.5em;
	margin: 0 auto;
    border: 1px solid #000;
	border-radius: 0;
	position: relative;
	z-index: 2;
}

.btn-line a::before{
    content: "";
    display: block;
    width: 99%;
    height: 96%;
    border-right: 1px solid #000;
    border-bottom: 1px solid #000;
    position: absolute;
    bottom: -.7rem;
    right: -.7rem;
    transition: .6s;
}

.btn-line a:not([target=_blank]):not([href$=pdf])::after{
    content: "";
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    right: 5%;
    width: 9px;
    height: 9px;
    border-top: 1px solid #000000;
    border-right: 1px solid #000000;
    transform: rotate(45deg);
	border-bottom:none;
}

.btn-line a[target=_blank]:not([href$=pdf])::after{
    content: "";
    display: inline-block;
    width: .75em;
    height: .75em;
    position: relative;
    top: 0;
    right: -0.5em;
    background: url(../images/icon/blank.png) no-repeat;
    background-size: contain;
    border: none;
}

.event-schedule .btn-line a{ padding: .75em;}

.link-list a[target="_blank"]:not([href$="pdf"]){ margin-right: 2em;}
.link-list a[target="_blank"]:not([href$="pdf"]):after{
	content: "";
	display: inline-block;
	width: .75em;
	height: .75em;
	position: relative;
	top: 0;
	right: -.5em;
	background: url(../images/icon/blank.png) no-repeat ;
	background-size: contain;
}

.btn-line a[href$="pdf"]{
	padding-left: 1.5em;
	padding-right: 3em;
}

.btn-line a[href$="pdf"]::after{
	content: "";
	display: block;
	width: 2em;
	height: 2em;
	position: absolute;
	top: 50%;
	right: 4%;
	transform: translateY(-55%);
	background: url(../images/icon/icon-pdf.png) no-repeat ;
	background-size: contain;
	border:none;
}

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

	.button-area,
    .text-link-area{
		margin-top: 2.4rem;
		grid-template-columns:1fr;
	}
	
	.btn-line a[href$="pdf"]::after{
		padding-right: 2.8rem;
	}
}

@media (min-width:768px){

	.button-area,
	.text-link-area{
		max-width: max-content;
		margin-top: 3.2rem ;
	}

	.button-list-area{
		grid-template-columns: repeat(3, 30rem);
		justify-content: space-between;
	}

	.button-area .btn-line a{ max-width: max-content; min-width: 38rem;}
    .card-list_detail .btn-line a{ min-width: 30rem;}

	.button-area.line a[href$="pdf"]::after{
		width: 3.2rem;
		right: 12%;
	}
}

/*--- hover
----------------------------**/

.link-list a:hover{ text-decoration: none;}
.btn-line a:hover{ z-index: 10;}
.btn-line a:hover::before{ background-color: rgba(217, 243, 255, .5); z-index: -1;}

/*---------

img

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

.section-inner > figure:not([class]):not(:first-child),
.section-inner ~ figure:not([class]):not(:first-child){
	max-width: 70rem;
    margin-top: 3.2rem;
	margin-left: auto;
	margin-right: auto;
}

.section-inner > figure:not([class]):not(:last-child),
.section-inner ~ figure:not([class]):not(:last-child){ margin-bottom: 2.4rem;}

@media (min-width:768px){
    .section-inner > figure:not([class]):not(:last-child),
    .section-inner ~ figure:not([class]):not(:last-child){ margin-bottom: 3.2rem; }
}

/*---------

article & section

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

.type-join{
    padding-bottom: 0;
    margin-bottom: 0;
}

.type-join section{ margin-bottom: 0;}

.section-inner{ max-width: var(--width);}
.min-width{ max-width: var(--width-min);}

body.error section{
    text-align: center;
    padding: 10vh 1rem;
}

body.error section p:nth-of-type(1){
    font-weight: bold;
    margin-bottom: 0.75em;
}

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

    .section-inner{
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

@media (min-width:768px){

    body.error section p:nth-of-type(1){ font-size: 2.0rem;}
}

/*---------

kv

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

.kv-area,
.kv-wide-area{
    position: relative;
    background-color: #f3f3f3;
}

.kv-wrap{
    max-width: 110rem;
    height: 15rem;
    margin: 0 auto;
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    overflow: hidden;
}

.kv-wide-area .kv-wrap{
    height: 21.5rem;
}

.kv-body{
    padding-left: 3.2%;
    padding-right: 3.2%;
    flex-basis: 100%;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.kv-wrap > picture{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50% , -50%);
    display: block;
    margin: 0 auto;
}

.kv-wide-area > picture img,
.kv-wrap > picture img{
    object-fit: cover;
}

/*--- kv top border
----------------------------**/

.kv-area::before,
.kv-wide-area::before,
body.error section::before{
    z-index: 10;
    content: "";
    display: block;
    margin: 0 auto;
    width: 100%;
    max-width: 110rem;
    height: .5rem;
    position: relative;
    top: 0;
    background:url(../images/kv-line_sp.png) no-repeat center top;
    background-size: cover;
}

@media (min-width:768px){

    .kv-wrap,
    .kv-wrap > picture img{ height: 27rem;}
    .kv-wide-area .kv-wrap,
    .kv-wide-area .kv-wrap > picture img{ height: 40rem;}

    .kv-area::before,
    .kv-wide-area::before,
    body.error section::before{
        height: 1rem;
        background:url(../images/kv-line_pc.png) no-repeat center top;}
}

/*---------

section-kv

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

section > div[class$="-kv"]{
    max-width: 68.4rem;
    margin: 0 auto 5rem;
    position: relative;
}

/*---------

table

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

/*--- table-style_block
----------------------------**/

.table-style table{
    margin: .75em auto .8em;
}

.table-style table,
.table-style table th,
.table-style table td{
    border: 1px solid #bfbfbf;
    border-spacing: 0;
    border-collapse: collapse;
}

.table-style table td,
.table-style table th{
    padding: .5em 1.5em;
    vertical-align: middle;
}

.table-style table th.emphasis,
.table-style table td.emphasis{
    background-color: rgba(255, 251, 219, 1);
}

.table-style table td small:not(.reception-hours),
.table-style table th small{
    font-size: 1.1rem;
}

.table-style table thead th,
.table-style table tbody th{
    text-align: center;
    background-color: #ededed;
}

.type-scroll_nav{
    display: inline-block;
    margin-top: 1em;
    position: relative;
}

.type-scroll_nav::before,
.type-scroll_nav::after{
    content: "";
    height: 1px;
    display: inline-block;
    position: absolute;
    top: 50%;
    right: -48%;
    background-color: #000;
}

.type-scroll_nav::before{ width: 40%;}
.type-scroll_nav::after{ width: 6px; transform:translateY(-3px) rotate(45deg);}

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

    .table-style table th,
    .table-style table td{ font-size: 1.4rem;}

    .table-style.type-block colgroup,
    .table-style.type-block > table > thead{ display: none;}

    .table-style.type-block > table{
        border-left: none;
        border-right: none;
        border-bottom: none;}

    .table-style.type-block > table > thead td,
    .table-style.type-block > table > tbody td,
    .table-style.type-block > table > tbody th{ border-top: none;}

    .table-style.type-block > table,
    .table-style.type-block > table > tbody,
    .table-style.type-block > table > thead > tr,
    .table-style.type-block > table > tbody > tr,
    .table-style.type-block > table > thead > tr > th,
    .table-style.type-block > table > tbody > tr > th,
    .table-style.type-block > table > tbody > tr > td{ display: block; width: 100%;}

    .type-scroll_nav{ font-size: 1.2rem;}
    .table-style.type-scroll{ overflow-x: scroll;}
    .table-style.type-scroll table{ width: 100%; width: 100rem;}
    .table-style table .type-scroll table{ width: max-content;}
}

@media (min-width:768px){

    .table-style table td,
    .table-style table th{ padding: .75em 1em;}
    .type-scroll_nav{ display: none;}
}

/*---------

list ul ol dl

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

/*--- circle & number & disc
----------------------------**/

ul.disc{ margin-left: 1em;}

ol.number,
ul.circle{ margin-left: 1.6em;}

ol.number li,
ul.disc li,
ul.circle li{ margin-bottom: .25em;}

ol.number > li{ list-style-type: decimal;}
ul.disc > li{ list-style-type: disc;}
ul.circle > li{ list-style-type: circle;}

.listindent{ margin-left: 1.6em;}

ol.number.indent,
ul.disc.indent,
ul.circle.indent{ margin-left: 2.4em;}

/*--- notes
----------------------------**/

.notes li,
.notes-list li{
    display: grid;
	grid-template-columns: auto 1fr;
    column-gap:.25em
}

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

    .notes,
    .notes-list li{ font-size: 1.1rem;}
}

@media (min-width:768px){
    
    .notes,
    .notes-list li{ font-size: 1.4rem;}
}

/*--- check-mark
----------------------------**/

dl dt.check-mark,
ul.check-mark li{
    line-height: 1.5;
    padding-left: 2.4rem;
    margin: 0 1.2em 0.4em 0;
    position: relative;
}

dl dt.check-mark::before,
dl dt.check-mark::after,
ul.check-mark li::before,
ul.check-mark li::after{
    content: "";
    position: absolute;
}

dl dt.check-mark::before,
ul.check-mark li::before{
    width: 1.4rem;
    height: 1.4rem;
    border: 1px solid #000;
    background-color: #FFF;
    top: .3rem;
    left: 0;
}

dl dt.check-mark::after,
ul.check-mark li::after{
    width: 1.4rem;
    height: .8rem;
    top: .2rem;
    left: .2rem;
    border-left: .1rem solid #000;
    border-bottom: .1rem solid #000;
    transform: rotate(-45deg);
}

@media (min-width:768px){

    ul.check-mark li::before,
    dl dt.check-mark::before{ top: .5rem;}

    ul.check-mark li::after,
    dl dt.check-mark::after{ top: .4rem;}
}

/*--- link-list
----------------------------**/

.link-list:not(:last-child){ margin-bottom: 1em;}
.link-list a{ color: #27a3cc; text-decoration: underline;}

/*--- dl
----------------------------**/

dl dt{ font-weight: bold;}
table td dl dt:not(:first-child){ margin-top: 1.5em;}

/*---------

breadcrumb & page-nav 

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

/*--- breadcrumb
----------------------------**/

.breadcrumb ol,
.page-nav{
    display: flex;
    flex-wrap: wrap;
    max-width: var(--width);
    margin: 0 auto;
}

.breadcrumb {
    padding: 1.6rem 0;
}

.breadcrumb li {
    position: relative;
    font-size: 1.2rem;
    line-height: 1.4;
}

.breadcrumb li:not(:last-child):after{
    content: " ";
    position: relative;
    top: -0.1rem;
    right: .4rem;
    display: inline-block;
    width: .6rem;
    height: .6rem;
    border-top: 1px solid #000;
    border-right: 1px solid #000;
    transform: rotate(45deg);
}

.breadcrumb li a{ padding: 0 .5em;}
.breadcrumb li:first-child a{ padding-left: 0;}

.breadcrumb li:last-child a{
    pointer-events: none;
    text-decoration: underline;
}

.breadcrumb li a img{
    width: 1.8rem;
    transform: translateY(-.2rem);
}

.breadcrumb li a:hover{
	opacity:0.75;
}

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

    .breadcrumb {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }

    .breadcrumb ol{
        width: 100%;
        flex-wrap: nowrap;
    }
}

/*--- page-nav
----------------------------**/

.page-nav{ padding-bottom: 2.4rem;}

.page-nav li{
    font-size: 1.3rem;
    margin-top: 1em;
    border: 1px solid #c9c9c9;
}
.page-nav li:hover{
      opacity: 0.6;
 }

.page-nav li a{
    display: flex;
    align-items: center;
    height: 100%;
    padding: .5em 2em .5em .5em;
}

.page-nav li a::before, .page-nav li a::after{
    content: '';
    position: absolute;
    right: .4em;
    top: 50%;
    transform: translateY(-50%);
}

.page-nav li a::before{
    width: 1.3em;
    height: 1.3em;
    border-radius: 50%;
    background: #acc3e1;
}

.page-nav li a::after {
    width: .85rem;
    height: .85rem;
    right: 0.725em;
    background-color: #fff;
    mask: url("../images/icon/arrow-down.svg") no-repeat center center / contain;
    -webkit-mask: url("../images/icon/arrow-down.svg") no-repeat center center / contain;
}

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

    .breadcrumb ol,
    .page-nav{ padding-left: 1rem; padding-right: 1rem;}

    .page-nav{
        justify-content: space-between;
        align-items: stretch;
    }

    .page-nav li{
        flex-basis: 48.5%;
    }
}

@media (min-width:1024px){

    .page-nav li{
        flex-basis: 24%;
        margin-right: 1%;
    }

    .page-nav li:nth-of-type(4n){
        margin-right: 0;
    }
}

/*---------

contents-nav

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

.contents-nav{
    margin-top: 1em;
}

.contents-nav ul{
    display: flex;
    flex-wrap: wrap;
    font-size: 1.4rem;
}

.contents-nav li a{
    display: block;
    position: relative;
}

.contents-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);
}

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

    .contents-nav li a{
        padding-right: 1.6em;
        margin-right: .8em;
    }    

    .contents-nav li a:after{
        top: .7rem;
        right: .7rem;
    }
}

@media (min-width:768px){

    .contents-nav li{
        flex: 1 0 auto;
        text-align: center;
    }

    .contents-nav li a{
        padding-bottom: .8em;
    }   

    .contents-nav li a:after{
        bottom: 0;
        left: 50%;
        transform: translateX(-4px) rotate(-45deg);
    }
}

/*---------

news list

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

.news.current-student{ background-color: rgb(233, 245, 236);}

/*--- news detail
----------------------------**/

section.news-detail{
	max-width: var(--width);
	margin: 0 auto;
}

.news-detail_body{ margin-top: 5rem;}
.news-detail_body p{ margin-top: .75em; margin-bottom: .75em;}

.news-detail_body h1,
.news-detail_body h2,
.news-detail_body h3,
.news-detail_body h4,
.news-detail_body h5,
.news-detail_body h6{
    line-height: 2.0;
    font-family: inherit;
    font-weight: bold;
    font-size: inherit;
    text-align: inherit;
    margin-top: .75em;
    margin-bottom: .75em;
}

.news-detail_body .photo:not(:nth-child(1)){ margin-top: 5rem;}

.news-detail_body .photo{
	width: 100%;
	max-width: 68rem;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}

.news-detail_body ul,
.news-detail_body ol{ margin-left: 1.6em; margin-top: .75em; margin-bottom: .75em;}

.news-detail_body ul li{ list-style-type: disc;}
.news-detail_body ol li{ list-style-type: decimal;}

.news-detail_body table,
.news-detail_body table th,
.news-detail_body table td {
    border: 1px solid #bfbfbf;
    border-spacing: 0;
    border-collapse: collapse;
    margin-top: .75em;
    margin-bottom: .75em;
}

.news-detail_body table th,
.news-detail_body table td{ padding: .5em;}

.news-detail_body table th{ background-color: #ededed;}

@media not all and (max-width:768px){
    .news-detail p img{ width:auto;}
}

.news-detail .button-area a{
    border-radius: .5rem;
    padding: .75em;
}

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

    section.news-detail{
        padding-left: 1rem;
    	padding-right: 1rem;
    }
}

/*---------

helpful-information

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

.helpful-information{
    position: relative;
    padding-top: 15rem;
    padding-bottom: 5rem;
    background: url(../images/bg_beige.png) 0 0;
}

.helpful-information::before{
    content: "";
    background: center / contain no-repeat url(../images/admission-guidance/helpful-information.png);
    display: block;
    width: 14.8rem;
    height: 9.6rem;
    position: absolute;
    top: 5rem;
    left: 50%;
    transform: translateX(-5.8rem);
    margin-bottom: 3rem;
}

.helpful-information_list{
    display: grid;
    grid-auto-rows: 1fr;
}

.helpful-information_list a{
    background-color: #FFF;
    border: 1px solid #000;
    padding: 1em 4rem 1em 1em;
}

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

.helpful-information_list a dl::before{ width: 2rem;}
.helpful-information_list a dl::after{ transform:translateY(-.4rem) rotate(45deg);}
.helpful-information_list a dl dt{ font-weight: bold;}

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

    .helpful-information_list{
        grid-template-columns: 1fr;
        row-gap: 1rem;
    }

    .helpful-information_list a dl dd{ font-size: 1.2rem;}
}

@media (min-width:768px){

    .helpful-information_list{
        grid-template-columns: repeat(auto-fit , 32% );
        column-gap: 2%;
    }
}

/*--- helpful hover
----------------------------**/

.helpful-information_list a:hover dl::before,
.helpful-information_list a:hover dl::after{ right: 1.2rem;}

/*---------

 faq

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

.faq-list{
    width: 100%;
    max-width: 68rem;
    margin: 0 auto;
    border: 1px solid #000;
    border-radius: 1rem;
}

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

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

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

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

.faq-list dd{
    display: none;
    background-color: #d9f3ff;
}

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

@media (min-width:768px){

    .faq-list dt,
    .faq-list dd{ padding-top: 2.4%;  padding-bottom: 2.4%;  padding-left: 5%;}
}

.faq-box .toggle-switch-area:before {
  position: absolute;
  left: 15px;
  color: #7ec5ff;
  font-weight: 500;
  content: "Q";
}
.faq-box .faq-list dd{
	position:relative;
}
.faq-box .faq-list dd:before{
	position: absolute;
	left: 15px;
	display: inline-block;
	font-weight: 500;
	content: "A"
}
@media (max-width:768px){
    .faq-box .faq-list dt, .faq-list dd{
		padding-left: 10%;
	}
}

/*---------

lower-list

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

.lower-introduction{
    max-width: 84rem;
    margin: 0 auto;
    background-color: #fffeb2;
    position: relative;
}

.lower-introduction .label{
    display: inline-block;
    color: #FFF;
    line-height: 1.6;
    padding: 0 .5em;
    margin-bottom: .75em;
    border-radius: .5rem;
    background-color: rgba(160, 160, 160, 1); /* a0a0a0 */
}

.section-inner .lower-introduction:not(:first-child){ margin-top: 8%;}
.lower-introduction_item{ padding: 4.8% 2% 3.2%;}
.lower-introduction_item p{ line-height: 1.6;}

.lower-introduction_item small{
    font-weight: normal;
    font-size: 1rem;
    padding-left: .5em;
}

.lower-introduction_item ul:not([class]) li{
    line-height: 1.2;
    font-weight: bold;
    padding-left: 1.5em;
    margin-bottom: .8em;
    position: relative;
}

.link_arrow {
    display: inline-block;
  }

.lower-introduction_item ul:not([class]) li::before,
.lower-introduction_item ul:not([class]) li::after{
    content: "";
    position: absolute;
    display: block;
}

.lower-introduction_item ul:not([class]) li::before{
    width: 1em;
    height: 1em;
    background-color: #fff;
    border:1px solid #000;
    top: 1px;
    left: 0;
}

.lower-introduction_item ul:not([class]) li::after{
    width: 6px;
    height: 6px;
    border-top:1px solid #000;
    border-right:1px solid #000;
    transform: rotate(45deg);
    top: 6px;
    left: .25em;
}

.lower-introduction_item .toggle-switch-area{
    background-color: #fff;
    border: 1px solid #bfbfbf;
    text-align: center;
    margin:1em auto 0.5em;
}

.lower-introduction_item .toggle-item ul li{ font-weight: normal;}
.lower-introduction_item .toggle-line{ background-color: #bfbfbf;}

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

    .lower-introduction{ border: 1px solid #bfbfbf;}
    .lower-introduction_item,
    .lower-introduction_item p{ font-size: 1.2rem;}
    .lower-introduction_item ul:not([class]) li{ font-size: 1.6rem;}
    .lower-introduction_item ul:not([class]) li span{ font-size: 1.2rem;}
}

@media (min-width:768px){

    .lower-introduction_img{
        max-width: 68rem;
        margin-top: 3.6%;
        position: relative;
        transform: translate(-4% , -10%);
    }

    .lower-introduction_item{ padding-top: 0;}
    .lower-introduction_item ul:not([class]) li{ font-size: 2.5rem;}
    .lower-introduction_item small{  font-size: 1.6rem; }
    .lower-introduction_item ul:not([class]) li span{ font-size: 2rem;}
    .lower-introduction_item ul:not([class]) li::after{ left: .8rem; top: 1rem;}
}

.lower-introduction_item ul li span.icon-blank{
	font-size:2.5rem;
}
@media (max-width:768px){
	.lower-introduction_item ul li span.icon-blank{
		font-size:1.6rem;
	}
}
.lower-introduction_item ul li span.icon-blank::after {
    content: "";
    display: inline-block;
    width: .65em;
    height: .65em;
    margin-left: .3em;
    background: url(../images/icon/blank.png) no-repeat;
    background-size: contain;
    vertical-align: middle;
}

/*---------

pagination

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

.pagination{ margin: 5rem auto 0;}
.pagination a{ padding: .2em 0;}

.pagination,
.pagination .pre a,
.pagination .next a,
.pagination .number ol{
    display: flex;
    justify-content: center;
    min-width: 5em;
}

.pagination .pre a,
.pagination .next a,
.pagination .number ol{
    align-items: center;
    height: 100%;
    border: 1px solid #c9c9c9;
    border-radius: 1rem;
    background-color: #FFF;
}

.pagination .pre { margin-right: auto;}
.pagination .next{ margin-left: auto;}


.pagination .pre a::before,
.pagination .next a::after{
    content: "";
    display: inline-block;
    position: relative;
    width: 8px;
    height: 8px;
    border-top: 1px solid #000;
    border-right: 1px solid #000;
}

.pagination .pre a::before{
    margin-right: 0.5em;
    transform: rotate(-135deg);
}
.pagination .next a:after{
    margin-left: 0.5em;
    transform: rotate(45deg);
}

.pagination .number li a{
    display: inline-block;
    width: 3em;
    text-align: center;
}

.pagination .number li:first-child{
    border-radius: 1rem 0 0 1rem;
}
.pagination .number li:last-child{
    border-radius: 0 1rem 1rem 0;
}

.pagination .number li:not(:first-child) a{
    border-left: 1px solid #c9c9c9;
}

.pagination .number li.current{
    background-color: #e4f6ff;
}

@media (max-width:320px){
    .pagination .pre a,
    .pagination .next a,
    .pagination .number ol{
        min-width: 4em;
    }
}

/*---------

access

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

.map-area iframe{
    width: 100%;
    min-height: 20rem;
}

.map-area ~ .school-img{
    max-width: 50rem;
    width: 80%;
    padding: 2.4rem 0;
    text-align: center;
    margin: 0 auto;
}

/* add by system*/

.google-map{ padding-bottom: 55%;}

@media (min-width:768px){
    .google-map{ padding-bottom: 40%;}
    .map-area iframe{ min-height: 45rem;}
}

/*---------

point

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

.point-list{ display: grid; row-gap: 1.6rem;}

.point-number{
    font-size: 3.2rem;
    line-height: 1.0;
    text-align: center;
}

.point-number::before{
    font-weight: 600;
    color: var(--heading-site-main-color);
}

.point-list_item p{
    color: var(--heading-site-main-color);
    line-height: 1.4;
    font-weight: 600;
}

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

    .point-list_item{
        display: grid;
        grid-template-columns: 20% 75%;
        grid-auto-rows: 1fr;
        column-gap: 5%;
        align-items: center;
    }

    .point-number{
        padding: 10% 0;
        border-right: 1px solid #000;
    }

    .point-number::before{
        display: block;
        font-size: 1.1rem;
        margin-bottom: 0.25em;
    }

    .point-list_item p{ font-size: 2.0rem;}
}

@media (min-width:768px){

    .point-list .point-number{ font-size: 5rem;}
    .point-list .point-number::before{ font-size: 2.0rem;}
    .point-list_item p{ font-size: 2.5rem;}

    .point-list:not(.vertical){
        grid-template-columns: repeat(3, 31%);
        grid-auto-rows: 1fr;
        column-gap: 3.5%;
    }

    .point-list:not(.vertical) .point-number{
        padding: 0 0 2%;
        margin-bottom: .5em;
        border-bottom: 1px solid #000;
    }

    .point-list:not(.vertical) .point-number::before{
        display: inline-block;
        position: relative;
        transform: translate(0 , -.25em);
        z-index: 1;
    }

    .point-list:not(.vertical) .point-list_item{ text-align: center;}

    
    /*--- point-list.vertical course-detail
    ----------------------------**/

    .point-list.vertical{
        width: 100%;
        max-width: var(--width-min);
        margin-left: auto;
        margin-right: auto;
    }

    .point-list.vertical .point-list_item{
        display: grid;
        grid-template-columns: 14% 84%;
        grid-auto-rows: 1fr;
        column-gap: 2%;
        align-items: center;
    }

    .point-list.vertical .point-number{
        padding: 10% 0;
        border-right: 1px solid #000;
    }

    .point-list.vertical .point-number::before{
        display: block;
        margin-bottom: 0.25em;
    }
}

/*---------

support-system

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

.support-system a{
    max-width: var(--width-min);
    margin-left: auto;
    margin-right: auto;
    border: 1px solid #bfbfbf;
    display: grid;
    grid-template-columns: 25% 75%;
    grid-auto-rows: auto;
}

.support-system .icon,
.support-system dl{ padding: 4%;}

.support-system .icon{
    text-align: center;
    background-color: #f7f7f7;
}

.support-system .icon img{
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    max-width: 58px;
    max-height: 53px;
    object-fit: contain;
}

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

    .support-system a{ padding-left: 1rem; padding-right: 1rem;}
    .support-system a:not(:first-child){ margin-top: 1.6rem;}
    .support-system dd{ font-size: 1.2rem;}
}

@media (min-width:768px){

    .support-system a{ grid-template-columns: 16rem 1fr;}
    .support-system a:not(:first-child){ margin-top: 3.2rem;}
    .support-system dt{ font-size: 2.5rem;}
}

.support-system dt{
	position:relative;
	display: inline-block;
	padding-left:1.2em;
}
.support-system dt::before{
	content: "";
	position: absolute;
	width: 1em;
	height: 1em;
	background-color: #fff;
	border:1px solid #000;
	top: 22%;
	left: 0em;
}
.support-system dt::after{
	content: "";
    position: absolute;
    width: 6px;
    height: 6px;
    border-top:1px solid #000;
    border-right:1px solid #000;
    transform: rotate(45deg);
    top: 0.8em;
    left: 0.3em;
}
@media (max-width:768px){
    .support-system dt::after{
        top: 0.75em;
    }
}
/*---------

banner-list

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

.section-wrap ~ .banner-list{
    max-width: var(--width);
    margin-left: auto;
    margin-right: auto;
    padding-top: 5rem;
    padding-bottom: 5rem;
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    row-gap: 1rem;
}

article .banner-list:last-child{  margin-bottom: 5rem;}

@media not all and (min-width:768px){
    
    .section-wrap ~ .banner-list{
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

@media (min-width:768px){

    .section-wrap ~ .banner-list{ row-gap: 2.5rem;}
}

/*---------

contact-info

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

.contact-info{
    text-align: center;
    font-size: 1.2rem;
    padding: 1em;
    margin: 3.2rem auto 0;
    border:1px solid #898989;
    background-color: var(--bg-site-main-gray);
}

.contact-info .section-inner > p{ text-align: center;}
.phone-number { font-size: 3.2rem;}

@media (min-width:768px){

    .border-box{ max-width: 64rem;}
}

/*---------

column-box

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

/* /about/ryo/ */
/* デフォが2column */

.column-box{
    display: grid;
    grid-auto-rows: auto;
    row-gap: 4vh;
}

.card-item h3{ margin-bottom: 0.25em;}
.card-item img{ margin-bottom: 1em;}
.column-box figure{ margin-bottom: .5em;}

@media (min-width:768px){

    .column-box{
        grid-template-columns: repeat(2, 48.5%);
        column-gap: 3%;
    }
}

/*---------

flow-list

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

:root{
	--flow-flow-accent-color: rgb(253, 142, 190);
	--flow-flow-accent-subcolor: rgb(75, 161, 131); /* 4ba183 */
}

.flow-list,
.flow-list + .flow-list-box,
.flow-list + .notes-list{
    max-width: 68rem;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}

.flow-list::after{
    content: " ";
    width: 0.2rem;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    z-index: -1;
    background-color: rgb(253,142,190);
}

.theme-main  .flow-list::after,
.site-theme-bg-sub .flow-list::after{
    background-color: #00c6ff;
    left: 50%;
}

.flow-body{
    display: grid;
    margin-bottom: 1.6rem;
    border: 1px solid #d7b873;
    border-radius: .8rem;
    background-color: var(--bg-site-main-cream);
}

.site-theme-bg-sub .flow-body,
.flow-body.flow-notes{ color: #000;}
.site-theme-bg-sub .flow-body.flow-notes{ background-color: inherit;}

.flow-body > .heading-area{
    line-height: 1.4;
    padding-top: .5em;
    padding-bottom: .5em;
    display: grid;
    grid-template-columns: 96%;
    grid-auto-rows: auto;
    align-items: center;
    justify-content: center;
}

.flow-body > .flow-item,
.flow-body > .heading-area ~ p{ padding-left: 1.6vh; padding-right: 1.6vh;}
.flow-body:not(.flow-notes) > p:last-child,
.flow-body > .flow-item:last-child{ padding-bottom: 1.6vh; }

.flow-list + .flow-list-box{
    background-color: #FFF;
    line-height: 1.8;
    padding: 2vh;
    margin-top: 3.2rem;
    border-radius: .8em;
}

.flow-list + .flow-list-box h3{
    font-size: 2rem;
    font-weight: bold;
    padding-bottom: 1.4vh;
    border-bottom: 2px solid #000;
}

.flow-list::after{ left: 2rem;}

@media (min-width:768px){

    .flow-list::after{ left: 2.4rem;}
}

/*--- flow-body
----------------------------**/

.theme-main .flow-body,
.site-theme-bg-sub .flow-body,
.flow-body.flow-accent-color,
.flow-body.flow-accent-subcolor,
.flow-body.flow-notes{ border: none;}

.flow-body.flow-accent-color .heading-area,
.flow-body.flow-accent-subcolor .heading-area{ color: #FFF;}

.theme-main .flow-body,
.site-theme-bg-sub .flow-body{ background-color: #FFF;}
.flow-body.flow-accent-color{ border-radius: 0;  background-color: rgb(253, 142, 190);}
.flow-body.flow-accent-subcolor{ background-color: rgb(75, 161, 131);}
.flow-body.flow-notes{ width: 48%; margin-left: auto;}

/*--- heading-area
----------------------------**/

.flow-body > .heading-area {
    text-align: left;
    margin-bottom: 0;
}

.flow-body .heading-area .marker-line,
.flow-body .heading-area span{ 
	display: inline-block;
	width: max-content;
/*
	margin-left: auto;
	margin-right: auto;
*/
}

/*.flow-body .heading-area .label-theme-color{ color: #fff; padding: 0 1em; border-radius: 2rem; background-color: var(--heading-site-main-color);}*/

.flow-body .heading-area .label-theme-color{ 
	color: #fff;
	padding: 0 1em;
	border-radius: 2rem;
	background-color: var(--heading-site-main-color);
	font-size: 1.6rem;
    margin: 3px 0 0 8px;
    font-weight: 500;
}

.flow-body .heading-area small{ line-height: 1.4; font-size: 1.2rem;}

.theme-main .flow-body > .heading-area,
.site-theme-bg-sub .flow-body > .heading-area,
.site-theme-bg-sub .flow-body.flow-accent-color > .heading-area,
.site-theme-bg-sub .flow-body.flow-accent-subcolor > .heading-area{ text-align: center;}

.flow-body .heading-area > div:not([class]){ line-height: 1.4;}
.flow-body .heading-area > div:not([class]) p{ line-height: 1.4; padding: .25em 0;}
.flow-body .heading-area > div:not([class]) > p:only-child{ padding-top: .5em;}

.theme-main .flow-body > .heading-area > div:not([class]),
.site-theme-bg-sub .flow-body .heading-area > div:not([class]),
.site-theme-bg-sub .flow-body.flow-accent-color .heading-area,
.site-theme-bg-sub .flow-body.flow-accent-subcolor .heading-area{
    font-size: 2.0rem;
    font-weight: 600;
    text-align: center;
}

.theme-main .flow-body > .heading-area > div:not([class]) p,
.site-theme-bg-sub .flow-body .heading-area > div:not([class]) p,
.site-theme-bg-sub .flow-body.flow-accent-color .heading-area > div:not([class])  p,
.site-theme-bg-sub .flow-body.flow-accent-subcolor .heading-area > div:not([class])  p{ font-size: 2.0rem;}

.flow-body > .heading-area span.number{
    display: inline-block;
    min-width: 1.4em;
    text-align: center;
    line-height: 1.2;
/*    margin-right: 0.4em;*/
	margin: 0 0.4em 0 0;
    border-width: 2px;
    border-style: solid;
    transform: translateY(-.2rem);
    background-color: #FFF;
}

.site-theme-bg-sub .flow-body > .heading-area span.number{ color: #000; border-color: #000;}

.flow-body.flow-accent-color > .heading-area span.number,
.flow-body.flow-accent-subcolor > .heading-area span.number{color: #FFF; border-color: #FFF; background-color: inherit;}


.site-theme-bg-sub .flow-body .heading-area > div:has(span.number),
.site-theme-bg-sub .flow-body .heading-area:has(span.number),
.flow-body.flow-accent-color p:has(span.number){
	text-align: left;
}

/*--- heading-area
----------------------------**/

.flow-item{ background-color: #FFF; padding-top: 1vh;}

div.flow-item{ position: relative;}
/* 
dl.flow-item,
.flow-body.flow-accent-subcolor div.flow-item{ padding-top: 2vh;} */
.flow-item:last-child{ border-radius:  0 0 .4em .4em;}

.flow-body.flow-accent-color .flow-item{
    background-color: inherit;
    color: #FFF;
}

div.flow-item::before{
    content: "";
    display: block;
    height: .2rem;
    width: 100%;
    background-color: #000;
    position: relative;
    margin-bottom: .5em;
    transform: translateY(-.5em);
}

.flow-body.flow-accent-color div.flow-item::before{ background-color: #FFF;}
.flow-body.flow-accent-subcolor div.flow-item::before{ padding-top: 2vh; content: none;}

.flow-list + dl.flow-list-box{
    border-radius: .8em;
    background-color: #FFF;
    padding: 2vh;
}

.flow-list ol li,
.flow-list ul li{ margin-bottom: 0.25em;}

/*---------

card-list

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

.card-list{
	width: 100%;
    display: grid;
	margin-bottom: 2.4rem;
}

.card-item{
	background-color: #FFF;
	border-radius: 1rem;
	padding: 1rem;
}

.card-item h3{ margin-bottom: 0.25em;}
.card-item img{ margin-bottom: 1em;}

/* koko */

.card-list_detail{
	width: 100%;
    display: grid;
	margin-bottom: 2.4rem;
}

.card-list_item{
	background-color: #FFF;
	border-radius: 1rem;
	padding: 1rem;
}

.card-list_item h3{
	margin-bottom: 0.25em;
}

.card-list_item img{
	margin-bottom: 1em;
}


/*--- modal
----------------------------**/

.card-list_modal{
    width: 100%;
    display: grid;
	margin-bottom: 2.4rem;
}

.card-list_modal .modal-thumbnail{
	background-color: #FFF;
	border-radius: 1rem;
	overflow: hidden;
}
.card-list_modal .modal-thumbnail img:hover{
	opacity:0.9;
}

.card-list_modal .modal-thumbnail div{
	height: 100%;
	padding: .5em;
	font-weight: 600;
	text-align: center;
	position: relative;
	background-color: #FFF;
}

.card-list_modal .modal-thumbnail div::before{
	content: "";
	display: block;
	position: absolute;
	right: 5%;
	background: url(../images/icon/icon_search.png) no-repeat border-box center top / cover;
}

.modal-layer{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    transition: opacity 0.65s;
    pointer-events: none;
    opacity: 0;
    z-index: 10000;
}

.modal-layer.active {
    transition: opacity 0.65s;
    pointer-events: auto;
    opacity: 1;
}
.modal-layer_mask {
    position: absolute;
    background: rgba(0,0,0,0.5);
    width: 100%;
    height: 100vh;
}

.modal-layer_inner{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
	background-color: #FFF;
	border-radius: 1rem;
    transform: translate(-50%, -50%);
}

.modal-trigger-close{
    top: -2.4rem;
    right: 5%;
	background-color: #34aaff;
}

.modal-slider{
    width: 100%;
    overflow: hidden;
}

.modal-slider .swiper-slide{
	width: 100%;
	height: 100%;
}

.modal-slider_item {
    padding: 3.2rem 1.5rem 2.4rem;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

.modal-slider_item h3{
    text-align: center;
	margin-top: 1em;
}

.modal-slider ~ .swiper-button-next,
.modal-slider ~ .swiper-button-prev{
    width: 3rem;
    height: 6rem;
    margin-top: 0;
    color: #000;
    background-color: #FFF;
    border: 1px solid #bfbfbf;
    z-index: 10;
    top: 24%;
}

.modal-slider ~ .swiper-button-next{
    right: 0;
    border-right: none;
    border-radius: 1rem 0 0 1rem;
}

.modal-slider ~ .swiper-button-prev{
    left: 0;
    border-left: none;
    border-radius: 0 1rem 1rem 0;
}

.modal-slider ~ .swiper-button-next.swiper-button-disabled,
.modal-slider ~ .swiper-button-prev.swiper-button-disabled{ opacity: 0;}
.swiper-button-next:after, .swiper-button-prev:after{ font-size: 1.6rem;}

.modal-layer button.trigger-close .menu-line{
	background-color: #fff;
}

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

	.card-list_modal{
    	grid-template-columns: repeat(2, 48.5%);
		gap: 2rem 3%;
	}

	.card-list_modal .modal-thumbnail div{
		height: 6rem;
		font-size: 1.3rem;
	}

	.card-list_modal .modal-thumbnail div::before{
		width: 3rem;
		height: 3rem;
		top: -25%;
	}

	.modal-layer_inner{
	    width: 94vw;
    	max-width: 40rem;
	}

	.card-list_detail{ row-gap: 2rem;}
}

@media (min-width:768px){

	.card-list_modal{
    	grid-template-columns: repeat(auto-fit ,minmax(26rem , 1fr));
		gap: 2rem 1.33%;
	}

	.card-list_detail{
        grid-template-columns: repeat(3 , 32%);
        /*grid-template-columns: repeat(2 , 49%);*/
		gap: 2rem 2%;
	}

	.card-list_modal .modal-thumbnail div{
		height: 8rem;
	}

	.card-list_modal .modal-thumbnail div::before{
		width: 4rem;
		height: 4rem;
		top: -25%;
	}

	.modal-layer_inner{ max-width: 60rem;}
/*	.modal-slider_item{ text-align: center;}*/

	.modal-slider ~ .swiper-button-next,
	.modal-slider ~ .swiper-button-prev{ top: 32%;}
}

/*---------

catch-icon

/admission/ao/
/about/waribiki/

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

.catch-icon ul{
    width: 100%;
    max-width:  68rem;
    margin-left: auto;
    margin-right: auto;
    display: grid;
    grid-template-columns: repeat(3, 32%);
    column-gap: 2%;
    place-content: center;
}


p + .catch-icon { margin-top: 4rem;}
.catch-icon:not(:last-child){ margin-bottom: 3rem;}
.catch-icon ul li{ text-align: center;}

.catch-icon ul li span{
    display: inline-block;
    background-color: var(--site-point-color);
    font-weight: bold;
    padding: .25em 1em 0;
    border-radius: 1.5em;
    margin-bottom: 1em;
}

.catch-icon ul li img{
    max-height: 18rem;
    object-fit: contain;
}

.catch-icon ul li span + img{
    max-width: 10rem;
    max-height: 10rem;
}    

@media (min-width:768px){

    .catch-icon ul{
        grid-template-columns: repeat(3, 30%);
        column-gap: 5%;
    }

    .catch-icon ul li span{
        padding: .25em 1.5em 0;
    }

    .catch-icon ul li span + img{
        max-width: 14rem;
        max-height: 14rem;
    }    
}

/*指定校フォームバナー*/
.banner_form{
    max-width: 50rem;
    padding-top: 1rem;
}
.banner_form a img:hover,
.banner_form a img:active { opacity: .75;}

.center {
  margin: 0 auto;
}

/*バナーのhover共通*/
.bn_hover img:hover, 
.bn_hover img:active {
    opacity: .75;
}

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

Google Mapで見るボタン追加

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

.g-map {
	margin: 10px 0 25px;
	text-align: center;
}

a.g-btn {
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.5;
  display: inline-block;
  padding: 1rem 6rem;
  cursor: pointer;
  text-align: center;
  vertical-align: middle;
	border: 2px solid #1859b6;
  background: #fff;
	 color: #1859b6;
}

a.g-btn:hover{
	background: #e1eaf6;
}

a.g-btn[target=_blank]:not([href$=pdf])::after{
	content: "";
	display: inline-block;
	width: .75em;
	height: .75em;
	position: relative;
	top: 0;
	right: -0.5em;
	background: url(../images/icon/blank.png) no-repeat;
	background-size: contain;
}

/* ==========================
フローティングバナー（追従バナー）
========================== */
.oc-banner_common {
    position: fixed;
    top: 395px;
    right: 105px;
    width: 290px;
    max-width: 100%;
    z-index: 55;
}

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

.oc-banner_common.js_close {
    display: none;
}
.oc-banner_common_img {
    display: block;
    transition: 0.3s;
}
.oc-banner_common_img:hover {
    opacity: 0.6;
}
.oc-banner_common a:hover{
	opacity:0.6;
}
.oc-banner_common_close {
    width: 30px;
    height: 30px;
    position: absolute;
    right: -17px;
    top: -15px;
    cursor: pointer;
    background-color: #127FF2;
    border-radius: 30px;
}
.oc-banner_common_close span:nth-of-type(1) {
    position: absolute;
    top: 13px;
    right: 7px;
    width: 15px;
    height: 3px;
    background-color: #fff;
    transform: rotate(45deg);
}
.oc-banner_common_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);
    }
}

/* 1分後表示 */
.oc_banner-fadeIn {
    opacity: 0;
    /* animation: fadeIn 1s ease-in 60s forwards; */
    transition: all 1.0s;
    animation: oc-fadeIn 1s ease-in 20s forwards;
}
.oc_banner-fadeIn--debug {
    opacity: 0;
    /* animation: fadeIn 1s ease-in 60s forwards; */
    transition: all 1.0s;
    animation: oc-fadeIn 1s ease-in 3s forwards;
}
@keyframes oc-fadeIn {
    from {
        opacity: 0;
        transform: translateX(100%); 
    }
    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,.slidein03,.slidein-or-fadein {
    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;
    }
}

/*-------------------------
 202505 下線アニメーション
--------------------------*/
  .num_marker {
	background:linear-gradient(transparent 60%, rgba(255, 223, 70,0.8) 50%);
    display: inline-block;
	background-repeat: no-repeat;
    background-size: 0% 100%;
    transition:background-size 1.5s;
  }
  
  .num_marker.on {
    background-size: 100% 100%;
}
/*20250501 ページネーション1ページだけの時のcss調整*/
.pagination .number li.first_page{
  width: 100%;
  border-radius: 1rem;
  text-align: center;	
}


/* =========================
  20251204 外部リンクマーク追加対応
==================================*/
/* 共通設定 */
.admission .notes a[target=_blank]:not([href$=pdf])::after,
.employee-information a[target=_blank]:not([href$=pdf])::after,
.contact .button-area .contact_btn_area a[target=_blank]:not([href$=pdf])::after,
.contact .link-list a[target=blank]:not([href$=pdf])::after,
.anime .section-inner a[target=_blank]:not([href$=pdf])::after{
    content: "";
    display: inline-block;
    width: .75em;
    height: .75em;
    position: relative;
    top: 0;
    right: -0.5em;
    background: url(../images/icon/blank.png) no-repeat;
    background-size: contain;
    border: none;
}
/* 入学前Web通信講座コンピューター動作確認 */
.admission .notes a[target=_blank]:not([href$=pdf])::after{
    right: -2em;
}
/* コースページの社会人の方へ */
.employee-information a[target=_blank]:not([href$=pdf]){
    display: block;
}
.employee-information a[target=_blank]:not([href$=pdf]):hover::after{
    filter: invert(100%);
}
/* コースページの社会人の方へ集中資格 */
.employee-information .theme-color a[target=_blank]:not([href$=pdf])::after{
    filter: invert(100%);
}
.employee-information .theme-color a[target=_blank]:not([href$=pdf]):hover::after{
    filter: unset;
    mask: url(../images/icon/blank.png) no-repeat center / contain;
    -webkit-mask: url(../images/icon/blank.png) no-repeat center / contain;
    background-color: var(--theme-color);
}
/* お問い合わせ */
.contact .button-area .contact_btn_area a[target=_blank]:not([href$=pdf])::after{
    mask: url(../images/icon/blank.png) no-repeat center / contain;
    -webkit-mask: url(../images/icon/blank.png) no-repeat center / contain;
    background-color: #1859b6;
}
/* =========================
  20251210 hover追加対応
============================*/
.group-list .link-list:hover,
.admission .notes a:hover{
	text-decoration:none!important;
}
.support-system a:hover,.faq-list .toggle-switch-area:hover{
     opacity: 0.6;
}
.link_arrow a:hover,
.ryo_bannar a:hover,
.hs2_sns a:hover,
.btn-ptn01 a:hover,
.guide .news-item a:hover,
.banner a img:hover,
.banner-box a img:hover,
.jisseki .result-information a:hover,
.open-company-label:hover,
.toggle-button:hover{
	opacity: 0.75;
}