@charset "UTF-8";
body {
      margin: 0;
      padding: 0;
      font-family: sans-serif;
      color: #333;
      background-color: #F7F7F7;
      line-height: 1.6;
    }

    a {
      color: #0066cc;
      text-decoration: none;
    }
    a:hover {
      opacity: 0.8;
    }

    header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 20px;
      border-bottom: 1px solid #eee;
    }
    .logo {
      height: 30px;
      max-width: 100%;
    }
    .header-buttons {
      display: flex;
      gap: 10px;
    }
    .btn {
      padding: 6px 15px;
      border-radius: 4px;
      font-size: 14px;
      font-weight: bold;
      cursor: pointer;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      white-space: nowrap;
    }
    .btn-orange {
      background-color: #FF8A00;
      color: white;
      border: none;
    }
    .btn-outline {
      background-color: white;
      color: #333;
      border: 1px solid #ccc;
    }
    /* ログインボタンだけスマホでも残したいのでクラスを付与 */
    .btn-login {
      background-color: white;
      color: #333;
      border: 1px solid #ccc;
    }
    .search-icon {
      margin-right: 5px;
    }

    .footer {
      background-color: #f7f7f7;
      padding: 10px 20px;
    }

    .container {
      width: 90%;
      max-width: 1200px;
      margin: 40px auto;
      padding: 60px 120px;
      background-color: #FFF;
      margin-top: 120px;
      border-radius: 17px;
      box-shadow: 1.45px 1.45px 8.57px 0.58px rgba(0, 0, 0, 0.25);
    }

    /* 見出しエリア */
    .page-heading {
      margin-bottom: 30px;
    }
    .page-heading h1 {
      font-size: 1.8rem;
      margin: 0 0 60px 0;
    }
    .page-heading h2 {
      font-size: 1.5rem;
      margin: 0;
      color: #333;
      border-bottom: 4px solid #3CABAD;
      width: fit-content;
    }

    /* メインセクション レイアウト */
    .main-section {
      display: flex;
      flex-wrap: wrap;
      gap: 30px;
      margin-bottom: 40px;
    }
    .main-section .left-col,
    .main-section .right-col {
      flex: 1 1 300px;
      min-width: 300px;
    }
    ..left-col {
      padding: 0px 20px;
    }

    /* 左カラム（資料イメージや紹介文） */
    .left-col .thumbnail-area img {
      max-width: 100%;
      height: auto;
      display: block;
      margin: 0 auto 10px auto;
      padding-top: 20px;
    }
    .left-col .thumbnail-area p {
      font-size: 0.9rem;
      color: #666;
      line-height: 1.4;
    }

    .recommend {
      margin-top: 20px;
    }
    .recommend h3 {
      font-size: 1.1rem;
      margin-bottom: 10px;
    }
    .recommend ul {
      list-style: disc;
      padding-left: 20px;
      margin: 0;
    }
    .recommend li {
      margin-bottom: 5px;
      font-size: 0.9rem;
    }

    /* 右カラム（HubSpotフォームを埋め込む想定） */
    .right-col {
      padding: 20px;
    }
    .right-col h3 {
      margin-top: 0;
      font-size: 1rem;
      margin-bottom: 10px;
      font-weight: bold;
    }

    /* この中にHubSpotフォームが入る想定 */
    .hubspot-form-placeholder p {
      font-size: 0.9rem;
      text-align: center;
      color: #999;
    }

    /* 下部テキストエリア */
    .info-section {
      background-color: #f9f9f9;
      padding: 20px;
      border: 1px solid #ededed;
      border-radius: 4px;
    }
    .info-section h2 {
      font-size: 1.2rem;
      margin-top: 0;
      margin-bottom: 10px;
    }
    .info-section p {
      margin: 0 0 10px 0;
      font-size: 0.9rem;
    }
