<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">@charset "utf-8";
@import url("https://fonts.googleapis.com/css?family=Fjalla+One");.ocampus {
overflow: hidden
}
.ocampus .kenten {
padding: 0.3em 0;
background-repeat: repeat-x;
background-size: 1.05em 0.25em;
background-position: top left;
background-image: -webkit-gradient(radial, center center, 0, center center, 1.5, from(#0e62aa), color-stop(0.5, #0e62aa), color-stop(0.9, transparent), to(transparent));
background-image: -webkit-radial-gradient(center center, 0.1em 0.1em, #0e62aa, #0e62aa 95%, transparent 95%, transparent);
background-image: radial-gradient(0.1em 0.1em at center center, #0e62aa,#0e62aa 95%,rgba(0,0,0,0))
}
.ocampus .mv-block {
position: relative
}
.ocampus .mv-block .mv {
min-height: 35rem;
padding-bottom: 25%;
background: url(//kowagakuen.ac.jp/wp/common/img/ocampus/mv.jpg) no-repeat center center;
background-size: cover
}
.ocampus .mv-block .mv-catch {
position: absolute;
top: 56.28571%;
left: 50%;
text-align: center;
transform: translateX(-50%)
}
.ocampus .mv-block .mv-catch p {
color: #fff;
line-height: 1.5
}
.ocampus .mv-block .mv-catch span.small {
display: inline-block;
margin-bottom: 1.5rem;
padding: .5rem .8rem;
background: #0e62aa;
font-size: 1.8rem;
font-family: 'Fjalla One', sans-serif;
letter-spacing: .25rem;
line-height: 1
}
.ocampus .mv-block .mv-catch span.lg {
display: block;
font-size: 3.8rem;
font-weight: bold;
line-height: 1
}
.ocampus .block {
margin-bottom: 5rem
}
.ocampus .block01 {
padding: 5rem 0 0
}
.ocampus .block01 .ocampus-ttl {
margin-bottom: 4rem;
color: #0e62aa;
font-size: 3.2rem;
text-align: center
}
.ocampus .block01 .col {
width: 48.4375%
}
.ocampus .block01 .ph {
align-self: flex-end;
width: 48.4375%
}
.ocampus .block01 .border-box {
margin-top: 3rem;
padding: 2rem 4rem;
border: 2px solid #ccc
}
.ocampus .block01 .border-box dl dt {
font-size: 1.6rem
}
.ocampus .block01 .border-box dl dt::before {
display: inline-block;
margin-right: .5rem;
width: .8rem;
height: .8rem;
background: #0e62aa;
border-radius: 50%;
content: ""
}
.ocampus .block01 .border-box dl dd {
margin-left: 1.3rem
}
.ocampus .block02 {
position: relative
}
.ocampus .block02 .ph {
text-align: right
}
.ocampus .block02 .btn {
margin-top: 5rem
}
.ocampus .block02 .btn a::before {
display: inline-block;
margin-right: 1rem;
vertical-align: sub;
transform: skewX(10deg);
content: url(//kowagakuen.ac.jp/wp/common/img/ocampus/btn-icon01.png)
}
.ocampus .block02 .btn a::after {
top: .3rem;
right: 5%;
width: auto;
height: auto;
margin: 0;
border: 0;
transform: skewX(10deg);
content: url(//kowagakuen.ac.jp/wp/common/img/ocampus/btn-icon02.png)
}
.ocampus .block02 .btn a:hover {
color: #fff
}
.ocampus .block03 .ph {
text-align: center
}
@media (max-width: 1024px) {
.ocampus .block01 .ocampus-ttl {
font-size:3.125vw
}
}
@media (max-width: 640px) {
.ocampus .mv-block .mv {
min-height:2.25rem;
padding-bottom: 60%;
background: url(//kowagakuen.ac.jp/wp/common/img/ocampus/sp-mv.jpg) no-repeat center center;
background-size: cover
}
.ocampus .mv-block .mv-catch {
position: absolute;
top: 53.80952%;
left: 50%;
text-align: center;
transform: translateX(-50%)
}
.ocampus .mv-block .mv-catch span.small {
margin-bottom: .8rem;
font-size: 1.2rem
}
.ocampus .mv-block .mv-catch span.lg {
font-size: 2.6rem
}
.ocampus .block01 .ocampus-ttl {
margin-bottom: 2rem;
font-size: 2.4rem
}
.ocampus .block01 .col {
width: 100%
}
.ocampus .block01 .col img {
width: 100%
}
.ocampus .block01 .ph {
width: 100%;
margin-top: 2rem
}
.ocampus .block01 .ph img {
width: 100%
}
.ocampus .block01 .border-box {
margin-top: 2rem
}
.ocampus .block01 .border-box dl dt {
font-size: 1.3rem
}
.ocampus .block01 .border-box dl dd {
font-size: 1.1rem
}
.ocampus .block02 .btn {
width: 80%
}
.ocampus .block02 .btn a {
font-size: 1.4rem
}
}
.ocampus .op_wpset{max-width: 1000px;margin:0 auto}
@media (max-width: 640px) {
.ocampus .op_wpset{padding:10px}
}

.op_time_set{max-width:1000px;margin:0 auto}
.timeline-003 {
display: flex;
justify-content: center;
list-style-type: none;
padding: 0;
}
.timeline-003 li {
display: flex;
flex: 1 1;
flex-direction: column;
align-items: center;
position: relative;
z-index: 1;
color: #161616;
font-size: .8em;
padding: 0 10px;
font-size: 18px;
}
.timeline-003 li span{
font-size: .8em;
line-height:1.5;
}
.timeline-003 li.prev,
.timeline-003 li.current { }
.timeline-003 li::before {
display: inline-block;
width: 14px;
height: 14px;
margin-bottom: 6px;
content: '';
border: 2px solid #d6dde3;
border-radius: 50%;
background-color: #fff;
}
.timeline-003 li.prev::before,
.timeline-003 li.current::before {
border-color: #2589d0;
}
.timeline-003 li:not(:last-child)::after {
position: absolute;
top: 8px;
left: 50%;
z-index: -1;
width: 100%;
height: 2px;
background-color: #d6dde3;
content: '';
}
.timeline-003 li.current::before,
.timeline-003 li.prev::after {
background-color: #2589d0;
}
.timeline-003 li img{padding:10px;}
@media screen and (max-width: 640px){
.timeline-003 {
display: flex;
justify-content: flex-start;
list-style-type: none;
flex-direction:column;
padding: 0;
}
.timeline-003 li {
text-align: left;
font-size: .8em;
padding: 0 10px;
font-size: 18px;
padding-left: 40px;
text-align: left;
}
.timeline-003 li::before {
width: 14px;
height: 14px;
margin-bottom: 6px;
content: '';
border: 2px solid #d6dde3;
border-radius: 50%;
background-color: #fff;
position: absolute;
left: 20px;
}
.timeline-003 li:not(:last-child)::after {
position: absolute;
top: 8px;
left: 7.5%;
z-index: -1;
width: 1px;
height: 100%;
background-color: #d6dde3;
content: '';
}
} .timeline {  width: 100%;
max-width: 1200px;
margin: 0px auto;   border-top:none;  text-align: center;
margin-bottom: 100px;
}
.timeline h3{
font-size:25px;
margin-bottom:50px;
}
.headingA {
display: inline-block;
position: relative;
padding: 0 2.5em;
color: #333333;
}
.headingA::before,
.headingA::after {
content: '';
display: inline-block;
position: absolute;
top: 50%;
width: 45px;
height: 3px;
background-color: #2589d0;
}
.headingA::before {
left: 0;
}
.headingA::after {
right: 0;
}
.timeline p.title {
position: relative;
line-height: 1.4;
padding:0.25em 1em;
display: inline-block;
top:0;
font-size:20px;
font-weight:600;
color:#067f4e;
}
.timeline p.title:before, .timeline p.title:after { 
position: absolute;
top: 0;
content:'';
width: 8px;
height: 100%;
display: inline-block;
}
.timeline p.title:before {
border-left: solid 2px #067f4e;
border-top: solid 2px #067f4e;
border-bottom: solid 2px #067f4e;
left: 0;
}
.timeline p.title:after {
content: '';
border-top: solid 2px #067f4e;
border-right: solid 2px #067f4e;
border-bottom: solid 2px #067f4e;
right: 0;
}
.timeline::-webkit-scrollbar { height:10px;
}
.timeline::-webkit-scrollbar-track {
border-radius: 0px;
box-shadow: inset 0 0 5px rgba(0, 0, 0, .1);
}
.timeline::-webkit-scrollbar-thumb {
background-color: #008c33e0;
border-radius: 10px;
box-shadow:0 0 0 1px rgba(255, 255, 255, .3);
}
.timeline ol {
font-size: 0;
width: 100%;   max-width: 1200px;
}
.timeline ol li {
position: relative;
display: inline-block; width: 24%;
height: 1px;
margin: 0.4%;
background: #a7aaad;
}
.timeline ol li:first-child {  }
.timeline ol li:last-child {   }
.timeline ol li:not(:first-child) { }
body{
counter-increment: number 0; 
}
.timeline ol li::after { content: '';position: absolute;left: calc(100% + 1px);left: 40%;bottom: 0;top: 0;width: 50px;height: 50px;transform: translateY(-50%);border-radius: 50%;background: #ffde00;content: '';counter-increment: number 1;content:  counter(number);color:#555;font-size: 18px;font-weight:600;line-height: 50px;}
.timeline ol li div { padding: 10px;
font-size: 16px;
width: 100%;
white-space: normal;
color: black;
text-align: left; background: #f5f5f5;
border: 1em;
}
.timeline ol li div .comment {
font-size:15px;
line-height:1.2
}
.timeline ol li div::before {
content: '';
position: absolute;
top: 100%;
left: 0;
width: 0;
height: 0;
font-size:12px;
color:#fff
}
.timeline time {
display: block;
font-size: 16px;
font-weight: bold;
margin: 15px 0 8px;
} .timeline .arrows {
display: flex;
justify-content: center;
margin-bottom: 20px;
}
.timeline .arrows .arrow__prev {
margin-right: 20px;
}
.timeline .disabled {
opacity: .5;
}
.timeline .arrows img {
width: 45px;
height: 45px;
}
@media screen and (max-width: 768px) {
.timeline {
width: 90%; }
} @media screen and (max-width: 599px) {
.timeline {
width: 95%; margin-bottom: 50px;
}
.timeline h3{
font-size:22px;
margin-bottom:50px;
}
.timeline ol,
.timeline ol li {
width: auto; 
}
.timeline ol {
padding: 0;
transform: none !important;
}
.timeline ol li {
display: block;
height: auto;
background: transparent;
}
.timeline ol li:first-child {
margin-top: 25px;
width: 100%;
}
.timeline ol li:not(:first-child) { }
.timeline ol li div {
width: 94%;
width: 80%;
height: auto !important;
margin: 0 35px 35px;
}
.timeline ol li div {
position: static;
}
.timeline ol li:nth-child(odd) div {
}
.timeline ol li div::before {
left: 15px;
top: 0;
transform: translateX(-50%);
border: none;
border-left: 1px solid #ddd;
height: 110%;
}
.timeline ol li:nth-last-child(4) div::before{ } .timeline ol li::after {
left: 0;
top:0;
left: 15px;
top: -15px;
transform: translateX(-50%);
border: none;
border-left: 1px solid #ddd;
width: 50px;
height: 50px;
line-height: 50px;
font-size: 20px;
}
}
.boxTaike {
position: relative;
max-width: 1200px;
margin: 1.5em auto;
padding: 2.5em 1em 1.5em; border-top: 1px solid #ddd;
background-color: #fdfdfd;
color: #333333;
border-bottom: 1px solid #ddd;
}
.boxTaike span {
position: absolute;
top: -25px;
left: 30px;
transform: translateX(-.3em) rotate(-5deg);
padding: .5em 2em;
border-right: 2px dotted rgb(0 0 0 / 10%);
border-left: 2px dotted rgb(0 0 0 / 10%);
box-shadow: 0 0 5px rgb(0 0 0 / 20%);
background-color: #FFEB3B;
font-weight: 600;
font-size: 16px;
}
.boxTaike p {
margin: 0; }
.boxTaike p.catch{font-size: 18px;margin-bottom: 10px;}
.boxOsusume{display:flex;justify-content: space-between;}
.ocReco{width: 24.5%; padding: 0; }
.gakka{padding:2%; font-size: 16px;text-align: center;color:#fff;font-weight:600}
.title{padding: 1%;font-size: 15px;text-align: center;font-weight: 600;}
.txt{padding: 2% 2%}
.hari{background:#FFC107;}
.judo{background:#5ac65e;}
.sports{background:#c54e4e;}
.kaigo{background:#f2a5a5;}
.hari_border{border: 2px solid #FFC107;}
.judo_border{border:2px solid #5ac65e;}
.sports_border{border:2px solid #c54e4e;}
.kaigo_border{border:2px solid #f2a5a5;}
@media screen and (max-width: 599px){
.boxOsusume{flex-direction: column;}
.ocReco{width: 100%;margin-bottom:10px}
}
.boxContact {
position: relative;
margin-top: 1em;
padding: 2.5em 1.5em 1em 1.5em;
text-align: center;
border: 2px solid #2589d0;
}
.boxContact &gt; div {
position: absolute;
top: -1.15em;
left: 1em;
padding: .4em 1.4em;
border-radius: 25px;
background-color: #2589d0;
color: #fff;
font-size: 1.2em;
}
.boxContact &gt; div::before {
position: absolute;
bottom: -8px;
left: 50%;
transform: translateX(-50%);
width: 16px;
height: 10px;
background-color: #2589d0;
clip-path: polygon(0 0, 100% 0, 50% 100%);
content: '';
}
.boxContact p {
margin: 0;
font-size: 1.3em;
}
p.p-cont_tel { }
p.p-cont_mail { }
p.p-cont_tel a ,p.p-cont_mail a {
font-size: 3rem;
color: #0e62aa;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
p.p-cont_tel a::before {
content: "";
background: url(//www.kowagakuen.ac.jp/common/img/ocampus/icon_phone.svg) no-repeat center/contain;
width: 3rem;
height: 3rem;
margin-right: 0.75rem;
}
p.p-cont_mail a::before {
content: "";
background: url(//www.kowagakuen.ac.jp/common/img/ocampus/icon_mail.svg) no-repeat center/contain;
width: 3rem;
height: 3rem;
margin-right: 0.75rem;
}
@media screen and (max-width: 599px){
.boxContact p {
text-align:left;
}
p.p-cont_tel a, p.p-cont_mail a {
font-size: 2rem;
color: #0e62aa;
}
p.p-cont_tel a::before, p.p-cont_mail a::before  {
width: 2rem;
height: 2rem;
margin-right: 0.75rem;
}
}
.balloonA__img-wrap {
max-width: 100%;
}
.balloonA__img {
width: 100%;
height: auto;
}
.balloonA__text {
display: flex;
justify-content: center;
align-items: center;
position: relative;
padding: .7em;
border: 3px solid #ffc107;
border-radius: 0;
font-size: 1.2em;
font-weight: 600;
margin-bottom: 30px;
flex-direction: column;
}
.balloonA__text::before,
.balloonA__text::after {
position: absolute;
top: -15px;
width: 30px;
height: 15px;
clip-path: polygon(50% 0, 0 100%, 100% 100%);
content: '';
}
.balloonA__text::before {
background-color: #ffc107;
}
.balloonA__text::after {
top: -11px;
background-color: #fff;
}
@media only screen and (min-width: 521px) {
.balloonA {
display: flex;
align-items: center;
gap: 0 15px;
margin-bottom: 50px;
justify-content: center;
}
.balloonA__img-wrap {
flex-basis: 30%;
}
.balloonA__text {
flex-basis: 60%; border-radius: 0.5em;
font-size: 1.5em;
}
.balloonA__text::before,
.balloonA__text::after {
top: unset;
left: -15px;
width: 15px;
height: 30px;
clip-path: polygon(0 50%, 100% 0, 100% 100%);
}
.balloonA__text::after {
top: unset;
left: -11px;
}
}
.boxContact p.line {
display:flex;
padding: 0;
width: 100%;
margin: 0 10%;
flex-wrap:wrap;
}
.boxContact p.lineImg {
width:20%;
}
.boxContact p.linetxt {
width:80%;
}
.boxContact p.line a img {
width:100px!important;
}
.cont_box {
position: relative;
margin: 2em 0;
padding: 1.5em 1em;
border: solid 3px #123d83;
border-radius: 8px;
width: 96%;
max-width: 1000px;
margin: 20px auto 50px;
}
@media only screen and (min-width: 600px) {
.cont_box {
max-width: 1000px;
margin: 0 auto 50px;
}
}
.cont_box .box-title {
position: absolute;
display: inline-block;
top: -13px;
left: 20px;
padding: 0 15px;
line-height: 1;
font-size: 19px;
background: #ffffff;
color: #123d83;
font-weight: bold;
}
.cont_box p {
margin: 0; 
padding: 0;
line-height:1.5;
}
.cont_box p.txtComment {
font-size:15px;
padding: 10px;
line-height:1.5;
}
.tanto {width: calc(100%);margin: 0.5%;box-sizing:border-box;border: 1px solid #ddd;border-radius: 5px;padding: 1%;}
.tanto .box-contact {
font-size: 15px; border-bottom: 1px solid #ddd;
padding: 4px 4px 4px 2.8em;
text-align: left;
color: #5d5d5d;
font-weight: bold;
letter-spacing: 0.05em;
position:relative;
line-height: 2;
top: 10px;
}
.tanto .box-contact.mail:before {
position:relative;
font-family: 'Font Awesome 6 pro';
content: "\f406";
position: absolute;
left: 0.5em;
color: #123d83;
content: "";
background: url(//www.kowagakuen.ac.jp/common/img/specialocampus/icon_mail.svg) no-repeat center / contain;
width: 2rem;
height: 3rem;
margin-right: 0.75rem;
}
.tanto .box-contact.tel:before {
position:relative;
font-family: 'Font Awesome 6 pro';
content: "\f406";
position: absolute;
left: 0.5em;
color: #123d83;
content: "";
background: url(//www.kowagakuen.ac.jp/common/img/specialocampus/icon_phone.svg) no-repeat center / contain;
width: 2rem;
height: 3rem;
margin-right: 0.75rem;
}
.tanto .box-contact.line:before {
position:relative;
font-family: 'Font Awesome 6 pro';
content: "\f406";
position: absolute;
left: 0.5em;
color: #123d83;
content: "";
background: url(//www.kowagakuen.ac.jp/common/img/specialocampus/icon_line.svg) no-repeat center / contain;
width: 2rem;
height: 3rem;
margin-right: 0.75rem;
}
.tanto p {
padding: 15px 20px;
margin: 0;
}
.tanto ul li {
line-height: 1.5;
padding: 0.5em 0.5em;
list-style-type: none!important;
font-size: 1.5rem;
text-align: center;
}
.tanto ul li a{
display:inline; padding: 0 2px;
font-size: 1.5em;
}
.tanto ul li a.c_phont {
font-size:2.5em
}
.tanto ul li a.c_phont:before {   width: 5rem;
height: 5rem;
margin-right: 0.75rem;
}
.tanto ul li.c_fax:before {
font-family: "Font Awesome 6 pro";
content: "\f1ac";
padding-right: 5px;
}
.tanto ul li .c_mail:before {    background: url(//www.kowagakuen.ac.jp/common/img/specialocampus/icon_phone.svg) no-repeat center / contain;
width: 5rem;
height: 5rem;
margin-right: 0.75rem;
}
.tanto ul li img{
width:60%;
}
.tanto ul li img.telImg{
width: 30%;
margin-left: 60%;
}
.flexbox_etc{
display: flex;
flex-wrap:wrap;
padding: 5px;
}
@media only screen and (min-width: 600px) {
.tanto {
width: calc(100%/2.1);
}
}
@media only screen and (min-width: 1000px) {
.tanto {
width: calc(100%/3.1);
}
}</pre></body></html>