@charset "utf-8";
/* CSS Document -------------
/* Last up date: 2023.1.31
/* Last up date user: yamaguchi
/* Site Top
--------------------------*/
:root {
--bgHougan:
radial-gradient(circle, rgba(255, 255, 255, 0) 15%, #fff 15%, #fff 85%, rgba(255, 255, 255, 0) 85%, rgba(255, 255, 255, 0)) left top / 30px 30px,
linear-gradient(#efefef 1px, rgba(255, 255, 255, 0) 1px) 0 -1px / 30px 30px,
linear-gradient(90deg, #efefef 1px, #fff 1px) -1px 0 / 30px 30px;
--padding15: 15px;
--svgNanameDott: url('data:image/svg+xml;utf8,') left bottom / 100% auto no-repeat;
}
/* setting key color icon*/
.scSearch {
--secIcon: url('data:image/svg+xml;utf8,') 55% 25% / 50% auto no-repeat;
--secMainColor: rgb(var(--gsGreen));
--secSubColor: #a8dfcd;
--secLightColor: #e1f2eb;
--secDotted: radial-gradient(#e1f2eb 1px, rgba(255, 255, 255, 0) 2px) left top / 10px 10px repeat;
text-align: center;
}
.ocSearch {
--secIcon: url('data:image/svg+xml;utf8,') 50% 25% / 70% auto no-repeat;
--secMainColor: rgb(var(--ocYellow));
--secSubColor: #fde9ca;
--secLightColor: #fff4bf;
--secDotted: radial-gradient(#fff4bf 1px, rgba(255, 255, 255, 0) 2px) left top / 10px 10px repeat;
text-align: center;
}
.srSearch {
--secIcon: url('data:image/svg+xml;utf8,') 40% 25% / 65% auto no-repeat;
--secMainColor: rgb(var(--skBlue));
--secSubColor: #d7f4fc;
--secLightColor: #d7f4fc;
--secDotted: radial-gradient(#d7f4fc 1px, rgba(255, 255, 255, 0) 2px) left top / 10px 10px repeat;
text-align: center;
}
.ssSearch {
--secIcon: url('data:image/svg+xml;utf8,') 55% 25% / 40% auto no-repeat;
--secMainColor: rgb(var(--ssViolet));
--secSubColor: #f7f1f9;
--secLightColor: #f7f1f9;
--secDotted: radial-gradient(#f7f1f9 1px, rgba(255, 255, 255, 0) 2px) left top / 10px 10px repeat;
text-align: center;
}
.secAdult {
--secMainColor: #ade7d6;
}
.secHdr {
margin: 0 auto 60px;
padding: 100px 15px 40px;
}
.secHdr h2 {
padding: 0 0 40px;
font-size: 3.4rem;
line-height: 1.2;
}
.secHdrInner {
position: relative;
margin: 0 auto;
padding: 40px 15px 25px;
max-width: 1000px;
filter: drop-shadow(0 -1px 0 var(--secLightColor)) drop-shadow(-1px 0 0 var(--secLightColor)) drop-shadow(1px 0 0 var(--secLightColor)) drop-shadow(0 1px 0 var(--secLightColor));
}
.secHdrInner::before {
content: '';
z-index: -1;
top: 0;
left: 50%;
padding: 40px 0;
width: 100%;
max-width: 1000px;
height: 100%;
background: #fff;
border-radius: 16px;
transform: translate(-50%, 0);
}
.secHdrInner::after {
content: '';
z-index: -2;
top: 0;
left: 50%;
width: clamp(90px, 25vw, 120px);
height: clamp(90px, 25vw, 120px);
background: var(--secIcon), #fff;
border-radius: 50%;
transform: translate(-50%, -50%);
}
.secHdrInner h2 span {
color: var(--secMainColor);
}
.secHdrInner .secLastClid {
background: var(--secSubColor);
}
.secDotted {
background: var(--secDotted);
}
.secCont h3 {
margin: 0 auto;
font-size: 2rem;
}
.secTopics {
padding: 20px 15px 90px;
background: var(--secSubColor);
}
.secTopics h3 {
margin: 0 auto 20px;
font-size: 2.4rem;
}
/* Search Form */
.topSearchForm {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 16px;
padding: 0 5px 40px;
border-bottom: 3px solid #e5e5e5;
}
.topSearchForm .searchInput {
position: relative;
padding: 0 0 0 2em;
width: 100%;
background: var(--svgGlassGray), #fff;
background-size: auto 1em;
background-position: 0.5em center;
border: 1px solid #ccc;
border-radius: 8px;
}
.topSearchForm .searchInput input[type="text"] {
position: relative;
z-index: 1;
display: flex;
align-items: center;
width: 100%;
background: none;
min-height: 4rem;
font-size: 1.5rem;
}
.topSearchForm .formSelect {
display: flex;
justify-content: space-between;
gap: 16px;
width: 100%;
}
.topSearchForm .formSelect.flex{
flex-wrap: wrap;
}
.topSearchForm .formSelect div {
position: relative;
width: 50%;
}
.topSearchForm .formSelect.flex div,
.topSearchForm .formSelect.one div {
width: 100%;
}
.topSearchForm .formSelect div::before {
content: '';
top: 50%;
right: 10px;
width: 0.5em;
height: 0.5em;
border-bottom: solid 1px #333;
border-right: solid 1px #333;
transform: translate(0, -50%) rotate(45deg);
}
.topSearchForm .formSelect select {
padding: 0.8em 1em 0.8em 5px;
width: 100%;
min-height: 4rem;
border: 1px solid #ccc;
border-radius: 8px;
font-size: 1.5rem;
}
.topSearchForm .formDate {
display: flex;
justify-content: center;
align-items: center;
gap: 5px;
width: 100%;
}
.topSearchForm .formDate span {
text-align: center;
min-width: 2em;
}
.topSearchForm .formDate input[type="text"] {
z-index: 1;
display: flex;
align-items: center;
padding: 0 0 0 5px;
width: 100%;
min-height: 4rem;
border: 1px solid #ccc;
border-radius: 8px;
font-size: 1.5rem;
}
.topSearchForm .formDate .cal {
position: relative;
text-align: left;
width: calc(50% - 1em - 2.5px);
}
.topSearchForm .formDate .cal::before {
content: '';
top: 50%;
right: 5px;
width: 1em;
height: 1em;
background: var(--svgCalenderGray);
transform: translate(0, -50%);
}
.ui-widget-content {
background: #fff;
border: 1px solid #ccc;
box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.1);
}
.ui-widget-header {
background: rgb(var(--ocYellow));
border: 0;
}
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next,
.ui-icon {
top: 50%;
width: 24px;
height: 24px;
transform: translate(0, -50%);
}
.ui-datepicker .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-next span {
margin: 0;
left: auto;
background: #fff;
border-radius: 50%;
}
.ui-datepicker .ui-datepicker-prev span::before,
.ui-datepicker .ui-datepicker-next span::before {
position: absolute;
pointer-events: none;
content: '';
top: 50%;
left: 50%;
width: 10px;
height: 10px;
border-bottom: solid 2px rgb(var(--ocYellow));
border-left: solid 2px rgb(var(--ocYellow));
transform: translate(calc(-50% + 3px), -50%) rotate(45deg);
}
.ui-datepicker .ui-datepicker-next span::before {
transform: translate(calc(-50% - 3px), -50%) rotate(-135deg);
}
.ui-datepicker .ui-datepicker-prev-hover,
.ui-datepicker .ui-datepicker-next-hover {
top: 50%;
border: 0;
border-radius: 50%;
background: #fff;
font-weight: normal;
opacity: 0.75;
}
.ui-datepicker .ui-datepicker-prev-hover {
left: 2px;
}
.ui-datepicker .ui-datepicker-next-hover {
right: 2px;
}
.ui-state-disabled {
opacity: 0.35 !important;
}
.ui-state-hover a,
.ui-state-hover a:hover,
.ui-state-hover a:link,
.ui-state-hover a:visited,
.ui-state-focus a,
.ui-state-focus a:hover,
.ui-state-focus a:link,
.ui-state-focus a:visited {
text-decoration: none;
}
.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
border: 0;
}
.ui-state-default {
padding: 0;
}
.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
background: #fff;
color: rgb(var(--naviKoiBlue));
}
.ui-datepicker .ui-datepicker-title {
color: #fff;
font-weight: bold;
}
.ui-priority-secondary,
.ui-widget-content .ui-priority-secondary,
.ui-widget-header .ui-priority-secondary {
opacity: 1;
}
.ui-priority-primary,
.ui-widget-content .ui-priority-primary,
.ui-widget-header .ui-priority-primary,
.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
font-weight: normal;
}
.ui-datepicker-close,
.ui-datepicker-current {
border: solid 1px #ccc !important;
border-radius: 8px;
}
/* section contents */
.secCont {
margin: 0 auto 60px;
}
.secCont:last-of-type {
margin: 0 auto;
}
/* note style list */
.notePaper {
position: relative;
z-index: 3;
margin: 0 auto;
max-width: 1000px;
filter: drop-shadow(0 0.25rem 0.5rem rgba(0, 0, 0, 0.05));
border-radius: 8px;
}
.notePaper .inner {
position: relative;
display: grid;
gap: 8px;
}
.notePaper .inner::before {
content: "";
top: 20px;
right: -10px;
width: 13px;
height: 30px;
background: var(--secMainColor);
}
.notePaper .inner::after {
content: "";
top: 60px;
right: -9px;
width: 9px;
height: 30px;
background: rgb(var(--naviCream));
}
.notePaper li{
position: relative;
margin-left: 24px;
background-color: #fff;
background-image: linear-gradient(180deg, #efefef 1px, transparent 1px);
background-size: 100% 1.8em;
border-radius: 0 8px 8px 0;
}
.notePaper li::before {
content: "";
top: 0;
left: -24px;
width: 24px;
height: 100%;
background: radial-gradient(rgba(255,255,255,0) 40%, #fff 45%) 0 -12px / 24px 24px repeat-y;
}
.notePaper li a {
display: grid;
gap: 8px;
padding: 16px 16px 16px 12px;
}
.notePaper .itemDate {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
font-weight: bold;
}
.notePaper .itemDate .label {
padding: 5px 1em;
background: #999;
border-radius: 1em;
color: #fff;
white-space: normal;
font-size: 1.2rem;
font-weight: bold;
}
.notePaper .itemDate .new {
background: rgb(var(--naviRed));
}
.notePaper .itemDate .cate41 {
background: rgb(var(--laGreen));
}
.notePaper .itemDate .cate42 {
background: rgb(var(--ocYellow));
}
.notePaper .itemDate .cate43 {
background: rgb(var(--skBlue));
}
/* .notePaper .itemDate .cate44{
background: rgb(var(--naviViolet));
} */
.notePaper .itemDate .cate45 {
background: rgb(var(--naviEmerald));
}
.notePaper .itemDate .cate46 {
background: rgb(var(--naviPurple));
}
.notePaper .itemDate .cate52 {
background: rgb(var(--senmonYellow));
}
.notePaper .itemName{
padding: 4px 0 4px 8px;
border-left: solid 3px var(--secMainColor);
background: #fff;
font-weight: bold;
font-size: 1.5rem;
line-height: 1.6;
text-align: left;
color: var(--secMainColor);
}
.notePaper .itemTxt {
line-height: 1.8;
text-align: left;
}
.notePaper .txtLinks {
padding-top: 15px;
text-align: right;
}
.secTopics .notePaper {
margin: 0 auto 32px;
}
/* with thmb Cards */
.thmbCards {
display: grid;
grid-template-columns: repeat(1, 1fr);
grid-auto-rows: minmax(180px, auto);
gap: 16px;
margin: 0 auto 32px;
width: calc(100% - 30px);
max-width: 1000px;
}
.thmbCards a {
position: relative;
display: grid;
padding: 10px 5px;
height: 100%;
background: #fff;
border: solid 3px #e5e5e5;
border-radius: 1rem;
}
.thmbCards .itemThmb {
float: left;
padding: 0 10px 0 0;
width: 50%;
}
.thmbCards .itemThmb img {
width: 100%;
height: auto;
object-fit: cover;
border-radius: 0.7rem;
}
.thmbCards h5 {
margin: 0 0 5px;
padding: 0 5px 5px;
font-size: 1.8rem;
line-height: 1.4;
text-align: left;
}
.thmbCards h5 span {
border-bottom: 3px solid #e5e5e5;
}
.thmbCards .itemTxt {
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
font-size: 1.4rem;
line-height: 1.6;
text-align: left;
}
.thmbCards .itemMore {
clear: both;
justify-self: end;
align-self: end;
position: relative;
padding: 0 15px 0 0;
font-weight: bold;
}
.thmbCards .itemMore span {
display: inline-block;
padding: 2px 3px;
background: linear-gradient(to top, rgb(var(--naviCream)) 0px, rgb(var(--naviCream)) 7px, rgba(255, 244, 153, 0) 7px);
}
.thmbCards .itemMore::after {
content: '';
top: 50%;
right: 3px;
width: 0.6em;
height: 0.6em;
border-bottom: solid 2px #333;
border-right: solid 2px #333;
transform: translate(0, -50%) rotate(-45deg);
}
/* with button Cards */
.buttonCards {
position: relative;
z-index: 2;
margin: 0 auto;
padding: var(--padding15) var(--padding15) 32px;
max-width: 1000px;
background: #fff;
border-radius: 16px;
}
.buttonCards dl {
display: grid;
gap: 32px;
}
.buttonCards dt a {
position: relative;
margin: 0 auto 15px;
display: grid;
place-content: center;
min-height: 4.5rem;
padding: 0 1.25em 0 5px;
background: rgb(var(--naviBlue));
border-radius: 8px;
box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.2);
font-size: 1.8rem;
font-weight: bold;
color: #fff;
}
.buttonCards dt a::before {
content: '';
top: 50%;
right: 0.2em;
width: 0.9em;
height: 0.9em;
border-bottom: solid 3px #fff;
border-right: solid 3px #fff;
transform: translate(calc(-50% + 3px), -50%) rotate(-45deg);
}
.buttonCards dd {
position: relative;
padding: 0 15px 0 2.5em;
font-size: 1.6rem;
line-height: 1.4;
text-align: left;
}
.buttonCards dd::before {
content: '';
top: 0.7em;
left: 0;
width: 1.5em;
height: 1.5em;
background: url('../../../img/module/layout/icn_pencil.png') center / contain no-repeat;
transform: translate(10px, -50%) rotate(45deg);
}
.buttonCards dd+dd {
margin: 10px auto 0;
}
.buttonCards dd em {
font-weight: bold;
}
/* 黄色い強調線 background yellow line links */
.txtLinks a {
padding: 0 15px 0 0;
position: relative;
font-size: 1.6rem;
}
.txtLinks a::after {
content: '';
top: 50%;
right: 3px;
width: 0.5em;
height: 0.5em;
border-bottom: solid 1px #333;
border-right: solid 1px #333;
transform: translate(0, -50%) rotate(-45deg);
}
.txtLinks a span {
padding: 0 3px;
background: linear-gradient(to top, rgb(var(--naviCream)) 0px, rgb(var(--naviCream)) 7px, rgba(255, 255, 255, 0) 7px);
}
.txtLinks em {
font-weight: bold;
}
/* 青いアウトラインのタグ itemTags */
.itemTags {
margin: 10px auto 0 6px;
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.itemTags li {
position: relative;
z-index: 1;
display: inline-block;
padding: 0;
height: 1.6rem;
background: #fff;
box-shadow: 0 0 0 1px rgb(var(--naviKoiBlue));
border-radius: 0 1px 1px 0;
color: rgb(var(--naviKoiBlue));
font-size: 1.1rem;
line-height: 1;
}
.itemTags li::after {
content: '';
top: 0;
left: -6px;
width: 0;
height: 0;
border-style: solid;
border-width: 0.8rem 5px 0.8rem 0;
border-color: rgba(255, 255, 255, 0) rgb(var(--naviKoiBlue)) rgba(255, 255, 255, 0) rgba(255, 255, 255, 0);
}
.itemTags a {
position: relative;
z-index: 2;
display: flex;
align-items: center;
padding: 0 4px 0 5px;
height: 100%;
}
.itemTags a::before {
content: '';
top: 50%;
left: 0;
width: 2px;
height: 2px;
background: rgb(var(--naviKoiBlue));
border-radius: 50%;
transform: translate(0, -50%);
}
.itemTags a::after {
content: '';
top: 0;
left: -5px;
width: 0;
height: 0;
border-style: solid;
border-width: 0.8rem 5px 0.8rem 0;
border-color: rgba(255, 255, 255, 0) #fff rgba(255, 255, 255, 0) rgba(255, 255, 255, 0);
}
/* 歓声 cheers */
.cheers {
position: relative;
display: inline-block;
margin: 0 auto 32px;
padding: 0 1em;
font-size: 2rem;
}
.cheers::before,
.cheers::after {
content: '';
bottom: 0;
left: 0;
width: 0.8em;
height: 100%;
background: var(--svgNanameDott);
}
.cheers::after {
left: auto;
right: 0;
background: var(--svgNanameDott);
transform: scale(-1, 1);
}
.cheers em {
color: var(--secMainColor);
}
/* 傍点 emphasis */
.emp {
position: relative;
display: inline-block;
padding: 10px 0 0;
}
.emp::before {
content: '';
top: 0;
left: 50%;
width: 4px;
height: 4px;
background: var(--secMainColor);
border-radius: 50%;
transform: translate(-50%, 0);
}
/* scroll no slider */
.scrollLists {
display: flex;
gap: 32px;
margin: auto;
overflow-y: hidden;
overflow-x: auto;
scroll-snap-type: x mandatory;
width: 100%;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
text-align: center;
scrollbar-width: none;
}
.scrollLists li {
flex-shrink: 0;
transition: all 0.25s 0s ease;
will-change: transform;
}
/* .scrollLists li.pickUp {
transform: translate(0, -10px);
} */
.scrollLists::-webkit-scrollbar {
height: 0;
display: none;
}
.scrollLists::-webkit-scrollbar-track {
background: #ccc;
border-radius: 5px;
}
.scrollLists::-webkit-scrollbar-thumb {
background: rgb(var(--naviBlue));
border-radius: 5px;
}
.sliderBlock {
overflow: hidden;
width: 100%;
}
/* スライドできるエリア */
.slideNav {
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
margin: 0 auto 15px;
}
.slideNav .slideNavBar {
--snbHeight: 10px;
position: relative;
width: 50%;
height: var(--snbHeight);
border-radius: var(--snbHeight);
background: #ccc;
}
.slideNav .slideNavBar span {
cursor: pointer;
position: absolute;
top: 0;
left: 0;
display: block;
width: 20%;
min-width: 32px;
height: var(--snbHeight);
background: rgb(var(--naviBlue));
border-radius: var(--snbHeight);
transition: all 0.1s 0s ease-out;
}
.slideNav .btn {
position: relative;
width: 40px;
height: 40px;
background: rgba(0, 0, 0, 0.1);
border-radius: 50%;
transition: all 0.1s 0s ease-in;
}
.slideNav .btn::before {
content: '';
top: 50%;
left: 50%;
width: 0.9em;
height: 0.9em;
border-bottom: solid 2px #fff;
border-left: solid 2px #fff;
transform: translate(calc(-50% + 3px), -50%) rotate(45deg);
}
.slideNav .btn.next::before {
content: '';
transform: translate(calc(-50% - 3px), -50%) rotate(-135deg);
}
.slideNav .on {
cursor: pointer;
}
.slideNav .naviDottWrap,
.slideNav .naviThmbWrap {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 5px;
}
.slideNav .naviDott {
width: 7px;
height: 7px;
border-radius: 50%;
background: #ccc;
border: solid 1px #fff;
color: rgba(255, 255, 255, 0);
transition: all 0.15s 0s ease-in-out;
}
.slideNav .naviThmb {
width: 50px;
}
.slideNav .naviThmb figure img {
width: 100%;
height: auto;
aspect-ratio: 4 / 3;
}
.slideNav .on {
background: rgb(var(--naviBlue));
}
.slideNav .btn.on {
box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.2);
}
/* 共通の曲線ボタン General purpose Button*/
.genBtn {
margin: 0 auto;
width: 100%;
}
.genBtn input[type="submit"] {
display: none;
}
.genBtn a,
.genBtn 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: var(--secMainColor);
box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.2);
border-radius: 3rem;
color: #fff;
font-size: 1.8rem;
line-height: 1.2;
font-weight: bold;
}
.genBtn a::after,
.genBtn label::after {
content: '';
top: 50%;
right: 15px;
width: 0.6em;
height: 0.6em;
border-bottom: solid 2px #fff;
border-right: solid 2px #fff;
transform: translate(0, -50%) rotate(-45deg);
}
/* Notice to users ----------------------------- */
.notice {
padding: 5px;
background: rgb(var(--naviGray));
}
.noticeInner {
display: flex;
flex-wrap: wrap;
gap: 2px;
width: 100%;
}
.noticeInner .title {
position: relative;
padding: 7px 15px 7px 2em;
width: 100%;
background: #fff;
border-radius: 16px 16px 0 0;
font-size: 1.4rem;
font-weight: bold;
color: rgb(var(--naviRed));
}
.noticeInner .title::before {
content: '';
top: 50%;
left: 0.75em;
width: 1em;
height: 1em;
background: url('data:image/svg+xml;utf8,') center / contain no-repeat;
transform: translate(0, -50%);
}
.noticeInner .readText {
padding: 10px;
width: 100%;
background: #fff;
border-radius: 0 0 16px 16px;
}
.noticeInner .readText p {
font-size: 1.3rem;
line-height: 1.4;
color: rgb(var(--naviRed));
}
/* Main Visual ----------------------------- */
.topMV {
height: 80vw;
}
.topMvSlider {
position: relative;
z-index: 1;
}
.topMvSlider .swiper {
width: 100%;
max-width: 800px;
}
.topMvSlider .swiper .swiper-slide {
mask-image: linear-gradient(to top, transparent 0, rgba(0, 0, 0, 1) 15%);
-webkit-mask-image: linear-gradient(to top, transparent 0, rgba(0, 0, 0, 1) 15%);
}
.topMvSlider .swiper-pagination-bullets.swiper-pagination-horizontal {
position: relative;
z-index: 2;
bottom: auto;
left: auto;
margin: 0 auto;
width: 100%;
transform: translate(0, -65px);
}
.topMvSlider .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
margin: 0 1px;
width: 25px;
height: 3px;
box-shadow: none;
border-radius: 0;
}
.topMvSlider .swiper-pagination-bullet-active {
background: rgb(var(--naviBlue));
}
.topMV .mvSearchArea {
position: relative;
z-index: 2;
display: grid;
gap: 16px;
margin: 0 auto;
padding: 13px 15px;
width: min(400px, calc(100% - 2rem));
background: linear-gradient(45deg, rgb(var(--naviKoiBlue)) 0%, rgb(var(--naviEmerald)) 100%);
border-radius: 8px;
box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.15);
transform: translate(0, -60px);
}
.topMV .mvSearchArea .mvSearchAreaTtl {
display: none;
}
.topMV .mvSearchArea ul {
display: grid;
place-content: center;
grid-template-columns: repeat(3, 1fr);
gap: 1px;
background: rgb(var(--naviBlue));
border-radius: 8px;
box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.2);
}
.topMV .mvSearchArea ul li:first-child a {
border-radius: 0.5rem 0 0 0.5rem;
}
.topMV .mvSearchArea ul li:last-child a {
border-radius: 0 0.5rem 0.5rem 0;
}
.topMV .mvSearchArea ul a {
display: grid;
place-content: center;
min-height: 5rem;
background: #fff;
color: #0049d0;
font-weight: bold;
font-size: 1.5rem;
line-height: 1.2;
text-align: center;
}
.topMV .mvSearchArea .searchForm {
display: grid;
grid-template-columns: 2.25em auto;
grid-auto-flow: column;
background: #fff;
border-radius: 8px;
box-shadow: 0 0.25rem 0.5rem 0 rgba(0, 0, 0, 0.15);
font-size: 1.5rem;
}
.topMV .mvSearchArea .searchInput input[type="search"] {
display: grid;
align-items: center;
width: 100%;
min-height: 4rem;
}
.topMV .mvSearchArea input[type="submit"] {
cursor: pointer;
background: url('data:image/svg+xml;utf8,') center / 1em auto no-repeat;
border-radius: 0.5rem 0 0 0.5rem;
}
.topMV .mvSearchArea .mvSearchAreaMassage {
display: none;
}
/* in-Page Links ----------------------------- */
.inPageLinks {
margin: 0 auto;
max-width: 900px;
container: inPageLinks / inline-size;
}
.inPageLinks ul {
padding: 15px;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 5px;
}
@container inPageLinks (width > 680px) {
.inPageLinks ul {
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}
}
.inPageLinks li {
min-height: 40px;
border-radius: 8px;
}
.inPageLinks a {
position: relative;
display: flex;
flex-wrap: wrap;
place-content: center;
padding: 2px 1em 2px 2px;
height: 100%;
background: #fff;
border-radius: 8px;
font-weight: bold;
font-size: 1.6rem;
line-height: 1.2;
box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.1), 0 0 15px 0 rgba(0, 0, 0, 0.1);
transition: all 0.2s 0s ease-out;
}
.inPageLinks a[href*="school_search"] {
--secIcon: url('data:image/svg+xml;utf8,');
--mainColor: rgb(var(--gsGreen));
}
.inPageLinks a[href*="open_campus_search"] {
--secIcon: url('data:image/svg+xml;utf8,');
--mainColor: rgb(var(--ocYellow));
font-size: 1.5rem;
}
.inPageLinks a[href*="shinro_search"] {
--secIcon: url('data:image/svg+xml;utf8,');
--mainColor: rgb(var(--skBlue));
}
.inPageLinks a[href*="shuushoku_search"] {
--secIcon: url('data:image/svg+xml;utf8,');
--mainColor: rgb(var(--ssViolet));
}
.inPageLinks a::before {
content: '';
z-index: 1;
top: 50%;
right: 2px;
width: 1.8rem;
height: 1.8rem;
border-radius: 50%;
background: var(--mainColor);
transform-origin: center;
transform: translate(0, -50%);
transition: all 0.3s 0s linear;
}
.inPageLinks a::after {
content: '';
z-index: 1;
top: 50%;
right: 2px;
width: 0.8rem;
height: 0.8rem;
border-bottom: solid 2px #fff;
border-right: solid 2px #fff;
transform: translate(calc(-50% - 1px), calc(-50% - 2px)) rotate(45deg);
}
@media (hover: hover) {
.inPageLinks a:hover {
z-index: 99;
background-color: var(--mainColor);
transform: translate(0, -5px) scale(1.15, 1.15);
box-shadow: 0 20px 15px -5px rgba(0, 0, 0, 0.25);
color: #fff;
opacity: 1;
}
}
.inPageLinks a span {
margin: 0 auto;
display: inline-block;
}
.inPageLinks em {
display: inline-flex;
flex-wrap: wrap;
}
/* advertisement Links ----------------------------- */
.cmnCnt .adLinks {
position: relative;
margin: 0 auto 15px;
padding: 15px 0;
}
.cmnCnt .adLinks::after,
.cmnCnt .adLinks::before {
content: '';
top: 0;
left: 5%;
width: 90%;
height: 2px;
background: rgb(var(--naviGray));
}
.cmnCnt .adLinks::before {
top: auto;
bottom: 0;
}
/* school Block ----------------------------- */
/* school header */
.scSearch .secHdr {
background: url('../../../img/module/layout/bg_oka.png') left top / 700px auto repeat-x, var(--secSubColor);
animation: 20s 0s linear infinite running okahashiru;
will-change: background;
}
@keyframes okahashiru {
to {
background-position-x: -1400px;
}
}
.scSearch .links01 {
display: grid;
gap: 40px 32px;
margin: 0 auto 40px;
max-width: 800px;
}
.scSearch .links01 li {
position: relative;
width: 95%;
}
.scSearch .links01 li:first-child {
justify-self: start;
}
.scSearch .links01 li:last-child {
justify-self: end;
}
.scSearch .links01 a {
position: relative;
display: flex;
align-items: center;
min-height: 6rem;
border-radius: 8px;
box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.2);
}
.scSearch .links01 em {
font-size: 180%;
}
.scSearch .links01 li:first-child::before {
content: '';
z-index: 1;
bottom: -2px;
left: 0;
width: 112px;
height: 93px;
background: url('../../../img/module/layout/img_yubisashi_01.png') left bottom / contain no-repeat;
}
.scSearch .links01 li:last-child::before {
content: '';
z-index: 1;
bottom: -2px;
right: 0;
width: 133px;
height: 90px;
background: url('../../../img/module/layout/img_yubisashi_02.png') left bottom / contain no-repeat;
}
.scSearch .links01 li:first-child a {
justify-content: flex-end;
padding: 0 20px 0 70px;
background: url('../../../img/module/layout/img_building_01.png') -5px bottom / auto 80% no-repeat, linear-gradient(45deg, #66e0ff 0%, #b2f0ff 100%);
}
.scSearch .links01 li:last-child a {
padding: 0 70px 0 20px;
background: url('../../../img/module/layout/img_building_02.png') calc(100% + 5px) bottom / auto 80% no-repeat, linear-gradient(45deg, #ffe87f 0%, #f8cf51 100%);
}
.scSearch .links01 span {
position: relative;
z-index: 2;
display: inline-block;
padding: 0 1.25em 0 0;
font-size: 1.5rem;
font-weight: bold;
letter-spacing: 2px;
}
.scSearch .links01 span::after {
content: '';
top: 50%;
right: 0.25em;
width: 0.9em;
height: 0.9em;
border-bottom: solid 2px #333;
border-right: solid 2px #333;
transform: translate(0, -50%) rotate(-45deg);
}
.scSearch .secHdr .txtLinks {
position: relative;
display: inline-grid;
place-content: center;
grid-template-columns: repeat(2, 1fr);
gap: 20px 15px;
margin: 0 auto 15px;
}
.scSearch .secHdr .txtLinks li {
text-align: left;
}
.scSearch .secHdr .txtLinks a {
font-size: 1.8rem;
}
/* school scrollLists */
.scSearch .secCont h3 {
margin: 0 auto 15px;
}
.schoolSlider .scrollLists {
margin: 0 auto 15px;
padding: 50px 25px 25px;
background: var(--secDotted);
}
.schoolSlider .scrollLists li {
position: relative;
width: 20rem;
min-height: 20rem;
filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.05)) drop-shadow(0 2px 5px rgba(0, 0, 0, 0.2));
}
.schoolSlider .scrollLists .itsNewTxt {
position: absolute;
top: 0;
right: 0;
padding: 3px 7px;
background: rgb(var(--naviRed));
border-radius: 1em;
color: #fff;
transform: translate(0, -150%);
}
.schoolSlider .scrollLists .itsNewTxt::before {
content: '';
z-index: -1;
top: 100%;
left: 50%;
width: 7px;
height: 7px;
background: inherit;
transform: translate(-50%, -50%) rotate(45deg);
}
.schoolSlider .scrollLists .itsNew::after {
content: '';
z-index: 3;
top: 0;
right: 0;
width: 40px;
height: 40px;
background: url('../../../img/module/layout/icn_pencil.png') center / contain no-repeat;
transform: translate(0, -10px) rotate(45deg);
}
.schoolSlider .scrollLists a {
position: relative;
z-index: 2;
display: grid;
gap: 16px;
padding: 28px 0 15px;
min-height: 20rem;
background: #fff;
box-shadow: 0 0 0 3px #fff inset, 0 0 0 5px #e5e5e5 inset;
border-radius: 16px;
height: 260px;
}
.schoolSlider .scrollLists h5 {
position: relative;
display: grid;
place-content: center;
padding: 8px;
background: #fff;
border-top: 4px solid rgb(var(--gsGreen));
border-bottom: 4px solid rgb(var(--gsGreen));
font-size: 1.6rem;
text-align: center;
transform: translate(-5px, 0);
}
.schoolSlider .scrollLists h5::before {
content: '';
top: 100%;
left: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 0 4px 4px 0;
border-color: rgba(255, 255, 255, 0) rgb(var(--gsGreen)) rgba(255, 255, 255, 0) rgba(255, 255, 255, 0);
transform: translate(0, 4px);
}
.schoolSlider .scrollLists h5 span {
display: block;
overflow: hidden;
text-overflow: ellipsis;
}
.schoolSlider .scrollLists .itemThmb {
position: absolute;
top: -38px;
left: 50%;
width: 63px;
height: 63px;
transform: translate(-50%, 0);
}
.schoolSlider .scrollLists .itemThmb img {
position: absolute;
z-index: 2;
top: 0;
left: 50%;
width: 100%;
height: 100%;
object-fit: cover;
border: solid 2px #ccc;
border-radius: 50%;
transform: translate(-50%, 0);
}
.schoolSlider .scrollLists .itemThmb::before {
content: '';
z-index: 1;
bottom: 0;
left: 50%;
width: 90px;
height: 28px;
background: linear-gradient(to bottom, #ccc 70%, #d9d9d9 70%);
transform: translate(-50%, 0);
}
.schoolSlider .scrollLists .itemTxt {
display: -webkit-box;
padding: 0 15px;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
font-size: 1.5rem;
line-height: 1.6;
text-align: left;
white-space: normal;
}
.schoolSlider .scrollLists .itemMore {
align-self: end;
justify-self: end;
position: relative;
padding: 0 32px 0 0;
width: 100%;
font-size: 1.5rem;
text-align: right;
font-weight: bold;
}
.schoolSlider .scrollLists .itemMore span {
display: inline-block;
padding: 2px 3px;
background: linear-gradient(to top, rgb(var(--naviCream)) 0px, rgb(var(--naviCream)) 7px, rgba(255, 244, 153, 0) 7px);
}
.schoolSlider .scrollLists .itemMore::after {
content: '';
top: 50%;
right: 20px;
width: 0.6em;
height: 0.6em;
border-bottom: solid 2px #333;
border-right: solid 2px #333;
transform: translate(0, -50%) rotate(-45deg);
}
.schoolSlider .scrollLists li:last-child a {
display: block;
padding: 30% 15px;
height: 100%;
background: url('../../../img/module/layout/img_gs_seach_jk.png') right bottom / 80% auto no-repeat, #fff;
box-shadow: none;
border-radius: 16px;
text-align: center;
font-weight: bold;
font-size: 2.4rem;
line-height: 1.4;
}
.schoolSlider .scrollLists li:last-child span {
position: relative;
display: block;
padding: 5px 15px 3px 5px;
}
.schoolSlider .scrollLists li:last-child span::before {
content: '';
bottom: 0;
left: 0;
width: 100%;
height: 2px;
background: rgb(var(--gsGreen));
}
.schoolSlider .scrollLists li:last-child span::after {
content: '';
top: 50%;
right: 5px;
width: 14px;
height: 14px;
border-right: 2px solid #333;
border-bottom: 2px solid #333;
transform: translate(0, -50%) rotate(-45deg);
animation: 4s 0s linear infinite arrowDoen;
}
/* open campus Block ----------------------------- */
/* open campus header */
.ocSearch .secHdr {
position: relative;
background: url('data:image/svg+xml;utf8,') center 32px / 700px auto repeat-y, url('data:image/svg+xml;utf8,') center 30px / 800px auto repeat, url('data:image/svg+xml;utf8,') center 30px / 500px auto repeat, url('../../../img/module/layout/bg_himawari_01.jpg') center top / cover no-repeat;
overflow: hidden;
animation: 50s 0s linear infinite running kamifubuki;
animation-timing-function: steps(90, end);
}
@keyframes kamifubuki {
from {
background-position-y: 30px, 30px, 30px, top;
}
to {
background-position-y: 700px, 1500px, 500px, top;
}
}
.ocSearch .secHdr::before,
.ocSearch .secHdr::after {
content: '';
z-index: 1;
top: -10px;
left: -40%;
width: 60%;
max-width: 300px;
height: 100%;
background: url('data:image/svg+xml;utf8,') center top / contain no-repeat;
opacity: 0.5;
}
.ocSearch .secHdr::after {
left: auto;
right: -40%;
background-image: url('data:image/svg+xml;utf8,');
transform: scale(-1, 1);
}
@media screen and (min-width: 769px) {
.ocSearch .secHdr {
background-repeat: repeat-y, repeat, repeat, no-repeat;
background-size: 1000px auto, 1200px auto, 700px auto, cover;
}
.ocSearch .secHdr::before {
left: -5%;
}
.ocSearch .secHdr::after {
right: -5%;
transform: scale(-1, 1);
}
}
.ocSearch .topSearchForm .genBtn label::after {
content: none;
}
.ocSearch .genBtn label span {
padding-left: 1.25em;
background: url('data:image/svg+xml;utf8,') left center / 1em auto no-repeat;
}
.ocSearch .secHdrInner .txtLinks {
padding-top: 20px;
text-align: right;
}
/* open campus other */
.ocOthers {
position: relative;
margin: 0 auto 60px;
padding: 15px 15px 32px;
background: var(--secDotted), #fff;
}
.ocOthers p {
display: inline-block;
position: relative;
margin: 0 auto 32px;
padding: 10px 15px;
background: #fff;
border: solid 2px var(--secMainColor);
border-radius: 2em;
font-size: 1.8rem;
color: var(--secMainColor);
text-align: left;
font-weight: bold;
}
.ocOthers p::before {
content: '';
top: 100%;
left: 50%;
width: 0;
height: 0;
border-style: solid;
border-width: 8px 8px 0 8px;
border-color: var(--secMainColor) rgba(255, 255, 255, 0) rgba(255, 255, 255, 0) rgba(255, 255, 255, 0);
transform: translate(-50%, 5px);
}
.ocOthers .txtLinks {
position: relative;
display: flex;
justify-content: center;
gap: 32px;
width: 100%;
}
.ocOthers .txtLinks a {
font-size: 1.8rem;
}
/* open campus scrollLists */
.ocSlider .scrollLists {
margin: 0 auto 15px;
padding: 35px 25px 25px;
background: #fff4bf;
background-size: 50px auto;
}
.ocSlider .scrollLists li {
position: relative;
width: 20rem;
min-height: 20rem;
border-radius: 16px;
filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.05)) drop-shadow(0 2px 5px rgba(0, 0, 0, 0.2));
}
.ocSlider .scrollLists a {
position: relative;
display: grid;
min-height: 20rem;
}
.ocSlider .scrollLists .itemTxt {
position: relative;
z-index: 2;
grid-column: 1 / 2;
grid-row: 2 / 3;
position: relative;
display: grid;
gap: 5px;
padding: 10px 15px;
background: #fff;
border-radius: 0 0 16px 16px;
}
.ocSlider .scrollLists .kind {
position: absolute;
z-index: 3;
top: 0;
left: 50%;
padding: 5px;
width: 80%;
background: rgb(var(--ocYellow));
border-radius: 1em;
font-size: 1.1rem;
color: #fff;
font-weight: bold;
text-align: center;
transform: translate(-50%, -80%);
}
.ocSlider .scrollLists .kind::before {
content: '';
top: 100%;
left: 50%;
width: 7px;
height: 7px;
background: inherit;
transform: translate(-50%, -50%) rotate(45deg);
}
.ocSlider .scrollLists h4 {
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
white-space: normal;
height: 1.4em;
font-size: 1.5rem;
line-height: 1.4;
text-align: left;
}
.ocSlider .scrollLists h5 {
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
white-space: normal;
font-weight: normal;
height: 1.4em;
font-size: 1.3rem;
line-height: 1.4;
text-align: left;
}
.ocSlider .scrollLists .itemThmb {
position: relative;
z-index: 1;
grid-column: 1 / 2;
grid-row: 1 / 2;
height: 130px;
border-radius: 16px 16px 0 0;
overflow: hidden;
}
.ocSlider .scrollLists .itemThmb img {
width: 100%;
height: 100%;
border-radius: 16px 16px 0 0;
object-fit: cover;
}
.ocSlider .scrollLists .itemDate {
align-self: end;
justify-self: end;
padding: 3px;
border-bottom: solid 5px rgb(var(--naviCream));
color: #333;
font-size: 1.3rem;
font-weight: bold;
}
.ocSlider .scrollLists li:last-child a {
display: block;
padding: 30% 15px;
height: 100%;
background: url('../../../img/module/layout/img_oc_search_jk.png') right bottom / 80% auto no-repeat, #fff;
border-radius: 16px;
text-align: center;
font-weight: bold;
font-size: 2.4rem;
line-height: 1.4;
}
.ocSlider .scrollLists li:last-child span {
position: relative;
display: block;
padding: 5px 15px 3px 5px;
}
.ocSlider .scrollLists li:last-child span::before {
content: '';
bottom: 0;
left: 0;
width: 100%;
height: 2px;
background: rgb(var(--ocYellow));
}
.ocSlider .scrollLists li:last-child span::after {
content: '';
top: 50%;
right: 5px;
width: 14px;
height: 14px;
border-right: 2px solid #333;
border-bottom: 2px solid #333;
transform: translate(0, -50%) rotate(-45deg);
animation: 4s 0s linear infinite arrowDoen;
}
@keyframes arrowDoen {
0% {
transform: translate(0, -50%) translate(0, 0) rotate(-45deg);
}
5% {
transform: translate(0, -50%) translate(7px, 0) rotate(-45deg);
}
10% {
transform: translate(0, -50%) translate(0, 0) rotate(-45deg);
}
15% {
transform: translate(0, -50%) translate(7px, 0) rotate(-45deg);
}
20% {
transform: translate(0, -50%) translate(0, 0) rotate(-45deg);
}
100% {
transform: translate(0, -50%) translate(0, 0) rotate(-45deg);
}
}
/* open campus topics */
.ocSearch .secTopics h3 span {
position: relative;
display: inline-block;
padding: 0 100px 0 0;
line-height: 1.4;
}
.ocSearch .secTopics h3 span::before {
content: '';
z-index: 1;
bottom: -17px;
right: 0;
width: 90px;
height: 90px;
background: url('../../../img/module/layout/img_businessman_01.png') right bottom / contain no-repeat;
}
.ocTopics .buttonCards {
position: relative;
}
.ocTopics .txtLinks {
padding: 15px 0 0;
text-align: right;
}
.ocTopics .txtLinks a {
display: block;
}
/* shinro Block ----------------------------- */
.srSearch .secHdr {
position: relative;
padding: 100px 0 40px;
background: url('data:image/svg+xml;utf8,') center 32px / 450px auto repeat-x, linear-gradient(to bottom, #fff 0px, #fff 32px, var(--secSubColor) 32px, var(--secSubColor) 100px);
overflow: hidden;
animation: 5s 0s linear infinite running kumohashiru;
animation-timing-function: steps(10, end);
}
@keyframes kumohashiru {
to {
background-position: 900px 32px, center top;
}
}
.srSearch .secHdrInner {
padding: 40px 0;
}
.srSearch .secHdrInner::before {
width: calc(100% - 30px);
}
.srSearch .secHdrInner h2 {
margin: 0 auto 15px;
padding: 0;
}
.srSearch .secHdrInner h3 {
margin: 0 auto 30px;
font-size: 2rem;
}
.srSearch .secHdrInner h3 img {
margin: 0 5px 0 0;
width: 4.6em;
height: auto;
}
.srSearch .secHdrInner h3 em {
color: var(--secMainColor);
}
/* srSearch scrollLists */
.shinroSlider {
padding: 0;
}
.shinroSlider .scrollLists {
margin: 0 auto;
padding: 32px 32px 35px;
background: none;
}
.shinroSlider .scrollLists li {
cursor: pointer;
position: relative;
display: grid;
padding: 10px 10px 20px;
width: 20rem;
background: #e5e5e5;
border-radius: 16px;
filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.15));
}
.shinroSlider .scrollLists li::before {
content: '';
z-index: 1;
bottom: 100%;
left: 28%;
width: 44%;
height: 30%;
background: url('data:image/svg+xml;utf8,') center bottom / contain no-repeat;
transform: translate(0, 1px);
}
.shinroSlider .scrollLists li::after {
content: '';
z-index: 1;
top: 100%;
left: 7%;
width: 86%;
height: 30%;
background: url('data:image/svg+xml;utf8,') center top / contain no-repeat;
transform: translate(0, -1px);
}
.shinroSlider .scrollLists li a {
display: grid;
grid-template-rows: 8rem auto;
border: solid 2px #fff;
border-radius: 1rem;
overflow: hidden;
}
.shinroSlider .scrollLists .itemThmb {
position: relative;
grid-row: 1 / 2;
background: #fff;
border-bottom: none;
text-align: center;
height: 80px;
}
.shinroSlider .scrollLists .itemThmb img {
width: 100%;
height: 100%;
object-fit: cover;
}
.shinroSlider .scrollLists .itemThmb::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%;
box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.2);
transform: translate(-50%, -50%);
}
.shinroSlider .scrollLists .itemThmb::after {
content: '';
z-index: 3;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-style: solid;
border-width: 14px 0 14px 28px;
border-color: rgba(255, 255, 255, 0) rgba(255, 255, 255, 0) rgba(255, 255, 255, 0) #fff;
transform: translate(calc(-50% + 3px), -50%);
}
.shinroSlider .scrollLists h4 {
grid-row: 2 / 3;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
white-space: normal;
font-size: 1.5rem;
line-height: 1.8;
height: 1.8em;
overflow: hidden;
margin: 0;
color: #fff;
background: #000;
}
.shinroSlider .scrollLists li:last-child a {
position: relative;
display: grid;
height: 100%;
background: #fff;
}
.shinroSlider .scrollLists li:last-child .itemThmb img {
width: 80%;
height: auto;
}
.shinroSlider .scrollLists li:last-child .itemThmb::after {
content: none;
}
.shinroSlider .scrollLists li:last-child .itemThmb {
display: grid;
place-content: center;
background: radial-gradient(circle closest-side, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.7) 120%, rgba(255, 255, 255, 0) 200% 300%),
repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.6) 0 1px, rgba(255, 255, 255, 0) 1px 2px);
box-shadow: 0 0 15px 0 rgb(var(--naviKoiBlue)) inset;
text-align: center;
}
.shinroSlider .scrollLists li:last-child .itemThmb img {
display: block;
margin: 0 auto;
}
.shinroSlider .scrollLists li:last-child .itemThmb::before {
content: '';
top: 0;
left: 0;
width: 100%;
height: 32px;
background: repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0) 0px,
rgba(255, 255, 255, 0.75) 10px 15px, rgba(255, 255, 255, 0) 25px 100%);
animation: 5s 0s linear infinite running sunaarashi;
border: none;
border-radius: 0;
box-shadow: none;
transform: translate(0, 0)
}
@keyframes sunaarashi {
to {
top: 100%;
}
}
.moviePlayer {
display: none;
position: fixed;
z-index: 900;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.75);
}
.moviePlayer div:not(.movieClose) {
position: absolute;
top: 50%;
left: 50%;
width: 95vw;
max-width: 600px;
transform: translate(-50%, -50%);
}
.moviePlayer iframe {
display: block;
width: 95vw;
max-width: 600px;
height: 53.4375vw;
max-height: 337.5px;
background: #fff;
transform: scale(0, 0);
opacity: 0;
transition: all 0.15s 0s ease-in;
}
.moviePlayer.short div:not(.movieClose) {
position: absolute;
top: 50%;
left: 50%;
width: auto;
max-width: 600px;
transform: translate(-50%, -50%);
}
.moviePlayer.short iframe {
width: auto;
max-width: none;
height: 70vh;
max-height: 541px;
aspect-ratio: 9 / 16;
}
.moviePlayer iframe.on {
opacity: 1;
transform: scale(1, 1);
}
.moviePlayer .itemTitle {
padding: 20px 0 0;
color: #fff;
font-size: 1.6rem;
line-height: 1.6;
}
.moviePlayer .movieClose {
position: fixed;
z-index: 900;
cursor: pointer;
top: -50px;
right: 0.25vw;
width: 40px;
height: 40px;
}
.moviePlayer .movieClose::before {
content: '';
top: 50%;
right: 50%;
width: 32px;
height: 3px;
background: #fff;
transform: translate(50%, calc(-100% - 9px)) rotate(-45deg);
transform-origin: right center;
transition: all 0.25s 0s ease-out;
}
.moviePlayer .movieClose::after {
content: '';
bottom: 50%;
right: 50%;
width: 32px;
height: 3px;
background: #fff;
transform: translate(50%, calc(100% + 9px)) rotate(45deg);
transform-origin: right center;
transition: all 0.25s 0s ease-out;
}
.moviePlayer .movieClose iframe {
border: 0;
}
.srSearch h4 {
margin: 0 auto 15px;
font-size: 1.8rem;
}
/* shinro Column */
.shinroBnr {
background: var(--secDotted), #fff;
}
.shinroBnr .inner {
position: relative;
display: grid;
justify-content: center;
gap: 16px;
margin: 0 auto;
padding: 15px 15px 32px;
max-width: 1000px;
}
.shinroBnr h3 {
display: inline-block;
position: relative;
margin: 0 auto 5px;
padding: 10px 15px;
background: #fff;
border: solid 2px var(--secMainColor);
border-radius: 2em;
font-size: 1.8rem;
color: var(--secMainColor);
text-align: left;
font-weight: bold;
}
.shinroBnr h3::before {
content: '';
top: 100%;
left: 50%;
width: 0;
height: 0;
border-style: solid;
border-width: 8px 8px 0 8px;
border-color: var(--secMainColor) rgba(255, 255, 255, 0) rgba(255, 255, 255, 0) rgba(255, 255, 255, 0);
transform: translate(-50%, 5px);
}
.shinroBnr .inner.kokka h3 {
background: #fff;
display: inline-block;
position: relative;
margin: 0 auto 5px;
padding: 10px 15px;
background: #fff;
border: solid 2px #4fc482;
border-radius: 2em;
font-size: 1.8rem;
color: #4fc482;
text-align: left;
font-weight: bold;
}
.shinroBnr .inner.kokka h3::before{
content: '';
top: 100%;
left: 50%;
width: 0;
height: 0;
border-style: solid;
border-width: 8px 8px 0 8px;
border-color: #4fc482 rgba(255, 255, 255, 0) rgba(255, 255, 255, 0) rgba(255, 255, 255, 0);
transform: translate(-50%, 5px);
}
.shinroBnr .itemThmb {
text-align: center;
}
.shinroBnr .itemThmb.book {
background: #60c6f2;
}
.shinroBnr .itemThmb img {
width: 100%;
height: auto;
object-fit: contain;
}
.shinroBnr h4 {
margin: 0;
}
.shinroBnr h4 span {
position: relative;
z-index: 1;
display: inline-block;
padding: 5px 10px;
background: #fff;
border-bottom: 3px solid var(--secMainColor);
color: var(--secMainColor);
}
.shinroBnr .inner.kokka h4 span {
position: relative;
z-index: 1;
display: inline-block;
padding: 5px 10px;
background: #fff;
border-bottom: 3px solid #4fc482;
color: #4fc482;
}
.shinroBnr p {
font-size: 1.6rem;
line-height: 1.4;
text-align: center;
}
.shinroAdvise {
padding: 0 10px;
}
.shinroAdvise h4 {
margin: 0 auto 15px;
}
.shinroAdvise ul {
display: grid;
grid-template-columns: repeat(1, 1fr);
grid-auto-rows: minmax(120px, auto);
gap: 16px;
max-width: 1000px;
}
.shinroAdvise li {
background: #fff;
border: solid 3px #e5e5e5;
border-radius: 16px;
/* filter: var(--filterShadow); */
}
.shinroAdvise li a {
position: relative;
display: block;
padding: 20px 32px 20px 15px;
height: 100%;
}
.shinroAdvise li a::after {
content: '';
top: 50%;
right: 10px;
width: 15px;
height: 15px;
border-bottom: solid 3px rgb(var(--skBlue));
border-right: solid 3px rgb(var(--skBlue));
transform: translate(0, -50%) rotate(-45deg);
}
.shinroAdvise dl {
position: relative;
display: grid;
height: 100%;
text-align: left;
}
.shinroAdvise dt {
position: relative;
padding: 0 0 5px 4rem;
border-bottom: 3px solid #e5e5e5;
font-size: 1.5rem;
line-height: 1.4;
font-weight: bold;
}
.shinroAdvise dt em {
padding: 0 0 2px;
font-size: 120%;
background: linear-gradient(to top, rgb(var(--naviCream)) 0px, rgb(var(--naviCream)) 7px, rgba(255, 244, 153, 0) 7px);
}
.shinroAdvise dd {
position: relative;
align-self: end;
padding: 0 15px 0 4rem;
line-height: 1.4;
}
.shinroAdvise dt::before,
.shinroAdvise dd::before {
content: '';
top: -0.2em;
left: 0;
display: grid;
grid-template-columns: 100%;
align-content: center;
width: 1.75em;
height: 1.75em;
background: #999;
border-radius: 50%;
color: #fff;
line-height: 1;
font-size: 1.8rem;
font-weight: bold;
text-align: center;
}
.shinroAdvise dt::before {
content: 'Q';
background: rgb(var(--naviKoiBlue));
}
.shinroAdvise dd::before {
content: 'A';
background: rgb(var(--naviRed));
}
.shinroAdvise dd span {
display: inline-block;
padding: 2px 3px;
}
.shinroAdvise .genBtn {
padding: 32px 0 0;
}
.jobLink {
margin: 50px auto;
max-width: 800px;
background: rgb(215, 244, 252);
border-radius: 16px;
}
.jobLink .jobTitle{
display:flex;
justify-content: center;
max-width:350px;
margin: 0 auto;
}
.jobLink ul.txtLinks{
position: relative;
z-index: 1;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 16px;
margin: 0 auto;
padding: 25px 10px 20px;
background: #fff;
border: solid 3px #e5e5e5;
border-radius: 16px;
}
.jobLink ul.txtLinks li {
font-weight: bold;
}
/* shinro Topics */
.shinroTopics {
padding: 20px 10px 40px;
background: var(--secSubColor);
}
.shinroTopics .itemLists .txtLinks {
text-align: right;
}
/* shushoku Block ----------------------------- */
.ssSearch h3 {
text-align: center;
}
.ssSearch .secHdr {
position: relative;
background: radial-gradient(#f6f1f8 2px, rgba(255, 255, 255, 0) 3px) 0 0 / 32px 32px repeat, #fff;
overflow: hidden;
animation: 3s 0s linear infinite running tenten;
}
@keyframes tenten {
to {
background-position: 60px -60px;
}
}
.ssSearch .secHdr::before {
content: '';
top: 0;
left: 50%;
width: 100%;
height: 100%;
background:
url('../../../img/module/layout/img_kaigoshi_01.png') -100px 32px / 300px auto no-repeat,
url('../../../img/module/layout/img_kangoshi_01.png') calc(100% + 10px) 20px / 130px no-repeat;
transform: translate(-50%, 0);
}
.ssSearch .genBtn label {
width: 90%;
}
.ssSearch .genBtn label::after {
content: none;
}
.ssSearch .genBtn label span {
padding-left: 1.25em;
background: url('data:image/svg+xml;utf8,') left center / 1em auto no-repeat;
}
.ssSearch .secHdrInner .txtLinks {
padding: 20px 0 0 min(200px, 30vw);
text-align: right;
}
.ssSearch .secHdrInner .txtLinks a {
padding-right: 1.25em;
}
.ssSearch .secHdrInner .txtLinks a::after {
width: 1em;
height: 1em;
border: none;
background: var(--svgGaibuLinkGray);
background-position: right center;
background-size: contain;
transform: translate(0, -50%);
}
.ssSearch .buttonCards dt a::before {
right: 0.5em;
width: 1em;
height: 1em;
border: none;
background: var(--svgGaibuLinkWhite);
background-position: right center;
background-size: contain;
transform: translate(0, -50%);
}
.ssSearch .secTopics h3 {
display: inline-block;
position: relative;
padding: 10px 15px;
background: #fff;
border: solid 2px var(--secMainColor);
border-radius: 2em;
font-size: 1.8rem;
color: var(--secMainColor);
text-align: left;
font-weight: bold;
}
.ssSearch .secTopics h3::before {
content: '';
top: 100%;
left: 50%;
width: 0;
height: 0;
border-style: solid;
border-width: 8px 8px 0 8px;
border-color: var(--secMainColor) rgba(255, 255, 255, 0) rgba(255, 255, 255, 0) rgba(255, 255, 255, 0);
transform: translate(-50%, 5px);
}
.ssSearch .jobnaviMenu {
margin: 3em auto 1em;
background: #fff;
filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.05)) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.15));
border-radius: 16px;
border: 2px solid #f5abab;
border-radius: 16px;
padding: 1em;
}
.ssSearch .jobnaviMenu h3 img {
width: 70%;
height: auto;
}
.ssSearch .jobnaviMenu .menu {
margin: 2em auto 1.5em;
}
.ssSearch .jobnaviMenu .menu li {
width: 70%;
position: relative;
background: #fff;
border: 1px solid #f5abab;
border-radius: 5px;
margin: 1em auto;
box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.2);
}
.ssSearch .jobnaviMenu .menu li a {
padding: 5px 0;
background-position: center calc(100% - 5px);
background-repeat: no-repeat;
display: inline-block;
width: 100%;
height: 100%;
padding: 1em;
}
.ssSearch .jobnaviMenu .menu li a span {
color: #f5abab;
font-weight: bold;
position: relative;
margin-left: 3em;
}
.ssSearch .jobnaviMenu .menu li::after {
content: '';
top: 50%;
right: 10px;
width: 0.6em;
height: 0.6em;
border-bottom: solid 2px #f5abab;
border-right: solid 2px #f5abab;
transform: translate(0, -50%) rotate(-45deg);
}
.ssSearch .jobnaviMenu li::before {
content: '';
left: 5%;
width: 32px;
height: 32px;
z-index: 2;
background-position: center top;
background-repeat: no-repeat;
}
.ssSearch .jobnaviMenu li.jobvote::before {
background-image: url('data:image/svg+xml;utf8,');
top: calc(50% - 0.8em);
}
.ssSearch .jobnaviMenu li.resume::before {
background-image: url('data:image/svg+xml;utf8,');
top: calc(50% - 0.5em);
width: 32px;
}
.ssSearch .jobnaviMenu li.interview::before {
background-image: url('data:image/svg+xml;utf8,');
top: calc(50% - 1em);
height: 28px;
}
/* sensei hogosha Block ----------------------------- */
.secAdult {
position: relative;
padding: 100px 15px;
background: var(--bgHougan);
}
.secAdult .secTitle {
padding: 0 0 40px;
font-size: 3.4rem;
line-height: 1.2;
font-weight: bold;
text-align: center;
}
.secAdult .buttonCards {
margin: 0 auto 60px;
}
.secAdult .buttonCards a {
padding: 0 32px;
background: var(--secMainColor);
color: #333;
}
.secAdult .buttonCards a[href="/forteacher/"]::after {
content: '';
bottom: 0;
left: 0;
width: 70px;
height: 70px;
background: url('../../../img/module/layout/img_teacher_01.png') left bottom / contain no-repeat;
}
.secAdult .buttonCards a[href="/newcolumn/parents"]::after {
content: '';
bottom: 0;
left: 12px;
width: 60px;
height: 60px;
background: url('../../../img/module/layout/img_parents_01.png') left bottom / contain no-repeat;
}
.secAdult .monbushou {
position: relative;
z-index: 2;
margin: 0 auto;
max-width: 600px;
}
.secAdult .monbushou ul {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
.secAdult .monbushou a {
display: block;
padding: 8px;
background: #fff;
box-shadow: 0 0 0 1px #efefef inset, 0 2px 0 0 rgba(0, 0, 0, 0.2);
border-radius: 8px;
text-align: center;
}
.secAdult .monbushou img {
height: 32px;
width: auto;
object-fit: contain;
}
li.nopopup img.list {
position: absolute;
z-index: 30;
width: 60px;
height: auto;
top: -20%;
right: -10px;
}
.shortmovievent {
position: fixed;
z-index: 701;
bottom: calc(var(--cmnMenuHt) + 50px);
right: -4px;
cursor: pointer;
width: fit-content;
display: grid;
right: -39px;
}
.shortmovievent img.santa {
animation: slideIn 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
width: 127px;
height: auto;
right: 7px;
position: relative;
}
@keyframes slideIn {
0% {
transform: translateX(180px);
opacity: 0;
}
100% {
transform: translateX(0);
}
40%,
100% {
opacity: 1;
}
}
.shortmovievent img.message {
left: 1px;
bottom: 11px;
width: 86px;
height: auto;
position: relative;
animation: bounceInUp 1.0s ease 0s 1 normal;
}
@keyframes bounceInUp {
60%,
75%,
90%,
100% {
animation-timing-function: cubic-bezier(0.215, .61, 0.355, 1)
}
0% {
opacity: 0;
transform: translate3d(0, 3000px, 0) scaleY(5);
}
60% {
opacity: 1;
transform: translate3d(0, -20px, 0) scaleY(0.9);
}
75% {
transform: translate3d(0, 10px, 0) scaleY(0.95);
}
90% {
transform: translate3d(0, -5px, 0) scaleY(0.985);
}
100% {
transform: translateZ(0);
}
}
#popup {
display: none;
/* label でコントロールするので input は非表示に */
}
.popup-open {
cursor: pointer;
/* マウスオーバーでカーソルの形状を変えることで、クリックできる要素だとわかりやすいように */
}
.popup-overlay {
display: none;
/* input にチェックが入るまでは非表示に */
}
#popup:checked~.popup-overlay {
display: block;
z-index: 99999;
background-color: #00000070;
position: fixed;
width: 100%;
height: 100vh;
top: 0;
left: 0;
}
.popup-window {
width: 90vw;
max-width: 560px;
padding: 20px;
background-color: #ffffff;
border-radius: 6px;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.popup-text {
margin: 0;
}
.popup-text:not(:last-of-type) {
margin-bottom: 1em
}
.popup-close {
cursor: pointer;
position: absolute;
top: -26px;
right: 0;
}
.siteTop .snow {
/*雪の色*/
color: rgb(209, 244, 255);
/*雪の大きさ*/
font-size: 20px;
/*初期位置*/
position: fixed;
z-index: 710;
top: -5%;
/*雪を適当な幅で降らせる*/
font-size: 1.2rem;
text-shadow:
5vw -100px 2px,
10vw -400px 3px,
20vw -500px 4px,
30vw -580px 1px,
39vw -250px 2px,
42vw -340px 5px,
56vw -150px 2px,
63vw -180px 0,
78vw -220px 4px,
86vw -320px 9px,
94vw -170px 7px;
/*雪アニメーション1*/
animation: roll 8s linear infinite;
pointer-events: none;
}
.siteTop .snow img {
width: 8vw;
max-width: 40px;
height: auto;
filter: drop-shadow(1px 1px 2px rgb(166, 198, 219));
}
/*2つめの雪アニメーション*/
.siteTop .snow2nd {
animation: anim 15s linear infinite;
}
.siteTop .snow3nd {
animation: anim 10s linear infinite;
right: 300px;
}
.siteTop .snow4nd {
animation: anim 18s linear infinite;
right: 90px;
}
.siteTop .snow5nd {
animation: anim 12s linear infinite;
right: 20px;
}
.siteTop .snow5nd img,
.siteTop .snow6nd img {
width: 5vw;
max-width: 32px;
}
.siteTop .snow7nd,
.siteTop .snow8nd {
display: none;
}
@keyframes roll {
0% {
transform: rotate(0deg);
}
90% {
opacity: 1;
}
100% {
transform: rotate(20deg);
top: 100%;
opacity: 0;
}
}
@keyframes anim {
100% {
color: transparent;
top: 150%;
}
}
/* 流れ星 */
/* 新しく追加するCSS */
@keyframes shtstra {
0% {
background-position-y: 0, 100%;
}
50%,
100% {
background-position-y: 0, 0%;
}
}
@keyframes shtstrb {
0%,
10% {
background-position-x: 0px, 100%;
}
20%,
30% {
background-position-x: 200px, 100%;
}
40%,
50% {
background-position-x: 100px, 100%;
}
60%,
70% {
background-position-x: 250px, 100%;
}
80%,
90% {
background-position-x: 150px, 100%;
}
}
.shtstr1 {
height: 110vh;
width: 100vw;
clip-path: polygon(99% 0, 99% 0, 52% 100%, 51% 100%);
background-image:
repeating-linear-gradient(135deg, rgba(255, 255, 255, 0) 0% 49%, 50%, rgba(255, 255, 255, 0) 51% 100%),
linear-gradient(rgba(255, 255, 255, 0) 0% 33%, #feffb4 66%, rgba(255, 255, 255, 0) 67% 100%);
background-size: 100% 100%, 100% 300%;
animation: shtstra 7s linear infinite, shtstrb 7s linear infinite;
position: fixed;
top: 0;
left: 0;
z-index: 710;
pointer-events: none;
transform: rotate(30deg);
}
.shtstr2 {
height: 110vh;
width: 100vw;
clip-path: polygon(99% 0, 99% 0, 52% 100%, 51% 100%);
background-image:
repeating-linear-gradient(135deg, rgba(255, 255, 255, 0) 0% 49%, 50%, rgba(255, 255, 255, 0) 51% 100%),
linear-gradient(rgba(255, 255, 255, 0) 0% 33%, #feffb4 66%, rgba(255, 255, 255, 0) 67% 100%);
background-size: 100% 100%, 100% 300%;
animation: shtstra 5s linear infinite, shtstrb 4s linear infinite;
position: fixed;
top: -450px !important;
z-index: 710;
pointer-events: none;
transform: rotate(30deg);
}
.shtstr3 {
height: 100vh;
width: 100vw;
clip-path: polygon(99% 0, 99% 0, 52% 100%, 51% 100%);
background-image:
repeating-linear-gradient(135deg, rgba(255, 255, 255, 0) 0% 49%, 50%, rgba(255, 255, 255, 0) 51% 100%),
linear-gradient(rgba(255, 255, 255, 0) 0% 33%, #feffb4 66%, rgba(255, 255, 255, 0) 67% 100%);
background-size: 100% 100%, 100% 300%;
animation: shtstra 4s linear infinite, shtstrb 4s linear infinite;
position: fixed;
top: -593px !important;
z-index: 710;
pointer-events: none;
transform: rotate(30deg);
}
/* 点滅 */
@keyframes blinking {
0% {
opacity: 0.25;
}
100% {
opacity: 1;
}
}
/* 雲の登場 */
@keyframes fadeIn2 {
from {
opacity: 0;
transform: translateX(50px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateX(-50px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
.shtstr1_star {
pointer-events: none;
}
.shtstr1_star img {
position: fixed;
z-index: 702;
bottom: calc(var(--cmnMenuHt) + 40px);
right: -16px;
cursor: pointer;
width: fit-content;
display: grid;
left: -62px;
width: 218px;
animation: blinking 2s ease-in-out infinite alternate;
pointer-events: none;
}
.amanogawa img {
width: 260px;
z-index: 701;
left: -94px;
bottom: 68px;
animation: fadeIn 1s ease 1s 1 normal backwards;
pointer-events: none;
}
.shtstr2_star img {
position: fixed;
z-index: 702;
bottom: calc(var(--cmnMenuHt) + 540px);
right: -4px;
cursor: pointer;
width: fit-content;
display: grid;
left: 88%;
width: 239px;
animation: blinking 2s ease-in-out infinite alternate;
pointer-events: none;
}
.shtstr2_star .amanogawa2 img {
width: 200px;
z-index: 701;
bottom: 95px;
animation: fadeIn2 1s ease 1s 1 normal backwards;
pointer-events: none;
left: 59%;
}
.shtstr3_star img {
display: none;
}
.shtstr3_star .amanogawa2 img {
display: none;
}
@media screen and (min-width: 421px) {
.topMV {
position: relative;
height: auto;
}
.topMvSlider .swiper .swiper-slide {
mask-image: none;
-webkit-mask-image: none;
}
.topMvSlider .swiper-pagination-bullets.swiper-pagination-horizontal {
position: absolute;
bottom: 5px;
left: 32px;
margin: 0;
width: fit-content;
transform: translate(0, 0);
}
.topMV .mvSearchArea {
margin: 5px auto 0;
transform: translate(0, 0);
}
}
/* studytipsランキング */
.ranking {
padding-top: 40px;
position: relative;
}
.rankingback {
padding: 32px 25px;
}
.rankinglist {
padding-top: 20px;
}
.cheers.tips em {
color: rgb(245, 138, 138);
}
.cheers.tips em:nth-of-type(2) {
color: #009ef3;
}
.ranking p {
position: relative;
}
p.kininaru {
font-size: 1.6rem;
position: relative;
font-weight: bold;
}
p.kininaru::before {
content: '';
top: 100%;
left: 50%;
width: 0;
height: 0;
border-style: solid;
border-width: 8px 8px 0 8px;
border-color: rgb(245, 138, 138) rgba(255, 255, 255, 0) rgba(255, 255, 255, 0) rgba(255, 255, 255, 0);
transform: translate(-50%, 5px);
}
.kininaru {
font-size: 18px;
color: #333;
margin-bottom: 20px;
line-height: 1.5;
z-index: 5;
text-shadow: 2px 2px 0px #fff;
}
.ribonbak {
z-index: 1;
position: absolute;
}
.ribonbak.forSp img {
position: relative;
margin: 0 auto;
top: 0;
opacity: 0.9;
}
.rankingback {
display: block;
background-color: rgb(215, 244, 252);
position: relative;
}
.rankinglist {
display: block;
/* background-color: #eaf8ff; */
background-image: radial-gradient(#fff 2px, transparent 2px);
background-size: 20px 20px;
}
.ranking ul {
margin: 0 auto;
padding: 20px;
width: min(100%, 340px);
border-radius: 16px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
background-color: rgba(255, 255, 255, 0.7);
}
.ranking p,
.ranking p {
font-size: 22px;
color: #242b59;
/* 濃い青色の文字 */
text-align: center;
margin-bottom: 10px;
}
.ranking p {
margin: 0 auto;
display: flex;
justify-content: center;
position: relative;
max-width: 300px;
margin-bottom: 15px;
padding: .6em;
border: 2px solid rgb(245, 138, 138);
border-radius: 5px;
background-color: #fff;
color: #333333;
filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.05)) drop-shadow(0 2px 5px rgba(0, 0, 0, 0.2));
top: 18px;
z-index: 10;
}
.ranking p::before,
.ranking p::after {
position: absolute;
bottom: -11px;
width: 22px;
height: 11px;
clip-path: polygon(0 0, 100% 0, 50% 100%);
content: '';
}
.ranking p::before {
background-color: rgb(245, 138, 138);
}
.ranking p::after {
bottom: -9px !important;
background-color: #fff;
}
.ranking p em {
color: rgb(245, 138, 138);
font-weight: bold;
}
/* 学問 */
.ranking.gakumon p {
margin: 0 auto;
display: flex;
justify-content: center;
position: relative;
max-width: 300px;
margin-bottom: 15px;
padding: .6em;
border: 1px solid #46a7f5;
border-radius: 5px;
background-color: #fff;
color: #333333;
filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.05)) drop-shadow(0 2px 5px rgba(0, 0, 0, 0.2));
top: 18px;
z-index: 10;
}
.ranking p::before,
.ranking p::after {
position: absolute;
bottom: -11px;
width: 22px;
height: 11px;
clip-path: polygon(0 0, 100% 0, 50% 100%);
content: '';
}
.ranking.gakumon p::before {
background-color: #46a7f5;
}
.ranking.gakumon p::after {
bottom: -9px;
background-color: #fff;
}
.ranking.gakumon p em {
color: #46a7f5;
font-weight: bold;
}
.ranking.gakumon p {
border: 2px solid #46a7f5;
/* 青色の枠線 */
}
.rankingOukan {
position: relative;
}
.rankingOukan::before {
background: url(../../../img/module/layout/img_ranking.png) center / contain no-repeat;
content: '';
width: 40px;
height: 40px;
position: absolute;
left: 50%;
top: -26px;
background-size: contain;
background-repeat: no-repeat;
transform: translate(-50%, 0);
}
.ranking ul li {
font-size: 18px;
color: #333;
margin: 3px 0;
border-radius: 10px;
padding-left: 50px;
/* アイコンと数字用のスペース */
max-width: 260px;
margin: 10px auto;
position: relative;
z-index: 1;
transition-duration: .2s;
background-color: #fff;
}
.ranking ul li:hover {
transform: scale(1.1);
filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.02)) drop-shadow(0 2px 5px rgba(0, 0, 0, 0.1));
}
.ranking ul li::before {
content: '';
width: 40px;
height: 40px;
position: absolute;
left: 5px;
top: 0px;
background-size: contain;
background-repeat: no-repeat;
}
.ranking ul li a {
padding: 10px;
display: block;
}
.ranking ul li a:hover {
opacity: 1;
}
.ranking ul li:nth-child(1)::before {
background: url(../../../img/module/layout/gold.png) center / contain no-repeat;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
/* 文字に影を追加して立体感を強調 */
}
.ranking ul li:nth-child(2)::before {
background: url(../../../img/module/layout/silver.png) center / contain no-repeat;
}
.ranking ul li:nth-child(3)::before {
background: url(../../../img/module/layout/blond.png) center / contain no-repeat;
}
.ranking ul li:nth-child(4)::before {
background: url(../../../img/module/layout/four_icon.png) center / contain no-repeat;
}
.ranking ul li:nth-child(5)::before {
background: url(../../../img/module/layout/five_icon.png) center / contain no-repeat;
}
button {
font-size: 18px;
color: white;
background-color: rgb(245, 138, 138);
padding: 10px 20px;
border: none;
border-radius: 25px;
cursor: pointer;
}
button:hover {
background-color: rgb(245, 138, 138);
}
.button {
display: flex;
justify-content: center;
align-items: center;
width: min(83.33%, 250px);
margin: 20px auto;
padding: .9em 2em;
border: none;
border-bottom: solid 5px #fff;
border-radius: 50px;
background-color: rgb(245, 138, 138);
color: #fff;
font-weight: 600;
font-size: 18px;
transition: .5s ease;
position: relative;
}
.button:hover {
transform: translateY(3px);
border-bottom-width: 2px;
}
.button::before {
content: '';
bottom: 57px;
left: 50%;
width: 1px;
height: 32px;
border-left: 6px dotted rgb(245, 138, 138);
}
.button::after {
background: linear-gradient(45deg, transparent 50%, #fff 50%);
content: "";
height: .6em;
width: .6em;
right: .6em;
top: calc(50% - .3em);
transform: rotate(45deg);
position: absolute;
}
.button.gakumon {
background-color: #46a7f5;
position: relative;
}
.button.gakumon:hover {
background-color: #67b5f9;
}
.button.gakumon::before {
border-left: 6px dotted #67b5f9;
}
.rankingback .shinroShigoto {
background: none;
}
/* -------------------------
/* for pc only
--------------------------*/
@media screen and (min-width: 769px) {
:root {
--padding15: 32px;
}
.scSearch,
.ocSearch,
.srSearch,
.ssSearch {
background: var(--bgHougan);
}
.genBtn a,
.genBtn label {
transition: all .25s 0s ease-in-out;
}
.genBtn a:hover,
.genBtn label:hover {
opacity: 0.75;
box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.3);
}
.buttonCards dl {
grid-template-columns: repeat(2, 1fr);
}
.thmbCards {
grid-template-columns: repeat(2, 1fr);
gap: 32px;
}
.thmbCards a {
padding: 15px;
}
.cheers {
font-size: 2.4rem;
}
.emp::before {
width: 5px;
height: 5px;
}
.notePaper .inner {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.notePaper li{
display: grid;
grid-template-rows: subgrid;
grid-row: span 3;
}
.notePaper li a {
grid-template-rows: subgrid;
grid-row: span 3;
padding: 24px 16px 24px 10px;
gap: 16px;
}
.notePaper .itemDate {
margin: 0;
}
.notePaper .itemDate span {
margin: 0 0 5px;
}
.notePaper .itemDate .label {
margin: 0;
padding: 3px 0.75em;
font-size: 1rem;
}
.notePaper .itemName{
padding: 4px 8px;
border: solid 1px var(--secMainColor);
align-content: center;
font-size: 1.2rem;
}
.scSearch .notePaper .itemName{
text-align: center;
font-size: 1.3rem;
line-height: 1.4;
}
.notePaper .itemTxt {
font-size: 1.2rem;
line-height: 1.6;
}
/* Notice to users ----------------------------- */
.noticeInner {
align-items: center;
background: #fff;
border-radius: 16px;
}
.noticeInner .title {
width: 10em;
}
.noticeInner .readText {
width: calc(100% - 12em - 5px);
}
.inPageLinks {
gap: 20px;
}
.topSearchForm {
margin: 0 auto;
padding: 0 10% 32px;
gap: 32px;
}
.secHdr {
margin: 0 auto 90px;
padding: 150px 10px 80px;
}
.secCont {
margin: 0 auto 90px;
}
.scSearch .secHdr {
padding-top: 100px;
}
.secTopics {
padding: 32px 15px 90px;
}
.scSearch .links01 {
grid-template-columns: repeat(2, 1fr);
justify-content: center;
}
.scSearch .links01 li {
width: 100%;
}
.scSearch .links01 li:first-child::before {
width: 168px;
height: 139.5px;
}
.scSearch .links01 li:last-child::before {
width: 199.5px;
height: 135px;
}
.scSearch .links01 li:first-child::after {
top: -35px;
left: 55px;
width: 27px;
height: 37.5px;
}
.scSearch .links01 li:last-child::after {
top: -28px;
right: -25px;
width: 45px;
height: 42px;
}
.scSearch .links01 a {
width: 100%;
transition: all .25s 0s ease;
}
.scSearch .links01 a:hover,
.scSearch .links01 a:hover {
opacity: 1;
box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.3);
}
.scSearch .links01 span::after {
width: 0.8em;
height: 0.8em
}
.scSearch .links01 span {
font-size: 2rem;
}
.scSearch .links01 em {
font-size: 2.4rem;
}
.schoolSlider .scrollLists,
.ocSlider .scrollLists,
.shinroSlider .scrollLists {
margin: 0 auto 32px;
min-width: auto;
max-width: 1000px;
flex-wrap: wrap;
white-space: normal;
padding: 50px 25px;
gap: 32px 10px;
}
.schoolSlider .scrollLists li,
.ocSlider .scrollLists li,
.shinroSlider .scrollLists li {
margin: 0 auto;
text-align: center;
transition: all 0.25s 0s ease-out;
}
.schoolSlider .slideNav,
.ocSlider .slideNav,
.shinroSlider .slideNav {
display: none;
}
.scrollLists li:hover {
transform: translate(0, -10px);
}
.scrollLists a:hover {
opacity: 1;
}
.schoolSlider .scrollLists {
position: relative;
padding: 70px 25px;
gap: 60px 10px;
overflow: visible;
background: var(--secLightColor);
border-radius: 16px;
}
.schoolSlider .scrollLists::before {
content: '';
bottom: -15px;
left: 50%;
width: 1px;
height: 32px;
border-left: 5px dotted var(--secMainColor);
}
.schoolSlider .scrollLists .itemTxt {
-webkit-line-clamp: 4;
}
.ocSlider .scrollLists {
position: relative;
gap: 50px 10px;
border-radius: 16px;
overflow: visible;
}
.ocSlider .scrollLists::before {
content: '';
bottom: -15px;
left: 50%;
width: 1px;
height: 32px;
border-left: 5px dotted var(--secMainColor);
}
.ocSlider .scrollLists .itemTxt {
gap: 10px;
}
.ocSlider .scrollLists h4 {
-webkit-line-clamp: 2;
height: 2.8em;
font-size: 1.3rem;
}
.ocSlider .scrollLists h5 {
font-size: 1.1rem;
}
.ocSlider .scrollLists .itemDate span {
padding: 3px 5px;
}
.schoolSlider .sliderLists {
padding: 70px 0 0;
}
.ocSearch .secTopics h3 span {
padding: 0;
}
.ocSearch .secTopics h3 span::before {
content: none;
}
.ocTopics .buttonCards dl::before {
content: '';
z-index: 1;
bottom: 100%;
right: 32px;
width: 160px;
height: 160px;
background: url('../../../img/module/layout/img_businessman_01.png') right bottom / contain no-repeat;
}
.srSearch .secHdrInner h3 {
font-size: 2.2rem;
}
.shinroSlider .scrollLists {
gap: 100px 10px;
}
.shinroBnr .inner {
grid-template-columns: min(60%, 500px) auto;
}
.shinroBnr .inner.kokka {
margin-top: 35px;
}
.shinroBnr h3 {
grid-column: 1 / 3;
grid-row: 1 / 2;
}
.shinroSlider .scrollLists .itemThmb{
height: 100px;
}
.shinroBnr .itemThmb {
grid-column: 1 / 2;
grid-row: 2 / 4;
display: grid;
}
.shinroBnr .itemThmb figure {
align-self: self-end;
}
.shinroBnr h4 {
grid-column: 2 / 3;
grid-row: 2 / 3;
font-size: 1.4rem;
}
.shinroBnr p {
grid-column: 2 / 3;
grid-row: 3 / 4;
text-align: left;
}
.shinroAdvise h4 {
margin: 0 auto 32px;
}
.shinroAdvise ul {
margin: 0 auto;
grid-template-columns: repeat(2, 1fr);
grid-auto-rows: minmax(130px, auto);
gap: 32px;
}
.sliderBlock.shinroSlider .sliderLists {
justify-content: center;
}
.shinroShigoto ul {
margin: 0 auto;
max-width: 600px;
}
.ssSearch .secHdr::before {
background-position: -50px 32px, 100% 20px;
}
.secAdult .buttonCards a {
padding: 0 70px;
}
.secAdult .buttonCards a[href="/forteacher/"]::after {
left: 5px;
width: 110px;
height: 94px;
}
.secAdult .buttonCards a[href="/newcolumn/parents"]::after {
left: 10px;
width: 70px;
height: 100px;
}
.secAdult .monbushou ul{
gap: 32px;
}
.moviePlayer.short iframe {
position: relative;
}
.siteTop .snow {
font-size: 1.4rem;
}
.siteTop .snow5nd {
animation: anim 12s linear infinite;
right: 900px;
}
.siteTop .snow6nd {
animation: anim 20s linear infinite;
right: 85%;
}
.siteTop .snow7nd {
display: block;
animation: anim 15s linear infinite;
right: 700px;
}
.siteTop .snow8nd {
display: block;
right: auto;
left: 3%;
}
.shtstr1 {
height: 100vh;
width: 100vw;
clip-path: polygon(99% 0, 99% 0, 52% 100%, 51% 100%);
position: fixed;
top: 0;
left: 0;
z-index: 710;
pointer-events: none;
}
.shtstr2 {
left: -400px;
top: 0;
}
.shtstr3 {
left: -400px;
top: 0;
}
.shtstr1_star img {
position: fixed;
z-index: 702;
bottom: calc(var(--cmnMenuHt) + 1px);
right: -4px;
cursor: pointer;
width: fit-content;
display: grid;
left: 43px;
width: 280px;
animation: blinking 2s ease-in-out infinite alternate;
}
.amanogawa img {
width: 320px;
z-index: 701;
left: -36px;
bottom: 25px;
animation: fadeIn 1s ease 1s 1 normal backwards;
}
.shtstr2_star img {
position: fixed;
z-index: 702;
bottom: calc(var(--cmnMenuHt) + 650px);
right: -4px;
cursor: pointer;
width: fit-content;
display: grid;
left: 88%;
width: 239px;
animation: blinking 2s ease-in-out infinite alternate;
}
.shtstr2_star .amanogawa2 img {
width: 242px;
z-index: 701;
bottom: 105px;
animation: fadeIn2 1s ease 1s 1 normal backwards;
left: 84%;
}
.shtstr3_star img {
position: fixed;
z-index: 702;
bottom: calc(var(--cmnMenuHt) + 645px);
right: -16px;
cursor: pointer;
width: fit-content;
display: grid;
left: 138px;
width: 187px;
animation: blinking 2s ease-in-out infinite alternate;
pointer-events: none;
}
.shtstr3_star .amanogawa2 img {
width: 260px;
z-index: 701;
left: 14px;
bottom: 677px;
animation: fadeIn 1s ease 1s 1 normal backwards;
display: block;
pointer-events: none;
}
.ranking {
display: grid;
grid-template-rows: subgrid; /* subgrid利用で左右調整 */
grid-row: span 3;
gap: 0;
padding-top: 20px;
}
.rankinglist {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 51px;
margin: 0 auto;
width: min(100%, 770px);
padding: 15px min(60px, 5vw);
}
.ranking.gakumon p {
max-width: 260px;
}
.ranking p {
max-width: 260px;
}
.button{
bottom: -10px;
}
.topSearchForm .formSelect.flex{
flex-wrap: nowrap;
}
}
@media screen and (min-width: 800px) {
.shortmovievent {
bottom: calc(var(--cmnMenuHt) + 15px);
right: -28px;
}
.shortmovievent img.message {
width: 110px;
height: auto;
left: -18px;
}
}
@media screen and (min-width: 900px) {
/* Main Visual ----------------------------- */
.topMV {
display: grid;
justify-content: center;
grid-template-columns: clamp(300px, 30%, 350px) auto;
margin: 0 auto;
padding: 10px 10px 32px;
max-width: 1200px;
}
.topMvSlider {
position: static;
grid-column: 2 / 3;
grid-row: 1 / 2;
display: grid;
}
.topMvSlider .swiper {
align-self: center;
border-radius: 0 1rem 1rem 0;
}
.topMvSlider .swiper .swiper-slide {
width: 100%;
}
.topMvSlider .swiper .swiper-slide img {
overflow: hidden;
}
.topMvSlider .swiper-pagination-bullets.swiper-pagination-horizontal {
left: auto;
right: 60px;
bottom: 15px;
}
.topMvSlider .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
margin: 0 2px;
width: 32px;
}
.topMV .mvSearchArea .mvSearchAreaTtl {
display: block;
font-weight: bold;
color: #fff;
font-size: 2rem;
text-align: center;
}
.topMV .mvSearchArea {
grid-column: 1 / 2;
grid-row: 1 / 2;
place-content: center;
gap: 32px;
margin: 0;
padding: 1rem 16px;
width: 100%;
border-radius: 1rem 0 0 1rem;
box-shadow: none;
transform: translate(0);
container: mvSearchArea / inline-size;
}
.topMV .mvSearchArea>* {
width: 100cqw;
}
.topMV .mvSearchArea ul a {
font-size: 1.3rem;
line-height: 1.4;
}
.topMV .mvSearchArea .searchForm {
grid-template-columns: auto 3em;
font-size: 1.3rem;
}
.topMV .mvSearchArea .searchForm input[type="submit"] {
grid-column: 2 / 3;
background: var(--svgGlassWhite), #999;
background-size: 1.25em auto;
border-radius: 0 0.5rem 0.5rem 0;
}
.topMV .mvSearchArea .searchForm .searchInput {
grid-column: 1 / 2;
padding-left: 1rem;
}
}
.iventdeco {
bottom: calc(var(--cmnMenuHt) + 5px);
}
.ribonbak {
z-index: 1;
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 100%;
max-width: 1200px;
}
.ribonbak.forPc img {
position: relative;
margin: 0 auto;
top: 0px;
}
@media screen and (min-width: 1215px) {
/* Main Visual ----------------------------- */
.topMV {
padding: 15px 15px 32px;
}
}