@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","Nunito", sans-serif;
        display: flex;
        flex-direction: column;
        min-height: 100vh;
    }

    p {
        font-size: 1.6rem;
        line-height: 180%;
        margin-bottom: 1.6rem;
    }

    h2 {    
        font-size: 4.5rem;
        margin-bottom: 32px;

    }

    h3 {    
        font-size: 4rem;
        margin-bottom: 32px;
        font-weight: 400;
    }

    h4 {
        font-size: 2rem;
        margin-bottom: 32px;
    }

    a {
        text-decoration: none;
        color: #333333;
    }

    ul {
        list-style-type: none;
    }

    li {
        font-size: 1.6rem;
        text-align: left;
        font-weight: 500;
        margin-bottom: 8px;
    }

    table {
        font-size: 1.6rem;
    }

    th {
        font-weight: 400;
    }

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

.js-fix {
    overflow: hidden;
}

main {
    overflow: hidden;
}

/*===================================
  タイトル
===================================*/
.c-title {
    display: block;
    font-size: 4.5rem;
    margin-bottom: 60px;
    color: #2B5984;
    font-weight: 900;
}

.c-title--sub {
    display: block;
    font-size: 4rem;
    margin-bottom: 24px;
    font-weight: 700;
}

.c-text {
    display: block;
    font-size: 2rem;
    font-weight: 500;
}

.c_title--en img{
    height: 71px;
}

.c-title--contact {
    display: block;
    font-size: 1.4rem;
    margin-bottom: 60px;
    color: #fff;
    text-align: center;
}

.c-title--contact  span{
    font-size: 5.5rem;
    font-weight: 600;
    display: block;
}

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

.c-button a {
    color: #2B5984;
    padding: 20px 80px;
    text-decoration: none;
    font-size: 1.8rem;
    font-weight: bold;
    display: flex;
    align-items: center;
    background-color: #fff;
    border-radius: 20px;
    box-shadow: 0px 15px 0px 0px #2B5984;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.c-button a:hover {
  transform: translateY(8px);          /* 下に動く */
  box-shadow: 0 10px 0 #2B5984;          /* 影を浅く */
}

/* ヘッダーボタン */
.c-button--head{
    display: flex;
    justify-content: center;
}

.c-button--head a {
    font-size: 1.4rem;
    color: #2B5984;
    padding: 10px 16px;
    text-decoration: none;
    font-weight: bold;
    display: flex;
    align-items: center;
    background-color: #fff;
    border-radius: 20px;
}

.c-button--head a:hover {
    background-color:#EEC72F;
}

/* 色付きボタン */
.c-button--color {
    display: flex;
    justify-content: center;
}

.c-button--color a {
    color: #2B5984;
    padding: 20px 40px;
    text-decoration: none;
    font-size: 1.8rem;
    font-weight: bold;
    display: flex;
    align-items: center;
    background-color: #ADCF04;
    border-radius: 20px;
    box-shadow: 0px 15px 0px 0px #2B5984;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.c-button--color a:hover {
  transform: translateY(8px);          /* 下に動く */
  box-shadow: 0 10px 0 #2B5984;          /* 影を浅く */
}

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


.c-button--text a {
    font-size: 1.8rem;
    font-weight: bold;
}

.c-button--text a:hover {
    color: #2B5984;
    text-decoration: underline;
}

.link-with-icon {
  display: inline-flex;
  align-items: center;
  color: #2B5984;
}

.link-icon {
  width: 1.2em;
  height: 1.2em;
  margin-left: 8px;
  fill: currentColor;
}


.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;
}

/*===================================
  Header
===================================*/
/* ヘッダー全体のレイアウト */
.l-header__pc {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 10px 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: transparent;
    transition: background-color 0.3s ease, color 0.3s ease;
    z-index: 1000;
}

/* 初期：文字・ボタンを白 */
.l-header__nav__menu {
    color: #fff;
    font-weight: 600;
    position: relative;
    text-decoration: none;
}
.l-header__nav li:not(.c-button--head) .l-header__nav__menu {
    position: relative;
}

.l-header__nav li:not(.c-button--head) .l-header__nav__menu::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 100%;
    height: 2px;
    background-color: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}

.l-header__nav li:not(.c-button--head) .l-header__nav__menu:hover::after {
    transform: scaleX(1);
}

/* ロゴを白用に */
.l-header__pc__logo img {
    filter: brightness(0) invert(1);
}

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

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

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

.l-header__pc.is-active {
    background-color: #fff;
}

/* テキスト色を戻す */
.l-header__pc.is-active .l-header__nav__menu {
    color: #2B5984;
}

