/*
Theme Name: umezaki_thema
Theme URI:
Description: カスタム案件のベースとなるWordPressクラシックテーマ。コンポーネントカタログ（page-template02.php）と「サイト情報登録」画面を備える。
Author: umezaki
Author URI:
Version: 1.1.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
Text Domain: base_thema
*/

/* base
------------------------------------------*/


@charset "utf-8";
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
    font-weight: normal;
}

:root {
  /* --- 基本カラー（案件ごとにここを書き換える） --- */
  --main_color: #3B2E25;      /* 社労士サイト：見出し・本文の濃い茶 */
  --main_color_2: #e29400;    /* アクセント：ボタンの矢印、チェックマーク、番号など */
  --black: #3e3a3a;
  --gray_light: #F6EEE3;
  --gray-dark: #E2D6C6;
  --gold-dark: #8D5820;
  --red01: #a5233b;
  --sub_color: #F6EEE3;       /* 部品の背景パネル（ベージュ） */
  --body-color-bg: #FBF8F3;

  /* --- 文字・罫線 --- */
  --text-color: #3B2E25;        /* 本文の基本色 */
  --text-sub_color: #6A5A4C;    /* 日付などの補助テキスト */
  --border-color: #E2D6C6;      /* 枠線・区切り線 */

  /* --- 余白・レイアウト --- */
  --box-margin: 20px;
  --text-margin: 30px;          /* テーブルなどブロック内の余白 */
  --vw: 1vw;

  /* --- 画像オーバーレイの濃さ（0〜1） --- */
  --image-overlay: rgba(59, 46, 37, 0.5);  /* 画像上に白文字を載せるときの暗幕 */

  /* --- 別名（CSS内でハイフン表記が使われている箇所の互換用） ---
     表記ゆれで未定義になっていた変数を、上の値に紐付けている。
     新しく書くときはアンダースコア表記（--main_color など）を使う。 */
  --main-color: var(--main_color);
  --main-color-2: var(--main_color_2);
  --sub-color: var(--sub_color);

  /* --- 社労士サイト追加分 --- */
  --accent_orange: #F0A959;     /* 斜めの帯・線などの飾り */
  --accent_beige: #F6D4AE;      /* マーカー・淡い飾り */
  --placeholder_bg: #E9DFD3;    /* 画像の読み込み前の背景 */
  --font_maru: "Zen Maru Gothic", "Zen Kaku Gothic New", "Hiragino Maru Gothic ProN", sans-serif;
  --font_base: "Zen Kaku Gothic New", "游ゴシック", YuGothic, "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
}

/*paddingによる幅を無くします*/
*{
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    -o-box-sizing:border-box;
    -ms-box-sizing:border-box;
    box-sizing:border-box;
}
html{
    overflow-x: hidden;
    scroll-behavior: smooth;
}
body {
    font-size: 15px;
    font-family: "Open Sans","游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
    line-height: 1.8;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    text-size-adjust: 100%;
    overflow: hidden;
    /*文字のカーニング*/
    -ms-font-feature-settings: "palt";
    -moz-font-feature-settings: "palt";
    -webkit-font-feature-settings: "palt";
    font-feature-settings: "palt";
    word-break: break-word;
    /*フォントのレンダリング*/
    /*    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;*/
}
.fixed {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 80000;
}
article,aside,details,figcaption,figure, footer,header,hgroup,menu,nav,section,main {
    display: block;
}
h1, h2, h3, h4, h5, h6, th {
    font-weight: normal;
}
ol,ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
    content: none;
}
a {
    margin: 0;
    padding: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
    text-decoration: none;
}
ins {
    background-color: #ff9;
    color: #000;
    text-decoration: none;
}
mark {
    background-color: #ff9;
    color: #000;
    font-style: italic;
    font-weight: bold;
}
del {
    text-decoration: line-through;
}
abbr[title], dfn[title] {
    border-bottom: 1px dotted;
    cursor: help;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #cccccc;
    margin: 1em 0;
    padding: 0;
}
img {
    vertical-align: middle;
    max-width:100%;
}
input{
    vertical-align: middle;
    width:  100%;
    padding: 15px;
}

input::placeholder {
    color: rgba(0, 0, 0, 0.51);
}
/* IE */
input:-ms-input-placeholder {
    color: rgba(0, 0, 0, 0.51);
}
/* Edge */
input::-ms-input-placeholder {
    color: rgba(0, 0, 0, 0.51);
}

select {
    vertical-align: middle;
    width:  100%;
    padding: 15px;
    -webkit-appearance: none;
    border: none;
    border-radius: 0;
}
/*フロート用のアフター要素*/
.flort_plus:after{
    height: 0;
    content: "";
    display: block;
    clear: both;
}
button,
input[type="button"],
input[type="submit"] {
    -webkit-appearance: none;
}
/*ここまでリセットcss*/
body {
    /* color: #3c3c3c; */
    background: #fff;
}
body#imp_frame{
    background: none;
}
main{
    width: 100%;
    min-height: 750px;
    overflow: hidden;
}

a{
    color: #3c3c3c;
}
a:hover, a:active {
    color: #d6d6d6;
}
section {
    /* かつて text-align: center を指定していたが、長い本文まで
       中央寄せになり読みづらかったため削除。
       中央にしたい箇所は個別に指定している（本文の揃え方の項を参照）。 */
    padding: 60px 0 60px;
    margin: 0 auto;
}
main section:first-child{
    padding: 55px 0 30px;
}
main section:last-child{
    padding: 40px 0 40px;
    margin-bottom: 20px;
}
main .other_page section:first-child{
    padding: 0 0 40px;
}
main .other_page section:last-child{
    padding: 40px 0;
}
/*---------------------
ローディングアニメーション
---------------------*/
.loader-wrap {
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,1);
    /* background-size: cover; */
    z-index: 99999;
}
.loader-wrap.other {
    background: #fff;
}
.loader-wrap img{
    max-width: 100%;
}
/*---------------------
アニメーション
---------------------*/
.link_act_01 {
    opacity: 1;
    -webkit-transition: 0.3s ease-in-out;
    -moz-transition: 0.3s ease-in-out;
    -o-transition: 0.3s ease-in-out;
    -ms-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out;
}
.link_act_01:hover {
    opacity: 0.7;
    filter: alpha(opacity=80);
}
.link_act_02_area{
    max-width: 200px;
    overflow: hidden;
    transition: transform .8s cubic-bezier(.16,1,.3,1);
}
.link_act_02_area:hover{
/*    max-width: 200px;
    overflow: hidden;*/
    border: 5px solid #000;
}
.link_act_02 {
    max-width: 200px;
    overflow: hidden;
    /*かくだい*/
    transform: scale(1);
    /*アニメーションスピード*/
    transition: transform .8s cubic-bezier(.16,1,.3,1);
}
.link_act_02:hover {
    /*傾き 拡大*/
    -moz-transform: rotate(10deg) scale(1.1);
    -webkit-transform: rotate(10deg) scale(1.1);
    -o-transform: rotate(10deg) scale(1.1);
    -ms-transform: rotate(10deg) scale(1.1);
    transform: rotate(10deg) scale(1.1);
}

.link_act_03 {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
.link_act_03:hover {
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -o-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);

}
.link_act_04 {
    -webkit-transition: 0.3s ease-in-out;
    -moz-transition: 0.3s ease-in-out;
    -o-transition: 0.3s ease-in-out;
    -ms-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out;
}

/*拡大縮小*/
.link_act_05{
    animation: anime 2s ease-in-out infinite;
    transform-origin: 50% 50%;
}

@keyframes anime {
    0% {transform:scale(0.9);}
    30% {transform:scale(0.9);}
    40% { transform:scale(1.1);}
    50% { transform:scale(0.9);}
    60% { transform:scale(1.1);}
    70% { transform:scale(0.9);}
    100% { transform:scale(0.9);}
}

.link_act_06{
  -webkit-filter: grayscale(0) blur(0);
  filter: grayscale(0) blur(0);
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}
.link_act_06:hover{
  -webkit-filter: grayscale(100%) blur(3px);
  filter: grayscale(100%) blur(3px);
}

/* フェードイン*/
.list-mv02 {
    transition: 2s;
    opacity: 0;
}
.mv02 {
    opacity: 1.0;
}
.list-mv03 {
    opacity: 0;
    transition: 2s;
    transform: translate(0,5px);
    -webkit-transform: translate(0,5px);
    -ms-transform: translate(0,5px);
    -moz-transform: translate(0,5px);
}
.mv03 {
    opacity: 1.0;
    transform: translate(0,0);
    -webkit-transform: translate(0,0);
    -ms-transform: translate(0,0);
    -moz-transform: translate(0,0);
}
.list-mv04 {
    transition: 3s;
    opacity: 0;
}
.mv04 {
    opacity: 1.0;
}

/*--------------------------
blockrevealer
--------------------------*/
.block-revealer__element {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  pointer-events: none;
  opacity: 0;
}
.contents .sample-img{
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto 20px;
}
.contents .text-area{
  margin-bottom: 20px;
}

/*--------------------------
タイトルアニメーション
--------------------------*/
.text-move {
  opacity: 0;
  display: inline-block;
  transform: scale(1) translate(0px, 0px);
  filter: grayscale(100) blur(10px);

}
.text-move:nth-child(1) {
  transition: opacity 1.6s ease 0.1s, transform 2s ease 0.2s;
}
.text-move:nth-child(2) {
  transition: opacity 1.6s ease 0.2s, transform 2s ease 0.25s;
}
.text-move:nth-child(3) {
  transition: opacity 1.6s ease 0.25s, transform 2s ease 0.3s;
}
.text-move:nth-child(4) {
  transition: opacity 1.6s ease 0.3s, transform 2s ease 0.35s;
}
.text-move:nth-child(5) {
  transition: opacity 1.6s ease 0.35s, transform 2s ease 0.4s;
}
.text-move:nth-child(6) {
  transition: opacity 1.6s ease 0.4s, transform 2s ease 0.45s;
}
.text-move:nth-child(7) {
  transition: opacity 1.6s ease 0.45s, transform 2s ease 0.5s;
}
.text-move:nth-child(8) {
  transition: opacity 1.6s ease 0.5s, transform 2s ease 0.55s;
}
.text-move:nth-child(9) {
  transition: opacity 1.6s ease 0.55s, transform 2s ease 0.6s;
}
.text-move:nth-child(10) {
  transition: opacity 1.6s ease 0.6s, transform 2s ease 0.65s;
}
.text-move:nth-child(11) {
  transition: opacity 1.6s ease 0.65s, transform 2s ease 0.7s;
}
.text-move:nth-child(12) {
  transition: opacity 1.6s ease 0.7s, transform 2s ease 0.75s;
}
.text-move:nth-child(13) {
  transition: opacity 1.6s ease 0.75s, transform 2s ease 0.8s;
}
.text-move:nth-child(14) {
  transition: opacity 1.6s ease 0.8s, transform 2s ease 0.85s;
}
.text-move:nth-child(15) {
  transition: opacity 1.6s ease 0.85s, transform 2s ease 0.9s;
}
.text-move:nth-child(16) {
  transition: opacity 1.6s ease 0.9s, transform 2s ease 0.95s;
}

.move_area.t_active {
  opacity: 1;
}

.move_area.t_active .text-move {
  opacity: 1;
  transform: scale(1) translate(0);
  filter: grayscale(0) blur(0);
  background-image: -moz-linear-gradient( 178deg, rgb(255 255 255) 0%, rgb(255 255 255) 100%);
  background-image: -webkit-linear-gradient( 359deg, rgb(255 255 255) 0%, rgb(255 255 255) 100%);
  background-image: -ms-linear-gradient( 178deg, rgb(255 255 255) 0%, rgb(255 255 255) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

}

/*---------------------
共通
---------------------*/
.title_bnr{
    line-height: 1em;
    font-size: 35px;
    letter-spacing: 1.2px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    align-items: center;
    margin-bottom: 25px;
}
.title_bnr .large_txt{
    font-size: 1.35em;
}
.title_bnr span.kana{
    font-size: 0.6em;
    margin-left: 5px;
}

subtitle{
    width: 100%;
    margin: 0 0 20px 0;
    text-align: center;
    -moz-osx-font-smoothing: grayscale;
    position:relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    background-size: 150px;
    font-family: "Times New Roman" , "Garamond" ,  "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Noto Serif JP" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" ,"Noto Serif JP" , "MS PMincho" , "serif";
}
.subtitle .en{
    width: 100%;
    display: block;
    font-size: 28px;
    line-height: 35px;
    color: #3c3c3c;
    /* text-shadow: 0 0 5px #30928f, 0 0 10px #30928f; */
}
.subtitle .en:first-letter{
    font-size: 38px;
}
.subtitle .ja{
    font-size: 16px;
    line-height: 20px;
    text-align: center;
    display: flex;
    /* flex-wrap: wrap; */
    align-items: center;
    color: #3c3c3c;
    position:relative;
}

.subtitle > .template_box > .content_borderbox {
    padding: 0 10px;
}

.subtitle_02{
    width: 100%;
    min-height: 50px;
    margin: 0 0 20px 0;
    text-align: center;
    position:relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    font-family: "Times New Roman" , "Garamond" ,  "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Noto Serif JP" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" ,"Noto Serif JP" , "MS PMincho" , "serif";
}
.subtitle_02 .en{
    width: 100%;
    display: block;
    font-size: 28px;
    line-height: 30px;
    color: #2d2d2d;
    text-shadow: 0 0 5px #fff, 0 0 10px #fff;
}
.subtitle_02 .en:first-letter{
    font-size: 38px;
}
.subtitle_02 .ja{
    font-size: 16px;
    line-height: 20px;
    text-align: center;
    display: flex;
    /* flex-wrap: wrap; */
    align-items: center;
    color: #2d2d2d;
    position:relative;
    text-shadow: 0 0 5px #fff, 0 0 10px #fff;
}
.subtitle_02 > .template_box > .content_borderbox {
    padding: 0 10px;
}

.subtitle_03 {
    background: #3c3c3c;
    background-image: -moz-linear-gradient( 180deg, rgb(33 33 33) 0%, rgb(0 0 0) 99%);
    background-image: -webkit-linear-gradient( 180deg, rgb(33 33 33) 0%, rgb(0 0 0) 99%);
    background-image: -ms-linear-gradient( 180deg, rgb(33 33 33) 0%, rgb(0 0 0) 99%);
    color: #fff;
    padding: 10px 0;
    margin-bottom: 20px;
    text-align: center;
    padding: 10px;
    font-size: 20px;
    font-family: "Times New Roman" , "Garamond" ,  "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Sawarabi Mincho" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" ,"Sawarabi Mincho" , "MS PMincho" , "serif";
}

.subtitle_04 {
    background: #1e1e1e;
    color: #fff;
    padding: 10px 0;
    margin-bottom: 10px;
    text-align: center;
    font-family: "Times New Roman" , "Garamond" ,  "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Sawarabi Mincho" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" ,"Sawarabi Mincho" , "MS PMincho" , "serif";
}

.subtitle_05{
    width: 100%;
    min-height: 100px;
    margin: 0 0 20px 0;
    text-align: center;
    position:relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    align-items: center;
    font-family: "Times New Roman" , "Garamond" ,  "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Sawarabi Mincho" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" ,"Sawarabi Mincho" , "MS PMincho" , "serif";
/*    background: url(images/bg_title.png) center -10% no-repeat;*/
background-size: contain;
}
.subtitle_05 .en{
    width: 100%;
    display: block;
    font-size: 28px;
    line-height: 34px;
    color:  var(--main_color);
    background-image: -moz-linear-gradient( 178deg, rgb(158,138,46) 0%, rgb(215,201,155) 100%);
    background-image: -ms-linear-gradient( 178deg, rgb(158,138,46) 0%, rgb(215,201,155) 100%);
}
.subtitle_05 .en:first-letter{
    font-size: 32px;
}
.subtitle_05 .ja{
    font-size: 16px;
    line-height: 20px;
    text-align: center;
    display: flex;
    align-items: center;
    position:
    relative;
    color:  var(--main_color);
    background-image: -moz-linear-gradient( 178deg, rgb(158,138,46) 0%, rgb(215,201,155) 100%);
    background-image: -ms-linear-gradient( 178deg, rgb(158,138,46) 0%, rgb(215,201,155) 100%);
}
.subtitle_05 > .template_box > .content_borderbox {
    padding: 0 10px;
}


.inner {
    margin: 0 auto;
    max-width: 1200px;
    width: 100%;
    padding: 0 20px;
}
.width_1024{
    width: 100%;
    max-width: 1024px;
    margin: auto;
}
.width_940{
    width: 100%;
    max-width: 940px;
    margin: auto;
}
.width_560{
    width: 100%;
    max-width: 560px;
    margin: auto;
    text-align: center;
}
.width_700{
    width: 100%;
    max-width: 700px;
    margin: auto;
    text-align: center;
}
.width_768{
    max-width: 768px!important;
}
.width_480{
    width: 100%;
    max-width: 480px;
    margin: auto;
}
.width_320{
    width: 100%;
    max-width: 320px;
    margin: auto;
}
.width_250{
    width: 100%;
    max-width: 250px;
    margin: auto;
}
.text_center {
    text-align: center;
}
.center_100{
    width: 100%;
    margin: auto;
    text-align: center;
}
.text_left {
    text-align: left;
}
.text_right {
    text-align: right !important;
}
.mb_10 {
    margin-bottom: 10px;
}
.mb_20 {
    margin-bottom: 20px;
}
.mb_30 {
    margin-bottom: 30px;
}
.pb_30 {
    padding-bottom: 30px;
}
.red {
    color: #f24b6f;
}
.yellow{
    color: #c6982d;
    font-weight: bold;
}
.blue_h{
    color: #444885;
}
.red_h{
    color: #ba3b68
}
.orange_red_h{
    color: #ec6767
}
.pink_h{
    color: #e14277
}
.purple_h{
    color: #5b2cae;
}
.orange_h{
    color: #f6634a
}
.atten {
    font-size:18px;
    /* font-weight: bold; */
    color: #d04356;
}
.atten_01, a.atten_01 {
    color: #ca1f36;
}
.atten_03 {
    color: #ccbbff;
}
.atten_04 {
    color: #ff0e14;
}
.atten_line{
    background: linear-gradient(transparent 70%, #fdbdc5 70%);
}
.atten_line02{
    background: linear-gradient(transparent 70%, #fde9bd 70%);
}
.atten_line03{
    background: linear-gradient(transparent 70%, #bec6ff 70%);
}
.atten_line04{
    background: linear-gradient(transparent 70%, #bec6ff 70%);
}
.link_act_01 {
    opacity: 1;
    -webkit-transition: 0.3s ease-in-out;
    -moz-transition: 0.3s ease-in-out;
    -o-transition: 0.3s ease-in-out;
    -ms-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out;
}
.link_act_01:hover {
    opacity: 0.7;
    filter: alpha(opacity=80);
}
/*パソコンサイズのみ表示*/
.pc_none{
    display: block;
}
.sp_none{
    display: none;
}
.wb {
    font-weight: bold;
}
.fs_14{
    font-size: 14px;
}
.fs_16{
    font-size: 16px;
}
.fs_18{
    font-size: 18px;
}
.fs_20{
    font-size: 20px;
}
.fs_23{
    font-size: 23px;
}
.fs_25{
    font-size: 25px;
}
/*リスト*/
.dl_type_01 {
    width: 100%;
    border-spacing: 0;
    text-align: left;
    color: #fff;
    box-sizing: border-box;
    margin: auto;
}
.dl_type_01 dt, .dl_type_01 dd {
    vertical-align: top;
    box-sizing: border-box;
}
.dl_type_01 dt {
    padding: 0 0 0 8px;
    border-left: 4px solid #212121;
    color: #fff;
    font-weight: bold;
    font-size: 1.2em;
    letter-spacing: 4px;
    margin-bottom: 10px;
}
.dl_type_01 dd {
    margin-bottom: 40px;
    padding: 20px;
    font-size: 15px;
    border: 1px solid #3c3c3c;
    color: #fff;
}
/*テーブルパターン*/
.table_collum_01 tbody tr th {
    border-bottom: dashed 1px rgba(0, 0, 0, 0.17);
}
.table_collum_01 {
    width: 100%;
    margin: 0 auto 20px;
    padding: 10px;
    box-shadow: 1px 1px 4px 1px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 1px 1px 4px 1px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 1px 1px 4px 1px rgba(0, 0, 0, 0.1);
}
.table_collum_01 tr {
    display: block;
    margin: 10px 0;
}
.table_collum_01 th {
    padding: 15px 0 15px 0;
    text-align: center;
    font-size: 20px;
}
.table_collum_01 td {
    padding: 15px 30px;
    text-align: center;
    border-top: none;
    border-bottom: none;
}
.table_collum_01 td,
.table_collum_01 th {
    width: 100%;
    display: block;
}
.table_collum_02 {
    width: 100%;
    margin: 0 auto 20px;
    text-align: center;
    table-layout: fixed;
    /* font-family: "Garamond" , "Times New Roman" ,  "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Sawarabi Mincho" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" ,"Sawarabi Mincho" , "MS PMincho" , "serif"; */
}
.table_collum_02 input{
    border: 1px solid #e0e0e0;
}
.table_collum_02 tr {
    margin-bottom: 10px;
}
.table_collum_02 tr.check_list input{
    width: auto;
}
.table_collum_02 th,
.table_collum_02 td {
    padding: 20px;
    vertical-align: middle;
    border: 1px solid #3c3c3c;
}
.table_collum_02 th {
    font-size: 14px;
    padding: 20px;
    color: #4d4d4d;
    vertical-align: middle;
    width: 30%;
    background: #fbfbfb;
    background: #3c3c3c;
    color: #fff;
    border-right: 1px dotted #3c3c3c;
}
.table_collum_02 td {
    text-align: left;
    font-size: 15px;
    background: #fff;
}
.table_collum_02 th span,
.table_collum_02 td span{
    font-size: 21px;
}
.table_collum_02 th span.large,
.table_collum_02 td span.large{
    font-size: 30px;
}
.table_collum_02 td a{
    color: #000;
}
.table_collum_02 .requier {
    border-radius: 2px;
    background: #bd0101;
    color: #fff;
    font-size: 0.6em;
    letter-spacing: 1px;
    padding: 4px 12px;
}
.table_collum_02.osaka th{
    background: #64c975;
}
.table_collum_02.osaka th, .table_collum_02.osaka td {
    border: 1px solid #64c975;
}

.at_fierd td{
    padding: 5px;
}

.table_collum_03 {
    width: 100%;
    max-width:1024px;
    margin: 0 auto 40px;
    text-align: center;
    table-layout: fixed;
}
.table_collum_03 th,
.table_collum_03 td {
    padding: 20px;
    vertical-align: middle;
    /* font-size: 30px; */
}
.table_collum_03 th span,
.table_collum_03 td span{
    font-size: 16px;
}
.table_collum_03 th {
    text-align: center;
    padding: 20px;
    vertical-align: top;
    background: #fbfbfb;
    color: #4d4d4d;
    -webkit-font-smoothing: antialiased;
}
.table_collum_03 td {
    text-align: center;
    border-top: 1px dotted #cccccc;
}
.table_collum_03 td.center {
    text-align: center;
}
.table_collum_03 .txt {
    font-size: 21px;
}
.table_collum_04 {
    width: 100%;
    margin: 0 auto;
    text-align: center;
    table-layout: fixed;
    border: 1px solid #333333;
}
.table_collum_04 input{
    border: 1px solid #e0e0e0;
}
.table_collum_04 tr {
    margin-bottom: 30px;
}
.table_collum_04 tr.check_list input{
    width: auto;
}
.table_collum_04 th,
.table_collum_04 td {
    padding: 20px;
    vertical-align: middle;
}
.table_collum_04 th {
    text-align: center;
    padding: 20px;
    vertical-align: top;
    width: 30%;
    background: #151515;
}
.table_collum_04 td {
    text-align: center;
    background: #2f3131;
}
.table_collum_04 .requier {
    border-radius: 2px;
    background: #bd0101;
    color: #fff;
    font-size: 0.6em;
    letter-spacing: 1px;
    padding: 4px 12px;
}

/*--------------------------------------
タブ用
--------------------------------------*/

/*タブ設定(jquery用)*/
.content_tab li{cursor: pointer;}
.tab_box .shop_container{display: none;}
.tab_box .shop_container.show {display: block;}

/*店舗選択とセラピストタブ選択*/
.shop_select,.staff_select{
  max-width: 1024px;
  padding: 0 10px;
  margin: 0 auto;
}
.shop_select ul{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-content: center;
  margin-bottom: 10px;
}
.shop_select ul li,.staff_select ul li{
  /* width: calc((100% - 10px) / 3); */
  font-size: 15px;
  border: 1px solid #6c6240;
  flex-grow: 1;
  margin: 2px;
}
.shop_select ul li{
    width: calc((97% - 3px) / 3);
    margin-bottom: 10px;
}

.shop_select ul li p{
  padding: 8px 5px;
  width: 100%;
  height: 100%;
  display: inline-block;
  color: #3c3c3c;
}
.shop_select ul li.active p{
  background: #69821b;
  color: #fff;
}

.shop_title{
    background: #69821b;
    color: #fff;
    padding: 5px 0;
    margin: 10px 10px;
}

/*--------------------------------------
パンくず
--------------------------------------*/
.pankuzu {
    padding: 0;
    margin: auto;
    text-align: center;
    font-size: 10px;
    letter-spacing: 0;
    position:  relative;
    padding: 10px;
}
.pankuzu ol li {
    display: inline-block;
    list-style-type: none;
    padding-right: 5px;
    color: #fff;
}
.pankuzu ol li:first-child:before {
    content: "\e9b2";
    font-family: "Material Symbols Outlined";
    font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 20;
    color: #fff;
    font-weight: 900;
}
.pankuzu ol li:before {
    content: " > ";
}
.pankuzu ol li:first-child {
    color: #fff;
}
.pankuzu ol li a {
    color: #fff;
    padding-left: 5px;
}
/*--------------------------------------
ドロワー
--------------------------------------*/
.btn_menu{
    position: fixed;
    top: 5px;
    right: 8px;
    /* width: 30px; */
    /* height: 30px; */
    z-index: 99000;
    font-family: "Times New Roman" , "Garamond" ,  "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Sawarabi Mincho" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" ,"Sawarabi Mincho" , "MS PMincho" , "serif";
    padding: 15px 10px 20px;
}
.btn_menu .txt{
    /* width: 46px; */
    position: absolute;
    bottom: -20px;
    left: 0;
    height: auto;
    background: none;
    font-size: 10px;
    letter-spacing: 0;
    max-height: 100%;
    white-space: nowrap;
    display: inline;
    word-break: normal;
    color:  var(--main_color);
    background-image: -moz-linear-gradient( 178deg, rgb(158,138,46) 0%, rgb(215,201,155) 100%);
    /* background-image: -webkit-linear-gradient(
        270deg, rgb(158,138,46) 0%, rgb(255 246 214) 100%); */
        background-image: -ms-linear-gradient( 178deg, rgb(158,138,46) 0%, rgb(215,201,155) 100%);
        /* -webkit-background-clip: text; */
        /* -webkit-text-fill-color: transparent; */
        /* text-shadow: 0 0 6px #bdaa5b; */
    }
    .btn_trigger {
      position: relative;
      width: 30px;
      height: 20px;
      cursor: pointer;
  }
  .btn_trigger span {
      position: absolute;
      left: 0;
      width: 100%;
      height: 3px;
      background:  var(--main_color);
      background-image: -moz-linear-gradient( 178deg, rgb(158,138,46) 0%, rgb(215,201,155) 100%);
  /* background-image: -webkit-linear-gradient(
    360deg, rgb(158,138,46) 0%, rgb(215,201,155) 100%); */
    background-image: -ms-linear-gradient( 178deg, rgb(158,138,46) 0%, rgb(215,201,155) 100%);
    /* -webkit-background-clip: text; */
    /* -webkit-text-fill-color: transparent; */
    /* text-shadow: 0 0 6px #bdaa5b; */
}
.btn_trigger, .btn_trigger span {
  display: inline-block;
  transition: all .1s;
  box-sizing: border-box;
}
.btn_trigger span:nth-of-type(1) {
  top: 0;
}
.btn_trigger span:nth-of-type(2) {
  top: 50%;
  width: 80%;
}
.btn_trigger span:nth-of-type(3) {
  bottom: -2px;
}
.open .btn_trigger span:nth-of-type(1),
.open .btn_trigger span:nth-of-type(2),
.open .btn_trigger span:nth-of-type(3) {
    /*  background-color: #3c3c3c;*/
}
.open .btn_trigger {
  color: #3c3c3c;
}
#btn_top span:nth-of-type(1) {
  -webkit-animation: btn_trigger_01 .2s forwards;
  animation: btn_trigger_01 .2s forwards;
}
@-webkit-keyframes btn_trigger_01 {
  0% {-webkit-transform: translateY(13px) rotate(-45deg);}
  100% {-webkit-transform: translateY(0) rotate(0);}
}
@keyframes btn_trigger_01 {
  0% {
    transform: translateY(13px) rotate(-45deg);}
    100% {transform: translateY(0) rotate(0);}
}
#btn_top span:nth-of-type(2) {
  -webkit-animation: btn_trigger02 .2s forwards;
  animation: btn_trigger02 .2s forwards;
}
@-webkit-keyframes btn_trigger02 {
  0% {opacity: 0;}
  100% {opacity: 1;}
}
@keyframes btn_trigger02 {
  0% {
    opacity: 0;
}
100% {
    opacity: 1;
}
}
#btn_top span:nth-of-type(3) {
  -webkit-animation: btn_trigger03 .2s forwards;
  animation: btn_trigger03 .2s forwards;
}
@-webkit-keyframes btn_trigger03 {
  0% {-webkit-transform: translateY(-13px) rotate(45deg);}
  100% {-webkit-transform: translateY(0) rotate(0);}
}
@keyframes btn_trigger03 {
  0% {transform: translateY(-13px) rotate(45deg);}
  100% {transform: translateY(0) rotate(0);}
}
#btn_top::after {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  content: '';
  width: 30px;
  height: 30px;
  margin: -16px 0 0 -16px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.3);
  transition: all .2s;
  opacity: 0;
}
#btn_top.active span:nth-of-type(1) {
  -webkit-animation: active_btn_top_bar01 .2s .2s forwards;
  animation: active_btn_top_bar01 .2s .2s forwards;
  top: 0px;
}
@-webkit-keyframes active_btn_top_bar01 {
  0% {-webkit-transform: translateY(0) rotate(0);}
  100% {-webkit-transform: translateY(6px) rotate(-45deg);}
}
@keyframes active_btn_top_bar01 {
  0% {transform: translateY(0) rotate(0);}
  100% {transform: translateY(6px) rotate(-45deg);}
}
#btn_top.active span:nth-of-type(2) {
  -webkit-animation: active_btn_top_bar02 .2s .2s forwards;
  animation: active_btn_top_bar02 .2s .2s forwards;
}
@-webkit-keyframes active_btn_top_bar02 {
  0% {opacity: 1;}
  100% {opacity: 0;}
}
@keyframes active_btn_top_bar02 {
  0% {opacity: 1;}
  100% {opacity: 0;}
}
#btn_top.active span:nth-of-type(3) {
  -webkit-animation: active_btn_top_bar03 .2s .2s forwards;
  animation: active_btn_top_bar03 .2s .2s forwards;
}
@-webkit-keyframes active_btn_top_bar03 {
  0% {-webkit-transform: translateY(0) rotate(0);}
  100% {-webkit-transform: translateY(-13px) rotate(45deg);}
}
@keyframes active_btn_top_bar03 {
  0% {transform: translateY(0) rotate(0);}
  100% {transform: translateY(-13px) rotate(45deg);}
}
#nav_bg {
  position: fixed;
  width: 100%;
  height: 100vh;
  right: 0;
  top: 100px;
  opacity: 0;
  -webkit-transition: 0.2s ease-in-out;
  -moz-transition: 0.2s ease-in-out;
  -o-transition: 0.2s ease-in-out;
  -ms-transition: 0.2s ease-in-out;
  transition: 0.2s ease-in-out;
  z-index: -99999;
}
.open #nav_bg {
  opacity: 1;
  top: 0px;
  transition-delay: 0.2s;
  z-index: 90000;
  /* background: rgba(0,0,0,0.8); */
}
#nav_drawer {
    font-size: 18px;
    width: 100%;
    max-width: 420px;
    min-width: 420px;
    height: 100%;
    display: flex;
    align-items: baseline;
    padding: 10% 0 0 0;
    margin: 0 0 0 auto;
    background: rgba(255,255,255,1);
    /* background-size: cover; */
    font-family:
    "Times New Roman" , "Garamond" ,  "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Sawarabi Mincho" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" ,"Sawarabi Mincho" , "MS PMincho" , "serif";
}
#nav_drawer > ul {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}
#nav_drawer li {
  margin: 0 auto;
  width: 95%;
  padding: 0 6px;
  text-align: left;
  opacity: 0;
  -webkit-transition: 0.3s ease-in-out;
  -moz-transition: 0.3s ease-in-out;
  -o-transition: 0.3s ease-in-out;
  -ms-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
  -webkit-transform: translate(0px,3px);
  transform: translate(0px,3px);
  /*  -webkit-filter: blur(7px);
filter: blur(7px);*/
line-height: 15px;
font-size: 16px;
text-align: center;
}
#nav_drawer li.info{
  width: 100%;
  font-size:20px;
  text-align: center;
  margin-top: 20px;
}
#nav_drawer li.info_open{
  width: 100%;
  font-size: 16px;
  text-align: center;
  color: #3c3c3c;
  width: 100%;
  display: block;
  padding: 15px 0;
}
#nav_drawer a {
    width: 100%;
    display: block;
    padding: 15px 0;
    color: #3c3c3c;
}
#nav_drawer a.current {
    color: #3c3c3c;
    /* opacity: 0.8; */
}
.open #nav_drawer li {
    opacity: 1;
    -webkit-transform: translate(0px,0px);
    transform: translate(0px,0px);
    transition-delay: .3s;
    -webkit-filter: blur(0);
    filter: blur(0);
}
.open #nav_drawer li:nth-child(1){
    transition-delay: 0s;
}
.open #nav_drawer li:nth-child(2){
    transition-delay: .1s;
}
.open #nav_drawer li:nth-child(3){
    transition-delay: .2s;
}
.open #nav_drawer li:nth-child(4){
    transition-delay: .3s;
}
.open #nav_drawer li:nth-child(5) {
    transition-delay: .4s;
}
.open #nav_drawer li:nth-child(6) {
    transition-delay: .5s;
}
.open #nav_drawer li:nth-child(7) {
    transition-delay: .6s;
}
.open #nav_drawer li:nth-child(8) {
    transition-delay: .7s;
}
.open #nav_drawer li:nth-child(9) {
    transition-delay: .8s;
}
.open #nav_drawer li:nth-child(10) {
    transition-delay: .9s;
}
.open #nav_drawer li:nth-child(11) {
    transition-delay: 1s;
}
.open #nav_drawer li:nth-child(12) {
    transition-delay: 1.1s;
}
.open #nav_drawer li:nth-child(13) {
    transition-delay: 1.2s;
}
.open #nav_drawer li:nth-child(14) {
    transition-delay: 1.3s;
}


