@charset "UTF-8" ;

html {
    font-size: 100%;
}

body {
    font-family: "Zen Kaku Gothic New", "Shippori Mincho", "Playwrite DE Grund", sans-serif;
    font-weight: 400;
    font-style: normal;
    color: var(--unnamed-color-0070b3);
    margin: 0 auto;
    max-width: 100%;
}

a {
    text-decoration: none;
}

img {
    max-width: 100%;
}

li {
    list-style: none;
}

.zen-kaku-gothic-new-light {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.zen-kaku-gothic-new-regular {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.zen-kaku-gothic-new-medium {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.zen-kaku-gothic-new-bold {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.zen-kaku-gothic-new-black {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 900;
  font-style: normal;
}

.playwrite-de-grund-light {
  font-family: "Playwrite DE Grund", cursive;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
}

.shippori-mincho-regular {
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  font-style: normal;
}

.shippori-mincho-medium {
  font-family: "Shippori Mincho", serif;
  font-weight: 500;
  font-style: normal;
}

.shippori-mincho-semibold {
  font-family: "Shippori Mincho", serif;
  font-weight: 600;
  font-style: normal;
}

.shippori-mincho-bold {
  font-family: "Shippori Mincho", serif;
  font-weight: 700;
  font-style: normal;
}

.shippori-mincho-extrabold {
  font-family: "Shippori Mincho", serif;
  font-weight: 800;
  font-style: normal;
}

.wrap1100{
    max-width: 1100px;
    width: 100%;
    margin-inline: auto;
}

:root {

/* Colors: */
--unnamed-color-0000ff: #0000FF;
--unnamed-color-66ccff: #66CCFF;
--unnamed-color-00a0e9: #00A0E9;
--unnamed-color-0070b3: #0070B3;
--unnamed-color-095988: #095988;
--unnamed-color-dedede: #DEDEDE;
---ff00f5_memo: #FF00F5;
---53cde3_career: #53CDE3;
---e1f252_contact: #E1F252;
--unnamed-color-fd95e2: #FD95E2;
--unnamed-color-f4d4ec: #F4D4EC;
--unnamed-color-fdf5fb: #FDF5FB;
--unnamed-color-a082d8: #A082D8;
--unnamed-color-e0d3f5: #E0D3F5;
--unnamed-color-f6f2fc: #F6F2FC;
--unnamed-color-58ba66: #58BA66;
--unnamed-color-cfebd1: #CFEBD1;
--unnamed-color-eaf5eb: #EAF5EB;
--unnamed-color-f08686: #F08686;
--unnamed-color-f7d2d2: #F7D2D2;
--unnamed-color-fceded: #FCEDED;
--unnamed-color-c4ab22: #C4AB22;
--unnamed-color-e8e3c3: #E8E3C3;
--unnamed-color-f4f2e4: #F4F2E4;
--unnamed-color-5f7dd3: #5F7DD3;
--unnamed-color-edf1fc: #EDF1FC;
--unnamed-color-f7a068: #F7A068;
--unnamed-color-fff5ef: #FFF5EF;
--unnamed-color-e7f0f5: #E7F0F5;
--unnamed-color-9b8e75: #9B8E75;
--unnamed-color-f2efe9: #F2EFE9;
--unnamed-color-f4f4f4: #F4F4F4;
--unnamed-color-f0f8fa: #F0F8FA;
---e9f5f8★: #E9F5F8;
--unnamed-color-ceebf2: #CEEBF2;
--unnamed-color-def2f7: #DEF2F7;
--unnamed-color-d3e4e8: #D3E4E8;
--unnamed-color-ffffff00: #FFFFFF00;

/* Font/text values */
--unnamed-font-family-zen-kaku-gothic-new: Zen Kaku Gothic New;
--unnamed-font-style-normal: normal;
--unnamed-font-weight-normal: normal;
--unnamed-font-weight-medium: medium;
--unnamed-font-size-16: 16px;
--unnamed-font-size-20: 20px;
--unnamed-font-size-24: 24px;
--unnamed-character-spacing-0: 0px;
--unnamed-character-spacing-1-2: 1.2px;
--unnamed-line-spacing-28: 28px;
--unnamed-line-spacing-36: 36px;
--unnamed-line-spacing-40: 40px;
}

/* Character Styles */
.h3 {
font-family: var(--unnamed-font-family-zen-kaku-gothic-new);
font-style: var(--unnamed-font-style-normal);
font-weight: var(--unnamed-font-weight-normal);
font-size: var(--unnamed-font-size-24);
line-height: var(--unnamed-line-spacing-40);
letter-spacing: var(--unnamed-character-spacing-1-2);
color: var(--unnamed-color-0070b3);
}
.h4 {
font-family: var(--unnamed-font-family-zen-kaku-gothic-new);
font-style: var(--unnamed-font-style-normal);
font-weight: var(--unnamed-font-weight-medium);
font-size: var(--unnamed-font-size-20);
line-height: var(--unnamed-line-spacing-36);
letter-spacing: var(--unnamed-character-spacing-0);
color: var(--unnamed-color-0070b3);
}
.p {
font-family: var(--unnamed-font-family-zen-kaku-gothic-new);
font-style: var(--unnamed-font-style-normal);
font-weight: var(--unnamed-font-weight-normal);
font-size: var(--unnamed-font-size-16);
line-height: var(--unnamed-line-spacing-28);
letter-spacing: var(--unnamed-character-spacing-0);
color: var(--unnamed-color-0070b3);
}

/* **************** 共通 ******************/

.wraper {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 133px;
}

.about-us-philosophy-title,
.bout-us-profile-title,
.about-us-history-title,
.about-us-message-title{
    display: flex;
    flex-direction: column;
    max-width: 100%;
    width: 100%;
}

.title-ja {
    font-size: 40px;
    line-height: 1.45;
    display: flex;
    max-width: 100%;
    height: auto;
    background: transparent linear-gradient(90deg, #E9F5F800 0%, #E9F5F8 21%, #E9F5F8 79%, #E9F5F800 100%) 0% 0% no-repeat padding-box;
    align-items: center;
    justify-content: center;
}

.title-en {
    font-size: 16px;
    max-width: 100%;
    display: flex;
    justify-content: center;
    padding: 18px 0 53px;
}

/* *************** btn ********************/


/* menuボタン */
/* ボタンを囲むコンテナを中央に配置 */
.about-us-menu {
    display: flex;
    justify-content: center;
    margin-bottom: 64px;
}

/* ボタンのリストを横並びにする */
.about-us-menu-list {
    display: flex;
    padding: 0;
    margin: 0;
    gap: 8px; /* ボタン間の間隔を設定 */

}

/* 各ボタンのスタイル */
.about-us-menu-list-item-link {
    display: flex; /* flexboxを使い、中身を横並びにする */
    align-items: center; /* 垂直方向の中央に揃える */
    justify-content: center;
    width: 200px;
    height: 46px;
    background-color: #FFF; /* ボタンの中の色を白に */
    border: 1px solid #0070B3; /* 外枠の色を青に */
    border-radius: 50px; /* 角丸にする */
    color: #0070B3; /* 文字の色を青に */
    text-decoration: none; /* 下線を非表示に */
    transition: all 0.3s ease; /* ホバー時の滑らかなアニメーション */
}

/* アクティブなボタンのスタイル（例：選択中） */
.about-us-menu-list-item-link-active {
    background-color: #0070B3;
    color: #FFF;
}

/* 矢印のスタイル */
.about-us-menu-list-item-link-arrow {
    display: inline-block;
    position: relative;

}

/* 矢印の形状 */
.about-us-menu-list-item-link::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 15px;
    width: 6px;
    height: 6px;
    border: 1px solid #0070B3;
    border-top: none;
    border-left: none;
    transform: translate(-50%, -50%) rotate(45deg);
}

/* アクティブなボタン内の矢印の色 */
.about-us-menu-list-item-link-active .about-us-menu-list-item-link-arrow::after {
    border-color: #FFF;
    border-top: none;
    border-left: none;
}


/* *************** body ********************/



/* *************** top ********************/
.about-us-top {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin: 50px 0 88px;
}

.about-us-top-ja {
    font-size: 30px;
    letter-spacing: 7.5px;
    background: transparent linear-gradient(90deg, var(--unnamed-color-ffffff00) 0%, #FFFFFF 17%, #FFFFFF 83%, var(--unnamed-color-ffffff00) 100%) 0% 0% no-repeat padding-box;
}

.about-us-top-en {
    font-size: 16px;
    background: transparent linear-gradient(90deg, var(--unnamed-color-ffffff00) 0%, #FFFFFF 17%, #FFFFFF 83%, var(--unnamed-color-ffffff00) 100%) 0% 0% no-repeat padding-box;
}

.about-us-mv-img {
    margin-top: 64px;
}

/* *************** mv ********************/

.about-us-mv {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    max-width: 1100px;
    width: 100%;
    margin-inline: auto;
}

.about-us-mv-img-sp {
    display: none;
}

/* .about-us-mv-title-img-sp {
    display: none;
}

.about-us-mv-title-bg-sp {
    display: none;
} */

.about-us-mv-title {
    display: grid;
    place-items: center; /* 垂直・水平方向の中央揃え */
    position: relative;
    width: 100%; /* または特定の幅 */
    height: auto; /* または特定の高さ */
}

.about-us-mv-title-bg,
.about-us-mv-title-bg-sp,
.about-us-mv-title-img,
.about-us-mv-title-img-sp {
  grid-area: 1 / 1 / 2 / 2; /* 両方の画像を同じグリッドセルに配置 */
}

.about-us-mv-title-bg,
.about-us-mv-title-bg-sp {
  z-index: 1; /* 背景を前面に */
}

.about-us-mv-title-img,
.about-us-mv-title-img-sp {
  z-index: 2; /* タイトルを背景の背後に */
}

/* *************** philosophy ********************/

/* about-us-philosophy-text-titleのクラスを持つ要素に相対配置を設定 */
.about-us-philosophy-text-title {
    position: relative;
    display: inline-block; /* 疑似要素の幅をテキストに合わせるために必要 */
}

/* 疑似要素で下線を作成 */
.about-us-philosophy-text-title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -8px;
    width: 6%;
    height: 1px;
    background-color: #0070B3;
}


.about-us-philosophy-text-title-right1 {
    padding-right: 236px;
}

.about-us-philosophy-text-title-right2 {
    padding-right: 164px;
}

.about-us-philosophy {
    margin-top: 90px;
    background-image: url(../img/logomark_blur.png) ;
    background-repeat: no-repeat;
    background-position: 50% 22%;
    background-size: 260px 260px;
}

.about-us-philosophy {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.about-us-philosophy-text {
    display: flex;
    justify-content: center;
    gap: 30px;
    line-height: 1.625;
    flex-direction: column;
}

.pb100px{
    padding-bottom: 100px;
    background-image: url(../img/about-us_bubbles.png) ;
    background-repeat: no-repeat;
    background-position: 100% 100%;
    background-size: 173px 142px;
}

/* タイトルのスタイル */
.about-us-philosophy-text-title {
    /* 必要に応じてスタイルを調整 */
    flex-shrink: 0; /* 幅が縮まないようにする */
    font-size: 24px;
    height: fit-content;
}

.about-us-philosophy-text-item {
    margin-bottom: 1em;
}

.about-us-philosophy-text-item-emphasis {
    font-size: 24px;
    color: var(--unnamed-color-00a0e9);
}

.about-us-philosophy-text {
    display: flex;
    justify-content: center;
    gap: 30px;
}

.philosophy-section {
    line-height: 1.625;
    display: flex;
}

.about-us-philosophy-text-item-emphasis-break {
    display: none;
}

/* *************** profile ********************/

.about-us-profile {
    margin-top: 91px;
}

/* テーブル全体 */
.about-us-profile-text-table {
    width: 100%; /* 親要素に合わせる */
    border-collapse: collapse; /* セルの境界線を重ねて1本にする */
    border: 1px solid #E5E5E5; /* 全体の枠線 */
}

/* ヘッダーとデータのセル */
.about-us-profile-text-table th,
.about-us-profile-text-table td {
    padding: 16px; /* セルの内側の余白 */
    border: 1px solid #E5E5E5; /* セルの境界線 */
    vertical-align: top; /* 文字を上寄せにする */
}

/* ヘッダー（法人名など）のスタイル */
.about-us-profile-text-table-row-header {
    width: 272px;
    background: #F6F5F4;
    font-size: 14px;
    font-weight: 600;
    text-align: end;
}

/* データ（株式会社リズムなど）のスタイル */
.about-us-profile-text-table-row-data {
    width: 700px;
    background: #FFFFFF;
    font-size: 15px;
    line-height: 1.6em;
}

/* *************** history ********************/

.about-us-history-top {
    margin-top: 200px;
}

.about-us-history-info {
    font-size: 12px;
    padding-bottom: 64px;
    text-align: center;
}

.about-us-history-info-mark::after {
    content: "※";
    color: #0070B3;
    font-weight: bold;
}

/* 沿革セクション全体 */
.about-us-history {
    position: relative;
    max-width: 856px;
    width: 100%;
}

/* タイムラインの全体コンテナ */
.about-us-history-timeline {
    position: relative;
    margin: 0 auto;
    padding: 0 10px;
    max-width: 856px;
}

/* タイムラインの垂直線 */
.about-us-history-timeline::before {
    content: '';
    position: absolute;
    top: -52px;
    left: 120px;
    width: 2px;
    height: 110%;
    background-color: #e0e0e0;
    z-index: 0;
}

/* 各タイムラインの項目 */
.about-us-history-timeline-item {
    position: relative;
    display: flex;
    align-items: flex-start;
    margin-bottom: 2rem;
    padding-left: 130px; /* 垂直線と年号のためのスペース */
}

/* タイムラインの丸い点 */
.about-us-history-timeline-dot {
    position: absolute;
    left: 101px; /* 垂直線上に配置 */
    width: 20px;
    height: 20px;
    background-color: #E9F5F7;
    border: 3px solid #fff;
    border-radius: 50%;
    z-index: 1;
}

/* 内側の小さな丸を擬似要素で作成 */
.about-us-history-timeline-dot::before {
    content: ""; /* 擬似要素の必須プロパティ */
    position: absolute;
    top: 50%; /* 垂直方向の中央に配置 */
    left: 50%; /* 水平方向の中央に配置 */
    transform: translate(-50%, -50%); /* 中央揃えの微調整 */
    width: 5px; /* 内側の丸の幅 */
    height: 5px; /* 内側の丸の高さ */
    background-color: #0070B3; /* 内側の丸の色 */
    border-radius: 50%;
}

/* 日付のスタイル（西暦） */
.about-us-history-timeline-date1 {
    position: absolute;
    left: 0;
    width: 80px;
    text-align: right;
    font-weight: bold;
    display: flex;
    align-items: flex-end;
}

.about-us-history-timeline-date1-number {
    font-family: "Playwrite DE Grund";
    font-size: 1.25rem;
}

.about-us-history-timeline-date1-year {
    font-size: 0.875rem;
    margin-left: 2px;
}

/* 日付のスタイル（和暦） */
.about-us-history-timeline-date2 {
    font-size: 0.875rem;
    white-space: nowrap;
    margin-right: 1rem;
}

/* コンテンツのスタイル */
.about-us-history-timeline-content {
    padding: 0 1rem;
    flex-grow: 1;
}

/* コンテンツ内の項目 */
.about-us-history-timeline-content-item {
    font-size: 0.875rem;
    margin: 0;
    padding-bottom: 0.875em;
}

/* *************** message ********************/

.about-us-message {
    margin-top: 267px;
    margin-bottom: 160px;
}

.about-us-message-content {
    display: flex;
    flex-direction: column;
    text-align: center;
}

.about-us-message-content-purpose {
    font-family: "Shippori Mincho";
    font-size: 24px;
}

.about-us-message-content-box {
    display: flex;
    margin-top: 40px;
    gap: 40px;
    max-width: 975px;
    margin-inline: auto;
}


.about-us-message-content-box-item {
    display: flex;
    flex-direction: column;
    text-align: center;
}

.about-us-message-content-box-item img{
    max-width: 200px;
    height: auto;
    margin-inline: auto;
}

.about-us-message-content-box-item-text1 {
    width: 63%;
    margin-top: 20px;
    text-align: left;
}

.about-us-message-content-box-item-text1-item {
    font-size: 14px;
    white-space: nowrap
}

.about-us-message-content-box-item-text1-item-big {
    font-size: 18px;
}

.about-us-message-content-box-item-text1-item-big {
    font-size: 18px;
    padding-left: 1rem;
}

.about-us-message-content-box-item-text2 {
    text-align: left;
    line-height: normal;
    width: calc(100% - 30px);
    margin-inline: auto;
    line-height: 1.625;
}

@media screen and (min-width: 768px) {
    .about-us-message-content-box-item-text2{
        width: 100%;
    }
}

.about-us-message-content-box-item-text2-item {
    margin-bottom: 50px;
}

.about-us-message-content-purpose {
    position: relative;
}

.about-us-message-content-purpose::after {
    content: '';
    display: block;
    width: 75%;
    height: 4px;
    margin: 18px auto 0 auto;
    background: var(---e9f5f8★) 0% 0% no-repeat padding-box;
    border-radius: 2px;
}

.about-us-message-content-box-item-text1-sp {
    display: none;
}

.about-us-message-content-purpose-br-sp {
    display: none;
}


/* レスポンシブ対応 */
@media screen and (max-width: 768px) {


    /* ****************** 共通 ***********************/
    
    main {
        font-size: 14px;
    }

    .title {
    display: flex;
    flex-direction: column;
    }

    .title-ja {
        font-size: 28px;
        padding: 10px 325px;
        display: flex;
        max-width: 100%;
        height: 56px;
        background: transparent linear-gradient(90deg, #E9F5F800 0%, #E9F5F8 21%, #E9F5F8 79%, #E9F5F800 100%) 0% 0% no-repeat padding-box;
        align-items: center;
        white-space: nowrap;
        box-sizing: border-box; /* paddingを含めた幅に */
    }

    .title-en {
        font-size: 12px;
        max-width: 100%;
        display: flex;
        justify-content: center;
        padding: 18px 0 53px;
        white-space: nowrap;
        box-sizing: border-box; /* paddingを含めた幅に */
    }

    /* ****************** menu ***********************/

    .about-us-menu-list {
        display: flex;
        flex-wrap: wrap; /* 要素が収まらない場合に折り返す */
        justify-content: center; /* 左右の中央揃え */
        align-items: center; /* 垂直方向の中央揃え */
        gap: 16px; /* ボタン間の間隔 */
        list-style: none; /* リストの点を消す */
        padding: 0;
        margin: 0;
    }

    .about-us-menu-list-item {
        width: calc(50% - 8px); /* 2列にするための幅を設定。gapの半分を引く */
        /* または min-width を設定して柔軟に対応 */
        /* min-width: 150px; */
        box-sizing: border-box; /* paddingとborderを幅に含める */
        font-size: 14px;
    }

    .about-us-menu-list {
            gap: 8px;
            width: 100%;
    }

    .about-us-menu-list-item-link{
        width: 100%;
    }

    .about-us-menu {
        width: 100%;
        padding: 0 4px;
    }

    .about-us-mv {
        flex-direction: column;
        align-items: center;
    }

    .about-us-mv-img {
        margin-top: 24px;
        width: 100%;
        height: auto;
    }

    .about-us-mv-title {
        width: 80%;
        margin: 0 auto;
    }

    /* ****************** top ***********************/

    .about-us-top {
        margin: 32px 0 40px;
    }

    .about-us-top-ja {
        font-size: 22px;
        letter-spacing: 3px;
    }

    .about-us-top-en {
        font-size: 12px;
    }

    


/* ************************* profile ***********************/

    .about-us-profile{
        margin-top: 0;
    }

        /* 会社概要テーブルを縦並びに */
    .about-us-profile-text-table {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
        border: none;
    }

    .about-us-profile-text-table-row {
        display: block;
        margin-bottom: 16px;
        border: none;
    }

    .about-us-profile-text-table-row-header {
        display: block;
        width: 100%;
        background: #F6F5F4;
        text-align: left;
        border-bottom: none;
        font-size: 13px;

        width: calc( 100% - 30px);
        margin-inline: auto;
        line-height: 1.85;
    }

    .about-us-profile-text-table th{
        padding: 10px 0px 11px 16px;
    }
    
    .about-us-profile-text-table-row-data {
        display: block;
        width: calc(100% - 30px);
        margin-inline: auto;
        background: #FFFFFF;
        font-size: 15px;
        line-height: 1.6em;
        padding: 8px 8px 12px 8px;
        border-top: none;
    }

/* ************************* philosophy ***********************/

    .philosophy-section {
        position: relative;
        display: flex;
        flex-direction: column;
    }

    .about-us-philosophy {
        margin-top: 40px;
        padding: 0 4px;
        margin-bottom: 138px;
    }

    .about-us-philosophy-text{
        width: calc( 100% - 30px);
        margin-inline: auto;
        font-size: 14px;
    }

    .about-us-philosophy-text-title {
        flex-shrink: 0;
        font-size: 20px;
        line-height: 1.45;
        margin-bottom: 24px;
    }

    .about-us-philosophy-text {
        gap: 12px;
    }

    .about-us-philosophy-text-item-emphasis {
        font-family: "Shippori Mincho";
        font-size: 24px;
        color: var(--unnamed-color-00a0e9);
    }

    .about-us-philosophy-text-item-emphasis {
        font-size: 20px;
    }

/* ************************* history *********************** */


        /* タイムラインの全体設定（必要に応じて調整） */
    .about-us-history {
        font-size: 14px;
    }
    .about-us-history-info {
        font-size: 10px;
        margin-bottom: 32px;
    }
    .about-us-history-timeline::before {
        /* 垂直線の位置調整 */
        left: 99px; 
        top: -30px; 
        height: 102.5%;
    }

    /* 各タイムラインの項目 - Gridでレイアウト */
    .about-us-history-timeline-item {
        display: grid;
        /* [日付: auto] [ドット: 24px] [コンテンツ: 1fr] の3列を定義 */
        grid-template-columns: auto 24px 1fr; 
        align-items: start;
        gap: 0 8px; /* 列間の隙間 */
        padding-left: 0;
        margin-bottom: 24px;
    }

    /* 1. 西暦（date1）- 縦並びの隙間を詰める */
    .about-us-history-timeline-date1 {
        position: static;
        display: flex;
        text-align: left;
        align-items: flex-end;
        font-size: 14px;
        /* 下マージンを0に設定 */
        margin-bottom: 0; 
        grid-column: 1; /* 1列目 */
        grid-row: 1; /* 1行目 */
        margin-left: -5px;
    }
    .about-us-history-timeline-date1-number {
        font-size: 14px;
    }

    /* 2. 和暦（date2）- 縦並びの隙間を詰める */
    .about-us-history-timeline-date2 {
        display: block;
        margin-left: 0;
        text-align: left;
        font-size: 0.875rem;
        /* 上マージンを0に設定 */
        margin-top: 0; 
        grid-column: 1; /* 1列目 */
        grid-row: 2; /* 2行目 */
    }

    /* 3. ドット - 2行分にまたがらせ、線の上に配置 */
    .about-us-history-timeline-dot {
        position: relative;
        left: -2px; 
        width: 14px;
        height: 14px;
        margin: 0 auto;
        grid-column: 2; /* 2列目 */
        /* ドットを西暦と和暦の行全体にまたがらせる */
        grid-row: 1 / span 2; 
        top: 2px; 
    }

    /* 4. コンテンツ - 上部の空白を解消するため、2行分にまたがらせる */
    .about-us-history-timeline-content {
        grid-column: 3; /* 3列目 */
        /* 1行目から2行目までまたがることで、西暦の横の上端からコンテンツが開始する */
        grid-row: 1 / span 7; 
        padding: 0 0 0 4px;
        flex-grow: 1;
    }

    .about-us-history-timeline-content-item {
        font-size: 14px;
        line-height: 1.5;
        margin: 0;
        padding: 0;
    }

    .about-us-history-timeline-date1, .about-us-history-timeline-date2 {
            width: 56px;
            line-height: 1.5;
            align-items: baseline;
        }
        
    .about-us-history-timeline{
        width: calc(100% - 30px);
        margin-inline: auto;
        padding: 0;
    }

/* ************************* message ***********************/

    .about-us-message {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-top: 201px;
        margin-bottom: 0;
    }

    .about-us-message-content-box {
        display: flex;
        flex-direction: column;
        gap: 24px;
    }

    .about-us-message-content-box-item-img-sp {
        display: block;
        width: 35%;
        border-radius: 125px;
        margin: 0 auto;
    }

    .about-us-message-content-box-item-img {
        display: none;
    }

    .about-us-message-content-purpose {
        font-size: 20px;
        line-height: 1.5;
    }

    .about-us-message-content-box-item-text1 {
    display: none;
    }

    .about-us-message-content-box-item-text1-sp {
        display: flex;
        align-items: end;
        flex-direction: column;
        margin: 0 auto;
        padding-right: 92px;
        margin-bottom: 200px;
    }


    .about-us-message-content-purpose-br-sp {
        display: inline;
}


}

/* レスポンシブ対応 */
@media screen and (max-width: 768px) {
    main {
        font-size: 12px;
    }

    .wraper {
        margin: 0 16px;
    }

    .title-ja {
        font-size: 24px;
        padding: 10px 150px;
        height: 48px;
    }

    .title-en {
        font-size: 10px;
        margin: 12px 0 40px;
        padding: 0;
    }

    /* ****************** menu ***********************/

    .about-us-menu-list-item {
        width: 167.5px;
    }

    .about-us-mv-title {
        width: 90%;
    }

    /* ****************** top ***********************/

    .about-us-top-ja {
        font-size: 20px;
        letter-spacing: 2px;
    }

    .about-us-top-en {
        font-size: 10px;
    }

    .about-us-top {
        margin: 24px 0 32px;
    }

    .about-us-mv-img {
        margin-top: 16px;
    }

    /* ************************* profile ***********************/
    
    .about-us-profile-text-table-row-data {
        font-size: 14px;
        padding: 6px 6px 8px 6px;
    }

    /* ************************* philosophy ***********************/

    .about-us-philosophy-text-item.about-us-philosophy-text-item-emphasis {
        font-size: 20px;
        line-height: 1.5em;
    }

    .about-us-philosophy-text-item-emphasis-break {
        display: inline;
    }

    /* ************************* history ***********************/

    .about-us-history-info {
        margin-bottom: 71px;
        text-align: left;
        width: calc(100% - 30px);
        margin-inline: auto;
        padding-bottom: 0;
        line-height: 1.5;
    }

    .about-us-history-timeline-dot {
        width: 12px;
        height: 12px;
    }

    .about-us-history-timeline-dot::before {
        width: 4px;
        height: 4px;
    }

    .about-us-history-timeline::before {
        left: 63px;
    }

    .about-us-history-timeline-date1,
    .about-us-history-timeline-date2 {
        width: 56px;
    }

    .about-us-history-timeline-item {
        grid-template-columns: auto 10px 1fr;
        gap: 0 2px;
    }

    .about-us-history-timeline-dot {
        left: -11px;
    }

    .about-us-history-timeline-content {
        padding: 0 0 0 2px;
    }

    .about-us-history-top {
        margin-top: 160px;
    }
    .about-us-history {
        font-size: 12px;
    }

    .about-us-history-timeline-date2 {
        display: block;
        margin-left: -5px;
        text-align: left;
        margin-top: 2px;
    }

    .about-us-message-content-purpose::after {
        width: 90%;
        height: 3px;
        margin: 12px auto 0 auto;
    }

    .about-us-message-content-box-item-text1-sp {
        padding-right: 20px;
        font-size: 12px;
    }

    .about-us-message-content-box-item-text2-item {
        font-size: 14px;
        line-height: 1.74;
    }

    .about-us-message {
        margin-top: 150px;
    }

    .about-us-message-content-box-item-text2-item-break {
        display: none;
    }
}