/* content-header - common --------------------------------------------------------*/

/* @group @variables */

[class*="o-content-header"] {
--content-header-grid-template-rows: 7.875rem 2.875rem 4.625rem auto 0 5rem;
--content-header-background-color: hsl(201deg 52% 90%);
}

[class*="o-content-header-sale"] {
--content-header-background-color: hsl(360deg 50% 91%);
}

[class*="o-content-header-school"] {
--content-header-grid-template-rows: 7.875rem 2.875rem auto 0 3rem 1fr 5rem;
--content-header-background-color: hsl(201deg 52% 90%);
}

@media all and (min-width: 72em) {

[class*="o-content-header-school"] {
--content-header-grid-template-rows: 8.5rem 2.875rem auto 0 3rem 1fr 5rem;
}

}

/* @end @variables */

/* @group @o-content-header */

[class*="o-content-header"] {
position: relative;
display: grid;
grid-template-columns: var(--x-padding-left) 1fr var(--x-padding-right);
grid-template-rows: var(--content-header-grid-template-rows);
background-color: var(--content-header-background-color);
}

[class*="a-content-cloud"] {
grid-column: 1 / span 3;
grid-row: 2 / span 2;
}

[class*="a-content-title"] {
grid-column: 2;
grid-row: 3 / span 2;
}

[class*="a-school-title"] {
grid-column: 2;
grid-row: 2 / span 2;
}

[class*="a-content-icon"] {
grid-column: 1 / span 3;
grid-row: 7;
}

[class*="m-school-root-slider"] {
grid-column: 1 / span 3;
grid-row: 6;
}

/* @end @o-content-header */

/* @group @variables */

[class*="a-school-title"] {
--school-title-gap: 1.5rem .75rem;

}

@media all and (min-width: 48em) {

[class*="a-school-title"] {
--school-title-grid-template-columns: 1fr 13rem;
--school-title-grid-template-rows: auto auto;
--a-school-title-h1-grid-column: 1;
--a-school-title-h1-grid-row: 1;
--school-application-grid-column: 2;
--school-application-grid-row: 1;
--school-head-info-grid-column: 1;
--school-head-info-grid-row: 2;
}

}

/* @end @variables */

/* @group @a-school-title */

[class*="a-school-title"] {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: var(--school-title-grid-template-columns);
grid-template-rows: var(--school-title-grid-template-rows);
gap: var(--school-title-gap);
}

[class*="a-school-title"] h1 {
grid-column: var(--school-title-h1-grid-column);
grid-row: var(--school-title-h1-grid-row);
font-weight: 600;
font-variation-settings-strong: "wght" 600;
}

[class*="a-school-application"] {
grid-column: var(--school-application-grid-column);
grid-row: var(--school-application-grid-row);
}

[class*="a-school-head-info"] {
grid-column: var(--school-head-info-grid-column);
grid-row: var(--school-head-info-grid-row);
}

/* @end @a-school-title */

/* @group @variables */

@media all and (max-width:47.9375em) {

[class*="a-school-application"] {
--school-application-max--width: 25rem;
}

}

/* @end @variables */

/* @group @a-school-application */

[class*="a-school-application"] {
width: 100%;
max-width: var(--school-application-max-width);
margin-right: auto;
margin-left: auto;
font-size: .875rem;
}

/* @end @a-school-application */

/* @group @variables */

[class*="a-school-head-info"] {
--school-head-info-gap: .75rem;
}

@media all and (max-width:47.9375em) {

[class*="a-school-head-info"] {
--school-head-point-margin: 0 auto;
}

}

@media all and (min-width: 48em) {

[class*="a-school-head-info"] {
--school-head-info-grid-template-columns: auto 1fr;
}

}

/* @end @variables */

/* @group @a-school-head-info */

[class*="a-school-head-info"] {
display: grid;
grid-template-columns: var(--school-head-info-grid-template-columns);
grid-template-rows: var(--school-head-info-grid-template-rows);
gap: var(--school-head-info-gap);
}

