@charset "utf-8";

/* ------------------------------
 smile_project single
------------------------------ */
:root {
  --width-m:  min(720px, calc(100% - var(--blank-s)));
  --white: #fff;
  --red: #D5353E;
  --blue: #0b55ac;
  --yellow: #FFBD00;
  --light-blue: #22AFE1;
  --light-gray: #F1F4F8;
  --indigo: #6610f2;
  --purple: #6f42c1;
  --pink: #ff585f;
  --orange: #e96a0f;
  --green: #008489;
  --teal: #20c997;
  --cyan: #27AEDF;
  --black: #000;
  --black-dark: #222;
  --black-medium: #444;
  --black-light: #666;
  --gray-dark: #999;
  --gray: #ccc;
  --gray-medium: #ebebeb;
  --gray-light: #f8f8f8;

  --fs-s: 0.9rem;
  --fs-m: 1rem;

  --ff-ja: "Noto Sans JP", "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;
  --ff-en: "League Spartan",  "Noto Sans JP", "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;

  --blank-xxs: 0.4rem;
  --blank-xs: 0.8rem;
  --blank-s: 1.6rem;
  --blank-m: 2.4rem;
}

/* ------------------------------
@f+
------------------------------ */
*, ::before, ::after {
  box-sizing: border-box;
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: break-all;
}
body, div, blockquote,
dl, dt, dd, ul, ol, li,
h1, h2, h3, h4, h5, h6,
hr, form, input, button,
figure, figcaption, p, pre, a, time {
  margin: 0;
  padding: 0;
}
h1, h2, h3, h4, h5, h6 {
  color: inherit;
  font-weight: 700;
  font-size: inherit;
  font-family: inherit;
  line-height: 1.2;
}
button, input,
optgroup, select, textarea {
  padding: 0;
  color: inherit;
  line-height: inherit;
}
svg, video, canvas, audio,
iframe, embed, object {
  display: block;
}
img, video, iframe {
  max-width: 100%;
  height: auto;
}
strong {
  font-weight: 700;
}
ol, ul {
  list-style: none;
}
img {
  border: none;
  vertical-align: bottom;
  max-width: 100%;
  max-height: 100%;
}
a {
  color: inherit;
  text-decoration: none;
  -webkit-transition: .4s ease;
  -o-transition: .4s ease;
  transition: .4s ease;
  max-width: 100%;
}
a:hover {
  opacity: 0.6;
  cursor: pointer;
  text-decoration: none;
}
body {
  display: flex;
  flex-direction: column;
  min-height: 100lvh;
  color: #222;
  font-weight: 400;
  font-family: var(--ff-ja);
  line-height: 1.58;
  letter-spacing: 0.02em;
  -webkit-text-size-adjust: 100%;
  font-feature-settings: "palt";
}

/* ------------------------------
header / footer
------------------------------ */
.header {
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  justify-content: space-between;
  width: 100%;
  line-height: 1;
  background: var(--light-gray);
  z-index: 10;
  & .link__project {
    display: block;
    width: fit-content;
    color: #000;
    font-weight: 700;
    font-family: var(--ff-en);
  }
  & .link__join {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: var(--fs-s);
    font-weight: 700;
    background: var(--blue);
    &::before {
      content: "";
      display: inline-block;
      width: 1.2em;
      height: 1.2em;
      margin-right: var(--blank-xxs);
      background: url("https://www.qqeng.com/lp/wp-content/uploads/2025/07/smileproject_header-icon.svg") no-repeat 50% 50%;
      background-size: contain;
    }
  }
}

.footer {
  margin-top: auto;
  & .link__project {
    display: block;
    width: var(--width-m);
    margin: 0 auto var(--blank-m);
  }
}
.footer-in {
  padding: var(--blank-m) 0;
  text-align: center;
  background: var(--blue);
  & a,
  & .m-text__copyright {
    color: #fff;
  }
  & .m-list {
    display: flex;
    align-items: center;
    justify-content: center;
    & .m-item {
      margin: 0 var(--blank-xxs);
    }
  }
  & .m-list__logo .m-item {
    & a, & img {
      display: block;
    }
    & a {
      height: 100%;
      background: #fff;
      border-radius: 0.5rem;
    }
  }
  & .m-list__link {
    & .m-item a {
      opacity: 1 !important;
      text-decoration: underline;
      &:hover {
        text-decoration: none;
      }
    }
  }
  & .m-text__copyright {
    line-height: 1;
    font-size: var(--fs-s);
    font-family: var(--ff-en);
  }
}