/*ヘッダーナビ*/
ul.nav_sp{
    color: #f1e07c;
    display: flex;
    flex-wrap: wrap;
    /* justify-content: stretch; */
    align-items: center;
    letter-spacing: 0;
    font-size: 10px;
    text-align: center;
    position: absolute;
    right: 70px;
    top: 14px;
    display: none;
}
ul.nav_sp li{
    width: 53px;
    margin: auto 2px;
    padding: 8px 2px 4px 2px;
}
ul.nav_sp li.nav_sp_01{
    /* background: #03bcd0; */
}
ul.nav_sp li.nav_sp_02{
    /* background: #03d099; */
}
ul.nav_sp li.nav_sp_03{
    /* background: #5dcf58; */
}
ul.nav_sp li a{
    color: #fff;
}
ul.nav_sp li a i {
    width: 27px;
    font-size: 20px;
    margin: auto;
    display: block;
    color: #fff;
    text-align: center;
    -webkit-transition: 0.3s ease-in-out;
    -moz-transition: 0.3s ease-in-out;
    -o-transition: 0.3s ease-in-out;
    -ms-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out;
}

/*----------------------------------
テンプレートボックス
----------------------------------*/
.subtitle_02 > .content_borderbox{
    padding: 0 20px 20px 20px;
}
.content_borderbox{
    width: 100%;
    padding: 20px;
    margin: 0 auto 40px;
    color: #3c3c3c;
}
.content_borderbox:last-child{
    margin-bottom: 0;
}
.content_borderbox p{
    font-size: 1.1em;
    border-bottom: 1px dotted #3c3c3c;
    padding: 10px 0;
    text-align: left;
}
.content_borderbox p:last-child{
    border-bottom: none;
}

.content_colorbox{
    width: 100%;
    padding: 30px;
    margin: 0 auto 40px;
    /* border: 3px double #3c3c3c; */
    background: #a6a6a6;
    color: #fff;
    /* outline: 1px solid #3e3e3e; */
    /* outline-offset: -10px; */
}
.subttile > .content_colorbox{
    padding: 0 30px;
}
.content_colorbox:last-child{
    margin-bottom: 0;
}
.content_colorbox p{
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px dashed #5a5a5a;
    text-align:left;
}
.content_colorbox p.vect{
    border-bottom: none;
}
.content_colorbox p:last-child{
    margin-bottom:0;
    padding-bottom: 0;
    border-bottom: none;
}

.content_colorbox_02{
    padding: 20px;
    margin: 0 auto 30px;
    background: #fbf5ea;
    border-radius: 4px;
    color: #3c3c3c;
}
.content_colorbox_02 p{
    margin-bottom:20px;
}
.content_colorbox_02 p:last-child{
    margin-bottom:0;
}

.template_box{
    max-width: 1024px;
    margin: 0 auto 30px;
    display: flex;
    text-align: justify;
    justify-content: space-between;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
}
.template_box:last-child{
    margin: 0 auto 20px;
}
.template_box > div:first-child{
    margin-right: 10px;
}
.template_box div.content_borderbox:first-child{
    margin-right: 0;
}
.template_box div.content_colorbox:first-child{
    margin-right: 0;
}

.template_box > div.col_1:first-child,
.template_box > div.col_3:first-child,
.template_box > div.col_4:first-child,
.template_box > div.col_5:first-child{
    margin-right: 0
}
.template_photo .content_colorbox,
.template_photo .content_borderbox,
.template_text .content_colorbox,
.template_text .content_borderbox{
    margin-bottom: 0;
    padding: 10px 0;
}
.template_photo{
    width:27%;
}
.template_photo img{
    width:100%;
    max-width: 400px;
}
.template_photo.min img{
    width:100%;
    max-width: 150px;
}
.template_text{
    width:71%;
}
.template_btn{
    width: 100%;
    order: 3;
    width: 100%;
    max-width: 768px;
    background: none;
    text-align: center;
    margin: 0 auto 10px;
    border: 1px solid #3c3c3c;
    position:relative;
}
.template_btn a{
    color:  var(--main_color);
    display: block;
    padding: 10px 20px;
    /* border: 1px solid  var(--main_color); */
    border-radius: 2px;
    font-family: "Cinzel", Garamond, "Times New Roman", 游明朝, "Yu Mincho", 游明朝体, YuMincho, "ヒラギノ明朝 Pro W3", "Sawarabi Mincho", "Hiragino Mincho Pro", HiraMinProN-W3, HGS明朝E, "ＭＳ Ｐ明朝", "MS PMincho", serif;
}
.template_btn span{
    position: absolute;
    /* background: #3c3c3c; */
    padding: 10px 15px;
    top: 0;
    right: 0;
    color: #fff;
}
.template_box:last-child table.table_collum_03{
    margin: 0 auto 0;
}

.template_bnr_btn {
    width: 100%;
    order: 3;
    width: 100%;
    max-width: 768px;
    padding: 10px 20px;
    text-align: center;
    margin: 0 auto;
    position:relative;
    padding:10px;
    border: 1px solid;
}
.template_bnr_btn span{
    position:absolute;
    top: 0;
    right: 0;
    background: #3c3c3c;
    color: #fff;
    padding: 10px 15px;
}

/*1列*/
.col_1{
    width:100%;
}
/*2列*/
.col_2{
    width: 49%;
    text-align:center;
}
.col_2 img,
.col_3 img,
.col_4 img,
.col_5 img{
    max-width: 100%;
}
.col_2.lg img,
.col_3.lg img,
.col_4.lg img,
.col_5.lg img{
    max-width: 100%;
}
/*3列*/
.col_3{
    width:32%;
    text-align:center;
}
/*4列*/
.col_4{
    width:24%;
    text-align:center;
}
/*5列*/
.col_5{
    width:19%;
    text-align:center;
}
ul.list-check{
    margin: 0 auto 30px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
}
ul.list-check:last-child{
    margin: 0 auto 0;
}
ul.list-check li{
    margin-bottom: 10px;
    padding: 10px 5px;
    display: block;
    -moz-border-radius: 4px;
    color: #ffffff;
    font-size: 13px;
    border: dotted 1px #fff;
    text-align: center;
}
ul.list-check li:nth-child(odd){
    background: #ffae62;
    box-shadow: 0px 0px 0px 3px #ffae62;
}
ul.list-check li:nth-child(even){
    background: #66ccba;
    box-shadow: 0px 0px 0px 3px #66ccba;
}
ul.list-check li:last-child{
    margin-bottom: 0;
}

/*----------------------------------
求人用
----------------------------------*/
.recruit_photo{
    padding: 40px;
    margin-bottom: 20px;
    background: url(images/bg_recruit.jpg) center 50% no-repeat;
    background-size: cover;
}
.recruit_photo_inner{
    padding: 50px;
    background: rgb(6 6 6 / 50%);
    outline: 2px solid #6f6f6f;
    outline: solid 1px rgb(107 107 107 / 80%);
    outline-offset: 1px;
    color: #fff;
    font-size: 20px;
    font-family: "Cinzel", Garamond, "Times New Roman", 游明朝, "Yu Mincho", 游明朝体, YuMincho, "ヒラギノ明朝 Pro W3", "Sawarabi Mincho", "Hiragino Mincho Pro", HiraMinProN-W3, HGS明朝E, "ＭＳ Ｐ明朝", "MS PMincho", serif;
}

/*----------------------------------
form
----------------------------------*/
#form select{
    -webkit-appearance: none;
    background: #fff;
}
#form .btn_lg label {
    line-height: 2.8;
    padding: 8px;
    background: rgba(169, 169, 169, 0.49);
    border-radius: 4px;
    white-space: nowrap;
    color: #000;
    font-weight: 600;
    font-size: 12px;
}
#form .form_ttl {
    margin: 20px 0 10px;
    padding: 0 10px 0;
    border-bottom: 1px solid #362107;
    font-weight: bold;
    display: inline-block;
}
#form .form_txt {
    color: #684332;
}
#form .btn_color {
    margin-bottom: 40px;
    padding-top: 20px;
    border-top: 1px solid #362107;
}
#form .btn_color a {
    width: 200px;
}
#form .btn_color .i_tel {
    width: 380px;
    margin-bottom: 20px;
    padding: 14px 10px 14px 90px;
    font-size: 13px;
}
#form .btn_color .i_tel .fr {
    padding-top: 15px;
}
#form .btn_color .i_line {
    padding: 25px 10px 26px 20px;
}
#form .form_comment {
    color: #be9d8e;
    font-weight: bold;
}
#form .form_box form select,
#form .form_box form textarea {
    padding: 8px 4px;
    border-radius: 2px;
    border: 1px solid #be9d8e;
}
#form .form_box form button {
    color: #be9d8e;
    text-decoration: underline;
}
#form .btn_g{
    color: #656565;
    font-size: 17px;
    margin-top: 12px;
    border: 3px solid;
    padding: 10px 60px;
}
#form .btn_lg label {
    line-height: 2.8;
    padding: 8px;
    background: rgba(169, 169, 169, 0.49);
    border-radius: 4px;
    white-space: nowrap;
    color: #000;
    font-weight: 600;
}
#form .form_box ul li {
    border-bottom: 3px dotted #d6d6d6;
    padding: 30px 0 25px;
    margin-bottom: 5px;
}
#form .form_box ul li p {
    margin-bottom: 4px;
    font-weight: bold;
    color: #5a512e;
    line-height: 1.4;
    font-size: 17px;
    border-bottom: darkblue;
}
#form .form_box ul li p span {
    font-size: 0.75em;
}
#form .form_box ul li .req {
    margin-left: 2px;
    padding: 2px 4px;
    border: 1px solid #dd6969;
    border-radius: 2px;
    color: #dd6969;
    font-size: 0.75em;
}
#form .confirm_box li {
    margin-bottom: 20px !important;
    padding-bottom: 4px;
    border-bottom: 1px dotted #be9d8e;
}
#form .form_ttl {
    margin: 20px 0 10px;
    padding: 0 10px 0;
    border-bottom: 1px solid #362107;
    font-weight: bold;
    display: inline-block;
}
#form .form_txt {
    color: #684332;
}
#form .btn_color {
    margin-bottom: 40px;
    padding-top: 20px;
    border-top: 1px solid #362107;
}
#form .btn_color a {
    width: 200px;
}
#form .btn_color .i_tel {
    width: 380px;
    margin-bottom: 20px;
    padding: 14px 10px 14px 90px;
    font-size: 13px;
}
#form .btn_color .i_tel .fr {
    padding-top: 15px;
}
#form .btn_color .i_line {
    padding: 25px 10px 26px 20px;
}
#form .form_comment {
    color: #be9d8e;
    font-weight: bold;
}
#form .form_box form button {
    color: #be9d8e;
    text-decoration: underline;
}
#form .form_box ul li {
    border-bottom: 1px dotted #d6d6d6;
    padding: 30px 0 25px;
    margin-bottom: 5px;
}
.form_reset {
    -webkit-appearance: none;
    border: none;
}
.btn_type_01 {
    max-width: 300px;
    -webkit-transition: color 0.3s, background-color 0.3s, box-shadow 0.3s, -webkit-transform 0.3s;
    -moz-transition: 0.3s ease-in-out;
    -o-transition: 0.3s ease-in-out;
    transition: color 0.3s, background-color 0.3s, box-shadow 0.3s, transform 0.3s;
    width: 100%;
    padding: 11px 10px 8px;
    display: block;
    background: #ff93aa;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    box-shadow: 0 2px 0 #e66983, 0 4px 0 rgba(0,0,0,0.2);
    color: #fff;
    text-align: center;
    position: relative;
    margin: 0 auto 10px;
}
.btn_type_01:hover {
    box-shadow: 0 2px 0 #ff6095, 0 4px 0px rgba(0,0,0,0.2);
    -webkit-transform: translateY(-1px);
    transform: translateY(-1px);
    background: #ffabbd;
}
.btn_type_01:after {
    content: " \e5cc";
    font-family: "Material Symbols Outlined";
    font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 20;
    position: absolute;
    right: 20px;
}

.btn_type_02 {
    max-width: 300px;
    -webkit-transition: color 0.3s, background-color 0.3s, box-shadow 0.3s, -webkit-transform 0.3s;
    -moz-transition: 0.3s ease-in-out;
    -o-transition: 0.3s ease-in-out;
    transition: color 0.3s, background-color 0.3s, box-shadow 0.3s, transform 0.3s;
    width: 100%;
    padding: 11px 10px 8px;
    display: block;
    background: #ff701a;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    box-shadow: 0 2px 0 #e45600, 0 4px 0 rgba(0,0,0,0.2);
    color: #fff;
    text-align: center;
    position: relative;
    margin: 0 auto 10px;
}
.btn_type_02:hover {
    box-shadow: 0 2px 0 #e45600, 0 4px 0px rgba(0,0,0,0.2);
    -webkit-transform: translateY(-1px);
    transform: translateY(-1px);
    background: #ff9656;
}
.btn_type_02:after {
    content: " \e5cc";
    font-family: "Material Symbols Outlined";
    font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 20;
    position: absolute;
    right: 20px;
}
#form_top .label_custom label {
    display: block;
    text-align: left;
    background: #dadada;
    padding: 10px;
    -webkit-transition: 0.3s ease-in-out;
    -moz-transition: 0.3s ease-in-out;
    -o-transition: 0.3s ease-in-out;
    -ms-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out;
    margin-bottom: 10px;
}
#form_top .label_custom input {
    width:25px;
    float: left;
}
.btn_entry_tel {
    width: 100%;
    max-width: 400px;
    line-height: 35px;
    font-size: 14px;
    letter-spacing: 0.10em;
    display: block;
    border-radius: 2px;
    font-weight: bold;
    position: relative;
    text-align: left;
    padding-left: 55px;
    border: 1px solid #bdbdbd;
    color: #3c3c3c;
}
.btn_entry_tel i {
    font-size: 16px;
    left: 0;
    position: absolute;
    top: 0;
    bottom: auto;
    line-height: 35px;
    width: 40px;
    background: #414443;
    color: #fff;
}


/*---------------------------
ヘッダー
----------------------------*/
header {
    width: 100%;
    position: fixed;
    z-index: 10999;
    background: #fff;
    /* visibility: hidden; */
}
header#other{
    display: hidden;
}
header.sticky,
header#other.sticky{
 visibility: visible;
 -webkit-transition: 0.3s ease-in-out;
 -moz-transition: 0.3s ease-in-out;
 -o-transition: 0.3s ease-in-out;
 -ms-transition: 0.3s ease-in-out;
 transition: 0.3s ease-in-out;
}
header h1{
    width: auto;
    /* margin: auto; */
}
header .inner {
    padding: 0;
    position:relative;
}
header .area{
    height: 70px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
header .inner ul.header_nav li,
header .inner ul.header_nav{
    width: auto;
    margin: auto 80px auto auto;
    /* color: #f99ba0; */
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    letter-spacing: 0;
    font-size: 12px;
    line-height: 18px;
    text-align: center;
    font-family: "Times New Roman" , "Garamond" ,  "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Sawarabi Mincho" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" ,"Sawarabi Mincho" , "MS PMincho" , "serif";
    /* background: #cbcbcb; */
}

.header_nav a{
    display: block;
    padding: 6px 2px;
    position: relative;
    color: #3c3c3c;
    white-space: nowrap;
    transition: 0.3s ease-in-out;
}
.header_nav a:hover{
    opacity: 0.6;
}
.header_nav a.active{
    opacity: 0.7;
}
/* 現在地と hover に下線を引く */
.header_nav a::after{
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 1px;
    background: currentColor;
    transition: width 0.3s ease-in-out;
}
.header_nav a:hover::after,
.header_nav a.active::after{
    width: 100%;
}
header .inner .logo{
    display: flex;
    align-items: flex-start;
     padding: 15px 10px;
}
header.sticky .inner .logo{
}
header .inner .logo img{
    max-width: 200px;
}
header.sticky .inner ul.header_nav{
    /* display: inherit; */
}
header .inner ul.header_nav li{
    margin: auto 10px;
}
header a{
    color: #fff;
}
header a:hover{
    opacity: 0.8
}
/*---------------------------
ヘッドライン
----------------------------*/
.slick_headline{
    max-width: 768px;
    margin: 10px auto;
    text-align: center;
    padding: 20px 0;
    margin: auto;
    font-size: 22px;
    color: #fff;
    font-family: "Cinzel", Garamond, "Times New Roman", 游明朝, "Yu Mincho", 游明朝体, YuMincho, "ヒラギノ明朝 Pro W3", "Sawarabi Mincho", "Hiragino Mincho Pro", HiraMinProN-W3, HGS明朝E, "ＭＳ Ｐ明朝", "MS PMincho", serif;
    background-image: url(images/bg_headline.png), url(images/bg_headline.png);
    background-position: top center, bottom center;
    background-repeat: no-repeat, no-repeat;
    background-size: auto 10px,auto 10px;
}
/*---------------------------
営業・受付時間
----------------------------*/
.middle_info{
  margin: 0 auto;
  /* padding: 10px; */
  display: flex;
  text-align: justify;
  justify-content: space-between;
  align-items: center;
  color: #000;
}
.middle_info a{
  color: #3c3c3c;
}
.middle_info .middle_info_area{
    max-width: 1200px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
    color: #3c3c3c;
    font-family: "Cinzel", Garamond, "Times New Roman", 游明朝, "Yu Mincho", 游明朝体, YuMincho, "ヒラギノ明朝 Pro W3", "Sawarabi Mincho", "Hiragino Mincho Pro", HiraMinProN-W3, HGS明朝E, "ＭＳ Ｐ明朝", "MS PMincho", serif;
}
.middle_info .middle_info_area p.tel{
    /* width: 100%; */
    margin: auto 10px;
    text-align: center;
    font-size: 38px;
    line-height: 25px;
    background-image: -moz-linear-gradient( 178deg, rgb(158,138,46) 0%, rgb(215,201,155) 100%);
    /* background-image: -webkit-linear-gradient(
        270deg, rgb(158,138,46) 0%, rgb(255 246 214) 100%); */
        background-image: -ms-linear-gradient( 178deg, rgb(158,138,46) 0%, rgb(215,201,155) 100%);
        /* -webkit-background-clip: text; */
        /* -webkit-text-fill-color: transparent; */
        /* text-shadow: 0 0 20px #000000; */
    }
    .middle_info .middle_info_area p.tel02{
        font-size: 20px;
        /* padding-top: 10px; */
    }
    .middle_info .middle_info_area .tel span {
        font-size: 22px;
    }
    .middle_info .middle_info_area .tel02 span{

    }

/*---------------------------
電話番号 web予約
----------------------------*/
.middle_nav{
    background: #151515;
    padding: 10px 0;
    margin-bottom: 20px;
}
.middle_nav ul{
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    text-align: justify;
    justify-content: center;
    align-items: center;
    text-align: center;
    text-shadow: black 1px 1px 10px, black -1px 1px 10px, black 1px -1px 10px, black -1px -1px 10px;
    text-shadow: black 1px 1px 10px, black -1px 1px 10px, black 1px -1px 10px, black -1px -1px 10px;
}
.middle_nav ul li{
    width: 50%;
    font-size: 20px;
    padding: 8px 5px;
}
.middle_nav ul li:first-child{
    border-right: 1px solid #555555;
}

/*---------------------------
メイン画像
----------------------------*/
.mainvisual_wrap{
    /* background: #fff; */
    position: relative;
    z-index: 10000;
    margin-bottom: 40px;
    margin-top: 70px;
}
.mainvisual_inner{
    padding:0;
}
#mainvisual{
    width: 100%;
    margin: 0 auto 0;
    /* position: relative; */
    /* z-index: 9000; */
}
/*メイン画像1枚目*/
#mainvisual li.no01 .mainvisual_photo{
    background: url(images/mainvisual01.jpg) center center no-repeat;
    background: image-set(url(images/mainvisual01.webp) type("image/webp"), url(images/mainvisual01.jpg) type("image/jpeg")) center center no-repeat;
    background-size: cover;
    width: 100%;
    height: 70vh;
}
/*メイン画像2枚目*/
#mainvisual li.no02 .mainvisual_photo{
    background: url(images/mainvisual02.jpg) center center no-repeat;
    background: image-set(url(images/mainvisual02.webp) type("image/webp"), url(images/mainvisual02.jpg) type("image/jpeg")) center center no-repeat;
    background-size: cover;
    width: 100%;
    height: 70vh;
}

.mainvisual_txt{
    color: #738aca;
    font-size: 40px;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    z-index: 79999;
    margin: auto;
    position: absolute;
    width: 100%;
    height: 70px;
    max-width: 290px;
    display: flex;
    padding: 10px;
    font-size: 23px;
}
.mainvisual_txt02{
    color: #738aca;
    font-size: 40px;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    z-index: 79999;
    margin: auto;
    position: absolute;
    width: 100%;
    height: 70px;
    max-width: 290px;
    display: flex;
    padding: 10px;
    font-size: 23px;
}
.mainvisual_txt03{
    display: none;
}

/*下層ページ*/
.other_page_top{
 top: 50%;
 bottom: 0;
 right: 0;
 z-index: 999;
 position: absolute;
 left: 0;
 height: 80px;
}
.other_page_title {
 /* margin: auto; */
 width: 100%;
 margin-left: 15px;
 height: 50px;
 padding: 0;
 text-align: center;
 font-size: 40px;
 font-weight: bold;
 letter-spacing: 0.7em;
/* color: rgb(155, 131, 79);*/
display: flex;
align-items: center;
justify-content: center;
/* text-shadow: 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #fff; */
font-family: "Garamond" , "Times New Roman" , "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Sawarabi Mincho" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" ,"Sawarabi Mincho" , "MS PMincho" , "serif";
}
.other_page_title:first-letter {
    font-size: 41px;
}
.other_page_title p.t_bottom span{
    font-size: 15px;
    margin-left: 5px;
}
.other_page .inner{
    padding: 20px 40px;
    max-width: 1200px;
}
.other_page_system .inner{
    padding: 20px 40px;
    max-width: 800px;
}

