@charset "UTF-8";

html {
    position: relative;
    font-size: 62.5%;
    color:#333333;
    scroll-behavior: smooth;
}

img {
    width: 100%;
}

/*フォント */
    body {
        font-family: "Zen Kaku Gothic New", sans-serif;
        display: flex;
        flex-direction: column;
        min-height: 100vh;
    }

    p {
        font-size: 1.6rem;
        line-height: 1.8;
        margin-bottom: 16px;
    }
    h3 {    
        font-size: 2.4rem;
        margin-bottom: 16px;
        font-weight: 500;
    }

    h4 {
        font-size: 2rem;
        margin-bottom: 16px;
        font-weight: 500;
    }

    a {
        color: #333333;
        text-decoration: none;
        font-size: 1.8rem;
        font-weight: 600;
    }

    ul {
        list-style-type: none;
    }

    li {
        font-size: 1.6rem;
        margin-bottom: 16px;
    }

    table {
        font-size: 1.6rem;
    }

    th {
        font-weight: 400;
    }

    button {
        font-size: 1.8rem;
        font-weight: 600;
    }

.l-article {
    padding: 80px 0 80px;
    max-width: 1080px;
    margin:auto;
    width:100%;
}

.js-fix {
    overflow: hidden;
}

main {
    overflow: hidden;
}

/*===================================
  タイトル
===================================*/
.c-title {/*日本語*/
    display: block;
    font-size: 2.4rem;
    margin-bottom: 40px;
    font-weight: 500;
}

.c-title span{/*英語*/
    font-size: 3.2rem;
    display: block;
    font-weight: 600;
}

.p-blog .c-title span,
.p-contact .c-title span{/*英語の色：白*/
    color: #fff;
}

.p-about .c-title span {/*英語の色：グレー*/
    color: #EEE7DD;
}

.p-contact .c-title {/*日本語の色：白*/
    color: #fff;
}

.c-title_con {/*コンサルティング日本語*/
    display: inline-block;
    font-size: 3.2rem;
    margin-bottom: 60px;
    font-weight: 500;
    position: relative;       /* 擬似要素の基準に */
}

.c-title_con span{/*コンサルティング英語*/
    font-size: 2.4rem;
    display: block;
    font-weight: 600;
    color:#61BAAE;
}

.c-title_con::after {
  content: "";
  position: absolute;
  left: 50%;                /* 親要素幅の中央 */
  bottom: -8px;             /* 見出しの真下に */
  transform: translateX(-50%);
  width: 30px;              /* ラインの長さ */
  height: 3px;              /* ラインの太さ */
  background-color: #61BAAE;/* ラインの色 */
}

.c-title-img {/*英語画像*/
    height: 53px;
    width: auto;
}


.c-title--h2 {
    font-size: 3.2rem;
    line-height: 57.6px;
    font-weight: 500;
}

.c-title__big--wh {
    font-size: 11.5rem;
    font-weight: 400;
    color: #fff;
}

.c-title__big {
    font-size: 11.5rem;
    font-weight: 400;
    color: #EEE7DD;
}

/*===================================
  ページヘッダー
===================================*/
.c-pageheader {
    padding: 100px 0 32px;
    max-width: 1080px;
    margin:auto;
    width:100%;
}

.c-pagetitle span{
    font-size: 2.4rem;
    font-weight: 600;
    margin-right: 32px;
}

.c-pagetitle {
    font-size: 3.2rem;
    font-weight: 600;
}

/*===================================
  パンくず
===================================*/
.c-breadcrumb {
    padding: 20px 0 20px;
    max-width: 1080px;
    margin:auto;
    width:100%;
    font-size: 1.4rem;

}

.c-breadcrumb span {
    font-weight: 600;
}

.c-breadcrumb a {
    text-decoration:underline;
    font-size: 1.4rem;
    font-weight: 400;
}

.c-breadcrumb a:hover {
    color: #ADCF04;
    text-decoration:none;
    transition: transform 0.3s ease;
}

/*===================================
  ボタン
===================================*/
.c-button {
    display: flex;
    justify-content: center;
}

.c-button a {
    color: #333333;
    padding: 20px 40px;
    text-decoration: none;
    font-size: 1.8rem;
    font-weight: bold;
    display: flex;
    align-items: center;
    background-color: #fff;
}

.c-button a:hover {
    color: #ADCF04;
}

/* 矢印ボタン */
.c-button_arow {
  display: inline-flex;
  align-items: center;     /* テキストと矢印を縦中央揃え */
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  align-self: flex-end; 
}

.c-button_arow:hover {
  color: #ADCF04;         /* ホバー時にテキストを緑に */
}

.c-button_arow img {
  display: block;
  width: 66px;             /* 矢印の横幅を固定 */
  margin-left: 0.5em;      /* テキストとのスペース */
  transition: transform 0.3s ease;
}

.c-button_arow:hover img {
  transform: translateX(10px);  /* ホバーで右に10px移動 */
}

/* テキストリンク */
.c-button--text {
    display: flex;
    justify-content: flex-end;
}

.c-button--text a {
    color: #333333;
    font-size: 1.8rem;
    font-weight: bold;
    text-decoration: underline;
}

.c-button--text a:hover {
    color: #ADCF04;
    text-decoration: none;
    transition: transform 0.3s ease;
}

.c-button-ws a { /* デジたまボタン */
    display: inline-block;
    background-color: #3EB489;
    font-size:2rem;
    font-weight: 600;
    color: #fff;
    padding: 16px 32px;
    border-radius: 50px;
}

.c-button-ws a:hover { /* デジたまボタン */
    background-color: #ADCF04;
    transition: transform 0.3s ease;
}

/*===================================
  表
===================================*/
/* 表 */
.c-dataTable {
    width: 100%;
    border-collapse: collapse;
}
.c-dataTable__header {
    background: #F1F1F1;
    padding: 12px 24px;
    text-align: left;
    font-weight: 600;
    border: 1px solid #D9D9D9;
}

.c-dataTable__cell {
    background-color: #fff;
    padding: 12px;
    border: 1px solid #D9D9D9;
}

/* アバウト */
.c-dataTable__header--about {
    font-weight: 600;
    text-align: left;
    padding: 16px 80px 16px 0;
    border-bottom: 1px solid #D9D9D9;
}

.c-dataTable__cell--about {
    border-bottom: 1px solid #D9D9D9;
    padding: 16px 0;
}


/*===================================

===================================*/
.link-with-icon {
    display: inline-flex; /* テキストとアイコンを横並びに */
    align-items: center; /* テキストとアイコンを垂直に中央揃え */
    color: inherit; /* テキストの色を継承 */
}

.link-with-icon img {
    width: 21px; /* アイコンの幅を指定（必要に応じて調整） */
    height: auto; /* 高さを自動調整 */
    margin-left: 5px; /* テキストとアイコンの間に少し余白を追加 */
}

.link-with-icon:hover img {
    filter: invert(38%) sepia(71%) saturate(598%) hue-rotate(31deg) brightness(96%) contrast(91%);
}

/*===================================
フェードアップ
===================================*/
/* fadeUp */

.fadeUp{
    animation-name:fadeUpAnime;
    animation-duration:1s;
    animation-fill-mode:forwards;
    opacity:0;
    }

@keyframes fadeUpAnime{
    from {
    opacity: 0;
    transform: translateY(100px);
    }

    to {
    opacity: 1;
    transform: translateY(0);
    }
}
    
/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
    