/* Footer */
    footer {
      background-color: #f5f5f5;
      padding: 30px 20px;
      font-size: 12px;
      color: #666;
    }
    .footer-description {
      margin-bottom: 20px;
      line-height: 1.6;
    }
    .footer-main {
      background-color: #008080;
      color: white;
      padding: 30px 20px;
    }
    .footer-logo {
      max-width: 150px;
      margin-bottom: 15px;
    }
    .footer-columns {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
    }
    .footer-column h3 {
      font-size: 14px;
      margin-bottom: 10px;
      font-weight: normal;
    }
    .footer-column ul {
      list-style: none;
    }
    .footer-column li {
      margin-bottom: 8px;
      font-size: 12px;
    }
    .footer-column a {
      color: white;
      text-decoration: none;
    }
    .app-buttons {
      display: flex;
      gap: 10px;
      margin-top: 10px;
      flex-wrap: wrap;
    }
    .app-button {
      height: 40px;
      max-width: 100%;
    }
    .footer-bottom {
      background-color: #f9f9f9;
      padding: 15px 20px;
      font-size: 12px;
    }
    .footer-links {
      display: flex;
      flex-wrap: wrap;
      margin-bottom: 10px;
    }
    .footer-links a {
      color: #666;
      text-decoration: none;
      margin-right: 15px;
      font-size: 11px;
      margin-bottom: 6px;
    }
    .persol-logo {
      text-align: right;
      margin-top: 20px;
    }
    .persol-logo img {
      height: 30px;
      max-width: 100%;
    }
    .persol-slogan {
      text-align: right;
      font-size: 12px;
      color: #666;
    }
    .resource-icon {
      vertical-align: text-bottom;
    }
    .thumbnail-area .image-row {
      display: flex;       /* 横並びにする */
      gap: 10px;           /* 画像間にスペース（不要の場合は削除可） */
      margin-top: 20px;    /* 上の画像との間に余白を追加 */
    }

    .thumbnail-area .image-row img {
      width: calc(33.333% - 6.66px); /* gapを考慮した3分割（gap 10pxの場合の例） */
      max-width: 100%;     /* 画像の横幅サイズを保つ */
      height: auto;        /* アスペクト比を維持 */
      display: block;
    }
    .hs-button primary large{
      width: 100%
    }


    /*sharefullから引用*/
    .navbar2.green {
      background-color: white;
      transition: background-color 0.5s linear;
      box-shadow: 0px 2px 4px 4px rgba(0, 0, 0, 0.2);
    }
    .navbar2 {
      display: grid;
      grid-template-areas: "navbar-left navbar-right";
      z-index: 1000;
      width: 100%;
      height: 60px;
      grid-template-columns: 200px 1fr;
      align-items: center;
      position: fixed;
      top: 0;
    }
    nav {
     unicode-bidi: isolate;
    }
    .navbar2 .logo img {
     width: 130px;
    }
    .navbar2 .logo {
      grid-area: navbar-left;
      padding-left: 20px;
    }
    .navbar2.green .action button.contact {
      background-color: #ec6800;
      background-image: linear-gradient(to right, #FCA40D, #F76C19);
      border-top: 1px solid #f8e58c;
      border-bottom: 1px solid #6c2c2f;
      font-size: 12px;
      border-radius: 8px;
      padding: 8px 40px;
      width: 100%;
      color: #fff;
      font-weight: bold;
    }
    .navbar2.green .action div {
      margin: 4px;
      align-self: center;
    }
    .navbar2.green .action button.download {
      background-color: #fff;
      border: 1px solid #999;
      border-top: 1px solid #4A4A4A;
      border-bottom: 1px solid #4A4A4A;
      color: #4A4A4A;
      font-size: 10px;
      border-radius: 8px;
      padding: 8px 40px;
      width: 100%;
      font-weight: bold;
    }
    .navbar2.green .action button.login {
      font-size: 12px;
      font-weight: bold;
      border-radius: 12px;
      padding: 8px 20px;
      box-shadow: none;
      margin-right: 4px;
      color: #4A4A4A;
      background-color: #eec500;
      border: 2px solid #eec500;
    }
      .navbar2.green .action {
      display: grid;
      grid-template-columns: 1fr 200px 200px 140px;
    }
    .logo {
      height: 45px;
      max-width: 100%;
    }
    .navbar2.green .action div.login-container {
      text-align: right;
    }
    button {
      border: none;
      display: inline-block;
      text-align: center;
      text-decoration: none;
      box-sizing: border-box;
      box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.2);
    }
    .row.txt-row {
      padding: 20px 60px;
      background-color: #f3efe7;
      font-family: "Noto Sans Japanese", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
      font-style: normal;
      font-weight: 400;
      font-size: 14px;
      letter-spacing: 0.1px;
      line-height: 2.4rem;
      color: #4A4A4A;
    }
    .row.txt-row h2 {
      font-size: 14px;
      margin: 10px 0 0 0;
    }
    .row.txt-row p {
      line-height: 1.3rem;
      color: #999;
      margin: 14px 0px;
    }
    #sharefull-footer {
      background-color: #207B7D;
      color: #fff;
      display: grid;
      grid-template-columns: 240px 1fr;
    }
    #sharefull-footer .logo .action img {
      height: 30px;
      width: auto;
    }
    #sharefull-footer a {
      color: #fff;
    }
    #sharefull-footer .logo .action {
      display: flex;
    }
    #sharefull-footer .logo img {
      width: 194px; 
    }
    #sharefull-footer .list {
      display: flex;
    }
    #sharefull-footer ul {
      list-style-type: none;
      font-size: 11px;
    }
    #sharefull-footer .copyright {
      grid-column-start: 1;
      grid-column-end: 3;
      justify-self: center;
    }
    #sharefull-footer .list {
      line-height: 2.4rem;
      list-style-type: none;
    }
    #sharefull-footer ul {
      font-size: 11px;
      padding-left: 40px;
    }
    #sharefull-footer a {
      text-decoration: none;
    }
    #persol-footer .l-footer__middle {
      padding: 32px 0 48px;
      background-color: #ECECEA;
    }
    #persol-footer .l-footer__bottom {
        padding: 30px 0;
        background-color: #97999B;
    }
    #persol-footer .l-footer__body {
        max-width: 1288px;
        margin: 0 auto;
        padding: 0 40px;
    }
    #persol-footer .l-footer__middle .l-footer__flex {
        display: flex;
        align-items: center;
        margin-bottom: 32px;
    }
    #persol-footer .l-footer__middle .l-footer__heading {
        display: flex;
        align-items: center;
        flex-basis: 110px;
        font-size: 0.8rem;
    }
    #persol-footer .l-footer__middle .l-footer__wrapper {
        flex: 1;
        padding-left: 13px;
        box-shadow: inset 1px 0 0 0 #D9D9D6;
    }
    #persol-footer .l-footer__middle .l-footer__wrapper .l-footer__list {
        position: relative;
        display: flex;
        flex-wrap: wrap;
    }
    #persol-footer ol, #persol-footer ul {
        list-style: none;
    }
    #persol-footer .l-footer__middle .l-footer__wrapper .l-footer__list .l-footer__item {
        height: 20px;
        padding: 0 12px;
        border-right: 1px solid #D9D9D6;
    }
    #persol-footer .l-footer__middle .l-footer__wrapper .l-footer__list .l-footer__link {
        display: inline-block;
        vertical-align: top;
        position: relative;
        z-index: 0;
        color: #53565A;
        font-size: 0.8rem;
        line-height: 20px;
        transition: opacity 0.3s;
    }
    #persol-footer .l-footer__middle .l-footer__button {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        flex-basis: 173px;
    }
    #persol-footer .l-footer__middle .l-footer__button .l-footer__link {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 144px;
        height: 34px;
        border-radius: 20px;
        background-color: #FFFFFF;
        color: #53565A;
        font-size: 0.8rem;
        transition: opacity 0.3s;
    }
    #persol-footer .l-footer__middle .l-footer__button .l-footer__link::before {
        display: block;
        width: 8px;
        height: 13px;
        margin-right: 4px;
        background: url(https://sharefull.com/wp-content/themes/sharefull/img/icon_arrow_black.svg) no-repeat 100% 50% / 13px;
        content: "";
    }
    #persol-footer .l-footer__bottom .l-footer__flex {
        display: flex;
        justify-content: space-between;
    }
    #persol-footer div{
        margin: 0;
        padding: 0;
        border: 0;
        vertical-align: baseline;
    }
    #persol-footer .l-footer__bottom .l-footer__flex .l-footer__link {
        display: block;
        transition: opacity 0.3s;
    }
    #persol-footer img {
        display: block;
        max-width: 100%;
    }
    #persol-footer .l-footer__bottom .l-footer__flex .l-footer__item--vision {
        padding-top: 6px;
    }
    #persol-footer .l-footer__bottom .l-footer__flex .l-footer__item--vision .l-footer__media {
        pointer-events: none;
    }
    #persol-footer.l-footer{
        padding: 0px;
    }
    #persol-footer a {
        text-decoration: none;
        display: inline-block;
        vertical-align: top;
        position: relative;
        z-index: 0;
        color: #53565A;
        font-size: 0.8rem;
        line-height: 20px;
        transition: opacity 0.3s;
    }
    .fa-envelope:before {
        content: "\f0e0";
    }
    .far {
        font-weight: 400;
    }
    .fa, .fab, .fal, .far, .fas {
        display: inline-block;
        font-style: normal;
        font-variant: normal;
        text-rendering: auto;
        line-height: 1;
    }
    i {
        margin-right: 10px;
    }    
    .fa, .far, .fas {
        font-family: "Font Awesome 5 Free";
    }
    small {
      font-size: smaller;
    }
    #sharefull-footer .logo {
      padding: 20px;
    }
    #persol-footer .l-footer__middle .l-footer__wrapper .l-footer__list .l-footer__link {
      display: inline-block;
      vertical-align: top;
      position: relative;
      z-index: 0;
      color: #53565A;
      font-size: 0.8rem;
      line-height: 20px;
      transition: opacity 0.3s;
    }


    /* =====================
       MEDIA QUERIES
       ====================== */
    @media (max-width: 992px) {
      .resource-grid {
        grid-template-columns: repeat(3, 1fr);
      }
    }
    @media (max-width: 768px) {
      .action2
       {
       display: none;
      }
      .action3
       {
      display: none;
      }
      .navbar2.green .action {
        grid-template-columns: 1fr;
      }
      .resource-grid {
        grid-template-columns: repeat(2, 1fr);
      }
      #sharefull-footer {
        grid-column-start: 1;
        grid-column-end: 1;
        grid-template-columns: 1fr;
      }
      #sharefull-footer .logo {
        order: 2;
        justify-self: center;
      }
      #sharefull-footer .list {
        display: block;
      }
      #sharefull-footer .copyright {
        order: 4;
        grid-column-start: 1 !important;
        grid-column-end: 1 !important;
        justify-self: center;
        padding-bottom: 60px;
     }
      footer {
        padding: 0px ;
      }
      #persol-footer .l-footer__middle {
          padding: 40px 0 48px;
      }
      #persol-footer .l-footer__body {
          padding: 0 20px;
      }
      #persol-footer .l-footer__middle .l-footer__flex {
          display: block;
          margin-bottom: 40px;
      }
      #persol-footer .l-footer__middle .l-footer__heading {
          display: block;
          margin-bottom: 16px;
          padding: 0;
          font-size: 1.4rem;
      }
      #persol-footer .l-footer__middle .l-footer__wrapper {
          display: block;
          padding: 0;
          box-shadow: none;
      }
      #persol-footer .l-footer__middle .l-footer__wrapper .l-footer__list:not(.l-footer__list--float):not(.l-footer__list--float-last) {
          justify-content: space-between;
          margin: 0;
      }
      #persol-footer .l-footer__middle .l-footer__wrapper .l-footer__list:not(.l-footer__list--float):not(.l-footer__list--float-last) .l-footer__item {
          width: calc(50% - 10px);
          height: auto;
          margin-bottom: -1px;
          padding: 0;
          border-right: none;
          border-top: 1px solid #D9D9D6;
          border-bottom: 1px solid #D9D9D6;
      }
      #persol-footer .l-footer__middle .l-footer__wrapper .l-footer__list:not(.l-footer__list--float):not(.l-footer__list--float-last) .l-footer__link {
          display: flex;
          align-items: center;
          min-height: 46px;
          line-height: 1.5;
      }
      #persol-footer .l-footer__middle .l-footer__button {
          display: block;
          margin-top: 25px;
      }
      #persol-footer .l-footer__middle .l-footer__button .l-footer__link {
          width: 100%;
      }
      #persol-footer .l-footer__middle .l-footer__wrapper .l-footer__title {
        float: none;
        width: auto;
        margin-bottom: 8px;
        padding: 16px 0 0;
        border-top: 1px solid #D9D9D6;
        line-height: inherit;
      }
      #persol-footer .l-footer__middle .l-footer__wrapper .l-footer__list--float .l-footer__item {
        margin-bottom: 8px;
      }
      #persol-footer .l-footer {
        letter-spacing: 0.1px;
        line-height: 2.4rem;
        color: #4A4A4A;
      }
      #persol-footer html, #persol-footer body, #persol-footer div, #persol-footer span, #persol-footer applet, #persol-footer object, #persol-footer iframe, #persol-footer h1, #persol-footer h2, #persol-footer h3, #persol-footer h4, #persol-footer h5, #persol-footer h6, #persol-footer p, #persol-footer blockquote, #persol-footer pre, #persol-footer a, #persol-footer abbr, #persol-footer acronym, #persol-footer address, #persol-footer big, #persol-footer cite, #persol-footer code, #persol-footer del, #persol-footer dfn, #persol-footer em, #persol-footer img, #persol-footer ins, #persol-footer kbd, #persol-footer q, #persol-footer s, #persol-footer samp, #persol-footer small, #persol-footer strike, #persol-footer strong, #persol-footer sub, #persol-footer sup, #persol-footer tt, #persol-footer var, #persol-footer b, #persol-footer u, #persol-footer i, #persol-footer center, #persol-footer dl, #persol-footer dt, #persol-footer dd, #persol-footer ol, #persol-footer ul, #persol-footer li, #persol-footer fieldset, #persol-footer form, #persol-footer label, #persol-footer legend, #persol-footer table, #persol-footer caption, #persol-footer tbody, #persol-footer tfoot, #persol-footer thead, #persol-footer tr, #persol-footer th, #persol-footer td, #persol-footer article, #persol-footer aside, #persol-footer canvas, #persol-footer details, #persol-footer embed, #persol-footer figure, #persol-footer figcaption, #persol-footer footer, #persol-footer header, #persol-footer hgroup, #persol-footer menu, #persol-footer nav, #persol-footer output, #persol-footer ruby, #persol-footer section, #persol-footer summary, #persol-footer time, #persol-footer mark, #persol-footer audio, #persol-footer video {
        margin: 0;
        border: 0;
        vertical-align: baseline;
      }
      #persol-footer .l-footer__bottom {
          padding: 24px 0;
      }
      #persol-footer .l-footer__body {
          padding: 0 20px;
      }
      #persol-footer .l-footer__bottom .l-footer__flex .l-footer__item--logo {
          width: 108px;
      }
      #persol-footer .l-footer__bottom .l-footer__flex .l-footer__item--vision {
          width: 136px;
          padding-top: 4px;
      }
      .section-title {
          border-bottom: 2px solid #3CABAD;
      }
      .navbar2.green .action div {
          margin: 0px;
      }
      .main-section {
        flex-direction: column;
      }
      .container {
        width: auto;
        margin: 40px 10px;
        padding: 40px 15px;
        background-color: #FFF;
        margin-top: 100px;
        border-radius: 17px;
      }
      .main-section .left-col, .main-section .right-col {
        flex: 1 1 300px;
        min-width: 200px;
      }      
    }

    /* ▼ スマホ対応: 600px以下でボタンの表示切り替え、ヘッダー配置変更など ▼ */
    @media (max-width: 600px) {
      header {
        flex-direction: column;
        align-items: flex-start;
      }
      .header-buttons {
        margin-top: 10px;
      }
      /* ログインボタンだけ表示し、他のボタンは非表示にする */
      .header-buttons .btn-orange,
      .header-buttons .btn-outline:not(.btn-login) {
        display: none;
      }
      .mobile-scroll-buttons {
        display: flex;
        padding: 30px 0px;
      }
      .page-title {
        font-size: 20px;
      }
      .footer-columns {
        grid-template-columns: 1fr; 
      }
      #sharefull-footer .logo  {
        padding: 20px;
        height: auto;
      }
      footer {
        padding: 0px ;
      }
      .page-title {
        margin-bottom: 0px;
      }
      .break::after {
        content: "\A";
        white-space: pre;
      }
      .title-break{
        text-decoration: underline #FFC26D;
        text-decoration-thickness: 6px;
      }
      .resource-section {
          padding-top: 70px;
      }
    }