.other_page.other_page_top{
    padding: 0 0 10px 0;
}
.page_top_outer {
    position: relative;
    padding: 0;
    margin-bottom: 20px;
}
.page_top {
    background: url(images/bg_second.jpg) center center no-repeat;
    background: image-set(url(images/bg_second.webp) type("image/webp"), url(images/bg_second.jpg) type("image/jpeg")) center center no-repeat;
    background-size: cover;
    padding: 0;
    -moz-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
    text-align: center;
    height: 380px;
    overflow: hidden;
    position: relative;
    width: 100%;
    z-index: 1;
    left: 0;
    top: 0;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center 50%;
    /* background: rgba(24,0,0,0.4); */
}
.page_top img {
    margin: 0 auto;
    width: 100%;
}
/*------------------------------
バナー
-------------------------------*/
.bnr_area{
    padding:40px 0!important;
    background-size: cover;
    background-attachment: fixed;
}
.bnr_area_02{
    padding:40px 0!important;
    background: url(images/bg_photo_bnr02.jpg) center bottom no-repeat;
    background-size: cover;
}
.bnr_box{
}

.app_area{
    position:relative;
}
.btn_apple{
    max-width: 120px;
    position: absolute;
    bottom: 13%;
    left: 20%;
}
.btn_google{
    max-width: 120px;
    position: absolute;
    bottom: 13%;
    right: 20%;
}

.bnr_box_inner{
    max-width: 1200px;
    padding: 0;
    margin: auto;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.bnr_box a{
    display: block;
}
/*1列*/
.bnr_col_1{
    width:100%;
}
/*2列*/
.bnr_col_2{
    width: 48.5%;
    text-align:center;
}
.bnr_col_2 > div{
    /* width: 100%; */
    /* padding: 10px; */
    /* text-align: center; */
}
.bnr_col_2 img,
.bnr_col_3 img,
.bnr_col_4 img{
    max-width: 100%;
}
.bnr_col_2.lg img,
.bnr_col_3.lg img,
.bnr_col_4.lg img{
    max-width: 100%;
}
.bnr_col_2:nth-last-child(-n+2){
}
/*3列*/
.bnr_col_3{
    text-align:center;
    /* box-shadow: 0 0 17px #ffd4e5; */
    display: flex;
    text-align: justify;
    justify-content: space-between;
    align-items: center;
}
.bnr_col_3 > div{
    width: 100%;
    padding: 10px;
    text-align: center;
}
.bnr_col_3:nth-child(1){
  transition-delay: .1s;
}
.bnr_col_3:nth-child(2){
  transition-delay: .3s;
}
.bnr_col_3:nth-child(3){
  transition-delay: .6s;
}
.bnr_col_3:nth-child(4){
  transition-delay: .9s;
}

/*------------------------------
ツイッター
-------------------------------*/
#twitter{
    /* background: #fdf5f8; */
}
#twitter .inner{
    max-width:700px;
}
.twitter_box{
    max-height: 500px;
    overflow-y: scroll;
}

/*------------------------------
料金
-------------------------------*/

.system_price_inner{
    padding: 50px;
    background: rgba(65, 23, 6, 0.5);
    outline: 4px solid #6f6f6f;
    outline: solid 2px rgba(65, 23, 6, 0.8);
    outline-offset: 2px;
    color: #fff;
    font-size: 20px;
    font-family: "Cinzel", Garamond, "Times New Roman", 游明朝, "Yu Mincho", 游明朝体, YuMincho, "ヒラギノ明朝 Pro W3", "Sawarabi Mincho", "Hiragino Mincho Pro", HiraMinProN-W3, HGS明朝E, "ＭＳ Ｐ明朝", "MS PMincho", serif;
}
.table_collum_system {
    width: 100%;
    margin: 0 auto 30px;
    text-align: center;
    table-layout: fixed;
    font-family: "Cinzel", Garamond, "Times New Roman", 游明朝, "Yu Mincho", 游明朝体, YuMincho, "ヒラギノ明朝 Pro W3", "Sawarabi Mincho", "Hiragino Mincho Pro", HiraMinProN-W3, HGS明朝E, "ＭＳ Ｐ明朝", "MS PMincho", serif;
}
.table_collum_system input{
    border: 1px solid #e0e0e0;
}
.table_collum_system tr {
    margin-bottom: 10px;
}
.table_collum_system tr.check_list input{
    width: auto;
}
.table_collum_system th,
.table_collum_system td {
    padding: 10px;
    vertical-align: middle;
    border: 1px solid #3c3c3c;
    /*    text-shadow: 0 0 10px #fff;*/
}
.table_collum_system th {
    font-size: 20px;
    padding: 20px 10px;
    color: #fff;
    background: #3c3c3c;
    vertical-align: middle;
}
.table_collum_system td {
    font-size: 20px;
    color: #fff;
}
.table_collum_system tr:last-child th,
.table_collum_system tr:last-child td {
    /* border-bottom: none; */
}
.table_collum_system th span,
.table_collum_system td span{
    font-size: 15px;
}
.table_collum_system td a{
    color: #000;
}
.table_collum_system .requier {
    border-radius: 2px;
    background: #bd0101;
    color: #fff;
    font-size: 0.6em;
    letter-spacing: 1px;
    padding: 4px 12px;
}

/*------------------------------
アクセス
-------------------------------*/
.access_swich_btn{
    background: #de970e;
    color: #fff;
    border-radius: 20px;
    max-width: 70%;
    margin: auto auto 20px;
    padding: 8px 4px;
}
/*------------------------------
QA
-------------------------------*/
#qa h4{
    font-weight: bold;
    text-align: left;
    border-bottom: 1px solid #fff;
    margin-bottom: 0;
    padding: 15px 25px 15px 15px;
    font-size: 18px;
    position: relative;
    color: #fff;
    background: #525252;
}
#qa article p{
    text-align: left;
    margin-bottom: 20px;
    font-weight: bold;
    color: #4a4a4a;
    padding: 25px 15px;
    background: #fff;
}
#qa p span{
    color: #f6634a;
}


/* icon */
#qa h4::before,
#qa h4::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 15px;
  margin: auto;
  height: 2px;
  width: 12px;
  background-color: #fff;
  transition: all .1s ease-out;
}

#qa h4::after {
  transform: rotate(90deg);
}

#qa h4.open::after {
  opacity: 0;
  transform: rotate(0);
}

/*--------------------
infomation
---------------------*/
#infomation{
    margin: 0 0 20px;
}
.infomation_inner{
    max-width: 940px;
    margin:auto;
}
#infomation p.open{
    padding: 3px 0;
    border: 1px solid #ec6767;
    border-bottom: none;
}
.btn_base{
    width: 90%;
    max-width: 500px;
    margin-bottom: 10px;
    display: inline-block;
    text-align: left;
}
.btn_base a{
    padding: 10px 20px;
    display: block;
    color: #fff;
    line-height: 20px;
    position: relative;
}
.btn_base a:hover{
    opacity: 0.7;
}
.btn_base a:after{
  position: absolute;
  top: 35%;
  right: 5%;
  font-family: "Material Symbols Outlined";
    font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 20;
  content: "\e5cc";
}
.info_tel{
    background: #f599a1;
    box-shadow: 0 2px 0 #cc6b73;
}
.info_tel{
  position: relative;
  padding-left: 30px;
}
.info_tel:before{
  position: absolute;
  top: 18%;
  left: 20px;
  font-family: "Material Symbols Outlined";
    font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 20;
  content: "\f0d4";
  color:  #fff;
  font-size: 25px;
}
.info_line{
    background: #57bd57;
    box-shadow: 0 2px 0 #44a044;
}
.info_line{
  position: relative;
  padding-left: 30px;
}
.info_line:before{
  position: absolute;
  top: 24%;
  left: 12px;
  content: url(images/i_line.png);
}
.info_mail{
    background: #eca055;
    padding: 10px 0;
    box-shadow: 0 2px 0 #dc9753;
}
.info_mail{
  position: relative;
  padding-left: 30px;
}
.info_mail:before{
    position: absolute;
    top: 20%;
    left: 18px;
    font-family: "Material Symbols Outlined";
    font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 20;
    content: "\e159";
    color: #fff;
    font-size: 22px;
}
.info_mail_02{
    width: 100%;
    max-width: 940px;
    margin-bottom: 20px;
    display: inline-block;
    text-align: left;
    background: #e78b31;
    padding: 10px 0;
    position: relative;
}
.info_mail_02:after{
    content: "";
    position: absolute;
    background: #e78b31;
    width: 10px;
    height: 10px;
    left: 50%;
    /* right: auto; */
    margin: auto;
    bottom: -5px;
    -moz-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
}
.info_mail_02 a{
    padding: 10px 20px;
    display: block;
    color: #fff;
    line-height: 20px;
    position: relative;
    text-align: center;
}
.btn_entry {
    box-sizing: border-box;
    font-size: 14px;
    color: #0035ac;
    text-align: center;
    border-radius: 2px;
}

.btn_footer_01 {
    box-sizing: border-box;
    font-size: 12px;
    text-align: center;
    width: 100%;
    border-radius: 2px;
    color: #fff;
    /* background: #c98f64; */
    /* box-shadow: 0px 3px 0px 0px #b47648; */
}
.btn_footer_02 {
    box-sizing: border-box;
    font-size: 12px;
    text-align: center;
    width: 100%;
    color: #fff;
    /* background: #7fa2f8; */
    /* box-shadow: 0px 3px 0px 0px #4f78df; */
}
.btn_footer_03 {
    box-sizing: border-box;
    font-size: 12px;
    text-align: center;
    width: 100%;
    color: #fff;
    /* background: #64c975; */
    /* box-shadow: 0px 3px 0px 0px #3aa74d; */
}
.btn_footer_04 {
    box-sizing: border-box;
    font-size: 14px;
    text-align: center;
    width: 100%;
    color: #fff;
    /* background: #00c300; */
    /* box-shadow: 0px 3px 0px 0px #04a904; */
}
/*-------------------------
フッター
-------------------------*/
footer {
    padding: 100px 0;
    color: #3c3c3c;
    position:
    relative;
    background:  var(--main_color);
    font-family: Garamond, "Times New Roman", 游明朝, "Yu Mincho", 游明朝体, YuMincho, "ヒラギノ明朝 Pro W3", "Sawarabi Mincho", "Hiragino Mincho Pro", HiraMinProN-W3, HGS明朝E, "ＭＳ Ｐ明朝", "Sawarabi Mincho", "MS PMincho", serif;
}
footer p {
    text-align: center;
    color: #fff;
/*    text-shadow: 0 0 10px white;*/
}
footer a{
  color: #fff;
}
footer a:hover{
    opacity: 0.9;
}
footer a.active{
  color: #9c9c9c9c;
}

.footer_nav{
    display:none;
}
.footer_link a{
    color: #fff;
}

.seo{
    color: #3c3c3c
}

.copy {
    background: #fff;
    padding: 10px;
    text-align: center;
}



/*--------------------------------------------
  新着情報
--------------------------------------------*/
#section_topics .section_topics_top{
    height: 300px;
    background: url(images/img_top_topics.jpg) center top no-repeat;
    background-size: cover;
}
#section_topics .info_box{
    color: #fff;
    max-width:768px;
    padding: 0;
    margin: auto;
    overflow: hidden;
}
#section_topics .info_box article {
    margin: 0 auto 10px;
    padding-bottom: 15px;
    border-bottom: 1px solid #ababab;
    word-break: break-all;
    text-align: left;
    color: #3c3c3c;
}
#section_topics .info_box article img,
#top_topics article img{
 max-width:100%;
 height: auto!important;
}
.topics_inner{
    padding: 20px;
    max-height: 480px;
    overflow-y: scroll;
}
/* icon */
#section_topics .topics_title{
    color: #3c3c3c;
    padding: 10px 0;
    /* margin-bottom: 10px; */
    text-align: center;
    padding: 10px 0;
    font-size: 16px;
    text-align: left;
    position: relative;
}
#section_topics .topics_title::before,
#section_topics .topics_title::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 15px;
  margin: auto;
  height: 2px;
  width: 12px;
  background-color:  var(--main_color);
  transition: all .1s ease-out;
}

#section_topics .topics_title::after {
  transform: rotate(90deg);
}

#section_topics .topics_title.open::after {
  opacity: 0;
  transform: rotate(0);
}

#section_topics .topics_title time{
    background-image: -moz-linear-gradient( 180deg, rgb(138,11,11) 0%, rgb(185,28,28) 50%, rgb(138,11,11) 100%);
    /* background-image: -webkit-linear-gradient( 180deg, rgb(138,11,11) 0%, rgb(185,28,28) 50%, rgb(138,11,11) 100%); */
    background-image: -ms-linear-gradient( 180deg, rgb(138,11,11) 0%, rgb(185,28,28) 50%, rgb(138,11,11) 100%);
    background:  var(--main_color);
    color: #fff;
    font-size: 13px;
    padding: 7px 10px;
    margin-right: 15px;
    font-family: "Cinzel", Garamond, "Times New Roman", 游明朝, "Yu Mincho", 游明朝体, YuMincho, "ヒラギノ明朝 Pro W3", "Sawarabi Mincho", "Hiragino Mincho Pro", HiraMinProN-W3, HGS明朝E, "ＭＳ Ｐ明朝", "MS PMincho", serif;
}

#section_topics .category{
    border-radius:50px;
    background:  var(--main_color);
    color: #fff;
    font-size: 13px;
    padding: 7px 10px;
    margin-right: 15px;
    font-family: "Cinzel", Garamond, "Times New Roman", 游明朝, "Yu Mincho", 游明朝体, YuMincho, "ヒラギノ明朝 Pro W3", "Sawarabi Mincho", "Hiragino Mincho Pro", HiraMinProN-W3, HGS明朝E, "ＭＳ Ｐ明朝", "MS PMincho", serif;
}

.category_name ul li{
    color:#000;
}

.category_name ul{
  display: flex;
  justify-content: space-between;
  align-content: center;
  margin-bottom: 10px;
}
.category_name ul li{
    /* width: calc((100% - 10px) / 3); */
    font-size: 15px;
    border: 1px solid #6c6240;
    flex-grow: 1;
    margin: 2px;
}

/*--------------------------------------
メッセージ
--------------------------------------*/
.section_message{
    padding: 20px 0;
    font-family: Garamond, "Times New Roman", 游明朝, "Yu Mincho", 游明朝体, YuMincho, "ヒラギノ明朝 Pro W3", "Sawarabi Mincho", "Hiragino Mincho Pro", HiraMinProN-W3, HGS明朝E, "ＭＳ Ｐ明朝", "Sawarabi Mincho", "MS PMincho", serif;
}
.section_message_inner{
    position: relative;
    padding: 70px;
}
.section_message_img{
    /* width: 100%; */
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: -100;
    background: url(images/bg_message.jpg) no-repeat center center;
    background: image-set(url(images/bg_message.webp) type("image/webp"), url(images/bg_message.jpg) type("image/jpeg")) no-repeat center center;
    background-size: cover;
}

.message_right .section_message_img{
    right: calc(50% - 200px);
    left: 0;
}
.message_left .section_message_img{
    left: calc(50% - 200px);
    right: 0;
}

.section_message_datail{
    position: relative;
    margin: 0;
}

.message_box{
    width: 100%;
    max-width:600px;
    padding: 80px;
    margin: 0 0 0 auto;
    color: #1c1c1c;
    /* background: rgba(0,0,0,0.5); */
    background: #fff;
    /* border: 1px solid #fff; */
    /* outline: 1px solid  var(--main_color); */
    outline-offset: -20px;
}

.message_right .message_box{
    margin: 0 0 0 auto;
}

.message_left .message_box{
    margin: 0 auto 0 0;
}

.message_box p{
    margin-bottom: 30px;
    padding-bottom: 30px;
    border-bottom: 1px solid #fff;
    color:  var(--main_color);
    text-align: left;
}
.message_box p.vect{
    border-bottom: none;
}
.message_box p:last-child{
    margin-bottom:0;
    padding-bottom: 0;
    border-bottom: none;
}



/*--------------------------------------------
  お問合せ
--------------------------------------------*/
#section_contact{
    background: url(images/bg_contact.jpg) no-repeat center center;
    background: image-set(url(images/bg_contact.webp) type("image/webp"), url(images/bg_contact.jpg) type("image/jpeg")) no-repeat center center;
    color:#fff;
    background-size: cover;
}
#section_contact h2 span{
    color:#fff !important;
}

#section_contact .section_contact_inner{
    max-width: 1024px;
    margin: auto;
    padding: 0 20px;
}


#section_contact .collum02{
    display:flex;
    flex-wrap: wrap;
    align-items:center;
    justify-content:center;
}

.btn_phone{
    width:100%;
    max-width:320px;
    display:block;
    padding:10px 20px;
    text-align:center;
}
.btn_phone a{
    display:block;
    padding: 15px 20px;
    background: #fff;
}

.btn_contact{
    width:100%;
    max-width:320px;
    display:block;
    padding:10px 20px;
    text-align:center;
}
.btn_contact a{
    display:block;
    padding: 16px 20px;
    background: #3c3c3c;
    color: #fff;
}


/*--------------------------------------------
  リンクページ
--------------------------------------------*/
#contents_link {
    position: relative;
}
#contents_link a {
    color: #b29763;
}
.list_link_box {
    padding: 10px;
    font-size: 11px;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}
.list_link_box li {
    margin: 10px;
}
/*--------------------------------------------
  お問い合わせ フォーム系
--------------------------------------------*/
button, select {
    -moz-appearance: none;
    appearance: none;
    border: 1px solid #e0e0e0;
    -webkit-appearance: none;
}
textarea{
    -moz-appearance: none;
    appearance: none;
    -webkit-appearance: none;
    border: none;
    background: #fff;
    border: 1px solid #e0e0e0;
    padding: 20px;
    width: 100%;
}
select {
    border-radius: 0px;
    color: rgba(0, 0, 0, 0.51);
    font-size: 14px;
    text-align: left;
    vertical-align: middle;
    width: 100%;
    padding: 15px;
    background: #fff;
    /* border: none; */
}
input[type=radio], input[type=checkbox] {
    display: none;
}
#contents_form input {
    /* padding: 15px; */
    /* width: 100%; */
    /* border: none; */
    /* border: 1px solid #000; */
    /* color: #000; */
    /* text-shadow: none; */
    /* box-shadow: none; */
    /* border: 1px solid #000; */
    /* background: #fff; */
}
#contents_form .pia input {
    width: 30px;
}
#contents_form input[type=radio], #contents_form input[type=checkbox] {
    display: inline;
    background: #eee;
    padding: 5px 10px;
    margin: 3px;
}
#contents_form .check_list input[type=radio], #contents_form .check_list input[type=checkbox] {
    width: 30px;
    /* float: left; */
}
#contents_form label {
    display: block;
    text-align: left;
    border: 1px solid #e0e0e0;
    padding: 10px;
    line-height: 22px;
    -webkit-transition: 0.3s ease-in-out;
    -moz-transition: 0.3s ease-in-out;
    -o-transition: 0.3s ease-in-out;
    -ms-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out;
    margin-bottom: 10px;
    background: #fff;
}
#contents_form label:hover{
    opacity: 0.8;
}
.btn_positive {
    max-width: 500px;
    width: 100%;
    padding: 15px;
    display: block;
    background: #3c3c3c;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    box-shadow: 0 2px 0 #3c3c3c, 0 4px 0 rgb(0 0 0 / 20%);
    text-shadow: 0px -1px 0px rgba(0,0,0,0.25);
    color: #fff;
    text-align: center;
    position: relative;
    margin: 0 auto 10px;
    -webkit-transition: color 0.3s, background-color 0.3s, box-shadow 0.3s, -webkit-transform 0.3s;
    -moz-transition: 0.3s ease-in-out;
    -o-transition: 0.3s ease-in-out;
    transition: color 0.3s, background-color 0.3s, box-shadow 0.3s, transform 0.3s;
}
.btn_positive:hover {
    transition: .8s;
    opacity: 0.5;
}
.btn_negative {
    max-width: 400px;
    width: 100%;
    padding: 8px 10px 8px;
    display: block;
    background: #3c3c3c;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    box-shadow: 0 2px 0 #3c3c3c, 0 4px 0 rgba(0,0,0,0.2);
    text-shadow: 0px -1px 0px rgba(0,0,0,0.25);
    color: #fff;
    text-align: center;
    position: relative;
    margin: 0 auto 10px;
    -webkit-transition: color 0.3s, background-color 0.3s, box-shadow 0.3s, -webkit-transform 0.3s;
    -moz-transition: 0.3s ease-in-out;
    -o-transition: 0.3s ease-in-out;
    transition: color 0.3s, background-color 0.3s, box-shadow 0.3s, transform 0.3s;
}
.btn_negative:hover {
    transition: .8s;
    opacity: 0.5;
}

.recruit_label{
    display: flex;
    flex-wrap: wrap;
}
.recruit_label span{
    color: #fff;
    padding: 10px;
    margin: 8px;
    border: 1px solid #ec4d5b;
    padding: 5px 15px;
    letter-spacing: 0.05em;
    color: #ec4d5b;
    margin: 0 4px 10px;
}
.table_collum_recruit {
    width: 100%;
    margin: 0 auto 40px;
    text-align: center;
    table-layout: fixed;
}
.table_collum_recruit input{
    border: 1px solid #e0e0e0;
}
.table_collum_recruit tr {
    margin-bottom: 30px;
}
.table_collum_recruit tr.check_list input{
    width: auto;
}
.table_collum_recruit th,
.table_collum_recruit td {
    padding: 20px;
    vertical-align: middle;
}
.table_collum_recruit th {
    text-align: left;
    padding: 20px;
    color: #fff;
    vertical-align: top;
    width: 30%;
    border-right: 1px dotted #b1b1b1;
    font-size: 18px;
    vertical-align: top;
}
.table_collum_recruit td {
    text-align: left;
    background: rgba(255,255,255,1);
    color: #3c3c3c;
}
.table_collum_recruit .requier {
    border-radius: 2px;
    background: #bd0101;
    color: #fff;
    font-size: 0.6em;
    letter-spacing: 1px;
    padding: 4px 12px;
}

.reruit_btn_tel{
    width: 100%;
    max-width: 450px;
    margin: auto;
    display: block;
    padding: 10px;
    /* border-radius: 50px; */
    text-align: center;
    background: #191919;
    color: #fff!important;
    font-size: 14px;
}
.reruit_btn_tel a{
    color: #fff;
}

.reruit_btn_mail{
    width: 100%;
    max-width: 450px;
    margin: auto;
    display: block;
    padding: 10px;
    /* border-radius: 50px; */
    text-align: center;
    background: #927211;
    font-size: 14px;
    color: #fff!important;
}

.reruit_btn_line{
    width: 80%;
    max-width:400px;
    margin: auto;
    display: block;
    padding: 10px;
    border-radius: 50px;
    text-align: center;
    background: #00ac36;
    color: #fff!important;
}

#bg_recruit{
    padding: 20px 0;
    font-family: Garamond, "Times New Roman", 游明朝, "Yu Mincho", 游明朝体, YuMincho, "ヒラギノ明朝 Pro W3", "Sawarabi Mincho", "Hiragino Mincho Pro", HiraMinProN-W3, HGS明朝E, "ＭＳ Ｐ明朝", "Sawarabi Mincho", "MS PMincho", serif;
}
.recruit_bnr_inner{
    position: relative;
    padding: 5%;
}
.recruit_bnr_img{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -100;
    background: url(images/bg_recruit.png) no-repeat center center;
    background-size: cover;
}
.recruit_bnr_datail{
    position: relative;
    margin: 0;
}

.recruit_box{
    width: 100%;
    max-width:768px;
    padding: 5%;
    margin: auto;
    color: #1c1c1c;
    background: rgba(0,0,0,0.5);
    /* border: 1px solid #fff; */
    outline: 1px solid #3e3e3e;
    outline-offset: -20px;
}
.recruit_box p{
    margin-bottom: 30px;
    padding-bottom: 30px;
    border-bottom: 1px solid #585858;
    color: #fff;
    text-align: center;
    font-size: 28px;
}
.recruit_box p.vect{
    border-bottom: none;
}
.recruit_box p:last-child{
    margin-bottom:0;
    padding-bottom: 0;
    border-bottom: none;
}


/*--------------------------
QA
---------------------------*/
.atten_line {
    background: linear-gradient(transparent 70%, #fdbdc5 70%);
}
.qa h4{
    color: #e14277;
    background:  #ffeff4;
    font-weight: bold;
    text-align: left;
    border-bottom: 1px dotted #e14277;
    margin-bottom: 0;
    padding: 15px;
    position: relative;
}
.qa article p{
    text-align: left;
    margin-bottom: 20px;
    font-weight: bold;
    color: #4a4a4a;
    padding: 15px 15px 0;
}
.qa p span{
    color: #f6634a;
}
.qa h4:after{
    content: "\e5cf";  /* expand_more（閉じている状態＝下向き） */
    font-family: "Material Symbols Outlined";
    font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 20;
    position: absolute;
    right: 5%;
}
.qa h4.open:after{
    content: "\e5ce";  /* expand_less（開いている状態＝上向き） */
}


/*--------------------------
1200px以下の場合
---------------------------*/
@media screen and (max-width:1200px) {
    header .inner ul.header_nav li,
    header .inner ul.header_nav{
        font-size: 12px;
    }
}
/*--------------------------
1024px以下の場合
---------------------------*/
@media screen and (max-width:1024px) {

    /*------------------------------
    ヘッダー
    -------------------------------*/

    header .inner ul.header_nav li {
        margin: auto 5px;
        /* font-size:10px; */
    }
    .header_nav a {
        padding: 6px 0;
    }
    .shop{
      display: block;
  }
  footer {
      padding: 60px 0 100px;
  }

  /*フッターナビ用*/
  .footer_nav {
    width: 100%;
    max-width: 1200px;
    margin: 5px auto 0;
    padding: 5px;
    box-sizing: border-box;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    display: none;
    font-family: "Times New Roman" , "Garamond" ,  "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Sawarabi Mincho" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" ,"Sawarabi Mincho" , "MS PMincho" , "serif";
    /* background: #000; */
}
.footer_nav.lock {
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.footer_nav p{
    text-align: center;
    width: 33%;
    padding: 5px 5px  5px;
    /* box-shadow: 0px 3px 0px 0px #8c7d27; */
}
.footer_nav a{
    display: block;
    line-height: 50px;
    border-radius: 2px;
    background:  var(--main_color);
    /* box-shadow: 0px 3px 0px 0px #242424; */
}
.footer_nav a span{
    background-image: -moz-linear-gradient( 178deg, rgb(158,138,46) 0%, rgb(215,201,155) 100%);
    background-image: -ms-linear-gradient( 178deg, rgb(158,138,46) 0%, rgb(215,201,155) 100%);
    color: #fff;
}
.footer_nav p:last-child{
    border-right: 0;
}
.btn_nav_entry {
    height: 40px;
    line-height: 40px;
    background-color: rgb(192, 27, 70);
    box-sizing: border-box;
    font-size: 14px;
    color: #ffffff;
    text-align: center;
}
.btn_nav_entry_line {
    height: 40px;
    line-height: 40px;
    background-color: rgb(36, 141, 37);
    box-sizing: border-box;
    font-size: 14px;
    color: #ffffff;
    text-align: center;
}
.btn_nav_entry_line img {
    width: 20px;
    margin-bottom: 11px;
}
.btn_nav_tel {
    height: 40px;
    line-height: 40px;
    background-color: rgb(192, 27, 70);
    box-sizing: border-box;
    font-size: 14px;
    color: #ffffff;
    text-align: center;
    width: 100%;
}
.btn_nav_tel img{
    height: 40px;
    line-height: 40px;
    background-color: rgb(192, 27, 70);
    box-sizing: border-box;
    font-size: 14px;
    color: #ffffff;
    text-align: center;
    width: 40%;
    margin-right: 2%;
    border-bottom: 3px solid #b30404;
}
    /*---------------------------
    本日の出勤
    ---------------------------*/
    .todayschedule{
        background-attachment: inherit;
    }

    #section_therapist .cast_box li.cast_li {
        margin: 10px 10px 10px;
        overflow: hidden;
        width: 31%;
    }
}

/*--------------------------
768px以下の場合
---------------------------*/
@media screen and (max-width:768px) {
    /* タブレット以下もSP用の軽いメインビジュアルを使う */
    #mainvisual li.no01 .mainvisual_photo {
        background: url(images/mainvisual01_sp.jpg) center center no-repeat;
        background: image-set(url(images/mainvisual01_sp.webp) type("image/webp"), url(images/mainvisual01_sp.jpg) type("image/jpeg")) center center no-repeat;
        background-size: cover;
    }
    #mainvisual li.no02 .mainvisual_photo {
        background: url(images/mainvisual02_sp.jpg) center center no-repeat;
        background: image-set(url(images/mainvisual02_sp.webp) type("image/webp"), url(images/mainvisual02_sp.jpg) type("image/jpeg")) center center no-repeat;
        background-size: cover;
    }

    /*--------------------------
    共通スタイル
    ---------------------------*/
    body{
        /* font-size: 12px; */
    }
    header .inner ul.header_nav{
        display: none;
    }
    header.sticky .inner ul.header_nav {
        display: none;
    }
    .btn_menu {
        /* top: 10px; */
    }
    h1{
        text-align:center;
    }

    header h1 {
      margin: 0;
  }

  .inner {
      padding: 0 20px;
  }

  .no_2,.no_3 {
      font-size: 16px;
  }
  .page_top {
      max-height: 250px;
  }
  .mb_20_sp {
      margin-bottom: 20px;
  }
  .mb_40_pc{
      margin-bottom: 0;
  }
  #imp_frame .table_collum_02 tr {
    display: block;
    width: 100%;
}
#imp_frame .table_collum_02 th,
#imp_frame .table_collum_02 td{
    display: block;
    width: 100%;
}
.footer_link{
    margin-bottom: 20px;
    font-family: "Garamond" , "Times New Roman" ,  "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Sawarabi Mincho" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" ,"Sawarabi Mincho" , "MS PMincho" , "serif";
}
    /*--------------------------
    タイトル
    ---------------------------*/
    .subtitle {
        margin: 0 auto 10px;
        justify-content: start;
        text-align: left;
        border-left: 3px solid #fff;
        padding-left: 10px;
    }
    .subtitle_02 {
        margin: 0 auto 10px;
        justify-content: start;
        text-align: left;
        border-left: 3px solid #2d2d2d;
        padding-left: 10px;
    }
    /*--------------------------
    ヘッダー
    ---------------------------*/
    .slick_headline {
        margin: 10px 10px;
        font-size: 16px;
    }
    .middle_info .middle_info_area {
        padding: 0;
        font-size: 15px;
        flex-wrap: wrap;
        margin-bottom: 10px;
    }
    .middle_info .middle_info_area p.tel02 {
        font-size: 15px;
    }
    .middle_info .middle_info_area p.tel {
       width: 100%;
   }
    /*--------------------------
    テンプレートボックス
    ---------------------------*/
    .template_photo{
        width:100%;
        order: 1;
        margin-bottom: 15px;
        text-align: center;
    }
    .template_box{
        margin-right: 0px;
        margin: 0 auto 20px;
    }
    .template_box > div:first-child {
        margin-right: 0px;
    }
    .template_text{
        width:100%;
        order: 2;
    }
    .content_colorbox {
        padding: 20px;
    }
    .col_2 , .col_3 , .col_4 ,.col_5 {
        width: 100%;
    }
    .col_3:last-child{
        margin-bottom: 00px;
    }
    .col_4:nth-last-child(-n+4) {
        margin-bottom: 20px;
    }

    .bnr_box_inner{
        -webkit-flex-wrap: wrap;
        -moz-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        padding: 10px;
    }
    .bnr_box_content {
        width: 100%;
    }

    .menu ul li {
        width: 50%;
        font-size: 13px;
    }

    /*---------------------------
    トップページ
    ---------------------------*/

    /*---------------------------
    バナー
    ---------------------------*/
    section.bnr_box{
        max-width: 1200px;
        margin: 0;
        padding: 0;
    }
    /*1列*/
    .bnr_col_1{
        width:100%;
    }
    /*2列*/
    .bnr_col_2{
        width:100%;
        text-align:center;
    }
    .bnr_col_2 img,
    .bnr_col_3 img,
    .bnr_col_4 img{
        max-width: 100%;
    }
    .bnr_col_2.lg img,
    .bnr_col_3.lg img,
    .bnr_col_4.lg img{
        max-width: 100%;
    }
    /*3列*/
    .bnr_col_3{
        width:100%;
        text-align:center;
        margin: 0;
    }
    .bnr_col_3:last-child{
        margin: 0;
    }
    /*一部分だけ1列にする*/
    .bnr_col_3.width_50{
        width:100%;
    }
    /*一部分だけ2列にする*/
    .bnr_col_3.width_50{
        width:50%;
    }
    /*---------------------------
    料金表
    ---------------------------*/
    .template_system dl {
        width: 100%;
        margin-bottom: 20px;
        padding: 40px 20px;
    }
    .template_system dl:last-child{
        margin-bottom: 0;
    }

    .table_wrap {
        width: 100%;
        overflow-x: scroll;
        overflow-y:hidden;
    }
    .table_width{
        width: 800px;
    }


    /*--------------------------------------------
      アクセス
    --------------------------------------------*/
    .map{
        display: block;
    }

}

