/*
Theme Name: MyClerk
Description: 株式会社マイクラーク コーポレートサイト用テーマ。PHP 7.4 / 8.4 両対応。
Version: 2.0.0
Author: CREATEONE
Author URI: https://createone.jp/
Text Domain: myclerk
Requires PHP: 7.4
Requires at least: 6.0
*/
@charset "utf-8";

/* =========================================================
 * Subtitle helpers (formerly options/editor/editor-style.css)
 * Inlined 2026-05-25 to remove the @import indirection and the
 * legacy options/editor/ directory tree.
 * ========================================================= */

/*-------------------------サブタイトル1*/
h2.subtitle01 {
  line-height: 60px;
  color: #0CCED9;
  font-size: 130%;
  font-weight: bold;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #FFF), color-stop(0.00, #EDEEF0));
  background: -webkit-linear-gradient(top, #EDEEF0 0%, #FFF 100%);
  background: -moz-linear-gradient(top, #EDEEF0 0%, #FFF 100%);
  background: -o-linear-gradient(top, #EDEEF0 0%, #FFF 100%);
  background: -ms-linear-gradient(top, #EDEEF0 0%, #FFF 100%);
  background: linear-gradient(top, #EDEEF0 0%, #FFF 100%);
  border-top: 5px solid #0CCED9;
  padding: 0 30px;
  margin-bottom: 30px;
}

@media (max-width: 768px) {
  h2.subtitle01  {
    line-height: 1.2em !important;
    color: #0CCED9;
    font-size: 130%;
    font-weight: bold;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #FFF), color-stop(0.00, #EDEEF0));
    background: -webkit-linear-gradient(top, #EDEEF0 0%, #FFF 100%);
    background: -moz-linear-gradient(top, #EDEEF0 0%, #FFF 100%);
    background: -o-linear-gradient(top, #EDEEF0 0%, #FFF 100%);
    background: -ms-linear-gradient(top, #EDEEF0 0%, #FFF 100%);
    background: linear-gradient(top, #EDEEF0 0%, #FFF 100%);
    border-top: 5px solid #0CCED9;
    padding: 0.5em;
    margin-bottom: 1em !important;
  }
}

/*-------------------------サブタイトル2*/
h2.subtitle02 {
  line-height: 60px;
  color: #6A3906;
  font-size: 130%;
  font-weight: bold;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #FFF), color-stop(0.00, #EDEEF0));
  background: -webkit-linear-gradient(top, #EDEEF0 0%, #FFF 100%);
  background: -moz-linear-gradient(top, #EDEEF0 0%, #FFF 100%);
  background: -o-linear-gradient(top, #EDEEF0 0%, #FFF 100%);
  background: -ms-linear-gradient(top, #EDEEF0 0%, #FFF 100%);
  background: linear-gradient(top, #EDEEF0 0%, #FFF 100%);
  border-top: 5px solid #6A3906;
  padding: 0 30px;
  margin-bottom: 40px;
}

@media (max-width: 768px) {
  h2.subtitle02 {
    line-height: auto;
    color: #6A3906;
    font-size: 110%;
    font-weight: bold;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #FFF), color-stop(0.00, #EDEEF0));
    background: -webkit-linear-gradient(top, #EDEEF0 0%, #FFF 100%);
    background: -moz-linear-gradient(top, #EDEEF0 0%, #FFF 100%);
    background: -o-linear-gradient(top, #EDEEF0 0%, #FFF 100%);
    background: -ms-linear-gradient(top, #EDEEF0 0%, #FFF 100%);
    background: linear-gradient(top, #EDEEF0 0%, #FFF 100%);
    border-top: 5px solid #6A3906;
    padding: 0 1em;
    margin-bottom: 1em !important;
  }
}

/*-------------------------サブタイトル3*/
h2.subtitle03  {
  line-height: 60px;
  color: #028B5F;
  font-size: 130%;
  font-weight: bold;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #FFF), color-stop(0.00, #EDEEF0));
  background: -webkit-linear-gradient(top, #EDEEF0 0%, #FFF 100%);
  background: -moz-linear-gradient(top, #EDEEF0 0%, #FFF 100%);
  background: -o-linear-gradient(top, #EDEEF0 0%, #FFF 100%);
  background: -ms-linear-gradient(top, #EDEEF0 0%, #FFF 100%);
  background: linear-gradient(top, #EDEEF0 0%, #FFF 100%);
  border-top: 5px solid #028B5F;
  padding: 0 30px;
}

@media (max-width: 768px) {
  h2.subtitle03 {
    color: #028B5F;
    font-size: 1.6rem;
    font-weight: bold;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #FFF), color-stop(0.00, #EDEEF0));
    background: -webkit-linear-gradient(top, #EDEEF0 0%, #FFF 100%);
    background: -moz-linear-gradient(top, #EDEEF0 0%, #FFF 100%);
    background: -o-linear-gradient(top, #EDEEF0 0%, #FFF 100%);
    background: -ms-linear-gradient(top, #EDEEF0 0%, #FFF 100%);
    background: linear-gradient(top, #EDEEF0 0%, #FFF 100%);
    border-top: 5px solid #028B5F;
    margin: 0 !important;
    padding: 15px;
  }
}

/*-------------------------サブタイトル4(下線)*/
h3.subtitle04 {
  color: #0CCED9;
  padding: 10px 15px;
  border-bottom: 3px solid #0CCED9;
}

/*-------------------------サブタイトル5(点線)*/
h3.subtitle05 {
  color: #0CCED9;
  padding: 10px 15px;
  border-bottom: 3px dotted #0CCED9;
}

/*-------------------------サブタイトル6(上下線)*/
h3.subtitle06 {
  color: #0CCED9;
  padding: 10px 15px;
  border-top: 3px solid #0CCED9;
  border-bottom: 3px solid #0CCED9;
}

/*-------------------------サブタイトル7(左下線)*/
h3.subtitle07 {
  color: #0CCED9;
  padding: 10px 15px;
  border-left: 10px solid #0CCED9;
  border-bottom: 1px solid #0CCED9;
}

/*-------------------------サブタイトル8(左線＋背景)*/
h3.subtitle08 {
  color: #0CCED9;
  padding: 10px 15px;
  border-left: 10px solid #0CCED9;
  background-color: #e2f9fa;
}

/* =========================================================
 * Image / caption alignment helpers (WP core classes)
 * ========================================================= */
@media (max-width: 767px) {
  .contBox02 .alignnone {
    margin: 5px 0 20px 0;
  }
  .contBox02 .alignright {
    float: right;
    margin: 5px 0 20px 0;
  }
  .contBox02 .alignleft {
    float: left;
    margin: 5px 0 20px 0;
  }
}

.alignnone {
  margin: 5px 20px 20px 0;
}

.aligncenter,
div.aligncenter {
  display: block;
  margin: 5px auto 5px auto;
}

.alignright {
  float: right;
  margin: 5px 0 20px 20px;
}

.alignleft {
  float: left;
  margin: 5px 20px 20px 0;
}

.aligncenter {
  display: block;
  margin: 5px auto 5px auto;
}

a img.alignright {
  float: right;
  margin: 5px 0 20px 20px;
}

a img.alignnone {
  margin: 5px 20px 20px 0;
}

a img.alignleft {
  float: left;
  margin: 5px 20px 20px 0;
}

a img.aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.wp-caption {
  background: #eee;
  border: 1px solid #ddd;
  max-width: 96%;
  padding: 10px;
}

.wp-caption.alignnone {
  margin: 5px 20px 20px 0;
}

.wp-caption.alignleft {
  margin: 5px 20px 20px 0;
}

.wp-caption.alignright {
  margin: 5px 0 20px 20px;
}

.wp-caption img {
  border: 0 none;
  height: auto;
  margin: 0;
  max-width: 98.5%;
  padding: 0;
  width: auto;
}

.wp-caption p.wp-caption-text {
  margin: 0;
  padding: 5px 0;
}

.contBox02 ul,
.contBox02 ol,
.contBox02 dl {
  list-style-position: inside;
}

/* =========================================================
 * Prevent unintended horizontal scrollbar
 *
 * Defensive cap: nothing in the layout should exceed the viewport
 * width. If a child element does overflow (long URL, wide table,
 * 100vw element, etc.), clip it instead of showing a horizontal
 * scrollbar at the bottom of the page.
 *
 * Note: this can interfere with `position: sticky` inside the body.
 * If something needs to stick, override on that specific ancestor.
 * ========================================================= */
html,
body {
  overflow-x: clip;
  max-width: 100%;
}

/* =========================================================
 * WordPress admin bar offset
 *
 * WP default: admin bar is `position: fixed` (32px tall) on desktop
 *             and `position: absolute` (46px tall) on mobile (<=782px).
 *             On mobile the bar scrolls away with the page, which leaves
 *             a fixed site header stuck at top: 46px and shows a 46px
 *             empty gap above once the bar is scrolled out of view.
 *
 * Fix: force the admin bar to stay fixed on mobile too, so the
 *      `top: 46px` offset on <header> is always correct, and the SP
 *      hamburger menu overlay (`<nav class="spmenu">`) doesn't slide
 *      underneath the bar.
 * ========================================================= */
@media screen and (min-width: 783px) {
  body.admin-bar header {
    top: 32px;
  }
}

@media screen and (max-width: 782px) {
  #wpadminbar {
    position: fixed !important;
  }
  body.admin-bar header {
    top: 46px;
  }
}

/* =========================================================
 * Hamburger menu overlay (.spmenu > div)
 *
 * The site CSS in /assets/css/common.css sets .spmenu > div to
 * `position: fixed; top: 50px; z-index: 100`. Two issues:
 *
 *   1. Same z-index as the header means stacking depends on DOM
 *      order and can render the menu visually behind the header
 *      content.
 *   2. The fixed `top: 50px` is the header height on mobile, so when
 *      the WP admin bar is shown and the header is offset by
 *      46px/32px (above), the menu top now overlaps with the header.
 *
 * Fix below: bump z-index above the header, and offset `top` /
 * `height` to account for the admin bar when logged in.
 * ========================================================= */
header nav.spmenu > div {
  z-index: 9999;
}

@media screen and (max-width: 782px) {
  body.admin-bar header nav.spmenu > div {
    top: 96px; /* admin bar 46 + header 50 */
    height: calc(100% - 96px);
  }
}

@media screen and (min-width: 783px) {
  body.admin-bar header nav.spmenu > div {
    top: 112px; /* admin bar 32 + header 80 */
    height: calc(100% - 112px);
  }
}