.fadeUpTrigger{
    opacity: 0;
}
/*===================================
フェードイン
===================================*/
/* フェードインアニメーション */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(0px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 初期状態（非表示） */
.fadeInTrigger {
    opacity: 0;
}

/*===================================
  ローディング画面
===================================
.loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: #fff;
    display: flex;
    justify-content: center; 
    align-items: center; 
    z-index: 9999;
    opacity: 1;
    transition: opacity 1s ease-out;
}

/* ロゴのスタイル 
.loading-logo {
    width: 300px; 
    height: auto;
    opacity: 0;
    animation: fadeInScale 1.5s ease-in-out forwards;
}

/* ロゴのフェードイン＆拡大 
@keyframes fadeInScale {
    0% {
        opacity: 0;
        transform: scale(0.9);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* フェードアウトアニメーション 
.loading.fade-out {
    opacity: 0;
    pointer-events: none;
}

/*===================================
  Header
===================================*/
/* ヘッダー全体のレイアウト */
.l-header__pc {
    display: flex; /* 横並び */
    align-items: center; /* 高さを中央揃え */
    justify-content: space-between; /* 左右に分割 */
    position: fixed;
    left: 0;
    width: 100%;
    padding: 10px 60px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.9) );
    z-index: 9999;
}

/* ロゴの配置 */
.l-header__pc__logo {
    width: 170px;
}

/* ナビゲーションの配置 */
.l-header__nav {
    display: flex;
    justify-content: flex-end; /* 右寄せ */
}

/* ナビゲーションメニュー */
.l-header__nav ul {
    display: flex;
    align-items: center;
}

.l-header__nav__menu .nav-jp{ /* ナビゲーション日本語 */
    display: none;
}

.l-header__nav__menu .nav-en {/* ナビゲーション英語 */
    font-size: 1.8rem;
    font-weight: 500;
    display: inline;
    color: #333333;
    margin-right: 40px;
}

/*===================================
   MV
===================================*/
.p-top__mv {
    max-width: 1100px;
    margin: auto;
    width: 100%;
    position: relative;
}

/* 流れ星イラスト */
.p-top__mv::before {
  content: "";
  position: absolute;
  /* コンテナの上から 50px、右から 370px */
  top: 60px;
  right: 370px;
  width: 104px;          /* イラストの実寸に合わせる */
  height: 104px;
  background: url('/image/line_meteor.webp') no-repeat center/contain;
  z-index: 1;
}

/* 土星イラスト */
.p-top__mv::after {
  content: "";
  position: absolute;
  /* コンテナの上から 120px、左から 360px */
  top: 160px;
  right: 100px;
  width: 104px;          /* イラストの実寸に合わせる */
  height: 96px;
  background: url('/image/line_saturn.webp') no-repeat center/contain;
}

.p-top__mv__content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative; /* absolute用 */
  height: 100vh;
}

.p-top__mv__heading {
    flex: 0 0 40%;         /* 幅を 40% に固定 */
    position: relative;
    top: -10%; 
    display: flex;
    align-items: center;
}

.p-top__mv__heading h1 {
  font-size: 4.8rem;
  font-weight: 500;
  line-height: 1.5;
  margin: 0;
}

.p-top__mv__caption {
  background-color: #EEE7DD;
  position: absolute;
  bottom: -10%;
  width: 50%; 
  height: 280px;
  box-sizing: border-box;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center; 
  padding-bottom: 40px;
}

.p-top__mv__caption::before {/* 背景左端 */
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -9999px;
  right: 100%;
  background-color: #EEE7DD;
  z-index: -1; /* 背景だけ裏に回す */
}

.p-top__mv__img {
    flex: 0 0 60%;
    height: 100vh;
    background-image: url('/image/top_hero.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/*===================================
   Digitama_banner
===================================*/
.p-digitama .l-article {
    padding: 150px 0 80px;;
}

.p-digitama__content {
    display: flex;
    margin: auto;
    justify-content:space-between;
    align-items: center; 
    width: 850px;
    background-color: #E4E6E5;
    border-top: 10px solid #90C0AF;
    border-bottom: 10px solid #90C0AF;
}

.p-digitama__content > img {
  width: 336px;
}

.p-digitama__content__text {
    padding: 32px;
    display: flex;
    flex-direction: column;
}

.p-digitama__content__text span {
    font-weight: bold;
    color: #3EB489;
}

/*===================================
   Profile
===================================*/
.p-profile .l-article{
    padding: 0;
    position: relative;
}

/* 電球アイコン */
.p-profile .l-article::before {
  content: "";
  position: absolute;
  /* コンテナの上から 0x、左から 0 */
  top: 0;
  left: 0;
  width: 62px;
  height: 115px;
  background: url('/image/line_right.webp') no-repeat center/contain;
}

/* もう１つのライン */
.p-profile .l-article::after {
  content: "";
  position: absolute;
  /* コンテナの上から 120px、左から 360px */
  top: 120px;
  left: 360px;
  width: 66px;
  height: 50px;
  background: url('/image/line_line.webp') no-repeat center/contain;
}

.p-profile__content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 1;
}

.p-profile__text{
    width: 448px;
    display: flex;
    flex-direction: column;
}

.p-profile__text h2 {
    margin-bottom: 32px;
}

.p-profile__text .c-button_arow {
    align-self: flex-end;
}

.p-profile__img {
    position: relative;
    width: 622px;
    margin-left: auto;
    transform: translateX(calc((100vw - 100%) / 4));

}

.p-profile__img::before {
  /* 既存の背景ずらし */
    content: "";
    position: absolute;
    top:10%;
    bottom: 0;
    left: -5vw;
    width:  110vw;
    background-color: #EEE7DD;
    z-index: -1;
}

/*===================================
   Service
===================================*/
.p-service {
    background-color: #EEE7DD;
    padding-bottom: 40px;
}

.p-service .l-article {
     position: relative;
}

/* PCイラスト */
.p-service .l-article::before {
  content: "";
  position: absolute;
  /* コンテナの上から 80px、左から 110px */
  top: 80px;
  left: 110px;
  width: 162px;          /* イラストの実寸に合わせる */
  height: 131px;
  background: url('/image/line_pc-b.webp') no-repeat center/contain;
}

.p-service_title {
    align-items: center;
    text-align: center;
}

.p-service_content {
    display: flex;
    margin-top: 40px;
    gap: 40px; 
}

.p-service_content__item {
    display: flex;  
    flex-direction: column; 
    background-color: #fff;
    border-radius: 20px;
    padding: 24px;
    box-sizing: border-box;
}

.p-service_content__item__en {
    color: #EEE7DD;
    font-size: 2.4rem;
    font-weight: bold;
    margin:16px 0 0 0;
}

.p-service_content__item__en,
.p-service_content__item h3 {
  text-align: center;
}

.p-service_content__item .c-button_arow {
  align-self: flex-end;
}

/*===================================
   bg
===================================*/
/* 画像のはみ出しを防ぐラッパー */
.p-top__bg__wrapper {
  width: 100%;
  height: 500px;      /* .p-top__bg と同じ高さ */
  overflow: hidden;
  position: relative;
}

/* 上半分にだけベージュを敷く */
.p-top__bg__wrapper::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;             /* 上半分だけ */
  background-color: #EEE7DD;
  z-index: 0;
}

/* 初期状態（拡大して透明） */
.p-top__bg {
  position: relative;      /* ::before の下に敷くため */
  z-index: 1;              /* 背景色より前面 */
  background-image: url('/image/top_bg.webp');
  background-size: cover;
  background-position: center;
  height: 500px;
  margin: 0 auto;
  width: 90%;
  transform: scale(1.1);
  opacity: 0;
  transition: transform 1.5s ease-out, opacity 1.5s ease-out;
}

/* 表示されたら通常サイズにフェードイン */
.p-top__bg.active {
  transform: scale(1);
  opacity: 1;
}