/*--------------------------
500px以下の場合
---------------------------*/
@media screen and (max-width: 500px) {
     /*---------------------------
    共有
    ---------------------------*/
    .loader-wrap {
        align-items: center;
        justify-content: center;
    }
    h2{
        background-size: 650px;
    }
    h3{
        font-size:16px;
    }
    section {
        padding: 30px 0;
    }
    header.sticky {
        /* background: none; */
    }
    footer {
        padding: 40px 0 40px;
    }
    main {
        min-height: auto;
        /* padding-top: 70px; */
    }
    main.other{
        min-height: auto;
        padding-top: 90px;
    }
    main section:last-child {
        padding: 30px 0 0px;
    }

    .inner {
        padding: 0 10px;
    }
    .pc_none{
        display: none;
    }
    .sp_none{
        display: block;
    }

    .table_collum_02 th span.large, .table_collum_02 td span.large {
        font-size: 20px;
    }

    #nav_drawer {
        min-width: 100%;
    }
    .template_box {
        margin: 0 auto 10px;
    }
    .subtitle_03 {
        margin-bottom: 10px;
        font-size: 18px;
        /* line-height: 31px; */
        padding: 5px 15px 3px 15px;
    }
    .table_collum_02 {
        margin: 0 auto 10px;
    }
    .table_collum_02 th, .table_collum_02 td {
        width: 100%;
        display: block;
    }
     /*---------------------------
    下層ページ用
    ---------------------------*/
    .other_page_top {
        top: 48%;
    }
    .other_page_title {
        font-size: 25px;
    }
    .other_page .inner {
        padding: 10px;
    }
    .page_top_outer{

    }
     /*---------------------------
    }
    トップページ
    ---------------------------*/
    .pankuzu {
        padding: 0;
    }
    #section_topics .info_box {
        padding: 30px 0px;
    }
    #section_topics .info_box article img{
        max-width:100%;
        height: auto;
    }
    #section_topics {
        background-size: cover;
    }
    #section_topics .topics_title time{
        display: block;
        max-width: 130px;
        width: 100%;
        margin: 0 0px 10px 0;
    }
     /*---------------------------
    メイン画像
    ---------------------------*/
    /* SP用の軽い画像に差し替える（PC用は1920px幅で重いため） */
    #mainvisual li.no01 .mainvisual_photo {
        background: url(images/mainvisual01_sp.jpg) center center no-repeat;
        background: image-set(url(images/mainvisual01_sp.webp) type("image/webp"), url(images/mainvisual01_sp.jpg) type("image/jpeg")) center center no-repeat;
        background-size: cover;
        height: 80vh;
    }
    #mainvisual li.no02 .mainvisual_photo {
        background: url(images/mainvisual02_sp.jpg) center center no-repeat;
        background: image-set(url(images/mainvisual02_sp.webp) type("image/webp"), url(images/mainvisual02_sp.jpg) type("image/jpeg")) center center no-repeat;
        background-size: cover;
        height: 80vh;
    }
    .mainvisual_txt {
        font-size: 25px;
        max-width: 200px;
        left: 0;
    }
     /*---------------------------
    ヘッダー
    ---------------------------*/
    #twitter{
        overflow: hidden;
    }
    #drawer .menu-bg.top {
        left: -23%;
        top: -103px;
        transform: rotate(-45deg) translateY(-152%);
    }

     /*---------------------------
    フッター
    ---------------------------*/
    .copy {
        background: #fff;
        padding: 10px 10px 70px;
    }
    /*------------------------------
    テンプレート
    -------------------------------*/
    .table_collum_03 th, .table_collum_03 td {
        padding: 10px 5px;
    }
    .table_collum_03 th, .table_collum_03 td {
        padding: 10px 5px;
    }
    .table_collum_03 .txt {
        text-align: left;
    }
    .content_borderbox {
        padding: 20px 0;
        margin: 0 auto 20px;
        padding: 0;
    }
    .bnr_area {
        padding: 0px 0!important;
        background: none;
    }
    .template_bnr_btn {
        padding: 10px;
    }
    .col_2 img, .col_3 img, .col_4 img {
        /* max-width: 300px; */
    }

    /*---------------------------
    コンセプト
    ---------------------------*/
    .section_message_datail {
        position: relative;
        margin: -150px 0 0 0;
    }
    .section_message_inner {
        padding: 10px;
    }
    .section_message_img{
        position: static;
        height: 300px;
        background: url(images/bg_message_s.jpg) no-repeat center center;
        background: image-set(url(images/bg_message_s.webp) type("image/webp"), url(images/bg_message_s.jpg) type("image/jpeg")) no-repeat center center;
        background-size: 100%;
    }
    .message_left .message_box,
    .message_right .message_box{
        padding: 40px;
        width: 90%;
        margin: auto;
    }


    /*--------------------------------------------
      アクセス
    --------------------------------------------*/
    iframe.access_map{
        height: 300px;
    }
    /*--------------------------------------------
      求人
    -------------------------------------------*/
    .recruit_photo{
        padding: 20px;
        margin-bottom: 10px;
    }
    .recruit_photo_inner{
        padding: 10px;
        font-size: 14px;
    }
    .table_collum_recruit th,
    .table_collum_recruit td {
        display: block;
        width: 100%;
        border: none;
    }
    .table_collum_recruit th {
        border-left: 3px solid #fff;
        padding: 5px 10px;
    }
    .table_collum_recruit td {
        padding: 10px;
        margin-bottom: 10px;
    }
    .recruit_label span {
        width: 47%;
        display: flex;
        align-items: center;
    }
}


/* template
------------------------------------------*/
.box,
.box-wrap {
  position: relative;
  margin: 0 auto 40px auto;
}

.box:last-child,
.box-wrap:last-child {
  margin-bottom: 0;
}

.box-wrap.xl {
  margin-left: calc(50% - var(--vw) * 50);
  margin-right: calc(50% - var(--vw) * 50);
  width: calc(var(--vw) * 100);
}
.box-wrap.lg {
  margin-left: calc(50% - var(--vw) * 50);
  margin-right: calc(50% - var(--vw) * 50);
  padding: 0 4vmin;
  width: calc(var(--vw) * 100);
}
.box-wrap.sm {
  padding: 0 4vmin;
  max-width: 900px;
}
.box-wrap.bg {
  padding: var(--box-margin) 0;
}
.box-wrap.bg:before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: calc(var(--vw) * 100);
  height: 100%;
  background: var(--sub_color);
  transform: translateX(-50%);
  z-index: -1;
}

.box h2.box-h2 {
  margin: 0;
  font-size: 4.2rem;
}
.box h3:not([class]) {
  margin: 15px 0;
}
.box h3.box-h3 {
  margin: 0 0 2vh 0;
  font-size: 1.7rem;
}
.box .copy {
  /* フッターの著作権表示用 .copy（background:#fff）と同名のため、
     そちらの白背景を打ち消す。画像上や濃色背景に白文字で置いたとき、
     白い箱だけが見えて文字が読めなくなっていた。 */
  margin: 0 0 2vh 0;
  padding: 0;
  background: none;
  font-size: 1.6rem;
  font-weight: bold;
  line-height: 1.3;
}
.box p {
  margin: 0 0 2vh 0;
}
.box ul,
.box ol {
  list-style: none;
}
/*.box img {
  opacity: 0;
}*/
.box .image {
  overflow: hidden;
}
.box .image img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  transform: scale(1.1);
}
.box.image-bg-type02 .image:after,
.box.banner-type01 .image:after,
.box.contact-type01 .image:after,
.box.contact-type02 .image:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--image-overlay);
}
.box .btn {
  margin: 4vh 0 0 0;
}
.box .btn a {
  display: inline-block;
  position: relative;
  margin: 0 auto;
  padding: 13px 50px 12px 30px;
  color: #fff;
  background: var(--main_color_2);
  border-radius: 30px;
}
.box .btn a:after {
  content: "\e5cc";
  position: absolute;
  top: 50%;
  right: 25px;
  font-family: "Material Symbols Outlined";
  font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 20;
  line-height: 1;
  transform: translateY(-50%);
}
.box .text > :last-child:not(.btn) {
  margin-bottom: 0;
}

.title-type01,
.title-type02,
.title-type03,
.title-type04 {
  margin: 0 auto calc(var(--box-margin) * 0.65) auto;
}
.title-type01,
.title-type03 {
  padding: 30px 0 0 0;
}
.title-type01:before,
.title-type03:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 3px;
  background: var(--main_color);
}
.title-type01 span:nth-child(2),
.title-type02 span:nth-child(2),
.title-type03 span:nth-child(2),
.title-type04 span:nth-child(2) {
  opacity: 0.5;
  display: block;
  font-size: 1.8rem;
  font-weight: bold;
  line-height: 1.3;
}

.title-type02,
.title-type04 {
  padding: 0 0 30px 0;
  text-align: center;
}
.title-type02:before,
.title-type04:before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 100px;
  height: 3px;
  background: var(--main_color);
  transform: translateX(-50%);
}
.title-type02 span:nth-child(2),
.title-type04 span:nth-child(2) {
  margin: 0.5em 0 0 0;
}

.title-text-type01 {
  overflow: hidden;
}
.title-text-type01 h2.box-h2 {
  float: left;
  margin: 0 80px 0 0;
  writing-mode: vertical-rl;
}
.title-text-type01.right h2.box-h2 {
  float: right;
  margin: 0 0 0 80px;
}
.title-text-type01 h2 .ja {
  text-orientation: upright;
}
.title-text-type01 h2 .en {
  opacity: 0.5;
  display: block;
  margin: 0 0 0 10px;
  font-size: 1.8rem;
  font-weight: bold;
  line-height: 1.3;
}
.title-text-type01 .text :first-child {
  margin-top: 0;
}

.row {
  display: flex;
  gap: 30px;
}
.row .col {
  width: 100%;
}
.row .col :first-child {
  margin-top: 0;
}
.row .col :last-child {
  margin-bottom: 0;
}

.lead-type01 {
  text-align: center;
}

.image-text-type01:after {
  content: "";
  clear: both;
  display: block;
}
.image-text-type01 .image {
  float: left;
  margin: 0 30px 0 0;
}
.image-text-type01.right .image {
  float: right;
  margin: 0 0 0 30px;
}

.image-text-type02 {
  display: flex;
  justify-content: space-between;
  padding: 0 0 50px 0;
}
.image-text-type02 .image {
  position: relative;
  width: 60%;
  min-height: 25vmax;
}
.image-text-type02 .image img {
  position: absolute;
  top: 0;
  left: 0;
}
.image-text-type02 .text {
  position: relative;
  margin: 0 auto;
  padding: 0 50px;
  width: 40%;
}
.image-text-type02 .text:before {
  content: "";
  position: absolute;
  top: 50px;
  left: -200px;
  width: calc(100% + 1200px);
  height: 100%;
  background: var(--sub_color);
  z-index: -1;
}
.image-text-type02.right {
  flex-direction: row-reverse;
}
.image-text-type02.right .text:before {
  left: -1000px;
}
.box.image-text-type02 .box-h3,
.box.image-text-type02 .copy,
.box.image-text-type02 p,
.box.image-text-type02 .btn {
  margin-left: auto;
  margin-right: auto;
  max-width: 500px;
}

.image-text-type03 {
  display: flex;
}
.image-text-type03 .image {
  position: relative;
  width: 60%;
}
.image-text-type03 .image img {
  position: absolute;
  top: 0;
  left: 0;
}
.image-text-type03 .text {
  position: relative;
  margin: 0 auto;
  padding: 120px 60px 120px 0;
  width: 40%;
  z-index: 2;
}
.image-text-type03 .text:before {
  content: "";
  position: absolute;
  top: 60px;
  left: -60px;
  width: calc(100% + 60px);
  height: calc(100% - 120px);
  background: var(--sub_color);
  z-index: -1;
}
.box.image-text-type03 .box-h3,
.box.image-text-type03 .copy,
.box.image-text-type03 p,
.box.image-text-type03 .btn {
  margin-left: auto;
  margin-right: auto;
  max-width: 500px;
}

.image-text-type03.right {
  flex-direction: row-reverse;
}
.image-text-type03.right .text {
  padding: 120px 0 120px 60px;
}
.image-text-type03.right .text:before {
  left: auto;
  right: -60px;
}

.image-bg-type01 .image {
  width: 100%;
  height: 500px;
}
.image-bg-type01 .text {
  position: relative;
  margin: -100px 10vw 0 10vw;
  padding: 60px 60px 0 60px;
  background: var(--body-color-bg);
}
.box-wrap.bg .image-bg-type01 .text {
  padding-bottom: 60px;
}

.image-bg-type02 .image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.image-bg-type02 .text {
  position: relative;
  margin: 0 auto;
  padding: 100px 0;
  max-width: 600px;
  color: #fff;
  text-align: center;
}
.image-bg-type02 .text h3 {
  color: #fff;
}

.image-bg-type03 {
  height: 500px;
}
.image-bg-type03 .image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.image-bg-type03 .image img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.qa-type01 dl dt,
.qa-type01 dl dd {
  display: flex;
  align-items: center;
  position: relative;
  padding: 15px 15px 15px 80px;
  min-height: 100px;
}
.qa-type01 dl dd {
  background: var(--sub_color);
}
.qa-type01 dl dt:before,
.qa-type01 dl dd:before {
  content: "Q";
  display: grid;
  place-items: center;
  position: absolute;
  top: 0;
  left: 15px;
  bottom: 0;
  margin: auto;
  width: 40px;
  height: 40px;
  color: #fff;
  background: var(--main_color);
  border-radius: 50%;
}
.qa-type01 dl dd:before {
  content: "A";
  background: var(--main_color_2);
}

.list-number-type01 {
  padding: 25px 0 0 0;
}
.list-number-type01 ol {
  counter-reset: count 0;
  display: flex;
  gap: 50px 30px;
  padding: 0;
}
.list-number-type01 ol li {
  position: relative;
  width: 100%;
  background: var(--sub_color);
}
.list-number-type01 ol li:before {
  content: "0" counter(count);
  counter-increment: count 1;
  display: block;
  position: absolute;
  top: -55px;
  left: 50%;
  font-size: 4rem;
  font-weight: bold;
  transform: translateX(-50%);
  z-index: 1;
}
.list-number-type01 ol li .text {
  padding: 4vmin;
}

.list-number-type02 {
  padding: 0 0 var(--box-margin) 0;
}
.list-number-type02:after {
  content: "";
  position: absolute;
  top: 125px;
  left: 50%;
  width: 100vw;
  height: calc(100% - 125px);
  background: var(--sub_color);
  z-index: -1;
  transform: translateX(-50%);
}
.list-number-type02 ol {
  counter-reset: count 0;
  display: flex;
  gap: 30px;
  padding: 0;
}
.list-number-type02 ol li {
  position: relative;
  width: 100%;
}
.list-number-type02 ol li:before {
  content: "0" counter(count);
  counter-increment: count 1;
  display: block;
  position: absolute;
  top: -20px;
  left: 0;
  font-size: 5rem;
  font-weight: bold;
  border-bottom: var(--border-color) 3px solid;
  z-index: 1;
}
.list-number-type02 ol li .image {
  position: relative;
  margin: 0 auto 20px auto;
  border-radius: 50%;
}
.list-number-type02 ol li .image:after {
  content: "";
  display: block;
  padding: 100% 0 0 0;
}
.list-number-type02 ol li .image img {
  position: absolute;
  top: 0;
  left: 0;
}
.list-number-type01 .btn,
.list-number-type02 .btn {
  text-align: center;
}

.list-check-type01 {
  display: flex;
  justify-content: center;
}
.list-check-type01 > ul > li {
  position: relative;
  margin: 10px 0;
  padding: 0 0 0 25px;
}
.list-check-type01 > ul > li:before {
  content: "\e2e6";
  position: absolute;
  top: 0;
  left: 0;
  color: var(--main_color_2);
  font-family: "Material Symbols Outlined";
  font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 20;
}

.list-flow-type01 {
  position: relative;
}
.list-flow-type01:after {
  content: "";
  position: absolute;
  top: 0;
  left: 100px;
  width: 12px;
  height: 100%;
  background: var(--sub_color);
  z-index: -1;
}
.list-flow-type01 > ul > li {
  /* STEP見出し・丸・タイトルの縦位置を揃えるための基準。
     タイトル1行分の高さをここで決め、3要素ともこの中心に合わせる。 */
  --flow-line: 3.1rem;

  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 0 0 50px 0;
}
.list-flow-type01 > ul > li .icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--flow-line);
  padding: 2px 5px;
  width: 80px;
  color: #fff;
  font-size: 1rem;
  line-height: 1.2;
  text-align: center;
  background: var(--main_color);
}
.list-flow-type01 > ul > li .icon:after {
  content: "";
  position: absolute;
  top: 50%;
  right: -10px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 4px 0 4px 10px;
  border-color: transparent transparent transparent var(--main_color);
  transform: translateY(-50%);
}
.list-flow-type01 > ul > li .text {
  position: relative;
  width: calc(100% - 150px);
  /* section{text-align:center} の影響で、タイトルは全幅の中央、
     本文は画像を避けた狭い行の中央に寄り、両者の位置がずれていた。
     手順を読む箇所なので左揃えに統一する。 */
  text-align: left;
}
.list-flow-type01 > ul > li .text:before {
  content: "";
  position: absolute;
  top: calc(var(--flow-line) / 2);
  left: -48px;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  background: var(--main_color);
  border-radius: 4px;
}
.list-flow-type01 > ul > li .text:after {
  content: "";
  position: absolute;
  top: calc(var(--flow-line) / 2);
  left: -40px;
  width: 25px;
  height: 1px;
  border-bottom: var(--border-color) 1px dashed;
}
.list-flow-type01 > ul > li .text h3.box-h3 {
  margin: 0 0 15px 0;
  font-size: 2.2rem;
  line-height: var(--flow-line);
}

/* フロー内に画像付きブロックを入れたとき、画像とテキストの間隔を保つ */
.list-flow-type01 > ul > li .text .image-text-type01 .image {
  margin-bottom: 20px;
}

.banner-type01 ul {
  display: flex;
  gap: 30px;
}
.banner-type01 ul li {
  position: relative;
  width: 100%;
}
.banner-type01 ul li .image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.banner-type01 ul li .image img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}
.banner-type01 ul li a {
  display: block;
  position: relative;
  padding: 100px 50px;
  color: #fff;
  font-weight: bold;
}
.banner-type01 ul li a span {
  display: block;
  font-size: 2rem;
}
.banner-type01 ul li a:after {
  content: "\e5cc";
  position: absolute;
  bottom: 20px;
  right: 20px;
  margin: 0 0 0 15px;
  color: #fff;
  font-size: 2rem;
  font-family: "Material Symbols Outlined";
  font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 20;
}

.banner-type02 ul {
  display: flex;
  gap: 30px;
}
.banner-type02 ul li {
  overflow: hidden;
  width: 100%;
  background: var(--main_color);
  border-radius: 3px;
  box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.15);
}
.banner-type02 ul li .text {
  padding: 4vmin;
  color: #fff;
}
.banner-type02 ul li .text h3 {
  color: #fff;
}
.banner-type02 ul li .text .btn {
  text-align: center;
}
.banner-type02 ul li .text .btn a {
  background: var(--text-color);
}

.banner-type03 ul {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 30px;
}
.banner-type03 ul li {
  display: flex;
  flex-direction: row-reverse;
  background: var(--main_color);
}
.banner-type03 ul li .image {
  width: 55%;
}
.banner-type03 ul li .text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 5%;
  width: 45%;
  color: #fff;
}
.banner-type03 ul li .text .en {
  width: 100%;
}
.banner-type03 ul li .text .ja {
  width: 100%;
  font-size: 2.2rem;
  font-weight: bold;
}

.banner-type03 ul:has(> :nth-child(2):last-child) {
  grid-template-columns: repeat(2, 1fr);
}

.banner-type03 ul:has(> :nth-child(3)) {
  grid-template-columns: repeat(3, 1fr);
}
.banner-type03 ul:has(> :nth-child(3)) li {
  display: block;
}
.banner-type03 ul:has(> :nth-child(3)) li .image,
.banner-type03 ul:has(> :nth-child(3)) li .text {
  width: 100%;
}

.slideshow-type01,
.slideshow-type02 {
  padding: 0 0 50px 0;
}
.slideshow-type02 .swiper-slide {
  overflow: hidden;
  display: flex;
  justify-content: center;
  max-width: 1000px;
}
.slideshow-type02 .swiper-slide .image {
  width: 100%;
}
@media screen and (max-width: 1100px) {
  .slideshow-type02 {
    padding: 20px 0 50px 0;
  }
  .slideshow-type02 .swiper-slide {
    max-width: 80%;
  }
}

.carousel-type01 .image {
  margin: 0 auto 20px auto;
}
.carousel-type01 .swiper-pagination {
  position: relative;
  margin: 30px 0 0 0;
}