main {
  width: var(--width-m);
}
.nav-path ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  color: var(--black-light);
  font-size: var(--fs-s);
  & li:not(:last-of-type) {
    margin-right: 0.5em;
    &::after {
      content: "";
      position: relative;
      top: -0.1em;
      display: inline-block;
      width: 0.8em;
      height: 0.8em;
      margin-left: 0.5em;
      background: url("https://www.qqeng.com/assets2/images/common/icon_link_arrow_g.svg") no-repeat 50% 50%;
      background-size: contain;
      vertical-align: middle;
    }
  }
}

.l-main--archive,
.l-main--single {
  text-align: justify;
  & h1 {
    margin-bottom: var(--blank-xxs);
    font-size: var(--fs-xl);
  }
  & time {
    display: block;
    color: var(--black-light);
    font-size: var(--fs-s);
    font-weight: 700;
  }
  & .m-img {
    overflow: hidden;
    border-radius: 1rem;
    & a {
      display: block;
    }
  }
}

/* ------------------------------
archive
------------------------------ */
.l-main--archive {
  & .m-list {
    margin-top: var(--blank-m);
    & .m-list__item {
      margin-bottom: var(--blank-s);
      & time {
        margin: var(--blank-xs) 0 calc(var(--blank-xxs) / 2);
      }
      & .m-title {
        font-size: var(--fs-m);
        font-weight: 700;
      }
    }
  }
}