/*===================================
   Pro bono
===================================*/
.p-probono .l-article {
  position: relative;
}

/* ヤシの木イラスト */
.p-probono .l-article::before {
  content: "";
  position: absolute;
  /* コンテナの上から 140px、右から 60px */
  top: 140px;
  right: 60px;
  width: 226px;          /* イラストの実寸に合わせる */
  height: 260px;
  background: url('/image/line_yashi.webp') no-repeat center/contain;
}

.p-probono .l-article{
    padding-bottom: 0px;
}

.p-probono__caption {
    font-size: 2rem;
    font-weight: 500;
    margin-bottom: 60px;
}

/* Pro bono の基本レイアウト */
.p-probono__content {
    display: flex;
    justify-content: space-between;
    position: relative;
    margin-bottom: 120px;
    align-items:center;
    z-index: 1;
}

.p-probono__content__img {
    width: 50%;
    height: auto;
    position: relative;
}

.p-probono__container {
  position: relative;
  width: 50%;
  padding: 0 60px 32px 60px;
}

.p-probono__container::after {
  content: "";
  position: absolute;
  top: calc(100%);
  left: 0;             /* 左端から */
  width: 150px;         /* 線の長さはお好みで調整 */
  height: 1px;         /* 線の太さ */
  background-color: #333333;
}

/* 反転レイアウトの適用 */
.p-probono__content.--rev {
    flex-direction: row-reverse;
}

.p-probono__content.--rev .p-probono__container::after {
  /* 左寄せを無効にして右寄せに */
  left: auto;
  right: 0;
}

/*===================================
    Blog
===================================*/
.p-blog {
    background-color: #EEE7DD;
}

.p-blog .l-article {
  position: relative;
}

.p-blog .c-title > span {
  position: relative;
  display: block;
}
/* span の右上にイラストを絶対配置 */
.p-blog .c-title > span::after {
    content: "";
    position: absolute;
    top: -45px;
    right: 380px;
    width: 120px; 
    height: 125px;
    background: url('/image/line_hand.webp') no-repeat center/contain;
    pointer-events: none; 
    z-index: 1;
}

.p-blog .c-title .c-title--en--wh{
    display: flex;
    flex-direction: column; /* 縦方向に配置 */
    justify-content: center;
    align-items: center;
}

.p-blog .c-title--en--wh,
.p-blog .c-title {
  text-align: center;
}

.p-blog .c-circle {
    display: block;
    text-align: center;
}

.p-blog__text {
    font-size: 1.6rem; 
    text-align: center; 
}

#post-list {
    display: flex;
    justify-content: space-between; /* 各要素の間にスペースを均等に配置 */
    gap: 20px;
    flex-wrap: wrap; /* 画面サイズが小さくなったときに要素が折り返されるように */
    padding-bottom: 40px;
}

.post-item {
    display: block; /* <a>タグをブロック要素に */
    background-color: #fff; /* 背景色を白に */
    overflow: hidden;
    border-radius: 20px;
    width: 30%; /* 各アイテムの幅を30%に設定 */
    text-decoration: none; /* リンクの下線を消す */
    color: inherit; /* リンクの色を継承 */
}

.post-item:hover {
    color: #849E05;
}

.post-content {
    padding: 23px;
    text-align: left;
}

.post-content h2 {
    margin: 10px 0;
    font-size: 1.8rem;
}

.post-content p {
    margin: 0;
    color: #555;
}

.post-date {
    font-size: 1.6rem;
    color: #989898;
}

.post-thumbnail {
    width: 100%;
    height: 200px; /* サムネイルの高さを固定 */
    overflow: hidden; /* 画像がはみ出さないようにする */
    box-sizing: border-box;
    padding: 16px 16px 0;
}

.post-thumbnail img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover; /* 画像を中央にフィットさせる */
    object-position: center; /* 画像の中心を表示 */
    border-radius: 15px;
}


/*===================================
    About
===================================*/
.p-about {
  position: relative;        /* 疑似要素の基準に */
  background-color: #EEE7DD;
  padding-bottom: 80px;
}

.p-about .l-article {
  position: relative;
}

/* しろごまイラスト */
.p-about .l-article::before {
  content: "";
  position: absolute;
  /* コンテナの上から 160px、左から 325px */
  top: 160px;
  left: 380px;
  width: 120px;          /* イラストの実寸に合わせる */
  height: 114px;
  background: url('/image/line_shirogoma.webp') no-repeat center/contain;
}

/*  左80%だけ白く塗る疑似要素 */
.p-about::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 70%;        /* ここを白い “コの字” の幅に */
  bottom: 80px;
  background-color: #fff;
  z-index: 0;
}

.p-about__content {
  position: relative; /* 疑似要素の上に出すため */
  z-index: 1;
  display: flex;      /* 既存通り */
  justify-content: space-between;
  align-items: center;
}

.p-about__content__list .c-dataTable {
    width: 120%;
}

.p-about__content__img {
    width: 492px;
    transform: translateX(calc((100vw - 100%) / 10));
}

/*===================================
    Contact
===================================*/
.p-contact {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;  
    position: relative;
    background-color: #ADCF04;
    object-fit: cover;
    background-position: top center;
    padding-top: 100px;
}

.p-contact__note{
    color: #fff;
    text-align: center;
}

.c-button a:hover .p-contact__content__btn {
    content: url('/image/mail_gr.png'); /* ホバー時に緑色の画像に置き換える */
    transition: all .2s;
}

/*===================================
  404 error
===================================*/
.l-header__pc--404 {
    display: flex;
    position: fixed;
    width: 100%;
    justify-content: flex-end; /* 右端に配置 */
    padding: 20px 60px 20px 60px; /* ロゴに左の余白を付ける */
    align-items: center;
    z-index: 2;
    background-color: rgba(255, 255, 255);
}

.p-404 {
    background-color: #ADCF04;
    background-size: cover;
    min-height: 100vh;
}

.p-404__content {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 10vw;
}

.p-404__content__text{
    margin: 0 50px;
}

.p-404__content__img{
    margin: 0 50px;
}

.p-404__content__img img{
    width: 300px;
}

.p-404__content__text h2{
    font-size: 14rem;
    color:#fff;
}

.p-404__content__text p{
    color:#fff;
}

.p-404__sitetitle__copy{
    position: absolute;
	bottom: 0;
    background-color: #fff;
    text-align: center;
    margin-bottom :0px;
    padding: 15px 0;
    width: 100%;
}


/*===================================
  Footer
===================================*/
.l-footer {
    background-color: #ADCF04;
}

.l-footer__nav {
    display: flex;
    font-size: 1.4rem;
    justify-content: center;
    margin-bottom: 50px;
}

.l-footer__nav .last {
    border-right: 1px solid #fff;
}

.l-footer__nav__menu {
    color: #fff;
    padding: 0 23px;
    border-left: 1px solid #fff;
}

.l-footer__nav :hover {
    color: rgba(255, 255, 255, 0.5);
    transition: all .2s;
}

.l-footer__content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 230px;
}

.l-footer__content__sns {
    display: flex;
}

.l-footer__content__sns__logo {
    width: 40px;
    margin-right: 32px;
}

.l-footer__content__sitetitle__logo {
    width: 179px;
    margin-bottom: 5px;
}

.l-footer__content__sitetitle__copy {
    font-size: 1.4rem;
    text-align: center;
    color: #333333;
    background-color: #fff;
    margin-bottom :0px;
    padding: 15px 0;
    width: 100%;
}

.l-footer__content__top {
    margin-right: -20px;
    margin-bottom: -20px;
}

.l-footer__content__top img{
    width: 140px;
}

