/* ---変数--- */
:root {
  /* l-pc-maxwidth */
   --l-pc-maxwidth: 120em;

  /* fontfamily */
   --font-family-base: "Zen Kaku Gothic New", 'Noto Sans JP', 'YuGothic', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, 'Roboto', Roboto, Osaka, sans-serif;
   --font-family-h: "Zen Kaku Gothic New", 'Noto Sans JP', 'YuGothic', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, 'Roboto', Roboto, Osaka, sans-serif;

  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-bold: 700;
  
  /* color */
  --basecolor: #78492F;
  --white:#ffffff;
  --lightblue: #7AB5E8;
  --gray: #888F96;
  --blue: #005AAA;
  --red:#F55D3C;
  

  /* background-color */
  --bg-main: #e5e5e5;
  --bg-white:#ffffff;
  --bg-beige: #FEF9EA;
  --bg-blue:  #005AAA;
  --bg-vioret: #B1CBF1;
  --bg-backblue:#DDEAF5;
  --color-yellow:#F8C82A;

  /* color */
  --color-lightorange: #FFA100;
  --color-orange: #FF8929;
  --color-pink:#F68688;
  --color-lightpink:#FFAFA0;
  --color-yellow:#F8C82A;
  --color-yellow2:#FFC800;
  --color-orange2:#F7862A;
  


  /* gradient */
    --gradient-header-footer: linear-gradient(
    to bottom,
    var(--color-yellow2),
    var(--color-orange2)
  );
  --gradient-orange: linear-gradient(
    to bottom,
    var(--color-lightorange),
    var(--color-orange)
  );

  --gradient-orange2: linear-gradient(
    to bottom,
    var(--color-orange),
    var(--color-lightorange)
  );

  --gradient-pink: linear-gradient(
    to bottom,
    var(--color-pink),
    var(--color-lightpink)
  );
  --gradient-pink2: linear-gradient(
    to bottom,
    var(--color-lightpink),
    var(--color-pink)
  );
 
      
  

  /* hover */
  --hover-color: #001738;
  --hover-opacity: 0.9;
  --hover-transition: 0.2s;
  
  /* header高さ自動取得用*/
  --header-height: 0px;
}



/* ---Layout--- */
/* base */
html {
  height: 100%;
  font-size: 62.5%; /* 1rem = 10px */
}

body {
  display: flex;
  flex-flow: column;
  min-height: 100vh;
}

main {flex: 1;}

img {
    width: 100%; 
    height: auto; 
} 

/* display */
.l-inline {display: inline;}
.l-inline-block {display: inline-block;}
.l-block {display: block;}

/* none */
.f-sp-none {display: none !important;}
.f-pc-none {display: block !important;}

@media (min-width: 768px) {
  .f-sp-none {display: block !important;}
  .f-pc-none {display: none !important;}
}

/* position */
.l-p-relative { position: relative; }
.l-absolute { position: absolute; }

/* flex */
.l-flex {display:flex; flex-wrap:wrap; }
.l-flex-c {display:flex; justify-content: center;}
.l-flex-s {display:flex; justify-content: flex-start;}
.l-flex-e {display:flex; justify-content: flex-end;}
.l-flex-a {display:flex; justify-content: space-around;}
.l-flex-b {display:flex; justify-content: space-between;}
.rol-w-r {flex-direction: row-reverse;}/* reverseの時はl-flex-eを指定 */
.column {flex-direction: column;}
.shrink0 {flex-shrink: 0;} /* flex-col要素にwidthを指定する場合は一緒に指定 */
.order1 {order:1;}
.order2 {order:2;}
.order3 {order:3;}
.order4 {order:4;}
.order5 {order:5;}
.order6 {order:6;}

/* flex-pc-only */
@media (min-width: 768px) {
    .l-flex-pc {display:flex; flex-wrap:wrap; }
    .l-flex-c-pc {display:flex; justify-content: center;}
    .l-flex-s-pc {display:flex; justify-content: flex-start;}
    .l-flex-e-pc {display:flex; justify-content: flex-end;}
    .l-flex-around-pc {display:flex; justify-content: space-around;}
    .l-flex-between-pc {display:flex; justify-content: space-between;}
    .rol-w-r-pc {flex-direction: rol-w-reverse;}/* reverseの時はl-flex-eを指定*/
    .column-pc {flex-direction: column;}
}

/* flex-exception */
.l-flex-align-center{align-items: center;}
.l-flex-align-start{align-items: flex-start;}
.l-flex-nowrap{flex-wrap: nowrap;}

/* grid */
.l-grid {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
}
.l-grid[data-cols="2"] { --cols: 2; }
.l-grid[data-cols="3"] { --cols: 3; }
.l-grid[data-cols="4"] { --cols: 4; }
.l-grid[data-cols="5"] { --cols: 5; }
.l-grid[data-cols="6"] { --cols: 6; }

