/* module - common --------------------------------------------------------*/

/* @group @variables */

[class*="o-section"] {

--section-grid-template-columns: [full-start] var(--x-padding-left) 
[primary-start] var(--section-primary)
[secodary-start] var(--section-secodary) 
[tertiary-start] var(--section-tertiary) [tertiary-end]
 var(--section-secodary) [secondary-end]
 var(--section-primary) [primary-end]
var(--x-padding-right) [full-end];
--section-gap: 3.75rem 0;
--section-padding-top: clamp(3.75rem, 3.536rem + 1.07vw, 4.5rem); /* 60〜72 / 320〜1440 */
--section-padding-right: var(--x-padding-right);
--section-padding-left: var(--x-padding-left);
--section-padding-bottom: 7.5rem;
--section-background-size: auto clamp(10rem, 7.143rem + 14.29vw, 20rem);/* 160〜320 / 320〜1440 */
--section-background-color: hsl(0deg 0% 100%);
--section-primary: 0;
--section-secodary: 1fr;
--section-tertiary: 1fr;
}

[class*="o-section"]>* {
--section-child-grid-column: 2 / span 5;
}

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

[class*="o-section"] {
--section-primary: 1fr;
--section-secodary: calc((45rem - var(--section-tertiary)) / 2);
--section-tertiary: 20rem;
}

}

html [class*="m-splide-block"] {
--section-child-grid-column: 1 / span 7;
}

/* @end @variables */

/* @group @variables */

[class*="o-section-dodecato"] {
--section-padding-top: 0;
--section-padding-bottom: 5.25rem;
--section-gap: 3rem 0;
}

[class*="o-section-elfte"] {
--section-padding-bottom: 0;
}

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

[class*="o-section-endecato"] {
--section-padding-bottom: 8.25rem;
}

}

/* @end @variables */

/* @group @variables */

/* @group @variables - dark-blue */

/* dark-blue */

[class*="o-section-proto"],
[class*="o-section-deutero"],
[class*="o-section-trito"],
[class*="o-section-tetarto"] {
/*--section-background-color: hsl(198deg 59% 65%);*/
--section-background-color: hsl(198deg 59% 60%);
}

/* search */

[class*="o-section-deutero"] {
--section-background-image: url(../img/bg-section-04.svg);
--section-background-position: bottom left;
}

/* reason */

[class*="o-section-trito"] {
--section-background-image: url(../img/bg-section-05.svg);
--section-background-position: bottom left;
}

/* difference */

[class*="o-section-tetarto"] {
--section-background-image: url(../img/bg-section-09.svg);
--section-background-position: bottom left;
}

/* support */

[class*="o-section-pempto"] {
/*--section-background-color: hsl(198deg 59% 65%);*/
--section-background-color: hsl(198deg 59% 60%);
--section-background-image: url(../img/bg-section-06.svg);
--section-background-position: bottom left;
--section-background-size: auto clamp(10rem, 7.143rem + 14.29vw, 20rem);/* 160〜320 / 320〜1440 */
}

/* faq */

[class*="o-section-ecto"] {
/*--section-background-color: hsl(198deg 59% 65%);*/
--section-background-color: hsl(198deg 59% 60%);
--section-background-image: url(../img/bg-section-10.svg);
--section-background-position: bottom left;
--section-background-size: auto clamp(10rem, 7.143rem + 14.29vw, 20rem);/* 160〜320 / 320〜1440 */
}

/* @end @variables */

/* @group @variables - green */

/* green */

[class*="o-section-primero"],
[class*="o-section-segundo"],
[class*="o-section-tercero"],
[class*="o-section-cuarto"],
[class*="o-section-quinto"] {
/*--section-background-color: hsl(65deg 82% 50%);*/
--section-background-color: hsl(65deg 82% 55%);
}

/* seasonal */

[class*="o-section-segundo"] {
--section-background-image: url(../img/bg-section-08.svg);
--section-background-position: bottom right;
}

/* point */