.slider-type01 {
  display: none;
}
.slider-type01.swiper-initialized {
  display: block;
}
.slider-type01 .swiper-wrapper {
  transition-timing-function: linear;
}
.slider-type01 .swiper-slide {
  margin: 0 0 0 -1px;
}
.slider-type01 img {
  opacity: 1;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.accordion-type01 ul li {
  margin: 0 0 30px 0;
  padding: 30px;
  border: var(--border-color) 1px solid;
  border-radius: 3px;
}
.accordion-type01 ul li h3.box-h3 {
  cursor: pointer;
  position: relative;
  margin: 0;
  padding: 0 40px 0 0;
  font-size: 2.2rem;
  user-select: none;
}
.accordion-type01 ul li h3.box-h3:after {
  content: "\e5cf";
  position: absolute;
  top: 0;
  right: 0;
  color: var(--main_color);
  font-size: 2.2rem;
  font-family: "Material Symbols Outlined";
  font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 20;
  transition: all 0.2s linear;
}
.accordion-type01 ul li.active h3.box-h3:after {
  transform: rotate(180deg);
}
.accordion-type01 ul li .text {
  opacity: 0;
  overflow: hidden;
  padding: 0 30px;
  height: 0;
  background: var(--sub_color);
  transition: opacity 0.25s linear, padding 0.25s linear, margin 0.25s linear;
}
.accordion-type01 ul li.active .text {
  opacity: 1;
  margin: 20px 0 0 0;
  padding: 30px;
  height: auto;
}
.accordion-type01 ul li.active .text :first-child {
  margin-top: 0;
}

.contact-type01 {
  padding: 100px 0;
}
.contact-type01 .image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.contact-type01 .title {
  position: relative;
  margin: 0 auto 20px auto;
  max-width: 600px;
  color: #fff;
  font-size: 2.2rem;
  font-weight: bold;
  text-align: center;
}
.contact-type01 .title span {
  display: block;
  font-size: 1.8rem;
  font-weight: bold;
}
.contact-type01 .text {
  position: relative;
  margin: 0 auto;
  max-width: 700px;
  color: #fff;
  text-align: center;
}
.contact-type01 .text .tel {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 4rem;
  font-weight: bold;
}
.contact-type01 .text .tel:before {
  content: "\f0d4";
  margin: 0 15px 0 0;
  font-family: "Material Symbols Outlined";
  font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 20;
}
.contact-type01 .text .datetime {
  margin: -2vh 0 2vh 0;
}
.contact-type01 .text .btn {
  display: flex;
  justify-content: center;
}
.contact-type01 .text .btn div {
  margin: 0 5px;
}
.contact-type01 .text .btn div a,
.contact-type02 .text .btn div a {
  padding: 13px 30px 12px 50px;
}
.contact-type01 .text .btn div a:after,
.contact-type02 .text .btn div a:after {
  content: "\e159";  /* mail */
  right: auto;
  left: 25px;
}

.contact-type02 {
  padding: 60px 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.contact-type02 .image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
.contact-type02 .title {
  position: relative;
  padding: 0 60px 0 0;
  color: #fff;
  font-size: 2rem;
  font-weight: bold;
  text-align: right;
}
.contact-type02 .title span {
  display: block;
  font-size: 1.8rem;
  font-weight: bold;
}
.contact-type02 .text {
  position: relative;
  color: #fff;
}
.contact-type02 .text .tel {
  display: flex;
  align-items: center;
  font-size: 3.5rem;
  font-weight: bold;
}
.contact-type02 .text .tel:before {
  content: "\f0d4";
  margin: 0 15px 0 0;
  font-family: "Material Symbols Outlined";
  font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 20;
}
.contact-type02 .text .datetime {
  margin: -1vh 0 3vh 0;
}
.contact-type02 .text .btn {
  display: flex;
}
.contact-type02 .text .btn div {
  margin: 0 10px 0 0;
}

.table-type01 {
  margin: 0 auto var(--text-margin) auto;
}
.table-type01 table {
  width: 100%;
}
.table-type01 table th,
.table-type01 table td {
  padding: 15px;
  text-align: left;
  vertical-align: top;
}
.table-type01 table th {
  font-weight: bold;
  border-bottom: var(--main_color) 2px solid;
}
.table-type01 table td {
  border-bottom: var(--border-color) 2px solid;
}

.table-type02 {
  margin: 0 auto var(--text-margin) auto;
}
.table-type02 table {
  margin: -5px;
  width: calc(100% + 10px);
  border-collapse: separate;
  border-spacing: 5px;
}
.table-type02 table th,
.table-type02 table td {
  padding: 15px;
  text-align: left;
  vertical-align: top;
}
.table-type02 table th {
  color: #fff;
  font-weight: bold;
  background: var(--main_color);
}
.table-type02 table td {
  background: var(--sub_color);
}

.blog-type01 ul {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
.blog-type01 ul li,
.blog-type04 .swiper-slide {
  position: relative;
}
.blog-type01 ul li .category,
.blog-type04 .swiper-slide .category {
  position: absolute;
  top: 0;
  left: 0;
  padding: 2px 5px;
  color: #fff;
  font-size: 1.3rem;
  font-weight: bold;
  background: var(--main_color);
  z-index: 1;
}
.blog-type01 ul li .image,
.blog-type04 .swiper-slide .image {
  margin: 0 0 10px 0;
}
.blog-type01 ul li h3.box-h3,
.blog-type04 .swiper-slide h3.box-h3 {
  margin: 0 0 5px 0;
  font-size: 1.8rem;
}
.blog-type01 ul li .date,
.blog-type04 .swiper-slide .date {
  margin: 0 0 12px 0;
  color: var(--text-sub_color);
  font-size: 1.2rem;
}
.blog-type01 ul li p,
.blog-type04 .swiper-slide p {
  margin: 0;
}
.blog-type04 .swiper-pagination {
  position: relative;
  margin: 30px 0 0 0;
}

.blog-type02 ul li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  margin: 0 0 20px 0;
  padding: 0 0 20px 0;
  border-bottom: var(--border-color) 1px dashed;
}
.blog-type02 ul li:last-child {
  margin: 0;
  padding: 0;
  border: none;
}
.blog-type02 ul li .category {
  position: absolute;
  top: 0;
  left: 0;
  padding: 2px 5px;
  color: #fff;
  font-size: 1.3rem;
  font-weight: bold;
  background: var(--main_color);
  z-index: 1;
}
.blog-type02 ul li .image {
  width: 300px;
}
.blog-type02 ul li .text {
  width: calc(100% - 320px);
}
.blog-type02 ul li h3.box-h3 {
  margin: 0 0 5px 0;
  font-size: 1.8rem;
}
.blog-type02 ul li .date {
  margin: 0 0 12px 0;
  color: var(--text-sub_color);
  font-size: 1.2rem;
}
.blog-type02 ul li p {
  margin: 0;
}

.blog-type03 ul li {
  margin: 0 0 20px 0;
  padding: 0 0 20px 0;
  border-bottom: var(--border-color) 1px dashed;
}
.blog-type03 ul li:last-child {
  margin: 0;
  padding: 0;
  border: none;
}
.blog-type03 ul li .text {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
}
.blog-type03 ul li .category {
  order: 2;
  margin: 0 15px 0 0;
  padding: 2px 5px;
  color: #fff;
  font-size: 1.3rem;
  font-weight: bold;
  background: var(--main_color);
}
.blog-type03 ul li h3.box-h3 {
  order: 3;
  margin: 0;
  font-size: 1.5rem;
  line-height: 1.6;
}
.blog-type03 ul li .date {
  order: 1;
  margin: 0 15px 0 0;
  color: var(--text-sub_color);
}
.blog-type03 ul li p {
  order: 4;
  margin: 10px 0 0 0;
  width: 100%;
}

.blog-type01 .btn,
.blog-type02 .btn,
.blog-type03 .btn,
.blog-type04 .btn {
  text-align: center;
}

.qa-type01 dl dt,
.qa-type01 dl dd {
  display: flex;
  align-items: center;
  position: relative;
  padding: 15px 15px 15px 80px;
  min-height: 100px;
}
.qa-type01 dl dd {
  background: var(--sub-color);
}
.qa-type01 dl dt:before,
.qa-type01 dl dd:before {
  content: "Q";
  display: grid;
  place-items: center;
  position: absolute;
  top: 0;
  left: 15px;
  bottom: 0;
  margin: auto;
  width: 40px;
  height: 40px;
  color: #fff;
  background: var(--main-color);
  border-radius: 50%;
}
.qa-type01 dl dd:before {
  content: "A";
  background: var(--main-color-2);
}

/*240px専用*/
@media screen and (max-width:768px) {

/* template
------------------------------------------*/
.box-wrap.lg,
.box-wrap.sm {
  margin-left: 0;
  margin-right: 0;
  width: 100%;
}
.box-wrap.sm {
  padding: 0 10vmin;
}

.box h2.box-h2 {
  margin: 0;
  font-size: 2.8rem;
}
.box h3.box-h3 {
  font-size: 2.2rem;
}
.box .btn {
  margin: 4vh 0 0 0;
  text-align: center;
}

.row {
  flex-wrap: wrap;
  gap: 15px;
}

.title-text-type01 h2.box-h2 {
  margin: 0 30px 0 0;
}
.title-text-type01.right h2.box-h2 {
  margin: 0 0 0 30px;
}

.lead-type01 .text p {
  text-align: left;
}
.lead-type01 .text p br {
  display: none;
}

.image-text-type01 .image,
.image-text-type01.right .image {
  float: none;
  margin: 0 0 20px 0;
}

.image-text-type02 {
  display: block;
  padding: 0;
}
.image-text-type02 .image {
  margin: 0 0 20px 0;
  width: 100%;
  min-height: auto;
}
.image-text-type02 .image img {
  position: relative;
}
.image-text-type02 .text {
  padding: 0;
  width: 100%;
}
.image-text-type02 .text:before {
  top: -80px;
  left: -4vmin;
  width: calc(100% + 8vmin);
  height: calc(100% + 55px);
}
.image-text-type02.right .text:before {
  left: -4vmin;
}

.image-text-type03 {
  display: block;
}
.image-text-type03 .image {
  width: 100%;
}
.image-text-type03 .image img {
  position: relative;
}
.image-text-type03 .text,
.image-text-type03.right .text {
  position: relative;
  margin: -30px 4vmin 0 4vmin;
  padding: 30px;
  width: calc(100% - 8vmin);
  background: var(--sub-color);
}
.image-text-type03 .text:before {
  display: none;
}

.image-bg-type01 .image {
  height: auto;
}
.image-bg-type01 .text {
  margin: -30px 4vmin 0 4vmin;
  padding: 30px 30px 0 30px;
}
.box-wrap.bg .image-bg-type01 .text {
  padding-bottom: 30px;
}

.image-bg-type02 .text {
  padding: 60px 4vmin;
}

.image-bg-type03 {
  height: 30vmax;
}

.list-number-type01 ol {
  flex-wrap: wrap;
  gap: 50px;
}
.list-number-type01 ol li:before {
  top: -30px;
  font-size: 4rem;
}

.list-number-type02 {
  padding: 0;
}
.list-number-type02:after {
  display: none;
}
.list-number-type02 ol {
  flex-wrap: wrap;
  gap: 50px;
}
.list-number-type02 ol li {
  position: relative;
}
.list-number-type02 ol li:before {
  top: 0;
  left: 5%;
  font-size: 4rem;
}
.list-number-type02 ol li .image {
  max-width: 260px;
}
.list-number-type01 .btn,
.list-number-type02 .btn {
  margin: 40px 0 0 0;
}

.list-flow-type01:after {
  left: 10px;
}
.list-flow-type01 ul li {
  display: block;
}
.list-flow-type01 ul li .icon {
  /* SPは縦積みなので、PC用の行高さ合わせは解除する */
  display: inline-flex;
  min-height: 0;
  padding: 5px;
  margin: 0 0 30px 0;
}
.list-flow-type01 ul li .icon:after {
  top: auto;
  bottom: -12px;
  left: 12px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8px 4px 0 4px;
  border-color: var(--main-color) transparent transparent transparent;
}
.list-flow-type01 ul li .text {
  margin: 0 0 0 auto;
  width: calc(100% - 61px);
}

.banner-type01 ul {
  flex-wrap: wrap;
  gap: 15px;
}
.banner-type01 ul li a {
  padding: 80px 40px;
}
.banner-type01 ul li a span {
  font-size: 2.8rem;
}

.banner-type02 ul {
  flex-wrap: wrap;
  gap: 50px;
}

.banner-type03 ul,
.banner-type03 ul:has(> :nth-child(2):last-child),
.banner-type03 ul:has(> :nth-child(3)) {
  grid-template-columns: repeat(1, 1fr);
  gap: 15px;
}
.banner-type03 ul li .text {
  padding: 15px;
}
.banner-type03 ul:has(> :nth-child(3)) li {
  display: flex;
}
.banner-type03 ul:has(> :nth-child(3)) li .image {
  width: 55%;
}
.banner-type03 ul:has(> :nth-child(3)) li .text {
  width: 45%;
}

.accordion-type01 ul li {
  margin: 0 0 15px 0;
}
.accordion-type01 ul li h3:after {
  top: 2px;
}

.contact-type01 .tel a,
.contact-type02 .tel a {
  color: #fff;
  text-decoration: none;
}

.contact-type01 {
  padding: 60px 4vmin;
}
.contact-type01 .title .ja {
  font-size: 3.2rem;
}
.contact-type01 .text .tel {
  font-size: 3.2rem;
}
.contact-type01 .text .datetime {
  margin: 0 0 40px 0;
}
.contact-type01 .text .btn div {
  margin: 0 5px;
}
.contact-type01 .text .btn div a {
  padding: 12px 20px;
}
.contact-type01 .text .btn div a:after {
  display: none;
}

.contact-type02 {
  padding: 60px 4vmin;
  display: block;
}
.contact-type02 .title {
  margin: 0 auto 20px auto;
  padding: 0;
  text-align: center;
}
.contact-type02 .title .ja {
  font-size: 3.2rem;
}
.contact-type02 .text {
  text-align: center;
}
.contact-type02 .text .tel {
  font-size: 3.2rem;
}
.contact-type02 .text .datetime {
  margin: 0 0 40px 0;
}
.contact-type02 .text .btn {
  justify-content: center;
}
.contact-type02 .text .btn div {
  margin: 0 5px;
}
.contact-type02 .text .btn div a {
  padding: 12px 20px;
}
.contact-type02 .text .btn div a:after {
  display: none;
}

.table-type01 table th,
.table-type01 table td {
  display: block;
  padding: 15px 0;
  width: 100% !important;
}

.table-type02 table {
  margin: 0;
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}
.table-type02 table th,
.table-type02 table td {
  display: block;
  width: 100% !important;
}

.blog-type01 ul,
.blog-type02 ul,
.blog-type03 ul {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px 15px;
}
.blog-type03 ul {
  grid-template-columns: repeat(1, 1fr);
}
.blog-type02 ul li,
.blog-type03 ul li {
  display: block;
  margin: 0;
  padding: 0;
  border-bottom: none;
}
.blog-type02 ul li .image {
  margin: 0 0 10px 0;
  width: 100%;
}
.blog-type02 ul li .text {
  width: 100%;
}

.blog-type03 ul li .category {
  margin: 0 10px 0 0;
}
.blog-type03 ul li .date {
  margin: 0 0 5px 0;
  width: 100%;
}

.blog-type01 ul li .text p,
.blog-type02 ul li .text p,
.blog-type03 ul li .text p {
  margin: 0;
  font-size: 1.3rem;
}

}

/*slick.css*/
.slick-next,.slick-prev{/* font-size:0; */line-height: 25px;position:absolute;/* top:50%; */display:block;width:20px;line-height: 40px;padding:0;-webkit-transform:translate(0,-50%);-ms-transform:translate(0,-50%);transform:translate(0,-50%);cursor:pointer;border:0;}.slick-next,.slick-next:focus,.slick-next:hover,.slick-prev,.slick-prev:focus,.slick-prev:hover{/* color:transparent; *//* outline:0; */background:auto;}.slick-next:focus:before,.slick-next:hover:before,.slick-prev:focus:before,.slick-prev:hover:before{opacity:1}.slick-next.slick-disabled:before,.slick-prev.slick-disabled:before{opacity:.25}.slick-next:before,.slick-prev:before{font-family:slick;font-size:20px;line-height: 1;opacity:.75;color: #3c3c3c;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}.slick-prev{left: 5px;bottom: -70px;z-index: 9999;width: 45%;background: #f4f4f4;color: #3c3c3c;text-align: center;}[dir='rtl'] .slick-prev{right:-25px;left:auto}.slick-prev:before{content:'←';top: 8px;left: 30px;position: absolute;}[dir='rtl'] .slick-prev:before{content:'→'}.slick-next{right: 5px;bottom: -70px;z-index: 9999;width: 45%;text-align: center;background: #f4f4f4;color: #3c3c3c;}[dir='rtl'] .slick-next{right:auto;left:-25px}.slick-next:before{display:none;content:'→'}[dir='rtl'] .slick-next:before{content:'←'}.slick-dotted.slick-slider{margin-bottom:30px}.slick-dots{position:absolute;bottom: -66px;/* left: -7px; *//* display:block; */width:100%;/* height: 30px; */padding:0;margin:0;list-style:none;text-align:center;display: flex;justify-content: center;align-items: center;}.slick-dots li{position:relative;/* display:inline-block; *//* margin:0 5px; */padding:0;/* width: 20px; *//* height: 20px; */}.slick-dots li,.slick-dots li button{/* width: 20px; *//* height: 20px; */cursor:pointer;}.slick-dots li button{font-size:0;line-height:0;display:block;padding: 10px 15px;color:transparent;border:0;outline:0;background:transparent;/* -webkit-appearance: none; */}.slick-dots li button:focus,.slick-dots li button:hover{outline:0}.slick-dots li button:focus:before,.slick-dots li button:hover:before{opacity:1}.slick-dots li button:before{font-family:slick;font-size:6px;line-height: 20px;position:absolute;top: 5px;left:0;font-size: 50px;width: 20px;height: 20px;content:'•';text-align:center;opacity:.25;color: #5f5f5f;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}.slick-dots li.slick-active button:before{opacity:.75;color: #505050;}.slick-slider{box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none;-khtml-user-select:none;-ms-touch-action:pan-y;touch-action:pan-y;-webkit-tap-highlight-color:rgba(0,0,0,0)}.slick-list,.slick-slider{position:relative;display:block}.slick-list{overflow:hidden;margin:0;padding:0}.slick-list:focus{outline:0}.slick-list.dragging{cursor:pointer;cursor:hand}.slick-slider .slick-list,.slick-slider .slick-track{-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.slick-track{position:relative;top:0;left:0;display:block}.slick-track:after,.slick-track:before{display:table;content:''}.slick-track:after{clear:both}.slick-loading .slick-track{visibility:hidden}.slick-slide{display:none;float:left;height:100%;min-height:1px}[dir='rtl'] .slick-slide{float:right}.slick-slide img{/* display:block */}.slick-slide.slick-loading img{display:none}.slick-slide.dragging img{pointer-events:none}.slick-initialized .slick-slide{display:block}.slick-loading .slick-slide{visibility:hidden}.slick-vertical .slick-slide{display:block;height:auto;border:1px solid transparent}.slick-arrow.slick-hidden{display:none}.slick-next:after{content:"→";font-family: slick;font-size: 20px;line-height: 1;opacity: .75;color: #3c3c3c;-webkit-font-smoothing: antialiased;position: absolute;top: 10px;right: 30px;}
/*--------------------------------------
ページネーション / 検索結果
--------------------------------------*/
.pagination {
    margin: 50px auto 0;
    text-align: center;
}
.pagination ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px;
    list-style: none;
}
.pagination li {
    margin: 0;
}
.pagination a,
.pagination span {
    display: block;
    min-width: 42px;
    padding: 10px 12px;
    border: 1px solid var(--gray-dark);
    color: var(--main_color);
    font-size: 14px;
    line-height: 1;
    text-decoration: none;
    transition: 0.3s ease-in-out;
}
.pagination a:hover {
    background: var(--main_color);
    border-color: var(--main_color);
    color: #fff;
}
.pagination span.current {
    background: var(--main_color);
    border-color: var(--main_color);
    color: #fff;
}
.pagination .dots {
    border: none;
}

.search_query {
    text-align: center;
}
.search_item {
    padding: 25px 0;
    border-bottom: 1px solid var(--gray-dark);
}
.search_item_title {
    margin-bottom: 8px;
    font-size: 18px;
    line-height: 1.5;
}
.search_item_meta {
    margin-bottom: 10px;
    color: #888;
    font-size: 13px;
}
.search_form {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: 30px auto 0;
    max-width: 480px;
}
.search_form input[type="search"] {
    flex: 1;
    padding: 12px;
    border: 1px solid var(--gray-dark);
}
.search_form .search_submit {
    padding: 12px 24px;
    background: var(--main_color);
    border: none;
    color: #fff;
    cursor: pointer;
}
.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

@media screen and (max-width: 500px) {
    .pagination a,
    .pagination span {
        min-width: 36px;
        padding: 9px 8px;
        font-size: 13px;
    }
}

/*--------------------------------------
フッターナビ（wp_nav_menu化に伴う調整）
--------------------------------------*/
.footer_link {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 4px 0;
    list-style: none;
    margin: 0 auto 30px;
    padding: 0;
}
.footer_link li {
    margin: 0;
    padding: 0;
    list-style: none;
    position: relative;
}
/* 項目のあいだに区切り線を入れる（最初の項目の前には出さない） */
.footer_link li + li::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 1px;
    height: 12px;
    background: rgba(255, 255, 255, 0.35);
    transform: translateY(-50%);
}
.footer_link li a {
    display: block;
    width: auto;
    padding: 6px 18px;
    color: #fff;
    font-size: 13px;
    line-height: 1.6;
    white-space: nowrap;
    transition: opacity 0.3s ease-in-out;
}
.footer_link li a:hover,
.footer_link li a.active {
    opacity: 0.6;
}
.nav_empty a {
    opacity: 0.5;
}

/* SP：2列表示 */
@media screen and (max-width: 768px) {
    .footer_link {
        gap: 0;
        margin-bottom: 25px;
    }
    .footer_link li {
        width: 50%;
        text-align: center;
    }
    /* 縦1本の区切りは使わず、各セルの枠線で2列を整える */
    .footer_link li + li::before {
        display: none;
    }
    .footer_link li a {
        width: 100%;
        padding: 10px 6px;
        white-space: normal;
        border-bottom: 1px solid rgba(255, 255, 255, 0.18);
    }
    /* 左列には右側にも線を引いて2列らしく見せる */
    .footer_link li:nth-child(odd) a {
        border-right: 1px solid rgba(255, 255, 255, 0.18);
    }
}

/*--------------------------------------
Swiper（page-template02 のスライダー）
--------------------------------------*/
.swiper {
    overflow: hidden;
}
.slider-type01 .swiper-slide {
    width: auto;
}
.slider-type01 .swiper-wrapper {
    transition-timing-function: linear;
}
.swiper-pagination {
    position: relative;
    margin-top: 20px;
}
.swiper .swiper-pagination-bullet-active {
    background: var(--main_color);
}

/*--------------------------------------
新着情報カード（PC 3カラム / SP 1カラム）
home.php / index.php / archive.php 共通
--------------------------------------*/
.news_grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px 30px;
    margin: 0 auto 50px;
}

.news_card {
    display: flex;
    flex-direction: column;
    background: #fff;
}

/* サムネイル */
.news_card_thumb {
    display: block;
    overflow: hidden;
    margin-bottom: 18px;
    background: var(--gray_light);
    aspect-ratio: 16 / 10;
}
.news_card_thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .8s cubic-bezier(.16, 1, .3, 1);
}
.news_card_thumb:hover img {
    transform: scale(1.06);
}

/* 本文エリア */
.news_card_body {
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* 日付・カテゴリー */
.news_card_meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 10px;
    color: #888;
    font-size: 12px;
    letter-spacing: 0.05em;
}
.news_card_cat {
    padding: 4px 12px;
    background: var(--gray_light);
    color: var(--main_color);
    font-size: 11px;
    line-height: 1;
}

/* タイトル */
.news_card_title {
    margin-bottom: 12px;
    font-size: 17px;
    font-weight: bold;
    line-height: 1.6;
}
.news_card_title a {
    color: var(--main_color);
    text-decoration: none;
    transition: 0.3s ease-in-out;
}
.news_card_title a:hover {
    opacity: 0.7;
}

/* 抜粋 */
.news_card_excerpt {
    margin-bottom: 20px;
    color: #666;
    font-size: 13px;
    line-height: 1.9;
}

/* 詳細ボタン（カード下端に揃える） */
.news_card_btn {
    margin-top: auto;
    margin-bottom: 0;
}
.news_card_btn a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 150px;
    padding: 12px 24px;
    border: 1px solid var(--main_color);
    color: var(--main_color);
    font-size: 13px;
    letter-spacing: 0.08em;
    text-decoration: none;
    transition: 0.3s ease-in-out;
}
.news_card_btn a::after {
    content: "";
    width: 18px;
    height: 1px;
    margin-left: 12px;
    background: currentColor;
    transition: 0.3s ease-in-out;
}
.news_card_btn a:hover {
    background: var(--main_color);
    color: #fff;
}
.news_card_btn a:hover::after {
    width: 26px;
}

.archive_description {
    text-align: center;
}

/* タブレット：2カラム */
@media screen and (max-width: 1024px) {
    .news_grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 35px 25px;
    }
}

/* SP：1カラム */
@media screen and (max-width: 768px) {
    .news_grid {
        grid-template-columns: 1fr;
        gap: 35px;
        margin-bottom: 40px;
    }
    .news_card_thumb {
        margin-bottom: 15px;
        aspect-ratio: 16 / 9;
    }
    .news_card_title {
        font-size: 16px;
    }
    .news_card_btn a {
        width: 100%;
        padding: 14px 20px;
    }
}

/*--------------------------------------
新着情報のカテゴリー絞り込み
--------------------------------------*/
.news_filter {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 0 auto 40px;
    list-style: none;
}
.news_filter li {
    list-style: none;
}
.news_filter a {
    display: block;
    padding: 9px 22px;
    border: 1px solid var(--gray-dark);
    color: var(--main_color);
    font-size: 13px;
    line-height: 1;
    text-decoration: none;
    transition: 0.3s ease-in-out;
}
.news_filter a:hover {
    border-color: var(--main_color);
}
.news_filter a.is_current {
    background: var(--main_color);
    border-color: var(--main_color);
    color: #fff;
}

@media screen and (max-width: 500px) {
    .news_filter {
        gap: 8px;
        margin-bottom: 30px;
    }
    .news_filter a {
        padding: 8px 16px;
        font-size: 12px;
    }
}

/*--------------------------------------
記事詳細のメタ情報
--------------------------------------*/
.single_meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
    color: #888;
    font-size: 13px;
    letter-spacing: 0.05em;
}
.single_cat {
    padding: 4px 12px;
    background: var(--gray_light);
    color: var(--main_color);
    font-size: 12px;
    line-height: 1;
}

/*--------------------------------------
コンポーネントカタログの余白調整クラス
page-template02.php で使用
--------------------------------------*/
.box.mb0,
.box-wrap.mb0 {
    margin-bottom: 0 !important;
}
.box.mb-s,
.box-wrap.mb-s {
    margin-bottom: 20px;
}
.box.mb-l,
.box-wrap.mb-l {
    margin-bottom: 80px;
}

/* アコーディオンの見出しをキーボード操作したときの目印 */
.accordion-type01 ul li > h3:focus-visible {
    outline: 2px solid var(--main_color_2);
    outline-offset: 4px;
}

/*--------------------------------------
共通ボタン（詳しく見る など）
--------------------------------------*/
.btn_more {
    margin: 50px auto 0;
    text-align: center;
}
.btn_more a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    position: relative;
    min-width: 260px;
    padding: 20px 40px;
    border: 1px solid var(--main_color);
    color: var(--main_color);
    background: transparent;
    font-size: 15px;
    letter-spacing: 0.1em;
    line-height: 1;
    text-decoration: none;
    overflow: hidden;
    transition: color 0.4s ease, border-color 0.4s ease;
}

/* 背景が左から流れ込む */
.btn_more a::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--main_color);
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform 0.45s cubic-bezier(.16, 1, .3, 1);
    z-index: 0;
}
.btn_more a:hover::before,
.btn_more a:focus-visible::before {
    transform: scaleX(1);
    transform-origin: left center;
}

.btn_more a:hover,
.btn_more a:focus-visible {
    color: #fff;
}

.btn_more_label {
    position: relative;
    z-index: 1;
}

/* 矢印 */
.btn_more_arrow {
    position: relative;
    z-index: 1;
    display: block;
    width: 34px;
    height: 1px;
    background: currentColor;
    transition: width 0.45s cubic-bezier(.16, 1, .3, 1);
}
.btn_more_arrow::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    width: 7px;
    height: 7px;
    border-top: 1px solid currentColor;
    border-right: 1px solid currentColor;
    transform: translateY(-50%) rotate(45deg);
    transform-origin: center;
}
.btn_more a:hover .btn_more_arrow,
.btn_more a:focus-visible .btn_more_arrow {
    width: 48px;
}

.btn_more a:focus-visible {
    outline: 2px solid var(--main_color_2);
    outline-offset: 3px;
}

@media screen and (max-width: 768px) {
    .btn_more {
        margin-top: 40px;
    }
    .btn_more a {
        width: 100%;
        min-width: 0;
        max-width: 340px;
        padding: 18px 28px;
        font-size: 14px;
    }
}

/* 動きを減らす設定の人には出さない */
@media (prefers-reduced-motion: reduce) {
    .btn_more a::before,
    .btn_more_arrow {
        transition: none;
    }
}

/*======================================
本文の揃え方

section { text-align: center } が全体に効いているため、
長い本文まで中央寄せになり読みにくくなっていた。
見出し・キャッチコピー・ボタンは中央のまま、
「読ませる文章」だけを左揃えに戻す。

中央に戻したい箇所があれば .text_center を付ける。
======================================*/

/* --- 記事・固定ページの本文（エディタで入力した内容） --- */
.post_body,
.page_content > .inner > *:not(.box):not(.box-wrap),
.detail_text .post_body p,
.detail_text .post_body li,
.detail_text .post_body dd,
.detail_text .post_body table {
    text-align: left;
}

/* --- コンポーネント内の本文 --- */
.box p,
.box li,
.box dt,
.box dd,
.box .text > p {
    text-align: left;
}

/* キャッチコピー・見出し・ボタンは中央のまま */
.box .copy,
.box h2,
.box h3,
.box .btn,
.box .btn a,
.box.title-type01 *,
.box.title-type02 *,
.box.title-type03 *,
.box.title-type04 * {
    text-align: center;
}

/* 中央寄せを前提にデザインされたブロックは維持 */
.box.image-bg-type01 .text p,
.box.image-bg-type02 .text p,
.box.image-text-type02 p,
.box.contact-type01 p,
.box.contact-type02 p,
.box.banner-type01 p,
.box.banner-type02 p,
.box.lead-type01 .text p {
    text-align: center;
}

/* --- 新着情報カード --- */
.news_card_meta,
.news_card_title,
.news_card_excerpt {
    text-align: left;
}

/* --- 検索結果 --- */
.search_item_title,
.search_item_meta,
.search_item_excerpt {
    text-align: left;
}

/* --- テーブル --- */
.box-table th,
.box-table td,
.table_qa th,
.table_qa td,
.template_box table th,
.template_box table td,
.post_body table th,
.post_body table td {
    text-align: left;
}

/* --- Q&A --- */
.qa-type01 dl dt,
.qa-type01 dl dd {
    text-align: left;
}

/* --- アコーディオン --- */
.accordion-type01 ul li > h3,
.accordion-type01 ul li .text p {
    text-align: left;
}

/* --- フロー図 --- */
.list-flow-type01 > ul > li .text,
.list-flow-type01 > ul > li .text p,
.list-flow-type01 > ul > li .text h3 {
    text-align: left;
}

/* --- チェックリスト・番号リスト --- */
.list-check-type01 > ul > li p,
.list-number-type01 ol li .text p,
.list-number-type02 ol li .text p {
    text-align: left;
}

/* 明示的に中央へ戻したいとき用 */
.text_center,
.text_center p {
    text-align: center !important;
}

/* --- section の中央指定を外すにあたり、中央のままにしたい箇所を明示 --- */

/* トップのお問い合わせリード文・404の案内文など、
   セクション直下に置く短い案内文は中央のまま */
