/*
Theme Name: SA3-2026
Description: 全ページテンプレートで作成→固定ページでテンプレート選択して表示
Version: 1.0
*/

/* --- 基本デザイン --- */

/* カラーコード */
:root { 
  --base-color: rgb(0,0,0);
  --white-color: rgb(255,255,255);
  --shadow-color: rgb(238,238,238);;

  --foot-color:rgb(185, 195, 201);
  --dgray01-color:rgb(55, 55, 55);
  --bgray01-color:rgb(230, 235, 238);

  --toplink01: rgb(205, 213, 219);

  --btn01-green: rgb(58, 162, 55);
  --btn02-cyan: rgb(0, 140, 207);
  --btn01-shadow: rgb(120, 194, 236);
  --formbg01-color: rgb(198, 222, 235);

  --color-blue-pur: rgb(27, 30, 130);
  --color-violet: rgb(145, 59, 146);
  --color-red: rgb(255, 0, 0);
}

*{  /* ボックスの余白をサイズに含める */
  box-sizing: border-box;
}
body, h1, h2, h3, h4, h5, h6, input, textarea, select {
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif !important;
}

body {
  margin: 0 auto;
  padding: 0 auto;
  overflow-x: hidden !important;
  text-align:center;
  background-color: var(--white-color);

  /* pc */
  @media screen and (min-width: 1024px) {
    max-width:1200px;
    box-shadow: 0 0 10px 3px var(--foot-color);
    background-color: var(--shadow-color);
  }
  /* tablet  */
  @media only screen and (min-width: 768px) and (max-width: 1023px) {
    width:100%;
  }
  /* SP */
  @media screen and (max-width: 767px) {
    width:100%;
    overflow-x: hidden;
  }
}
@media screen and (max-width: 767px) {
  article {overflow: hidden; width: 100%;}
}

a{
  text-decoration: none;
  color: var(--base-color);
}

main {
  display: flex;
  flex-direction: column;
  text-align:left;
  margin: 0 auto;
  background-color: var(--white-color);
}

section {
  width: 100%;
}

/*.ページ基本・アクセント部分 */
.custom-content {
  position: relative;
  width: 100%;
  margin: 0;
  background: transparent; 
  padding: 10px 0 0px;
  overflow: visible;
}
@media screen and (min-width: 768px) {
  .custom-content::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 130px;
    background-image: linear-gradient(90deg, var(--color-blue-pur), var(--color-violet));
    clip-path: polygon(0 0, 100% 0, 100% 40%, 0 100%);
    z-index: 1;
  }
}
.diagonal {
  position: relative;
  z-index: 2;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.diagonal h2{
  color: var(--white-color);
  font-size: 1.6rem;
  font-weight: 700;
  margin:10px auto 0;
  padding: 5px;

  width: 95%;
  background-image: linear-gradient(90deg, var(--color-blue-pur), var(--color-violet));
  text-align: center;
  border-radius: 20px;

  @media screen and (min-width: 768px) {
    background-image: none;
    font-size: 1.8rem;
    padding: 0;
    line-height: 1.4;

    width: 85%;
    margin: 20px auto 10px;
  }

  @media screen and (min-width: 768px) {
    text-align: left;
  }
}

.bgray { /* PC-TBグレー囲みSPは白 */
  background: var(--white-color);
  @media screen and (min-width: 768px) {
    background: var(--bgray01-color);
  }
}

.btm-space{
  padding-bottom: 20px;
}

/* ==========================================================================
   WordPress 編集画面（エディタ）専用の親切ガイド（改訂版）
   ========================================================================== */
body.is-dark-theme .editor-styles-wrapper,
.editor-styles-wrapper {

    /* 💡 1. lead（見出し＋本文）エリア */
    .lead {
        border-left: 4px solid #0073aa !important;
        padding-left: 15px !important;
        margin-bottom: 30px !important;
        position: relative;
    }
    .lead::before {
        content: "【パターンA：見出し＋本文エリア（セクション）】";
        display: block;
        font-size: 12px;
        color: #aaa;
        margin-bottom: 8px;
    }

    /* 💡 2. box02（白背景＋本文のみ）エリア */
    /* ⚠️ 後ろに .bgray が「つかない」ときだけ適用する命令（:not）を使います */
    .box02:not(.bgray) {
        border-left: 4px solid #46b450 !important;
        padding-left: 15px !important;
        margin-bottom: 30px !important;
        position: relative;
    }
    .box02:not(.bgray)::before {
        content: "【パターンB：本文のみエリア（白背景）】";
        display: block;
        font-size: 12px;
        color: #aaa;
        margin-bottom: 8px;
    }

    /* 💡 3. box02 bgray（青灰背景＋本文のみ）エリア */
    /* ⚠️ .box02 と .bgray の両方があるときに適用します */
    .box02.bgray {
        border-left: 4px solid #72777c !important; /* ガイドの線をグレーに */
        padding-left: 15px !important;
        margin-bottom: 30px !important;
        position: relative;
    }
    .box02.bgray::before {
        content: "【パターンC：本文のみエリア（青灰背景）】";
        display: block;
        font-size: 12px;
        color: #aaa;
        margin-bottom: 8px;
    }
}