[class*="o-section-tercero"] {
--section-background-image: url(../img/bg-section-07.svg);
--section-background-position: bottom right;
}

/* payment */

[class*="o-section-cuarto"] {
--section-background-image: url(../img/bg-section-02.svg);
--section-background-position: bottom right;
}

/* area */

[class*="o-section-quinto"] {
--section-background-image: url(../img/bg-section-12.svg);
--section-background-position: bottom right;
}

/* @end @variables */

/* @group @variables - light-blue */

/* light-blue */

[class*="o-section-premier"] {
--section-background-color: hsl(169deg 55% 85%);
}

/* light-blue 2 */

[class*="o-section-deuxieme"] {
--section-background-color: hsl(199deg 100% 95%);
}

/* @end @variables */

/* @group @variables - light green */

/* light green 2 */

[class*="o-section-onzieme"] {
--section-background-color: hsl(66deg 61% 88%);
}

/* light-green */

[class*="o-section-primo"],
[class*="o-section-undicesimo"] {
--section-background-color: hsl(65deg 48% 95%);
}

[class*="o-section-ottavo"],
[class*="o-section-nono"] {
--section-background-color: hsl(67deg 62% 88%);
}



[class*="o-section-nono"],
[class*="o-section-undicesimo"] {
--section-padding-bottom: 0;
}

/*[class*="o-section-"] {
--section-background-color: hsl(169deg 55% 85%);
--section-background-image: url(../img/sprite-svg.svg#);
--section-background-position: bottom left;
}*/

/* @end @variables */

/* @group @variables - green */

/* light green */

[class*="o-section-quaternary"] {
--section-background-color: hsl(64deg 55% 85%);
}

/* mint green*/

[class*="o-section-zehnte"] {
--section-background-color: hsl(168deg 57% 90%);
}


/* @end @variables */

/* @group @variables - white */

/* white */

[class*="o-section-primary"],
[class*="o-section-secondary"],
[class*="o-section-tertiary"] {
--section-background-color: hsl(0deg 0% 100%);
}

/* final section */

[class*="o-section-undenary"] {
--section-padding-bottom: 0;
}

/* pickup */

[class*="o-section-secondary"] {
--section-padding-right: 0;
--section-padding-left: 0;
--section-background-image: url(../img/bg-section-01.svg);
--section-background-position: bottom right;
--section-background-size: auto clamp(10rem, 8.571rem + 7.14vw, 15rem);/* 160〜256 / 320〜1440 */
--section-background-color: hsl(0deg 0% 100%);
}

/* popular */

[class*="o-section-tertiary"] {
--section-background-image: url(../img/bg-section-08.svg);
--section-background-position: bottom left;
}

/* application */

[class*="o-section-quaternary"] {
--section-background-image: url(../img/bg-section-11.svg);
--section-background-position: bottom right;
}

/* @end @variables */

/* @group @o-section */

[class*="o-section"] {
display: grid;
grid-template-columns: var(--section-grid-template-columns);
grid-auto-flow: row;
gap: var(--section-gap);
padding-top: var(--section-padding-top);
/*padding-right: var(--section-padding-right);
padding-left: var(--section-padding-left);*/
padding-bottom: var(--section-padding-bottom);
scroll-margin-top: var(--section-padding-top);
background-color: var(--section-background-color);
background-image: var(--section-background-image);
background-position: var(--section-background-position);
background-size: var(--section-background-size);
background-repeat: no-repeat;
backface-visibility: hidden;
/*content-visibility: auto;*/
}

/* content-visibilityの指定をモダール出現時には外す */

/*
:has([class*="a-toggle-modal"]:checked) {
content-visibility: visible;
}
*/

[class*="o-section"]>* {
grid-column: var(--section-child-grid-column);
}

[class*="m-section-footer"] {
grid-column: var(--section-child-grid-column);
}

/* @end @o-section */

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

/* @group @variables */