#section_contact p,
#section_err p,
.other_page > p,
.main_post_wrap > p {
    text-align: center;
}

/* お問い合わせブロックの電話番号・受付時間 */
.contact-type01 .text .tel,
.contact-type01 .text .datetime,
.contact-type02 .text .tel,
.contact-type02 .text .datetime,
.contact-type01 .title,
.contact-type02 .title {
    text-align: center;
}

/* 記事が無いときの案内 */
.single_post_container > div:only-child,
.topics_inner:empty + p {
    text-align: center;
}

/* --- 段落内に単独で置いた画像は中央に --- */
/* 本文を左揃えにした結果、段落の中の画像まで左に寄ってしまうため。
   text-align ではなく margin:auto で中央に置くので、
   同じ段落に文章が混ざっていても文章は左のまま。 */
.box p > img,
.box .col > p > img,
.template_box p > img,
.post_body p > img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
    height: auto;
}


/*======================================
社労士サイト：トップページ（ワイヤー「案C ブラッシュアップ」）
フォント・ヘッダー・メインビジュアル・各セクション・フッター
色は :root の変数を使う。中央揃えは明示した箇所のみ。
======================================*/

/* --- 全体 --- */
body {
    font-family: var(--font_base);
    color: var(--text-color);
    background: var(--body-color-bg);
}
a {
    color: var(--main_color_2);
}
.pc_only {
    display: inline;
}

/* --- ヘッダー --- */
header {
    background: rgba(251, 248, 243, 0.96);
}
header .area {
    height: 80px;
}
header .inner .logo {
    padding: 0 10px 0 24px;
    align-items: center;
}
header .inner .logo a,
header .inner .logo a:hover {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--text-color);
    opacity: 1;
}
header .inner .logo img.logo_mark {
    width: 48px;
    max-width: 48px;
    height: auto;
}
.logo_text {
    display: flex;
    flex-direction: column;
    line-height: 1.4;
    text-align: left;
}
.logo_kind {
    font-size: 11px;
    letter-spacing: 0.12em;
    color: var(--main_color_2);
}
.logo_name {
    font-family: var(--font_maru);
    font-size: 20px;
    font-weight: 700;
}
header .inner ul.header_nav {
    margin: auto 96px auto auto;
    font-family: var(--font_base);
    font-size: 14px;
}
header .inner ul.header_nav li {
    margin: auto 12px;
}
.header_nav a {
    color: var(--text-color);
}
header .inner ul.header_nav li.header_cta {
    margin-left: 16px;
}
.header_nav .header_cta a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 10px 24px;
    border-radius: 999px;
    background: var(--main_color_2);
    color: #fff;
}
.header_nav .header_cta a::after {
    display: none;
}
.btn_menu {
    top: 14px;
    right: 16px;
    font-family: var(--font_base);
}

/* ローディング・ドロワーのロゴ */
.loader-wrap img,
#nav_drawer .info_open img {
    max-width: 72px;
}

/* --- メインビジュアル --- */
.home .mainvisual_wrap {
    margin: 80px 0 0;
    padding: 0 24px;
}
.home .mainvisual_inner {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    background: var(--placeholder_bg);
}
.home #mainvisual li.no01 .mainvisual_photo,
.home #mainvisual li.no02 .mainvisual_photo {
    height: clamp(520px, 72vh, 680px);
}
.mv_bands {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    display: none;
}
.mv_band {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
}
.mv_band.b1 {
    width: 48%;
    background: rgba(246, 212, 174, 0.45);
    clip-path: polygon(42% 0, 100% 0, 100% 100%, 0 100%);
}
.mv_band.b2 {
    width: 34%;
    background: rgba(240, 169, 89, 0.62);
    clip-path: polygon(0 0, 72% 0, 100% 100%, 34% 100%);
}
.mv_band.b3 {
    width: 20%;
    background: rgba(141, 88, 32, 0.88);
    clip-path: polygon(36% 0, 100% 0, 100% 100%, 0 100%);
}
.mv_line {
    position: absolute;
    top: -10%;
    right: 31%;
    width: 2px;
    height: 120%;
    background: var(--accent_orange);
    transform: rotate(-16deg);
}
.mv_catch {
    position: absolute;
    left: 56px;
    bottom: 56px;
    z-index: 3;
    max-width: 580px;
    padding: 36px 44px;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 16px 40px rgba(59, 46, 37, 0.18);
    text-align: left;
}
.mv_catch_kind {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    font-size: 13px;
    letter-spacing: 0.12em;
    color: var(--main_color_2);
}
.mv_catch_kind img {
    width: 36px;
    height: auto;
}
.mv_catch_copy {
    margin-bottom: 14px;
    font-family: var(--font_maru);
    font-size: clamp(28px, 3.4vw, 42px);
    font-weight: 700;
    line-height: 1.3;
    color: var(--text-color);
}
.mv_catch_copy .marker {
    background: linear-gradient(transparent 62%, var(--accent_beige) 62%);
}
.mv_catch_sub {
    font-size: 15px;
}

/* --- セクション共通 --- */
.top_section {
    padding: 112px 0;
    text-align: left;
}
.top_section .inner {
    max-width: 1104px;
    padding: 0 48px;
}
.sec_title {
    margin-bottom: 16px;
    text-align: left;
}
.sec_title_en {
    font-size: 13px;
    letter-spacing: 0.2em;
    line-height: 1.6;
    color: var(--main_color_2);
}
.sec_title_ja {
    font-family: var(--font_maru);
    font-size: 32px;
    font-weight: 700;
    line-height: 1.5;
    color: var(--text-color);
}
.sec_lead {
    max-width: 680px;
    margin-bottom: 48px;
}
.sec_title_row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: 12px 32px;
    margin-bottom: 24px;
}
.sec_title_row .sec_title {
    margin-bottom: 0;
}
.link_arrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    font-weight: 700;
    color: var(--main_color_2);
    text-decoration: none;
}
.link_arrow::after {
    content: "→";
    transition: transform 0.3s ease;
}
.link_arrow:hover::after,
.link_arrow:focus-visible::after {
    transform: translateX(4px);
}

/* --- 業務案内 --- */
.business_grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px;
}
.business_card {
    display: flex;
    flex-direction: column;
    border-radius: 20px;
    overflow: hidden;
    background: #fff;
}
.business_card_thumb {
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--placeholder_bg);
}
.business_card_thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s cubic-bezier(.16, 1, .3, 1);
}
.business_card_thumb:hover img {
    transform: scale(1.05);
}
.business_card_body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    padding: 24px 28px 28px;
}
.business_card_title {
    display: flex;
    align-items: baseline;
    gap: 12px;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.5;
}
.business_card_num {
    font-family: var(--font_maru);
    font-size: 14px;
    color: var(--main_color_2);
}
.business_card_body .link_arrow {
    margin-top: auto;
}

/* --- 代表メッセージ --- */
#section_top_message {
    padding: 88px 0;
    background: var(--gray_light);
}
.top_message {
    display: flex;
    align-items: center;
    gap: 56px;
}
.top_message_img {
    flex: 0 1 360px;
    aspect-ratio: 4 / 3;
    border-radius: 20px;
    overflow: hidden;
    background: #E3D4C1;
}
.top_message_img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.top_message_body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1 1 420px;
}
.top_message_title {
    font-family: var(--font_maru);
    font-size: 26px;
    font-weight: 700;
    line-height: 1.6;
}
.top_message_links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 32px;
    margin-top: 8px;
    padding-top: 16px;
    border-top: 1px solid #DCCAB4;
}

/* --- お知らせ・コラム（新着情報カードはテーマ共通を使い、トップ・一覧ページの見た目を揃える） --- */
#section_topics .news_filter,
#section_post_list .news_filter {
    justify-content: flex-start;
    margin: 0 0 32px;
}
.news_filter a {
    border-radius: 999px;
    border-color: var(--main_color_2);
    color: var(--main_color_2);
    font-weight: 700;
}
.news_filter a.is_current,
.news_filter a:hover {
    background: var(--main_color_2);
    border-color: var(--main_color_2);
    color: #fff;
}
#section_topics .news_grid,
#section_post_list .news_grid {
    gap: 24px;
    margin-bottom: 0;
}
#section_topics .news_card,
#section_post_list .news_card {
    border-radius: 20px;
    overflow: hidden;
}
#section_topics .news_card_thumb,
#section_post_list .news_card_thumb {
    margin-bottom: 0;
    background: var(--placeholder_bg);
}
#section_topics .news_card_body,
#section_post_list .news_card_body {
    padding: 20px 24px 24px;
}
.news_card_cat {
    border-radius: 999px;
    background: var(--accent_beige);
    color: #6E4318;
    font-weight: 700;
}
/* お知らせ（スラッグ news / info）は濃い色で区別する */
.news_card_cat.cat-news,
.news_card_cat.cat-info {
    background: var(--main_color_2);
    color: #fff;
}

/* --- 対応エリア --- */
#section_area {
    padding-top: 0;
}
.area_box {
    display: flex;
    flex-wrap: wrap;
    gap: 32px 80px;
}
.area_head {
    flex: 1 1 280px;
}
.area_list {
    flex: 999 1 520px;
    min-width: 0;
    border-top: 1px solid var(--border-color);
}
.area_list_row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 24px;
    padding: 16px 0;
    border-bottom: 1px solid var(--border-color);
}
.area_list dt {
    flex: 0 0 160px;
    font-weight: 700;
}
.area_list dd {
    flex: 1 1 240px;
}

/* --- お問い合わせ（中央揃えは明示指定） --- */
#section_contact {
    padding: 0 0 96px;
    background: none;
    color: #fff;
}
#section_contact .section_contact_inner {
    max-width: 1104px;
    padding: 0 48px;
}
#section_contact .contact_box {
    padding: 64px clamp(20px, 5vw, 64px);
    border-radius: 28px;
    background: var(--main_color_2);
    text-align: center;
}
#section_contact .sec_title_en,
#section_contact .sec_title_ja {
    color: #fff;
}
#section_contact .contact_lead {
    margin: 12px 0 32px;
}
#section_contact .collum02 {
    gap: 16px 32px;
}
#section_contact .btn_phone,
#section_contact .btn_contact {
    width: auto;
    max-width: none;
    padding: 0;
}
#section_contact .btn_phone a {
    padding: 0;
    background: none;
    color: #fff;
    font-size: 26px;
    font-weight: 700;
}
#section_contact .btn_phone a span {
    margin-right: 8px;
}
#section_contact .btn_contact a {
    display: inline-flex;
    align-items: center;
    min-height: 52px;
    padding: 0 36px;
    border-radius: 999px;
    background: #fff;
    color: #6E4318;
    font-weight: 700;
}
#section_contact .contact_hours {
    margin-top: 16px;
    font-size: 13px;
}

/* --- フッター（カンプに合わせる） --- */
footer {
    padding: 48px 0;
    background: #fff;
    color: var(--text-color);
    font-family: var(--font_base);
    font-size: 13px;
    line-height: 1.9;
}
footer .footer_inner {
    max-width: 1104px;
    padding: 0 48px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px 64px;
}
footer p {
    margin: 0;
    color: var(--text-color);
    text-align: left;
}
footer a {
    color: var(--text-color);
}
.footer_brand {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}
.footer_brand img {
    display: block;
    width: 44px;
    height: auto;
}
footer .footer_name {
    margin-bottom: 8px;
    font-family: var(--font_maru);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.6;
}
footer .footer_address a {
    text-decoration: none;
}
footer .footer_area {
    margin-top: 8px;
    color: var(--text-sub_color);
}
/* フッターナビ：テーマ既定（白文字・中央・区切り線）を打ち消す */
footer .footer_link {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 8px 24px;
    margin: 0;
}
footer .footer_link li + li::before {
    display: none;
}
footer .footer_link li a {
    padding: 0;
    color: var(--text-color);
    font-size: 13px;
    line-height: 1.9;
    text-decoration: none;
    text-underline-offset: 3px;
}
/* 下線は今いるページのリンクだけ（自動生成メニュー・外観メニューの両方に対応） */
footer .footer_link li a[aria-current="page"],
footer .footer_link li.current-menu-item > a,
footer .footer_link li.current_page_item > a {
    text-decoration: underline;
    color: var(--main_color_2);
}
footer .footer_link li a:hover,
footer .footer_link li a.active {
    opacity: 1;
    color: var(--main_color_2);
}
/* フッターの著作権表示（部品のキャッチコピー .box .copy と同名なので body 直下に限定） */
body > .copy {
    background: #fff;
    color: var(--text-sub_color);
    border-top: 1px solid #EDE5DA;
}

/* --- タブレット --- */
@media screen and (max-width: 1024px) {
    header .inner ul.header_nav li {
        margin: auto 6px;
    }
    header .inner ul.header_nav li.header_cta {
        margin-left: 8px;
    }
    .mv_catch {
        left: 32px;
        bottom: 32px;
    }
}

/* --- スマホ --- */
@media screen and (max-width: 768px) {
    .pc_only {
        display: none;
    }
    header .area {
        height: 64px;
    }
    header .inner .logo {
        padding: 0 0 0 16px;
    }
    header .inner .logo img.logo_mark {
        width: 36px;
    }
    .logo_kind {
        font-size: 10px;
    }
    .logo_name {
        font-size: 17px;
    }
    .btn_menu {
        top: 8px;
        right: 8px;
    }

    .home .mainvisual_wrap {
        margin-top: 64px;
        padding: 0 8px;
    }
    .home .mainvisual_inner {
        border-radius: 20px;
    }
    .home #mainvisual li.no01 .mainvisual_photo,
    .home #mainvisual li.no02 .mainvisual_photo {
        height: 560px;
    }
    .mv_band.b1 { width: 62%; }
    .mv_band.b2 { width: 44%; }
    .mv_band.b3 { width: 24%; }
    .mv_line {
        right: 36%;
        transform: rotate(-12deg);
    }
    .mv_catch {
        left: 16px;
        right: 16px;
        bottom: 16px;
        max-width: none;
        padding: 22px 22px 24px;
        border-radius: 16px;
    }
    .mv_catch_kind {
        gap: 8px;
        margin-bottom: 10px;
        font-size: 11px;
    }
    .mv_catch_kind img {
        width: 28px;
    }
    .mv_catch_copy {
        margin-bottom: 10px;
        font-size: 27px;
    }
    .mv_catch_sub {
        font-size: 13px;
    }

    .top_section {
        padding: 64px 0;
    }
    .top_section .inner,
    #section_contact .section_contact_inner,
    footer .footer_inner {
        padding: 0 16px;
    }
    .sec_title_en {
        font-size: 12px;
    }
    .sec_title_ja {
        font-size: 26px;
    }
    .sec_lead {
        margin-bottom: 28px;
        font-size: 14px;
    }

    .business_grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .business_card {
        border-radius: 16px;
    }
    .business_card_body {
        padding: 18px 20px 20px;
    }
    .business_card_title {
        font-size: 18px;
        gap: 10px;
    }
    .business_card_text {
        font-size: 14px;
    }

    #section_top_message {
        padding: 56px 0;
    }
    .top_message {
        flex-direction: column;
        align-items: stretch;
        gap: 24px;
    }
    .top_message_img {
        flex: none;
        width: 100%;
    }
    .top_message_title {
        font-size: 21px;
    }
    .top_message_links {
        flex-direction: column;
        gap: 0;
        padding-top: 0;
    }
    .top_message_links li {
        border-bottom: 1px solid #DCCAB4;
    }
    .top_message_links .link_arrow {
        display: flex;
        justify-content: space-between;
        min-height: 48px;
    }

    /* お知らせ一覧ページ：画像を小さくした横並びリスト（トップはスライダーなので縦型カードのまま） */
    #section_post_list .news_grid {
        gap: 12px;
    }
    #section_post_list .news_card {
        flex-direction: row;
        align-items: center;
        gap: 14px;
        padding: 12px;
        border-radius: 14px;
    }
    #section_post_list .news_card_thumb {
        flex: 0 0 104px;
        aspect-ratio: 4 / 3;
        border-radius: 10px;
    }
    #section_post_list .news_card_body {
        padding: 0;
        min-width: 0;
    }
    #section_post_list .news_card_meta {
        margin-bottom: 4px;
    }
    #section_post_list .news_card_title {
        margin-bottom: 0;
        font-size: 14px;
    }
    #section_post_list .news_card_excerpt {
        display: none;
    }

    #section_area {
        padding-top: 0;
    }
    .area_list_row {
        flex-direction: column;
        gap: 0;
        padding: 12px 0;
    }
    .area_list dt,
    .area_list dd {
        flex: none;
    }
    .area_list dd {
        font-size: 13px;
        color: var(--text-sub_color);
    }

    #section_contact {
        padding-bottom: 56px;
    }
    #section_contact .section_contact_inner {
        padding: 0 12px;
    }
    #section_contact .contact_box {
        padding: 40px 20px;
        border-radius: 20px;
    }
    #section_contact .collum02 {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    #section_contact .btn_phone a,
    #section_contact .btn_contact a {
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 52px;
        border-radius: 999px;
    }
    #section_contact .btn_phone a {
        border: 1px solid #fff;
        font-size: 20px;
    }

    /* ヘッダー：電話アイコン */
    .header_tel {
        position: absolute;
        top: 10px;
        right: 64px;
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--main_color_2) !important;
    }

    /* フッター */
    footer {
        padding: 36px 0 32px;
    }
    footer .footer_inner {
        display: block;
    }
    .footer_brand {
        gap: 12px;
        margin-bottom: 20px;
    }
    .footer_brand img {
        width: 40px;
    }
    footer .footer_name {
        margin-bottom: 6px;
        font-size: 17px;
    }
    footer .footer_area {
        margin-top: 6px;
    }
    footer .footer_link {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0;
        width: 100%;
        border-top: 1px solid #EDE5DA;
    }
    footer .footer_link li {
        width: auto;
        text-align: left;
    }
    footer .footer_link li a,
    footer .footer_link li:nth-child(odd) a {
        display: flex;
        align-items: center;
        min-height: 44px;
        padding: 0;
        border: 0;
        border-bottom: 1px solid #EDE5DA;
        text-decoration: none;
        white-space: normal;
    }
}

/* スマホ・タブレットでは画面下に追従メニュー（.footer_nav）が出るので、フッターの下に余白を残す */
@media screen and (max-width: 1024px) {
    footer {
        padding-bottom: 100px;
    }
}

/*======================================
社労士サイト：ヘッダーナビ・ドロワーボタンの調整
======================================*/
/* ナビの文字はテーマ既定の明朝ではなく本文と同じゴシックに */
header .inner ul.header_nav li,
.header_nav a {
    font-family: var(--font_base);
    font-size: 14px;
    letter-spacing: 0.04em;
    line-height: 1.5;
}
.header_tel {
    display: none;
}

/* ドロワーボタンはスマホのみ */
@media screen and (min-width: 769px) {
    .btn_menu {
        display: none;
    }
    header .inner ul.header_nav {
        margin-right: 24px;
    }
}

@media screen and (max-width: 768px) {
    /* カンプ：ブラウンの丸ボタン＋白い3本線 */
    .btn_menu {
        top: 10px;
        right: 12px;
        width: 44px;
        height: 44px;
        padding: 0;
        border-radius: 999px;
        background: var(--main_color_2);
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .btn_menu .txt {
        display: none;
    }
    .btn_trigger {
        width: 20px;
        height: 14px;
    }
    .btn_trigger span {
        height: 2px;
        border-radius: 2px;
        background: #fff;
    }
    .btn_trigger span:nth-of-type(2) {
        top: 6px;
        width: 100%;
    }
    .btn_trigger span:nth-of-type(3) {
        top: 12px;
        bottom: auto;
    }
    #btn_top::after {
        display: none;
    }
    #btn_top.active span:nth-of-type(3) {
        animation-name: sr_btn_bar03;
    }
    @keyframes sr_btn_bar03 {
        0% { transform: translateY(0) rotate(0); }
        100% { transform: translateY(-6px) rotate(45deg); }
    }

    /* ドロワーの中身もサイトの書体・色に合わせる */
    #nav_drawer {
        padding-top: 88px;
        background: var(--body-color-bg);
        font-family: var(--font_base);
    }
    #nav_drawer li {
        line-height: 1.5;
    }
    #nav_drawer a,
    #nav_drawer li.info_open {
        color: var(--text-color);
    }
    #nav_drawer li.info_open a {
        display: inline;
        padding: 0;
        color: var(--main_color_2);
    }
}

/*======================================
社労士サイト：ローディング画面
クリーム色の背景に、ロゴマークの芽が出るアニメーション。
初回訪問時のみ表示（2ページ目以降は html.no-loader で非表示）。
======================================*/
.loader-wrap {
    background: var(--body-color-bg);
}
.no-loader .loader-wrap {
    display: none;
}
/* ロゴの「芽が出る」アニメーション（template-parts/logo-sprout.php）
   円・茎・線を描き、最後に2枚の葉が付け根から開く。約1.4秒 */
.sprout_logo {
    display: block;
    width: 72px;
    height: 72px;
}
.sprout_logo [pathLength] {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: sprout_draw var(--d, .8s) cubic-bezier(.4, 0, .2, 1) var(--t, 0s) forwards;
}
.sprout_logo .lg-ring    { --t: 0s;   --d: .9s; }
.sprout_logo .lg-ring2   { --t: .05s; --d: .9s; }
.sprout_logo .lg-arc     { --t: .15s; --d: .85s; }
.sprout_logo .lg-arc2    { --t: .5s;  --d: .4s; }
.sprout_logo .lg-stem,
.sprout_logo .lg-stem2   { --t: .2s;  --d: .6s; }
.sprout_logo .lg-swoosh  { --t: .35s; --d: .65s; }
.sprout_logo .lg-swoosh2 { --t: .4s;  --d: .65s; }
.sprout_logo .lg-leaf-l,
.sprout_logo .lg-leaf-r {
    transform-box: fill-box;
    transform: scale(0);
    animation: sprout_leaf .55s cubic-bezier(.34, 1.56, .64, 1) forwards;
}
.sprout_logo .lg-leaf-l {
    transform-origin: 100% 100%;
    animation-delay: .7s;
}
.sprout_logo .lg-leaf-r {
    transform-origin: 0% 100%;
    animation-delay: .82s;
}
@keyframes sprout_draw {
    to { stroke-dashoffset: 0; }
}
@keyframes sprout_leaf {
    to { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .sprout_logo [pathLength] {
        stroke-dashoffset: 0;
        animation: none;
    }
    .sprout_logo .lg-leaf-l,
    .sprout_logo .lg-leaf-r {
        transform: none;
        animation: none;
    }
}


/* フッターの対応エリア：エリア名の途中では改行しない */
footer .footer_area_item {
    white-space: nowrap;
}
@media screen and (max-width: 768px) {
    /* スマホでは「対応エリア：」を見出しとして1行目に置き、エリア名はその下で折り返す */
    footer .footer_area_label {
        display: block;
    }
    footer .footer_info {
        min-width: 0;
    }
}

/* フッターナビ：PCで項目が5個以上のときは2列にする（右側で横に広がりすぎて崩れるのを防ぐ） */
@media screen and (min-width: 769px) {
    footer .footer_brand {
        flex: 1 1 auto;
        min-width: 0;
    }
    footer .footer_link {
        flex: 0 0 auto;
    }
    footer .footer_link:has(li:nth-child(5)) {
        display: grid;
        grid-template-columns: repeat(5, auto);
        gap: 8px 40px;
    }
}

/* スマホではフッターナビを出さない（ページ移動はドロワーメニューで行う） */
@media screen and (max-width: 768px) {
    footer .footer_link {
        display: none;
    }
    footer .footer_brand {
        margin-bottom: 0;
    }
}


/*======================================
社労士サイト：下層ページ共通
ページ見出し（写真＋斜めの帯＋タイトル＋パンくず）、本文エリア、エディタ本文の基本
======================================*/

/* --- ページ見出し --- */
body:not(.home) .page_top_outer {
    position: relative;
    height: 300px;
    margin: 80px 24px 0;
    border-radius: 24px;
    overflow: hidden;
    background: #7A6A5C;
}
body:not(.home) .page_top {
    position: absolute;
    inset: 0;
    height: 100%;
    max-height: none;
}
/* 写真の上に白文字を載せるための暗幕 */
body:not(.home) .page_top::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(59, 46, 37, 0.45);
}
.page_top_bands {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}
.page_top_bands .mv_band.b1 { width: 26%; clip-path: polygon(46% 0, 100% 0, 100% 100%, 0 100%); background: rgba(246, 212, 174, 0.4); }
.page_top_bands .mv_band.b2 { width: 16%; clip-path: polygon(0 0, 70% 0, 100% 100%, 36% 100%); background: rgba(240, 169, 89, 0.6); }
.page_top_bands .mv_band.b3 { width: 8%;  clip-path: polygon(40% 0, 100% 0, 100% 100%, 0 100%); background: rgba(141, 88, 32, 0.88); }

body:not(.home) .other_page_top {
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: auto;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px;
    text-align: center;
    color: #fff;
}
.other_page_title_en {
    font-size: 13px;
    letter-spacing: 0.24em;
    line-height: 1.6;
    color: #fff;
}
body:not(.home) .other_page_title {
    width: auto;
    height: auto;
    margin: 6px 0 14px;
    font-family: var(--font_maru);
    font-size: 38px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.08em;
    color: #fff;
}
body:not(.home) .other_page_title:first-letter {
    font-size: inherit;
}

/* --- パンくず --- */
body:not(.home) .pankuzu {
    padding: 0;
    font-size: 12px;
    letter-spacing: 0.04em;
}
body:not(.home) .pankuzu ol {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2px 0;
}
body:not(.home) .pankuzu ol li,
body:not(.home) .pankuzu ol li a {
    color: #fff;
}
body:not(.home) .pankuzu ol li a {
    text-decoration: underline;
    text-underline-offset: 3px;
}
body:not(.home) .pankuzu ol li:before {
    content: "›";
    margin: 0 8px;
}
body:not(.home) .pankuzu ol li:first-child:before {
    content: "\e9b2";
    margin: 0;
    font-size: 14px;
    vertical-align: -2px;
}

/* --- 本文エリア --- */
/* 固定ページ（page.php）：.other_page > .page_content */
.other_page > .page_content {
    max-width: 1104px;
    margin: 0 auto;
    padding: 80px 48px 96px;
}
/* コンポーネントで組んだページ（page-template02.php など）：.page_content > .other_page > .inner */
section.page_content {
    padding: 80px 0 96px;
}
section.page_content .other_page .inner {
    max-width: 1104px;
    padding: 0 48px;
}
/* 記事詳細 */
.main_post .main_post_wrap {
    max-width: 864px;
    padding: 64px 48px 96px;
}

/* --- エディタで入力した本文の基本 --- */
.other_page > .page_content,
.post_body {
    font-size: 15px;
    line-height: 1.9;
    color: var(--text-color);
}
.other_page > .page_content > * + *,
.post_body > * + * {
    margin-top: 1.4em;
}
.other_page > .page_content > h2,
.post_body h2 {
    margin-top: 72px;
    padding-bottom: 12px;
    font-family: var(--font_maru);
    font-size: 28px;
    font-weight: 700;
    line-height: 1.5;
    position: relative;
}
.other_page > .page_content > h2::after,
.post_body h2::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 40px;
    height: 3px;
    border-radius: 2px;
    background: var(--accent_orange);
}
.other_page > .page_content > h2:first-child,
.post_body > h2:first-child {
    margin-top: 0;
}
.other_page > .page_content > h3,
.post_body h3 {
    margin-top: 48px;
    padding-left: 14px;
    border-left: 4px solid var(--accent_orange);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.5;
}
.other_page > .page_content > h4,
.post_body h4 {
    margin-top: 32px;
    font-size: 17px;
    font-weight: 700;
    color: var(--main_color_2);
}
.other_page > .page_content a,
.post_body a {
    color: var(--main_color_2);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.other_page > .page_content > ul,
.post_body ul {
    padding: 0;
    list-style: none;
}
.other_page > .page_content > ul > li,
.post_body ul > li {
    position: relative;
    padding-left: 18px;
}
.other_page > .page_content > ul > li + li,
.post_body ul > li + li {
    margin-top: 8px;
}
.other_page > .page_content > ul > li::before,
.post_body ul > li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.75em;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--accent_orange);
}
.other_page > .page_content > ol,
.post_body ol {
    padding-left: 1.6em;
    list-style: decimal;
}
.other_page > .page_content > ol > li::marker,
.post_body ol > li::marker {
    font-weight: 700;
    color: var(--main_color_2);
}
.other_page > .page_content table,
.post_body table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
}
.other_page > .page_content th,
.other_page > .page_content td,
.post_body th,
.post_body td {
    padding: 18px 24px;
    border-bottom: 1px solid #EADFD0;
    text-align: left;
    vertical-align: top;
}
.other_page > .page_content th,
.post_body th {
    width: 28%;
    background: var(--gray_light);
    font-weight: 700;
}
.other_page > .page_content tr:last-child > *,
.post_body tr:last-child > * {
    border-bottom: 0;
}
.other_page > .page_content blockquote,
.post_body blockquote {
    padding: 20px 24px;
    border-radius: 16px;
    background: var(--gray_light);
}

