@charset "utf-8";
/* CSS Document */
/* -------------------------
/* Created date: 2022.09.09
/* Created user: yamaguchi
/* Last up date:
/* Last up date user:
/* for sp and pc
--------------------------*/
/* ======== newschool common start ================*/
:root {
--usuGreen: #daf2ea;
--honnoriGreen: #f2faf9;
--svgSearch: url('data:image/svg+xml;utf8,') center / contain no-repeat;
/* shuushoku bag */
--svgBusinessW: url('data:image/svg+xml;utf8,');
--svgBusinessG: url('data:image/svg+xml;utf8,');
/* event */
--svgEventG: url('data:image/svg+xml;utf8,');
--svgEventW: url('data:image/svg+xml;utf8,');
--svgEventY: url('data:image/svg+xml;utf8,');
/* nyuushi */
--svgRonbunW: url('data:image/svg+xml;utf8,');
--svgRonbunG: url('data:image/svg+xml;utf8,');
/* pump */
--svgPumpW: url('data:image/svg+xml;utf8,');
--svgPumpG: url('data:image/svg+xml;utf8,');
/* Kuchikomi */
--svgKuchikomiW: url('data:image/svg+xml;utf8,');
--svgKuchikomiG: url('data:image/svg+xml;utf8,');
--dropShadowBokashi: 0 2px 5px 0 rgba(0, 0, 0, 0.15);
--contentsWidth: 900px;
--imageMaxWidth: 320px;
--paddingMax: 88px;
--paddingMid: 56px;
--paddingMin: 32px;
--paddingMinMin: 16px;
}
body {
-webkit-print-color-adjust: exact;
}
.newSchool .scHead {
--heartSize: 40px;
}
.newSchool .swiper-button-next,
.newSchool .swiper-button-prev {
width: 50px;
height: 50px;
border-radius: 50%;
background: rgba(0, 0, 0, 0.35);
color: #fff;
}
.newSchool .swiper-button-prev {
left: 2px;
}
.newSchool .swiper-button-next {
right: 2px;
}
.newSchool .swiper-button-next:after,
.newSchool .swiper-button-prev:after {
font-size: 30px;
}
.newSchool .swiper-pagination-bullet-active {
background: rgb(var(--naviBlue));
}
.noslide .swiper-button-next,
.noslide .swiper-button-prev {
display: none;
}
.noslide .swiper-wrapper {
justify-content: center;
}
.panNavi {
background: #fff;
}
/* Contents Block ---- */
.scCnt {
margin: 0 auto var(--paddingMid);
}
.scSec {
margin: 0 auto var(--paddingMid);
}
/* line no aru title */
.scLineTitle {
display: block;
margin: 0 auto var(--paddingMin);
max-width: var(--contentsWidth);
font-size: 2.2rem;
text-align: center;
font-weight: bold;
overflow: hidden;
}
.scLineTitle span {
position: relative;
display: inline-block;
padding: 0 5px;
line-height: 1.2;
}
.scLineTitle span::before,
.scLineTitle span::after {
content: '';
top: 50%;
left: 100%;
width: 200vw;
height: 1px;
background: #888;
}
.scLineTitle span::after {
left: auto;
right: 100%;
}
.scCnt .itemTitle {
font-weight: bold;
word-break: break-all;
line-height: 1.4;
}
.scCnt .itemText {
word-wrap: break-word;
line-height: 1.8;
}
.scCnt .itemText p {
word-wrap: break-word;
line-height: inherit;
}
/* under line no aru title */
.scCnt .schoolUnderLineTitle {
margin: 0 auto 30px;
padding: 0 var(--paddingMinMin) 2px;
border-bottom: 3px solid rgb(var(--gsGreen));
text-align: center;
font-size: 1.8rem;
line-height: 1.2;
color: rgb(var(--gsGreen));
}
/* simple na title */
.scCnt .scTtl {
margin: 0 auto var(--paddingMinMin);
font-size: 2.4rem;
line-height: 1.2;
text-align: center;
font-weight: bold;
}
.scCnt .scName {
display: block;
font-size: 60%;
}
/* eigo no komidashi */
.withSup {
position: relative;
padding-top: 2.5em;
text-align: center;
font-size: 1.2rem;
overflow: hidden;
}
.withSup p {
position: absolute;
top: 0;
left: 50%;
color: rgb(var(--gsGreen));
font-weight: bold;
font-size: 1.2rem;
transform: translate(-55%, 0.75em) rotate(-7deg);
transform-origin: center center;
}
.withSup p::before {
content: '';
top: 0;
left: 100%;
width: 0.8em;
height: 1em;
background: var(--svgManpuGreen);
transform: translate(2px, 0) rotate(15deg);
}
.withSup span {
position: relative;
display: inline-block;
}
.withSup span::before,
.withSup span::after {
content: '';
top: 50%;
left: calc(100% + 5px);
width: 15vw;
max-width: 250px;
height: 1px;
background: #333;
}
.withSup span::after {
left: auto;
right: calc(100% + 5px);
}
/* 歓声 cheers */
.scCnt .cheers {
position: relative;
display: inline-block;
margin: 0 auto;
padding: 0 1em;
line-height: 1.2;
}
.scCnt h2 .cheers {
font-size: 2rem;
}
.scCnt .cheers em {
padding: 0 3px;
background: linear-gradient(to top, rgb(var(--naviCream)) 1.2rem, rgba(255, 255, 255, 0) 15px);
}
.scCnt .cheers::before,
.scCnt .cheers::after {
content: '';
bottom: 0;
left: 0;
width: 0.8em;
height: 100%;
background: url('data:image/svg+xml;utf8,') left bottom / 100% auto no-repeat;
}
.scCnt .cheers::after {
left: auto;
right: 0;
transform: scale(-1, 1);
}
/* 傍点 emphasis */
.scCnt .emp {
position: relative;
display: inline-block;
padding: 10px 0 0;
}
.scCnt .emp::before {
content: '';
top: 0;
left: 50%;
width: 4px;
height: 4px;
background: rgb(var(--gsGreen));
border-radius: 50%;
transform: translateX(-50%);
}
/* 続きを見る */
.scCnt .moreText {
transition: all 0.25s 0s ease;
}
.scCnt .moreReadBar {
cursor: pointer;
position: absolute;
bottom: 0;
right: 0;
padding: 5px 15px;
width: 100%;
padding: 10px 15px 12px;
background: repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.1) 0 6px, rgba(255, 255, 255, 0) 6px 12px), rgb(var(--gsGreen));
border: 0;
text-align: center;
transition: all 0.25s 0s ease;
}
.scCnt .moreReadBar .moreDown {
position: relative;
display: inline-block;
padding: 0 30px 0 0;
text-align: center;
font-weight: normal;
font-weight: 400;
color: #fff;
font-weight: bold;
transition: all 0.25s 0s ease;
}
.scCnt .moreReadBar .moreDown::before {
content: '';
top: 50%;
right: 0.5em;
width: 0.65em;
height: 0.65em;
border-bottom: solid 2px #fff;
border-right: solid 2px #fff;
transform: translateY(-50%) rotate(45deg);
transition: all 0.25s 0s ease;
}
.scCnt .on .moreReadBar {
background: none;
box-shadow: none;
border-top: solid 1px #fff;
}
.scCnt .on .moreDown {
background: none;
color: rgb(var(--gsGreen));
}
.scCnt .on .moreDown::before {
border-color: rgb(var(--gsGreen));
transform: translate(0, calc(-50% + 3px)) rotate(-135deg);
}
.scCnt .on .moreText {
max-height: inherit;
-webkit-line-clamp: inherit;
}
/* fukidashi no aru botan*/
.btnFukidashi {
position: relative;
margin: 0 auto;
text-align: center;
}
.btnFukidashi a {
display: inline-block;
}
.btnFukidashi .itemFukidashi {
position: relative;
z-index: 2;
display: inline-block;
margin: 0 auto 5px;
}
.btnFukidashi .itemFukidashi::before,
.btnFukidashi .itemFukidashi::after {
content: '';
top: 0;
right: -15px;
width: 10px;
height: 20px;
background: var(--svgManpuGreen);
transform: rotate(15deg);
}
.btnFukidashi .itemFukidashi span {
position: relative;
display: block;
padding: 5px 1em;
background: rgb(var(--naviCream));
border-radius: 2em;
color: #333;
font-size: 1.3rem;
line-height: 1.2;
text-align: center;
font-weight: bold;
}
.btnFukidashi .itemFukidashi span::before {
content: '';
top: 100%;
left: 30px;
width: 15px;
height: 15px;
background: url('data:image/svg+xml;utf8,') center top / contain no-repeat;
transform: scale(-1, 1);
}
.btnFukidashi .itemFukidashi::after {
right: inherit;
left: -15px;
transform: rotate(-15deg) scale(-1, 1);
}
.btnFukidashi .itemBtn {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 100%;
align-items: center;
justify-content: center;
margin: 0 auto;
padding: 5px 1.5em 5px 1em;
width: clamp(250px, 70%, 350px);
min-height: 50px;
background: rgb(var(--gsGreen));
border-radius: 8px;
box-shadow: var(--btnSahdow);
color: #fff;
font-size: 1.6rem;
line-height: 1.2;
font-weight: bold;
text-align: center;
}
.btnFukidashi .itemBtn::before {
content: '';
top: 50%;
right: 10px;
width: 10px;
height: 10px;
border-right: solid 2px #fff;
border-bottom: solid 2px #fff;
font-weight: bold;
transform: translateY(-50%) rotate(-45deg);
}
/* School scHead ----------------------- */
.scHead {
display: grid;
gap: 5px;
margin: 0 auto;
padding: 5px var(--paddingMinMin);
width: 100%;
}
.scHead .scMainTtl {
display: grid;
gap: 5px;
margin: 0 auto 5px;
width: 100%;
max-width: var(--outerWidth);
container: scMainTtl / inline-size;
}
.scHead .scMainTtl .prefList {
display: flex;
flex-wrap: wrap;
gap: 5px 10px;
}
.scHead .scMainTtl .prefList li {
position: relative;
display: grid;
place-content: center;
font-size: 1.2rem;
line-height: 1.2;
}
.scHead .scMainTtl .prefList li+li::before {
content: '';
top: 50%;
left: 0;
width: 1px;
height: 1em;
background: #888;
transform: translate(-5px, -50%);
}
.scHead .scMainTtl .prefList li:nth-child(2):before {
content: none;
}
.scHead .scMainTtl .cate {
padding: 2px 5px;
background: rgb(var(--daitanBlue));
color: #fff;
}
.scHead .scMainTtl .cate_13,
.scHead .scMainTtl .cate_17 {
background: rgb(var(--senmonYellow));
}
.scHead .scMainTtl .inner {
display: grid;
gap: 8px;
grid-template-columns: auto var(--heartSize);
min-height: var(--heartSize);
}
.scHead .scMainTtl .inner div:nth-child(1) {
align-self: center;
grid-area: 1 / 1 / 2 / 2;
}
.scHead .scMainTtl .inner div:nth-child(2) {
grid-area: 1 / 2 / 2 / 3;
}
.scHead .scMainTtl h2 {
font-size: 2.2rem;
line-height: 1.1;
word-break: break-all;
}
.scHead .scMainTtl .actionTtl {
display: inline-block;
font-size: 1.4rem;
line-height: 1.2;
}
.scHead .scMainTtl .memo {
font-size: 1.2rem;
line-height: 1.2;
word-break: break-all;
}
/* Shiryou seikyuu */
.scBtns {
display: grid;
gap: 8px;
margin: 0 auto;
width: 100%;
max-width: var(--outerWidth);
container: scBtns / inline-size;
}
.scFoot {
margin: 0 auto;
padding: var(--paddingMid) var(--paddingMinMin);
}
.scMainBtn {
display: grid;
grid-auto-flow: column;
justify-self: flex-end;
place-content: center;
grid-template-columns: 3fr 2fr;
gap: 8px;
width: 100%;
max-width: 560px;
}
.scFoot .scMainBtn {
grid-template-columns: 3fr auto;
max-width: 500px;
}
.scMainBtn .addBoxBtn {
width: 100%;
max-width: 400px;
min-height: 50px;
font-size: 1.6rem;
}
.bigBtn .addBoxBtn {
margin: 0 auto;
}
.scMainBtn .opBtn {
position: relative;
display: grid;
min-height: 45px;
line-height: 1.2;
font-weight: bold;
}
.scMainBtn .opBtn.off {
justify-content: center;
padding: 5px 10px;
border-radius: 8px;
background: rgb(var(--naviGray));
color: #fff;
}
.scMainBtn .opBtn a {
position: relative;
display: grid;
place-content: center;
gap: 5px;
padding: 5px 10px;
width: 100%;
height: 100%;
background: rgb(var(--ocYellow));
border-radius: 8px;
box-shadow: var(--btnSahdow);
line-height: 1.2;
font-weight: bold;
font-size: 1.4rem;
text-align: center;
color: #fff;
}
.scMainBtn.diffMainBtn .addBoxBtnWrap {
grid-area: 1 / 1 / 2 / 2;
}
.scMainBtn.diffMainBtn .opBtn {
grid-area: 1 / 2 / 2 / 3;
}
.scMainBtn.diffMainBtn .notPampNavi {
grid-area: 2 / 1 / 3 / 3;
}
.scFoot .saveSchoolBtn .saveSchoolBtnInner {
min-height: 50px;
}
.scFoot .saveSchoolBtn span {
position: relative;
display: grid;
align-items: center;
position: relative;
padding: 2px 1em;
min-height: 46px;
border-radius: 8px;
font-size: 1.3rem;
line-height: 1.4;
font-weight: bold;
}
.scFoot .saveSchoolBtn span::before,
.scFoot .saveSchoolBtn span::after {
content: '';
bottom: 90%;
left: 0.25em;
width: 1em;
height: 1px;
background: #333;
transform: rotate(-35deg);
}
.scFoot .saveSchoolBtn span::after {
bottom: auto;
top: 90%;
transform: rotate(35deg);
}
.scMainBtn .opBtnWrap {
min-height: auto;
height: 45px;
}
.scMainBtn .opBtn {
display: grid;
align-items: center;
justify-content: center;
grid-template-columns: 100%;
width: 100%;
height: 100%;
color: #fff;
line-height: 1.2;
font-weight: bold;
text-align: center;
}
.scMainBtn .opBtn .inner {
display: grid;
place-content: center;
padding: 5px;
width: 100%;
height: 100%;
background: rgb(var(--ocYellow));
border-radius: 8px;
box-shadow: var(--btnSahdow);
font-size: 1.5rem;
line-height: 1.1;
font-weight: bold;
text-align: center;
color: #fff;
}
.scMainBtn .opBtn.off .inner {
background: rgb(var(--naviGray));
box-shadow: none;
}
/* menu Links */
.scBtns .scGloMenu {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 4px 3px;
margin: 0 auto;
width: 100%;
}
.scBtns .scGloMenu li {
position: relative;
}
.scBtns .scGloMenu .inner {
display: grid;
place-content: center;
padding: 5px 3px;
height: 100%;
min-height: 32px;
border: solid 1px rgb(var(--gsGreen));
border-radius: 8px;
box-shadow: var(--btnSahdow);
font-weight: bold;
line-height: 1.1;
color: rgb(var(--gsGreen));
text-align: center;
}
.scBtns .scGloMenu .on .inner {
background: #fff;
border-color: #fff;
box-shadow: none;
color: rgb(var(--gsGreen));
}
.scBtns .scGloMenu .off .inner {
background: rgb(var(--naviGray));
border-color: rgb(var(--naviGray));
box-shadow: none;
color: #fff;
}
.scCnt .pageTtl {
padding: 16px var(--paddingMinMin) 8px;
border-bottom: solid 1px #efefef;
}
.scCnt .pageTtl h2 {
margin: 0 auto;
font-size: 1.8rem;
line-height: 1.2;
max-width: var(--outerWidth);
}
/* menu Links */
.scCnt .scFoot {
padding: 0 var(--paddingMinMin) var(--paddingMin);
}
/* school kihon jouhou*/
.schoolAccess {
margin: 0 auto var(--paddingMid);
padding: var(--paddingMin) var(--paddingMinMin);
width: calc(100% - var(--paddingMin));
max-width: var(--innerWidth);
background: var(--honnoriGreen);
border-radius: 1rem;
}
.schoolAccess .schoolCampass {
margin: 0 auto;
width: 100%;
max-width: var(--contentsWidth);
min-height: 100%;
background: #fff;
}
.schoolAccess .schoolCampass h4 {
margin: 0 auto;
padding: 5px 15px;
background: rgb(var(--gsGreen));
color: #fff;
font-size: 1.6rem;
line-height: 1.2;
text-align: left;
}
.schoolAccess .campusCommon {
padding: 0 5px;
}
.schoolAccess .campusCommon table {
width: 100%;
}
.schoolAccess .campusCommon tr {
border-bottom: 1px solid rgb(var(--gsGreen));
}
.schoolAccess .campusCommon th {
padding: 20px 5px;
vertical-align: middle;
font-weight: bold;
font-size: 1.3rem;
line-height: 1.4;
}
.schoolAccess .campusCommon td {
padding: 20px 5px;
vertical-align: middle;
font-size: 1.3rem;
line-height: 1.4;
}
.schoolAccess .campusCommon a {
text-decoration: underline;
color: rgb(var(--naviKoiBlue));
}
.schoolAccess .campusEach {
padding: 0 5px;
}
.schoolAccess .campusEach li {
padding: 25px 5px;
}
.schoolAccess .campusEach li+li {
border-top: 1px solid rgb(var(--gsGreen));
}
.schoolAccess .campusEach h5 {
margin: 0 auto 5px;
padding: 0 5px;
line-height: 1.4;
}
.schoolAccess .campusEach p {
margin: 0 auto var(--paddingMinMin);
font-size: 1.2rem;
line-height: 1.4;
}
.schoolAccess .campusEach h5+table {
margin-top: 10px;
}
.schoolAccess .campusEach table {
width: 100%;
table-layout: fixed;
}
.schoolAccess .campusEach th {
padding: 20px .5em;
width: 6em;
background: #e6e6e6;
border: solid 1px #fff;
font-weight: bold;
text-align: center;
font-size: 1.3rem;
line-height: 1.4;
}
.schoolAccess .campusEach td {
padding: 20px 5px;
border: solid 1px #e6e6e6;
font-size: 1.3rem;
line-height: 1.4;
}
.schoolAccess .campusEach a {
text-decoration: underline;
color: rgb(var(--naviKoiBlue));
}
.schoolAccess .campusEach a[target="_blank"] {
padding-right: 1.5em;
background: var(--svgGaibuLinkBlue);
background-position: right center;
background-size: 1em auto;
}
.newSchool .newSchSide {
display: grid;
gap: 24px;
padding-top: var(--paddingMid);
background: rgb(var(--naviUsuGray));
container: newSchSideBox / inline-size;
}
.newSchool .newSchSide section {
margin: 0 auto;
padding-bottom: 24px;
width: min(100cqw, 900px);
overflow: hidden;
}
.newSchSide h3 {
position: relative;
margin: 0 auto;
padding: 2px 16px;
width: fit-content;
border: solid 1px rgb(var(--naviBlue));
text-align: center;
line-height: 1.3;
font-size: 1.3rem;
color: rgb(var(--naviKoiBlue));
}
.newSchSide .scThmbList {
position: relative;
display: flex;
align-items: center;
margin: 0 auto;
padding: 16px;
overflow-y: hidden;
overflow-x: auto;
scroll-behavior: smooth;
}
.newSchSide .scThmbList::-webkit-scrollbar {
height: 18px;
}
.newSchSide .scThmbList::-webkit-scrollbar-track {
margin: 0 16px;
background: #ccc;
border: 4px solid rgb(var(--naviUsuGray));
border-radius: 18px;
}
.newSchSide .scThmbList::-webkit-scrollbar-thumb {
background: #fff;
/* border: solid 2px #999; */
margin: 0 2px;
border-radius: 18px;
border: solid 2px rgb(var(--naviBlue));
box-shadow: 2px 0 2px 0 rgba(0, 0, 0, 0.25);
background-clip: padding-box;
}
.newSchSide .scThmbList>li {
flex-shrink: 0;
position: relative;
padding: 0 8px 8px;
width: 140px;
}
.newSchSide .scThmbList .rcmdRival {
padding: 20px 12px 12px;
width: 180px;
}
.newSchSide .scThmbList .rcmdRival::before,
.newSchSide .scThmbList .rcmdRival::after {
content: '';
z-index: 3;
width: 50px;
height: 50px;
background: url('../../../img/page/newschool/bg_kirakira.svg') center / contain no-repeat;
}
.newSchSide .scThmbList .rcmdRival::before {
top: 0;
left: 0;
animation: kirakiraring 1.25s 0s linear infinite;
}
@keyframes kirakiraring {
0% {
opacity: 1;
}
10% {
opacity: 1;
}
40% {
opacity: 0;
}
60% {
opacity: 0;
}
90% {
opacity: 1;
}
100% {
opacity: 1;
}
}
.newSchSide .scThmbList .rcmdRival::after {
bottom: 0;
right: 0;
transform: scale(-1, -1);
animation: kirakiraring 1.25s 0.75s linear infinite;
}
.newSchSide .scThmbList a {
position: relative;
z-index: 2;
display: grid;
grid-template-rows: auto auto;
align-self: flex-start;
gap: 5px;
padding-bottom: 5px;
height: 100%;
background: #fff;
box-shadow: 0 0 0 1px rgb(var(--naviGray)) inset;
box-shadow: var(--dropShadowBokashi);
white-space: normal;
}
.newSchSide .scThmbList figure {
position: relative;
aspect-ratio: 4 / 3;
overflow: hidden;
}
.newSchSide .scThmbList img {
width: 100%;
height: 100%;
object-fit: cover;
}
.newSchSide .scThmbList .rcmdTxt {
position: absolute;
z-index: 4;
top: 0;
left: 50%;
display: block;
padding: 4px;
width: 70%;
background: linear-gradient(45deg, rgb(var(--naviKoiBlue)) 50%, rgb(var(--naviEmerald)) 100%);
border-radius: 2em;
filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.25));
font-weight: bold;
text-align: center;
color: #fff;
transform: translate(-50%, -60%);
}
.newSchSide .scThmbList .rcmdTxt::before {
content: '';
top: 100%;
left: 50%;
width: 15px;
height: 8px;
background: rgb(var(--naviKoiBlue));
clip-path: polygon(0 0, 50% 100%, 100% 0);
transform: translate(-50%, -2px);
}
.newSchSide .scThmbList .attribute {
display: flex;
flex-wrap: wrap;
align-self: flex-start;
gap: 3px;
width: 100%;
}
.newSchSide .scThmbList .attribute li {
padding: 2px;
font-size: 1.1rem;
}
.newSchSide .scThmbList .attribute .cateName {
background: rgb(var(--daitanBlue));
color: #fff;
}
.newSchSide .scThmbList .attribute .cate_13,
.newSchSide .scThmbList .attribute .cate_17 {
background: rgb(var(--senmonYellow));
}
.newSchSide .scThmbList .attribute .prefName {
background: #888;
color: #fff;
}
.newSchSide .scThmbList .photoName {
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
font-size: 1.2rem;
line-height: 1.2;
padding: 0 5px;
width: 100%;
height: 2.4em;
}
.newSchSide .scThmbList .bannerText {
position: relative;
align-self: flex-end;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
font-size: 1.3rem;
line-height: 1.4;
padding: 0 5px;
height: 2.8em;
font-weight: bold;
}
.newSchSide .scThmbList .itemOsusume {
position: absolute;
z-index: 4;
bottom: 100%;
left: 0;
display: inline-block;
align-items: center;
padding: 3px 5px;
background: #666;
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
font-size: 1.1rem;
color: #fff;
font-weight: bold;
text-align: left;
transform: translate(-5px, 3px);
white-space: nowrap;
}
.newSchSide .scThmbList .itemOsusume::before {
content: '';
top: 100%;
left: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 0 5px 5px 0;
border-color: rgba(255, 255, 255, 0) #b3b3b3 rgba(255, 255, 255, 0) rgba(255, 255, 255, 0);
}
/* desital pump */
.scPumpSlide {
position: relative;
margin: 0 auto;
max-width: var(--contentsWidth);
background: url('../../../img/page/newschool/bg_hon.png') center calc(100% - 60px) / 1000px auto repeat-x, linear-gradient(to top, rgba(248, 181, 81, 0.4) 40px, rgba(248, 181, 81, 0.6) 65px, rgba(255, 255, 255, 0) 65px), rgb(var(--naviCream));
border-radius: 1rem;
container: scPumpSlide / inline-size;
}
.scPumpSlide .swiper-slide {
position: relative;
width: 100cqw;
max-width: 400px;
scroll-snap-align: start;
flex-shrink: 0;
padding: 0 30px 15px;
height: 100%;
background: url('../../../img/page/newschool/bg_book_bottom.png') center calc(100% - 15px) / calc(100% - 10px) 80px no-repeat,
url('../../../img/page/newschool/bg_book_middle.png') center 50px / calc(100% - 10px) calc(100% - 130px) no-repeat,
url('../../../img/page/newschool/bg_book_top.png') center top / calc(100% - 10px) 50px no-repeat;
filter: drop-shadow(0 5px 15px rgba(255, 170, 0, 0.5));
}
.scPumpSlide .swiper-slide::after {
content: '';
bottom: 50px;
left: 50%;
width: 95%;
height: 4px;
background: #f5ede7;
border: solid 1px #b5b3b1;
border-width: 1px 3px 1px 3px;
border-radius: 1px;
transform: translateX(-50%);
}
.scPumpSlide .swiper-slide a {
display: grid;
grid-template-columns: 45% auto;
align-items: center;
justify-content: center;
padding: 30px 0 45px;
min-height: 300px;
}
.scPumpSlide .swiper-slide figure {
grid-area: 1 / 1 / 3 / 2;
transform: rotate(-7deg);
}
.scPumpSlide .swiper-slide figure img {
width: 100%;
object-fit: cover;
box-shadow: var(--dropShadowBokashi)
}
.scPumpSlide .swiper-slide .itemRight {
position: relative;
grid-area: 1 / 2 / 3 / 3;
display: grid;
grid-template-columns: 100%;
gap: 8px;
align-content: space-between;
padding: 25px 0 25px 10px;
}
.scPumpSlide .swiper-slide .itemRight::before,
.scPumpSlide .swiper-slide .itemRight::after {
content: '';
top: 0;
right: -10px;
width: 20px;
height: 30px;
background: url('data:image/svg+xml;utf8,') left center / contain no-repeat;
transform: rotate(-15deg);
}
.scPumpSlide .swiper-slide .itemRight::after {
right: inherit;
left: -5px;
transform: rotate(15deg) scale(-1, 1);
}
.scPumpSlide .swiper-slide * {
line-height: 1.2;
font-weight: bold;
}
.scCnt .scPumpSlide .swiper-slide .itemTitle {
font-size: 2rem;
}
.scPumpSlide .swiper-slide .itemBtn {
position: relative;
grid-area: 2 / 1 / 3 / 3;
display: grid;
place-content: center;
padding: 5px 17px 5px 5px;
min-height: 35px;
background: rgb(var(--naviEmerald));
border-radius: 8px;
box-shadow: var(--btnSahdow);
color: #fff;
text-align: left;
font-size: 1.6rem;
}
.scPumpSlide .swiper-slide li:nth-child(even) .itemBtn {
background: #f58a8a;
}
.scPumpSlide .swiper-slide .itemBtn::before {
content: '';
top: 50%;
right: 10px;
width: 10px;
height: 10px;
border-right: solid 2px #fff;
border-bottom: solid 2px #fff;
font-weight: bold;
transform: translateY(-50%) rotate(-45deg);
}
.scPumpSlide.noslide .swiper-wrapper {
justify-content: center;
}
/* Calender Slide */
.scCalender {
--svgFlagRed: url('data:image/svg+xml;utf8,') center / contain no-repeat;
--svgFlagEmerald: url('data:image/svg+xml;utf8,') center / contain no-repeat;
}
.scCalender .scCalSlide {
position: relative;
margin: 0 auto;
max-width: 800px;
container: scCalSlide / inline-size;
}
.scCalSlide .swiper {
width: 95%;
max-width: 95cqw;
}
.scCalender .scCalSlide .swiper-slide {
padding: 0 15px;
}
.scCalender .swiper-button-next,
.scCalender .swiper-button-prev {
top: calc(var(--swiper-navigation-size)/ 2);
}
.scCalender h4 {
margin: 0 auto;
font-size: 2.4rem;
text-align: center;
}
.scCalender h4 span {
padding-left: 5px;
font-size: 3rem;
}
.scCalender table {
position: relative;
margin: 30px auto;
width: 100%;
max-width: 370px;
background: #fff;
table-layout: fixed;
}
.scCalender table::before {
content: '';
bottom: 100%;
left: 50%;
width: 3em;
height: 3em;
background: url('data:image/svg+xml;utf8,') center bottom / contain no-repeat;
background-position: center bottom;
transform: translate(-50%, 1px);
}
.scCalender th,
.scCalender td {
text-align: center;
}
.scCalender th {
padding: 5px 0;
background: rgb(var(--ocYellow));
border: solid 1px rgb(var(--ocYellow));
color: #fff;
font-size: 1.5rem;
font-weight: bold;
}
.scCalender th:first-child,
.scCalender td:first-child .itemDay {
color: rgb(var(--naviRed));
}
.scCalender th:last-child,
.scCalender td:last-child .itemDay {
color: rgb(var(--naviKoiBlue));
}
.scCalender td {
height: 4em;
border: solid 1px rgb(var(--ocYellow));
vertical-align: top;
font-size: 1.3rem;
}
.scCalender .eventDay {
position: relative;
--svgSankakuki: url('data:image/svg+xml;utf8,') center top / contain no-repeat;
overflow: hidden;
}
.scCalender .eventDay::before,
.scCalender .eventDay::after {
content: '';
z-index: 1;
top: 0;
left: 0;
width: 130%;
height: 100%;
background: var(--svgSankakuki);
transform: translate(-70%, 0);
}
.scCalender .eventDay::after {
left: auto;
right: 0;
transform: translate(70%, 0) scale(-1, 1);
}
.scCalender td>div {
display: grid;
grid-template-columns: 100%;
justify-content: center;
align-content: space-between;
gap: 5px;
padding: 5px 3px;
height: 100%;
}
.scCalender .itemDay {
position: relative;
z-index: 2;
padding: 5px 2px 0;
font-size: 1.2rem;
}
.scCalender .itemName {
display: none;
}
.scCalender .itemDay+div {
display: flex;
justify-content: center;
gap: 2px;
min-height: 1.5em;
}
.scCalender .itemDay+div a,
.scCalender .itemDay+div p {
position: relative;
width: 50%;
height: 100%;
}
.scCalender .itemDay+div a p {
width: 100%;
height: 100%;
}
.scCalender .itemDay+div .itemType {
position: relative;
padding: 4px 0 4px 3px;
filter: drop-shadow(1px 1px 0 #fff) drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.15));
}
.scCalender .itemDay+div .itemType::before {
content: '';
top: 0;
left: 1px;
width: 2px;
height: 100%;
background: #999;
}
.scCalender .itemDay+div .itemType::after {
content: '';
top: 0;
left: 0;
width: 4px;
height: 4px;
background: #999;
border-radius: 50%;
}
.scCalender .itemDay+div .itemCount {
position: relative;
display: block;
padding: 1px 0;
width: 100%;
background: rgb(var(--naviRed));
border-left: 1px solid #fff;
font-size: 1rem;
font-weight: bold;
color: #fff;
text-align: center;
}
.scCalender .itemDay+div .itemType2 .itemCount {
background: rgb(var(--naviEmerald));
}
.scCalender .typeList {
display: flex;
justify-content: center;
gap: 15px;
padding: 5px;
background: rgba(255, 255, 255, 0.5);
}
.scCalender .typeList li {
position: relative;
padding: 0 0 3px 25px;
text-align: left;
font-weight: bold;
font-size: 1.3rem;
letter-spacing: normal;
}
.scCalender .typeList .itemType::before {
content: '';
top: 0;
left: 1px;
width: 2px;
height: 100%;
background: #999;
}
.scCalender .typeList .itemType::after {
content: '';
top: 0;
left: 0;
width: 4px;
height: 4px;
background: #999;
border-radius: 50%;
}
.scCalender .typeList .itemType span::before {
content: '';
top: 3px;
left: 4px;
width: 15px;
height: 11px;
background: rgb(var(--naviRed));
}
.scCalender .typeList .itemType2 span::before {
background: rgb(var(--naviEmerald));
}
/* soon event slide */
.soonSlide {
position: relative;
margin: 0 auto;
padding: 0 0 30px;
width: 100%;
max-width: 870px;
container: soonSlide / inline-size;
}
.soonSlide .swiper {
width: 100%;
max-width: 100cqw;
container: soonSlideSwiper / inline-size;
}
.soonSlide .swiper-slide {
padding: 5px 10px 15px;
width: 80cqw;
max-width: 290px;
height: auto;
}
.soonSlide .swiper-slide a {
display: grid;
height: 100%;
background: #fff;
border-radius: 16px;
box-shadow: var(--dropShadowBokashi);
}
.scEventSlide.soonSlide .swiper-slide a {
grid-template-rows: 200px auto;
}
.scSoon .soonSlide figure {
position: relative;
width: 100%;
background: #fafafa;
border-radius: 16px 16px 0 0;
overflow: hidden;
text-align: center;
}
.scSoon .soonSlide figure img {
position: relative;
z-index: 2;
width: 100%;
height: 100%;
object-fit: cover;
}
.scSoon .soonSlide .noimage {
display: grid;
grid-template-columns: 100%;
place-content: center;
background: #ededed;
}
.scSoon .soonSlide .eventText {
align-self: flex-end;
display: grid;
gap: 5px;
padding: 1rem;
height: 100%;
text-align: left;
}
.scSoon .soonSlide .eventType {
align-self: flex-start;
display: flex;
gap: 5px;
}
.scSoon .soonSlide .eventType li {
padding: 3px 5px;
background: #fff;
border: solid 1px #888;
font-size: 1.1rem;
font-weight: bold;
}
.scSoon .soonSlide .eventName {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
max-height: 4.2em;
font-size: 1.6rem;
line-height: 1.4;
color: rgb(var(--naviKoiBlue));
word-break: break-all;
}
.scSoon .soonSlide .dateText {
align-self: flex-end;
padding: 2px 8px;
background: rgb(var(--naviCream));
border-radius: 2em;
text-align: center;
}
.scSoon .soonSlide .dateText span {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
overflow: hidden;
font-size: 1.2rem;
line-height: 1.4;
max-height: 1.4em;
font-weight: bold;
word-break: break-all;
}
.scInfoSlide a {
gap: 15px;
padding: 15px 10px;
}
.scInfoSlide .itemTitle {
align-self: flex-start;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 5px;
padding: 0 0 2px;
border-bottom: 2px solid rgb(var(--ocYellow));
text-align: center;
font-size: 1.8rem;
line-height: 1.2;
text-align: left;
}
.scInfoSlide .itemTitle h4 {
position: relative;
padding: 0 0 0 1.5em;
line-height: 1.2;
font-size: 1.3rem;
}
.scInfoSlide .itemTitle h4::before {
content: '';
top: 0.25em;
left: 0.25em;
width: 0.85em;
height: 0.5em;
border-left: solid 2px rgb(var(--ocYellow));
border-bottom: solid 2px rgb(var(--ocYellow));
transform: rotate(-45deg);
}
.scInfoSlide .itemTitle .itemArea {
padding: 3px;
background: #32a8a0;
border-radius: 3px;
color: #fff;
font-weight: bold;
font-size: 1.2rem;
}
.scInfoSlide .itemTitle .itemArea1 {
background: #32ade2;
}
.scInfoSlide .itemTitle .itemArea2 {
background: #60b051;
}
.scInfoSlide .itemTitle .itemArea3 {
background: #32a8a0;
}
.scInfoSlide .itemTitle .itemArea4 {
background: #a2c639;
}
.scInfoSlide .itemTitle .itemArea5 {
background: #fcb646;
}
.scInfoSlide .itemTitle .itemArea6 {
background: #e8623b;
}
.scInfoSlide .itemTitle .itemArea7 {
background: #eea4b9;
}
.scInfoSlide .itemTitle .itemArea8 {
background: #e08653;
}
.scInfoSlide .itemText {
position: relative;
padding: 5px 15px;
background: rgb(var(--naviCream));
border-radius: 2em;
color: #333;
font-size: 1.2rem;
line-height: 1.4;
text-align: left;
font-weight: bold;
}
.scInfoSlide .itemText::before {
content: '';
top: 100%;
left: 50%;
width: 0;
height: 0;
border-style: solid;
border-width: 10px 10px 0 10px;
border-color: rgb(var(--naviCream)) rgba(255, 255, 255, 0) rgba(255, 255, 255, 0) rgba(255, 255, 255, 0);
transform: translateX(-50%);
}
.scInfoSlide table {
margin: 0 5px;
}
.scInfoSlide th {
position: relative;
padding: 5px 5px 5px 1.5em;
width: 4em;
font-weight: bold;
font-size: 1.2rem;
line-height: 1.2;
}
.scInfoSlide th::before {
content: '';
top: calc(0.2em + 5px);
left: 0.25em;
width: 1em;
height: 1em;
}
.itemDate th::before {
background: var(--svgCalenderGray);
}
.itemPlace th::before {
background: url('data:image/svg+xml;utf8,') center / contain no-repeat;
}
.itemArea th::before {
background: url('data:image/svg+xml;utf8,') center / contain no-repeat;
}
.itemSponsor th::before {
background: url('data:image/svg+xml;utf8,') center / contain no-repeat;
}
.scInfoSlide td {
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
max-height: 2.4em;
padding: 0 5px;
text-align: left;
font-size: 1.2rem;
line-height: 1.2;
}
.scInfoSlide .itemNote {
align-self: flex-end;
padding: 0 5px;
text-align: left;
line-height: 1.4;
}
.scInfoSlide .itemNote span {
text-decoration: underline;
color: rgb(var(--naviKoiBlue));
}
.scInfoSlide.noslide .swiper-wrapper,
.soonSlide.noslide .swiper-wrapper {
gap: 8px;
}
/* sai kensaku*/
.scSearch {
margin: 0 auto;
}
.scSearch h3 {
margin: 0 auto;
padding-left: 2.5em;
width: fit-content;
background: var(--svgSearch);
background-position: left center;
background-size: 2em auto;
text-align: center;
font-size: 1.6rem;
line-height: 1.4;
color: rgb(var(--gsGreen));
}
.scSearch .inner {
margin: 0 auto var(--paddingMid);
padding: 16px;
max-width: var(--outerWidth);
}
.scSearch .inner form {
display: grid;
justify-items: center;
grid-template-columns: 100%;
gap: 26px;
}
.scSearch .inner div {
position: relative;
margin: 0 auto;
padding: 5px;
width: 100%;
max-width: var(--contentsWidth);
background: var(--usuGreen);
border-radius: 1rem;
}
.scSearch .inner div+div::before,
.scSearch .inner div+div::after {
content: '';
bottom: 100%;
left: 50%;
width: 20px;
height: 5px;
background: rgb(var(--gsGreen));
transform: translate(-50%, -10px);
}
.scSearch .inner div+div::after {
transform: translate(-50%, -10px) rotate(90deg);
}
.scSearch .inner h4 {
position: relative;
margin: 0 auto 8px;
padding: 7px 1em 7px 2.25em;
border-bottom: 1px solid #fff;
}
.scSearch .inner h4::before {
content: '';
top: 50%;
left: 0.75em;
width: 1.25em;
height: 1.25em;
background: var(--svgSchoolGreen);
transform: translateY(-50%);
}
.scSearch .inner .scArea::before {
background: url('data:image/svg+xml;utf8,') center / contain no-repeat;
}
.scSearch .inner .scFields::before {
background: var(--svgGakubouGreen);
}
.scSearch .inner ul {
margin: 0 auto;
padding: 0 0 0 15px;
font-size: 1.2rem;
}
.scSearch .inner li {
display: inline-block;
}
.scSearch .inner li label {
cursor: pointer;
position: relative;
display: inline-grid;
grid-template-columns: 100%;
align-items: center;
margin: 0 2px 10px 0;
padding: 12px 15px 12px 2.25em;
min-height: 40px;
background: #ccc;
box-shadow: var(--btnSahdow);
border-radius: 2rem;
font-weight: bold;
transition: all 0.15s 0s ease;
}
.scSearch .inner li input {
display: none;
}
.scSearch .inner li label::before {
content: '';
top: 50%;
left: 0.5em;
width: 1.25em;
height: 3px;
background: #fff;
border-radius: 1px;
transform: translateY(-50%);
transition: all 0.25s 0s ease;
}
.scSearch .inner li label::after {
content: '';
top: 50%;
left: 1em;
width: 3px;
height: 1.25em;
background: #fff;
border-radius: 1px;
transform: translateY(-50%);
transition: all 0.25s 0s ease;
}
.scSearch .inner li input:checked+label {
background: #fff;
box-shadow: 0 3px 0 0 rgba(0, 0, 0, 0.2) inset;
transform: translate(0, 2px);
}
.scSearch .inner li input:checked+label::before {
content: '';
top: 50%;
left: 0.5em;
width: 1.25em;
height: 0.8em;
background: none;
border-left: solid 4px rgb(var(--naviKoiBlue));
border-bottom: solid 4px rgb(var(--naviKoiBlue));
border-radius: 0;
transform: translate(0, calc(-50% - 3px)) rotate(-405deg);
}
.scSearch .inner li input:checked+label::after {
height: 0;
}
.scSearch .btnGreen {
position: relative;
margin: 0 auto;
padding: 30px 0 0;
width: 100%;
text-align: center;
}
.scSearch .btnGreen::before {
content: '';
top: 0;
left: 50%;
width: 0;
height: 0;
border-style: solid;
border-width: 15px 15px 0 15px;
border-color: rgb(var(--gsGreen)) rgba(255, 255, 255, 0) rgba(255, 255, 255, 0) rgba(255, 255, 255, 0);
transform: translateX(-50%);
animation: 4s 0s linear infinite arrowDoen;
}
@keyframes arrowDoen {
0% {
transform: translateX(-50%) translate(0, 0);
}
5% {
transform: translateX(-50%) translate(0, 5px);
}
10% {
transform: translateX(-50%) translate(0, 0);
}
15% {
transform: translateX(-50%) translate(0, 5px);
}
20% {
transform: translateX(-50%) translate(0, 0);
}
100% {
transform: translateX(-50%) translate(0, 0);
}
}
.scSearch .btnGreen input {
display: none;
}
.scSearch .btnGreen label {
cursor: pointer;
position: relative;
display: grid;
place-content: center;
margin: 0 auto;
padding: 5px 1.5em;
width: 80%;
max-width: 400px;
min-height: 4.5rem;
background: rgb(var(--gsGreen));
box-shadow: var(--btnSahdow);
border-radius: 3rem;
color: #fff;
font-size: 1.8rem;
line-height: 1.2;
font-weight: bold;
}
.scSearch .btnGreen label span {
padding-left: 1.25em;
background: url('data:image/svg+xml;utf8,') left center / 1em auto no-repeat;
}
.newSchool .adLinks {
padding-top: 16px;
}
/* scColumn */
.scColumn {
margin: 0 auto var(--paddingMinMin);
container: scColumnBox / inline-size;
--pointCol: rgb(var(--skBlue));
--bgCol: #e1f4fa;
}
.scColumn hgroup {
margin: 0 auto 16px;
width: fit-content;
max-width: var(--contentsWidth);
}
.scColumn hgroup h3 {
position: relative;
margin: 0 auto 8px;
line-height: 1.4;
font-size: 2rem;
text-align: center;
color: var(--pointCol);
}
.scColumn hgroup p {
padding: 16px var(--paddingMinMin) 0;
border-top: solid 2px var(--pointCol);
line-height: 1.4;
font-size: 1.3rem;
font-weight: bold;
color: var(--pointCol);
}
.scColumn.scContents{
--pointCol: rgb(var(--gsGreen));
--bgCol: #dcf5ed;
}
.scColumn .inner {
margin: 0 auto ;
padding-bottom: var(--paddingMid);
background: url('../../../img/page/newschool/bg_machinami.svg') center bottom / 500px auto repeat-x, var(--bgCol);
}
.scColumn ul {
display: grid;
margin: 0 auto;
padding: 0 var(--paddingMinMin);
max-width: var(--contentsWidth);
}
.scColumn li {
padding: var(--paddingMin) 0;
}
.scColumn li+li {
border-top: 2px solid #fff;
}
.scColumn li a {
display: grid;
gap: 16px;
justify-items: center;
}
.scColumn figure {
width: min(80%, 300px);
aspect-ratio: 4 / 3;
background: #fff;
border: solid 1px #fff;
border-radius: 16px 0;
overflow: hidden;
}
.scColumn figure img {
width:100%;
height:100%;
object-fit: cover;
}
.scColumn .itemContent {
display: grid;
gap: 4px;
padding: 0 var(--paddingMinMin);
width: 100%;
}
.scColumn .itemContent .itemTitle {
font-size: 1.8rem;
line-height: 1.4;
font-weight: bold;
text-align: center;
}
.scColumn .itemContent .itemText {
font-size: 1.6rem;
line-height: 1.6;
}
.scColumn .itemContent .link {
align-self: flex-end;
position: relative;
margin-top: 8px;
padding: 4px 1em;
text-align: right;
font-size: 1.6rem;
font-weight: bold;
color: var(--pointCol);
}
.scColumn .itemContent .link:after {
content: '';
top: 50%;
right: 0.2em;
width: 0.5em;
height: 0.5em;
border-bottom: solid 2px var(--pointCol);
border-right: solid 2px var(--pointCol);
transform: translateY(-50%) rotate(-45deg);
}
.scColumn .moreLink {
position: relative;
margin: var(--paddingMinMin) auto 0;
padding: 0 2em;
max-width: var(--contentsWidth);
text-align: right;
font-weight: bold;
color: var(--pointCol);
}
.scColumn .moreLink:after {
content: '';
top: 50%;
right: 1em;
width: 0.6em;
height: 0.6em;
border-bottom: solid 2px var(--pointCol);
border-right: solid 2px var(--pointCol);
transform: translateY(-50%) rotate(-45deg);
}
@container scColumnBox (width >=700px) {
.scColumn ul {
align-content: center;
gap: 24px;
padding: var(--paddingMinMin);
}
.scColumn li {
padding: 0;
}
.scColumn li a {
gap: 0;
justify-items: legacy;
grid-template-columns: min(40%, 200px) auto;
padding: 8px;
background: #fff;
border-radius: 16px 0;
}
.scColumn li+li {
border-top: none;
}
.scColumn figure {
width: 100%;
}
.scColumn .itemContent {
align-content: center;
gap: 16px;
}
.scColumn .itemContent .itemTitle {
font-size: 1.6rem;
text-align: left;
}
.scColumn .itemContent .itemText {
font-size: 1.4rem;
line-height: 1.6;
}
.scColumn .itemContent .link {
margin: 0;
font-size: 1.3rem;
}
}
/* scSpecial */
.scSpecial {
margin: 0 auto var(--paddingMid);
}
.scSpecial h3 {
margin: 0 auto 16px;
padding-left: 2.5em;
width: fit-content;
background: var(--svgSearch);
background-position: left center;
background-size: 2em auto;
text-align: center;
font-size: 1.6rem;
line-height: 1.4;
color: rgb(var(--gsGreen));
}
.scSpecial ul {
display: grid;
align-content: center;
gap: 24px;
margin: 0 auto var(--paddingMinMin);
padding: var(--paddingMinMin);
background: rgb(var(--naviUsuGray));
}
.scSpecial li {
margin: 0 auto;
max-width: var(--contentsWidth);
}
.scSpecial li a {
position: relative;
display: grid;
gap: 8px;
grid-template-columns: min(40%, 200px) auto;
padding: 8px;
background: #fff;
}
.scSpecial .link {
align-self: flex-end;
position: relative;
margin-top: 8px;
padding: 0 1em;
text-align: right;
font-weight: bold;
color: rgb(var(--gsGreen));
}
.scSpecial .link:after {
content: '';
top: 50%;
right: 0.2em;
width: 0.5em;
height: 0.5em;
border-bottom: solid 2px rgb(var(--gsGreen));
border-right: solid 2px rgb(var(--gsGreen));
transform: translateY(-50%) rotate(-45deg);
}
.scSpecial .moreLink {
position: relative;
margin: 0 auto;
padding: 0 2em;
max-width: var(--contentsWidth);
text-align: right;
font-weight: bold;
}
.scSpecial .moreLink:after {
content: '';
top: 50%;
right: 1em;
width: 0.6em;
height: 0.6em;
border-bottom: solid 2px #333;
border-right: solid 2px #333;
transform: translateY(-50%) rotate(-45deg);
}
.scSpecial figure {
overflow: hidden;
}
.scSpecial figure img {
width: 100%;
object-fit: contain;
border-radius: 16px 0;
}
.scSpecial .itemContent {
display: grid;
align-content: center;
gap: 4px;
padding-right: 8px;
}
.scSpecial .itemTitle {
font-size: 1.5rem;
line-height: 1.4;
font-weight: bold;
}
.scSpecial .itemText {
font-size: 1.3rem;
line-height: 1.6;
}
/* movie List */
.scMovie {
margin: 0 auto var(--paddingMin);
padding: var(--paddingMinMin) var(--paddingMinMin) 150px;
}
.scMovie h3 {
position: relative;
z-index: 4;
margin: 0 auto var(--paddingMinMin);
text-align: center;
font-size: 2.4rem;
}
.scMovie h3 img {
margin: 0 5px 0 0;
width: 8em;
height: auto;
}
.scMovie h4 {
position: relative;
z-index: 3;
margin: 0 auto var(--paddingMinMin);
font-size: 1.8rem;
line-height: 1.4;
text-align: center;
}
.scMovie .scMovieSlide {
position: relative;
margin: 0 auto;
padding: 16px 60px 20px 16px;
width: 85vw;
max-width: 450px;
background: #fff;
border-radius: 3rem;
font-size: 1.5rem;
filter: drop-shadow(0 5px 30px rgba(255, 170, 0, 0.3));
}
.scMovie .scMovieSlide::before {
content: '';
z-index: 1;
bottom: 100%;
left: 28%;
width: 44%;
height: 40%;
background: url('data:image/svg+xml;utf8,') center bottom / contain no-repeat;
}
.scMovie .scMovieSlide::after {
content: '';
z-index: 1;
top: 100%;
left: 7%;
width: 86%;
height: 60%;
background: url('data:image/svg+xml;utf8,') center top / contain no-repeat;
}
.scMovie .scMovieSlide .inner {
margin: 0 auto;
width: 100%;
aspect-ratio: 4 / 3;
}
.scMovie .scMovieSlide ul {
position: relative;
overflow: hidden;
background: #fff;
width: 100%;
height: 100%;
border: solid 4px rgb(var(--naviKoiBlue));
border-radius: 2rem;
}
@keyframes sunaarashi {
to {
top: 100%;
}
}
.scMovie .scMovieSlide .swiper-button-next,
.scMovie .scMovieSlide .swiper-button-prev {
position: absolute;
top: 30px;
width: 46px;
height: 46px;
margin-top: 0;
z-index: 10;
background: #fff;
border: solid 3px rgb(var(--naviKoiBlue));
border-radius: 50%;
box-shadow: 0 3px 0 0 rgba(0, 0, 0, 0.25);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: transparent;
}
.scMovie .scMovieSlide .swiper-button-next:after,
.scMovie .scMovieSlide .swiper-button-prev:after {
display: grid;
place-content: center;
width: 46px;
height: 46px;
color: rgb(var(--naviKoiBlue));
font-weight: bold;
font-size: 2.2rem;
}
.scMovie .scMovieSlide .swiper-button-next:after {
/* transform: translate(-3px, 0) rotate(45deg); */
content: '次';
}
.scMovie .scMovieSlide .swiper-button-prev:after {
/* transform: translate(4px, 0) rotate(-135deg); */
content: '前';
}
.scMovie .scMovieSlide .swiper-button-next {
right: 7px;
}
.scMovie .scMovieSlide .swiper-button-prev {
top: 90px;
left: auto;
right: 7px;
}
.scMovie .scMovieSlide li {
pointer-events: none;
position: absolute;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
overflow: hidden;
transition: all 0.25s 0s linear;
}
.scMovie .scMovieSlide li.show {
pointer-events: all;
opacity: 1;
}
.scMovie .scMovieSlide img {
width: 100%;
height: auto;
object-fit: cover;
top: 50%;
transform: translateY(-50%);
position: absolute;
}
.scMovie .scMovieSlide .playMark {
cursor: pointer;
}
.scMovie .scMovieSlide .playMark::before {
content: '';
z-index: 3;
top: 50%;
left: 50%;
width: 60px;
height: 60px;
background: rgba(0, 0, 0, 0.1);
border: solid 3px #fff;
border-radius: 50%;
transform: translate(-50%, -50%);
}
.scMovie .scMovieSlide .playMark::after {
content: '';
z-index: 3;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-style: solid;
border-width: 15px 0 15px 30px;
border-color: rgba(255, 255, 255, 0) rgba(255, 255, 255, 0) rgba(255, 255, 255, 0) #fff;
transform: translate(calc(-50% + 2px), -50%);
}
.scMovie .arrow {
position: absolute;
z-index: 2;
bottom: 30px;
left: 0;
width: 100%;
}
.scMovie .arrow::after {
content: '';
z-index: 4;
top: -10px;
left: 50%;
width: 50px;
height: 28px;
background: rgb(var(--naviKoiBlue));
clip-path: polygon(0 0, 50% 100%, 100% 0);
transform: translateX(-50%);
animation: 3s 0s linear infinite arrowDoen;
}
.scMovie .scMovieThmb {
padding: 14px 0;
width: 100%;
background: linear-gradient(to bottom, rgba(77, 77, 77, 0.65) 3px, rgba(255, 255, 255, 0) 3px, rgba(255, 255, 255, 0) 9px, rgba(77, 77, 77, 0.65) 9px, rgba(77, 77, 77, 0.65) calc(100% - 9px), rgba(255, 255, 255, 0) calc(100% - 9px), rgba(255, 255, 255, 0) calc(100% - 3px), rgba(77, 77, 77, 0.65) calc(100% - 3px), rgba(77, 77, 77, 0.65) 100%) left top / 100% no-repeat;
container: scMovieScMovieThmb / inline-size;
}
.scMovie .scMovieThmb .swiper {
position: relative;
width: 100%;
max-width: 100cqw;
}
.scMovie .scMovieThmb::before,
.scMovie .scMovieThmb::after {
content: '';
top: 3px;
left: 0;
width: 100%;
height: 6px;
background: linear-gradient(to right, rgba(255, 255, 255, 0) 6px, rgba(77, 77, 77, 0.65) 6px) 0 top / 12px 1px repeat-x, linear-gradient(to right, rgba(77, 77, 77, 0.65) 6px, rgba(255, 255, 255, 0) 6px) 0 0 / 12px 100% repeat-x;
animation: 1s 0s linear infinite running film;
}
@keyframes film {
to {
background-position-x: -12px;
}
}
.scMovie .scMovieThmb::after {
top: auto;
bottom: 3px;
}
.scMovie .scMovieThmb .swiper-slide {
cursor: pointer;
padding: 0 3px;
width: 96px;
}
.scMovie .scMovieThmb .swiper-slide figure {
aspect-ratio: 4 / 3;
overflow: hidden;
background: #fff;
box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.5) inset;
}
.scMovie .scMovieThmb .swiper-slide figure img {
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.6;
transition: all 0.25s 0s linear;
}
.scMovie .scMovieThmb .swiper-slide.swiper-slide-active figure img {
opacity: 1;
}
.scMovie.noslide .scMovieThmb .swiper-slide figure img {
opacity: 1;
}
.scMovie.naviOff .scMovieSlide .swiper-button-next,
.scMovie.naviOff .scMovieSlide .swiper-button-prev {
pointer-events: none;
border-color: rgb(var(--naviGray));
}
.scMovie.naviOff .scMovieSlide .swiper-button-next:after,
.scMovie.naviOff .scMovieSlide .swiper-button-prev:after {
color: rgb(var(--naviGray));
}
/* --- ポップアップ用のスタイル --- */
.scPhotoPopup .popupInner,
.scMoviePopup .popupInner {
overflow-y: auto;
scroll-behavior: smooth
}
.scMoviePopup .popupInner {
width: min(calc(100vw - 32px), 900px);
background: none;
}
.scPhotoPopup .popupInner::-webkit-scrollbar,
.scMoviePopup .popupInner::-webkit-scrollbar {
width: 18px
}
.scPhotoPopup .popupInner::-webkit-scrollbar-track,
.scMoviePopup .popupInner::-webkit-scrollbar-track {
margin: 8px 0;
background: #ccc;
border: 4px solid rgb(var(--naviUsuGray));
border-radius: 18px
}
.scPhotoPopup .popupInner::-webkit-scrollbar-thumb,
.scMoviePopup .popupInner::-webkit-scrollbar-thumb {
background: #fff;
border: solid 2px rgb(var(--naviBlue));
border-radius: 18px;
box-shadow: 2px 0 2px 0 rgba(0, 0, 0, .25);
background-clip: padding-box
}
.scPhotoPopup figure {
text-align: center;
}
.scPhotoPopup .figCaption,
.scMoviePopup .figCaption {
padding: 16px;
font-size: 1.6rem;
line-height: 1.4;
font-weight: bold;
text-align: center;
}
.scPhotoPopup .figTxt,
.scMoviePopup .figTxt {
display: none;
}
.scMoviePopup .popupInner .figCaption {
color: #fff;
}
.scMoviePopup figure {
display: none;
}
.scMoviePopup iframe {
width: 100%;
aspect-ratio: 16 / 9;
}
.scPhotoPopup.life .figTxt {
display: block;
margin: 0 auto;
padding: 0 16px 16px;
width: fit-content;
line-height: 1.8;
font-weight: bold;
text-align: left;
}
@media (orientation: landscape) {
.scMoviePopup .popupInner {
padding-top: 0;
}
.scMoviePopup iframe {
margin: 0 auto;
height: min(70vh, 506.25px);
width: auto;
}
.scMoviePopup .popupInner .figCaption {
padding-bottom: 0;
}
}
@media screen and (max-height: 375px) {
.scMoviePopup .closeBtn {
display: none;
}
}
/* about Hoken */
.scHoken {
padding: var(--paddingMin) var(--paddingMinMin) var(--paddingMid);
background: #EBF4FF;
}
.scHoken .toikake {
margin: 0 auto 3rem;
text-align: center;
font-weight: bold;
font-size: 1.8rem;
}
.scHoken h3 {
margin: 0 auto 3.5rem;
font-size: 3rem;
color: rgb(var(--naviKoiBlue));
text-align: center;
}
.scHoken h3 span {
position: relative;
display: inline-block;
padding: 0 0 0 2.25em;
}
.scHoken h3 span::after {
content: '';
top: 50%;
left: 0;
width: 2em;
height: 2em;
background: url('data:image/svg+xml;utf8,') center / contain no-repeat;
transform: translateY(-50%);
}
.scHoken .inner {
display: grid;
grid-template-columns: 100%;
gap: 15px;
margin: 0 auto;
padding: var(--paddingMinMin);
max-width: var(--contentsWidth);
background: #fff;
border: solid 2px rgb(var(--naviBlue));
border-radius: 8px;
}
.scEvent .scHoken .itemText {
margin: 0 auto var(--paddingMinMin);
font-weight: bold;
}
.scHoken .inner .red {
color: rgb(var(--naviRed));
}
.scHoken .inner .scHokenLink {
margin: 0 auto;
text-align: center;
}
.scHoken .inner .scHokenLink a {
position: relative;
display: inline-grid;
grid-template-columns: 100%;
align-items: center;
padding: 5px 2em 5px 1.5em;
min-height: 50px;
background: rgb(var(--naviKoiBlue));
border: solid 2px rgb(var(--naviKoiBlue));
box-shadow: var(--btnSahdow);
border-radius: 8px;
color: #fff;
font-weight: bold;
font-size: 1.6rem;
}
.scHoken .inner .scHokenLink a::before {
content: '';
top: 50%;
right: 0.5em;
width: 0.6em;
height: 0.6em;
border-right: solid 2px #fff;
border-bottom: solid 2px #fff;
font-weight: bold;
transform: translateY(-50%) rotate(-45deg);
}
/* school tokushuu */
.specialOC {
max-width: var(--contentsWidth);
}
.specialOC h3 {
position: relative;
margin: 0 auto var(--paddingMinMin);
padding: 0 0.5em;
font-size: 2rem;
text-align: center;
overflow: hidden;
}
.specialOC h3 span {
position: relative;
z-index: 2;
display: inline-block;
padding: 0 10px;
line-height: 1.2;
color: rgb(var(--gsGreen));
}
.specialOC h3 span::before,
.specialOC h3 span::after {
content: '';
top: 50%;
left: 100%;
width: 200vw;
height: 1px;
background: rgb(var(--gsGreen));
}
.specialOC h3 span::after {
left: auto;
right: 100%;
}
.specialOC .inner .itemThmb {
margin: 0 auto var(--paddingMinMin);
max-width: var(--contentsWidth);
}
.specialOC .inner .itemText {
margin: 0 auto;
max-width: var(--contentsWidth);
}
.specialOC .inner .itemContents {
padding: 30px 15px;
background: var(--honnoriGreen);
}
.specialOC .btnFukidashi {
margin: 30px auto 20px;
}
.specialOC .btnFukidashi .itemBtn {
position: relative;
margin: 0 25px;
padding: 0;
width: auto;
background: #fff;
box-shadow: var(--btnSahdow);
border-radius: 1rem;
font-size: 1.4rem;
font-weight: bold;
}
.specialOC .btnFukidashi .itemBtn::before {
content: '';
top: 50%;
right: 10px;
width: 10px;
height: 10px;
border-bottom: solid 2px #333;
border-right: solid 2px #333;
transform: translateY(-50%) rotate(-45deg);
}
.specialOC .btnFukidashi .itemBtn span {
overflow: hidden;
position: relative;
display: grid;
grid-template-columns: 100%;
justify-content: center;
align-items: center;
padding: 0 20px 0 50px;
min-height: 50px;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1) inset;
border-radius: 1rem;
color: #333;
line-height: 1.2;
text-align: left;
}
.specialOC .btnFukidashi .itemBtn span::before {
content: '';
top: 50%;
left: 0;
width: 90px;
height: 90px;
background: rgb(var(--gsGreen));
border-radius: 50%;
transform: translate(-45px, -50%);
}
.specialOC .btnFukidashi .itemBtn span::after {
content: '';
top: 50%;
left: 9px;
width: 25px;
height: 25px;
background: url('data:image/svg+xml;utf8,') center / contain no-repeat;
transform: translateY(-50%);
}
/* EventGuide */
.scEventGuide {
position: relative;
padding: var(--paddingMin) var(--paddingMinMin) var(--paddingMid);
background: url('../../../img/page/newschool/bg_machinami.svg') center bottom / 500px auto repeat-x, #d4f2fa;
}
.scEventGuide h4 {
position: relative;
z-index: 2;
margin: 0 auto var(--paddingMinMin);
font-size: 2rem;
text-align: center;
}
.scEventGuide h4 span {
line-height: 1.2;
color: rgb(var(--skBlue));
}
.scEventGuide ul {
position: relative;
z-index: 2;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 15px;
margin: 0 auto;
max-width: var(--contentsWidth);
}
.scEventGuide .scCards a::before {
content: '';
top: 0;
right: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 0 25px 20px 0;
border-color: rgba(255, 255, 255, 0) rgb(var(--skBlue)) rgba(255, 255, 255, 0) rgba(255, 255, 255, 0);
}
.scCnt .prevPageLink {
position: relative;
display: grid;
gap: 16px;
margin: 0 auto;
width: min(var(--outerWidth), calc(100% - var(--paddingMinMin) * 2));
}
.scCnt .prevPageLink li {
position: relative;
font-size: 1.2rem;
text-align: left;
}
.scCnt .prevPageLink a {
position: relative;
display: block;
padding: 0.5em 1em;
width: fit-content;
font-size: 1.2rem;
}
.scCnt .prevPageLink a::before {
content: '';
top: 50%;
left: 0;
width: 0.6em;
height: 0.6em;
border-bottom: solid 1px #333;
border-left: solid 1px #333;
transform: translateY(-50%) rotate(45deg);
}
@media screen and (min-width: 768px) {
/* -------------------------
/* for pc
--------------------------*/
:root {
--paddingMax: 132px;
--paddingMid: 84px;
--paddingMin: 48px;
--paddingMinMin: 24px;
}
/* ======== newschool index start ================*/
.scHead {
gap: 0 10px;
background: none;
}
.scCnt .pageTtl h2 {
font-size: 2.2rem;
}
.scCnt .scTtlWrap {
margin-bottom: var(--paddingMinMin);
}
/* menu Links */
.scCnt .scFoot {
padding: var(--paddingMin) 0;
}
.scBtns {
gap: 24px;
}
.scFoot .scMainBtn .coutinon {
text-align: center;
}
.scCnt .moreReadBar:hover {
opacity: 0.75;
}
/* school Crs */
.btnFukidashi .itemBtn {
min-width: 350px;
min-height: 60px;
font-size: 1.8rem;
}
.scSearch .itemTitle {
font-size: 1.8rem;
}
.scSearch .inner li label:hover {
opacity: 0.5;
}
.scSearch .btnGreen {
width: 100%;
max-width: var(--contentsWidth);
}
.scSearch .btnGreen label {
transition: all 0.25s 0s ease;
}
.scSearch .btnGreen label:hover {
opacity: 0.5;
}
.schoolAccess .campusEach {
padding: 0 30px 30px;
}
.schoolAccess .campusEach th {
padding: 20px .5em;
}
.schoolAccess .campusEach td {
padding: 20px 15px;
font-size: 1.2rem;
}
.newSchSide .scThmbList>li {
padding: 16px 12px;
width: 160px;
}
.newSchSide .scThmbList .rcmdRival {
padding: 16px;
width: 192px;
}
.newSchSide .scThmbList .rcmdTxt,
.newSchSide .scThmbList .bannerText {
font-size: 1.1rem;
}
.newSchSide .scThmbList .attribute li,
.newSchSide .scThmbList .photoName {
font-size: 1rem;
}
.scCnt .scFoot .scMainBtn ul {
max-width: 60%;
}
.scMovie .scMovieSlide {
padding: 20px 60px 30px 20px;
}
.scMovie .scMovieSlide .swiper-button-next,
.scMovie .scMovieSlide .swiper-button-prev,
.scMovie .scMovieThmb .swiper-slide,
.scMovie .scMovieSlide ul {
transition: all 0.15s 0s linear;
}
.scMovie .scMovieSlide ul:hover,
.scMovie .scMovieSlide .swiper-button-next:hover,
.scMovie .scMovieSlide .swiper-button-prev:hover,
.scMovie .scMovieThmb .swiper-slide:hover {
opacity: 0.5;
}
.scMovie .scMovieSlide .swiper-button-next:active,
.scMovie .scMovieSlide .swiper-button-prev:active {
box-shadow: none;
}
/* related */
.related .scCards .itemTitle {
font-size: 1.6rem;
}
.scCards .itemContent {
gap: 16px;
padding: 16px;
}
.scCards .itemText {
-webkit-line-clamp: 3;
max-height: none;
max-height: 4.8em;
font-size: 1.2rem;
}
/* scSpecial */
.scSpecial .itemContent {
gap: 16px;
padding: 16px;
}
.scSpecial .itemText {
font-size: 1.2rem;
}
.specialOC .inner .itemThmb {
margin: 0 auto 30px;
}
.specialOC .btnFukidashi .itemBtn {
font-size: 1.3rem;
box-shadow: 0 0 0 0;
}
.specialOC .btnFukidashi .itemBtn span {
padding: 0 30px 0 50px;
min-height: 60px;
font-size: 1.3rem;
box-shadow: var(--btnSahdow), 0 0 0 1px #e5e5e5 inset;
}
.scFoot .saveSchoolBtn span {
padding: 4px 8px;
font-size: 1.4rem;
}
}
/* 印刷時用 */
@page {
margin: 0mm;
size: 210mm 297mm;
}
@media print {
body {
print-color-adjust: exact;
-webkit-print-color-adjust: exact;
overflow-y: visible;
}
.cmnBod {
display: block;
}
.cmnHdr,
.cmnBody .cmnMenus,
.cmnBody .cmnFotWrap,
.cmnBody .pageTop {
display: none;
}
.cmnBody {
min-height: auto;
}
.newSchool {
zoom: 1.2;
}
.scHead .scMainTtl,
.scHead .tagsList,
.scBtns,
.scCnt .pageTtl,
.newSchool .scSide {
padding-left: 10mm;
padding-right: 10mm;
}
.scMovie .scMovieThmb .swiper {
max-width: 100%;
}
.popupBox {
display: none;
}
}
@container scMainTtl (width > 550px) {
.scHead .scMainTtl .inner {
grid-template-columns: var(--heartSize) auto;
}
.scHead .scMainTtl .inner div:nth-child(1) {
grid-area: 1 / 2 / 2 / 3;
}
.scHead .scMainTtl .inner div:nth-child(2) {
grid-area: 1 / 1 / 2 / 2;
}
}
@container scBtns (width > 675px) {
.scMainBtn {
gap: 16px;
}
.scMainBtn .opBtn a,
.scFoot .saveSchoolBtn label {
min-height: 50px;
}
.scBtns .scGloMenu {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(1px, 1fr));
}
.scBtns .scGloMenu .icon {
text-align: center;
}
.scBtns .scGloMenu .inner {
min-height: 40px;
}
}
@container scCalSlide (width > 800px) {
.scCalSlide .swiper {
max-width: 90cqw;
}
}