[class*="o-sezione"] {
--section-grid-template-columns: [full-start] var(--x-padding-left) 
[primary-start] var(--section-primary)
[secodary-start] var(--section-secodary) 
[tertiary-start] var(--section-tertiary) [tertiary-end]
 var(--section-secodary) [secondary-end]
 var(--section-primary) [primary-end]
var(--x-padding-right) [full-end];
--section-padding-bottom: 5.25rem;
--section-gap: 3rem 0;
--section-primary: 0;
--section-secodary: 1fr;
--section-tertiary: 1fr;
}

[class*="o-sezione"]>* {
--section-child-grid-column: 2 / span 5;
}

[class*="o-sezione-secondary"] {
/*--section-padding-bottom: 10rem;*/
--section-padding-bottom: 7.5rem;
}

[class*="o-sezione-primary"] {
--section-padding-top: clamp(3.75rem, 3.536rem + 1.07vw, 4.5rem); /* 60〜72 / 320〜1440 */
}

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

[class*="o-sezione"] {
--section-primary: 1fr;
--section-secodary: calc((45rem - var(--section-tertiary)) / 2);
--section-tertiary: 20rem;
}

[class*="o-sezione-secondary"] {
--section-padding-bottom: 8.25rem;
}

[class*="m-section-intro"] {
--section-child-grid-column: 3 / span 3;
}

}

/* @end @variables */

/* @group @o-sezione */

[class*="o-sezione"] {
display: grid;
grid-template-columns: var(--section-grid-template-columns);
grid-auto-flow: row;
gap: var(--section-gap);
padding-top: var(--section-padding-top);
padding-bottom: var(--section-padding-bottom);
scroll-margin-top: var(--section-padding-top);
}

[class*="o-sezione"]>* {
grid-column: var(--section-child-grid-column);
}

[class*="m-section-intro"] {
grid-column: var(--section-child-grid-column);
}

[class*="m-section-footer"] {
grid-column: var(--section-child-grid-column);
}

/* @end @o-sezione */

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

/* @group @m-section-inner */

/*[class*="m-section-inner"] {
padding-right: var(--x-padding-right);
padding-left: var(--x-padding-left);
}*/

/* @end @m-section-inner */

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

/* @group @variables */

[class*="m-section-header-proto"] {
--section-padding-right: var(--x-padding-right);
--section-padding-left: var(--x-padding-left);
}

/* @end @variables */

/* @group @m-section-header */

[class*="m-section-header"] {
display: grid;
justify-content: center;
gap: 1rem;
padding-right: var(--section-headerpadding-right);
padding-left: var(--section-headerpadding-left);
text-align: center;
}

[class*="m-section-header"] h2 {
font-size: clamp(1.5rem, 1.286rem + 1.07vw, 2.25rem); /* 24〜36 / 320〜1440 */
line-height: 1.5;
font-weight: 600;
font-variation-settings-strong: "wght" 600;
color: hsl(0deg 0% 20%);
word-break: keep-all;
overflow-wrap:anywhere;
}

[class*="m-section-header"] p {
font-family: var(--font-family-heading-primary);
/*font-size: clamp(2.25rem, 0.571rem + 8.39vw, 8.125rem);*/ /* 36〜130 / 320〜1440 */
font-size: clamp(2.25rem, 0.75rem + 7.5vw, 7.5rem); /* 36〜120 / 320〜1440 */
line-height: .8;
font-weight: 900;
font-variation-settings-strong: "wght" 900;
color: hsl(0deg 0% 100%);
/* @todo https://unused-css.com/blog/css-text-strokeoutline/ */
text-shadow: 1.41px 1.41px hsl(0deg 0% 20%), 2px 0 hsl(0deg 0% 20%), 1.41px -1.41px hsl(0deg 0% 20%), 0 -2px hsl(0deg 0% 20%), -1.41px -1.41px hsl(0deg 0% 20%), -2px 0 hsl(0deg 0% 20%), -1.41px 1.41px hsl(0deg 0% 20%), 0 2px hsl(0deg 0% 20%);
-webkit-font-smoothing: antialiased;
word-break: keep-all;
overflow-wrap:anywhere;
}

/* @end @m-section-header */

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

/* @group @variables */