.l-header__pc.is-active .c-button--head a {
    color: #2B5984;
    border-color: #2B5984;
}

/* ロゴを元の色に */
.l-header__pc.is-active .l-header__pc__logo img {
    filter: none;
}

.l-header__pc.is-active .c-button--head a {
    background-color: #ADCF04;
}
.l-header__pc.is-active .c-button--head a:hover {
    background-color:#EEC72F;
}

/*===================================
   hero
===================================*/
.hero {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

.hero__bg {
  position: fixed;
  inset: 0;
  z-index: -3;
  background: linear-gradient(
    to bottom,
    #54ACF1 0%,
    #D4EEF7 80%,
    #F6E1E2 100%
  );
}

.hero__content {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  padding: 40vh 24px 0;
}

.hero__stars {
  position:absolute;
  inset: 0;
  z-index: 0;
    background-image: url("image/stars.png");
    background-size: auto;
    mix-blend-mode: color-dodge;
    pointer-events: none;
}

.hero__content h1 {
  color: #fff;
  font-size: clamp(32px, 4vw, 56px);
  line-height: 1.4;
  font-weight: 700;
}

/*===================================
   雲
===================================*/
.cloud-divider {
  position: relative;
  width: 100%;
  margin-bottom: -1px; /* 隙間防止 */
}

.cloud-divider img {
  display: block;
  width: 100%;
  height: auto;
}


/*===================================
   Svc
===================================*/
.svc {
    background-color: #fff;
}

.svc .l-article{
    padding: 80px 0 0px;
}

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

.svc-card{
  display: block;          /* a をブロック化 */
  width: 334px;            /* カード幅を固定 */
  text-decoration: none;
}

.svc-card__img {
    width: 100%;
    border-radius: 30px;
    box-shadow: 0px 15px 0px 0px #2B5984;
}

.svc-card__body {
    position: relative;
    margin-top: -65px;
    background-color: #fff;
    z-index: 1;
    border-radius: 30px;
    padding-top: 8px;
}

.svc-card__labelimg {
    height: 17px;
}

.svc-card__title {
    text-align: center;
    font-weight: 600;
    font-size: 1.6rem;
    color: #2B5984;
}

.svc-card__arrow {
    color: #2B5984;
}

/*===================================
   philosophy
===================================*/
.philosophy {
    background-color: #fff;
    text-align: center;
}

.philosophy__img {
    width: 80%;
    margin-bottom:10rem ;
}

.philosophy__text {
    width: 50%;
    margin: 0 auto;
}

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

.top__bg01 {
    background-image: url('image/bg01.webp');
    background-size: cover;
    height: 500px;
    width: 100%;
}

.top__bg02 {
    background-image: url('image/bg02.webp');
    background-size: cover;
    height: 500px;
    width: 100%;
}

/*===================================
   service-intro
===================================*/
.service-intro {
    text-align: center;
    background-color: #D6EDF6;
}

.service-intro__text {
    width: 50%;
    margin: 0 auto;
}

/*===================================
   Service
===================================*/
.service {
    background-color: #fff;
}

.service .c_title--en {
    margin-bottom: 100px;
}

.service__card {
    display: flex;
    gap: 80px;
}

.service__card + .service__card {
  margin-top: 120px;
}

.service__card__img img {
    width: 510px;
    border-radius: 30px;
    box-shadow: 0px 15px 0px 0px #2B5984;
}

.label{
    display: block;
    height: 28px;
    width: auto;
    margin-bottom: 12px;
}

.service__card__title {
    margin-bottom: 32px;
}

.service__card__title span {
    display: block;
    margin-bottom: -8px;
    font-size: 3.2rem;
}

/*===================================
   R&D
===================================*/
.rd {
  position: relative;
  background: linear-gradient(
    to bottom,
    #081120 0%,
    #5A6D8F 80%,
    #F7F5EF 100%
  );
  overflow: hidden;
}

.rd::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: url("image/stars.png");
    background-size: auto;
    mix-blend-mode: color-dodge;
    pointer-events: none;
}

.rd__card {
    text-align: center;
}

.rd__card .label {
    display: inline;
}

.rd__card .c-title{
    color: #fff;
    margin-bottom: 32px;
}

.rd__card .c-text{
    color: #fff;
    width: 500px;
    margin: 0 auto 80px;
}

.rd__card__content {
    display: flex;
    max-width: 930px;
    background-color: #fff;
    border-radius: 30px;
    margin: 0 auto 40px;
    justify-content: center;
    align-items: center;
}

.rd__card__content__img {
    margin: 60px 0 60px 60px;
}

.rd__card__content__img img{
    border-radius: 30px;
    border: 1px solid #E5E5E5;
}