/* --- スマホ --- */
@media screen and (max-width: 768px) {
    body:not(.home) .page_top_outer {
        height: 210px;
        margin: 64px 8px 0;
        border-radius: 18px;
    }
    .page_top_bands .mv_band.b1 { width: 34%; }
    .page_top_bands .mv_band.b2 { width: 20%; }
    .page_top_bands .mv_band.b3 { width: 10%; }
    body:not(.home) .other_page_top {
        padding: 16px;
    }
    .other_page_title_en {
        font-size: 11px;
    }
    body:not(.home) .other_page_title {
        margin: 4px 0 10px;
        font-size: 27px;
        letter-spacing: 0.06em;
    }
    body:not(.home) .pankuzu {
        font-size: 11px;
    }

    .other_page > .page_content {
        padding: 48px 16px 64px;
    }
    section.page_content {
        padding: 48px 0 64px;
    }
    section.page_content .other_page .inner {
        padding: 0 16px;
    }
    .main_post .main_post_wrap {
        padding: 40px 16px 64px;
    }

    .other_page > .page_content > h2,
    .post_body h2 {
        margin-top: 56px;
        font-size: 23px;
    }
    .other_page > .page_content > h3,
    .post_body h3 {
        margin-top: 40px;
        font-size: 18px;
    }
    .other_page > .page_content th,
    .other_page > .page_content td,
    .post_body th,
    .post_body td {
        padding: 14px;
    }
}


/*======================================
社労士サイト：部品（page-template02.php の .box 系）
ワイヤー「下層ページ 汎用テンプレート」に合わせる。
テーマの構造・クラスはそのままに、書体・角丸・色・形だけを上書きする。
======================================*/

/* --- 共通 --- */
.box h2.box-h2,
.box h3.box-h3,
.box .copy {
    font-family: var(--font_maru);
    font-weight: 700;
    color: var(--text-color);
}
.box h3.box-h3 {
    margin-bottom: 12px;
    font-size: 20px;
    line-height: 1.5;
}
.box .copy {
    margin-bottom: 12px;
    font-size: 17px;
    line-height: 1.6;
    color: var(--main_color_2);
}
.box p {
    margin-bottom: 1em;
}
.box .image {
    border-radius: 20px;
}
.box .image img {
    transform: none;
}
.box .btn {
    margin-top: 24px;
}
.box .btn a {
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    padding: 12px 52px 12px 28px;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.04em;
    transition: background 0.3s ease;
}
.box .btn a:hover {
    background: #6E4318;
    color: #fff;
}

/* --- 見出し title-type01〜04 --- */
.box[class*="title-type0"] h2.box-h2 {
    font-size: 28px;
    line-height: 1.5;
}
.box[class*="title-type0"] h2.box-h2 span {
    display: block;
    opacity: 1;
}
.box[class*="title-type0"] h2.box-h2 span.ja {
    font-family: var(--font_maru);
    font-size: 28px;
    font-weight: 700;
    color: var(--text-color);
}
.box[class*="title-type0"] h2.box-h2 span.en {
    margin: 0;
    font-family: var(--font_base);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.2em;
    color: var(--main_color_2);
}
/* 01：和文＋英字、上に短いオレンジの線 */
.title-type01:before,
.title-type03:before {
    width: 40px;
    height: 3px;
    border-radius: 2px;
    background: var(--accent_orange);
}
/* 02：左揃え・下線、英字は和文の右 */
.box.title-type02 {
    padding: 0 0 12px;
    text-align: left;
    border-bottom: 2px solid var(--border-color);
}
.box.title-type02:before {
    display: none;
}
.box.title-type02 h2.box-h2 {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 16px;
}
.box.title-type02 h2.box-h2 span.ja {
    font-size: 26px;
}
/* 03：英字を大きく、和文を下に */
.box.title-type03 h2.box-h2 span.en {
    font-family: var(--font_maru);
    font-size: 40px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.04em;
}
.box.title-type03 h2.box-h2 span.ja {
    margin-top: 8px;
    font-family: var(--font_base);
    font-size: 18px;
}
/* 04：中央揃え（明示指定）、下に短いオレンジの線 */
.title-type04:before {
    width: 40px;
    height: 3px;
    border-radius: 2px;
    background: var(--accent_orange);
}

/* --- リード lead-type01 --- */
.box.lead-type01 {
    padding: 40px clamp(20px, 4vw, 48px);
    border-radius: 20px;
    background: #fff;
    text-align: left;
}
.box.lead-type01 h3.box-h3 {
    font-size: 26px;
    letter-spacing: 0.06em;
    color: var(--main_color_2);
}

/* --- 補足ボックス --- */
.contents-colorbox {
    margin: 0 auto 40px;
    padding: 24px 28px;
    border-radius: 16px;
    background: var(--gray_light);
}

/* --- カラム row-2〜4 --- */
.row {
    gap: 24px;
}
.row .col .image,
.row .col img {
    border-radius: 14px;
}

/* --- 画像＋テキスト --- */
.image-text-type02 .text:before,
.image-text-type03 .text:before {
    border-radius: 24px;
}

/* --- 背景写真 --- */
.image-bg-type01 .image {
    border-radius: 24px;
}
.image-bg-type01 .text {
    border-radius: 24px 24px 0 0;
}
.box.image-bg-type02 {
    border-radius: 24px;
    overflow: hidden;
}
.box.image-bg-type02 .text h3,
.box.image-bg-type02 .text .copy {
    color: #fff;
}
.box.image-bg-type02 .text .copy {
    color: var(--accent_beige);
}
.box.image-bg-type03 {
    border-radius: 24px;
    overflow: hidden;
}

/* --- 番号付きリスト --- */
.list-number-type01 ol li {
    border-radius: 16px;
    background: #fff;
}
.list-number-type01 ol li:before {
    font-family: var(--font_maru);
    font-size: 36px;
    color: var(--accent_orange);
}
.list-number-type02 ol li:before {
    top: -16px;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 999px;
    background: var(--main_color_2);
    color: #fff;
    font-family: var(--font_maru);
    font-size: 16px;
}
.list-number-type02:after {
    border-radius: 24px;
}

/* --- チェックリスト --- */
.box.list-check-type01 {
    justify-content: flex-start;
}
.list-check-type01 > ul {
    width: 100%;
    padding: 24px 28px;
    border-radius: 16px;
    background: #fff;
}
.list-check-type01 > ul > li {
    margin: 0;
    padding-left: 32px;
}
.list-check-type01 > ul > li + li {
    margin-top: 14px;
}
.list-check-type01 > ul > li:before {
    content: "\e86c";  /* check_circle */
    color: var(--accent_orange);
    font-size: 22px;
    line-height: 1.2;
}

/* --- 流れ（STEP） --- */
.list-flow-type01:after {
    left: 39px;
    width: 2px;
    background: var(--accent_beige);
}
.list-flow-type01 > ul > li {
    align-items: flex-start;
    gap: 24px;
    justify-content: flex-start;
    padding-bottom: 24px;
}
.list-flow-type01 > ul > li .icon {
    flex: 0 0 80px;
    width: 80px;
    height: 80px;
    min-height: 0;
    padding: 0;
    border-radius: 999px;
    background: var(--accent_beige);
    color: #6E4318;
    font-family: var(--font_maru);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.04em;
}
.list-flow-type01 > ul > li .icon:after,
.list-flow-type01 > ul > li .text:before,
.list-flow-type01 > ul > li .text:after {
    display: none;
}
.list-flow-type01 > ul > li .text {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    padding: 20px 24px;
    border-radius: 16px;
    background: #fff;
}
.list-flow-type01 > ul > li .text h3.box-h3 {
    margin-bottom: 8px;
    font-size: 18px;
    line-height: 1.5;
}

/* --- 表 --- */
.table-type01 table,
.table-type02 table {
    overflow: hidden;
}
.table-type01 table {
    border-collapse: collapse;
    border-radius: 16px;
    background: #fff;
}
.table-type01 table th,
.table-type01 table td {
    padding: 18px 24px;
    border-bottom: 1px solid #EADFD0;
}
.table-type01 table th {
    background: var(--gray_light);
}
.table-type01 table tr:last-child > * {
    border-bottom: 0;
}
.table-type02 table {
    margin: 0;
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    border-top: 2px solid var(--main_color_2);
}
.table-type02 table th,
.table-type02 table td {
    padding: 18px 8px 18px 0;
    background: none;
    border-bottom: 1px solid var(--border-color);
}
.table-type02 table th {
    color: var(--main_color_2);
}

/* --- バナー --- */
.banner-type01 ul {
    gap: 20px;
}
.banner-type01 ul li {
    border-radius: 18px;
    overflow: hidden;
}
.banner-type01 ul li a {
    font-family: var(--font_maru);
}
.banner-type02 ul {
    gap: 20px;
}
.banner-type02 ul li {
    border-radius: 18px;
    background: #fff;
    box-shadow: none;
}
.banner-type02 ul li .image {
    border-radius: 0;
}
.banner-type02 ul li .text,
.banner-type02 ul li .text h3 {
    color: var(--text-color);
}
.banner-type02 ul li .text .btn a {
    background: var(--main_color_2);
}

/* --- アコーディオン --- */
.accordion-type01 ul li {
    margin-bottom: 12px;
    padding: 18px 24px;
    border: 0;
    border-radius: 14px;
    background: #fff;
}
.accordion-type01 ul li h3.box-h3 {
    margin: 0;
    font-size: 17px;
}
.accordion-type01 ul li h3.box-h3:after {
    content: "\e145";  /* add */
    top: 50%;
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: var(--accent_beige);
    color: #6E4318;
    font-size: 18px;
    transform: translateY(-50%);
}
.accordion-type01 ul li.active h3.box-h3:after {
    content: "\e15b";  /* remove */
    transform: translateY(-50%);
}
.accordion-type01 ul li .text {
    padding: 0;
    background: none;
}
.accordion-type01 ul li.active .text {
    margin-top: 12px;
    padding: 0;
}

/* --- Q&A --- */
.box.qa-type01 dl {
    margin-bottom: 14px;
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
}
.qa-type01 dl dt,
.qa-type01 dl dd {
    min-height: 0;
    padding: 18px 20px 18px 66px;
}
.qa-type01 dl dt {
    font-weight: 700;
}
.qa-type01 dl dd {
    background: var(--gray_light);
}
.qa-type01 dl dt:before,
.qa-type01 dl dd:before {
    left: 20px;
    width: 32px;
    height: 32px;
    font-family: var(--font_maru);
    font-weight: 700;
}
.qa-type01 dl dt:before {
    background: var(--main_color_2);
}
.qa-type01 dl dd:before {
    background: var(--accent_beige);
    color: #6E4318;
}

/* --- お問い合わせ --- */
.box.contact-type01,
.box.contact-type02 {
    border-radius: 24px;
    overflow: hidden;
}
.box.contact-type01 .image,
.box.contact-type02 .image {
    border-radius: 0;
}
.contact-type01 .title,
.contact-type02 .title {
    font-family: var(--font_maru);
}
.contact-type01 .text .btn div a,
.contact-type02 .text .btn div a {
    background: #fff;
    color: #6E4318;
}

/* --- スマホ --- */
@media screen and (max-width: 768px) {
    .box[class*="title-type0"] h2.box-h2 span.ja {
        font-size: 23px;
    }
    .box.title-type03 h2.box-h2 span.en {
        font-size: 32px;
    }
    .box.lead-type01 {
        padding: 28px 20px;
    }
    .list-flow-type01:after {
        left: 27px;
    }
    .list-flow-type01 > ul > li {
        gap: 12px;
    }
    .list-flow-type01 > ul > li .icon {
        flex-basis: 56px;
        width: 56px;
        height: 56px;
        font-size: 11px;
    }
    .list-flow-type01 > ul > li .text {
        padding: 16px 18px;
    }
    .table-type01 table th,
    .table-type01 table td {
        padding: 14px;
    }
    .accordion-type01 ul li {
        padding: 14px 18px;
    }
    .qa-type01 dl dt,
    .qa-type01 dl dd {
        padding: 16px 16px 16px 58px;
    }
    .qa-type01 dl dt:before,
    .qa-type01 dl dd:before {
        left: 16px;
    }
}

/* 揃え方：ワイヤーに合わせ、見出し01〜03とリードは左揃え（04だけ中央） */
.box.title-type01 h2.box-h2,
.box.title-type01 h2.box-h2 span,
.box.title-type02 h2.box-h2,
.box.title-type02 h2.box-h2 span,
.box.title-type03 h2.box-h2,
.box.title-type03 h2.box-h2 span,
.box.lead-type01,
.box.lead-type01 * {
    text-align: left;
}

@media screen and (max-width: 768px) {
    /* スマホヘッダーの電話アイコン（後から書いた display:none に負けていたため再指定） */
    .header_tel {
        display: flex;
    }
    /* お問い合わせ部品：見出しが大きすぎ、電話番号が途中で折り返していた */
    .contact-type01 .title,
    .contact-type02 .title,
    .contact-type01 .title .ja,
    .contact-type02 .title .ja {
        font-size: 22px;
        line-height: 1.5;
    }
    .contact-type01 .title .en,
    .contact-type02 .title .en {
        font-size: 13px;
        letter-spacing: 0.2em;
    }
    .contact-type01 .text .tel,
    .contact-type02 .text .tel {
        font-size: 26px;
        white-space: nowrap;
    }
    .contact-type01 .text .btn,
    .contact-type02 .text .btn {
        flex-wrap: wrap;
        gap: 8px;
    }
}


/*======================================
社労士サイト：下層ページ ワイヤーとの差分修正
======================================*/

/* --- ページ見出し：パンくずの margin:auto（テーマ既定）が余白を吸って、タイトルが上に寄っていた --- */
body:not(.home) .page_top_outer .pankuzu {
    margin: 0;
}

/* --- ボタン：ワイヤーはブラウンの枠線＋文字の丸ボタン、末尾に「→」 --- */
.box .btn a {
    padding: 0 24px;
    min-height: 44px;
    gap: 8px;
    border: 1px solid var(--main_color_2);
    background: transparent;
    color: var(--main_color_2);
}
.box .btn a:after {
    content: "→";
    position: static;
    font-family: var(--font_base);
    font-variation-settings: normal;
    transform: none;
}
.box .btn a:hover {
    background: var(--main_color_2);
    color: #fff;
}
/* 暗い背景の上では白の枠線 */
.box.image-bg-type02 .btn a {
    border-color: #fff;
    color: #fff;
}
.box.image-bg-type02 .btn a:hover {
    background: #fff;
    color: #6E4318;
}

/* --- 見出し：01は線を下に、03は線なし --- */
.box.title-type01 {
    padding: 0 0 12px;
}
.box.title-type01:before {
    top: auto;
    bottom: 0;
}
.box.title-type03 {
    padding: 0;
}
.box.title-type03:before {
    display: none;
}

/* --- 画像＋テキスト type01 / type03：画像（4:3）とテキストを横並び、テキストは上下中央 --- */
.box.image-text-type01,
.box.image-text-type03 {
    display: flex;
    align-items: center;
    gap: 24px 48px;
}
.box.image-text-type01.right,
.box.image-text-type03.right {
    flex-direction: row-reverse;
}
.box.image-text-type01:after {
    display: none;
}
.box.image-text-type01 .image,
.box.image-text-type01.right .image,
.box.image-text-type03 .image {
    float: none;
    position: relative;
    flex: 1 1 0;
    width: auto;
    margin: 0;
    aspect-ratio: 4 / 3;
}
.box.image-text-type01 .image img,
.box.image-text-type03 .image img {
    position: absolute;
    inset: 0;
}
.box.image-text-type01 .text,
.box.image-text-type03 .text,
.box.image-text-type03.right .text {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    margin: 0;
    padding: 0;
}
.box.image-text-type03 .text:before {
    display: none;
}
.box.image-text-type03 .box-h3,
.box.image-text-type03 .copy,
.box.image-text-type03 p,
.box.image-text-type03 .btn {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    text-align: left;
}

/* --- 画像＋テキスト type02：画像を画面端まで広げ、白いカードを下に重ねる --- */
.box.image-text-type02 {
    display: block;
    padding: 0;
}
.box.image-text-type02 .image {
    width: auto;
    height: 380px;
    min-height: 0;
    margin-right: max(48px, calc((100% - 1008px) / 2));
    border-radius: 0 24px 24px 0;
}
.box.image-text-type02.right .image {
    margin-right: 0;
    margin-left: max(48px, calc((100% - 1008px) / 2));
    border-radius: 24px 0 0 24px;
}
.box.image-text-type02 .text {
    position: relative;
    width: min(520px, calc(100% - 32px));
    margin: -120px max(48px, calc((100% - 1008px) / 2)) 0 auto;
    padding: 32px;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 12px 32px rgba(59, 46, 37, 0.1);
}
.box.image-text-type02.right .text {
    margin: -120px auto 0 max(48px, calc((100% - 1008px) / 2));
}
.box.image-text-type02 .text:before {
    display: none;
}
.box.image-text-type02 .box-h3,
.box.image-text-type02 .copy,
.box.image-text-type02 p,
.box.image-text-type02 .btn {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    text-align: left;
}

/* --- 背景写真 type01：重なるテキストは左揃え --- */
.box.image-bg-type01 .text {
    margin: -100px 8% 0;
    padding: 48px 48px 0;
}
.box.image-bg-type01 .text,
.box.image-bg-type01 .text * {
    text-align: left;
}

/* --- カラム：画像は列幅いっぱい・4:3・角丸 --- */
.row .col > p > img {
    width: 100%;
    max-width: none;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 14px;
}

/* --- 番号付きリスト type01：大きな数字＋見出し・本文、罫線で区切る（画像は使わない） --- */
.box.list-number-type01 {
    padding: 0;
}
.list-number-type01 ol {
    display: block;
    border-top: 1px solid var(--border-color);
}
.list-number-type01 ol li {
    display: flex;
    gap: 20px;
    padding: 24px 0;
    border-bottom: 1px solid var(--border-color);
    border-radius: 0;
    background: none;
}
.list-number-type01 ol li:before {
    position: static;
    flex: 0 0 auto;
    font-size: 32px;
    line-height: 1.2;
    transform: none;
}
.list-number-type01 ol li .image {
    display: none;
}
.list-number-type01 ol li .text {
    padding: 0;
}
.list-number-type01 ol li .text h3.box-h3 {
    margin-bottom: 6px;
    font-size: 18px;
}
.list-number-type01 .btn {
    text-align: left;
}

/* --- 番号付きリスト type02：白いカード、左上にブラウンの丸数字（画像は使わない） --- */
.box.list-number-type02 {
    padding: 0;
}
.list-number-type02:after {
    display: none;
}
.list-number-type02 ol {
    gap: 20px;
}
.list-number-type02 ol li {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 24px;
    border-radius: 16px;
    background: #fff;
}
.list-number-type02 ol li:before {
    position: static;
    width: 40px;
    height: 40px;
    font-size: 15px;
}
.list-number-type02 ol li .image {
    display: none;
}
.list-number-type02 ol li .text h3.box-h3 {
    margin-bottom: 6px;
    font-size: 17px;
}
.list-number-type02 ol li .text,
.list-number-type02 ol li .text * {
    text-align: left;
}
.list-number-type02 .btn {
    text-align: left;
}

/* --- 流れ（画像付き）：画像は右側に小さく --- */
.list-flow-type01 > ul > li .text .image-text-type01 {
    align-items: flex-start;
    gap: 16px 24px;
}
.list-flow-type01 > ul > li .text .image-text-type01 .image {
    flex: 0 1 240px;
    margin-bottom: 0;
    border-radius: 12px;
}

/* --- バナー type01：4:3の写真、左下に小さな英字＋見出し→ --- */
.banner-type01 ul li {
    aspect-ratio: 4 / 3;
}
.banner-type01 ul li a {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 16px 20px;
    background: linear-gradient(transparent 40%, rgba(59, 46, 37, 0.75));
}
.banner-type01 ul li a span.en {
    font-family: var(--font_base);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}
.banner-type01 ul li a span.ja {
    font-family: var(--font_maru);
    font-size: 19px;
    font-weight: 700;
}
.banner-type01 ul li a:after {
    content: "→";
    position: absolute;
    right: 20px;
    bottom: 18px;
    font-family: var(--font_base);
    font-size: 18px;
    font-variation-settings: normal;
}
.banner-type01 ul li .image:after {
    display: none;
}

/* --- バナー type02：テキストは左揃え --- */
.banner-type02 ul li .text,
.banner-type02 ul li .text * {
    text-align: left;
}
.banner-type02 ul li .text {
    padding: 22px 24px 26px;
}
.banner-type02 ul li .text .btn a {
    background: transparent;
}
.banner-type02 ul li .text .btn a:hover {
    background: var(--main_color_2);
}

/* --- Q&A：1枚の白いカードの中に Q と A、間は点線 --- */
.qa-type01 dl dd {
    margin: 0 20px;
    padding-left: 46px;
    background: #fff;
    border-top: 1px dashed var(--border-color);
}
.qa-type01 dl dd:before {
    left: 0;
}

/* --- お問い合わせ type01：白いカード、左に写真・右に情報（左揃え） --- */
.box.contact-type01 {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
    grid-template-rows: auto 1fr;
    padding: 0;
    background: #fff;
}
.box.contact-type01 .image {
    position: relative;
    grid-column: 1;
    grid-row: 1 / 3;
    width: auto;
    height: auto;
    min-height: 280px;
}
.box.contact-type01 .image img {
    position: absolute;
    inset: 0;
}
.box.contact-type01 .image:after {
    display: none;
}
.box.contact-type01 .title {
    grid-column: 2;
    grid-row: 1;
    max-width: none;
    margin: 0;
    padding: 36px 44px 0;
    color: var(--text-color);
}
.box.contact-type01 .text {
    grid-column: 2;
    grid-row: 2;
    max-width: none;
    margin: 0;
    padding: 14px 44px 36px;
    color: var(--text-color);
}
.box.contact-type01 .title,
.box.contact-type01 .title *,
.box.contact-type01 .text .tel,
.box.contact-type01 .text .datetime {
    text-align: left;
    justify-content: flex-start;
}
.box.contact-type01 .title .ja,
.box.contact-type02 .title .ja {
    display: block;
    font-family: var(--font_maru);
    font-size: 26px;
    font-weight: 700;
}
.box.contact-type01 .title .en,
.box.contact-type02 .title .en {
    display: block;
    font-family: var(--font_base);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.2em;
}
.box.contact-type01 .text .tel,
.box.contact-type02 .text .tel {
    font-family: var(--font_maru);
    font-size: 28px;
}
.box.contact-type01 .text .tel,
.box.contact-type01 .text .tel a {
    color: var(--text-color);
}
.box.contact-type01 .text .datetime,
.box.contact-type02 .text .datetime {
    margin: 4px 0 16px;
    font-size: 13px;
}
.box.contact-type01 .text .btn,
.box.contact-type02 .text .btn {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 12px;
    margin-top: 0;
}
.box.contact-type01 .text .btn div,
.box.contact-type02 .text .btn div {
    margin: 0;
}
/* 1つ目：塗りのボタン／2つ目：枠線のボタン */
.box.contact-type01 .text .btn div:first-child a {
    background: var(--main_color_2);
    color: #fff;
}
.box.contact-type01 .text .btn div + div a {
    background: transparent;
    color: var(--main_color_2);
}

/* --- お問い合わせ type02：暗い背景写真の上に、情報を左揃えで縦に並べる --- */
.box.contact-type02 {
    display: block;
    padding: 48px clamp(20px, 5vw, 56px);
}
.box.contact-type02 .title,
.box.contact-type02 .title *,
.box.contact-type02 .text .tel,
.box.contact-type02 .text .datetime {
    padding: 0;
    text-align: left;
    justify-content: flex-start;
}
.box.contact-type02 .text {
    margin-top: 14px;
}
.box.contact-type02 .text .btn div:first-child a {
    background: #fff;
    border-color: #fff;
    color: #6E4318;
}
.box.contact-type02 .text .btn div + div a {
    background: transparent;
    border-color: #fff;
    color: #fff;
}
/* メールアイコンは使わない（ワイヤーは「→」なし・アイコンなし） */
.contact-type01 .text .btn div a:after,
.contact-type02 .text .btn div a:after {
    display: none;
}
.contact-type01 .text .btn div a,
.contact-type02 .text .btn div a {
    padding: 0 24px;
}

/* --- スマホ --- */
@media screen and (max-width: 768px) {
    .box.image-text-type01,
    .box.image-text-type01.right,
    .box.image-text-type03,
    .box.image-text-type03.right {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
    }
    .box.image-text-type01 .image,
    .box.image-text-type03 .image {
        flex: none;
        width: 100%;
    }
    .box.image-text-type02 .image,
    .box.image-text-type02.right .image {
        height: 220px;
        margin: 0;
        border-radius: 0;
    }
    .box.image-text-type02 .text,
    .box.image-text-type02.right .text {
        width: auto;
        margin: -56px 16px 0;
        padding: 22px;
    }
    .box.image-bg-type01 .image {
        height: 240px;
    }
    .box.image-bg-type01 .text {
        margin: -48px 12px 0;
        padding: 22px 18px 0;
    }
    .list-number-type02 ol {
        flex-direction: column;
    }
    .list-flow-type01 > ul > li .text .image-text-type01 .image {
        flex: none;
        width: 100%;
    }
    .banner-type01 ul,
    .banner-type02 ul {
        flex-direction: column;
    }
    .box.contact-type01 {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
    }
    .box.contact-type01 .image {
        grid-column: 1;
        grid-row: 1;
        min-height: 200px;
    }
    .box.contact-type01 .title {
        grid-column: 1;
        grid-row: 2;
        padding: 24px 20px 0;
    }
    .box.contact-type01 .text {
        grid-column: 1;
        grid-row: 3;
        padding: 12px 20px 24px;
    }
    .box.contact-type02 {
        padding: 36px 20px;
    }
    .qa-type01 dl dd {
        margin: 0 16px;
        padding-left: 42px;
    }
}

/* --- 差分修正（2回目） --- */
/* image-text-type03 を .box-wrap.xl（画面幅いっぱい）に入れた場合も、本文の幅に収める */
.box-wrap.xl > .box.image-text-type03 {
    width: min(1008px, calc(100% - 96px));
    margin-left: auto;
    margin-right: auto;
}
/* image-text-type01 は .text ではなく段落を直接入れる使い方もあるので、段落側も伸ばす */
.box.image-text-type01 > p {
    flex: 1 1 0;
    min-width: 0;
    margin: 0;
}
/* 流れ（画像付き）：本文を広く、画像は右に240px */
.list-flow-type01 > ul > li .text .image-text-type01 .image {
    flex: 0 0 240px;
}
/* 番号付きリスト type01：見出し・本文は左揃え */
.list-number-type01 ol li .text,
.list-number-type01 ol li .text * {
    text-align: left;
}
/* バナー type02：ボタンも左揃え */
.box.banner-type02 ul li .text .btn {
    text-align: left;
}

@media screen and (max-width: 768px) {
    .box-wrap.xl > .box.image-text-type03 {
        width: calc(100% - 32px);
    }
    .list-flow-type01 > ul > li .text .image-text-type01 .image {
        flex: none;
    }
}

/* --- 差分修正（スマホ） --- */
@media screen and (max-width: 768px) {
    /* image-text-type03：テーマのスマホ用ベージュパネルを外す（ワイヤーは画像の下にそのまま本文） */
    .box.image-text-type03 .text,
    .box.image-text-type03.right .text {
        margin: 0;
        padding: 0;
        width: auto;
        background: none;
    }
    .box.image-text-type03 .image img {
        position: absolute;
    }
    /* 流れ：丸を左・カードを右の横並びのまま。画像付きは本文の下に画像 */
    .list-flow-type01 > ul > li {
        flex-direction: row;
    }
    .list-flow-type01 > ul > li .text .image-text-type01 .image {
        order: 2;
    }
    /* 表：項目と内容を縦に積まず、2列のまま */
    .table-type01 table th,
    .table-type01 table td,
    .table-type02 table th,
    .table-type02 table td {
        display: table-cell;
    }
    .table-type01 table th,
    .table-type02 table th {
        width: 34% !important;
    }
    .table-type01 table td,
    .table-type02 table td {
        width: auto !important;
    }
    .table-type02 table th,
    .table-type02 table td {
        padding: 14px 8px 14px 0;
    }
}
@media screen and (max-width: 768px) {
    /* テーマのスマホ用「縦積み」指定（display:block・下向き三角など）を打ち消す */
    .list-flow-type01 > ul > li {
        display: flex;
        align-items: flex-start;
    }
    .list-flow-type01 > ul > li .icon {
        display: flex;
        margin: 0;
    }
    .list-flow-type01 > ul > li .icon:after {
        display: none;
    }
    .list-flow-type01 > ul > li .text {
        margin: 0;
        width: auto;
    }
}

