/**
 * Layout - Wrapper & Container
 *
 * メインラッパー、コンテナ、グリッドレイアウトの定義
 * 旧: .wrapper, .txt-area, .twothird などを統合
 *
 * @since 2.0.0
 */

/* ========================================
 * Main Wrapper
 * ======================================== */

.wrapper {
  max-width: 100%;
  margin: 0 auto;
  padding: 0;

  /* 固定ヘッダーオフセット（全ページ共通） */
  padding-top: var(--header-height-desktop);
}

/* トップページでは適用しない */
body.home .wrapper,
body.front-page .wrapper,
.top-page .wrapper {
  padding-top: 0;
}

/* ========================================
 * Text Area (Content Container)
 * ======================================== */

.txt-area {
  width: 100%;
  margin: 0 auto;
}

/* PC画面（960px以上） */
@media (min-width: 960px) {
  .txt-area,
  #main.txt-area {
    width: var(--max-width-content);
    margin: 0 auto; /* 中央配置を明示的に指定 */
  }
}

/* ========================================
 * Content Sections
 * ======================================== */

.twothird {
  width: 100%;
  margin: 0;
}

/* ========================================
 * Profile Page - Center Layout
 * プロフィールページ専用の中央配置レイアウト
 * @since 2.4.1 (2026-01-29)
 * ======================================== */

/* プロフィールページ専用セレクタ */
.page-template-page-profile-php .twothird {
  width: 100%;
}

/* PC画面（960px以上） */
@media (min-width: 960px) {
  .page-template-page-profile-php .twothird {
    max-width: 800px;      /* 最大幅800px（読みやすさ考慮） */
    margin: 0 auto;        /* 左右中央配置 */
  }
}

/* タブレット画面（768px-959px） */
@media (min-width: 768px) and (max-width: 959px) {
  .page-template-page-profile-php .twothird {
    max-width: 700px;      /* タブレット用最大幅 */
    margin: 0 auto;        /* 左右中央配置 */
  }
}

/* モバイル画面（767px以下） */
@media (max-width: 767px) {
  .page-template-page-profile-php .twothird {
    padding-left: 5%;
    padding-right: 5%;
  }
}

.third {
  width: 100%;
  margin: 0;
  border-top: 1px solid var(--color-border-base);
}

/* ========================================
 * Area Layout (Two-Column Layout)
 * ======================================== */

.area {
  margin-top: 11px;
}

.area .l_box {
  float: left;
  position: relative;
  z-index: 1;
}

.area .r_box {
  float: right;
  width: 100%;
  margin: 0 0 0 -125px;
}

.area .r_box .box {
  margin: 0 0 0 125px;
}

/* Links Page専用レイアウト */
#content-links .area .r_box {
  float: right;
  width: 100%;
  margin: 0 0 0 -320px;
}

#content-links .area .r_box .box {
  margin: 0 0 0 320px;
}

/* ========================================
 * Border Utilities
 * ======================================== */

.border_01 {
  border-bottom: 1px solid var(--color-border-base);
  margin: var(--spacing-xl) 0 var(--spacing-sm) 0;
}

/* ========================================
 * Responsive Layout
 * ======================================== */

/* Tablet (768px〜959px) */
@media (min-width: 768px) and (max-width: 959px) {
  .wrapper {
    width: 100%;
    padding: 0 5%;

    /* 固定ヘッダーオフセット（タブレット） */
    padding-top: var(--header-height-tablet);
  }

  /* トップページ除外 */
  body.home .wrapper,
  body.front-page .wrapper,
  .top-page .wrapper {
    padding-top: 0;
  }

  .txt-area,
  #main.txt-area {
    width: 100%;
    max-width: var(--max-width-tablet);
    margin: 0 auto; /* タブレットでも中央配置を明示 */
  }
}

/* Mobile (767px以下) */
@media (max-width: 767px) {
  .wrapper {
    width: 100%;
    padding: 0 5%;

    /* 固定ヘッダーオフセット（モバイル） */
    padding-top: var(--header-height-mobile);
  }

  /* トップページ除外 */
  body.home .wrapper,
  body.front-page .wrapper,
  .top-page .wrapper {
    padding-top: 0;
  }

  .txt-area {
    width: 100%;
  }

  /* モバイルでは2カラムレイアウトを解除 */
  .area .l_box {
    float: none;
  }

  .area .r_box {
    float: none;
    margin: 0;
  }

  .area .r_box .box {
    margin: 0;
  }

  /* Links Page */
  #content-links .area .r_box {
    margin: 0;
  }

  #content-links .area .r_box .box {
    margin: 0;
  }
}

/* Mobile Landscape (480px〜767px) */
@media (min-width: 480px) and (max-width: 767px) {
  .wrapper {
    width: 100%;
    padding: 0 5%;
  }

  .txt-area {
    width: 100%;
  }
}