/* =========================
   about us
========================= */

/* セクション全体
   背景装飾を配置するため position: relative を追加 */
.aboutusarea {
    position: relative;
    overflow: hidden; /* 背景画像のはみ出し防止 */
	margin-bottom: 100px;
}

/* =========================
   上部テキスト
========================= */

.aboutus-up{
    margin-bottom: 100px;
}

/* 見出し */
.explanation-title{
    text-align: right;
    font-size: 32px;
}

/* 説明文 */
.explanation-p{
    color: #C5C5C5;
    text-align: center;
}

/* =========================
   背景装飾画像
========================= */

/* 左上の装飾（yello.png） */
.aboutusarea::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;   /* 画像サイズ調整 */
    height: 100%;

    background: url('/wp-content/themes/test_creator_team/assets/image/TOP/ABOUT/yello.png') no-repeat;
    background-size: contain;

    z-index: 0; /* コンテンツの背面 */
}

/* 右下の装飾（buru.png・左右反転） */
.aboutusarea::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;

    width: 320px;
    height: 320px;

    background: url('/wp-content/themes/test_creator_team/assets/image/TOP/ABOUT/buru.png') no-repeat;
    background-size: contain;

    transform: scaleX(-1); /* 左右反転 */

    z-index: 0;
}

/* セクション内の要素を前面に */
.aboutusarea > * {
    position: relative;
    z-index: 1;
}

/* =========================
   文字と画像
========================= */

.aboutus-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 30px;
}

/* =========================
   左：画像
========================= */

.image-aboutus {
    grid-column: 1;
    text-align: right;
}

.image-aboutus img{
    width: 30%;
}

/* =========================
   右：テキスト
========================= */

.aboutus-text {
    grid-column: 2;
    display: grid;
    grid-template-rows: auto auto;
}

/* タイトル */
.aboutus-title {
    font-size: 28px;
    font-weight: bold;
    text-align: left;
    margin: 0 0 6px 0; /* タイトルと本文の間隔 */
}

/* 本文 */
.aboutus-p {
    margin: 0;
}

/* =========================
   タイトル
========================= */

.worksarea {
    display: flex;
    align-items: center;      /* 縦中央 */
    justify-content: center;  /* 全体中央 */
    gap: 20px;                /* 線と画像の間隔 */
}

/* 左右の線を作る */
.worksarea::before,
.worksarea::after {
    content: "";
    flex: 1;                  /* 残り幅を線に */
    height: 1px;
    background-color: #000;   /* 線の色 */
	 transform: translateY(20px); /* ← 下にずらす量 */
}

/* 画像 */
.work-icon {
    display: block;
    width: 80px;              /* 画像サイズ調整 */
    height: auto;
}