.l-footer__content__top img:hover {
    transform: translateY(-10px); /* ホバー時に画像を上に移動させる */
    transition: all .2s;
}

/*===================================
  profile.html プロフィール
===================================*/
.p-profile_mv {
  position: relative;
  overflow: hidden; /* はみ出し防止 */
}

.p-profile .l-article{
    padding: 0;
    position: relative;
}

/* 下半分に色を載せる疑似要素 */
.p-profile_mv::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 60%;            /* セクション高さのちょうど中間から */
  bottom: 0;           /* 下端まで */
  background-color: #EEE7DD;
  z-index: 0;
}

/* コンテンツを前面に */
.p-profile_mv .l-article,
.p-profile_mv__content > * {
  position: relative;
  z-index: 1;
}

.p-profile_mv .l-article {
    padding: 0;
    max-width: 910px;
    position: relative;
}

/* 電球アイコン */
.p-profile_mv .l-article::before {
  content: "";
  position: absolute;
  /* コンテナの上から 20px、左から 0 */
  top: 20px;
  left: 0;
  width: 62px;
  height: 115px;
  background: url('/image/line_right.webp') no-repeat center/contain;
}

/* もう１つのライン */
.p-profile_mv .l-article::after {
  content: "";
  position: absolute;
  /* コンテナの上から 140px、左から 360px */
  top: 140px;
  left: 360px;
  width: 66px;
  height: 50px;
  background: url('/image/line_line.webp') no-repeat center/contain;
}

.p-profile_mv__content {
    display: flex;
    justify-content: space-between;
}

.p-profile_mv__content .c-title--h2 {
    margin: 160px 0 0 ;
    justify-content: center;
}

.p-profile_mv__img {
    width: 447px;
}

.p-history {
    background-color: #EEE7DD;
}
.p-history_title {
    text-align: right;
}

.p-history_content {
  width: 520px;     /* 各アイテムと同じ幅 */
  margin: 0 auto;   /* 左右マージンを自動にして中央寄せ */
}

.p-history_entry {
  position: relative;
  width: 520px;          /* テキスト領域と同じ幅 */
  margin: 0 auto ;   /* 中央寄せ */
}

.p-history_entry_title {
  display: inline-block;    /* 幅を中身に合わせておきたい場合。または block に */
  margin: 24px 0;              
  border: 1px solid #333;
  padding: 8px;
}

.p-history_entry_title h4 {
  margin: 0;            /* 上下左右の余白をリセット */
}

/* ↓共通設定：位置だけ決める */
.p-history_entry::before,
.p-history_entry::after {
  content: "";
  position: absolute;
  top: 0;
  background-repeat: no-repeat;
  background-position: center;
}

/* ブロック1 */
.p-history_entry:nth-child(1)::before {/* くりぼうや */
  top:100px;
  left: -230px;
  width: 116px;
  height: 101px;
  background-image: url('/image/line_kuribouya.webp');
  background-size: contain;
}

/* ブロック2 */
.p-history_entry:nth-child(2)::before {/* しろごまロゴ */
  top: 180px;
  left: -150px;
  width: 65px;
  height: 69px;
  background-image: url('/image/line_logo-line.webp');
  background-size: contain;
}
.p-history_entry:nth-child(2)::after {/* PC */
  top: -10px;
  right: -230px;
  width: 138px;
  height: 112px;
  background-image: url('/image/line_pc.webp');
  background-size: contain;
}

/* ブロック3*/
.p-history_entry:nth-child(3)::before {/* バス */
  top: 380px;
  left: -200px;
  width: 116px;
  height: 85px;
  background-image: url('/image/line_bus.webp');
  background-size: contain;
}
.p-history_entry:nth-child(3)::after {/* デジたまロゴ */
  top: 200px;
  right: -150px;
  width: 56px;
  height: 67px;
  background-image: url('/image/line_digitama.webp');
  background-size: contain;
}

/* 各アイテムを横並び＆高さを本文に合わせる */
.p-history_item {
  position: relative;       /* 疑似要素の基準に */
  display: flex;
  align-items: flex-start;  /* h4 の上端を揃える */
  padding-left: 40px;       /* 左に矢印分のスペース */
  width: 520px;
}

/* 本文下端まで伸びる縦線 */
.p-history_item::after {
  content: "";
  position: absolute;
  top: 0;                /* 矢印の下端に合わせる */
  bottom: 10px;                /* ブロックの下端まで */
  left: 11px;               /* 矢印の中心に合わせて */
  width: 0.5px;               /* 線の太さ */
  background-color: #333333;   /* 線の色 */
}

.p-name {
    background-color: #EEE7DD;
    position: relative;
    padding-bottom: 80px;
}

/*  左80%だけ白く塗る疑似要素 */
.p-name::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 80%;        /* ここを白い “コの字” の幅に */
  bottom: 80px;
  background-color: #fff;
}

.p-name .l-article {
    position: relative;
}

/* しろごま */
.p-name .l-article::before {
  content: "";
  position: absolute;
  /* コンテナの上から 300px、右から 210px */
  top: 300px;
  right: 210px;
  width: 223px;
  height: 210px;
  background: url('/image/line_shirogoma-b.webp') no-repeat center/contain;
}

.p-name__content {
    position: relative; 
    z-index: 1;
}

.p-name__item {
    width: 520px;
}

/*===================================
  consulting.html:ハンズオン型コンサルティング
===================================*/
.p-consulting_mv {
  position: relative;
  overflow: hidden; /* はみ出し防止 */
}

.p-consulting_mv .l-article{
    padding: 0 0 80px;
    position: relative;
}

.p-consulting_mv::before {/* 下半分に色を載せる疑似要素 */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 40%;            /* セクション高さのちょうど中間から */
  bottom: 0;           /* 下端まで */
  background-color: #61BAAE;
  z-index: 0;
}

.p-consulting_mv .l-article,
.p-consulting_mv__content > * {/* コンテンツを前面に */
  position: relative;
  z-index: 1;
}

.p-consulting_mv__content h2{
    margin-top: 80px;
    text-align: center;
    color: #fff;
}

.p-consulting_issue {
  display: flex;
  align-items: flex-start;  /* 画像とテキストの上端を揃える */
  justify-content: space-between;
  margin: 0 80px;
  position: relative;
  z-index: 1;
  align-items: center;
}

.section-divider {
    margin: 80px 80px 40px;
}

.p-consulting_issue_before_img ,.p-consulting_issue_after_img {
  height: auto;
  flex-shrink: 0;  /* 縮まらないように */
  object-fit: cover;
}

.p-consulting_issue_before_img {
  width: 238px;
}

.p-consulting_issue_after_img {
    width: 257px;
}

.p-consulting_issue h3 {
  font-weight: 600;
  margin-bottom: 32px;
}

/* リスト本体 */
.p-consulting_issue_before_list,.p-consulting_issue_after_list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.p-consulting_issue_before_list li,.p-consulting_issue_after_list li {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
  font-size: 2rem;
  font-weight: 500;
  position: relative;
}

/* 疑似要素で□を描く */
.p-consulting_issue_before_list li::before {
  content: "";
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  margin-right: 16px;
  border: 2px solid #D9D9D9;
  border-radius: 2px; /* 角丸 */
  background: none;
}

/* 反転レイアウトの適用 */
.p-consulting_issue.--rev {
    flex-direction: row-reverse;
}

.p-consulting_issue_after_list li {
    padding-left: 40px; 
}

/* 左にチェックアイコンを挿入 */
.p-consulting_issue_after_list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.2em;               /* テキストのベースラインに合わせる */
  width: 26px;              /* SVG のサイズに合わせる */
  height: 26px;
  margin-right: 16px;
  background: url('/image/check.svg') no-repeat center/contain;
}

