/* @group @variables */

[class*="o-hero-root"] {
--heading-1-font-family: var(--font-family-default);
--heading-1-font-size: 2.25rem;
--heading-1-font-size: clamp(9vw, 3rem, 10.5vw);
--heading-1-line-height: 1.5;
--heading-1-font-weight: var(--text-font-weight-bold);
--heading-1-word-break: keep-all;
--hero-root-text-color: var(--color-white);
--text-block-margin-bottom: 0;
--word-break: keep-all;
--hero-root-grid-template-columns: var(--body-x-padding-left) 0 1fr 0 var(--body-x-padding-right);
--hero-root-grid-template-rows: 6rem 1fr 4.5rem;
--hero-root-grid-align-content: center;
--hero-root-min-height: 30rem;
--hero-root-body-grid-column: 3;
--hero-root-body-grid-row: 2;
--hero-root-media-grid-column: 1 / 6;
--hero-root-media-grid-row: 1 / 4;
--hero-media-object-position: var(--object-position-novenary);
/*--hero-root-overlay: hsla(212, 100%, 33%, .8125);*/
--hero-root-overlay-background-image: radial-gradient(ellipse at center, hsla(212, 100%, 23%, .4375) 0%, hsla(212, 100%, 22%, .575) 100%);
/*--hero-root-overlay-background-image: radial-gradient(ellipse at center, hsla(212, 100%, 23%, .4375) 0%, hsla(212, 100%, 22%, .575) 100%);*/
--hero-root-overlay-backdrop-filter: blur(.125rem);
--text-block-margin-bottom: 0;

--btn-grid-template-columns: var(--btn-before-after-size) auto 0;
--btn-offer-gap: .75rem;
--btn-text-column: 2;
--btn-text-row: 1;
--btn-before-column: 1;
--btn-before-row: 1;
--btn-before-content: '';
--btn-before-after-size: 1.5rem;
--btn-before-background-color: currentColor;
}

[class*="m-hero-root-body"] {
--hero-body-columns: repeat(1, 1fr);
--hero-body-align-self: center;
--hero-body-gap: 2.25rem;
}

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

[class*="o-hero-root"] {
/*--heading-1-font-size: 2.625rem;*/
--heading-1-line-height: 1.42857143;
}

}

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

[class*="o-hero-root"] {
/*--heading-1-font-size: 4.125rem;*/
--heading-1-line-height: 1.25;
}

}

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

[class*="o-hero-root"] {
--heading-1-font-size: 4.125rem;
--heading-1-line-height: 1.36363636;
}

}

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

[class*="o-hero-root"] {
--hero-root-min-height: 100vh;
}

}

/* @end @variables */

/* @group @o-hero-root */

[class*="o-hero-root"] {
position: relative;
overflow: hidden;
z-index: 3;
display: grid;
align-content: var(--hero-root-grid-align-content);
grid-template-columns: var(--hero-root-grid-template-columns);
grid-template-rows: var(--hero-root-grid-template-rows);
gap: var(--hero-root-gap-primary);
min-height: var(--hero-root-min-height);
color: var(--hero-root-text-color);
text-align: center;
}

[class*="m-hero-root-body"] {
grid-column: var(--hero-root-body-grid-column);
grid-row: var(--hero-root-body-grid-row);
}

/* @end @o-hero-root */

/* --------------------------------------------------------*/

/* @group @variables */

[class*="m-hero-root-application"] {
--hero-application-columns: repeat(1, 1fr);
--hero-application-max-size: 36rem;/* CSSで変更 */
--hero-application-gap: 1.5rem;
--hero-application-push-top: 1.5rem;
--hero-application-push: auto;
--btn-offer-font-size: 1.25rem;
}

/* @end @variables */

/* @group @o-hero-root */

[class*="m-hero-root-body"] {
display: grid;
grid-template-columns: var(--hero-body-columns);
gap: var(--hero-body-gap);
align-self: var(--hero-body-align-self);
}

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