[class*="a-school-pref"] {
display: grid;
justify-content: center;
align-items: center;
width: 7.5rem;
height: 2.25rem;
margin: var(--school-head-point-margin);
background-color: hsl(201deg 89% 62%);
border-radius: 99rem;
color: hsl(0deg 0% 100%);
text-align: center;
}

[class*="a-school-head-point"] {
display: flex;
flex-wrap: wrap;
gap:.75rem;
margin: var(--school-head-point-margin);
}

[class*="a-school-head-point"] li {
display: grid;
justify-content: center;
align-items: center;
height: 1.875rem;
padding: 0 .5rem;
border: 1px solid hsl(0deg 0% 0%);
font-size: .75rem;
}

/* @end @a-school-head-info */

/* @group @a-content-title */

[class*="a-content-title"] {
position: relative;
z-index: 2;
display: grid;
justify-content: center;
grid-template-rows: auto auot;
gap: 1.5rem;
}

[class*="a-content-title"] div {
display: grid;
justify-content: center;
align-items: center;
grid-template-columns: 1.875rem auto 1.875rem;
gap: .75rem; 
}

[class*="a-content-title"] div:before,
[class*="a-content-title"] div:after {
content: '';
display: grid;
width: 2px;
height: 100%;
background-color: currentColor;
}

[class*="a-content-title"] div:before {
grid-column: 1;
grid-row: 1;
margin-left: auto;
transform: rotate(-25deg);
}

[class*="a-content-title"] div:after {
grid-column: 3;
grid-row: 1;
margin-right: auto;
transform: rotate(25deg);
}

[class*="a-content-title"] p {
grid-column: 2;
grid-row: 1;
font-size: clamp(1.25rem, 1.036rem + 1.07vw, 2rem); /* 20〜32 / 320〜1440 */
line-height: 1.125;
font-weight: 600;
font-variation-settings-strong: "wght" 600;
text-align: center;
}

[class*="a-content-title"] h1 {
font-size: clamp(2.25rem, 1.821rem + 2.14vw, 3.75rem); /* 36〜60 / 320〜1440 */
line-height: 1.2;
font-weight: 600;
font-variation-settings-strong: "wght" 600;
text-align: center;
}

/* @end @a-content-title */

/* @group @a-content-icon */

[class*="a-content-icon"] {
position: relative;
overflow: hidden;
display: grid;
grid-template-rows: 1fr calc(1.125rem - 1px) 2px calc(1.125rem - 1px);
height: 5rem;
}

[class*="a-content-icon"] img {
position: absolute;
z-index: 3;
grid-column: 1;
grid-row: 1 / span 4;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
}

[class*="a-content-icon"]:before {
content: '';
z-index: 1;
grid-column: 1;
grid-row: 2 / span 3;
width: 100%;
height: 2.25rem;
background-color: hsl(221deg 10% 50%);
}

[class*="a-content-icon"]:after {
content: '';
position: relative;
z-index: 2;
grid-column: 1;
grid-row: 3;
display: grid;
width: 100%;
height: 2px;
background-image: linear-gradient(to right, transparent 66%, hsl(0deg 0% 100%) 0%);
background-position: bottom;
background-size: 1.5rem 2px;
background-repeat: repeat-x;
}

/* @end @a-content-icon */

/* @group @a-content-cloud */

[class*="a-content-cloud"] {
position: relative;
z-index: 1;
display: grid;
width: 100vw;
grid-template-columns: auto 3.375rem auto 1fr auto auto;
}

[class*="a-content-cloud"]>li {
grid-row: 1;
}

[class*="a-content-cloud"]>li:nth-of-type(1) {
grid-column: 1;
align-self: center;
}

[class*="a-content-cloud"]>li:nth-of-type(2) {
grid-column: 3;
}

[class*="a-content-cloud"]>li:nth-of-type(3) {
grid-column: 5;
align-self: end;
}

[class*="a-content-cloud"]>li:nth-of-type(4) {
grid-column: 6;
}

/* @end @a-content-cloud */