.p-consulting_issue:not(.--rev)::before {/* Before の背景文字 */
  content: "Before";
  position: absolute;
  top: 80%;
  right: -100px;
  transform: translate(-10%, -50%);
  font-size: 11.5rem;
  color: #F2F2F2;
  white-space: nowrap;
  pointer-events: none;
  z-index: 0;
}

.p-consulting_issue.--rev::before {/* After の背景文字 */
  content: "After";
  position: absolute;
  top: 80%;
  left: -40px;
  transform: translate(-10%, -50%);
  font-size: 11.5rem;
  color:#E0EFED;
  white-space: nowrap;
  pointer-events: none;
  z-index: 0;
}

/* ==============
    主な支援内容
================= */
.p-consulting_support .l-article {
    max-width: 920px;
}

.p-consulting_support .c-title_con {
  display: block;           /* ブロック要素化 */
  width: 100%;              /* 幅を親いっぱいに */
  text-align: center;       /* 中央揃え */
  position: relative;       /* ::after の基準 */
  margin-bottom: 60px;      /* 下に余白 */
}

.p-consulting_support {
    background-color: #EEF3F3;
}

.p-consulting_support_content {
    margin-bottom: 40px;
    align-items: center;
}

.p-consulting_support_content_text {
    width: 50%;
}

.p-consulting_support_content_text h3 {
    font-weight: 600;
}

.p-consulting_support_content_title {
    display: inline-flex;     /* もしくは flex */
    align-items: center;      /* 子要素を縦中央に揃える */
    gap: 1.6rem;
}

.p-consulting_support_content_title span{
    color: #61BAAE;
    font-weight: 600;
    font-size: 5rem;
}

.p-consulting_support_content {
    display: flex;
    background-color: #fff;
    padding: 16px 32px 32px 32px;
    flex: 1; 
    border-radius: 20px;
    gap: 60px;
}

.p-consulting_support_content_list {/*リスト*/
    list-style: none;
}

.p-consulting_support_content_list li {
    display: flex;
    background-color: #E0EFED;
    align-items: center;
    font-weight: 600;
    position: relative;
    border-radius: 10px;
    padding: 8px 8px 8px 50px;
    margin-bottom:8px;
}

/* 左にチェックアイコンを挿入 */
.p-consulting_support_content_list li::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 0.8rem;               /* テキストのベースラインに合わせる */
  width: 24px;              /* SVG のサイズに合わせる */
  height: 24px;
  margin-right: 16px;
  background: url('/image/check-circle.svg') no-repeat center/contain;
}

.p-consulting_support_content img {
    width: 334px;
}

/* ==============
    成果
================= */
.p-consulting_result {
    background-color: #61BAAE;
}

.p-consulting_result h2{
    color: #fff;
    font-size: 2.4rem;
    text-align: center;
    margin-bottom: 32px;
}

.p-consulting_result_content {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.p-consulting_result_content_item {
    background-color: #fff;
    text-align: center;
    padding: 16px;
    border-radius: 20px;
}

.p-consulting_result_content_item_title {
    font-weight: 600;
}

.p-consulting_result_content_item_title span {
    font-size: 1.6rem;
    display: block;
}

.p-consulting_result_content_item img {
    width: 63px;
}


/* ==============
    進め方・関わり方
================= */
.p-consulting_approach {
    text-align: center;
}

.p-consulting_approach_content {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 32px;
}

.p-consulting_approach_content_item {
  position: relative;
  flex: 1;
  padding: 0 20px; 
  text-align: center;
}

.p-consulting_approach_content_item img {
    height: 182px;
    width: auto;
    padding-bottom: 16px;
}

.p-consulting_approach_content_item h3 {
    font-size: 2rem;
}

.p-consulting_approach_content_item:not(:last-child)::after {/* 最後のアイテム以外にセパレーターを追加 */
  content: "";
  position: absolute;
  top: 0;   
  bottom: 0;
  right: 0;
  width: 1px;
  background-color: #D9D9D9;
}

.p-consulting_approach p {
    text-align: end;
}


/* ==============
    取り組み事例
================= */
.p-consulting_works .c-title_con::after {
  content: none;
}

.p-consulting_works {
    background-color: #EEF3F3;
}

.p-consulting_works_content {
    display: flex;
    background-color: #fff;
    padding: 32px;
    border-radius: 20px;
    align-items: center;
    gap: 40px;
    margin-bottom: 40px;
}

/* 最後のブロックだけ余白を消す */
.p-consulting_works_content:last-child {
  margin-bottom: 0;
}

/* 反転レイアウトの適用 */
.p-consulting_works_content.--rev {
    flex-direction: row-reverse;
}

.p-consulting_works_content_text,
.p-consulting_works_content_img {
  flex: 1;                /* 親コンテナの幅を 1:1 で分割 */
  box-sizing: border-box; /* padding があるなら入れておく */
}

.p-consulting_works_content_text h3{
    font-weight: 600;
}

.p-consulting_works_content_text h4{
    margin-bottom: 8px;
}

.p-consulting_works_content_text_tag {
    display: flex;
}

.p-consulting_works_content_text_tag p {
    color: #61BAAE;
    border-radius: 5px;
    border: 1px solid #61BAAE;
    padding: 0 5px;
    font-size: 1.4rem;
    font-weight: 500;
    margin-right: 10px;
}

.p-consulting_works_content_text_ex{
    font-size: 1.4rem;
    margin-bottom: 8px;
}

.p-consulting_works_content_text_li {
    list-style-type:disc;
    padding-left: 1.6rem;
}

.p-consulting_works_content_text_li li{
    font-size: 1.4rem;
    font-weight: 500;
    margin-bottom: 8px;
}

.p-consulting_works_content_img img {
  width: 100%;
  height: auto;
  display: block;
}

/*===================================
  workshop.html:デジたまスタヂオ
===================================*/
.p-workshop_mv {
  position: relative;
  z-index: 0;
}

.p-workshop_mv::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 40%;
    bottom: 0;
    background-color: #FFC800;
    z-index: -1;
}

.p-workshop_mv__content{
    align-items: center;
    text-align: center;
    justify-content: center;
    padding: 48px 0 200px;
}

.p-workshop_mv__content_logo{
    width: 500px;
    height: auto;
}

.p-workshop_mv__content p{
    font-size: 2.4rem;
    font-weight: 600;
    margin-top: 1.6rem;
}

.p-workshop_mv__content_img {
    width: 530px;
    height: auto;
    margin-top: 32px;    
}

.p-workshop_mv__content_text h2{
    color: #fff;
    font-size: 3.2rem;
    margin-top: 60px;
}

/* ==============
    コンセプト
================= */
.p-workshop_concept {
    position: relative;
    z-index: 1;               /* 黄色より手前に */
    margin-top: -100px;
    background-color: #fff;
    border-radius: 100px 100px 0 0;
  /* sparkles を3種、合計9つ */
  background-image:
    url("/image/kira-n.webp"),
    url("/image/kira-b.webp"),
    url("/image/kira-s.webp"),
    url("/image/kira-n.webp"),
    url("/image/kira-b.webp"),
    url("/image/kira-s.webp"),
    url("/image/kira-n.webp"),
    url("/image/kira-b.webp"),
    url("/image/kira-s.webp");
  background-repeat: no-repeat;
  /* 各sparkleのサイズ */
  background-size:
    21px 21px,
    34px 34px,
    16px 16px,
    21px 21px,
    34px 34px,
    16px 16px,
    21px 21px,
    34px 34px,
    16px 16px;
  /* 位置 */
  background-position:
    77%   10%,    /* n */    
    55%  27%,   /* b */    
    83%  16%,   /* s */    
    21%   37%,    /* n */    
    36%  54%,   /* b */    
    29%  35%,   /* s */    
    72%  64%,   /* n */    
    81%  79%,   /* b */    
    64%  83%    /* s */
}