[class*="m-hero-root-application"] {
display: grid;
justify-content: center;
grid-template-columns: var(--hero-application-columns);
gap: var(--hero-application-gap);
/*width: 100%;
max-width: var(--hero-application-max-size);*/
width: min(var(--hero-application-max-size), 100%);
margin-top: var(--hero-application-push-top);
margin-right: var(--hero-application-push);
margin-left: var(--hero-application-push);
}

}

/* @end @o-hero-root */

/* --------------------------------------------------------*/

/* @group @variables */

[class*="a-hero-sub-copy"] {
--text-block-font-size: clamp(3vw, 2.625rem, 7.5vw);
--text-block-line-height: 1.5;
}

[class*="a-hero-sub-point-copy"] {
--hero-sub-point-copy-size: clamp(6vw, 3.75rem, 12vw);
--hero-sub-point-copy-margin-top: .375rem;
--hero-sub-point-copy-margin-right: -1px;
}

/*@media all and (min-width: 23.25em) {

[class*="a-hero-sub-copy"] {
--text-block-font-size: 1.5rem;
--text-block-line-height: 1.5;
}

}*/

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

[class*="a-hero-sub-copy"] {
--text-block-font-size: 2.625rem;
--text-block-line-height: 1.5;
--text-block-line-height: 1.2;
}

[class*="a-hero-sub-point-copy"] {
--hero-sub-point-copy-position-top: -.1875rem;
--hero-sub-point-copy-size: 3.375rem;
--hero-sub-point-copy-margin-top: .375rem;
--hero-sub-point-copy-font-size: 2.25rem;
}
}

/* @end @variables */

/* @group @a-hero-sub-copy */

[class*="a-hero-sub-copy"] {
margin-bottom: -1.5rem;
font-weight: 500;
word-break: keep-all;
}

[class*="a-hero-sub-point-copy"] {
position: relative;
top: var(--hero-sub-point-copy-position-top);
display: inline-flex;
justify-content: center;
align-items: center;
width: var(--hero-sub-point-copy-size);
height: var(--hero-sub-point-copy-size);
margin-top: var(--hero-sub-point-copy-margin-top);
margin-right: var(--hero-sub-point-copy-margin-right);
box-shadow: inset 0 0 0 1px hsla(0, 0%, 100%, .85);
font-size: var(--hero-sub-point-copy-font-size);
}

[class*="a-hero-sub-point-copy"]:first-of-type {
margin-left: .5rem;
}

[class*="a-hero-sub-point-copy"] + [class*="a-hero-sub-point-copy"] {
margin-right: .5rem;
}

/* @end @a-hero-sub-copy */

/* --------------------------------------------------------*/

/* @group @o-hero-root */

[class*="a-hero-root-media"] {
position: absolute;
z-index: -3;
grid-column:var(--hero-root-media-grid-column);
grid-row: var(--hero-root-media-grid-row);
width: 100%;
height: 100%;
}

[class*="a-hero-root-media"] img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: var(--hero-media-object-position);
}

/* @end @o-hero-root */

/* --------------------------------------------------------*/

/* @group @o-hero-root */

[class*="o-hero-root"]:before {
content: '';
z-index: -2;
position: relative;
grid-column:var(--hero-root-media-grid-column);
grid-row: var(--hero-root-media-grid-row);
background-image: var(--hero-root-overlay-background-image);
background-color: var(--hero-root-overlay);
-webkit-backdrop-filter: var(--hero-root-overlay-backdrop-filter);
backdrop-filter: var(--hero-root-overlay-backdrop-filter);
}

/* @end @o-hero-root */

/* --------------------------------------------------------*/

/* @group @variables */