.rd__card__content__item {
    margin: 16px 60px 60px;
    text-align: center;
}

.rd__card__content__item__star {
    width: 94px;
}

.rd__card__content__item__title {
    font-size: 4rem;
    color: #2B5984;
    font-weight: 900;
}

.rd__card__content__item__title span{
    display: block;
    font-size: 2rem;
    font-weight: 600;
}

.rd__card__content__item p {
    font-weight: 500;
    text-align: justify;
}

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

.blog .l-article {
    padding: 80px 0 120px;
}

.blog__container {
  display: flex;
  gap: 60px;
  margin-right: -100px; /* はみ出し演出 */
  overflow: visible;
}

.blog__container__text{
    width: 245px;
    flex-shrink: 0;
}

#post-list {
    display: flex;
    overflow-x: visible; /* 右にはみ出し許可 */
    gap: 24px;
    /*flex-wrap: wrap;  画面サイズが小さくなったときに要素が折り返されるように */
}

.post-item {
    display: block; /* <a>タグをブロック要素に */
    background-color: #fff;
    border-radius: 20px;
    overflow: hidden;
    width: 245px;
    box-shadow: 0px 15px 0px 0px #2B5984;
    text-decoration: none; /* リンクの下線を消す */
    color: inherit; /* リンクの色を継承 */
}

.post-item:hover {
    color: #ADCF04;
}

.post-thumbnail {
    width: 100%;
    padding: 8px;
    height: 160px;
    overflow: hidden; /* 画像がはみ出さないようにする */
}

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

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

.post-content h2 {
    margin: 10px 0;
    font-size: 1.6em;
}

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

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

/*===================================
    Profile
===================================*/
.profile {
    background-color: #fff;
    overflow: visible;
}

.profile .c-title {
    width: 765px;
    margin: 0 auto;
    text-align: center;
    margin-bottom: 80px;
}

.profile__container{
    display: flex;
    gap: 32px;
    align-items: flex-start;
}

.profile__container__img{
    position: relative;
    z-index: 2;
    margin-left: -40px;
    margin-right: -120px;
    bottom: -200px;
}

.profile__container__img img{
  width: 100%;
  height: auto;
  display: block;
}

.profile__container__text {
    background-color: #F7F5EF;
    border-radius: 30px;
    padding: 60px 100px;
    text-align: center;
    width: 656px;
    flex-shrink: 0;
}
.profile__container__text .label {
    display: inline;
    margin-bottom: 4px;
}

.profile__container__text .c-text {
    margin-bottom: 24px;
}


.profile__container__text p {
    font-weight: 500;
    text-align: left;
    margin-bottom: 32px;
}

.profile__container__text ul {
    list-style-type:disc;
    padding-left: 24px;
    }

.profile__container__text li {
    color: #5C6975;
}

.profile__container__text .c-button--text {
  color: #ADCF04;
  display: inline;
  text-decoration: none;
}

.profile__container__text .c-button--text:hover {
  text-decoration: underline;
}

/*===================================
    Contact
===================================*/
.contact {
  position: relative;
  background: linear-gradient(
    to bottom,
    #418DD4 0%,
    #204474 40%,
    #F2E2A2 100%
  );
  overflow: hidden;
}

.contact::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: url("image/stars.png");
    background-size: auto;
    mix-blend-mode: color-dodge;
    pointer-events: none;
}

.contact__card__title {
    color: #fff;
    text-align: center;
    margin-bottom: 80px;
}

.contact .c-title--sub {
    margin-top: 80px;
    text-align: center;
    color: #fff;
}

.contact .c-text {
    text-align: center;
    color: #fff;
    margin-bottom: 32px;
}