/* grid-pc-only */
@media (min-width: 768px) {
    .l-grid-pc {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
    }
    .l-grid-pc[data-cols="2"] { --cols: 2; }
    .l-grid-pc[data-cols="3"] { --cols: 3; }
    .l-grid-pc[data-cols="4"] { --cols: 4; }
    .l-grid-pc[data-cols="5"] { --cols: 5; }
    .l-grid-pc[data-cols="6"] { --cols: 6; }
}

/* width */
.l-w-100{width: 100%;}
.l-w-95{width: 95%;}
.l-w-90{width: 90%;}
.l-w-80{width: 80%;}
.l-w-70{width: 70%;}
.l-w-60{width: 60%;}
.l-w-55{width: 55%;}
.l-w-50{width: 50%;}
.l-w-45{width: 45%;}
.l-w-40{width: 40%;}
.l-w-33{width: 33.33333%;}
.l-w-25{width: 25%;}
.l-w-20{width: 20%;}

@media (min-width: 768px) {
    .l-w-95-pc{width: 95%;}
    .l-w-90-pc{width: 90%;}
    .l-w-80-pc{width: 80%;}
    .l-w-70-pc{width: 70%;}
    .l-w-60-pc{width: 60%;}
    .l-w-55-pc{width: 55%;}
    .l-w-50-pc{width: 50%;}
    .l-w-45-pc{width: 45%;}
    .l-w-40-pc{width: 40%;}
    .l-w-33-pc{width: 33.33333%;}
    .l-w-25-pc{width: 25%;}
    .l-w-20-pc{width: 20%;}
}


/* sp用inner */
@media (max-width: 768px) {
    .l-sp-inner{
        padding:0 1.6rem;
        margin: 0 auto;
    }
}

/* pc用wrapper */
@media (min-width: 768px) {
    .l-pc-wrapper{
        max-width:var(--l-pc-maxwidth);
        margin-inline: auto;
    }
}

/* pc用inner 768px~1200pxの間だけ  */
@media (min-width: 768px) and (max-width: 1200px) {
  .l-pc-inner {
    padding: 0 1.6rem;
  }
}


/* ---Utilities--- */
/* gap */
.u-gap-4  { gap: 0.4rem; }  /* 4px  */
.u-gap-8  { gap: 0.8rem; }  /* 8px  */
.u-gap-12 { gap: 1.2rem; }  /* 12px */
.u-gap-16 { gap: 1.6rem; }  /* 16px */
.u-gap-24 { gap: 2.4rem; }  /* 24px */
.u-gap-32 { gap: 3.2rem; }  /* 32px */

/* margin */
.u-m-4  { margin: 0.4rem; }
.u-m-8  { margin: 0.8rem; }
.u-m-12 { margin: 1.2rem; }
.u-m-16 { margin: 1.6rem; }
.u-m-24 { margin: 2.4rem; }
.u-m-32 { margin: 3.2rem; }

/* margin 左右 */
.u-mx-4  { margin-inline: 0.4rem; }
.u-mx-8  { margin-inline: 0.8rem; }
.u-mx-12 { margin-inline: 1.2rem; }
.u-mx-16 { margin-inline: 1.6rem; }
.u-mx-24 { margin-inline: 2.4rem; }
.u-mx-32 { margin-inline: 3.2rem; }

/* margin 上下 */
.u-my-4  { margin-block: 0.4rem; }
.u-my-8  { margin-block: 0.8rem; }
.u-my-12 { margin-block: 1.2rem; }
.u-my-16 { margin-block: 1.6rem; }
.u-my-24 { margin-block: 2.4rem; }
.u-my-32 { margin-block: 3.2rem; }

/* margin 片側 */
.u-ms-4  { margin-inline-start: 0.4rem; }
.u-ms-8  { margin-inline-start: 0.8rem; }
.u-ms-12 { margin-inline-start: 1.2rem; }
.u-ms-16 { margin-inline-start: 1.6rem; }
.u-ms-24 { margin-inline-start: 2.4rem; }
.u-ms-32 { margin-inline-start: 3.2rem; }

.u-me-4  { margin-inline-end: 0.4rem; }
.u-me-8  { margin-inline-end: 0.8rem; }
.u-me-12 { margin-inline-end: 1.2rem; }
.u-me-16 { margin-inline-end: 1.6rem; }
.u-me-24 { margin-inline-end: 2.4rem; }
.u-me-32 { margin-inline-end: 3.2rem; }

.u-mt-4  { margin-block-start: 0.4rem; }
.u-mt-8  { margin-block-start: 0.8rem; }
.u-mt-12 { margin-block-start: 1.2rem; }
.u-mt-16 { margin-block-start: 1.6rem; }
.u-mt-24 { margin-block-start: 2.4rem; }
.u-mt-32 { margin-block-start: 3.2rem; }