[class*="a-hero-point"] {
--hero-point-columns: repeat(1, 1fr);
--hero-point-gap: .75rem;
--hero-point-column-padding: .75rem 1.125rem;
--hero-point-column-radius: .25rem;
--hero-point-column-gap: .75rem;

--hero-point-column-width: 100%;
--hero-point-column-text-align: center;
--hero-point-column-push: auto;
--hero-point-column-border-radius: .25rem;
/*--text-block-font-size: .875rem;
--text-block-line-height: 1.71428571;*/
--text-block-font-size: clamp(2.5vw, 1.5rem, 5vw);
--text-block-font-weight: var(--text-font-weight-bold);
--hero-point-column-clip-path: polygon(calc(100% - 1.5rem) 0, 100% 50%, calc(100% - 1.5rem) 100%, 1.5rem 100%, 0 50%, 1.5rem 0);
}

[class*="a-hero-point"] li {
--hero-point-column-background-color: hsla(220, 100%, 50%, .75);
--hero-point-column-text-color: var(--color-white);
--hero-point-column-font-weight: 600;
}

[class*="a-hero-point"] li:nth-of-type(2) {
--hero-point-column-background-color: hsla(200, 100%, 50%, .75);
}

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

[class*="a-hero-point"] {
--hero-point-column-max-width: 30rem;
}

}

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

[class*="a-hero-point"] {
/*--text-block-font-size: 1.125rem;*/
--text-block-line-height: 1.66666667;
}

}

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

[class*="a-hero-point"] {
--hero-point-columns-size: 15rem;
--hero-point-columns-grid-size: calc(var(--hero-point-columns-size) - 4rem);
--hero-point-max-size: auto;
--hero-point-columns: 1rem 1rem var(--hero-point-columns-grid-size) 1rem 1rem 1rem var(--hero-point-columns-grid-size) 1rem 1rem 1rem var(--hero-point-columns-grid-size) 1rem 1rem;
--hero-point-push: auto;
--hero-point-gap: 0;
--hero-point-detail-grid-row: 1;
--hero-point-column-width: var(--hero-point-columns-size);
--text-block-font-size: 1.25rem;
--text-block-line-height: 1.5;
}

[class*="a-hero-point"] li:nth-of-type(1) {
--hero-point-detail-grid-column: 1 / 6;
}

[class*="a-hero-point"] li:nth-of-type(2) {
--hero-point-detail-grid-column: 5 / 9;
}

[class*="a-hero-point"] li:nth-of-type(3) {
--hero-point-detail-grid-column: 9 / 14;
}

}

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

[class*="a-hero-point"] {
--hero-point-columns-size: 18rem;
--hero-point-column-padding: .75rem 1.5rem;
}

}

/* @end @variables */

/* @group @a-hero-point */

[class*="a-hero-point"] {
display: grid;
justify-content: center;
grid-template-columns: var(--hero-point-columns);
gap: var(--hero-point-gap);
/*width: 100%;
max-width: var(--hero-point-max-size);*/
width: min(var(--hero-point-max-size), 100%);
margin-right: var(--hero-point-push);
margin-left: var(--hero-point-push);
}

[class*="a-hero-point"] li {
box-sizing: border-box;
grid-column: var(--hero-point-detail-grid-column);
grid-row: var(--hero-point-detail-grid-row);
display: grid;
align-items: center;
gap: var(--hero-point-column-gap);
width: var(--hero-point-column-width);
max-width: var(--hero-point-column-max-width);
height: var(--hero-point-column-height);
padding: var(--hero-point-column-padding);
background-color: var(--hero-point-column-background-color);
margin-right: var(--hero-point-column-push);
margin-left: var(--hero-point-column-push);
box-shadow: var(--hero-point-column-box-shadow);
border-radius: var(--hero-point-column-border-radius);
color: var(--hero-point-column-text-color);
text-align: var(--hero-point-column-text-align);
font-weight: var(--hero-point-column-font-weight);
word-break: keep-all;
-webkit-clip-path: var(--hero-point-column-clip-path);
clip-path: var(--hero-point-column-clip-path);
}

/* @end @a-hero-point */