[class*="m-sezione-header-proto"] {
--sezione-padding-right: var(--x-padding-right);
--sezione-padding-left: var(--x-padding-left);
}

/* @end @variables */

/* @group @m-sezione-header */

/*[class*="m-sezione-header"] {
display: grid;
grid-template-columns: auto 1fr;
gap: .375rem;
padding-bottom: calc(.375rem - 1px);
border-bottom: 1px solid hsl(65deg 86% 41%);
color: hsl(65deg 86% 41%);
}

[class*="m-sezione-header"] h2 {
margin-bottom: 0;
font-size: clamp(1.5rem, 1.286rem + 1.07vw, 2.25rem); /* 24〜36 / 320〜1440 *!/
line-height: 1.33333333;
font-weight: 600;
font-variation-settings-strong: "wght" 600;
color: hsl(65deg 86% 41%);
}*/

[class*="m-sezione-header"] {
overflow: clip;
display: grid;
grid-template-rows: 1fr .75rem auto;
gap: .375rem;
direction: ltr;
}

[class*="m-sezione-header"]:before {
grid-column: 1;
grid-row: 3;
}

[class*="m-sezione-header"] h2,
[class*="m-sezione-header"] h3 {
grid-column: 1;
grid-row: 1;
}

[class*="m-sezione-header"]:before {
content: '';
position: relative;
display: block;
width: 12rem;
height: .375rem;
background-color: hsl(220deg 10% 20%);
}

[class*="m-sezione-header"] h2,
[class*="m-sezione-header"] h3 {
margin-bottom: 0;
font-size: clamp(2.25rem, 2.036rem + 1.07vw, 3rem); /* 36〜48 / 320〜1440 */
font-size: clamp(1.875rem, 1.661rem + 1.07vw, 2.625rem); /* 30〜42 / 320〜1440 */
line-height: 1.2;
font-weight: 600;
font-variation-settings-strong: "wght" 600;
}

[class*="m-sezione-header-secondary"] h2,
[class*="m-sezione-header-secondary"] h3 {
font-size: 1.5rem;
}

[class*="m-sezione-header-secondary"]:before {
content: '';
position: relative;
display: block;
width: 6rem;
height: .25rem;
background-color: hsl(220deg 10% 20%);
}

/* @end @m-sezione-header */

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

/* @group @variables */

/*[class*="o-section-proto"],
[class*="o-section-deutero"],
[class*="o-section-trito"],
[class*="o-section-tetarto"] {
color: var(--color-white);
}*/

/* @end @variables */

/* @group @m-section-overview */

[class*="m-section-overview"] {
display: grid;
grid-auto-flow: row;
gap: .75rem;
width: 100%;
max-width: 45rem;
margin-right: auto;
margin-left: auto;
text-align: center;
}

[class*="m-section-overview"] h3 {
font-size: 1.25rem;
overflow: hidden; word-break: keep-all; overflow-wrap:anywhere;
}

[class*="m-section-overview"] p {
margin-bottom: 0;
overflow: hidden; word-break: keep-all; overflow-wrap:anywhere;
}

/* @end @m-section-overview */

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

/* @group @m-section-intro */

/*[class*="m-section-intro"] {
width: 100%;
max-width: 45rem;
margin-right: auto;
margin-left: auto;
}

[class*="m-section-intro"] p {
margin-bottom: 0;
}*/

/* @end @m-section-intro */

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

/* @group @variables */

[class*="m-section-footer"] {
/*--section-footer-grid-template-columns: ;
--section-footer-grid-template-rows: ;
--section-footer-gap: ;*/
--section-max-width: 32rem;
}

/* @end @variables */

/* @group @m-section-footer */

[class*="m-section-footer"] {
display: grid;
grid-template-columns: var(--section-footer-grid-template-columns);
grid-template-rows: var(--section-footer-grid-template-rows);
gap: var(--section-footer-gap);
width: 100%;
max-width: var(--section-max-width);
margin-right: auto;
margin-left: auto;
}

/* @end @m-section-footer */