.p-workshop_concept_content {
    display: flex;
    gap: 48px;
    align-items: center;
    margin-bottom: 40px;
}

/* 反転レイアウトの適用 */
.p-workshop_concept_content.--rev {
    flex-direction: row-reverse;
}

.p-workshop_concept_content_img {
  flex: 6; 
}

.p-workshop_concept_content_text {
    padding-left: 40px;
    flex: 4;   /* 40% */
    box-sizing: border-box;
}

.p-workshop_concept_content_text_tag {
    display: inline-block;
    white-space: nowrap;
    background-color: #FFC800;
    color: #fff;
    padding: 8px 16px;
    font-weight: 600;
    border-radius: 25px;
}

.p-workshop_concept_content_text h2 {
    font-size: 3.2rem;
}

.p-workshop_concept_content_text_cap {
    font-size: 2.4rem;
    font-weight: 500;
}

.p-workshop_concept_msg {
    text-align: center;
    font-size: 3.2rem;
    font-weight: 500;
    padding-top: 40px;
}

.p-workshop_concept_msg span{
    color: #3EB489;
}

/* ==============
    最新開催情報
================= */
.p-workshop_event {
    background-color: #FFF8E8;
    border-radius: 100px 100px 0 0;
    padding-bottom: 100px;
}

.p-workshop_event_content {
    display: flex;
    gap: 140px;
    align-items: center;
    flex: 3;
}

.kira {
    width: 86px;
    height: auto;
}

.p-workshop_event_content_item {
    background-color: #fff;
    padding: 32px;
    flex: 7;
    border-radius: 25px;
}

.p-workshop_event_content_item img {
    margin-bottom: 24px;
    border-radius: 15px;
}

.p-workshop_event_content_item h3{
    font-weight: 600;
}

.p-workshop_event_content_item .c-dataTable {
    margin-bottom: 24px;
}

.p-workshop_event_content_item .c-button-ws {
    text-align: center;
}

/* ==============
    ワークショップ紹介
================= */
.p-workshop_detail {
    background-color: #FFC800;
    border-radius: 100px 100px 0 0;
    z-index: 1;               /* 黄色より手前に */
    margin-top: -100px;
    padding-bottom: 100px;
}

.p-workshop_detail .c-title {
    text-align: center;
    color: #fff;
}

.p-workshop_detail_cap {
    color: #fff;
    text-align: center;
    font-weight: 500;
}

.p-workshop_detail_content {
    display: flex;
    gap: 24px;
}

.p-workshop_detail_content_item {
    background-color: #fff;
    border-radius: 25px;
    padding: 24px;
}

.p-workshop_detail_content_item img {
    margin-bottom: 16px;
}

.p-workshop_detail_content_item h3 {
    margin-bottom: 8px;
    font-weight: 600;
}

.p-workshop_detail_content_item_tag {
    display: flex;
    flex-wrap: wrap;
    gap: 0 8px;
    margin-bottom: 16px;
}

.p-workshop_detail_content_item_tag p {
    color: #3EB489;
    font-size: 1.4rem;
    font-weight: 500;
    margin-bottom: 0;
}

.p-workshop_detail_content_item_li {
    list-style-type:disc;
    padding-left: 1.6rem;
}

.p-workshop_detail_content_item_li li{
    font-size: 1.6rem;
    font-weight: 500;
    margin-bottom: 8px;
}

.p-workshop_detail_content_letter {
    display: flex;
    align-items: center;
    background-color: #fff;
    padding: 24px;
    border-radius: 25px;
    margin-top: 32px;
}

.p-workshop_detail_content_letter_text h3{
    font-weight: 600;
}

.p-workshop_detail_content_letter_text span {
    font-size: 1.4rem;
    color: #898989;
}

.p-workshop_detail_content_letter_text {
    flex: 6;
}

.p-workshop_detail_content_letter_text,
.p-workshop_detail_content_letter_btn {
  box-sizing: border-box; /* padding考慮 */
}

.p-workshop_detail_content_letter_btn {
  display: flex;
  flex: 4;
  justify-content: center; /* 横中央 */
  align-items: center;     /* 縦中央 */
}

/* ==============
    主催者メッセージ
================= */
.p-workshop_message {
    background-color: #fff;
    border-radius: 100px 100px 0 0;
    z-index: 2;               /* 黄色より手前に */
    margin-top: -100px;
}

.p-workshop_message_content h2{
    text-align: center;
}

.p-workshop_message_content_item {
    display: flex;
    gap: 60px;
    align-items: center;
}
.p-workshop_message_content_item_text h3{
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 32px;
}

.p-workshop_message_content_item_text {
    width: 50%;
}

.p-workshop_message_content_item_img {
    width: 50%;
}

.p-workshop_message_content_item_text_name {
    text-align: end;
}