/* ------------------------------
single
------------------------------ */
.l-main--single {
  & article {
    & .m-img {
      margin: var(--blank-s) 0;
    }
    & .l-content {
      & h2 {
        margin: calc(var(--blank-m) * 1.6) 0 var(--blank-s);
        padding-bottom: var(--blank-xs);
        line-height: 1.4;
        font-size: var(--fs-l);
        border-bottom: 4px solid var(--cyan);
      }
      & h3 {
        margin: var(--blank-m) 0 var(--blank-s);
        font-size: calc(var(--fs-l) * 0.8);
      }
      & h4 {
        margin-top: var(--blank-s);
      }
      & p {
        line-height: 1.8;
        margin: 1em 0;
      }
      & a {
        text-decoration: underline;
        &:hover {
          opacity: 1;
          text-decoration: none;
        }
      }
      & figure {
        margin: var(--blank-xs) 0;
      }
    }
  }
  & .l-sns {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: calc(var(--blank-m) * 1.6) 0 var(--blank-m);
    & li {
      width: 120px;
      margin: 0 var(--blank-xxs);
      & a {
        display: block;
        padding: var(--blank-xs) 0 calc(var(--blank-xs) - 0.2em);
        line-height: 1;
        color: #fff;
        font-size: var(--fs-s);
        font-weight: 700;
        text-align: center;
        border-radius: 0.5rem;
        &::before {
          content: "";
          position: relative;
          top: -0.1em;
          display: inline-block;
          width: 1rem;
          height: 1rem;
          margin-right: var(--blank-xxs);
          background: 50% 50% no-repeat;
          background-size: contain;
          vertical-align: middle;
        }
        &.fb {
          background: #1877f2;
          &::before {
            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12.276" height="22.921" viewBox="0 0 12.276 22.921"><path id="Icon_awesome-facebook-f" data-name="Icon awesome-facebook-f" d="M13.081,12.893l.637-4.148H9.737V6.053a2.074,2.074,0,0,1,2.339-2.241h1.809V.28A22.066,22.066,0,0,0,10.674,0C7.4,0,5.253,1.987,5.253,5.583V8.745H1.609v4.148H5.253V22.921H9.737V12.893Z" transform="translate(-1.609)" fill="%23ffffff"/></svg>');
            
          }
        }
        &.tw {
          background: #000;
          &::before {
            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 1226.37" width="30" height="30"><path class="cls-1" d="M714.16,519.28L1160.89,0h-105.86l-387.89,450.89L357.33,0H0l468.49,681.82L0,1226.37h105.87l409.63-476.15,327.18,476.15h357.33l-485.86-707.09h.03ZM569.16,687.83l-47.47-67.89L144.01,79.69h162.6l304.8,435.99,47.47,67.89,396.2,566.72h-162.6l-323.31-462.45v-.03Z" fill="%23ffffff"/></svg>');
            
          }
        }
        &.line {
          background: #00b900;
          &::before {
            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 31.49"><path id="Icon_simple-line" d="M29.05,12.8c.52,0,.95,.39,.95,.87s-.42,.87-.95,.87h-2.63v1.55h2.63c.52,0,.94,.39,.94,.87s-.42,.87-.94,.87h-3.58c-.52,0-.94-.39-.94-.87v-6.57c0-.48,.42-.87,.94-.87h3.58c.52,0,.94,.39,.94,.87s-.42,.87-.94,.87h-2.64v1.55h2.63Zm-5.78,4.15c0,.37-.26,.7-.65,.82-.1,.03-.2,.04-.3,.04-.3,0-.59-.12-.76-.34l-3.66-4.57v4.05c.02,.48-.39,.88-.91,.89-.52,.02-.96-.36-.97-.84,0-.02,0-.04,0-.06v-6.57c0-.37,.26-.7,.65-.82,.09-.03,.19-.05,.29-.05,.29,0,.57,.14,.74,.35l3.69,4.59v-4.08c0-.48,.42-.87,.94-.87,.52,0,.95,.39,.95,.87h0v6.57h0Zm-8.61,0c.02,.48-.39,.88-.91,.89-.52,.02-.96-.36-.97-.84,0-.02,0-.04,0-.06v-6.57c-.02-.48,.39-.88,.91-.89,.52-.02,.96,.36,.97,.84,0,.02,0,.04,0,.06v6.57Zm-3.7,.87h-3.58c-.52,0-.94-.39-.95-.87v-6.57c0-.48,.42-.87,.95-.87s.95,.39,.95,.87h0v5.71h2.63c.52,0,.94,.39,.94,.87s-.42,.87-.94,.87m25.05-4.4C36,6.02,27.92,0,18,0S0,6.02,0,13.42c0,6.63,6.41,12.18,15.05,13.24,.59,.11,1.39,.36,1.59,.81,.14,.49,.16,.99,.06,1.49l-.25,1.41c-.07,.41-.36,1.63,1.57,.89s10.38-5.62,14.16-9.61c2.39-2.18,3.76-5.13,3.82-8.22" fill="%23fff"/></svg>');
          }
        }
      }
    }
  }
  & .post-navigation {
    margin-bottom: var(--blank-m);
    & .nav-links {
      & div a {
        position: relative;
        display: block;
      }
      & .nav-next a {
        margin-left: auto;
      }
      & .nav-previous span::before,
      & .nav-next span::after {
        content: "";
        position: relative;
        top: -0.1em;
        display: inline-block;
        width: 0.5em;
        height: 0.5em;
        border-top: solid 2px var(--blue);
        border-right: solid 2px var(--blue);
        vertical-align: middle;
      }
    }
    & .nav-previous span::before {
      margin-right: 0.25em;
      transform: rotate(-135deg);
    }
    & .nav-next span::after {
      margin-left: 0.25em;
      transform: rotate(45deg);
    }
    & .screen-reader-text {
      display: none;
    }
  }
  & .link__archive {
    display: block;
    padding: var(--blank-xs) 0;
    text-align: center;
    border-top: 1px solid var(--gray-dark);
    border-bottom: 1px solid var(--gray-dark);
  }
}

/* ------------------------------
Block Editor
------------------------------ */
.wp-block-embed.is-type-video iframe,
.wp-block-embed-youtube iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}
.c-editable-cta {
  margin: var(--blank-m) 0;
  & .c-editable-cta__lead {
    margin: 0 0 var(--blank-xxs);
    text-align: center;
  }
  & .c-editable-cta__btn a {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 3em;
    margin: 0 auto;
    color: #fff;
    font-weight: 700;
    text-align: center;
    text-decoration: none !important;
    border-radius: 1.5em;
    transition: opacity 0.2s;
    &::after {
      content: "";
      position: relative;
      top: 0.03em;
      display: inline-block;
      width: 0.5em;
      height: 0.5em;
      margin-left: 0.5em;
      border-top: solid 2px var(--white);
      border-right: solid 2px var(--white);
      vertical-align: middle;
      transform: rotate(45deg);
    }
  }
}
.c-editable-cta.pink .c-editable-cta__btn a {
  background: var(--pink);
}
.c-editable-cta.blue .c-editable-cta__btn a {
  background: var(--cyan);
}
.c-editable-cta.d-blue .c-editable-cta__btn a {
  background: var(--blue);
}
.c-editable-cta.green .c-editable-cta__btn a {
  background: var(--green);
}
.c-editable-cta.mastared .c-editable-cta__btn a {
  background: var(--orange);
}