.u-mb-4  { margin-block-end: 0.4rem; }
.u-mb-8  { margin-block-end: 0.8rem; }
.u-mb-12 { margin-block-end: 1.2rem; }
.u-mb-16 { margin-block-end: 1.6rem; }
.u-mb-24 { margin-block-end: 2.4rem; }
.u-mb-32 { margin-block-end: 3.2rem; }

/* padding */
.u-p-4  { padding: 0.4rem; }
.u-p-8  { padding: 0.8rem; }
.u-p-12 { padding: 1.2rem; }
.u-p-16 { padding: 1.6rem; }
.u-p-24 { padding: 2.4rem; }
.u-p-32 { padding: 3.2rem; }

/* padding 左右 */
.u-px-4  { padding-inline: 0.4rem; }
.u-px-8  { padding-inline: 0.8rem; }
.u-px-12 { padding-inline: 1.2rem; }
.u-px-16 { padding-inline: 1.6rem; }
.u-px-24 { padding-inline: 2.4rem; }
.u-px-32 { padding-inline: 3.2rem; }

/* padding 上下 */
.u-py-4  { padding-block: 0.4rem; }
.u-py-8  { padding-block: 0.8rem; }
.u-py-12 { padding-block: 1.2rem; }
.u-py-16 { padding-block: 1.6rem; }
.u-py-24 { padding-block: 2.4rem; }
.u-py-32 { padding-block: 3.2rem; }

/* padding 片側 */
.u-ps-4  { padding-inline-start: 0.4rem; }
.u-ps-8  { padding-inline-start: 0.8rem; }
.u-ps-12 { padding-inline-start: 1.2rem; }
.u-ps-16 { padding-inline-start: 1.6rem; }
.u-ps-24 { padding-inline-start: 2.4rem; }
.u-ps-32 { padding-inline-start: 3.2rem; }

.u-pe-4  { padding-inline-end: 0.4rem; }
.u-pe-8  { padding-inline-end: 0.8rem; }
.u-pe-12 { padding-inline-end: 1.2rem; }
.u-pe-16 { padding-inline-end: 1.6rem; }
.u-pe-24 { padding-inline-end: 2.4rem; }
.u-pe-32 { padding-inline-end: 3.2rem; }

.u-pt-4  { padding-block-start: 0.4rem; }
.u-pt-8  { padding-block-start: 0.8rem; }
.u-pt-12 { padding-block-start: 1.2rem; }
.u-pt-16 { padding-block-start: 1.6rem; }
.u-pt-24 { padding-block-start: 2.4rem; }
.u-pt-32 { padding-block-start: 3.2rem; }

.u-pb-4  { padding-block-end: 0.4rem; }
.u-pb-8  { padding-block-end: 0.8rem; }
.u-pb-12 { padding-block-end: 1.2rem; }
.u-pb-16 { padding-block-end: 1.6rem; }
.u-pb-24 { padding-block-end: 2.4rem; }
.u-pb-32 { padding-block-end: 3.2rem; }

/* center寄せ */
.u-mx-auto { margin-inline: auto; }

.u-flex-center-x { 
  display:flex; 
  justify-content:center; 
}

.u-flex-center-xy { 
  display:flex; 
  justify-content:center; 
  align-items:center; 
}

.u-grid-center-x {
  display: grid;
  justify-items: center;
}

.u-grid-center-xy {
  display: grid;
  place-items: center;
}


/* --- Title & Text --- */
h1{
  font-family: var(--font-family-base);
  font-weight: 700;
  font-size: clamp(2.9rem, calc(2.6rem + 1.333vw), 3.8rem); /* min: 34px, max: 42px */
}

h2{
  font-family: var(--font-family-h);
  font-weight: 700;
  font-size: clamp(2.8rem, calc(2.2rem + 1.333vw), 3.5rem); /* min: 30px, max: 38px */;
  
}

h3{
  font-family: var(--font-family-h);
  font-weight: 600;
  font-size: clamp(2.6rem, calc(1.8rem + 1.333vw), 3.4rem); /* min: 26px, max: 34px */;
}

h4{
  font-family: var(--font-family-h);
  font-weight: 500;
  font-size: clamp(2.2rem, calc(1.4rem + 1.333vw), 3rem); /* min: 22px, max: 30px */;
}

h5{
  font-family: var(--font-family-h);
  font-weight: 500;
  font-size: clamp(1.8rem, calc(1rem + 1.333vw), 2.6rem); /* min: 18px, max: 26px */;
}

p {
  font-family: var(--font-family-base);
  font-weight: 300;
  font-size: clamp(1.4rem, calc(1.2rem + 0.667vw), 1.6rem); /* min: 12px, max: 16px */;
  line-height: 2.5rem;
  color: var(--basecolor);
}

/* --- Link --- */
a {
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  font-family: var(--font-family-base);
  &:hover {
    opacity: var(--hover-opacity);
    transition: var(--hover-transition);
    color: var(--hover-color);
  }
  & img:hover {
    opacity: var(--hover-opacity);
    transition: var(--hover-transition);
  }
}