/*===================================
  レスポンシブ 1024px以下 768以上 タブレット
===================================*/
@media screen and (min-width: 768px) and (max-width: 1024px){
    .l-article {
        padding: 80px 20px;
    }

    .l-footer__content {
        padding: 0 150px;
    }

    .c-title__big ,.c-title__big--wh {
        line-height: 100px;
        margin-bottom: 32px;
    }

    .c-pageheader, .c-breadcrumb{
        max-width: 95%;
    }

    /*===================================
        タブレット ヘッダー
    ===================================*/
    .l-header__pc {
        padding: 10px 17px;
    }

    .l-header__nav { /*メニューの背景*/
        position: absolute;
        top: 0;
        right: -120%;
        transition: .5s;/*開くとき0.5秒*/
        background:#fff;
        padding: 100px 40px;
        width: 100%;
        height: 100vh;
        flex-direction: column;
        margin-right:0px;
        justify-content: start;
        align-items:center;
        text-align:center;
    }
    
    .l-header__nav__menu .nav-en {/* ナビゲーション英語 */
        margin-right: 0px;
        display: block;
        margin-bottom: 40px;
        font-size: 2rem;
        font-weight: 600;
    }

    .l-header__pc.--open .l-header__nav {
        right: 0;
        transition: .3s;/*閉じるとき0.3秒*/
    }
    
    .l-header__pc.--open .c-humberger div {
        height: 3px;
        -webkit-transition: .6s cubic-bezier(.19,1,.22,1);
        transition: .6s cubic-bezier(.19,1,.22,1);
        background: #ADCF04;
    }
    
    .l-header__pc.--open .c-humberger div:nth-child(1) {
            -webkit-transform: translateY(11px) rotate(45deg);
            transform: translateY(11px) rotate(45deg);
    }
    
    .l-header__pc.--open .c-humberger div:nth-child(2) {
        -webkit-transform: translateY(-15px) rotate(-45deg);
            transform: translateY(-15px) rotate(-45deg);
    }

    .l-header__pc.--open .c-humberger div:nth-child(3) {
        display: none;
    }
    
    .l-header__nav > ul > li {
        margin: 10px 0;
    }
    
    /*ハンバーガー*/
    .c-humberger { 
        width: 50px;
        height: 50px;
        border-radius: 50%;
        padding: 10px 10px;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
                flex-direction: column;
        -webkit-box-pack: justify;
                justify-content: space-between;
        position: relative;
        z-index: 100;
        cursor: pointer;
        margin-left:auto;
    }
    
    .c-humberger div {
        display: block;
        height: 3px;
        background: #ADCF04;
        -webkit-transition: .6s cubic-bezier(.19,1,.22,1);
        transition: .6s cubic-bezier(.19,1,.22,1);
    }/*ハンバーガーここまで*/


    /*===================================
        タブレット MV
    ===================================*/
    .p-top__mv__content {
        height: 70vh;
    }
    .p-top__mv__text {
        width: 100%;
        padding-left:17px;
    }

    .p-top__mv__heading {
        position: static;
        padding-left: 30px;
        margin-right: auto;
        flex: 0 0 45%;
    }

    .p-top__mv__heading h1 {
        font-size: 3.5rem;
    }

    .p-top__mv__img {
        background-image: url('/image/sp_top_hero.webp');
        background-size: contain;
        margin-left: auto;
    }

    .p-top__mv::before ,.p-top__mv::after {
        display: none;
    }

    .p-top__mv__caption {
        width: 60%;
        padding: 0 60px;
        height: 210px;
    }

    /*===================================
        タブレット デジたまバナー
    ===================================*/
    .p-digitama .l-article {
        padding: 200px 0 80px;
    }
    .p-digitama__content {
        width: 90%;
    }


    /*===================================
        タブレット Profile
    ===================================*/
    .p-profile .l-article {
        padding: 60px 20px 0;
    }

    .p-profile__text .c-button_arow{
        margin-bottom: 40px;
    }

    .p-profile .l-article::before {
        top:-20px;
        left: 40px;
        width: 41px;
        height: 76px;
    }

    .p-profile .l-article::after {
        left: 395px;
    }

    .p-profile__img::before {
        bottom: -100px;
    }

    .p-profile__text {
        width: 500px;
    }


    /*===================================
        タブレット Pro bono
    ===================================*/
    .p-probono__container {
        padding: 0 32px 32px 32px;
    }

    .p-probono .l-article::before {
        top: 50px;
        right: -35px;
    }

    /*===================================
       タブレット Blog
    ===================================*/
    .p-blog .l-article {
        padding-top: 150px;
    }

    .p-blog .c-title > span::after {
        top: -95px;
        right: 330px;
    }

    /*===================================
       タブレット About
    ===================================*/
    .p-about__content__list .c-dataTable {
        width: 100%;
    }   

    .c-dataTable__header--about {
        padding: 16px 16px 16px 0;
    }

    .p-about .l-article::before {
        left: 250px;
        top: 65px;
    }

    /*===================================
       タブレット Profile.html
    ===================================*/
    .p-profile_mv .l-article {
        max-width: 95%;
    }

    .p-name::before {
        width: 90%;
    }

    .p-name .l-article::before {
        top: 196px;
        right: 147px;
        width: 180px;
    }
    
    .p-history_entry:nth-child(1)::before {
        left: -135px;
    }

    .p-history_entry:nth-child(2)::after {
        right: -135px;
    }

    .p-history_entry:nth-child(2)::before {
        left: -100px;
    }

    .p-history_entry:nth-child(3)::after {
        right: -100px;
    }

    .p-history_entry:nth-child(3)::before {
        left: -130px;
    }


    /*===================================
       タブレット workshop.html
    ===================================*/
    .p-workshop_event_content {
        gap: 40px;
    }

    .p-workshop_detail_content {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: auto;
        gap: 24px;
    }
}