.box-gray {
  border-radius: 0.5rem;
  margin-bottom: var(--blank-s);
  background: #eee;
  & .wp-block-heading:first-of-type {
    margin-top: 0 !important;
  }
  & p {
    margin-bottom: 0 !important;
  }
  & .wp-block-heading + p {
    margin-top: var(--blank-xxs) !important;
  }
}

@media screen and (min-width: 769px) {
  :root {
    --fs-l: 1.6rem;
    --fs-xl: 2rem;
  }
  html {
    font-size: 16px;
  }
  .is-only--sp {
    display: none;
  }
  .header {
    & .link__project {
      padding: calc(var(--blank-xs) + 0.2em) var(--blank-s) calc(var(--blank-xs) - 0.2em);
      font-size: var(--fs-l);
    }
    & .link__join {
      padding: 0 var(--blank-s);
    }
  }
  .footer {
    & .m-list__logo .m-item {
      height: 72px;
      & a {
        padding: var(--blank-xs);
      }
    }
    & .m-list__link {
      margin: var(--blank-s) 0 var(--blank-m);
    }
  }
  main {
    margin: 0 auto calc(var(--blank-m) * 3.2);
    padding-top: 100px;
  }
  .nav-path ol {
    margin-bottom: var(--blank-s);
  }
  .l-main--archive,
  .l-main--single {
    & h1 {
      line-height: 1.2;
    }
  }
  .l-main--archive .m-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    & .m-list__item {
      width: calc(50% - var(--blank-xs));
    }
  }
  .box-gray {
    padding: var(--blank-s);
  }
  .c-editable-cta {
    & .c-editable-cta__lead {
      font-size: calc(var(--fs-m) * 1.2);
    } 
    & .c-editable-cta__btn a {
      width: 80%;
      height: 3em;
      font-size: var(--fs-l);
      &:hover {
        opacity: 0.7 !important;
      }
    }
  }
  .post-navigation .nav-links {
    display: flex;
    justify-content: space-between;
    & div {
      width: calc(50% - var(--blank-xxs));
      & a {
        width: fit-content;
      }
    }
  }
}
@media screen and (max-width: 768px) {
  :root {
    --fs-l: 1.2rem;
    --fs-xl: 1.6rem;
  }
  html {
    font-size: 15px;
  }
  .is-only--pc {
    display: none;
  }
  .header {
    align-items: center;
    height: 50px;
    & .link__project {
      padding: calc(var(--blank-xxs) + 0.3em) var(--blank-xs) var(--blank-xxs);
      font-size: calc(var(--fs-m) * 1.2);
    }
    & .link__join {
      height: 100%;
      padding: 0 var(--blank-xs);
    }
  }
  .footer {
    & .m-list__logo {
      justify-content: space-between;
      padding: 0 var(--blank-xs);
    }
    & .m-list__logo .m-item {
      width: calc(33.33% - var(--blank-xxs));
      margin: 0;
      & a {
        padding: calc(var(--blank-xs) * 0.8);
      }
    }
    & .m-list__link {
      margin: var(--blank-xs) 0 var(--blank-s);
      font-size: var(--fs-s);
    }
    & .link__project {
      margin-bottom: var(--blank-xs);
    }
  }
  main {
    margin: 0 auto calc(var(--blank-m) * 2.4);
    padding-top: 70px;
  }
  .nav-path ol {
    margin-bottom: var(--blank-xs);
  }
  .l-main--archive,
  .l-main--single {
    & h1 {
      line-height: 1.4;
    }
    & article .l-content h2 {
      border-bottom-width: 2px;
    }
    & .post-navigation .nav-links div {
      margin-bottom: var(--blank-xxs);
      &.nav-next {
        text-align: right;
      }
    }
  }
  .box-gray {
    padding: calc(var(--blank-s) * 0.7);
  }

}