/*======================================
社労士サイト：番号付きリストの画像付きレイアウト（.with-image）
画像なしが基本形。画像を見せたいときだけ .with-image を付ける。
======================================*/
/* type01：数字｜画像（4:3・200px）｜見出し・本文 */
.list-number-type01.with-image ol li {
    align-items: center;
}
.list-number-type01.with-image ol li .image {
    display: block;
    position: relative;
    flex: 0 0 200px;
    aspect-ratio: 4 / 3;
    border-radius: 12px;
    background: var(--placeholder_bg);
}
.list-number-type01.with-image ol li .image img {
    position: absolute;
    inset: 0;
}
.list-number-type01.with-image ol li .text {
    flex: 1 1 0;
    min-width: 0;
}

/* type02：カード上部に画像（16:10）、その下に丸数字・見出し・本文 */
.list-number-type02.with-image ol li {
    overflow: hidden;
}
.list-number-type02.with-image ol li .image {
    display: block;
    position: relative;
    order: -1;
    margin: -24px -24px 6px;
    aspect-ratio: 16 / 10;
    border-radius: 0;
    background: var(--placeholder_bg);
}
.list-number-type02.with-image ol li .image:after {
    display: none;
}
.list-number-type02.with-image ol li .image img {
    position: absolute;
    inset: 0;
}

@media screen and (max-width: 768px) {
    /* type01：数字と本文を横に、画像は本文の下に */
    .list-number-type01.with-image ol li {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        column-gap: 16px;
        row-gap: 12px;
        align-items: start;
    }
    .list-number-type01.with-image ol li:before {
        grid-column: 1;
        grid-row: 1 / 3;
    }
    .list-number-type01.with-image ol li .text {
        grid-column: 2;
        grid-row: 1;
    }
    .list-number-type01.with-image ol li .image {
        grid-column: 2;
        grid-row: 2;
        width: 100%;
    }
    .list-number-type02.with-image ol li .image {
        margin: -24px -24px 6px;
    }
}
/* カード上部の画像は、カードの左右いっぱいに（テーマのスマホ用の幅指定を打ち消す） */
.list-number-type02.with-image ol li .image {
    align-self: stretch;
    width: calc(100% + 48px);
    max-width: none;
}
/* リードの本文：テーマの .lead-type01 .text p（中央）に勝つよう指定 */
.box.lead-type01 .text p {
    text-align: left;
}


/*======================================
  お知らせ・コラム：トップのスライダー／一覧ページのタブ切り替え
======================================*/

/* --- トップ：スライダー --- */
#section_topics .news_slider {
    overflow: hidden;
    border-radius: 20px;
}
#section_topics .news_slider .swiper-slide {
    height: auto;              /* カードの高さを揃える */
}
.news_slider_nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 24px;
}
.news_slider_pagination.swiper-pagination-bullets {
    position: static;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    width: auto;
}
.news_slider_pagination .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    margin: 0 !important;
    background: #DCCAB4;
    opacity: 1;
    transition: width .3s ease, background .3s ease;
}
.news_slider_pagination .swiper-pagination-bullet-active {
    width: 24px;
    border-radius: 999px;
    background: var(--main_color_2);
}
.news_slider_buttons {
    display: flex;
    gap: 10px;
    margin-left: auto;
}
.news_slider_prev,
.news_slider_next {
    position: relative;
    width: 48px;
    height: 48px;
    border: 1px solid var(--main_color_2);
    border-radius: 50%;
    background: #fff;
    color: var(--main_color_2);
    cursor: pointer;
    transition: background .3s ease, color .3s ease, opacity .3s ease;
}
.news_slider_prev::before,
.news_slider_next::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 9px;
    height: 9px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transform: translate(-65%, -50%) rotate(45deg);
}
.news_slider_prev::before {
    transform: translate(-35%, -50%) rotate(-135deg);
}
.news_slider_prev:hover,
.news_slider_next:hover {
    background: var(--main_color_2);
    color: #fff;
}
.news_slider_prev.swiper-button-disabled,
.news_slider_next.swiper-button-disabled {
    opacity: .35;
    pointer-events: none;
}
/* スライドが1画面に収まるときは操作部を隠す */
.news_slider_nav:has(.swiper-pagination-lock) {
    display: none;
}

/* --- 該当なし・もっと見る --- */
.news_empty {
    padding: 48px 24px;
    border-radius: 20px;
    background: #fff;
    color: var(--text-sub_color);
    text-align: center;
}
.news_empty[hidden],
.news_more[hidden],
.news_card[hidden] {
    display: none !important;
}
.news_more {
    margin-top: 40px;
    text-align: center;
}
.news_more_btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 200px;
    min-height: 48px;
    padding: 0 28px;
    border: 1px solid var(--main_color_2);
    border-radius: 999px;
    background: #fff;
    color: var(--main_color_2);
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .04em;
    cursor: pointer;
    transition: background .3s ease, color .3s ease;
}
.news_more_btn::after {
    content: "";
    width: 7px;
    height: 7px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
}
.news_more_btn:hover {
    background: var(--main_color_2);
    color: #fff;
}

/* --- 一覧ページ（新着情報一覧・カテゴリー一覧） --- */
#section_post_list .sec_title {
    margin-bottom: 24px;
}
#section_post_list .archive_description {
    max-width: 720px;
    margin-bottom: 32px;
    text-align: left;
}
#section_post_list .news_grid {
    margin-bottom: 0;
}

@media screen and (max-width: 768px) {
    #section_topics .news_slider {
        overflow: visible;     /* 次のカードを少しのぞかせる */
        border-radius: 0;
    }
    #section_topics .inner {
        overflow: hidden;
    }
    .news_slider_nav {
        margin-top: 20px;
    }
    .news_slider_prev,
    .news_slider_next {
        width: 44px;
        height: 44px;
    }
    .news_more {
        margin-top: 28px;
    }
    .news_more_btn {
        width: 100%;
    }
    #section_post_list .archive_description {
        margin-bottom: 24px;
    }
}
#section_post_list.top_section {
    padding: 80px 0 112px;
}
@media screen and (max-width: 768px) {
    #section_post_list.top_section {
        padding: 48px 0 64px;
    }
}

/*======================================
  料金表（固定ページ「料金」でエディターから使う追加クラス）
  .fee-table … table-type01 / table-type02 に付けると金額を強調
  .fee-notes … 表の下の注記
  .text-type01 … 見出し下の短い説明文
======================================*/
.box.text-type01 p {
    margin: 0;
}
.box.fee-table table thead th {
    background: var(--main_color_2);
    color: #fff;
}
.fee-table td {
    font-weight: 700;
}
.fee-table small,
.list-check-type01 small {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.7;
    color: var(--text-sub_color);
}
.fee-notes {
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
    font-size: 13px;
    line-height: 1.8;
    color: var(--text-sub_color);
}
.fee-notes li {
    margin: 0;
    list-style: none;
}
@media screen and (max-width: 768px) {
    .fee-table table th,
    .fee-table table td {
        padding: 12px 10px;
        font-size: 13px;
    }
    /* 2列の料金表は、業務名の下に金額を置く縦積みにする */
    .table-type02.fee-table table,
    .table-type02.fee-table tbody,
    .table-type02.fee-table tr,
    .table-type02.fee-table th,
    .table-type02.fee-table td {
        display: block;
        width: 100% !important;
    }
    .table-type02.fee-table th {
        padding-bottom: 4px;
        border-bottom: 0;
    }
    .table-type02.fee-table td {
        padding-top: 0;
    }
}

/*======================================
  ドロワーメニュー（スマホ）
  ・右からスライドするパネル。背景にメインビジュアルと同じ斜めの帯
  ・メニューは番号＋丸ゴシック＋矢印、項目が順にふわっと出る
  ・下にお問い合わせ（メール・電話・受付時間）をまとめる
======================================*/
body.open {
    overflow: hidden;
}
#nav_bg {
    top: 0;
    height: 100%;
    height: 100dvh;
    background: rgba(59, 46, 37, .35);
    transition: opacity .35s ease, z-index 0s .35s;
}
.open #nav_bg {
    top: 0;
    transition: opacity .35s ease;
    transition-delay: 0s;
}
#nav_drawer {
    position: relative;
    display: block;
    width: min(100%, 420px);
    min-width: 0;
    max-width: 420px;
    height: 100%;
    margin: 0 0 0 auto;
    padding: 0;
    overflow: hidden auto;
    overscroll-behavior: contain;
    background: var(--body-color-bg);
    font-family: var(--font_base);
    font-size: 15px;
    transform: translateX(24px);
    transition: transform .45s cubic-bezier(.16, 1, .3, 1);
}
.open #nav_drawer {
    transform: translateX(0);
}

/* 背景の帯（MVと同じモチーフを右上に小さく） */
.drawer_bands {
    position: absolute;
    top: 0;
    right: 0;
    width: 40%;
    height: 112px;
    pointer-events: none;
}
.drawer_bands span {
    position: absolute;
    top: 0;
    bottom: 0;
}
.drawer_bands .b1 { right: 0; width: 100%; clip-path: polygon(46% 0, 100% 0, 100% 100%, 82% 100%); background: rgba(246, 212, 174, .55); }
.drawer_bands .b2 { right: 0; width: 62%;  clip-path: polygon(0 0, 70% 0, 100% 75%, 100% 100%, 64% 100%); background: rgba(240, 169, 89, .45); }
.drawer_bands .b3 { right: 0; width: 26%;  clip-path: polygon(40% 0, 100% 0, 100% 100%); background: rgba(141, 88, 32, .75); }

.drawer_inner {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100%;
    padding: 14px 24px 40px;
}

/* ロゴ（ヘッダーと同じ位置に置き、開閉で位置がずれないようにする） */
#nav_drawer .drawer_logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 36px;
    margin-bottom: 44px;
    color: var(--text-color);
}
#nav_drawer .drawer_logo img {
    width: 36px;
    height: auto;
}
.drawer_logo_text {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}
.drawer_logo_kind {
    font-size: 10px;
    letter-spacing: .12em;
    color: var(--main_color_2);
}
.drawer_logo_name {
    font-family: var(--font_maru);
    font-size: 16px;
    font-weight: 700;
}

.drawer_label {
    margin: 0 0 8px;
    font-size: 11px;
    letter-spacing: .24em;
    color: var(--main_color_2);
}

/* メニュー：テーマ既定の li（中央寄せ・幅95%・アニメーション）を打ち消して組み直す */
#nav_drawer .drawer_nav {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    counter-reset: drawer;
    border-top: 1px solid #E2D6C6;
}
#nav_drawer .drawer_nav li {
    width: 100%;
    margin: 0;
    padding: 0;
    font-size: inherit;
    line-height: 1.5;
    text-align: left;
    border-bottom: 1px solid #E2D6C6;
    counter-increment: drawer;
    opacity: 0;
    transform: translateX(16px);
    transition: opacity .4s ease, transform .5s cubic-bezier(.16, 1, .3, 1);
}
.open #nav_drawer .drawer_nav li {
    opacity: 1;
    transform: none;
}
#nav_drawer .drawer_nav a {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 17px 4px;
    color: var(--text-color);
    font-family: var(--font_maru);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: .04em;
    text-decoration: none;
}
#nav_drawer .drawer_nav a::before {
    content: counter(drawer, decimal-leading-zero);
    min-width: 22px;
    font-family: var(--font_base);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: .08em;
    color: var(--main_color_2);
}
#nav_drawer .drawer_nav a::after {
    content: "";
    width: 8px;
    height: 8px;
    margin-left: auto;
    border-top: 2px solid var(--main_color_2);
    border-right: 2px solid var(--main_color_2);
    transform: rotate(45deg);
    transition: transform .3s ease;
}
#nav_drawer .drawer_nav a:hover::after {
    transform: translateX(4px) rotate(45deg);
}
/* 今いるページ */
#nav_drawer .drawer_nav a.current,
#nav_drawer .drawer_nav a[aria-current="page"] {
    color: var(--main_color_2);
}

/* お問い合わせ */
.drawer_contact {
    margin-top: 36px;
    padding: 22px 20px 20px;
    border-radius: 20px;
    background: #fff;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .4s ease, transform .5s cubic-bezier(.16, 1, .3, 1);
}
.open .drawer_contact {
    opacity: 1;
    transform: none;
    transition-delay: .45s;
}
#nav_drawer .drawer_cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 52px;
    border-radius: 999px;
    background: var(--main_color_2);
    color: #fff;
    font-weight: 700;
    letter-spacing: .04em;
    text-decoration: none;
}
#nav_drawer .drawer_cta::after {
    content: "→";
}
#nav_drawer .drawer_tel {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 14px;
    color: var(--text-color);
    font-size: 24px;
    font-weight: 700;
    letter-spacing: .04em;
    text-decoration: none;
}
#nav_drawer .drawer_tel svg {
    color: var(--main_color_2);
}
.drawer_hours {
    margin: 4px 0 0;
    font-size: 12px;
    text-align: center;
    color: var(--text-sub_color);
}

/* 項目が順に出るディレイ（12項目まで） */
.open #nav_drawer .drawer_nav li:nth-child(1)  { transition-delay: .10s; }
.open #nav_drawer .drawer_nav li:nth-child(2)  { transition-delay: .14s; }
.open #nav_drawer .drawer_nav li:nth-child(3)  { transition-delay: .18s; }
.open #nav_drawer .drawer_nav li:nth-child(4)  { transition-delay: .22s; }
.open #nav_drawer .drawer_nav li:nth-child(5)  { transition-delay: .26s; }
.open #nav_drawer .drawer_nav li:nth-child(6)  { transition-delay: .30s; }
.open #nav_drawer .drawer_nav li:nth-child(7)  { transition-delay: .34s; }
.open #nav_drawer .drawer_nav li:nth-child(8)  { transition-delay: .38s; }
.open #nav_drawer .drawer_nav li:nth-child(9)  { transition-delay: .42s; }
.open #nav_drawer .drawer_nav li:nth-child(10) { transition-delay: .46s; }
.open #nav_drawer .drawer_nav li:nth-child(n+11) { transition-delay: .50s; }

@media (prefers-reduced-motion: reduce) {
    #nav_drawer,
    #nav_drawer .drawer_nav li,
    .drawer_contact {
        transition: none;
    }
}

/*======================================
  メインビジュアル：スクロールの合図と登場アニメーション
  ・ローディング後に帯→カードの順で登場（html.is-loaded で開始）
======================================*/
/* スクロールの合図（写真の右下） */
.mv_scroll {
    position: absolute;
    right: 32px;
    bottom: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding-bottom: 0;
    color: #fff;
    font-size: 10px;
    letter-spacing: .24em;
    text-decoration: none;
    writing-mode: vertical-rl;
}
.mv_scroll::after {
    content: "";
    width: 1px;
    height: 72px;
    background: linear-gradient(rgba(255,255,255,.9) 50%, rgba(255,255,255,.25) 50%);
    background-size: 1px 200%;
    animation: mvScroll 2s ease-in-out infinite;
}
@keyframes mvScroll {
    0%   { background-position: 0 100%; }
    100% { background-position: 0 -100%; }
}

/* --- 登場アニメーション --- */
@keyframes mvBandIn {
    from { transform: translateX(40px); opacity: 0; }
    to   { transform: none; opacity: 1; }
}
@keyframes mvUp {
    from { transform: translateY(16px); opacity: 0; }
    to   { transform: none; opacity: 1; }
}
@keyframes mvReveal {
    to { opacity: 1; transform: none; }
}
.mv-anim .mv_band,
.mv-anim .mv_catch,
.mv-anim .mv_catch > *,
.mv-anim .mv_scroll {
    opacity: 0;
}
/* JSが止まっても4秒後には必ず表示する */
.mv-anim:not(.is-loaded) .mv_band,
.mv-anim:not(.is-loaded) .mv_catch,
.mv-anim:not(.is-loaded) .mv_catch > *,
.mv-anim:not(.is-loaded) .mv_scroll {
    animation: mvReveal 0s 4s forwards;
}
.mv-anim.is-loaded .mv_band {
    animation: mvBandIn .9s cubic-bezier(.16, 1, .3, 1) both;
}
.mv-anim.is-loaded .mv_band.b1 { animation-delay: .05s; }
.mv-anim.is-loaded .mv_band.b2 { animation-delay: .15s; }
.mv-anim.is-loaded .mv_band.b3 { animation-delay: .25s; }
.mv-anim.is-loaded .mv_catch {
    animation: mvUp .8s cubic-bezier(.16, 1, .3, 1) .3s both;
}
.mv-anim.is-loaded .mv_catch > * {
    animation: mvUp .7s cubic-bezier(.16, 1, .3, 1) both;
}
.mv-anim.is-loaded .mv_catch > :nth-child(1) { animation-delay: .45s; }
.mv-anim.is-loaded .mv_catch > :nth-child(2) { animation-delay: .55s; }
.mv-anim.is-loaded .mv_catch > :nth-child(3) { animation-delay: .65s; }
.mv-anim.is-loaded .mv_catch > :nth-child(4) { animation-delay: .75s; }
.mv-anim.is-loaded .mv_catch > :nth-child(5) { animation-delay: .85s; }
.mv-anim.is-loaded .mv_scroll {
    animation: mvUp .8s ease 1.1s both;
}
@media (prefers-reduced-motion: reduce) {
    .mv-anim .mv_band,
    .mv-anim .mv_catch,
    .mv-anim .mv_catch > *,
    .mv-anim .mv_scroll {
        opacity: 1;
        animation: none !important;
    }
    .mv_scroll::after {
        animation: none;
    }
}

@media screen and (max-width: 768px) {
    .mv_scroll {
        display: none;
    }
}

/*======================================
  動作チェックで見つかった不具合の修正
======================================*/

/* タブレット幅（769〜1000px）：ヘッダーのナビが2段に折り返してMVに重なるため、
   スマホと同じくドロワー＋電話アイコンに切り替える */
@media screen and (min-width: 769px) and (max-width: 1000px) {
    header .inner ul.header_nav {
        display: none;
    }
    .btn_menu {
        top: 18px;
        right: 24px;
        width: 44px;
        height: 44px;
        padding: 0;
        border-radius: 999px;
        background: var(--main_color_2);
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .btn_menu .txt {
        display: none;
    }
    .btn_trigger {
        width: 20px;
        height: 14px;
    }
    .btn_trigger span {
        height: 2px;
        border-radius: 2px;
        background: #fff;
    }
    .btn_trigger span:nth-of-type(2) {
        top: 6px;
        width: 100%;
    }
    .btn_trigger span:nth-of-type(3) {
        top: 12px;
        bottom: auto;
    }
    #btn_top::after {
        display: none;
    }
    #btn_top.active span:nth-of-type(3) {
        animation-name: sr_btn_bar03;
    }
    @keyframes sr_btn_bar03 {
        0% { transform: translateY(0) rotate(0); }
        100% { transform: translateY(-6px) rotate(45deg); }
    }
    .header_tel {
        position: absolute;
        top: 18px;
        right: 80px;
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--main_color_2) !important;
    }
}

/* ページ送り：「前へ」「次へ」の内側の span にも枠線が付いて二重枠になっていた。
   あわせて丸いボタンのデザインに揃える */
.pagination a,
.pagination > ul > li > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    padding: 0 14px;
    border: 1px solid #DCCAB4;
    border-radius: 999px;
    background: #fff;
    color: var(--text-color);
    font-size: 14px;
    line-height: 1;
}
.pagination a span {
    display: inline;
    min-width: 0;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
}
.pagination a:hover {
    background: var(--main_color_2);
    border-color: var(--main_color_2);
    color: #fff;
}
.pagination span.current {
    background: var(--main_color_2);
    border-color: var(--main_color_2);
    color: #fff;
}
.pagination .dots {
    border: 0;
    background: none;
}

/* スマホ・タブレットのフッター下・コピーライト下に大きな余白が残っていた。
   画面下の追従メニュー（.footer_nav）用の余白だが、追従メニューは表示されない状態のため詰める */
@media screen and (max-width: 1024px) {
    footer {
        padding-bottom: 48px;
    }
}
@media screen and (max-width: 768px) {
    footer {
        padding-bottom: 36px;
    }
    body > .copy {
        padding: 14px 16px;
    }
}

/*======================================
  404・検索結果（サイトのデザインに合わせて作り直し）
======================================*/
#section_err.top_section,
#section_search.top_section {
    padding: 80px 0 112px;
}
.err_box {
    display: flex;
    align-items: flex-start;
    gap: 56px;
    padding: 56px 56px 48px;
    border-radius: 24px;
    background: #fff;
}
.err_code {
    flex: none;
    font-family: var(--font_maru);
    font-size: 120px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .02em;
    color: var(--accent_beige);
}
.err_body {
    flex: 1 1 auto;
    min-width: 0;
}
.err_title {
    margin: 4px 0 16px;
    font-family: var(--font_maru);
    font-size: 26px;
    font-weight: 700;
    line-height: 1.5;
    color: var(--text-color);
}
.err_text {
    margin: 0;
    color: var(--text-sub_color);
}
.err_actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 28px;
    margin-top: 28px;
}
.err_btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 52px;
    padding: 0 28px;
    border-radius: 999px;
    background: var(--main_color_2);
    color: #fff;
    font-weight: 700;
    letter-spacing: .04em;
    text-decoration: none;
    transition: background .3s ease;
}
.err_btn::after {
    content: "→";
}
.err_btn:hover {
    background: var(--main_color);
    color: #fff;
}
.err_search {
    margin-top: 36px;
    padding-top: 24px;
    border-top: 1px solid #E2D6C6;
}
.err_search_label {
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 700;
    color: var(--main_color_2);
}

/* 検索フォーム（404・検索結果共通） */
.search_form {
    display: flex;
    gap: 8px;
    max-width: 520px;
    margin: 0;
}
.search_form input[type="search"] {
    flex: 1 1 auto;
    min-width: 0;
    height: 48px;
    padding: 0 20px;
    border: 1px solid #DCCAB4;
    border-radius: 999px;
    background: #fff;
    color: var(--text-color);
    font-family: inherit;
    font-size: 15px;
}
.search_form input[type="search"]:focus {
    outline: 2px solid var(--accent_orange);
    outline-offset: 1px;
    border-color: var(--main_color_2);
}
.search_form .search_submit {
    flex: none;
    height: 48px;
    padding: 0 24px;
    border: 0;
    border-radius: 999px;
    background: var(--main_color_2);
    color: #fff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background .3s ease;
}
.search_form .search_submit:hover {
    background: var(--main_color);
}

/* 検索結果 */
.search_head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px 32px;
    margin-bottom: 32px;
    padding-bottom: 24px;
    border-bottom: 1px solid #E2D6C6;
}
.search_count {
    margin: 0;
    font-size: 15px;
    text-align: left;
}
.search_keyword {
    font-weight: 700;
}
.search_count strong {
    margin: 0 2px 0 8px;
    font-family: var(--font_maru);
    font-size: 26px;
    color: var(--main_color_2);
}
.search_head .search_again {
    flex: 1 1 320px;
    max-width: 440px;
}
.search_list {
    display: grid;
    gap: 16px;
}
#section_search .search_item {
    margin: 0;
    padding: 0;
    border: 0;
}
.search_item_link {
    position: relative;
    display: block;
    padding: 24px 64px 24px 28px;
    border-radius: 20px;
    background: #fff;
    color: var(--text-color);
    text-decoration: none;
    transition: box-shadow .3s ease, transform .3s ease;
}
.search_item_link::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 28px;
    width: 8px;
    height: 8px;
    border-top: 2px solid var(--main_color_2);
    border-right: 2px solid var(--main_color_2);
    transform: translateY(-50%) rotate(45deg);
    transition: right .3s ease;
}
.search_item_link:hover {
    box-shadow: 0 10px 28px rgba(59, 46, 37, .10);
}
.search_item_link:hover::after {
    right: 24px;
}
#section_search .search_item_meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 6px;
    font-size: 12px;
    color: #888;
}
.search_item_cat {
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--accent_beige);
    color: #6E4318;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}
#section_search .search_item_title {
    margin: 0 0 6px;
    font-family: var(--font_maru);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.6;
    color: var(--text-color);
}
#section_search .search_item_excerpt {
    margin: 0;
    font-size: 13px;
    line-height: 1.9;
    color: var(--text-sub_color);
}
.search_empty {
    padding: 40px;
    border-radius: 20px;
    background: #fff;
}
.search_empty p {
    margin: 0;
}
.search_empty_title {
    margin-bottom: 8px !important;
    font-family: var(--font_maru);
    font-size: 20px;
    font-weight: 700;
}

@media screen and (max-width: 768px) {
    #section_err.top_section,
    #section_search.top_section {
        padding: 48px 0 64px;
    }
    .err_box {
        flex-direction: column;
        gap: 8px;
        padding: 32px 22px 28px;
        border-radius: 20px;
    }
    .err_code {
        font-size: 72px;
    }
    .err_title {
        font-size: 21px;
    }
    .err_actions {
        gap: 4px 22px;
    }
    .err_btn {
        width: 100%;
        justify-content: center;
        margin-bottom: 8px;
    }
    .search_head {
        margin-bottom: 24px;
        padding-bottom: 20px;
    }
    .search_head .search_again {
        flex-basis: 100%;
        max-width: none;
    }
    .search_item_link {
        padding: 18px 44px 18px 18px;
        border-radius: 16px;
    }
    .search_item_link::after {
        right: 18px;
    }
    #section_search .search_item_title {
        font-size: 16px;
    }
    .search_empty {
        padding: 28px 22px;
    }
}

/*======================================
  画面下の追従メニュー（スマホ・タブレット）
  ・少しスクロールすると下からふわっと出る（js/theme.js が .is-show を付ける）
  ・ドロワーを開いている間は隠す
  ・「電話する」「メールで相談」の2列。電話はサイト情報登録に入力があるときだけ、メールは常に表示
======================================*/
.footer_nav {
    display: none;
}
@media screen and (max-width: 1000px) {
    .footer_nav {
        position: fixed;
        left: 12px;
        right: 12px;
        bottom: calc(12px + env(safe-area-inset-bottom, 0px));
        z-index: 9000;
        display: flex;
        gap: 6px;
        width: auto;
        max-width: 480px;
        margin: 0 auto;
        padding: 6px;
        border-radius: 25px;
        background: rgba(255, 255, 255, .94);
        box-shadow: 0 10px 30px rgba(59, 46, 37, .18);
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
        font-family: var(--font_base);
        opacity: 0;
        pointer-events: none;
        transform: translateY(calc(100% + 24px));
        transition: transform .5s cubic-bezier(.16, 1, .3, 1), opacity .3s ease;
    }
    .footer_nav.is-show {
        opacity: 1;
        pointer-events: auto;
        transform: none;
    }
    .open .footer_nav {
        opacity: 0;
        pointer-events: none;
        transform: translateY(calc(100% + 24px));
    }
    .footer_nav .fn_item {
        flex: 1 1 0;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        min-width: 0;
        min-height: 50px;
        padding: 0 8px;
        border: 1px solid #DCCAB4;
        border-radius: 30px;
        background: #fff;
        color: var(--main_color_2);
        font-size: 14px;
        font-weight: 700;
        line-height: 1.2;
        letter-spacing: .02em;
        text-decoration: none;
        white-space: nowrap;
    }
    .footer_nav .fn_item svg {
        flex: none;
    }
    .footer_nav .fn_mail {
        border-color: var(--main_color_2);
        background: var(--main_color_2);
        color: #fff;
    }
    /* 追従メニューがコピーライトに重ならないよう、ページ最下部に余白を足す */
    body > .copy {
        padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px));
    }
}
@media (prefers-reduced-motion: reduce) {
    .footer_nav {
        transition: none;
    }
}

/* 404：古い指定（#section_err の中央寄せ）を打ち消す。追従メニュー：古い .footer_nav a span（白文字）を打ち消す */
#section_err .err_box,
#section_err .err_box p,
#section_err .err_box h2 {
    text-align: left;
}
.footer_nav .fn_item span {
    background: none;
    color: inherit;
}

/* 下層ページの見出し（文字送りアニメーション）：1文字ずつ span に分けると、
   見出しが flex のため折り返さず、長いタイトル（記事名など）が左右にはみ出していた */
body:not(.home) .other_page_title {
    flex-wrap: wrap;
    justify-content: center;
    max-width: 100%;
}

/* 下層ページの見出し：写真の暗幕は不透明度50%／斜めの帯は一旦非表示 */
body:not(.home) .page_top::after {
    background: rgba(59, 46, 37, 0.5);
}
.page_top_bands {
    display: none;
}