/*===================================
  レスポンシブ 768px以下 スマホ
===================================*/
@media screen and (max-width: 768px) {
    .l-article {
        padding: 80px 20px;
    }

    h3 {
        font-size: 2rem;
    }

    .c-title--h2 {
        font-size: 2.5rem;
        line-height: 45px;
    }

    .c-title__big--wh, .c-title__big {
        font-size: 8rem;
        line-height: 80px;
        margin-bottom: 24px;
    }

    .c-button a {
        padding: 20px 20px;
    }

    .c-button--wh a {
        padding: 20px 20px;
    }

    .c-title {
        font-size: 2rem;
    }

    .c-pageheader, .c-breadcrumb{
        max-width: 95%;
    }

    .c-pagetitle {
        font-size: 2.5rem;
    }

    .c-pagetitle span {
        font-size: 2rem;
        display: block;
    }

    /* 表 */
    .c-dataTable__row {
        display: flex;
        flex-direction: column;
        border: none;
    }
    /* 見出しセル・データセルをブロック化 */
    .c-dataTable__header,
    .c-dataTable__cell {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }

    /*===================================
    スマホ ヘッダー
    ===================================*/
    .l-header__pc {
        padding: 10px 17px;
    }

    .l-header__nav { /*メニューの背景*/
        position: absolute;
        top: 0;
        right: -120%;
        transition: .5s;/*開くとき0.5秒*/
        background:#fff;
        padding: 100px 40px;
        width: 100%;
        height: 100vh;
        flex-direction: column;
        margin-right:0px;
        justify-content: start;
        align-items:center;
        text-align:center;
    }
    
    .l-header__nav__menu .nav-en {/* ナビゲーション英語 */
        margin-right: 0px;
        display: block;
        margin-bottom: 40px;
    }

    .l-header__pc.--open .l-header__nav {
        right: 0;
        transition: .3s;/*閉じるとき0.3秒*/
    }
    
    .l-header__pc.--open .c-humberger div {
        height: 3px;
        -webkit-transition: .6s cubic-bezier(.19,1,.22,1);
        transition: .6s cubic-bezier(.19,1,.22,1);
        background: #ADCF04;
    }
    
    .l-header__pc.--open .c-humberger div:nth-child(1) {
            -webkit-transform: translateY(11px) rotate(45deg);
            transform: translateY(11px) rotate(45deg);
    }
    
    .l-header__pc.--open .c-humberger div:nth-child(2) {
        -webkit-transform: translateY(-15px) rotate(-45deg);
            transform: translateY(-15px) rotate(-45deg);
    }

    .l-header__pc.--open .c-humberger div:nth-child(3) {
        display: none;
    }
    
    .l-header__nav > ul > li {
        margin: 10px 0;
    }
    
    /*ハンバーガー*/
    .c-humberger { 
        width: 50px;
        height: 50px;
        border-radius: 50%;
        padding: 10px 10px;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
                flex-direction: column;
        -webkit-box-pack: justify;
                justify-content: space-between;
        position: relative;
        z-index: 100;
        cursor: pointer;
        margin-left:auto;
    }
    
    .c-humberger div {
        display: block;
        height: 3px;
        background: #ADCF04;
        -webkit-transition: .6s cubic-bezier(.19,1,.22,1);
        transition: .6s cubic-bezier(.19,1,.22,1);
    }/*ハンバーガーここまで*/

    /*===================================
        スマホ MV
    ===================================*/
    .p-top__mv__content{
        flex-direction: column;
    }
    
    .p-top__mv__text {
        width: 100%;
        padding-left:17px;
    }

    .p-top__mv__heading {
        position: static;
        padding-left: 30px;
        margin-right: auto;
    }

    .p-top__mv__heading h1 {
        font-size: 3.5rem;
    }

    .p-top__mv__img {
        width: 90%;
        flex: 0 0 80%;
        transform: translateY(-40px);
        background-image: url('/image/sp_top_hero.webp');
        background-size: contain;
        background-position: top;
        background-repeat: no-repeat;
        margin-left: auto;
    }

    .p-top__mv::before ,.p-top__mv::after {
        display: none;
    }

    .p-top__mv__caption {
        width: 90%;
        padding: 0 30px;
        height: 210px;
    }
    /*===================================
        スマホ デジたまバナー
    ===================================*/
    .p-digitama .l-article {
        padding: 180px 0 80px;
    }
    .p-digitama__content__text {
        padding: 20px;
    }
    .p-digitama__content {
        flex-direction: column;
        width: 90%;
    }
    .p-digitama__content > img {
        width: 100%;
    }

    /*===================================
        スマホ Profile
    ===================================*/
    .p-profile .l-article {
        padding: 60px 20px 0;
    }
    .p-profile__content {
        flex-direction: column;
    }

    .p-profile__text {
        width: 100%;
    }

    .p-profile__text .c-button_arow{
        margin-bottom: 40px;
    }
    .p-profile__img {
        width: 100%;
        transform: translateX(calc((100vw - 100%) / 1));
    }

    .p-profile__img::before {
        left: -15vw;
        bottom: -1vw;
        top: 80%;
    }

    .p-profile .l-article::before {
        top:-20px;
        left: 40px;
        width: 41px;
        height: 76px;
    }

    /*===================================
        スマホ Service
    ===================================*/
    .p-service .l-article {
        padding-top: 180px;
    }

    .p-service .l-article::before{
        width: 113px;
        height: 92px;
        top: 87px;
        left: 14px;
    }

    .p-service_content {
        flex-direction: column;
    }

    /*===================================
        スマホ Pro bono
    ===================================*/
    .p-probono .l-article {
        padding: 180px 20px 0;
    }

    .p-probono .l-article::before {
        width: 137px;
        height: 158px;
        top: 57px;
        right: 7px;
    }

    .p-probono__text {
        font-size: 1.8rem;
        margin-bottom: 50px;
    }

    /* 反転レイアウトを解除 */
    .p-probono__content.--rev {
        flex-direction: column;
    }

    /* Pro bono の基本レイアウト */
    .p-probono__content {
        flex-direction: column;
        margin-bottom: 100px;
    }

    .p-probono__content__img {
        width: 100%;
    }

    /* 共通のコンテナ設定（背景を適用する要素） */
    .p-probono__container {
        padding: 32px 20px 0;
        width: 100vw;
    }

    .p-probono__container__tag {
        margin-bottom: 23px;
    }

    .p-probono__container__text{
        margin: 0;
    }

    .p-probono__container::after {
        top: calc(110%);
    }

    /*===================================
        スマホ Blog
    ===================================*/
    .post-item {
        width: 100%;
        margin-top: 10px;
    }

    .p-blog .c-title > span::after {
        top: -60px;
        right: 70px;
        width: 90px;
    }

    /*===================================
        スマホ about
    ===================================*/
    .p-about .l-article::before {
        top: 85px;
        left: 235px;
    }

    .p-about__content {
        flex-direction: column;
        align-items: normal;
    }

    .p-about__content__img {
        width: 100%;
        padding-top: 60px;
        transform: translateX(calc((100vw - 100%) / 1));
    }
    
    .p-about__content__list {
        display: block;
        width: 100%;
    }
    .p-about__content__list ul {
        margin-top: 60px;
    }

    .p-about::before {
        width: 95%;
    }

    .p-about__content__list .c-dataTable {
        width: 95%;
    }

    .c-dataTable__header--about {
        padding: 16px 16px 16px 0;
        width: 32%;
    }

    .p-about__content__list .c-dataTable__row {
        display: table-row;
        flex-direction: initial;
    }

    /*===================================
        スマホ contact
    ===================================*/
    .p-contact__content__text {
        font-size: 2rem;
    }

    .p-contact {
        padding: 80px 20px 0;
    }



    /*===================================
       スマホ フッター
    ===================================*/
    .l-footer {
        margin-top: -2px;
    }

    .l-footer__content {
        flex-direction: column;
        padding: 0;
    }

    .l-footer__content__sns {
        margin-top: 16px;
    }


    .l-footer__content__sns__logo {
        width: 40px;
        margin: 30px; 
    }

    .l-footer__content__sitetitle__logo {
        margin-bottom: 30px;
    }

    .l-footer__content__top {
        margin-right: 0px;
    }

    /*===================================
       Profile.html
    ===================================*/
    .p-profile_mv .l-article {
        max-width:90%
    }

    .p-profile_mv__img {
        width: 100%;
    }

    .p-profile_mv__content {
        flex-direction: column;
    }

    .p-profile_mv__content .c-title--h2 {
        margin: 70px 0 32px;
    }
    .p-profile_mv .l-article::before {
        top: -8px;
        width: 41px;
        height: 76px;
    }
    .p-profile_mv .l-article::after {
        top: 73px;
        left: 290px;
    }

    .p-history_content {
        width: 100%;
    }
    .p-history_entry {
        margin:0;
        width: 100%;
    }
    .p-history_item {
        width: 100%;
    }

    .p-name::before {
        width: 95%;
        bottom: 0;
    }
    .p-name__item {
        width: 95%;
    }
    .p-name .l-article::before {
        top: 540px;
        right: 50px;
        width: 120px;
    }

    /*===================================
       スマホ consulting.html
    ===================================*/
    .p-consulting_mv__content h2 {
        margin: 80px 20px 0;
    }

    .p-consulting_issue ,.p-consulting_issue.--rev {
        flex-direction: column;
        margin: 0;
    }

    .p-consulting_issue:not(.--rev)::before ,.p-consulting_issue.--rev::before{
        top: 100%;
        font-size: 8.5rem;
        right: -25px;
        left: auto;
    }

    .section-divider {
        margin: 80px 0 40px;
    }

    .p-consulting_support_content {
        flex-direction: column;
    }
    
    .p-consulting_support_content_text {
        width: 100%;
    }

    .p-consulting_result h2 {
        font-size: 2rem;
    }

    .p-consulting_result_content {
        grid-template-columns: repeat(2, 1fr);
    }

    .p-consulting_approach_content_item:not(:last-child)::after {
        display: none;
    }

    .p-consulting_approach_content_item {
        padding:20px;
    }

    /* 反転レイアウトを解除 */
    .p-consulting_works_content,.p-consulting_works_content.--rev {
        flex-direction: column;
    }

    .p-consulting_issue_before_img {
        width: 194px;
        margin-bottom: 32px;
    }

    .p-consulting_issue_after_img {
        width: 210px;
        margin-bottom: 32px;
    }

    .p-consulting_support_content img {
        width: 100%;
    }

    /*===================================
       スマホ workshop.html
    ===================================*/
    .p-workshop_mv__content_logo, .p-workshop_mv__content_img{
        width: 90%;
    }

    .p-workshop_mv__content p {
        font-size: 1.8rem;
    }

    .p-workshop_mv__content_text h2 {
        font-size: 2.5rem;
    }

    .p-workshop_mv__content {
        padding-bottom: 150px;
    }

    .p-workshop_concept_content_text {
        padding: 0;
    }

    .p-workshop_concept_content_text_cap {
        font-size: 2rem;
    }

    .p-workshop_concept_content {
        gap: 20px;
        align-items:normal;
    }

    .p-workshop_concept_msg {
        font-size: 2.5rem;
    }

    .kira {
        width: 60px;
    }

    .p-workshop_concept_content, .p-workshop_concept_content.--rev {
        flex-direction: column;
    }

    .p-workshop_event_content {
        flex-direction: column;
        gap: 0;
    }

    .p-workshop_event_content h2 {
        text-align: center;
    }

    .p-workshop_event_content_item {
        padding: 20px;
    }

    .p-workshop_concept ,.p-workshop_event ,.p-workshop_detail, .p-workshop_message{
        border-radius: 60px 60px 0 0;
    }

    .p-workshop_concept, .p-workshop_detail, .p-workshop_message {
        margin-top: -60px;
    }

    .p-workshop_event{
        padding-bottom: 60px;
    }

    .p-workshop_detail_content, .p-workshop_message_content_item {
        flex-direction: column;
    }

    .p-workshop_message_content_item_text, .p-workshop_message_content_item_img {
        width: 100%;
    }


    }