/*===================================
  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: #fff;
    padding: 24px 40px;
}

.l-footer__nav {
    display: flex;
    justify-content:space-between;
    align-items: center;
}

.l-footer__nav__content__logo {
    height: 45px;
}

.l-footer__nav__content__copy{
    color: #2B5984;
    font-size: 1.4rem;
    font-weight: 500;
    margin-bottom:0;
}

.l-footer__nav__sns {
    width: 60px;
    height: 60px;
}

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

    /*===================================
    ヘッダー
    ===================================*/
    .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__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: #2B5984;
    }
    
    .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: #2B5984;
        -webkit-transition: .6s cubic-bezier(.19,1,.22,1);
        transition: .6s cubic-bezier(.19,1,.22,1);
    }/*ハンバーガーここまで*/

    /* ○○○（アイコン）*/
    .c-circle--hed {
        display: none;
    }

    /*===================================
    MV
    ===================================*/
    .p-top__mv {
        width: 90%; /* 画像の最大サイズを指定 */
    }
    

    .p-top__mv__msg-ja{
        width: 100%;
        top: 50%;
        left:10%;
        font-size: 4.5rem;
    }

    /*===================================
    profile
    ===================================*/
    .p-profile__content__01 {
        padding-left: 30px;
    }

    .p-profile__container {
        padding: 23px;
    }

}

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

    h3 {
        font-size: 2rem;
    }

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

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

        /*===================================
    ヘッダー
    ===================================*/
    .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-jp { /* ナビゲーション日本語 */
        font-size: 1.2rem;
        display: block;
        color: #ADCF04;
        margin-bottom: 40px;
    }
    
    .l-header__nav__menu .nav-en {/* ナビゲーション英語 */
        margin-right: 0px;
        display: block;
    }

    .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 {
        width: 90%; /* 画像の最大サイズを指定 */
    }

    .p-top__mv__img-sp {
        display: block;
        width: 100%; /* 親要素に合わせる */
        height: auto;
        transform: scale(1.1); /* 初期状態：少し拡大 */
        opacity: 0; /* 初期状態は透明 */
        transition: transform 1.2s ease-out, opacity 1.2s ease-out;
    }  

    /* 画像のフェードイン */
    .p-top__mv__img-sp.fadeIn {
        animation-delay: 0.5s; /* ロゴの後に表示 */
        transform: scale(1);
        opacity: 1;
    }

    .p-top__mv__img {
        display: none;
    }

    .p-top__mv__msg-ja{
        width: 100%;
        top: 20%;
        left:2%;
        font-size: 4rem;
    }

    /*===================================
    Mission
    ===================================*/
    .p-mission__content__en {
        font-size: 3rem;
    }

    .p-mission__content__title {
        font-size: 2.3rem;
    }

    .p-mission__content__text {
        width: 100%;
    }

    /*===================================
    solution
    ===================================*/
    .p-solution__text {
        font-size: 1.8rem;
    }

    .p-solution__contet__item{
        padding: 30px 15px;
    }

    /*===================================
    profile
    ===================================*/
    .p-profile__content__01title {
        padding-left: 20px;
    }

    .p-profile__container {
        padding: 40px 20px;
        width: 100vw; /* 画面幅いっぱい */
        margin-left: calc(50% - 50vw); /* `l-article` の `padding` の影響を防ぐ */
        text-align: left;
    }

    .p-profile__content__01 {
        padding-left:0px;
        width: 100vw; /* 画面幅いっぱい */
        margin-left: calc(50% - 50vw); /* `l-article` の `padding` の影響を防ぐ */
    }

    .p-profile__content {
        display: block;
    }

    .p-profile__img{
        display: none;
    }

    .p-profile__img-sp{
        display:block;
        padding: 0;
    }

    /* 下のコンテンツに背景をかぶせる */
    .p-profile__container::before {
        position:absolute;
        bottom: -100px; /* 下のコンテンツ */
        right: 0px; /* 右側 */
        width: 100%; 
        height: 200px; /* 背景の伸ばし具合を調整 */
        background-color: #F6F8F2;
    }

    .p-profile__container__name p {
        margin: 2px 0 0;
    }

    .p-profile__container__name {
        margin-bottom: 32px;
    }

    /* テキスト幅の調整 */
    .p-profile__container__text {
        width: auto;
    }

    /* 画像のサイズ調整 */
    .p-profile__img {
        display: none;
    }

    /*bio*/
    .p-bio__content {
        flex-direction: column;
        margin-top: 0px;
    }

    .p-bio__content__img {
        width: 100%;
    }

    .p-bio__contener {
        padding: 32px 0 0;
    }

    .p-bio__content__text{
        width: 100%;
    }

    .p-profile .l-article {
        padding-bottom:100px;
    }

    /*===================================
    Pro bono
    ===================================*/
    .p-probono .l-article {
        padding-bottom: 0;
    }

    .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;
    }

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

    /*===================================
        about
    ===================================*/
    .p-about__content__img {
        display: none;
    }
    .p-about__content__img-sp {
        display: block;
        width: 100%;
    }
    .p-about__content__list {
        display: block;
        width: 100%;
    }
    .p-about__content__list ul {
        margin-top: 60px;
    }

    /*===================================
        contact
    ===================================*/
    .p-contact {
        background-image: url('image/contact-bg-sp.webp'); 
    }

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

    /*===================================
        フッター
    ===================================*/
    .l-footer nav {
        display: none;
    }    
    .l-footer__content {
        flex-direction: column;
    }

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

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

    .l-footer__content {
        padding:0;
    }

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