@charset "UTF-8";
@charset "UTF-8";
@charset "utf-8";
@charset "utf-8";
        *:first-child+html body {
font-size: 75%;
} * html body {
font-size:75%;
} .fNormal  { font-weight: normal;}
.fBold   { font-weight: bold;}
.fItalic { font-style: italic;}
.fSSSS { font-size: 60%;}
.fSSS { font-size: 70%;}
.fSS  { font-size: 78%;} .fS   { font-size: 85%;} .fM   { font-size: 100%;}
.fL   { font-size: 115%;} .fLL  { font-size: 130%;} .fLLL { font-size: 143%;} .fLLLL { font-size: 200%;}
sup {
font-size: 78%;
vertical-align: top;
}
sub {
font-size: 78%;
vertical-align: baseline;
} .txtColor1 {
color: #ea5514;
}
.txtColor2 {
color: #f0c21f;
}
.txtColor3 {
color: #fe0000;
}
.txtColor4 {}
.txtColor5 {}
.fRed {
color: #cc0000;
}
.fGray {
color: #999999;
}
a {
color: #FF86A0;
text-decoration: none;
outline: none;
}
a:hover {
text-decoration: underline;
} .mt00 { margin-top:  0 !important;}
.mt05 { margin-top:  5px!important;}
.mt10 { margin-top: 10px!important;}
.mt12 { margin-top: 12px!important;}
.mt15 { margin-top: 15px!important;}
.mt20 { margin-top: 20px!important;}
.mt25 { margin-top: 25px!important;}
.mt30 { margin-top: 30px!important;}
.mt35 { margin-top: 35px!important;}
.mt40 { margin-top: 40px!important;}
.mt45 { margin-top: 45px!important;}
.mt50 { margin-top: 50px!important;}
.mr00 { margin-right:  0px !important;}
.mr05 { margin-right:  5px!important;}
.mr10 { margin-right: 10px!important;}
.mr12 { margin-right: 12px!important;}
.mr15 { margin-right: 15px!important;}
.mr20 { margin-right: 20px!important;}
.mr25 { margin-right: 25px!important;}
.mr30 { margin-right: 30px!important;}
.mr35 { margin-right: 35px!important;}
.mr40 { margin-right: 40px!important;}
.mr45 { margin-right: 45px!important;}
.mr50 { margin-right: 50px!important;}
.mb00 { margin-bottom:  0 !important;}
.mb05 {
margin-bottom: 5px;
background-repeat: no-repeat;
}
.mb10 { margin-bottom: 10px!important;}
.mb12 { margin-bottom: 12px!important;}
.mb15 { margin-bottom: 15px!important;}
.mb20 { margin-bottom: 20px!important;}
.mb25 { margin-bottom: 25px!important;}
.mb30 { margin-bottom: 30px!important;}
.mb35 { margin-bottom: 35px!important;}
.mb40 { margin-bottom: 40px!important;}
.mb45 { margin-bottom: 45px!important;}
.mb50 { margin-bottom: 50px!important;}
.ml00 { margin-left:  0 !important;}
.ml05 { margin-left:  5px;}
.ml10 { margin-left: 10px;}
.ml12 { margin-left: 12px;}
.ml15 { margin-left: 15px;}
.ml20 { margin-left: 20px;}
.ml25 { margin-left: 25px;}
.ml30 { margin-left: 30px;}
.ml30 { margin-left: 35px;}
.ml40 { margin-left: 40px;}
.ml45 { margin-left: 45px;}
.ml50 { margin-left: 50px;} .pt00 { padding-top:   0 !important;}
.pt05 { padding-top:  5px;}
.pt10 { padding-top: 10px;}
.pt12 { padding-top: 12px;}
.pt15 { padding-top: 15px;}
.pt20 { padding-top: 20px;}
.pt25 { padding-top: 25px;}
.pt30 { padding-top: 30px;}
.pt35 { padding-top: 35px;}
.pt40 { padding-top: 40px;}
.pt45 { padding-top: 45px;}
.pt50 { padding-top: 50px;}
.pr00 { padding-right:   0 !important;}
.pr05 { padding-right:  5px;}
.pr10 { padding-right: 10px;}
.pr12 { padding-right: 12px;}
.pr15 { padding-right: 15px;}
.pr20 { padding-right: 20px;}
.pr25 { padding-right: 25px;}
.pr30 { padding-right: 30px;}
.pr35 { padding-right: 35px;}
.pr40 { padding-right: 40px;}
.pr45 { padding-right: 45px;}
.pr50 { padding-right: 50px;}
.pb00 { padding-bottom:   0 !important;}
.pb05 { padding-bottom:  5px;}
.pb10 { padding-bottom: 10px;}
.pb12 { padding-bottom: 12px;}
.pb15 { padding-bottom: 15px;}
.pb20 { padding-bottom: 20px;}
.pb25 { padding-bottom: 25px;}
.pb30 { padding-bottom: 30px;}
.pb35 { padding-bottom: 35px;}
.pb40 { padding-bottom: 40px;}
.pb45 { padding-bottom: 45px;}
.pb50 { padding-bottom: 50px;}
.pl00 { padding-left:   0 !important;}
.pl05 { padding-left:  5px;}
.pl10 { padding-left: 10px;}
.pl12 { padding-left: 12px;}
.pl15 { padding-left: 15px;}
.pl20 { padding-left: 20px;}
.pl25 { padding-left: 25px;}
.pl30 { padding-left: 30px;}
.pl30 { padding-left: 35px;}
.pl40 { padding-left: 40px;}
.pl45 { padding-left: 45px;}
.pl50 { padding-left: 50px;} .inlineL { text-align: left;}
.inlineC { text-align: center;}
.inlineR { text-align: right;} .vlineT { vertical-align: top;}
.vlineM { vertical-align: middle;}
.vlineB { vertical-align: bottom;} .wHalf  { width: 48%;}
.wTri   { width: 33%;}
.wQuart { width: 24%;}
.wFull  { width: 99.9%;}
.wMax   { width: 100%;} .tw03 { width:  3%;}
.tw05 { width:  5%;}
.tw10 { width: 10%;}
.tw13 { width: 13%;}
.tw15 { width: 15%;}
.tw20 { width: 20%;}
.tw25 { width: 25%;}
.tw30 { width: 30%;}
.tw35 { width: 35%;}
.tw40 { width: 40%;}
.tw45 { width: 45%;}
.tw50 { width: 50%;} .fltL {
display: inline;
float: left;
}
.fltR {
display: inline;
float: right;
}
.ft {
overflow: hidden;
zoom: 1;
} .imgBoxL,
.imgBoxR {
display: block;
min-height: 1%;
}
.imgBoxL:after,
.imgBoxR:after {
clear: both;
content:".";
display: block;
height: 0;
visibility: hidden;
}
* html .imgBoxL,
* html .imgBoxR {
height: 1%;/*\*//*/height: auto;
overflow: hidden;/**/}
.imgBoxL .fltImg {
display: inline;
float: left;
margin-right: 10px;
}
.imgBoxR .fltImg {
display: inline;
float: right;
margin-left: 10px;
} .clearfix {
display: block;
min-height: 1%;
}
.clearfix:after {
clear: both;
content:".";
display: block;
height: 0;
visibility: hidden;
}
* html .clearfix {
height: 1%;/*\*//*/height: auto;
overflow: hidden;/**/} .blockC { text-align: center;}
.blockC .block {
margin-right: auto;
margin-left: auto;
text-align: left;
} * html .blockC .block {
margin-right: 0;
margin-left: 0;
}
.blockL { text-align: left;}
.blockR { text-align: right;}
.blockR .block {
margin-left: auto;
text-align: left;
} * html .blockR .block {
margin-left: 0;
} .clear { 
clear: both;
}
.block  { display: block;}
.inline { display: inline;}
.hide   { display: none;}
.nobg {
background: none;
}
.underLine { text-decoration: underline;}
.noLine    { text-decoration: none;} .edsmark { border: 2px solid #9966CC; padding: 10px; text-align: center; background-color: #FF99FF; color: #FFF;} .w100{width: 100%;}
.w90{width:90%;}
.w80{width:80%;}
.w70{width:70%;}
.w60{width:60%;}
.w50{width:50%;}
.w40{width:40%;}
.w30{width:30%;}
.w20{width:20%;}
.w10{width:10%;}
@media screen and (max-width: 768px){
.tw100{width:100%;	margin: 0 auto;		display: block;}
.tw90{width:90%;	margin: 0 auto;		display: block;}
.tw80{width:80%;	margin: 0 auto;		display: block;}
.tw70{width:70%;	margin: 0 auto;		display: block;}
.tw60{width:60%;	margin: 0 auto;		display: block;}
.tw50{width:50%;	margin: 0 auto;		display: block;}
.tw40{width:40%;	margin: 0 auto;		display: block;}
.tw30{width:30%;	margin: 0 auto;		display: block;}
.tw20{width:20%;	margin: 0 auto;		display: block;}
.tw10{width:10%;	margin: 0 auto;		display: block;}
} @media screen and (max-width: 480px){
.sw100{width:100%;	margin: 0 auto;		display: block;}
.sw90{width:90%;	margin: 0 auto;		display: block;}
.sw80{width:80%;	margin: 0 auto;		display: block;}
.sw70{width:70%;	margin: 0 auto;		display: block;}
.sw60{width:60%;	margin: 0 auto;		display: block;}
.sw50{width:50%;	margin: 0 auto;		display: block;}
.sw40{width:40%;	margin: 0 auto;		display: block;}
.sw30{width:30%;	margin: 0 auto;		display: block;}
.sw20{width:20%;	margin: 0 auto;		display: block;}
.sw10{width:10%;	margin: 0 auto;		display: block;}
}  #pagetop {
position: fixed;
right: 0px;
bottom: 0px;
} .block1{margin:0 1%;}
.block2{margin:0 2%;}
.block3{margin:0 3%;}
.block4{margin:0 4%;}
.block5{margin:0 5%;}
.block6{margin:0 6%;}
.block7{margin:0 7%;}
.block8{margin:0 8%;}  .pc_none {display:none;}  .pc1L {width: 8.33%;		float: left;}
.pc2L {width: 16.66%;		float: left;}
.pc3L {width: 24.99%;		float: left;} .pc4L {width: 33.33%;		float: left;} .pc5L {width: 41.66%;		float: left;}
.pck5L {width: 20%;			float: left;} .pc6L {width: 50%;			float: left;} .pc7L {width: 58.33%;		float: left;}
.pc8L {width: 66.66%;		float: left;}
.pc9L {width: 74.99%;		float: left;}
.pc10L {width: 83.33%;	float: left;}
.pc11L {width: 91.66%;	float: left;} .pc1R {width: 8.33%;		float: right;}
.pc2R {width: 16.66%;		float: right;}
.pc3R {width: 24.99%;		float: right;} .pc4R {width: 33.33%;		float: right;} .pc5R {width: 41.66%;		float: right;}
.pck5R {width: 20%;			float: right;} .pc6R {width: 50%;			float: right;} .pc7R {width: 58.33%;		float: right;}
.pc8R {width: 66.66%;		float: right;}
.pc9R {width: 74.99%;		float: right;}
.pc10R {width: 83.33%;	float: right;}
.pc11R {width: 91.66%;	float: right;}
@media screen and (max-width: 768px){
.tb_look{display: block;} .tb_none {display:none;} .tb1 {width: 100%; margin: 0 auto ; float: none;}
.tb2 {width: 49.99%; float: left; box-sizing: border-box; padding:0 5px;}
.tb3 {width: 33.33%; float: left; box-sizing: border-box; padding:0 5px;} .tb4 {width: 24.99%; float: left; box-sizing: border-box; padding:0 5px;} } @media screen and (max-width: 480px){
.sp_look{display: block;} .sp_none {display:none;} .sp1 {width: 100%;} .sp2 {width: 49.99%; float: left; padding: 5px; box-sizing: border-box;} .sp3 {width: 33.33%; float: left; padding: 5px; box-sizing: border-box;} .sp4 {width: 24.99%; float: left; padding: 5px; box-sizing: border-box;} .spL {width: 100%;float:left;}
.spR {width: 100%;float:right;}
.spbtn {
float: none;
text-align: center;
display: block;
margin: 20px 0px;
}
}         :root {
--drawer-width: 300px;
--overlay-bg: rgba(0,0,0,.45);
--ease: cubic-bezier(.2,.8,.2,1);
}  html {
overflow-x: hidden;
}
html,
body {
font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
color: #000000;
}
body {
margin: 0px;
-webkit-text-size-adjust: none;
background-color: #ffffff;
line-height: 180%;
font-size: 18px;
word-break: break-all;
}
@media screen and (max-width: 1000px) {
body {
font-size: 16px;
}
}
a:link, a:visited, a:active {
color: #ef858c;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:hover img {
opacity: 0.7;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
}
img {
image-rendering: -webkit-optimize-contrast;
max-width: 100%;
} .link-a {
overflow: hidden; }
.link-a img {
width: 100%; height: 100%; -webkit-transition: -webkit-transform 0.3s ease;
transition: -webkit-transform 0.3s ease;
transition: transform 0.3s ease;
transition: transform 0.3s ease, -webkit-transform 0.3s ease; }
.link-a img:hover {
-webkit-transform: scale(1.1);
transform: scale(1.1); }
hr {
margin: 20px 0px;
padding: 0px;
}
.pcnone {
display: none;
}
@media screen and (max-width: 789px) {
.pcnone {
display: block;
}
}
.tbonpcnone {
display: none;
}
@media screen and (max-width: 1000px) {
.tbonpcnone {
display: block;
}
}
.tbnone {
display: block;
}
@media screen and (max-width: 1000px) {
.tbnone {
display: none;
}
}
.spnone {
display: block;
}
@media screen and (max-width: 789px) {
.spnone {
display: none;
}
}
.sspnone {
display: block;
}
@media screen and (max-width: 570px) {
.sspnone {
display: none;
}
}
.br-pctb {
display: block;
}
@media screen and (max-width: 1000px) {
.br-pctb {
display: none;
}
}
.br-pcsp {
display: block;
}
@media screen and (max-width: 789px) {
.br-pcsp {
display: none;
}
}
.br-pcssp {
display: block;
}
@media screen and (max-width: 570px) {
.br-pcssp {
display: none;
}
}
.br-tb {
display: none;
}
@media screen and (max-width: 1000px) {
.br-tb {
display: block;
}
}
.br-sp {
display: none;
}
@media screen and (max-width: 789px) {
.br-sp {
display: block;
}
}
.br-ssp {
display: none;
}
@media screen and (max-width: 480px) {
.br-ssp {
display: block;
}
}
.br-tbssp {
display: none;
}
@media screen and (max-width: 1000px) {
.br-tbssp {
display: block;
}
}
@media screen and (max-width: 789px) {
.br-tbssp {
display: none;
}
}
@media screen and (max-width: 480px) {
.br-tbssp {
display: block;
}
}
.br-pctbnonesp {
display: block;
}
@media screen and (max-width: 1000px) {
.br-pctbnonesp {
display: none;
}
}
@media screen and (max-width: 789px) {
.br-pctbnonesp {
display: block;
}
}
.br-pctbnonessp {
display: block;
}
@media screen and (max-width: 570px) {
.br-pctbnonessp {
display: none;
}
}
@media (min-width: 791px) {
a[href*="tel:"] {
pointer-events: none;
cursor: default;
text-decoration: none;
color: #000000;
}
}
@media (max-width: 790px) {
a[href*="tel:"] {
pointer-events: auto;
cursor: pointer;
text-decoration: none;
}
} #alink {
margin-top: -120px !important; padding-top: 120px !important; } .btn02 a {
width: 100%;
padding-top: 1em;
padding-bottom: 1em;
border-radius: 50px;
display: block;
font-size: 1.3em;
background-repeat: no-repeat;
background-image: url(//www.hsakuragaoka-h.ed.jp/site/wp-content/themes/sakura-wp/img/common/ico_arrows02.png);
background-position: right 1em center;
text-align: left;
padding-left: 2em;
}
@media screen and (max-width: 789px) {
.btn02 a {
font-size: 1em;
}
}
.btn02 a:hover {
text-decoration: none !important;
display: block;
background-image: url(//www.hsakuragaoka-h.ed.jp/site/wp-content/themes/sakura-wp/img/common/ico_arrows01.png);
}
.btn03 a {
width: 100%;
padding-top: 1.2em;
padding-bottom: 1.2em;
display: block;
margin-left: auto;
margin-right: auto;
font-size: 1.3em;
font-weight: bold;
background-repeat: no-repeat;
background-image: url(//www.hsakuragaoka-h.ed.jp/site/wp-content/themes/sakura-wp/img/common/ico_arrows02.png);
background-position: right 1em center;
text-align: right;
padding-right: 4em;
}
@media screen and (max-width: 789px) {
.btn03 a {
font-size: 1em;
}
}
.btn03 a:hover {
text-decoration: none !important;
display: block;
background-image: url(//www.hsakuragaoka-h.ed.jp/site/wp-content/themes/sakura-wp/img/common/ico_arrows01.png);
}
.btncolor01 a:link, .btncolor01 a:visited {
border: 1px solid #105998;
}
.btncolor01 a:hover {
color: #FFFFFF;
background-color: #105998;
}
.btncolor02 a:link, .btncolor02 a:visited {
color: #ffffff !important;
background-color: #105998;
}
.btncolor02 a:hover {
color: #105998 !important;
background-color: #ffffff;
} header {
position: sticky;
top: 0;
z-index: 50;
background: #fff;
border-bottom: 1px solid #eee;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.headerInner {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
max-height: 9999px;
background-color: #FFFFFF;
width: 100%;
height: 100px;
}
@media screen and (max-width: 1000px) {
.headerInner {
height: 65px;
}
}
.headerInner a:link, .headerInner a:visited, .headerInner a:active {
color: #000000;
text-decoration: none;
}
.headerInner .headerlogo {
width: 30%;
position: absolute;
left: 20px;
top: 25px;
}
@media screen and (max-width: 1000px) {
.headerInner .headerlogo {
top: 10px;
left: 10px;
width: auto;
height: 40px;
}
}
.headerInner .headerlogo img {
width: auto;
height: 100%;
max-height: 83px;
} .gnav-wrapper {
display: -ms-grid;
display: grid;
-ms-grid-columns: 1fr auto;
grid-template-columns: 1fr auto;
margin-left: auto;
padding: 16px 0;
-ms-grid-row-align: center;
align-self: center;
margin-right: 100px;
}
@media screen and (max-width: 1000px) {
.gnav-wrapper {
display: none;
}
}
.gnav-wrapper .gnav li {
display: inline-block;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
.gnav-wrapper .gnav li a {
display: block;
padding: 5px 10px;
font-weight: bold;
color: #000000;
}
@media (max-width: 1180px) {
.gnav-wrapper .gnav li a {
font-size: 0.9em;
padding: 5px 5px;
}
}
@media (max-width: 1100px) {
.gnav-wrapper .gnav li a {
font-size: 0.8em;
padding: 5px 5px;
}
}
.gnav-wrapper .gnav li a img {
vertical-align: middle;
display: inline-block;
}
.gnav > li > a > img {
height: 35px;
width: auto;
}
@media (max-width: 1100px) {
.gnav > li > a > img {
height: 25px;
}
}
.gnav > li:hover .megamenu { opacity: 1;
padding: 0;
visibility: visible;
}
.megamenu {
opacity: 0;
visibility: hidden;
width: 100%;
height: auto;
position: absolute;
z-index: 9999999;
top: 80%;
left: 0;
-webkit-transition: all 0.5s ease-in;
transition: all 0.5s ease-in;
background-color: hsl(0, 0%, 92%);
}
.megamenu .megamenu-inner {
width: 100%;
max-width: 1500px;
padding: 30px;
margin: 0 auto;
-webkit-box-sizing: border-box;
box-sizing: border-box;
text-align: left;
display: -ms-grid;
display: grid;
-ms-grid-columns: 1fr 5fr;
grid-template-columns: 1fr 5fr;
}
.megamenu .megamenu-inner .title {
background-image: url(//www.hsakuragaoka-h.ed.jp/site/wp-content/themes/sakura-wp/img/common/megamenu_logo.png);
background-repeat: no-repeat;
background-position: center top;
text-align: center;
padding-top: 80px;
margin-top: 20px;
font-size: clamp(20px, 3vw, 35px); font-weight: 900;
line-height: 120%;
}
.megamenu .megamenu-inner ul {
font-weight: bold;
display: -ms-grid;
display: grid;
-ms-grid-columns: (1fr)[5];
grid-template-columns: repeat(5, 1fr);
}
.megamenu .megamenu-inner ul li {
list-style: none;
text-align: left;
margin-bottom: 10px;
}
.megamenu .megamenu-inner ul li a {
position: relative;
font-weight: normal;
font-size: 0.9em;
line-height: 120%;
}
.megamenu .megamenu-inner ul li a:hover {
opacity: 0.8;
text-decoration: none;
}
.megamenu .megamenu-inner ul li a img {
display: block;
margin-bottom: 10px;
width: 190px;
height: 130px;
-o-object-fit: cover;
object-fit: cover;
border-radius: 20px;
} header.fixed {
background-color: rgba(255, 255, 255, 0.9);
position: fixed;
width: 100%;
top: 0px;
left: 0px;
z-index: 5000;
-webkit-box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.2);
}
header.fixed .headerInner {
background-color: #ffffff;
height: 100px;
}
@media screen and (max-width: 1000px) {
header.fixed .headerInner {
height: 65px;
}
}
header.fixed .gnav li a {
color: #000;
}
header.fixed .megamenu { }  .hamburger {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 60px;
height: 60px;
border: none;
margin-top: 20px;
margin-right: 10px;
border-radius: 50%;
cursor: pointer;
padding-top: 8px;
padding-left: 2px;
z-index: 99999;
background-color: #ef858c;
position: fixed;
top: 1px;
right: 10px;
}
@media screen and (max-width: 1000px) {
.hamburger {
margin-top: 10px;
width: 50px;
height: 50px;
margin-right: 0px;
}
}
.hamburger:focus-visible {
outline: 3px solid #99c2ff;
outline-offset: 2px;
}
.hamburger-box {
width: 28px;
height: 22px;
position: relative;
display: inline-block;
}
.hamburger-line {
position: absolute;
left: 0;
right: 0;
height: 3px;
background: #111;
border-radius: 1px;
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transition: opacity 0.2s var(--ease), top 0.2s var(--ease), -webkit-transform 0.2s var(--ease);
transition: opacity 0.2s var(--ease), top 0.2s var(--ease), -webkit-transform 0.2s var(--ease);
transition: transform 0.2s var(--ease), opacity 0.2s var(--ease), top 0.2s var(--ease);
transition: transform 0.2s var(--ease), opacity 0.2s var(--ease), top 0.2s var(--ease), -webkit-transform 0.2s var(--ease);
}
.hamburger-line:nth-child(1) {
top: 0;
}
.hamburger-line:nth-child(2) {
top: 10px;
}
.hamburger-line:nth-child(3) {
top: 20px;
} .is-open .hamburger-line:nth-child(1) {
top: 10px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.is-open .hamburger-line:nth-child(2) {
opacity: 0;
}
.is-open .hamburger-line:nth-child(3) {
top: 10px;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.no-scroll .hamburger {
background-color: transparent;
margin-right: 0px;
} .overlay {
position: fixed;
inset: 0;
background: var(--overlay-bg);
opacity: 0;
visibility: hidden;
-webkit-transition: opacity 0.25s var(--ease), visibility 0.25s var(--ease);
transition: opacity 0.25s var(--ease), visibility 0.25s var(--ease);
z-index: 40;
}
.overlay.is-open {
opacity: 1;
visibility: visible;
}
.hamburger.is-open {
margin-top: 0px;
} .drawer {
position: fixed;
top: 0;
right: 0;
height: 100dvh;
width: var(--drawer-width);
max-width: 100vw;
background: #ef858c;
-webkit-box-shadow: -8px 0 24px rgba(0, 0, 0, 0.15);
box-shadow: -8px 0 24px rgba(0, 0, 0, 0.15);
-webkit-transform: translateX(100%);
transform: translateX(100%);
-webkit-transition: -webkit-transform 0.3s var(--ease);
transition: -webkit-transform 0.3s var(--ease);
transition: transform 0.3s var(--ease);
transition: transform 0.3s var(--ease), -webkit-transform 0.3s var(--ease);
z-index: 60;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.drawer.is-open {
-webkit-transform: translateX(0);
transform: translateX(0);
}
.drawer-header {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
padding: 0px;
}
.drawer-title {
font-size: 16px;
margin: 0;
color: #ffffff;
}
.drawer-body {
padding: 8px 16px 24px;
overflow: auto;
} .drawer .drawer-nav {
list-style: none;
margin: 0;
padding: 0;
color: hsl(0, 0%, 100%);
}
.drawer .drawer-nav > li {
position: relative;
} .drawer .drawer-nav > li > a {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
gap: 12px;
padding: 5px 16px; text-decoration: none;
color: inherit;
} .drawer .drawer-nav > li > ul {
overflow: hidden;
height: 0;
-webkit-transition: height 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
transition: height 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
will-change: height;
background: hsla(0, 0%, 100%, 0.4);
margin: 0;
padding: 0;
}
.drawer .drawer-nav > li > ul > li > a {
display: block;
padding: 5px 18px 5px 26px; font-size: 14px;
color: inherit;
} .drawer .drawer-nav > li.has-sub > a::after {
content: "";
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 10px;
height: 10px;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg); -webkit-transition: -webkit-transform 0.25s ease;
transition: -webkit-transform 0.25s ease;
transition: transform 0.25s ease;
transition: transform 0.25s ease, -webkit-transform 0.25s ease;
} .drawer .drawer-nav > li.open > a::after {
-webkit-transform: rotate(45deg);
transform: rotate(45deg); } body.no-scroll {
overflow: hidden;
} .contentsInner {
margin-left: auto;
margin-right: auto;
position: relative;
padding-left: 1%;
padding-right: 100px;
text-align: left;
max-width: 1300px;
margin-bottom: clamp(40px, 6.5vw, 100px);
}
@media (min-width: 1450px) {
.contentsInner {
padding-right: 1%;
}
}
@media screen and (max-width: 1000px) {
.contentsInner {
width: 98%;
padding: 0 1%;
}
}
.page .contentsInner {
min-height: 300px;
overflow: hidden;
margin-left: auto;
margin-right: auto;
position: relative;
padding-left: 2%;
padding-right: 100px;
text-align: left;
max-width: 1300px;
margin-top: clamp(28px, 5.5vw, 50px);
margin-bottom: clamp(40px, 6.5vw, 100px);
}
@media (min-width: 1450px) {
.page .contentsInner {
padding-right: 2%;
}
}
@media screen and (max-width: 1000px) {
.page .contentsInner {
width: 98%;
padding: 0 1%;
overflow: hidden;
}
}
.flexarea {
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap; -webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between; }
.pagetop {
position: fixed;
bottom: 45px;
right: 40px;
margin: 0 auto;
z-index: 10;
}
@media screen and (max-width: 789px) {
.pagetop {
display: none;
}
} footer {
background: #605d5e;
color: #ffffff; }
footer a {
color: inherit; text-decoration: none;
-webkit-transition: opacity 0.2s ease, text-decoration-color 0.2s ease;
transition: opacity 0.2s ease, text-decoration-color 0.2s ease;
font-weight: normal;
}
footer a:hover, footer a:focus-visible {
color: inherit;
text-decoration: underline;
text-underline-offset: 2px;
opacity: 0.95;
}
footer .footerInner {
max-width: 1000px;
margin: 0 auto;
padding: 80px 15px 30px 15px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
gap: 32px;
}
@media screen and (max-width: 1000px) {
footer .footerInner {
width: 98%;
padding: 50px 1%;
}
}
footer .schoolinfo {
-webkit-box-flex: 0;
-ms-flex: 0 0 45%;
flex: 0 0 45%;
display: -ms-grid;
display: grid;
-ms-grid-columns: 1fr;
grid-template-columns: 1fr;
gap: 12px;
font-size: 0.9em;   }
@media screen and (max-width: 1000px) {
footer .schoolinfo {
-webkit-box-flex: 0;
-ms-flex: 0 0 100%;
flex: 0 0 100%;
margin-left: auto;
margin-right: auto;
text-align: center;
}
}
footer .schoolinfo .logo {
margin-bottom: 50px;
}
@media screen and (max-width: 1000px) {
footer .schoolinfo .logo {
margin-left: auto;
margin-right: auto;
text-align: center;
}
}
footer .schoolinfo .logo img {
display: block;
max-width: 244px;
height: auto;
}
footer .schoolinfo .insta a,
footer .schoolinfo .youtube a {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex; -webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 10px; line-height: 1.6;
color: inherit;
text-decoration: none;
}
footer .schoolinfo .insta a::before,
footer .schoolinfo .youtube a::before {
content: "";
display: inline-block;
width: 35px;
height: 35px;
-webkit-box-flex: 0;
-ms-flex: 0 0 35px;
flex: 0 0 35px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
footer .schoolinfo .insta a::before {
background-image: url(//www.hsakuragaoka-h.ed.jp/site/wp-content/themes/sakura-wp/img/common/ico_insta02.png);
}
footer .schoolinfo .youtube a::before {
background-image: url(//www.hsakuragaoka-h.ed.jp/site/wp-content/themes/sakura-wp/img/common/ico_youtube02.png);
}
footer .schoolinfo .insta a:hover::before,
footer .schoolinfo .youtube a:hover::before {
opacity: 0.9;
}
footer .f-sitemap {
-webkit-box-flex: 1;
-ms-flex: 1 1 55%;
flex: 1 1 55%; display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: 15px;
}
@media screen and (max-width: 1000px) {
footer .f-sitemap {
display: none;
}
}
footer .f-sitemap > ul {
-webkit-box-flex: 1;
-ms-flex: 1 1 50%;
flex: 1 1 50%;
list-style: none;
margin: 0;
padding: 0;
}
footer .f-sitemap > ul > li {
margin: 0 0 0px;
}
footer .f-sitemap > ul > li > a {
display: inline-block;
line-height: 1.7;
color: inherit;
font-weight: normal;
font-size: 0.9em;
}
footer .copyright {
text-align: center;
padding: 12px 16px 16px;
font-size: 0.9em;
letter-spacing: 0.02em;
}
@media screen and (max-width: 1000px) {
footer .copyright {
font-size: 10px;
}
}  @media (max-width: 900px) {
footer .footerInner {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
gap: 20px;
}
footer .schoolinfo,
footer .sitemap {
-webkit-box-flex: 0;
-ms-flex: none;
flex: none;
width: 100%;
}
} @media (max-width: 600px) {
footer .sitemap {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
gap: 16px;
}
footer .sitemap > ul {
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
}
}  h2 {
position: relative;
padding-top: 1em;
padding-right: 1em;
padding-left: 1em;
padding-bottom: 1em;
text-align: center;
font-size: 2.5em;
line-height: 200%;
color: #105998;
}
@media screen and (max-width: 789px) {
h2 {
padding: 0.5em;
font-size: 1.8em;
}
}
@media screen and (max-width: 789px) {
h2 {
padding: 0.5em;
font-size: 1.6em;
}
}  h3, h4, h5, h6 {
font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
font-weight: 700;
line-height: 1.5;
margin: 2em 0 1em;
color: #000000;
position: relative;
} h3.pagetitle {
font-size: clamp(24px, 2.5vw, 32px);
padding-left: 0.2em;
padding-bottom: 0.5em;
border-bottom: 2px solid #cccccc;
text-align: center;
} h3 {
font-size: clamp(20px, 2vw, 28px);
} h4 {
font-size: clamp(18px, 1.8vw, 24px);
padding-bottom: 0.4em;
border-bottom: 2px solid #004793;
} h5 {
font-size: clamp(16px, 1.6vw, 20px);
background-color: hsl(0, 0%, 93%);
border-radius: 10px;
padding: 0.8em 0.8em;
} h6 {
font-size: clamp(14px, 1.4vw, 18px);
font-weight: 600;
color: #333;
letter-spacing: 0.05em;
padding-left: 1.2em;
}
h6::before {
content: "・";
position: absolute;
left: 0;
color: #004793;
} table {
border-collapse: collapse; }
@media screen and (max-width: 789px) {
table {
width: 100%;
}
}
.table {
margin-top: 50px;
margin-right: 0px;
margin-left: 0px;
margin-bottom: 50px;
border: 1px solid #CCCCCC !important;
}
@media screen and (max-width: 789px) {
.table {
margin: 0px;
width: 100%;
}
}
.table th, .table td {
padding: 20px 20px;
vertical-align: top;
border: 1px solid #CCCCCC !important;
background-color: #FFFFFF;
}
@media screen and (max-width: 789px) {
.table th, .table td {
padding: 10px 10px;
display: block;
border-top: none;
border: 0px solid #CCCCCC !important;
}
}
.table td {
text-align: left;
}
.table td.td-left {
background-color: #F8F8F8;
}
.table th {
background-color: #eee;
} .table01 {
margin-top: 10px;
margin-left: 0px;
margin-bottom: 50px;
border: 1px solid #CCCCCC;
width: 100%;
}
.table01 th, .table01 td {
padding: 8px 10px;
border-top: 1px solid #CCCCCC;
border-right: 1px solid #CCCCCC;
background-color: #FFFFFF;
}
.table01 th {
font-weight: bold;
background: #EEE;
border-right: 1px solid #CCCCCC;
} .table02 {
margin-top: 10px;
margin-left: 0px;
margin-bottom: 50px;
border: 1px solid #CCCCCC;
width: 100%;
}
@media screen and (max-width: 789px) {
.table02 {
width: 100%;
}
}
.table02 th, .table02 td {
padding: 8px 10px;
border-top: 1px solid #CCCCCC;
border-right: 1px solid #CCCCCC;
background-color: #FFFFFF;
}
.table02 th {
font-weight: bold;
background: #EEE;
border-right: 1px solid #CCCCCC;
}
@media screen and (max-width: 789px) {
.table02 td .img {
display: block;
border-top: none;
}
} .table03 {
border-collapse: collapse;
width: 100%;
}
.table03 tr:nth-child(even) {
background-color: #eeeeee;
}
.table03 tr:nth-child(odd) {
background-color: #ffffff;
}
.table03 td, .table03 th {
border: none;
padding: 10px;
text-align: left;
} .table04 {
border-collapse: collapse;
width: 100%;
}
.table04 tr:nth-child(even) {
background-color: #eeeeee;
}
.table04 tr:nth-child(odd) {
background-color: #ffffff;
}
.table04 td, .table04 th {
border: none;
padding: 10px;
}
.table04 td.kei {
background-color: #FFCACB;
} .table-container {
width: 100%;
}
@media screen and (max-width: 789px) {
.table-container {
overflow-x: auto;
-webkit-overflow-scrolling: touch; }
}
.table-container table {
width: 100%;
border-collapse: collapse;
min-width: 500px;
}
.table-container table th, .table-container table td {
border: 1px solid #ccc;
padding: 8px 12px;
text-align: left;
}
.table-container table th {
background: #EEE;
}
.table-container02 {
width: 100%;
}
@media screen and (max-width: 789px) {
.table-container02 {
overflow-x: auto;
-webkit-overflow-scrolling: touch; }
}
.table-container02 table {
width: 100%;
border-collapse: collapse;
min-width: 600px;
}
.table-container02 table th, .table-container02 table td {
border: 1px solid #ccc;
padding: 8px 12px;
}
.table-container02 table th {
background: #EEE;
}         :root {
--drawer-width: 300px;
--overlay-bg: rgba(0,0,0,.45);
--ease: cubic-bezier(.2,.8,.2,1); } video {
display: block;
width: 100%;
object-fit: cover;
position: absolute;
height: 100%;
top: -100px;
left: 0; }
@media screen and (max-width: 789px) {
video {
top: 0px;
position: relative;
object-fit: contain;
height: auto; } }
@media screen and (max-width: 570px) {
video {
top: -20px;
position: relative;
object-fit: cover;
height: 100%; } }
.movie {
position: relative;
width: 100%;
max-height: 1000px;
height: 100vh;
overflow: hidden; }
@media screen and (max-width: 1000px) {
.movie {
height: 100vh; } }
@media screen and (max-width: 789px) {
.movie {
height: auto; } }
@media screen and (max-width: 570px) {
.movie {
height: 50vh; } }
.movie::after {
content: "";
display: block;
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.1);
background-size: 4px 4px;
background-repeat: repeat;
background-position: 0 0, 2px 2px; }
.mainimgimg {
width: 100%;
position: absolute;
bottom: 0;
z-index: 2;
padding-left: 1%;
padding-right: 1%; }
.imgarea {
width: 100%;
max-width: 814px;
text-align: right;
margin-right: 0;
margin-left: auto;
position: relative; }
.imgarea .img01 {
position: absolute;
bottom: 170px;
right: 80px;
z-index: 10; }
@media screen and (max-width: 1000px) {
.imgarea .img01 {
bottom: 100px;
right: 10px; } }
@media screen and (max-width: 789px) {
.imgarea .img01 {
bottom: -10px; } }
@media screen and (max-width: 570px) {
.imgarea .img01 {
bottom: -10px; } }
.imgarea .img01 img {
width: 100%;
max-width: 800px; }
@media screen and (max-width: 1000px) {
.imgarea .img01 img {
max-width: 700px; } }
@media screen and (max-width: 789px) {
.imgarea .img01 img {
max-width: 400px; } }
@media screen and (max-width: 570px) {
.imgarea .img01 img {
max-width: 380px; } }
.sidebnr {
position: fixed;
right: -15px;
top: 160px;
z-index: 5; }
@media screen and (max-width: 1000px) {
.sidebnr {
display: none; } }
.sidebnr a {
display: block;
transition: transform .3s ease; }
.sidebnr a:hover {
transform: translateX(-15px); }
.sidebnr a:hover img {
opacity: 1; }
.subh2 {
margin-top: 50px;
margin-bottom: clamp(20px, 3.5vw, 25px);
width: 100%;
max-width: 1300px;
padding-left: 1%;
padding-right: 1%;
margin-left: auto;
margin-right: auto; }
.subh2 .indextitle {
line-height: 1.1;
font-size: clamp(40px, 6vw, 60px); font-weight: 900; }
.subh2 .indextitle span {
display: block;
font-size: clamp(15px, 2vw, 24px); margin-bottom: 4px;
font-weight: normal; }
.subh2_jisou {
margin-top: 50px;
position: absolute;
left: 0;
top: 130px;
z-index: 10;
margin-bottom: clamp(20px, 3.5vw, 25px);
width: 100%;
padding-left: 1%;
padding-right: 1%;
margin-left: auto;
margin-right: auto; }
.subh2_jisou .indextitle {
line-height: 1.1;
font-size: clamp(40px, 6vw, 60px); font-weight: 900; }
.subh2_jisou .indextitle span {
display: block;
font-size: clamp(15px, 2vw, 24px); margin-bottom: 4px;
font-weight: normal; }
.bread {
font-size: clamp(12px, 2vw, 15px);
width: 100%;
max-width: 1300px;
padding-left: 1%;
padding-right: 1%;
margin-left: auto;
margin-right: auto; }  .titleInner {
max-width: 1300px;
margin-left: auto;
margin-right: auto;
padding-left: 1%;
padding-right: 100px;
display: flex;
flex-wrap: wrap;
align-items: flex-end;
column-gap: 16px;
row-gap: 10px;
margin-bottom: 30px; }
.titleInner .titleBox {
flex: 1 1 auto;
min-width: 280px; }
.titleInner .titlemorebtn {
margin-left: auto; }
@media screen and (max-width: 1000px) {
.titleInner {
width: 98%;
padding: 0 1%;
align-items: flex-start; }
.titleInner .titleBox {
flex-basis: 100%; }
.titleInner .titlemorebtn {
display: none; } }
.indextitle {
line-height: 1.1;
font-size: clamp(40px, 6vw, 60px); font-weight: 900; }
.indextitle span {
display: block;
font-size: clamp(15px, 2vw, 24px); margin-bottom: 4px;
font-weight: normal; } .titlemorebtn01 a {
display: inline-flex;
align-items: center;
justify-content: flex-start; padding: 10px 50px 10px 20px; border-radius: 50px;
background: #fff;
color: #111;
font-size: 18px;
text-decoration: none;
position: relative;
transition: background-color .25s ease, color .25s ease;
width: 300px; }
@media screen and (max-width: 1000px) {
.titlemorebtn01 a {
display: flex;
width: min(80%, 300px);
margin: 0 auto; } }
.titlemorebtn01 a::after {
content: "";
position: absolute;
top: 50%;
right: 15px; transform: translateY(-50%);
width: 35px;
height: 35px;
background: url(//www.hsakuragaoka-h.ed.jp/site/wp-content/themes/sakura-wp/img/common/ico_arrows01.png) center/contain no-repeat; }
.titlemorebtn01 a:hover {
background: #EB878E;
color: #fff; }
.titlemorebtn01 a:hover::after {
background-image: url(//www.hsakuragaoka-h.ed.jp/site/wp-content/themes/sakura-wp/img/common/ico_arrows02.png); }
.titlemorebtn02 a {
display: inline-flex;
align-items: center;
justify-content: flex-start; padding: 10px 50px 10px 20px; border-radius: 50px;
background: #EB878E;
color: #111;
font-size: 18px;
text-decoration: none;
position: relative;
border: 1px solid #ffffff;
transition: background-color .25s ease, color .25s ease;
width: 300px; }
@media screen and (max-width: 1000px) {
.titlemorebtn02 a {
display: flex;
width: min(80%, 300px);
margin: 0 auto; } }
.titlemorebtn02 a::after {
content: "";
position: absolute;
top: 50%;
right: 15px; transform: translateY(-50%);
width: 35px;
height: 35px;
background: url(//www.hsakuragaoka-h.ed.jp/site/wp-content/themes/sakura-wp/img/common/ico_arrows02.png) center/contain no-repeat; }
.titlemorebtn02 a:hover {
background: #fff;
color: #111;
border: 1px solid #EB878E; }
.titlemorebtn02 a:hover::after {
background-image: url(//www.hsakuragaoka-h.ed.jp/site/wp-content/themes/sakura-wp/img/common/ico_arrows01.png); }  .infinite-slider .swiper-wrapper,
.infinite-slider02 .swiper-wrapper {
transition-timing-function: linear !important; }
.indexnews {
background-image: url(//www.hsakuragaoka-h.ed.jp/site/wp-content/themes/sakura-wp/img/index/bg_index01.png);
margin-top: -35vh;
position: relative;
z-index: 1;
background-repeat: no-repeat;
background-position: center top;
padding-top: 30vh;
padding-bottom: 50px; }
@media screen and (max-width: 1000px) {
.indexnews {
margin-top: -30vh;
background-size: 120% auto;
padding-top: 15vh; } }
@media screen and (max-width: 789px) {
.indexnews {
margin-top: -12vh;
padding-top: 10vh; } }
@media screen and (max-width: 570px) {
.indexnews {
margin-top: -12vh;
padding-top: 15vh;
background-size: 150% auto; } }
.carousel-section {
padding: 40px 20px;
text-align: center;
overflow-x: hidden;
position: relative;   }
@media screen and (max-width: 789px) {
.carousel-section {
padding: 0px 2% 40px; } }
.carousel-section .infinite-slider .swiper-wrapper {
transition-timing-function: linear; }
.carousel-section .infinite-slider .swiper-slide {  width: auto !important; }
.carousel-section .infinite-slider .swiper-slide {
width: auto;
height: 100%; }
.carousel-section .swiper-slide a:link, .carousel-section .swiper-slide a:visited, .carousel-section .swiper-slide a:active {
color: #000000; }
.carousel-section .swiper-slide a:hover {
text-decoration: none; }
.carousel-section .swiper-slide a:hover img {
opacity: 1;
filter: alpha(opacity=100);
-ms-filter: "alpha(opacity=100)"; }
.carousel-section .swiper-slide .itemBox {
width: 350px;
text-align: left; }
@media screen and (max-width: 789px) {
.carousel-section .swiper-slide .itemBox {
width: 250px; } }
.carousel-section .swiper-slide .itemBox span {
padding: 0.2em 1em;
line-height: 100%;
background-color: #ffffff;
color: #000000;
border-radius: 50px;
font-size: 0.7em; }
.carousel-section .swiper-slide .itemBox .imgBox {
width: 100%;
border-radius: 30px;
height: 250px;
overflow: hidden;
transition: transform 0.3s ease; }
@media screen and (max-width: 789px) {
.carousel-section .swiper-slide .itemBox .imgBox {
height: 200px; } }
.carousel-section .swiper-slide .itemBox .imgBox img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease; }
.carousel-section .swiper-slide .itemBox .imgBox img:hover {
transform: scale(1.1); }
.indexbg01 {
background-image: url(//www.hsakuragaoka-h.ed.jp/site/wp-content/themes/sakura-wp/img/index/bg_index02.png);
background-position: center top;
background-size: 120% auto;
background-repeat: no-repeat; }
@media screen and (max-width: 1000px) {
.indexbg01 {
background-size: 180% auto; } } .index02 {
margin-bottom: clamp(40px, 6.5vw, 100px);
padding-top: 100px; }
@media (max-width: 1000px) {
.index02 {
padding-top: 20px; } }
@media (max-width: 1000px) {
.index03 {
margin-bottom: clamp(40px, 6.5vw, 100px); } }
.index02 .section, .index03 .section {
margin: 0 auto;
padding: 20px 16px;
display: flex;
align-items: center;
gap: 32px;   }
.index02 .section .txt, .index03 .section .txt {
flex: 0 0 45%; }
.index02 .section .img, .index03 .section .img {
flex: 0 1 45%;
margin-left: auto;
min-width: 0; }
.index02 .section .img img, .index03 .section .img img {
display: block;
width: 100%;
height: auto; }
.index02 .section .indextitle, .index03 .section .indextitle {
margin-bottom: 30px; }
.index02 .section .txt > p, .index03 .section .txt > p {
font-size: clamp(14px, 1.9vw, 16px);
line-height: 1.9;
margin: 0px 0 40px; }
@media (max-width: 1000px) {
.index02 .section .txt > p, .index03 .section .txt > p {
margin: 0px 0 10px; } }
.index02 .section.section--reverse, .index03 .section.section--reverse {
flex-direction: row-reverse; }
.index02 .section.section--reverse .img, .index03 .section.section--reverse .img {
margin-left: 0;
margin-right: auto; } @media (max-width: 1000px) {
.index02 .section, .index03 .section {
flex-direction: column;
gap: 20px; }
.index02 .section .txt, .index03 .section .txt {
flex: none;
width: 100%;
max-width: 647px; }
.index02 .section .img, .index03 .section .img {
flex: none;
width: 100%;
max-width: 647px;
margin-right: auto;
margin-left: auto; }
.index02 .section.section--reverse, .index03 .section.section--reverse {
flex-direction: column-reverse; }
.index02 .section.section--reverse .img, .index03 .section.section--reverse .img {
margin-left: auto;
margin-right: auto; }
.index02 .section.section--swap-sm .img, .index03 .section.section--swap-sm .img {
order: -1; } } .index04 {
margin-top: 0px; }
.index04 .titleInner {
width: calc(100% - 20px);
margin-left: 20px; }
.index04 .horizontal_scroll {
--sticky-container-height: 100vh;
height: var(--sticky-container-height);
min-height: 100vh;
box-sizing: border-box; }
.index04 .horizontal_scroll .sticky {
position: sticky;
top: 0px;
display: flex;
flex-direction: column;
justify-content: center;
min-height: 100vh; }
.index04 .horizontal_scroll .scroller {
display: flex;
overflow: auto; }
.index04 .horizontal_scroll .scroller.nobar {
overflow: hidden; }
.index04 .horizontal_scroll .scroller > * { flex-shrink: 0;
aspect-ratio: 16 / 9;
display: flex;
justify-content: center;
align-items: center; }
.index04 .horizontal_scroll .scroller > *:not(:first-child) {
margin-left: 2%; }
.index04 .horizontal_scroll .scroller > *:first-child {
margin-left: 10%; }
.index04 .horizontal_scroll .scroller > *:last-child {
margin-right: 10%; }
@media (max-width: 1000px) {
.index04 {
padding-left: 1%;
padding-right: 1%;
margin-bottom: clamp(40px, 6.5vw, 100px); }
.index04 .titleInner {
width: calc(100% - 20px);
margin-left: 20px; }
.horizontal_scroll .scroller {
display: grid !important;
grid-template-columns: repeat(2, auto); justify-content: center; gap: 16px;
overflow: visible !important; }
.horizontal_scroll .scroller > * {
margin: 0 !important;
flex: initial !important;
aspect-ratio: auto !important;
background: none;
display: block; }
.horizontal_scroll .scroller > section a {
display: inline-block; }
.horizontal_scroll .scroller > section img {
display: block;
width: auto; height: auto; max-width: 100%; } } .index05 {
margin-bottom: clamp(40px, 6.5vw, 100px); }
@media (max-width: 1000px) {
.index05 {
padding-top: 20px; } }
.index05 { }
.index05 .contentsInner {
margin-top: 0 !important; }
.index05 .section { display: flex;
gap: 24px;
align-items: flex-start;
margin-bottom: 50px; }
.index05 .section .img {
flex: 0 0 360px;
min-width: 360px; }
.index05 .section .img img {
display: block;
width: 100%;
aspect-ratio: 3/2;
object-fit: cover;
border-radius: 20px; }
.index05 .section .txt {
flex: 1 1 auto;
min-width: 0; }
.index05 .section .txt span {
padding: 0.2em 1em;
margin-bottom: 1em;
line-height: 100%;
border: #000000 1px solid;
color: #000000;
border-radius: 50px;
font-size: 0.7em; }
.index05 .section .txt .date {
padding: 0.5em 0em;
line-height: 100%;
font-size: 0.8em; }
.index05 .section .txt .title {
font-weight: bold;
font-size: clamp(18px, 1.9vw, 20px);
margin-bottom: 1em; }
.index05 .section .txt .title a {
color: #000;
text-decoration: none; display: inline; }
.index05 .section .arrows {
flex: 0 0 auto;
align-self: center;
margin-left: 8px; }
.index05 .section .arrows a, .index05 .section .arrows img {
display: block; }
.index05 .section .arrows img {
width: 41px;
height: 41px; }
.index05 .section {
color: inherit;
text-decoration: none;  }
.index05 .section:hover .title {
text-decoration: underline; }
.index05 .section:focus-visible {
outline: 2px solid #004793;
outline-offset: 4px;
border-radius: 12px; }
.index05 .section .arrows img {
pointer-events: none; } @media (max-width: 789px) {
.index05 .section {
flex-direction: column;
gap: 16px;
margin-bottom: 40px; }
.index05 .section .img {
flex: none;
min-width: 0;
width: 100%;
max-width: 300px;
margin: 0 auto; }
.index05 .section .img img {
width: 100%;
aspect-ratio: 3/2;
object-fit: cover; }
.index05 .section .txt {
width: 100%; }
.index05 .section .txt .title a {
display: inline-flex; align-items: flex-start; gap: 6px;
line-height: 1.6; }
.index05 .section .txt .title a::before {
content: "";
display: inline-block;
width: 20px;
height: 20px; flex: 0 0 20px; background: url(//www.hsakuragaoka-h.ed.jp/site/wp-content/themes/sakura-wp/img/common/ico_arrows04.png) no-repeat center/contain;
margin-top: 0.3em; }
.index05 .section .arrows {
display: none; } }
.indexbg05 {
background-image: url(//www.hsakuragaoka-h.ed.jp/site/wp-content/themes/sakura-wp/img/index/bg_index03.png);
background-position: left bottom 200px;
background-repeat: no-repeat; } .index06 {
margin-bottom: clamp(40px, 6.5vw, 100px); }
@media (max-width: 1000px) {
.index06 {
padding-top: 20px; } }
.index06 .swiper-slide {
width: 350px;
flex: 0 0 350px;
margin-right: 20px;
box-sizing: border-box; }
.index06 .swiper-slide a.yt-slide {
display: block;
text-decoration: none; }
.index06 .swiper-slide img {
display: block;
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover; }
.index06 .swiper-slide a:link, .index06 .swiper-slide a:visited, .index06 .swiper-slide a:active {
color: #000000; }
.index06 .swiper-slide a:hover {
text-decoration: none; }
.index06 .swiper-slide p {
font-weight: 700;
font-size: clamp(16px, 2vw, 18px);
line-height: 150%; }
@media screen and (max-width: 789px) {
.index06 .swiper-slide p {
line-height: 130%;
margin-bottom: 10px; } } .index07 {
background-color: #fef6f7;
padding-top: 40px;
padding-bottom: 100px; }
@media (max-width: 1000px) {
.index07 {
padding-top: 20px; } } .midashi01 {
margin-bottom: 1em;
font-size: clamp(24px, 2vw, 30px);
text-align: center;
color: #105998;
position: relative;
font-weight: bold;
line-height: 200%; }
@media screen and (max-width: 1000px) {
.midashi01 {
font-size: 1.5em; } }
.midashi02 {
font-weight: bold;
margin-bottom: 1em;
font-size: 1.8em;
margin-left: auto;
margin-right: auto;
text-align: center;
color: #105998;
position: relative; }
.midashi02 img {
height: 0.8em;
margin-left: 0.5em; }
.midashi02::after {
position: absolute;
content: "";
background-color: #cccccc;
width: 90px;
height: 3px;
bottom: -20px;
left: calc(50% - 45px); }
.boxborder01none {
border: 0px solid #105998;
border-radius: 20px;
padding: 20px; }
.boxborder02 {
border-radius: 20px;
padding: 20px;
background-color: #105998; }
.boxborder03 {
border-radius: 20px;
padding: 20px;
background-color: #f1efe4; }
.imgBoxright {
float: right;
margin-left: 50px;
margin-bottom: 20px;
max-width: 40%; }
.imgBoxright img {
max-width: 100%; }
@media screen and (max-width: 789px) {
.imgBoxright {
float: none;
margin-left: auto;
margin-right: auto;
text-align: center;
max-width: 80%; } }
.imgBoxleft {
float: left;
margin-right: 50px;
margin-bottom: 100px;
max-width: 30%; }
@media screen and (max-width: 789px) {
.imgBoxleft {
float: none;
margin-left: auto;
margin-right: auto;
text-align: center;
max-width: 80%;
margin-bottom: 20px; } } .newsinfo {
margin-bottom: clamp(20px, 3.5vw, 25px); }
.backtoinfo {
margin-left: auto;
margin-right: auto;
text-align: center;
margin-top: clamp(28px, 5.5vw, 50px); }
.backtoinfo a {
display: inline-block; }
.backtoinfo a:link, .backtoinfo a:visited {
color: #000000 !important; }
.backtoinfo a:hover {
opacity: 0.5;
text-decoration: none; }
.backtoinfo img {
vertical-align: middle;
margin-right: 0.5em; }
.contentsInner p {
margin-bottom: 1em; }
.postarchive { }
.postarchive .section { display: flex;
gap: 24px;
align-items: flex-start;
margin-bottom: 50px; }
.postarchive .section .img {
flex: 0 0 360px;
min-width: 360px; }
.postarchive .section .img img {
display: block;
width: 100%;
aspect-ratio: 3/2;
object-fit: cover;
border-radius: 20px; }
.postarchive .section .txt {
flex: 1 1 auto;
min-width: 0; }
.postarchive .section .txt span {
padding: 0.2em 1em;
margin-bottom: 1em;
line-height: 100%;
border: #000000 1px solid;
color: #000000;
border-radius: 50px;
font-size: 0.7em; }
.postarchive .section .txt .date {
padding: 0.5em 0em;
line-height: 100%;
font-size: 0.8em; }
.postarchive .section .txt .title {
font-weight: bold;
font-size: clamp(18px, 1.9vw, 20px);
margin-bottom: 1em; }
.postarchive .section .txt .title a {
color: #000;
text-decoration: none; display: inline; }
.postarchive .section .arrows {
flex: 0 0 auto;
align-self: center;
margin-left: 8px; }
.postarchive .section .arrows a, .postarchive .section .arrows img {
display: block; }
.postarchive .section .arrows img {
width: 41px;
height: 41px; }
.postarchive .section {
color: inherit;
text-decoration: none;  }
.postarchive .section:hover .title {
text-decoration: underline; }
.postarchive .section:focus-visible {
outline: 2px solid #004793;
outline-offset: 4px;
border-radius: 12px; }
.postarchive .section .arrows img {
pointer-events: none; } @media (max-width: 789px) {
.postarchive .section {
flex-direction: column;
gap: 16px;
margin-bottom: 40px; }
.postarchive .section .img {
flex: none;
min-width: 0;
width: 100%;
max-width: 300px;
margin: 0 auto; }
.postarchive .section .img img {
width: 100%;
aspect-ratio: 3/2;
object-fit: cover; }
.postarchive .section .txt {
width: 100%; }
.postarchive .section .txt .title a {
display: inline-flex; align-items: flex-start; gap: 6px;
line-height: 1.6; }
.postarchive .section .txt .title a::before {
content: "";
display: inline-block;
width: 20px;
height: 20px; flex: 0 0 20px; background: url(//www.hsakuragaoka-h.ed.jp/site/wp-content/themes/sakura-wp/img/common/ico_arrows04.png) no-repeat center/contain;
margin-top: 0.3em; }
.postarchive .section .arrows {
display: none; } } .pagination {
margin: 48px auto 0;
display: flex;
justify-content: center; } .pagination .navigation.pagination {
width: 100%; }
.pagination .nav-links {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 10px; } .pagination .page-numbers {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 40px;
height: 40px;
padding: 0 14px;
box-sizing: border-box;
border: 1px solid #ddd;
border-radius: 9999px;
background: #fff;
color: #333;
text-decoration: none;
font-weight: 600;
transition: background .2s ease, color .2s ease, border-color .2s ease, transform .08s ease; }
.pagination .page-numbers:hover {
border-color: #004793;
color: #004793;
background: #f5f8ff;
transform: translateY(-1px); } .pagination .page-numbers.current {
border-color: #004793;
background: #004793;
color: #fff;
cursor: default;
transform: none; } .pagination .page-numbers.prev,
.pagination .page-numbers.next {
padding: 0 16px;
min-width: 44px; } .pagination .page-numbers.dots {
border: none;
background: transparent;
color: #999;
pointer-events: none;
min-width: auto;
padding: 0 4px; } .pagination .page-numbers:focus-visible {
outline: 2px solid #004793;
outline-offset: 2px; } @media (max-width: 600px) {
.pagination .nav-links {
gap: 8px; }
.pagination .page-numbers {
min-width: 36px;
height: 36px;
padding: 0 12px;
font-size: 14px; } } .has-dark-bg .pagination .page-numbers {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.24);
color: #fff; }
.has-dark-bg .pagination .page-numbers:hover {
background: rgba(255, 255, 255, 0.16);
border-color: #fff;
color: #fff; }
.has-dark-bg .pagination .page-numbers.current {
background: #fff;
color: #111;
border-color: #fff; } .video-embed {
position: relative; aspect-ratio: 16 / 9;
border-radius: 12px;
overflow: hidden; }
.video-embed video { position: static !important;
inset: auto !important; width: 100%;
height: 100%;
display: block;
object-fit: cover; margin: 0; }
@media screen and (max-width: 1000px) {
.video-embed video {
width: 100%; } } .pageimg001 {
max-height: 280px; }
.pageimg001 img {
border-radius: 20px;
object-fit: cover;
height: 280px !important; }
.pageimg002 img {
border-radius: 20px; } .wp-block-button.cta-btn .wp-block-button__link {
--btn-bg: #004793;
--btn-fg: #fff;
--btn-hover: #003c7a;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
padding: 16px 24px;
border-radius: 9999px;
font-size: clamp(14px, 1.6vw, 16px);
font-weight: 700;
text-decoration: none;
color: var(--btn-fg);
background: var(--btn-bg);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
transition: background-color .15s ease, box-shadow .2s ease, transform .15s ease; }
.wp-block-button.cta-btn .wp-block-button__link::after {
content: "";
width: 1.2em;
height: 1.2em;
background: currentColor;
-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M13.172 12 7.05 5.879 8.464 4.464 16 12l-7.536 7.536-1.414-1.415z'/></svg>") center/contain no-repeat;
mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M13.172 12 7.05 5.879 8.464 4.464 16 12l-7.536 7.536-1.414-1.415z'/></svg>") center/contain no-repeat; }
.wp-block-button.cta-btn .wp-block-button__link:hover {
background: var(--btn-hover);
box-shadow: 0 8px 26px rgba(0, 0, 0, 0.18); } .wp-block-button.cta-btn--ghost .wp-block-button__link {
--btn-fg: #004793;
background: transparent;
border: 2px solid currentColor;
box-shadow: none;
color: var(--btn-fg); }
.wp-block-button.cta-btn--ghost .wp-block-button__link:hover {
background: var(--btn-fg);
color: #fff; } .cta-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
align-items: stretch;
margin: 0 auto 60px;  }
@media (max-width: 1000px) {
.cta-grid {
grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) {
.cta-grid {
grid-template-columns: 1fr; } } .cta-card {
--btn-fg: #004793;
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 12px 16px;
min-height: 52px;
border: 1px solid #d9e2f1;
border-radius: 14px;
background: #fff;
color: var(--btn-fg);
font-weight: 700;
font-size: clamp(14px, 1.55vw, 16px);
line-height: 1.3;
text-decoration: none;
text-align: center;
box-shadow: none;
transition: background-color .15s ease, border-color .15s ease, box-shadow .2s ease, transform .12s ease; white-space: normal;
word-break: keep-all; }
.cta-card::after {
content: "";
flex: 0 0 auto;
width: 1.15em;
height: 1.15em;
background: currentColor;
-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M13.172 12 7.05 5.879 8.464 4.464 16 12l-7.536 7.536-1.414-1.415z'/></svg>") center/contain no-repeat;
mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M13.172 12 7.05 5.879 8.464 4.464 16 12l-7.536 7.536-1.414-1.415z'/></svg>") center/contain no-repeat; }
.cta-card:hover {
background: #f4f7fb;
border-color: rgba(0, 71, 147, 0.25);
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06); }
.cta-card:active {
transform: translateY(1px);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08); }
.cta-card:focus-visible {
outline: 2px solid rgba(0, 71, 147, 0.5);
outline-offset: 2px; } @supports (line-clamp: 2) or (-webkit-line-clamp: 2) {
.cta-card {
display: grid;
grid-auto-flow: column;
grid-auto-columns: 1fr auto;
column-gap: 10px; }
.cta-card > span {
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden; } }  .wp-block-table.c-table table {
width: 100%;
border-collapse: collapse;
table-layout: fixed; font-size: clamp(14px, 1.6vw, 16px);
border: 1px solid #dfe3ea;
border-radius: 8px;
overflow: hidden; }
.wp-block-table.c-table td {
padding: 12px 14px;
border: 1px solid #dfe3ea;
vertical-align: top; }   .wp-block-table.c-table td:first-child {
width: 20%;
background: #f3f6fb;
color: #004793;
font-weight: 700;
text-align: center;
white-space: nowrap; }
.wp-block-table.c-table th {
width: 20%;
background: #f3f6fb;
color: #004793;
font-weight: 700;
text-align: center;
white-space: nowrap; } .wp-block-table.c-table td:nth-child(2) {
width: 80%;
background: #fff;
color: #333; } .wp-block-table.plane-table table {
width: 100%;
border-collapse: collapse;
table-layout: fixed; font-size: clamp(14px, 1.6vw, 16px);
border: 1px solid #dfe3ea;
border-radius: 8px;
overflow: hidden; }
.wp-block-table.plane-table td {
padding: 12px 14px;
border: 1px solid #dfe3ea;
vertical-align: top;
width: 50%; } .wp-block-table.plane-table02 table {
width: 100%;
border-collapse: collapse;
table-layout: fixed; font-size: clamp(14px, 1.6vw, 16px);
border: 1px solid #dfe3ea;
border-radius: 8px;
overflow: hidden; }
.wp-block-table.plane-table02 td:first-child {
width: 30%;
background: #f3f6fb;
color: #004793;
font-weight: 700;
text-align: center;
white-space: nowrap; }
.wp-block-table.plane-table02 td {
padding: 12px 14px;
border: 1px solid #dfe3ea;
vertical-align: top; }  .wp-block-table.cth-table table {
width: 100%;
border-collapse: collapse;
table-layout: fixed; font-size: clamp(14px, 1.6vw, 16px);
border: 1px solid #dfe3ea;
border-radius: 8px;
overflow: hidden; }
.wp-block-table.cth-table td {
padding: 12px 14px;
border: 1px solid #dfe3ea;
vertical-align: top; }   .wp-block-table.cth-table th {
width: 20%;
background: #f3f6fb;
color: #004793;
font-weight: 700;
text-align: center;
white-space: nowrap; } .wp-block-table.c-table td {
width: 80%;
background: #fff;
color: #333; } .wp-block-image figure {
margin-top: 30px;
margin-bottom: 30px; } .contentsInner ul,
.contentsInner ol {
margin-left: 0 !important;
padding-left: 1.5em;
list-style-position: inside; }
.contentsInner ul li,
.contentsInner ol li {
margin-left: 0 !important;
padding-left: 0.25em; } .cat-buttons {
margin: 1rem 0 3rem; } .cat-buttons__list {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
gap: 12px; }
.cat-buttons__item {
margin: 0;
padding: 0; } .cat-button { --btn-fg: #004793; --btn-bg: #f3f6fb; --btn-bg-hover: #e8eef9; --btn-active-bg: #004793; --btn-active-fg: #fff; display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 44px; padding: 10px 16px;
color: var(--btn-fg);
background: var(--btn-bg);
border: 1px solid var(--btn-fg);
border-radius: 999px; text-decoration: none;
font-weight: 600;
line-height: 1.2;
font-size: clamp(14px, 1.6vw, 16px);
transition: background .2s ease, color .2s ease, box-shadow .2s ease, transform .02s ease; box-shadow: none !important;  }
.cat-button:hover {
background: var(--btn-bg-hover); }
.cat-button:active {
transform: translateY(1px); }
.cat-button:focus-visible {
outline: 0;
box-shadow: 0 0 0 3px rgba(0, 71, 147, 0.25); }
.cat-button.is-active {
background: var(--btn-active-bg);
color: var(--btn-active-fg);
border-color: var(--btn-active-bg); }
.cat-button .cat-button__label {
display: inline-block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis; }  @media (max-width: 480px) {
.cat-buttons__list {
gap: 10px;
grid-template-columns: repeat(2, 1fr); }
.cat-button {
min-height: 40px;
padding: 8px 12px;
font-weight: 600; } }
.tag-loop {
list-style: none;
margin: 0;
padding: 0; }
.tag-loop li {
padding: .6em 0;
border-bottom: 1px solid #e5e7eb; }
.tag-loop time {
margin-left: .5em;
color: #6b7280;
font-size: .9em; }
.tags {
margin-left: .5em; }
.tags .tag {
display: inline-block;
margin-left: .3em;
padding: .15em .5em;
background: #f3f6fb;
color: #004793;
border: 1px solid #c9d6f5;
border-radius: 999px;
font-size: .82em;
text-decoration: none; } .c-form {
background: #fef6f7;
padding: clamp(16px, 3vw, 28px);
border-radius: 6px; display: grid;
gap: 18px;    }
.c-form .c-form__row {
display: grid;
grid-template-columns: 180px 1fr;
gap: 16px;
align-items: start; }
@media (max-width: 480px) {
.c-form .c-form__row {
grid-template-columns: 1fr;
gap: 8px; } }
.c-form .c-form__label {
font-weight: 700;
color: #222;
line-height: 1.7; }
@media (max-width: 480px) {
.c-form .c-form__label {
padding-top: 0; } }
.c-form .c-form__req {
color: #d93025;
font-weight: 800; }
.c-form .c-form__controls {
display: block;  }
.c-form .c-form__controls--2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px; }
@media (max-width: 480px) {
.c-form .c-form__controls--2 {
grid-template-columns: 1fr; } }
.c-form .c-form__controls--sm {
max-width: 320px; }
.c-form .c-form__controls--md {
max-width: 480px; }
.c-form .input-text,
.c-form .wpcf7-form-control.wpcf7-text,
.c-form .wpcf7-form-control.wpcf7-email,
.c-form .wpcf7-form-control.wpcf7-tel {
width: 100%;
display: block;
appearance: none;
background: #fff;
border: 1px solid #e3e7ed;
border-radius: 4px;
padding: 14px 16px;
min-height: 52px;
font-size: clamp(14px, 1.6vw, 16px);
line-height: 1.5;
color: #222;
transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease; }
.c-form .input-text::placeholder,
.c-form .wpcf7-form-control.wpcf7-text::placeholder,
.c-form .wpcf7-form-control.wpcf7-email::placeholder,
.c-form .wpcf7-form-control.wpcf7-tel::placeholder {
color: #95a1b3; }
.c-form .input-text:hover,
.c-form .wpcf7-form-control.wpcf7-text:hover,
.c-form .wpcf7-form-control.wpcf7-email:hover,
.c-form .wpcf7-form-control.wpcf7-tel:hover {
border-color: #cfd6e2; }
.c-form .input-text:focus,
.c-form .wpcf7-form-control.wpcf7-text:focus,
.c-form .wpcf7-form-control.wpcf7-email:focus,
.c-form .wpcf7-form-control.wpcf7-tel:focus {
outline: none;
border-color: #004793;
box-shadow: 0 0 0 3px rgba(0, 71, 147, 0.15); }
.c-form .input-text[id="email"],
.c-form .wpcf7-form-control.wpcf7-text[id="email"],
.c-form .wpcf7-form-control.wpcf7-email[id="email"],
.c-form .wpcf7-form-control.wpcf7-tel[id="email"] {
background-position: right 12px center;
background-repeat: no-repeat; }
.c-form .input-textarea,
.c-form .wpcf7-form-control.wpcf7-textarea {
width: 100%;
min-height: 148px;
resize: vertical;
background: #fff;
border: 1px solid #e3e7ed;
border-radius: 4px;
padding: 14px 16px;
font-size: clamp(14px, 1.6vw, 16px);
line-height: 1.7;
color: #222; }
.c-form .input-textarea::placeholder,
.c-form .wpcf7-form-control.wpcf7-textarea::placeholder {
color: #95a1b3; }
.c-form .input-textarea:hover,
.c-form .wpcf7-form-control.wpcf7-textarea:hover {
border-color: #cfd6e2; }
.c-form .input-textarea:focus,
.c-form .wpcf7-form-control.wpcf7-textarea:focus {
outline: none;
border-color: #004793;
box-shadow: 0 0 0 3px rgba(0, 71, 147, 0.15); }
.c-form .c-form__controls--2 {
display: flex;
gap: 18px; }
.c-form .c-form__controls--2 > * {
flex: 1; }
@media (max-width: 480px) {
.c-form .c-form__controls--2 {
flex-direction: column;
gap: 10px; } }
.c-form .radio-inline,
.c-form .radio-stack {
display: grid;
gap: 10px; }
.c-form .radio-inline {
grid-auto-flow: column;
justify-content: start;
gap: 20px; }
.c-form .radio-stack {
grid-auto-flow: row; }
.c-form .radio-inline label,
.c-form .radio-stack label {
display: inline-grid;
grid-auto-flow: column;
gap: 8px;
align-items: center;
cursor: pointer;
font-size: clamp(14px, 1.6vw, 16px); }
.c-form input[type="radio"] {
width: 18px;
height: 18px;
accent-color: #004793; }
.c-form .wpcf7-not-valid-tip {
margin-top: 6px;
color: #d93025;
font-size: 13px; }
.c-form .wpcf7-response-output {
margin-top: 12px;
border-radius: 4px;
font-size: 14px; }
.c-form .c-form__actions {
display: grid;
place-items: center;
margin-top: 8px; }
.c-form .btn-primary,
.c-form input[type="submit"].btn-primary {
appearance: none;
border: 0;
border-radius: 4px;
padding: 14px 32px;
min-width: 180px;
background: #004793;
color: #fff;
font-weight: 700;
font-size: clamp(15px, 1.7vw, 17px);
letter-spacing: .05em;
line-height: 1;
cursor: pointer;
transition: filter .12s ease, transform .12s ease, box-shadow .12s ease;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12); }
.c-form .btn-primary:hover,
.c-form input[type="submit"].btn-primary:hover {
filter: brightness(0.95); }
.c-form .btn-primary:active,
.c-form input[type="submit"].btn-primary:active {
transform: translateY(1px);
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.14); }
.c-form .btn-primary:focus-visible,
.c-form input[type="submit"].btn-primary:focus-visible {
outline: 2px solid rgba(0, 71, 147, 0.35);
outline-offset: 2px; } .wpcf7 br {
display: none; } #course .course-table {
margin: 50px auto;
text-align: center; }
#course .course-table table {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
font-size: clamp(14px, 1.6vw, 16px);
border: 1px solid #dfe3ea;
border-radius: 8px;
overflow: hidden; }
@media screen and (max-width: 789px) {
#course .course-table table {
font-size: 80%; } }
#course .course-table td, #course .course-table th {
vertical-align: middle;
border-color: #ccc;
color: #333; }
#course .course-table td:first-child {
width: 7%;
background: #F5DBDA;
color: #86689A;
font-weight: 700;
text-align: center;
white-space: nowrap; }
#course .course-table th {
width: 20%;
background: #F5DBDA;
color: #86689A;
font-weight: 700;
text-align: center;
white-space: nowrap; }
#course .flexBox {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: flex-start;
margin: 30px auto; }
#course .flexBox .img {
width: 33%; }
@media screen and (max-width: 789px) {
#course .flexBox .img {
width: 100%; } }
#course .flexBox .img img {
width: 100%;
border-radius: 15px; }
#course .flexBox .txt {
width: 60%; }
@media screen and (max-width: 789px) {
#course .flexBox .txt {
width: 100%; } }
#course .flexBox .txt .subtit {
font-size: 24px;
font-weight: bold;
padding: 10px 0;
margin: 0 auto 20px;
border-bottom: 2px solid #004793; } .center {
text-align: center; }
.maker {
background: linear-gradient(transparent 40%, #F4D8DB 50%);
padding: 0 0.1em 0.1em; } .contentsInner:has(#tokusyoku) {
overflow: visible;
scrollbar-width: none;
padding-right: 2%;
margin-bottom: 0; } #tokusyoku {
overflow: hidden; }
#tokusyoku .bgGray {
background: #f5f5f5; }
#tokusyoku .inner {
padding: 50px 20px; }
@media screen and (max-width: 789px) {
#tokusyoku .inner {
padding: 20px 20px; } }
#tokusyoku .inner h3 {
font-size: clamp(18px, 5vw, 40px); }
#tokusyoku .inner h3 .subhead {
font-size: clamp(14px, 3vw, 20px);
display: block; }
#tokusyoku .inner .flexBox {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
margin: 30px auto; }
@media screen and (max-width: 789px) {
#tokusyoku .inner .flexBox {
margin: 0px auto 10px; } }
#tokusyoku .inner .flexBox .img {
width: 20%; }
@media screen and (max-width: 789px) {
#tokusyoku .inner .flexBox .img {
width: 40%; } }
#tokusyoku .inner .flexBox .tit {
width: 72%; }
@media screen and (max-width: 789px) {
#tokusyoku .inner .flexBox .tit {
width: 100%; } }
#tokusyoku .inner .flexBox img {
width: 100%; }
#tokusyoku .inner .mind {
position: relative; }
@media screen and (max-width: 789px) {
#tokusyoku .inner .mind {
margin-bottom: 20vh; } }
#tokusyoku .inner .mind img {
width: 60%; }
@media screen and (max-width: 789px) {
#tokusyoku .inner .mind img {
width: 90%; } }
#tokusyoku .inner .mind .pic01 {
position: absolute;
left: 2px;
bottom: -115px;
width: 26%; }
@media screen and (max-width: 789px) {
#tokusyoku .inner .mind .pic01 {
bottom: calc(-20vh - 50px);
left: 0;
right: 0;
margin: auto;
width: auto;
height: calc(20vh + 50px); } }
#tokusyoku .inner .exploration {
position: relative;
display: inline-block;
border-radius: 15px;
margin: 100px auto 50px;
padding: 4vw;
width: 100%;  }
@media screen and (max-width: 789px) {
#tokusyoku .inner .exploration {
margin: 50px auto; } }
#tokusyoku .inner .exploration h4 {
font-size: clamp(18px, 5vw, 40px);
margin: 0 0 .5em;
border: none; }
#tokusyoku .inner .exploration h4 .subhead {
font-size: clamp(14px, 3vw, 20px);
display: block;
font-family: Arial, Helvetica, "sans-serif"; }
#tokusyoku .inner .exploration .pic02 {
position: absolute;
right: -43px;
top: -305px;
width: 28%; }
@media screen and (max-width: 789px) {
#tokusyoku .inner .exploration .pic02 {
position: absolute;
right: -5vw;
left: auto;
top: -25vh;
height: 25vh;
width: auto; } }
#tokusyoku .inner .exploration .tit {
width: 67%;
top: -50px;
z-index: 1000;
position: absolute; }
@media screen and (max-width: 789px) {
#tokusyoku .inner .exploration .tit {
width: 80%;
top: -9px; } }
#tokusyoku .inner .exploration .illust {
text-align: center;
margin: 50px auto; }
@media screen and (max-width: 789px) {
#tokusyoku .inner .exploration .illust {
margin: 20px auto; } }
#tokusyoku .inner .exploration .illust img {
width: 80%; }
@media screen and (max-width: 789px) {
#tokusyoku .inner .exploration .illust img {
width: 100%; } }
#tokusyoku .inner .exploration .subtit01 {
position: relative;
color: #fff;
text-shadow: 0 0 2px white;
background: #F19797;
border-radius: 3px;
display: inline-block;
padding: 12px 80px 12px 20px; }
#tokusyoku .inner .exploration .subtit01:after {
position: absolute;
content: "";
display: block;
width: 80px;
height: 80px;
background-image: url(https://www.hpeds-test.com/site/wp-content/themes/sakura-wp/img/common/tokusyoku_img12.png);
display: inline-block;
background-size: contain;
vertical-align: middle;
top: 50%;
transform: translateY(-50%);
right: -11px; }
#tokusyoku .inner .exploration .subtit02 {
position: relative;
color: #fff;
text-shadow: 0 0 2px white;
background: #7F8DC4;
border-radius: 3px;
display: inline-block;
padding: 12px 80px 12px 20px; }
#tokusyoku .inner .exploration .subtit02:after {
position: absolute;
content: "";
display: block;
width: 80px;
height: 80px;
background-image: url(https://www.hpeds-test.com/site/wp-content/themes/sakura-wp/img/common/tokusyoku_img12.png);
display: inline-block;
background-size: contain;
vertical-align: middle;
top: 50%;
transform: translateY(-50%);
right: -11px; }
#tokusyoku .inner .exploration ul {
margin: 20px auto 50px; }
@media screen and (max-width: 789px) {
#tokusyoku .inner .exploration ul {
padding: 0; } }
#tokusyoku .inner .exploration ul li span {
font-weight: bold;
margin-right: 5px; }
#tokusyoku .inner .exploration .catch {
display: none; }
@media screen and (max-width: 789px) {
#tokusyoku .inner .exploration .catch {
font-weight: bold;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
margin: 15px auto;
width: 100%; }
#tokusyoku .inner .exploration .catch::before, #tokusyoku .inner .exploration .catch::after {
content: '';
width: 2px;
height: 43px;
background-color: #E38187; }
#tokusyoku .inner .exploration .catch::before {
margin-right: 27px;
transform: rotate(-40deg); }
#tokusyoku .inner .exploration .catch::after {
margin-left: 27px;
transform: rotate(40deg); } }
#tokusyoku .inner .exploration .exp {
color: #fff;
font-weight: bold;
font-size: 24px;
padding: 20px;
text-align: center;
background: #E38187;
background: -moz-linear-gradient(left, #465B91 0%, #E38187 100%);
background: -webkit-gradient(linear, left center, right center, from(#465B91), to(#E38187));
background: -webkit-linear-gradient(left, #465B91 0%, #E38187 100%);
background: -o-linear-gradient(left, #465B91 0%, #E38187 100%);
background: linear-gradient(to right, #465B91 0%, #E38187 100%); }
@media screen and (max-width: 789px) {
#tokusyoku .inner .exploration .exp {
font-size: 20px;
padding: 15px; } } #mirai {
position: relative;
width: 100vw;
margin: 0 calc(50% - 50vw); }
#mirai::before {
content: "";
position: absolute;
top: -20vh;
background-image: url(https://www.hpeds-test.com/site/wp-content/themes/sakura-wp/img/index/bg_index01.png);
height: calc(100% + 24vh);
z-index: -1;
left: 0;
right: 0;
background-size: cover;
transform: none; }
@media screen and (max-width: 789px) {
#mirai::before {
top: -12vw; } }
#mirai .inner {
max-width: 1300px;
margin: 0 auto;
padding: 4vw 4%; }
@media screen and (max-width: 789px) {
#mirai .inner {
padding: 4vw 4% 2vw; } }
#mirai .inner .mirai__wrap { }
#mirai .inner .mirai__wrap .tit {
width: 80%;
margin: 30px auto; }
#mirai .inner .mirai__wrap h4 {
font-size: clamp(18px, 5vw, 40px);
margin: 0 0 .5em;
border: none; }
#mirai .inner .mirai__wrap .illust {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center; }
#mirai .inner .mirai__wrap .illust img {
width: 66%; }
@media screen and (max-width: 789px) {
#mirai .inner .mirai__wrap .illust img {
width: 100%; } }
#mirai .inner .mirai__wrap .illust .social__box {
width: 30%;
margin: 50px 0 0 auto; }
@media screen and (max-width: 789px) {
#mirai .inner .mirai__wrap .illust .social__box {
width: 100%; } }
#mirai .inner .mirai__wrap .illust .social__box .box__inner:before {
top: 50%;
left: -30px;
margin-top: -15px;
border: 30px solid transparent;
border-right: 30px solid #F9E8E7; }
#mirai .inner .subtit {
position: relative;
padding: 14px 24px;
font-size: 30px;
font-weight: bold;
text-align: center;
width: 100%;
margin: 0 auto; }
@media screen and (max-width: 789px) {
#mirai .inner .subtit {
font-size: 20px;
margin-top: 10px; } }
#mirai .inner .subtit::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 20px;
border: 5px solid transparent;
background: linear-gradient(135deg, #E48196 0%, #44609A 100%) border-box border-box;
-webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0) border-box;
-webkit-mask-composite: destination-out;
mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0) border-box;
mask-composite: exclude; }
#mirai .inner .social__box {
text-align: center;
margin: 50px auto; }
@media screen and (max-width: 789px) {
#mirai .inner .social__box {
margin: 30px auto; } }
#mirai .inner .social__box .box__inner {
position: relative;
font-weight: bold;
display: inline-block;
margin: 1.5em auto;
padding: 27px 30px;
text-align: center;
background: #F9E8E7;
border-radius: 20px; }
#mirai .inner .social__box .box__inner:before {
content: "";
position: absolute;
top: -50px;
left: 50%;
transform: translateX(-50%);
border: 30px solid transparent;
border-bottom: 30px solid #F9E8E7; }  .jisoupage img {
margin-bottom: clamp(10px, 1.6vw, 30px); }
.jisoupage img {
margin-bottom: clamp(20px, 3vw, 50px);
margin-top: clamp(20px, 3vw, 50px); }
.jisoupage .contentsOverwrap {
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw); }
.jisoupage .jusoupage-firstpic {
position: relative; }
.jisoupage .jusoupage-firstpic:before {
content: '';
position: absolute;
background-color: #f5f7fa;
left: 0;
top: 40%;
width: 80%;
height: 60%;
z-index: -1; }
.jisoupage .jusoupage-firstpic:after {
content: '';
position: absolute;
background-color: #ef858c;
right: 0;
top: 20%;
width: 50%;
height: 40%;
z-index: -1; }
.jisoupage h2 {
color: #000;
font-weight: 900;
text-align: left;
padding: 0; }
.jisoupage .date {
font-weight: 900;
border-bottom: 1px solid #CCC;
display: block;
padding: .5em 0; }
.jisoupage .date::before {
font-family: "Font Awesome 6 Free";
font-weight: 900;
content: "\f19d";
margin-right: 6px;
display: inline-block; }
.jisoupage .date .c_name {
display: block;
padding: .5em 0; }
.jisoupage .date .c_name a {
position: relative; }
.jisoupage .date .c_name a::before {
content: '#'; }
.jisoupage h4 {
font-weight: 900;
border: none;
font-size: clamp(18px, 1.8vw, 2.1em); } .jisounews {
margin-top: 80px;
margin-bottom: 50px; }
.jisounews p {
margin-bottom: 0em; }
.jisounews .titleInner {
margin-bottom: 0px; }
.jisounews .carousel-section {
padding: 0px; }
.jisounews .itemBoxjisou {
width: 350px;
text-align: left; }
.jisounews .itemBoxjisou:hover img {
transform: scale(1.1); }
@media screen and (max-width: 789px) {
.jisounews .itemBoxjisou {
width: 100%; } }
.jisounews .itemBoxjisou span {
padding: 0.2em 1em;
line-height: 100%;
background-color: #ffffff;
color: #000000;
border-radius: 0px;
font-size: 0.7em; }
.jisounews .itemBoxjisou .date {
font-size: 0.7em; }
.jisounews .itemBoxjisou a {
font-size: 1.2em;
font-weight: 900; }
.jisounews .itemBoxjisou .imgBox {
width: 100%;
border-radius: 0px;
height: 250px;
overflow: hidden;
transition: transform 0.3s ease; }
@media screen and (max-width: 789px) {
.jisounews .itemBoxjisou .imgBox {
height: 200px; } }
.jisounews .itemBoxjisou .imgBox img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease; }
.jisounews .swiper-pagination {
position: absolute;
text-align: center;
-webkit-transition: .3s opacity;
-o-transition: .3s opacity;
transition: .3s opacity;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
z-index: 10; } .jisounews__pc {
display: block; }
.jisounews__sp {
display: none; } .itemBoxjisou {
width: 350px;
text-align: left; }
.itemBoxjisou span {
padding: 0.2em 1em;
line-height: 100%;
background-color: #ffffff;
color: #000000;
border-radius: 0;
font-size: 0.7em; }
.itemBoxjisou .date {
font-size: 0.7em; }
.itemBoxjisou .title a {
font-size: 1.2em;
font-weight: 900; }
.itemBoxjisou .imgBox {
width: 100%;
border-radius: 0;
height: 250px;
overflow: hidden;
transition: transform .3s ease; }
.itemBoxjisou .imgBox img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .3s ease; } @media (max-width: 1000px) {
.jisounews__pc {
display: none; }
.jisounews__sp {
display: flex;
flex-direction: column;
gap: 14px; } .itemBoxjisou.itemBoxjisou--sp {
width: 100%;
display: flex;
gap: 12px;
align-items: flex-start;
border-bottom: 1px solid #eee;
padding-bottom: 12px; }
.itemBoxjisou.itemBoxjisou--sp .imgBox {
flex: 0 0 32%;
height: auto;
aspect-ratio: 16 / 9; }
.itemBoxjisou.itemBoxjisou--sp .imgBox img {
width: 100%;
height: 100%;
object-fit: cover; }
.itemBoxjisou.itemBoxjisou--sp .body {
flex: 1 1 auto; }
.itemBoxjisou.itemBoxjisou--sp .title a {
font-size: 1rem;
line-height: 1.4;
color: #000000; }
.itemBoxjisou.itemBoxjisou--sp .date {
font-size: .7rem;
margin-bottom: 2px; } }
.itemBoxjisou__link {
display: flex;
gap: 12px;
align-items: flex-start;
text-decoration: none;
color: inherit; }
.itemBoxjisou__link:hover img {
transform: scale(1.05); }
.itemBoxjisou__link .imgBox {
flex: 0 0 32%;
aspect-ratio: 16/9;
overflow: hidden; }
.itemBoxjisou__link .imgBox img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease; }
.itemBoxjisou__link .body {
flex: 1 1 auto; }
.itemBoxjisou__link .title {
font-size: 1rem;
font-weight: 700;
line-height: 1.4;
margin: 0.2em 0; }
.itemBoxjisou__link .date {
font-size: .8rem;
color: #666;
margin-bottom: .2em; } .learning-hero {
background: #f2f2f2; }
.learning-hero * {
box-sizing: border-box; }
.learning-hero .carousel-section {
padding: 0px;
text-align: center;
overflow: hidden;
position: relative; }
.learning-hero .carousel-section .hero-slider {
position: relative;
height: auto; }
.learning-hero .carousel-section .hero-slider .swiper-wrapper {
height: 100%;
position: relative;
height: 700px; }
.learning-hero .carousel-section .hero-slider .swiper-wrapper .swiper-slide {
height: 100%;
position: relative;
top: 0;
left: 0;
width: 100%;
z-index: 1;
transition: z-index 0.3s;
height: 100% !important;
overflow: hidden; }
.learning-hero .carousel-section .hero-slider .swiper-wrapper .swiper-slide .heroCard {
position: relative;
height: 100%;
overflow: hidden; }
.learning-hero .carousel-section .hero-slider .swiper-wrapper .swiper-slide .heroCard a {
display: grid !important;
grid-template-columns: clamp(200px, 50%, 700px) 1fr;
align-items: start;
gap: -80px;
position: relative;
height: 100%; }
@media screen and (max-width: 789px) {
.learning-hero .carousel-section .hero-slider .swiper-wrapper .swiper-slide .heroCard a {
grid-template-columns: 1fr !important;
grid-template-rows: 38vh 1fr !important; } }
.learning-hero .carousel-section .hero-slider .swiper-wrapper .swiper-slide .heroCard__title {
font-size: 2.8rem;
line-height: 1.35;
text-align: left;
font-weight: 900;
margin: 10px 0 20px; }
@media screen and (max-width: 1000px) {
.learning-hero .carousel-section .hero-slider .swiper-wrapper .swiper-slide .heroCard__title {
font-size: 1.6rem; } }
@media screen and (max-width: 789px) {
.learning-hero .carousel-section .hero-slider .swiper-wrapper .swiper-slide .heroCard__title {
font-size: 1.35rem; } }
.learning-hero .carousel-section .hero-slider .swiper-wrapper .swiper-slide .heroCard__info {
position: relative;
overflow: hidden;
background: #fff;
color: #111;
transform: none !important;
top: 20% !important;
left: 0 !important;
padding: clamp(28px, 5.5vw, 50px);
z-index: 20; }
@media screen and (max-width: 1000px) {
.learning-hero .carousel-section .hero-slider .swiper-wrapper .swiper-slide .heroCard__info {
margin: 0; } }
@media screen and (max-width: 789px) {
.learning-hero .carousel-section .hero-slider .swiper-wrapper .swiper-slide .heroCard__info {
margin-left: 0;
grid-row: 2 / 2;
top: -2vh !important;
margin-right: 5vw; } }
.learning-hero .carousel-section .hero-slider .swiper-wrapper .swiper-slide .heroCard__info .heroCard__date {
font-weight: 900; }
.learning-hero .carousel-section .hero-slider .swiper-wrapper .swiper-slide .heroCard__meta {
display: flex;
align-items: center;
gap: .6rem;
margin: 0 0 .4rem; }
.learning-hero .carousel-section .hero-slider .swiper-wrapper .swiper-slide .heroCard__meta .badge {
border: none;
color: #888;
line-height: 1;
text-align: left;
position: relative;
font-weight: 900; }
.learning-hero .carousel-section .hero-slider .swiper-wrapper .swiper-slide .heroCard__meta .badge::before {
content: '#'; }
.learning-hero .carousel-section .hero-slider .swiper-wrapper .swiper-slide .heroCard__media {
position: relative;
overflow: hidden;
top: 0 !important;
right: 0 !important;
bottom: 0;
height: 100%;
overflow: hidden;
width: calc(100% + 80px) !important;
margin-left: -80px;
z-index: 1; }
@media screen and (max-width: 789px) {
.learning-hero .carousel-section .hero-slider .swiper-wrapper .swiper-slide .heroCard__media {
grid-row: 1 / 2; } }
.learning-hero .carousel-section .hero-slider .swiper-wrapper .swiper-slide .heroCard__media img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
top: 0;
left: 0;
transform: scale(1); }  .progressbar {
position: relative;
width: calc(100% + clamp(28px, 5.5vw, 50px));
height: 2px;
margin: .5em 0 1em;
background: #ccc;
overflow: hidden; }
.progressbar .progressbar_in {
display: inline-block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 100%;
background: #ef858c;
border-radius: 7px;
transform: scaleX(0);
transform-origin: left center;
transition: transform linear; } .hero-pagination-wrap {
display: flex;
align-items: center;
gap: 16px;
position: absolute;
bottom: 15%;
left: 3%;
z-index: 10;
font-family: Arial, sans-serif; }
@media screen and (max-width: 789px) {
.hero-pagination-wrap {
position: relative;
margin-bottom: 30px; } }
.hero-pagination-wrap .hero-pagination {
font-size: 24px;
font-weight: bold; }
.hero-pagination-wrap .hero-arrows {
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
line-height: 24px;
background: #FFF;
position: relative;
padding: .5em 0; }
.hero-pagination-wrap .hero-arrows i {
font-size: 24px;
color: #333;
transition: color 0.3s; }
.hero-pagination-wrap .hero-arrows .hero-prev,
.hero-pagination-wrap .hero-arrows .hero-next {
padding: 0 1em;
position: relative;
z-index: 1; }
.hero-pagination-wrap .hero-arrows .hero-prev::after {
content: '';
position: absolute;
right: 0;
width: 100%;
height: 100%;
border-right: 1px solid #CCC;
z-index: 0; }
.hero-pagination-wrap .hero-arrows .hero-prev:hover {
border-right-color: #ef858c; }
.hero-pagination-wrap .hero-arrows .hero-next:hover {
border-left-color: #ef858c; } .heroCard__info {
opacity: 0; }
.heroCard__info .heroslide-anime {
position: absolute;
inset: 0;
background-color: #fff;
z-index: 30;
transform: translateX(0);
transition: transform 1s ease; }
.swiper-slide-active .heroCard__info .heroslide-anime,
.swiper-slide-duplicate-active .heroCard__info .heroslide-anime {
transform: translateX(100%); }
.heroCard__info {
opacity: 0; }
.swiper-slide-active .heroCard__info,
.swiper-slide-duplicate-active .heroCard__info {
opacity: 1; }
@keyframes slideZoomIn {
0% {
transform: scale(1.15); }
100% {
transform: scale(1); } }
.heroCard__media img {
clip-path: inset(0 100% 0 0);
transform: scale(1.15);
transition: clip-path 0.8s ease-out; } .swiper-slide-active .heroCard__media img,
.swiper-slide-duplicate-active .heroCard__media img {
clip-path: inset(0 0 0 0); animation: slideZoomIn 5s ease forwards;
animation-delay: 0.1s; }
.heroCard__date span.cate,
.jisounews span.cate,
.learning-videos span.cate {
background: #ef858c !important;
color: #FFF !important;
padding: .25em .5em .4em !important;
line-height: 1 !important;
margin-right: .5em !important;
font-weight: 900;
display: inline-block; } .nowrap {
white-space: nowrap; }
.badge {
display: inline-block;
padding: .2em 0;
margin-right: .6em;
font-size: .85em; } .project-jisou.jisounews {
margin: clamp(28px, 5.5vw, 80px) 0 0; }
.project-jisou.jisounews .indextitle span.nowrap {
line-height: 1.1;
font-size: clamp(40px, 6vw, 60px);
font-weight: 900;
display: inline-block; }
.project-jisou.jisounews .carousel-section {
position: relative; }
.project-jisou.jisounews .carousel-section:before {
content: '';
position: absolute;
background-color: #ef858c;
right: 0;
left: 0;
bottom: 0;
width: 100%;
height: 40%;
z-index: 0; }
.project-jisou.jisounews .carousel-section:after {
content: '';
position: absolute;
background-color: #f2f2f2;
height: 40%;
width: 20%;
z-index: 0;
bottom: 0;
left: 0; }
@media screen and (max-width: 789px) {
.project-jisou.jisounews .carousel-section:after {
content: none; } }
@media screen and (max-width: 570px) {
.project-jisou.jisounews .carousel-section:before, .project-jisou.jisounews .carousel-section:after {
content: none !important; } }
.project-jisou.jisounews .carousel-section .contentsInner {
overflow: visible;
padding: 0; }
@media screen and (max-width: 570px) {
.project-jisou.jisounews .carousel-section .contentsInner {
padding: 0 1%; } }
.project-jisou.jisounews .carousel-section .contentsInner .jisou-slider {
overflow: visible !important;
padding-bottom: 40px;
position: relative; }
@media screen and (max-width: 570px) {
.project-jisou.jisounews .carousel-section .contentsInner .jisou-slider {
padding-bottom: 0 !important; } }
.project-jisou.jisounews .carousel-section .contentsInner .jisou-slider .swiper-pagination {
position: relative;
display: flex;
justify-content: center;
gap: 8px;
margin-top: 50px; }
@media screen and (max-width: 570px) {
.project-jisou.jisounews .carousel-section .contentsInner .jisou-slider .swiper-pagination {
display: none !important; } }
.project-jisou.jisounews .carousel-section .contentsInner .jisou-slider .swiper-pagination .swiper-pagination-bullet {
width: 80px;
height: 5px;
background-color: #ddd;
border-radius: 0;
opacity: 1;
transition: background-color 0.3s; }
.project-jisou.jisounews .carousel-section .contentsInner .jisou-slider .swiper-pagination .swiper-pagination-bullet-active {
background-color: #666; }
.project-jisou.jisounews .carousel-section .contentsInner .jisou-slider .swiper-wrapper {
padding-right: 30px;
box-sizing: content-box; }
@media screen and (max-width: 570px) {
.project-jisou.jisounews .carousel-section .contentsInner .jisou-slider .swiper-wrapper {
flex-direction: column;
gap: 1em; } }
.project-jisou.jisounews .carousel-section .contentsInner .jisou-slider .swiper-slide {
width: calc((100% / 3) - 24px); margin-right: 24px;
flex-shrink: 0 !important;
overflow: hidden; }
@media screen and (max-width: 789px) {
.project-jisou.jisounews .carousel-section .contentsInner .jisou-slider .swiper-slide {
width: calc((100% / 2) - 16px); margin-right: 16px; } }
@media screen and (max-width: 570px) {
.project-jisou.jisounews .carousel-section .contentsInner .jisou-slider .swiper-slide {
width: 100% !important;
margin: 0 0 10px; } }
.project-jisou.jisounews .carousel-section .contentsInner .jisou-slider .swiper-slide .itemBoxjisou {
width: 100%;
background: #FFF;
z-index: 2;
gap: 0 20px; }
@media screen and (max-width: 570px) {
.project-jisou.jisounews .carousel-section .contentsInner .jisou-slider .swiper-slide .itemBoxjisou {
display: flex;
align-items: center; } }
.project-jisou.jisounews .carousel-section .contentsInner .jisou-slider .swiper-slide .itemBoxjisou .imgBox {
width: 100%;
position: relative;
overflow: hidden; }
@media screen and (max-width: 570px) {
.project-jisou.jisounews .carousel-section .contentsInner .jisou-slider .swiper-slide .itemBoxjisou .imgBox {
width: clamp(180px, 38vw, 220px) !important;
height: 100%; } }
.project-jisou.jisounews .carousel-section .contentsInner .jisou-slider .swiper-slide .itemBoxjisou .txtBox {
position: relative;
font-size: clamp(16px, 0.875rem, 18px);
line-height: 1.3;
padding: 1em;
display: flex;
flex-direction: column;
gap: 10px; }
@media screen and (max-width: 570px) {
.project-jisou.jisounews .carousel-section .contentsInner .jisou-slider .swiper-slide .itemBoxjisou .txtBox {
padding: 0 !important; } }
.project-jisou.jisounews .carousel-section .contentsInner .jisou-slider .swiper-slide .itemBoxjisou .txtBox .title {
position: relative;
padding: 0 0 1em;
margin: 0; }
.project-jisou.jisounews .carousel-section .contentsInner .jisou-slider .swiper-slide .itemBoxjisou .txtBox .title::before {
content: '';
width: calc(100% + 1em);
position: absolute;
bottom: 0;
left: 0;
height: 1px;
background: #CCC; }
.project-jisou.jisounews .carousel-section .contentsInner .jisou-slider .swiper-slide .itemBoxjisou .txtBox .date {
font-weight: 900; }
.project-jisou.jisounews .carousel-section .contentsInner .jisou-slider .swiper-slide .itemBoxjisou .txtBox span.badge {
border: none;
color: #888;
line-height: 1;
text-align: left;
position: relative;
font-weight: 900;
padding: 0;
margin-right: 1em; }
.project-jisou.jisounews .carousel-section .contentsInner .jisou-slider .swiper-slide .itemBoxjisou .txtBox span.badge::before {
content: '#'; }
.project-jisou.jisounews .carousel-section .contentsInner .jisou-slider .swiper-slide .itemBoxjisou .txtBox span.cate {
position: absolute;
top: -1em;
left: 0;
z-index: 2; }
@media screen and (max-width: 570px) {
.project-jisou.jisounews .carousel-section .contentsInner .jisou-slider .swiper-slide .itemBoxjisou .txtBox span.cate {
top: -.2em !important; } }  .learning-videos {
position: relative; }
.learning-videos:before {
content: '';
position: absolute;
background-color: #f2f2f2;
right: 0;
left: 0;
top: 20%;
width: 100%;
height: 40%;
z-index: 0; }
@media screen and (max-width: 789px) {
.learning-videos:before {
top: 0;
height: 45%; } }
.learning-videos .contentsInner {
padding: clamp(28px, 5.5vw, 80px) 1% 0; }
@media screen and (max-width: 789px) {
.learning-videos .contentsInner {
margin-top: 0; } }
.learning-videos .contentsInner .badge {
border: none;
color: #888;
line-height: 1;
text-align: left;
position: relative;
font-weight: 900; }
.learning-videos .contentsInner .badge::before {
content: '#'; }
.learning-videos .contentsInner .learning-feature-video {
margin: 0 0 28px; }
.learning-videos .contentsInner .learning-feature-video .indextitle span.nowrap {
line-height: 1.1;
font-size: clamp(40px, 6vw, 60px);
font-weight: 900;
display: inline-block; }
.learning-videos .contentsInner .learning-feature-video .learning-feature-video__body {
padding: 0; }
.learning-videos .contentsInner .learning-feature-video .learning-feature-video__body .learning-feature-video__title {
font-size: clamp(1rem, 2.2vw, 1.9rem);
line-height: 1.3;
margin: 0;
text-align: left;
font-weight: 900; }
.learning-videos .contentsInner .learning-feature-video .learning-feature-video__body .learning-feature-video__title a {
color: inherit;
text-decoration: none; }
.learning-videos .contentsInner .learning-feature-video .learning-feature-video__body time {
font-weight: 900; }
.learning-videos .contentsInner .learning-feature-video .learning-feature-video__caption {
position: relative;
padding-bottom: 1em;
margin-bottom: 0 !important;
font-size: .9rem;
line-height: 1.6; }
.learning-videos .contentsInner .learning-feature-video .learning-feature-video__caption::before {
content: '';
position: absolute;
bottom: 0;
width: 100%;
height: 1px;
background: #CCC; }
.learning-videos .contentsInner .learning-feature-video .jisou-video {
max-width: 100%;
margin: 24px auto;
position: relative;
display: grid;
gap: 0;
grid-template-columns: 50% 1fr 1fr 1fr; }
@media screen and (max-width: 789px) {
.learning-videos .contentsInner .learning-feature-video .jisou-video {
grid-template-columns: 1fr !important; } }
.learning-videos .contentsInner .learning-feature-video .jisou-video .item1 {
grid-row: 1 / 2;
grid-column: 4 / 5; }
@media screen and (max-width: 789px) {
.learning-videos .contentsInner .learning-feature-video .jisou-video .item1 {
grid-row: 1 / 2;
grid-column: 1 / 5; } }
.learning-videos .contentsInner .learning-feature-video .jisou-video .item2 {
grid-row: 1 / 3;
grid-column: 1 / 3; }
@media screen and (max-width: 789px) {
.learning-videos .contentsInner .learning-feature-video .jisou-video .item2 {
grid-row: 2 / 3;
grid-column: 1 / 5; } }
.learning-videos .contentsInner .learning-feature-video .jisou-video .item3 {
grid-row: 2 / 3;
grid-column: 2 / 5;
z-index: 1; }
@media screen and (max-width: 789px) {
.learning-videos .contentsInner .learning-feature-video .jisou-video .item3 {
grid-row: 3 / 4;
grid-column: 1 / 5; } }
.learning-videos .contentsInner .learning-feature-video .jisou-video .learning-feature-video__thumb {
height: auto;
width: 100%;
margin: 0 0 15vh;
position: relative;
flex: 0 0 50%;
background: #000;
aspect-ratio: 16 / 9;
overflow: hidden;
border-radius: 8px; }
@media screen and (max-width: 789px) {
.learning-videos .contentsInner .learning-feature-video .jisou-video .learning-feature-video__thumb {
margin: 0; } }
.learning-videos .contentsInner .learning-feature-video .jisou-video .learning-feature-video__thumb img {
position: absolute;
inset: 0;
width: 100%;
height: 100% !important;
object-fit: cover; }
.learning-videos .contentsInner .learning-feature-video .jisou-video .learning-feature-video__body .txtBox {
display: flex;
gap: 12px;
flex-direction: column;
background: #FFF;
padding: clamp(15px, 4vw, 50px);
margin: 0;
align-items: flex-start; }
.learning-videos .contentsInner .learning-feature-video .jisou-video .learning-feature-video__body .learning-feature-video__actions {
width: 100%; }
.learning-videos .contentsInner .learning-feature-video .jisou-video .learning-feature-video__body .learning-feature-video__actions .btn {
display: inline-flex;
align-items: center;
justify-content: flex-start; padding: 10px 50px 10px 20px; border-radius: 50px;
background: #EB878E;
color: #111;
font-size: 18px;
text-decoration: none;
position: relative;
border: 1px solid #ffffff;
transition: background-color .25s ease, color .25s ease;
width: 300px; }
@media screen and (max-width: 1000px) {
.learning-videos .contentsInner .learning-feature-video .jisou-video .learning-feature-video__body .learning-feature-video__actions .btn {
display: flex;
width: min(80%, 300px);
margin: 0 auto; } }
.learning-videos .contentsInner .learning-feature-video .jisou-video .learning-feature-video__body .learning-feature-video__actions .btn::after {
content: "";
position: absolute;
top: 50%;
right: 15px; transform: translateY(-50%);
width: 35px;
height: 35px;
background: url(//www.hsakuragaoka-h.ed.jp/site/wp-content/themes/sakura-wp/img/common/ico_arrows02.png) center/contain no-repeat; }
.learning-videos .contentsInner .learning-feature-video .jisou-video .learning-feature-video__body .learning-feature-video__actions .btn:hover {
background: #fff;
color: #111;
border: 1px solid #EB878E; }
.learning-videos .contentsInner .learning-feature-video .jisou-video .learning-feature-video__body .learning-feature-video__actions .btn:hover::after {
background-image: url(//www.hsakuragaoka-h.ed.jp/site/wp-content/themes/sakura-wp/img/common/ico_arrows01.png); }
.learning-videos .video-caption-front {
margin-top: .5rem;
font-size: .9rem;
line-height: 1.5; }
@media screen and (max-width: 789px) {
.learning-videos .video-caption-front {
font-size: .85rem; } }
.learning-videos .videosGrid {
display: grid;
gap: 20px;
grid-template-rows: 1fr;
grid-template-columns: repeat(3, minmax(200px, 1fr)); }
@media screen and (max-width: 789px) {
.learning-videos .videosGrid {
grid-template-columns: repeat(2, minmax(48%, 1fr)) !important; } }
.learning-videos .videosGrid .itemBox {
flex: auto;
min-height: 130px;
margin: 0 0 .5em !important;
position: relative; }
@media screen and (max-width: 789px) {
.learning-videos .videosGrid .itemBox {
padding: 0 clamp(15px, 4vw, 50px); } }
.learning-videos .videosGrid .itemBox a {
color: #000;
display: flex;
flex-direction: column;
text-decoration: none; }
.learning-videos .videosGrid .itemBox a:hover {
text-decoration: none; }
.learning-videos .videosGrid .itemBox a img {
position: absolute;
inset: 0;
width: 100%;
height: 100% !important;
object-fit: cover; }
.learning-videos .videosGrid .itemBox a .title {
font-weight: 900;
margin-bottom: .5em;
line-height: 1.3; }
.learning-videos .videosGrid .itemBox a .date {
font-weight: 900;
font-size: .7em;
margin: .3rem 0 0; }
.learning-videos .videosGrid .itemBox a .video-caption-front {
position: relative;
padding-bottom: 1em;
margin-bottom: 0; }
.learning-videos .videosGrid .itemBox a .video-caption-front::before {
content: '';
position: absolute;
bottom: 0;
width: 100%;
height: 1px;
background: #CCC; }
.learning-videos .videosGrid .itemBox .imgBox {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
overflow: hidden;
border-radius: 8px; }
.learning-videos .videosGrid .itemBox .body {
margin-bottom: .5em; }
.learning-videos .videosGrid .itemBox .btn {
display: inline-block;
background: #ef858c;
color: #fff !important;
padding: .45em 1.1em;
border-radius: 50px; } @media (max-width: 1000px) {
.videosGrid {
display: flex;
flex-direction: column;
gap: 14px; }
.videosGrid .itemBox {
width: 100%; }
.videosGrid .itemBox__link {
display: flex;
gap: 12px;
align-items: flex-start;
text-decoration: none;
color: inherit; }
.videosGrid .imgBox {
flex: 0 0 36%;
aspect-ratio: 16 / 9;
overflow: hidden;
border-radius: 8px; }
.videosGrid .imgBox img {
width: 100%;
height: 100%;
object-fit: cover;
display: block; }
.videosGrid .body {
flex: 1 1 auto; }
.videosGrid .body .title {
font-size: 1rem;
font-weight: 700;
line-height: 1.4;
margin-bottom: .25rem; }
.videosGrid .body .video-caption-front {
font-size: .8rem;
line-height: 1.5; } } .others-jisou.indexnews {
background-image: url(//www.hsakuragaoka-h.ed.jp/site/wp-content/themes/sakura-wp/img/index/bg_index01.png);
background-repeat: no-repeat;
background-position: center top;
background-size: 120% auto;
margin-top: 80px;
padding-top: 25vh;
padding-bottom: 60px; }
@media screen and (max-width: 1000px) {
.others-jisou.indexnews {
background-size: 160% auto;
padding-top: 19vh;
margin-top: 60px; } }
@media screen and (max-width: 789px) {
.others-jisou.indexnews {
background-size: 180% auto;
padding-top: 17vh;
margin-top: 40px; } } .others-jisou .titleInner {
max-width: 1300px;
margin: 0 auto 20px;
padding-left: 1%;
padding-right: 100px; }
@media screen and (max-width: 1000px) {
.others-jisou .titleInner {
padding: 0 1%; } }
.others-jisou .indextitle {
line-height: 1.1;
font-size: clamp(40px, 6vw, 60px);
font-weight: 900; }
.others-jisou .indextitle span {
display: block;
font-size: clamp(15px, 2vw, 24px);
margin-bottom: 4px; } .swpm-login-widget-form {
max-width: 420px;
margin: 40px auto 80px;
padding: 32px 28px;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 12px;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.04);
box-sizing: border-box; }
.swpm-login-widget-form #swpm-login-form {
margin: 0; }
.swpm-login-widget-form .swpm-login-form-inner {
font-size: 1.4rem;
line-height: 1.6; }
.swpm-login-widget-form .swpm-login-form-inner .swpm-label {
display: block;
margin-bottom: 4px;
font-weight: 500; }
.swpm-login-widget-form .swpm-login-form-inner .swpm-username-label,
.swpm-login-widget-form .swpm-login-form-inner .swpm-password-label {
margin-top: 8px; }
.swpm-login-widget-form .swpm-login-form-inner .swpm-username-input,
.swpm-login-widget-form .swpm-login-form-inner .swpm-password-input {
margin-bottom: 12px; }
.swpm-login-widget-form .swpm-login-form-inner .swpm-username-input .swpm-text-field,
.swpm-login-widget-form .swpm-login-form-inner .swpm-password-input .swpm-text-field {
width: 100%;
padding: 10px 12px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 1.4rem;
box-sizing: border-box;
transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.swpm-login-widget-form .swpm-login-form-inner .swpm-username-input .swpm-text-field:focus,
.swpm-login-widget-form .swpm-login-form-inner .swpm-password-input .swpm-text-field:focus {
outline: none;
border-color: #EB878E;
box-shadow: 0 0 0 2px rgba(241, 161, 181, 0.25); }
.swpm-login-widget-form .swpm-login-form-inner .swpm-remember-me {
display: flex;
align-items: center;
gap: 0.4em;
margin: 4px 0 20px; }
.swpm-login-widget-form .swpm-login-form-inner .swpm-remember-me .swpm-remember-checkbox input[type="checkbox"] {
width: auto;
margin: 0; }
.swpm-login-widget-form .swpm-login-form-inner .swpm-remember-me .swpm-rememberme-label {
margin: 0;
font-size: 1.3rem; }
.swpm-login-widget-form .swpm-login-form-inner .swpm-remember-me .swpm-rememberme-label .swpm-rember-label {
vertical-align: middle; }
.swpm-login-widget-form .swpm-login-form-inner .swpm-login-submit {
margin-bottom: 16px; }
.swpm-login-widget-form .swpm-login-form-inner .swpm-login-submit .swpm-login-form-submit {
width: 100%;
padding: 10px 0;
border: none;
border-radius: 999px;
font-size: 1.5rem;
font-weight: 600;
text-align: center;
cursor: pointer;
background-color: #EB878E;
color: #fff;
transition: background-color 0.2s ease, transform 0.1s ease; }
.swpm-login-widget-form .swpm-login-form-inner .swpm-login-submit .swpm-login-form-submit:hover {
background-color: #e77179;
transform: translateY(-1px); }
.swpm-login-widget-form .swpm-login-form-inner .swpm-login-submit .swpm-login-form-submit:active {
transform: translateY(0); }
.swpm-login-widget-form .swpm-login-form-inner .swpm-forgot-pass-link,
.swpm-login-widget-form .swpm-login-form-inner .swpm-join-us-link {
text-align: center;
margin-bottom: 4px; }
.swpm-login-widget-form .swpm-login-form-inner .swpm-forgot-pass-link a,
.swpm-login-widget-form .swpm-login-form-inner .swpm-join-us-link a {
font-size: 1.3rem;
text-decoration: underline; }
.swpm-login-widget-form .swpm-login-form-inner .swpm-login-action-msg {
margin-top: 8px;
text-align: center; }
.swpm-login-widget-form .swpm-login-form-inner .swpm-login-action-msg .swpm-login-widget-action-msg {
font-size: 1.3rem;
color: #c0392b; }
@media (max-width: 767px) {
.swpm-login-widget-form {
margin: 24px 16px 60px;
padding: 24px 20px; } } .bg-mesh {
background: url(//www.hsakuragaoka-h.ed.jp/site/wp-content/themes/sakura-wp/img/common/bg_mesh.svg), rgba(255, 255, 255, 0.9);
background-blend-mode: lighten; }
.yearly-schedule {
padding: 5%;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0 80px;
position: relative;
align-items: center; }
@media screen and (max-width: 570px) {
.yearly-schedule {
padding: 8% 5% 5% 50px;
grid-template-columns: 1fr;
gap: 30px 5%; } }
.yearly-schedule .box {
background: #F5DBDA;
padding: 5%;
position: relative;
display: flex;
border-radius: 20px;
z-index: 1; }
@media screen and (max-width: 789px) {
.yearly-schedule .box {
flex-direction: column; } }
@media screen and (max-width: 570px) {
.yearly-schedule .box {
grid-column: auto !important;
grid-row: auto !important; } }
.yearly-schedule .box::before {
content: "";
position: absolute;
background: #004793;
width: 14px;
height: 14px;
border-radius: 50%;
top: 50%;
transform: translateY(-50%); }
.yearly-schedule .box::after {
content: "";
height: calc(100% + 50px);
width: 1px;
position: absolute;
background: #004793;
top: 0; }
.yearly-schedule .box h4 {
margin: 0 2% 0 0;
font-size: clamp(50px, 6.25vw, 100px);
font-family: "Helvetica Neue" , Helvetica , Arial , Verdana , Roboto , "游ゴシック" , "Yu Gothic" , "游ゴシック体" , "YuGothic" , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "Meiryo UI" , "メイリオ" , Meiryo , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif;
font-style: italic;
border: none;
line-height: 1;
font-weight: bold;
text-align: center; }
.yearly-schedule .box h4 span.tit-s {
font-size: clamp(12px, 0.938vw, 18px);
display: block;
color: #004793;
letter-spacing: .12em;
white-space: nowrap; }
@media screen and (max-width: 789px) {
.yearly-schedule .box ul {
padding-left: 1em; } }
.yearly-schedule .box ul li {
list-style: none;
position: relative;
padding-left: 1em !important;
font-weight: bold; }
.yearly-schedule .box ul li::before {
content: "●";
position: absolute;
left: 0;
font-size: .65em;
color: #ef858c; }
.yearly-schedule .imgbox {
position: relative;
height: auto;
width: 100%;
background: none;
padding: 5% 0; }
@media screen and (max-width: 570px) {
.yearly-schedule .imgbox {
grid-column: auto !important;
grid-row: auto !important;
padding: 0; } }
.yearly-schedule .imgbox::after {
content: "";
height: calc(100% + 50px);
width: 1px;
position: absolute;
background: #004793;
top: 0; }
.yearly-schedule .imgbox img {
z-index: 0;
object-fit: cover;
width: 100%;
height: 80%;
border-radius: 15px;
aspect-ratio: 3 / 2;
display: flex;
justify-content: center;
align-items: center;
max-height: 280px; }
.yearly-schedule .item1::before {
right: -47px; }
@media screen and (max-width: 570px) {
.yearly-schedule .item1::before {
left: -32px; } }
.yearly-schedule .item1::after {
right: -40px;
top: 50%; }
@media screen and (max-width: 570px) {
.yearly-schedule .item1::after {
left: -25px;
height: calc(100% + 50px); } }
.yearly-schedule .item2 {
grid-column: 2;
grid-row: 2; }
.yearly-schedule .item2::before {
left: -47px; }
@media screen and (max-width: 570px) {
.yearly-schedule .item2::before {
left: -32px; } }
.yearly-schedule .item2::after {
left: -41px; }
@media screen and (max-width: 570px) {
.yearly-schedule .item2::after {
left: -25px;
height: calc(100% + 50px); } }
.yearly-schedule .item3 {
grid-column: 1;
grid-row: 3; }
.yearly-schedule .item3::before {
right: -47px; }
@media screen and (max-width: 570px) {
.yearly-schedule .item3::before {
left: -32px; } }
.yearly-schedule .item3::after {
right: -40px; }
@media screen and (max-width: 570px) {
.yearly-schedule .item3::after {
left: -25px;
height: calc(100% + 50px); } }
.yearly-schedule .item4 {
grid-column: 2;
grid-row: 4; }
.yearly-schedule .item4::before {
left: -47px; }
@media screen and (max-width: 570px) {
.yearly-schedule .item4::before {
left: -32px; } }
.yearly-schedule .item4::after {
left: -41px; }
@media screen and (max-width: 570px) {
.yearly-schedule .item4::after {
left: -25px;
height: calc(100% + 50px); } }
.yearly-schedule .item5 {
grid-column: 1;
grid-row: 5; }
.yearly-schedule .item5::before {
right: -47px; }
@media screen and (max-width: 570px) {
.yearly-schedule .item5::before {
left: -32px; } }
.yearly-schedule .item5::after {
right: -40px; }
@media screen and (max-width: 570px) {
.yearly-schedule .item5::after {
left: -25px;
height: calc(100% + 50px); } }
.yearly-schedule .item6 {
grid-column: 2;
grid-row: 6; }
.yearly-schedule .item6::before {
left: -47px; }
@media screen and (max-width: 570px) {
.yearly-schedule .item6::before {
left: -32px; } }
.yearly-schedule .item6::after {
left: -41px; }
@media screen and (max-width: 570px) {
.yearly-schedule .item6::after {
left: -25px;
height: calc(100% + 50px); } }
.yearly-schedule .item7 {
grid-column: 1;
grid-row: 7; }
.yearly-schedule .item7::before {
right: -47px; }
@media screen and (max-width: 570px) {
.yearly-schedule .item7::before {
left: -32px; } }
.yearly-schedule .item7::after {
right: -40px; }
@media screen and (max-width: 570px) {
.yearly-schedule .item7::after {
left: -25px;
height: calc(100% + 50px); } }
.yearly-schedule .item8 {
grid-column: 2;
grid-row: 8; }
.yearly-schedule .item8::before {
left: -47px; }
@media screen and (max-width: 570px) {
.yearly-schedule .item8::before {
left: -32px; } }
.yearly-schedule .item8::after {
left: -41px; }
@media screen and (max-width: 570px) {
.yearly-schedule .item8::after {
left: -25px;
height: calc(100% + 50px); } }
.yearly-schedule .item9 {
grid-column: 1;
grid-row: 9; }
.yearly-schedule .item9::before {
right: -47px; }
@media screen and (max-width: 570px) {
.yearly-schedule .item9::before {
left: -32px; } }
.yearly-schedule .item9::after {
right: -40px; }
@media screen and (max-width: 570px) {
.yearly-schedule .item9::after {
left: -25px;
height: calc(100% + 50px); } }
.yearly-schedule .item10 {
grid-column: 2;
grid-row: 10; }
.yearly-schedule .item10::before {
left: -47px; }
@media screen and (max-width: 570px) {
.yearly-schedule .item10::before {
left: -32px; } }
.yearly-schedule .item10::after {
left: -41px; }
@media screen and (max-width: 570px) {
.yearly-schedule .item10::after {
left: -25px;
height: calc(100% + 50px); } }
.yearly-schedule .item11 {
grid-column: 1;
grid-row: 11; }
.yearly-schedule .item11::before {
right: -47px; }
@media screen and (max-width: 570px) {
.yearly-schedule .item11::before {
left: -32px; } }
.yearly-schedule .item11::after {
right: -40px; }
@media screen and (max-width: 570px) {
.yearly-schedule .item11::after {
left: -25px;
height: calc(100% + 50px); } }
.yearly-schedule .item12 {
grid-column: 2;
grid-row: 12; }
.yearly-schedule .item12::before {
left: -47px; }
@media screen and (max-width: 570px) {
.yearly-schedule .item12::before {
left: -32px; } }
.yearly-schedule .item12::after {
left: -41px;
bottom: 50%;
top: auto; }
@media screen and (max-width: 570px) {
.yearly-schedule .item12::after {
left: -25px;
height: calc(100% + 50px); } }
.yearly-schedule .img1 {
grid-column: 1;
grid-row: 4; }
.yearly-schedule .img1::after {
right: -40px; }
@media screen and (max-width: 570px) {
.yearly-schedule .img1::after {
left: -25px;
height: calc(100% + 50px); } }
.yearly-schedule .img2 {
grid-column: 2;
grid-row: 5; }
.yearly-schedule .img2::after {
left: -41px; }
@media screen and (max-width: 570px) {
.yearly-schedule .img2::after {
left: -25px;
height: calc(100% + 50px); } }
.yearly-schedule .img3 {
grid-column: 1;
grid-row: 6; }
.yearly-schedule .img3::after {
right: -40px; }
@media screen and (max-width: 570px) {
.yearly-schedule .img3::after {
left: -25px;
height: calc(100% + 50px); } }
.yearly-schedule .img4 {
grid-column: 2;
grid-row: 7; }
.yearly-schedule .img4::after {
left: -41px; }
@media screen and (max-width: 570px) {
.yearly-schedule .img4::after {
left: -25px;
height: calc(100% + 50px); } }
.yearly-schedule .img5 {
grid-column: 1;
grid-row: 8; }
.yearly-schedule .img5::after {
right: -40px; }
@media screen and (max-width: 570px) {
.yearly-schedule .img5::after {
left: -25px;
height: calc(100% + 50px); } }
.yearly-schedule .img6 {
grid-column: 2;
grid-row: 9; }
.yearly-schedule .img6::after {
left: -41px; }
@media screen and (max-width: 570px) {
.yearly-schedule .img6::after {
left: -25px;
height: calc(100% + 50px); } }
.yearly-schedule .img7 {
grid-column: 1;
grid-row: 12; }
.yearly-schedule .img7::after {
right: -40px;
bottom: 50%;
top: auto; }
@media screen and (max-width: 570px) {
.yearly-schedule .img7::after {
left: -25px;
height: calc(100% + 50px); } } @import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;700;900&display=swap");