@charset "utf-8";
@import url("https://fonts.googleapis.com/css2?family=BIZ+UDPGothic:wght@400;700&family=BIZ+UDPMincho:wght@400;700&display=swap");
@import url(https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css);
 :root {
--main-color: rgba(0188, 230, 195, 1);
--sub-color: rgba(20, 140, 63, 1);
--third-color: rgba(230, 31, 98, 1);
--fourth-color: rgba(254, 242, 246, 1);
--bg-gradation: linear-gradient(to right, var(--third-color), var(--fourth-color));
}
.bg-light-green {
background-color: var(--main-color);
}
.bg-light-pink {
background-color: var(--fourth-color);
}
.bg-light-gray {
background-color: rgba(243, 243, 237, 1);
}
.bg-yellow {
background-color: rgba(255, 255, 0, 1);
}
.bg-red {
background-color: var(--third-color);
}
.bg-pink {
background-color: var(--third-color);
}
.text-green {
color: var(--sub-color);
}
.text-pink {
color: var(--third-color);
}
.border-pink {
border-color: var(--third-color) !important;
}
.border-light-green {
border-color: var(--main-color) !important;
}
ul.liststyle-green {
list-style: none;
}
ul.liststyle-green li::before {
content: "\F231";
font-family: "bootstrap-icons";
color: rgba(20, 140, 63, 1);
padding-right: 0.2em;
} body {
font-family: "BIZ UDPGothic", sans-serif;
color: #000;
line-height: 1.75;
font-weight: 400;
-webkit-text-size-adjust: 100%;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.serif {
font-family: "BIZ UDPMincho", serif;
}
.fw400 {
font-weight: 400;
}
.fw700 {
font-weight: 700;
}
.fs-sm {
font-size: clamp(0.8rem, 0.17vw + 0.76rem, 0.89rem);
}
.fs-base {
font-size: clamp(1rem, 0.34vw + 0.91rem, 1.19rem);
}
.fs-md {
font-size: clamp(1.25rem, 0.61vw + 1.1rem, 1.58rem);
}
.fs-lg {
font-size: clamp(1.56rem, 1vw + 1.31rem, 2.11rem);
}
.fs-xl {
font-size: clamp(1.95rem, 1.56vw + 1.56rem, 2.81rem);
}
.fs-xxl {
font-size: clamp(2.44rem, 2.38vw + 1.85rem, 3.75rem);
}
.fs-xxxl {
font-size: clamp(3.05rem, 3.54vw + 2.17rem, 5rem);
} .btn {
position: relative;
overflow: hidden;
outline: none;
transition: ease 0.2s;
}
@media (min-width: 991px) {
.btn span {
position: relative;
z-index: 3; }
.btn:hover span {
color: #fff;
}
}
.btn-outline-green {
color: var(--sub-color);
background-color: #fff;
font-weight: 700;
border: solid 3px var(--sub-color);
border-radius: 1.5em;
position: relative;
padding: 0.7em 2.5em 0.7em 1.2em;
padding-right: 2.5em;
}
.btn-outline-green::after {
content: "\F135";
font-family: "bootstrap-icons";
position: absolute;
right: 0.8em;
}
.btn-outline-green:hover {
background-color: var(--sub-color);
color: #fff;
}
.btn-outline-pink {
color: var(--third-color);
background-color: #fff;
font-weight: 700;
border: solid 3px var(--third-color);
border-radius: 1.5em;
position: relative;
padding: 0.7em 2.5em 0.7em 1.2em;
padding-right: 2.5em;
}
.btn-outline-pink::after {
content: "\F135";
font-family: "bootstrap-icons";
position: absolute;
right: 0.8em;
}
.btn-outline-pink:hover {
background-color: var(--third-color);
color: #fff;
}
.page--body a[href$=".pdf"],
.page--body a[href$=".zip"],
a.pdf,
a.excel,
a.word,
a.blank {
position: relative;
padding-right: 1.6em;
}
.page--body a[href$=".pdf"]::after,
a.btn.pdf::after {
content: "\F63E";
font-family: "bootstrap-icons";
position: absolute;
right: 0.5em;
color: #f00;
}
.page--body a[href$=".zip"]::after {
content: "\F391";
font-family: "bootstrap-icons";
position: absolute;
right: 0.5em;
color: rgba(1, 73, 141, 1);
}
.page--body a[href$=".xls"]::after,
.page--body a[href$=".xlsx"]::after,
a.btn.excel::after {
content: "\F396";
font-family: "bootstrap-icons";
position: absolute;
right: 0.5em;
color: rgb(1, 141, 71);
}
.page--body a[href$=".doc"]::after,
.page--body a[href$=".docx"]::after,
a.btn.word::after {
content: "\F3BB";
font-family: "bootstrap-icons";
position: absolute;
right: 0.5em;
color: rgb(1, 3, 141);
}
a.blank::after {
content: "\F1C5";
font-family: "bootstrap-icons";
position: absolute;
right: 0.8em;
}
footer a.blank::after {
content: "\F1C5";
font-family: "bootstrap-icons";
position: absolute;
right: 0;
}
@media (min-width: 768px) {
a[href^="tel:"] {
pointer-events: none;
}
} .navbar {
--bs-navbar-color: rgba(0, 0, 0, 1) !important;
border-bottom: solid 4px var(--main-color);
} footer {
position: relative;
border-top: solid 4px var(--main-color);
}
footer::before {
content: "";
display: block;
width: 100px;
height: 80px;
background: url(//socra.info/assets/img/mark_socra.svg) no-repeat center 50%;
position: absolute;
top: -50px;
right: 0;
left: 0;
margin: auto;
}
footer a {
color: #000;
text-decoration: none;
}
footer .windows {
padding: 2em 0;
}
.windows--header h3 {
position: relative;
width: fit-content;
padding: 12px 16px;
margin-left: auto;
margin-right: auto;
border-bottom: 4px solid var(--main-color);
background-color: #ffffff;
}
.windows--header h3::before {
content: "";
position: absolute;
bottom: -5px;
left: 50%;
width: 15px;
height: 15px;
box-sizing: border-box;
background-color: #ffffff;
rotate: 135deg;
translate: -50%;
}
.windows--header h3::after {
content: "";
position: absolute;
bottom: -10px;
left: 50%;
z-index: -1;
width: 15px;
height: 15px;
box-sizing: border-box;
border: 4px solid;
border-color: var(--main-color) var(--main-color) transparent transparent;
background-color: #ffffff;
rotate: 135deg;
translate: -50%;
}
footer .windows a span {
background-color: #fff;
}
footer .windows a:hover span {
background-color: #fff100;
color: #148c3f;
font-weight: 700;
} aside.sidebar section {
margin-bottom: 40px;
}
img.sq64 {
width: 64px;
height: 64px;
} main {
margin-top: -16px;
}
main section,
main.section {
margin-bottom: 40px;
} p.text-ex {
padding-left: 1.2em;
text-indent: -1.2em;
}
ul.text-ex {
list-style: none;
padding-left: 1.2em;
margin-left: 0.2em;
}
ul.text-ex li {
text-indent: -1.2em;
}
p.text-ex::before,
ul.text-ex li::before {
content: "※";
margin-right: 0.2em;
} p.text-ex {
padding-left: 1.2em;
text-indent: -1.2em;
}
ul.text-ex {
list-style: none;
padding-left: 1.2em;
margin-left: 0.2em;
}
ul.text-ex li {
text-indent: -1.2em;
}
p.text-ex::before,
ul.text-ex li::before {
content: "※";
margin-right: 0.2em;
} .entry--body img {
max-width: 100%;
height: auto;
} .page--header {
background-color: rgba(251, 251, 243, 1);
background-image: url(//socra.info/assets/img2312/bg_title.png);
background-repeat: no-repeat;
background-position: center 50%;
background-size: 32%;
text-align: center;
margin-bottom: 30px;
}
.page--header h1 {
color: var(--sub-color);
font-weight: 700;
}
.navigation {
margin-bottom: 30px;
}
.navigation a {
text-decoration: none;
}
@media (min-width: 991px) {
.page--header {
background-size: auto;
margin-bottom: 60px;
}
} .page--body .tit01 {
font-weight: bold;
padding: 0 0.5em 0.5em 0;
margin-bottom: 30px;
border-bottom: solid 3px var(--sub-color);
}
.widget--header {
background-color: rgba(251, 251, 243, 1);
color: var(--sub-color);
border: solid 1px #dee2e6;
}
@media (min-width: 991px) {
main section,
main .section,
aside.sidebar {
margin-bottom: 60px;
}
.page--header {
height: 200px;
}
.navigation {
margin-bottom: 60px;
}
.page--body .tit01 {
margin-bottom: 40px;
}
}
.announce > div {
border-radius: 6px;
border: solid 4px rgba(230, 31, 98, 1);
}
.announce h2 a {
color: rgba(230, 31, 98, 1);
}
.announce p {
margin-bottom: 0;
}
@media screen and (min-width: 769px) {
.announce h2 {
margin-bottom: 0;
}
.announce-wrap::before {
content: "\F483";
font-family: "bootstrap-icons";
font-size: 30px;
line-height: 1;
color: rgba(230, 31, 98, 1);
text-align: center;
padding-top: 14px;
margin-right: 1em;
display: inline-block;
float: left;
width: 60px;
height: 60px;
border-radius: 50%;
background: #fff; }
}
.entry-list .card-img-top {
object-fit: cover;
aspect-ratio: 16/9;
} .faq .card .card-title {
font-weight: 900;
position: relative;
padding-left: 1.5em;
margin-bottom: 1em;
}
.faq .card .card-title::before {
content: "\F505";
font-family: "bootstrap-icons";
position: absolute;
left: 0;
}
.faq .card .card-text {
padding-left: 2.5em;
position: relative;
}
.faq .card .card-text::before {
content: "\F407";
font-family: "bootstrap-icons";
font-size: 1.5em;
position: absolute;
left: 0;
} .news .card .card-date {
display: block;
}
.news .card a {
text-decoration: none;
font-weight: bold;
} .branch a {
text-decoration: none;
} .carousel-caption {
position: absolute;
right: 15%;
top: 5rem;
left: 15%;
padding-top: 1.25rem;
padding-bottom: 1.25rem;
color: #fff;
text-align: center;
}
.carousel-caption p.fs-3 {
line-height: 1.25;
}
.carousel-caption .text-green p {
text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.4), -1px -1px 0 rgba(255, 255, 255, 0.4), -1px 1px 0 rgba(255, 255, 255, 0.4),
1px -1px 0 rgba(255, 255, 255, 0.4), 0px 1px 0 rgba(255, 255, 255, 0.4), 0-1px 0 rgba(255, 255, 255, 0.4), -1px 0 0 rgba(255, 255, 255, 0.4),
1px 0 0 rgba(255, 255, 255, 0.4);
}
.carousel-indicators [data-bs-target] {
background-color: #148c3f;
}
.carousel-control-prev-icon {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23148c3f'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");
}
.carousel-control-next-icon {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23148c3f'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
.carousel-control-next-icon,
.carousel-control-prev-icon {
width: 4rem;
height: 4rem;
}
@media screen and (min-width: 769px) {
.carousel-caption {
top: 6rem;
}
}
@media screen and (min-width: 991px) {
.carousel-caption {
top: 10rem;
}
}
.ticker a:hover {
text-decoration: underline !important;
}
.ticker > div > div {
padding-top: 0.5em;
padding-bottom: 0.5em;
}
.ticker > div > div:first-child {
padding-right: 1em;
}
.ticker > div > div:nth-child(2n) {
position: relative;
padding-right: 4em;
}
.ticker > div > div:nth-child(2n):after {
content: "\F135";
font-family: "bootstrap-icons";
font-weight: 700;
color: #000;
position: absolute;
top: 0;
right: -1em;
background-color: rgba(255, 255, 0, 1);
padding: 0.5em 1em;
} .maru:before,
.batsu:before {
display: inline-block;
float: left;
vertical-align: top;
}
.maru:before {
content: url(//socra.info/assets/img/correct.png);
}
.batsu:before {
content: url(//socra.info/assets/img/incorrect.png);
}
.maru ul {
border-bottom: solid 1px #ccc;
margin-bottom: 1em;
}
.maru ul li,
.batsu ul li {
padding-left: 55px;
line-height: 1.3;
margin-bottom: 1em;
} .pricebox > div > div.panel {
background-color: #fff100;
}
.pricebox > div > div.panel .panel-body {
background-color: #fff100;
}
.pricebox > div > div.panel img {
margin: 0 auto 16px auto;
}
.pricebox > div > div.panel p {
margin: 0;
line-height: 1.2;
font-size: 1.4rem;
padding: 0 1em;
}
.pricebox > div > div.inner {
border: solid 4px #148c3f;
border-radius: 8px;
padding: 24px 36px;
}
.pricebox > div > div.panel .panel-footer {
background-color: #148c3f;
padding: 1em 1.5em;
}
.pricebox > div > div.panel .panel-footer a {
color: #fff100;
font-size: 2rem;
font-weight: 600;
}
.pricebox > div > div.panel .panel-footer a span.pull-right {
line-height: 2;
color: #ff6600;
}
.pricebox > div > div.inner h3 {
margin-top: 0;
margin-bottom: 16px;
color: #148c3f;
font-weight: 600;
}
.pricebox > div > div.inner h3 small {
color: #148c3f;
}
.pricebox > div > div.inner ul li span {
color: #ff6600;
padding-right: 0.5em;
}
.pricebox > div > div.inner ul li a {
color: #148c3f;
margin-right: 2em;
}
.stepbox > div {
position: relative;
}
.stepbox > div::after {
color: #89c997;
content: "\F231";
font-size: 1.1rem;
font-family: "bootstrap-icons";
display: inline-block;
position: absolute;
top: 48%;
left: -10px;
}
.stepbox > div:first-child:after {
content: none;
}
.stepbox > div > div.inbox {
padding: 1em 0.5em;
}
.stepbox > div > div.inbox:before {
font-size: 3.4rem;
font-family: "Century Gothic";
font-weight: 600;
display: block;
position: absolute;
top: -0.8em;
left: -0.1em;
z-index: 100;
color: #148c3f;
}
.stepbox > div:first-child > div.inbox:before {
content: "01";
}
.stepbox > div:nth-child(2) > div.inbox:before {
content: "02";
}
.stepbox > div:nth-child(3) > div.inbox:before {
content: "03";
}
.stepbox > div:nth-child(4) > div.inbox:before {
content: "04";
}
.stepbox > div > div.inbox > h3 {
font-size: 1.8rem;
color: #006666;
margin-top: 16px;
margin-bottom: 24px;
}
.stepbox > div > div.inbox > div {
font-size: 1.4rem;
line-height: 1.5;
} .classes-class {
border-top: dotted 1px rgba(188, 230, 195, 1);
border-bottom: dotted 1px rgba(188, 230, 195, 1);
}
.classes-class p,
.classes-class address {
margin-bottom: 0;
}
.classes-phone::before,
.classes-map::before {
font-family: "bootstrap-icons";
margin-right: 0.5em;
}
.classes-phone::before {
content: "\F5B4";
} .tit-a01 {
position: relative;
display: inline-block;
font-size: 1.5em;
font-weight: 700;
padding: 0 48px;
margin-bottom: 30px;
}
.tit-a01:before,
.tit-a01:after {
content: "";
position: absolute;
top: 50%;
display: inline-block;
width: 44px;
height: 6px;
background-color: rgba(188, 230, 195, 1);
-webkit-transform: rotate(-60deg);
transform: rotate(-60deg);
}
.tit-a01:before {
left: 0;
}
.tit-a01:after {
right: 0;
}
@media screen and (min-width: 769px) {
.tit-a01 {
font-size: 1.6875em;
padding: 0 72px;
}
} .btn-subscription {
background-color: #ff6600;
color: #fff;
transition: all 0.3s;
}
.btn-subscription:hover {
background-color: #ff6600;
color: #fff;
font-weight: 700;
transform: translate(0, -5px);
box-shadow: 0 5px 5px rgba(0, 0, 0, 0.144);
}
.tests-exams .page--header,
.eiken .page--header {
background-repeat: no-repeat;
background-position: right 50%;
background-size: cover;
width: 100vw;
height: 30vh;
text-align: left;
padding: 100px 0;
margin-bottom: 30px;
}
.tests-exams .page--header {
background-image: url(//socra.info/assets/img2312/bg-conh_tests-exams.jpg);
}
.eiken .page--header {
background-image: url(//socra.info/assets/img2312/bg-conh_eiken.jpg);
}
.tests-exams .page--header h1,
.tests-exams .page--header p,
.eiken .page--header h1,
.eiken .page--header p {
color: #fff;
font-weight: 700;
}
@media (min-width: 769px) and (max-width: 990px) {
.tests-exams .page--header,
.eiken .page--header {
background-size: 120%;
height: 40vh;
padding: 145px 0;
}
}
@media (min-width: 991px) {
.tests-exams .page--header,
.eiken .page--header {
height: 55vh;
text-align: left;
padding: 200px 0;
margin-bottom: 30px;
}
}
.page--navgation a {
display: block;
font-weight: 700;
text-decoration: none;
text-align: center;
color: var(--sub-color);
padding: 0.5em;
border-radius: 6px;
transition: all 0.3s;
}
.page--navgation a.bg-pink {
color: #fff;
}
.page--navgation a span::after {
content: "\F229";
font-family: "bootstrap-icons";
color: #fff;
margin-left: 0.5em;
}
.page--navgation a:hover {
transform: translate(0, -5px);
box-shadow: 0 5px 5px rgba(0, 0, 0, 0.144);
}
.point4 h2.pink {
position: relative;
width: fit-content;
padding: 12px 16px;
margin-left: auto;
margin-right: auto;
border-bottom: 4px solid #e61f62;
background-color: #ffffff;
}
.point4 h2.pink::before {
content: "";
position: absolute;
bottom: -5px;
left: 50%;
width: 15px;
height: 15px;
box-sizing: border-box;
background-color: #ffffff;
rotate: 135deg;
translate: -50%;
}
.point4 h2.pink::after {
content: "";
position: absolute;
bottom: -10px;
left: 50%;
z-index: -1;
width: 15px;
height: 15px;
box-sizing: border-box;
border: 4px solid;
border-color: #e61f62 #e61f62 transparent transparent;
background-color: #ffffff;
rotate: 135deg;
translate: -50%;
}
.point6 ol {
counter-reset: original-counter;
list-style: none;
padding: 0;
margin: 0;
}
.point4 ol {
list-style: none;
padding: 0;
margin: 0;
}
.point6 ol li {
position: relative;
}
.point6 ol li:before {
content: counter(original-counter);
counter-increment: original-counter;
background-color: #bce6c3;
border: 1px solid;
border-radius: 50%;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
height: 50px;
width: 50px;
color: #ffffff;
font-size: 85%;
line-height: 1;
position: absolute;
top: 16px;
left: 30px;
z-index: 999;
}
.point6 .card,
.point4 .card {
border: solid 3px #bce6c3;
height: 100%;
z-index: 10;
}
.point6 .card-title {
font-weight: 700;
padding-left: 60px;
}
.point4 .card-title {
font-weight: 700;
color: #148c3f;
padding: 0 0.4em;
margin: 0;
}
.point6 .card-title small {
font-size: 0.875rem;
display: block;
}
.point6 .card-text {
font-size: 1rem;
}
.point6 .card .label {
position: absolute;
top: 8px;
right: 8px;
}
.point6 .card .badge {
font-size: 0.8125rem;
}
.tests {
background-color: #f1fff3;
}
.tests--header {
padding: 1em;
margin: 0 0 24px 0;
text-align: center;
background-color: #ff6600;
color: #fff;
border-radius: 8px;
position: relative;
}
.tests--header::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -15px;
border: 15px solid transparent;
border-top: 15px solid #ff6600;
}
.tests--header dt {
font-size: 1.875em;
letter-spacing: 0.5em;
}
.tests h3 {
color: #148c3f;
}
.tests thead th {
background-color: #148c3f;
color: #fff;
}
.exams {
background-color: #fff6f1;
}
.exams h3 {
color: #e61f62;
font-weight: 700;
}
.exams .card {
height: 100%;
position: relative;
}
.exams .badge {
position: absolute;
top: 1.5em;
right: 1.5em;
}
.exams thead th {
background-color: #e61f62;
color: #fff;
} #recruit {
background-color: rgba(241, 255, 243, 1);
}
@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
#recruit span.text-pink {
font-family: "Inter", sans-serif;
font-optical-sizing: auto;
font-weight: 900;
font-style: normal;
}
#recruit .circle {
width: 100%;
height: 100%;
border-radius: 55% 45% 57% 43% / 51% 50% 50% 49%;
} .visual .carousel-item {
height: 89vh;
}
@media screen and (min-width: 758px) and (max-width: 990px) {
.visual .carousel-item {
height: 82vh;
}
}
@media screen and (min-width: 991px) {
.visual .carousel-item {
height: 87vh;
}
} .visual .slide_taiken {
background: url(//socra.info/assets/img2312/slide600800_01.jpg) no-repeat 30% 30%;
background-size: cover;
}
@media screen and (orientation: portrait) and (min-width: 758px) and (max-width: 1024px) {
.visual .slide_taiken {
background: url(//socra.info/assets/img2312/slide600800_01.jpg) no-repeat left 50%;
background-size: 80%;
}
}
@media screen and (orientation: landscape) and (min-width: 1024px) {
.visual .slide_taiken {
background: url(//socra.info/assets/img2312/slide1920800_01.jpg) no-repeat left 50%;
background-size: cover;
}
} .visual .slide_kentei {
background: url(//socra.info/assets/img2312/slide600800_02.jpg) no-repeat 30% 30%;
background-size: cover;
}
@media screen and (orientation: portrait) and (min-width: 758px) and (max-width: 1024px) {
.visual .slide_kentei {
background: url(//socra.info/assets/img2312/slide600800_02.jpg) no-repeat left 50%;
background-size: 100%;
}
}
@media screen and (orientation: landscape) and (min-width: 1024px) {
.visual .slide_kentei {
background: url(//socra.info/assets/img2312/slide1920800_02.jpg) no-repeat left 50%;
background-size: cover;
}
} .visual .slide_campain a {
display: block;
width: 100%;
height: 100%;
background: url(//socra.info/assets/img2312/2026spring/slide600800_03.png) no-repeat center 50%;
background-size: 90%;
}
@media screen and (orientation: portrait) and (min-width: 758px) and (max-width: 1024px) {
.visual .slide_campain a {
background: url(//socra.info/assets/img2312/2026spring/slide600800_03.png) no-repeat center 50%;
background-size: 75%;
}
}
@media screen and (orientation: landscape) and (min-width: 1024px) {
.visual .slide_campain a {
background: url(//socra.info/assets/img2312/2026spring/slide1920800_03.png) no-repeat center 50%;
background-size: 80%;
}
}