@charset "UTF-8";

/* -----------------------------------------  共通クラス 2025-09-01 ----------------------------------------- */

/* -----------------------------------------  フレックス ----------------------------------------- */
.flex-frame {
display: flex;
flex-wrap: wrap;
width: 100%;
box-sizing: border-box;
}
.flex-frame90 {
display: flex;
flex-wrap: wrap;
width: 90%;
max-width: 1600px;
box-sizing: border-box;
margin: 0 auto;
}
.flex-frame80 {
display: flex;
flex-wrap: wrap;
width: 80%;
max-width: 1400px;
box-sizing: border-box;
margin: 0 auto;
}
.ff-box20 {
flex: 0 0 20%;
box-sizing: border-box;
transition: 0.3s ease;
}
.ff-box25 {
flex: 0 0 25%;
box-sizing: border-box;
transition: 0.3s ease;
}
.ff-box30 {
flex: 0 0 30%;
box-sizing: border-box;
transition: 0.3s ease;
}
.ff-box33 {
flex: 0 0 33%;
box-sizing: border-box;
transition: 0.3s ease;
}
.ff-box40 {
flex: 0 0 40%;
box-sizing: border-box;
transition: 0.3s ease;
}
.ff-box50 {
flex: 0 0 50%;
box-sizing: border-box;
transition: 0.3s ease;
}
.ff-box60 {
flex: 0 0 60%;
box-sizing: border-box;
transition: 0.3s ease;
}
.ff-box70 {
flex: 0 0 70%;
box-sizing: border-box;
transition: 0.3s ease;
}
.ff-box75 {
flex: 0 0 75%;
box-sizing: border-box;
transition: 0.3s ease;
}
.ff-box80 {
flex: 0 0 80%;
box-sizing: border-box;
transition: 0.3s ease;
}
.ff-box100 {
flex: 0 0 100%;
box-sizing: border-box;
transition: 0.3s ease;
}

.ff-box20 h2, .ff-box25 h2, .ff-box30 h2, .ff-box33 h2, .ff-box40 h2, .ff-box50 h2, .ff-box60 h2, .ff-box70 h2, .ff-box80 h2, .ff-box100 h2,
.ff-box20 h3, .ff-box25 h3, .ff-box30 h3, .ff-box33 h3, .ff-box40 h3, .ff-box50 h3, .ff-box60 h3, .ff-box70 h3, .ff-box80 h3, .ff-box100 h3,
.ff-box20 h4, .ff-box25 h4, .ff-box30 h4, .ff-box33 h4, .ff-box40 h4, .ff-box50 h4, .ff-box60 h4, .ff-box70 h4, .ff-box80 h4, .ff-box100 h4,
.ff-box20 h5, .ff-box25 h5, .ff-box30 h5, .ff-box33 h5, .ff-box40 h5, .ff-box50 h5, .ff-box60 h5, .ff-box70 h5, .ff-box80 h5, .ff-box100 h5,
.ff-box20 p, .ff-box25 p, .ff-box30 p, .ff-box40 p, .ff-box50 p, .ff-box60 p, .ff-box70 p, .ff-box80 p, .ff-box100 p
{
line-height: 1.8em;
padding: 20px 30px;
margin: 0 0 0 0;
}
.ff-box20 img, .ff-box25 img, .ff-box30 img, .ff-box33 img, .ff-box40 img, .ff-box50 img, .ff-box60 img, .ff-box70 img, .ff-box80 img, .ff-box100 img {
width: 100%;
object-fit: cover;
}
.max-w1000c {
max-width: 1000px;
margin: 0 auto;
}
.max-w900c {
max-width: 900px;
margin: 0 auto;
}
.max-w800c {
max-width: 800px;
margin: 0 auto;
}

.fd-rr {
flex-direction:row-reverse;
}
.jc-fs {
  display: flex;
  justify-content: flex-start;
}
.jc-fe {
  display: flex;
  justify-content: flex-end;
}


@media (max-width: 979px) {
.w979-box100 {
flex: 0 0 100%;
}
}

@media (max-width: 799px){
.ff-box33 {
flex: 0 0 50%;
}
.w779-box100 {
flex: 0 0 100% !important;
}
.jc-fs, .jc-fe {
display: flex;
justify-content: center;
}
}/* max-width: 799px */

@media (max-width: 679px) {
.w679-box100 {
flex: 0 0 100% !important;
}
.w679-box50 {
flex: 0 0 50% !important;
}
}
@media (max-width: 579px) {
.w579-box100 {
flex: 0 0 100%;
}
}
@media (max-width: 550px){

.ff-box20, .ff-box25, .ff-box30, .ff-box33, .ff-box70, .ff-box75, .ff-box80 {
flex: 0 0 100%;
}
.rmax-h200 {
max-height: 200px;
overflow: hidden;
}
.rmax-h200 img {
object-position: 15px -50px;
transform: scale(1.1);
}

}/* max-width: 550px */


/* -----------------------------------------  表示範囲内で固定させる sticky  中の要素に設定させないといけない ----------------------------------------- */
.sticky_box {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
}


/* -----------------------------------------  レイアウト ----------------------------------------- */
.clear {
	/* 終了させるブロック直後のタグに使用（使用タグのマージンが消えるので注意） */
	clear: both;
}
.clearfix:after {
	/* float させているもの全体をくくっているタグに使用 */
    content:" ";
    display:block;
    clear:both;
}

.fl {
	float: left;
}
.fr {
	float: right;
}

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

.pt-50 {
	padding-top: -50px !important;
}
.pt-40 {
	padding-top: -40px !important;
}
.pt-30 {
	padding-top: -30px !important;
}
.pt-20 {
	padding-top: -20px !important;
}
.pt-10 {
	padding-top: -10px !important;
}
.pt-5 {
	padding-top: -5px !important;
}
.pt5 {
	padding-top: 5px !important;
}
.pt10 {
	padding-top: 10px !important;
}
.pt15 {
	padding-top: 15px !important;
}
.pt20 {
	padding-top: 20px !important;
}
.pt25 {
	padding-top: 25px !important;
}
.pt30 {
	padding-top: 30px !important;
}
.pt40 {
	padding-top: 40px !important;
}
.pt50 {
	padding-top: 50px !important;
}
.pt60 {
	padding-top: 60px !important;
}


.pr5 {
	padding-right: 5px;
}
.pr10 {
	padding-right: 10px;
}
.pr15 {
	padding-right: 15px;
}
.pr20 {
	padding-right: 20px;
}
.pr25 {
	padding-right: 25px;
}
.pr30 {
	padding-right: 30px;
}
.pr35 {
	padding-right: 35px;
}
.pr40 {
	padding-right: 40px;
}
.pr45 {
	padding-right: 45px;
}
.pr50 {
	padding-right: 50px;
}



.pb5 {
	padding-bottom: 5px !important;
}
.pb10 {
	padding-bottom: 10px !important;
}
.pb15 {
	padding-bottom: 15px !important;
}
.pb20 {
	padding-bottom: 20px !important;
}
.pb25 {
	padding-bottom: 25px !important;
}
.pb30 {
	padding-bottom: 30px !important;
}
.pb35 {
	padding-bottom: 35px !important;
}
.pb40 {
	padding-bottom: 40px !important;
}
.pb45 {
	padding-bottom: 45px !important;
}
.pb50 {
	padding-bottom: 50px !important;
}
.pb60 {
	padding-bottom: 60px !important;
}
.pb70 {
	padding-bottom: 70px !important;
}
.pb80 {
	padding-bottom: 80px !important;
}



.pl5 {
	padding-left: 5px;
}
.pl10 {
	padding-left: 10px;
}
.pl15 {
	padding-left: 15px;
}
.pl20 {
	padding-left: 20px;
}
.pl25 {
	padding-left: 25px;
}
.pl30 {
	padding-left: 30px;
}
.pl35 {
	padding-left: 35px;
}
.pl40 {
	padding-left: 40px;
}
.pl45 {
	padding-left: 45px;
}
.pl50 {
	padding-left: 50px;
}
.pl55 {
	padding-left: 55px;
}
.pl60 {
	padding-left: 60px;
}


.mt-200 {
	margin-top: -200px !important;
}
.mt-150 {
	margin-top: -150px !important;
}
.mt-100 {
	margin-top: -100px !important;
}
.mt-90 {
	margin-top: -90px !important;
}
.mt-80 {
	margin-top: -80px !important;
}
.mt-70 {
	margin-top: -70px !important;
}
.mt-60 {
	margin-top: -60px !important;
}
.mt-50 {
	margin-top: -50px !important;
}
.mt-45 {
	margin-top: -45px !important;
}
.mt-40 {
	margin-top: -40px !important;
}
.mt-30 {
	margin-top: -30px !important;
}
.mt-20 {
	margin-top: -20px !important;
}
.mt-10 {
	margin-top: -10px !important;
}
.mt-5 {
	margin-top: -5px !important;
}
.mt-2 {
	margin-top: -2px !important;
}
.mt5 {
	margin-top: 5px;
}
.mt10 {
	margin-top: 10px;
}
.mt15 {
	margin-top: 15px;
}
.mt20 {
	margin-top: 20px;
}
.mt25 {
	margin-top: 25px;
}
.mt30 {
	margin-top: 30px;
}
.mt35 {
	margin-top: 35px;
}
.mt40 {
	margin-top: 40px;
}
.mt50 {
	margin-top: 50px;
}
.mt55 {
	margin-top: 55px;
}


.mr5 {
	margin-right: 5px;
}
.mr10 {
	margin-right: 10px;
}
.mr15 {
	margin-right: 15px;
}
.mr20 {
	margin-right: 20px;
}
.mr25 {
	margin-right: 25px;
}
.mr30 {
	margin-right: 30px;
}
.mr40 {
	margin-right: 40px;
}
.mr50 {
	margin-right: 50px;
}

.mr3p {
	margin-right: 3%;
}
.mr5p {
	margin-right: 5%;
}
.mr10p {
	margin-right: 10%;
}


.mb-20 {
	margin-bottom: -20px !important;
}
.mb-15 {
	margin-bottom: -15px !important;
}
.mb-10 {
	margin-bottom: -10px !important;
}
.mb-5 {
	margin-bottom: -5px !important;
}
.mb5 {
	margin-bottom: 5px !important;
}
.mb10 {
	margin-bottom: 10px !important;
}
.mb15 {
	margin-bottom: 15px !important;
}
.mb20 {
	margin-bottom: 20px !important;
}
.mb25 {
	margin-bottom: 25px !important;
}
.mb30 {
	margin-bottom: 30px !important;
}
.mb35 {
	margin-bottom: 35px !important;
}
.mb40 {
	margin-bottom: 40px !important;
}
.mb45 {
	margin-bottom: 45px !important;
}
.mb50 {
	margin-bottom: 50px !important;
}
.mb60 {
	margin-bottom: 60px !important;
}
.mb70 {
	margin-bottom: 70px !important;
}
.mb80 {
	margin-bottom: 80px !important;
}
.mb90 {
	margin-bottom: 90px !important;
}
.mb100 {
	margin-bottom: 100px !important;
}
.mb20vh {
	margin-bottom: 20vh !important;
}
.mb30vh {
	margin-bottom: 30vh !important;
}
.mb40vh {
	margin-bottom: 40vh !important;
}
.mb50vh {
	margin-bottom: 50vh !important;
}

.ml5 {
    margin-left: 5px;
}
.ml10 {
    margin-left: 10px;
}
.ml15 {
    margin-left: 15px;
}
.ml20 {
    margin-left: 20px;
}
.ml25 {
    margin-left: 25px;
}
.ml30 {
    margin-left: 30px;
}
.ml40 {
    margin-left: 40px;
}
.ml50 {
    margin-left: 50px;
}

.ml3p {
    margin-left: 3%;
}
.ml5p {
    margin-left: 5%;
}
.ml10p {
    margin-left: 10%;
}


.top-10 {
top: -10px
}
.top-20 {
top: -20px
}
.top-30 {
top: -30px
}
.top-40 {
top: -40px
}
.top-50 {
top: -50px
}

/*---------------------------------  テキスト用--------------------------------- */

.ffg {
font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
}
.ffm {
font-family: "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "serif";
}
.tal {
	text-align: left;
}
.tar {
	text-align: right;
}
.tac {
	text-align: center;
}
/*--------------------フォントウェイト--------------------*/
.fwn {
	font-weight: normal;
}
.fwb {
	font-weight: bold;
}
.fw500 {
	font-weight:500;
}
/*--------------------左右いっぱい揃え--------------------*/
.taj {
text-align: justify;
}

/*--------------------テキストサイズ--------------------*/

.fs1_8em {
	font-size: 1.8em;
}
.fs1_6em {
	font-size: 1.6em;
}
.fs1_5em {
	font-size: 1.5em;
}
.fs1_4em {
	font-size: 1.4em;
}
.fs1_2em {
	font-size: 1.2em;
}
.fs1_1em {
	font-size: 1.1em;
}
.fs1em {
	font-size: 1em;
}
.fs0_9em {
	font-size: 0.9em;
}
.fs0_8em {
font-size: 0.8em;
}
.fs0_7em {
font-size: 0.7em;
}
.fs120p {
font-size: 120%;
}

/*--------------------文字間--------------------*/
.ls0_1em {
letter-spacing: .1em;
}
.ls0_2em {
letter-spacing: .2em;
}

/*-------------------- テキストチェンジ --------------------*/
/* すべての文字を大文字に */
.ttf-u {
text-transform: uppercase;
}

/*-------------------- テキスト縁取り --------------------*/
.text-border01 {
text-shadow:1px 1px 0 rgba(255,255,255,0.70), -1px -1px 0 rgba(255,255,255,0.70),
              -1px 1px 0 rgba(255,255,255,0.70), 1px -1px 0 rgba(255,255,255,0.70),
              0px 1px 0 rgba(255,255,255,0.70),  0-1px 0 rgba(255,255,255,0.70),
              -1px 0 0 rgba(255,255,255,0.70), 1px 0 0 rgba(255,255,255,0.70);
}
.text-border02 {
text-shadow:1px 1px 0 rgba(255,255,255,1.0), -1px -1px 0 rgba(255,255,255,1.0),
              -1px 1px 0 rgba(255,255,255,1.0), 1px -1px 0 rgba(255,255,255,1.0),
              0px 1px 0 rgba(255,255,255,1.0),  0-1px 0 rgba(255,255,255,1.0),
              -1px 0 0 rgba(255,255,255,1.0), 1px 0 0 rgba(255,255,255,1.0);
}

/*--------------------　改行 --------------------　*/

/*　<span class="br">文字（途中で改行されない）</span>　*/
.br {
	display: inline-block;
}
/*レスポンシブで改行解除用*/
.br2 {
	display: inline-block;
}

/*英文字と和文字の間を改行させる*/
.br3:before {
	content:"\A";
	white-space: pre;
}

/*　<br class="br-sp" /> <br class="br-tb" /> <br class="br-pc" />　*/
@media screen and (min-width: 780px){	
.br-sp { display:none; }
.br-tb { display:none; }
.br-pc { display:block; }
}
@media screen and (max-width: 779px){
.br-sp { display:none; }
.br-tb { display:block; }
.br-pc { display:none; }
}
@media screen and (max-width: 549px){	
.br-sp { display:block; }
.br-pc { display:none; }
.br-tb { display:none; }
}

.indent-1 {
	padding-left:1em;
	text-indent:-1em;
}
p.indent-1p5 {
	padding-left:1em;
	text-indent:-1em;
    padding-top: 0px !important;
    padding-bottom: 5px !important;
}
.indent-2 {
	padding-left:2em;
	text-indent:-2em;
}
.indent-3 {
	padding-left:3em;
	text-indent:-3em;
}
.indent-4 {
	padding-left:4em;
	text-indent:-4em;
}

.underline01 {
padding-bottom: 3px;
border-bottom: solid 1px var(--cc70);
}

.underline02 {
padding-bottom: 3px;
border-bottom: dotted 2px var(--cc70);
}

/* ----------------------------------------- 色 ----------------------------------------- */
.c-cc {
color: var(--cc);
}
.c-2cc {
color: var(--2cc);
}
.c-3cc {
color: var(--3cc);
}
.c-4cc {
color: var(--4cc);
}
.c-bcg {
color: var(--bcg);
}
.c-group-cc {
color: #005897;
}
.c-white {
color: #FFFFFF !important;
}

/* ----------------------------------------- 背景色 ----------------------------------------- */
.bgc-c {
background-color: var(--cc);
}
.bgc-cc3 {
background-color: var(--cc3);
}
.bgc-w {
background-color: #FFFFFF;
}


/* -----------------------------------------  線 ----------------------------------------- */


/* 蛍光マーカー */
/* 行ごとに複製される蛍光マーカー */
.marker {
  /* 可変パラメータ */
  --marker-thickness: 0.5em;   /* 下側の塗り太さ */
  --marker-x: 0.2em;           /* 左右はみ出し量 */
  --marker-offset: 0.15em;     /* 下方向オフセット */

  /* ↓ フォールバックを入れる（--marker-color が無ければ --cc30、さらに無ければ色コード） */
  background-image: linear-gradient(
    to bottom,
    transparent calc(100% - var(--marker-thickness)),
    var(--marker-color, var(--marker-color-line, #fff59d)) 0
  );
  background-repeat: no-repeat;

  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;

  padding-left:  var(--marker-x);
  padding-right: var(--marker-x);
  padding-bottom: var(--marker-offset);
  padding-top: 0.02em;
}

/* カラー・モディファイア（上書きは“変数だけ”） */
.marker-cc30  { --marker-color: var(--cc30); }
.marker-2cc20 { --marker-color: var(--2cc20); }
.marker-3cc20 { --marker-color: var(--3cc20); }
.marker-4cc20 { --marker-color: var(--4cc20); }
.marker-5cc20 { --marker-color: var(--5cc20); }

/* 例：変数が未定義なら :root で用意しておく */
:root{
  --marker-color-line:  #fff59d;
  /* --2cc30, --3cc30 ... も必要なら定義 */
}



/* テキスト線 */
.bbd1-cc {
text-decoration: underline; /* 下線を追加 */
text-decoration-style: dashed; /* 下線を点線に */
text-decoration-color: var(--cc); /* 下線の色を指定 */
}
.bbd1-2cc {
text-decoration: underline;
text-decoration-style: dashed;
text-decoration-color: var(--2cc);
}
.bbd1-3cc {
text-decoration: underline;
text-decoration-style: dashed;
text-decoration-color: var(--3cc);
}
.bbd1-4cc {
text-decoration: underline;
text-decoration-style: dashed;
text-decoration-color: var(--4cc);
}
.bbd1-bcg {
text-decoration: underline;
text-decoration-style: dashed;
text-decoration-color: var(--bcg);
}
.bbd1-2bc {
text-decoration: underline;
text-decoration-style: dashed;
text-decoration-color: var(--2bc);
}

/* テキスト下線の太さを変える場合は、下記にする必要がある*/
.bbd2-cc {
position: relative;
display: inline-block;
}
.bbd2-cc::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    border-bottom: 2px dashed var(--cc);
}

.bbd2-2cc {
position: relative;
display: inline-block;
}
.bbd2-2cc::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    border-bottom: 2px dashed var(--2cc);
}

.bbd2-3cc {
position: relative;
display: inline-block;
}
.bbd2-3cc::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    border-bottom: 2px dashed var(--3cc);
}

.bbd2-4cc {
position: relative;
display: inline-block;
}
.bbd2-4cc::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    border-bottom: 2px dashed var(--4cc);
}

.bbd2-bcg {
position: relative;
display: inline-block;
}
.bbd2-bcg::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    border-bottom: 2px dashed var(--bcg);
}



.bts1-g {
border-top: solid 1px #E1E1E1;
}
.bbs1-g {
border-bottom: solid 1px #E1E1E1;
}

/* 区切り線 */
.hr01 {
width: 70%;
height: 1px;
border: none;
border-top: solid 1px #EAEAEA;
margin: 50px 15%;
}


/*画像枠*/
.pbs1-g {
border: solid 1px #AAAAAA;
}

/* -----------------------------------------  影 ----------------------------------------- */

.t-shadow1127 {
	text-shadow: 1px 1px 2px rgba(0,0,0,0.7);
}
.t-shadow1125 {
	text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}
.t-shadow1146 {
	text-shadow: 1px 1px 4px rgba(0,0,0,0.6);
}
.t-shadow1143 {
	text-shadow: 1px 1px 4px rgba(0,0,0,0.3);
}
.t-shadow2243 {
	text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.shadow1123 {
	box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}
.shadow1146 {
	box-shadow: 1px 1px 4px rgba(0,0,0,0.6);
}
.shadow1166 {
	box-shadow: 1px 1px 6px rgba(0,0,0,0.6);
}
.shadow2243 {
	box-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}
.shadow3353 {
	box-shadow: 3px 3px 5px rgba(0,0,0,0.3);
}


/* -----------------------------------------  角丸 ----------------------------------------- */
.radius0 {
	border-radius: 0px;
}
.radius2 {
	border-radius: 2px;
}
.radius3 {
	border-radius: 3px;
}
.radius4 {
	border-radius: 4px;
}
.radius5 {
	border-radius: 5px;
}
.radius6 {
	border-radius: 6px;
}
.radius8 {
	border-radius: 8px;
}
.radius10 {
	border-radius: 10px;
}
.radius15 {
	border-radius: 15px;
}
.radius20 {
	border-radius: 20px;
}
.radius-l10-r10 {
	border-bottom-right-radius: 10px;
	border-bottom-left-radius: 10px;
}


/* -----------------------------------------  ボタン ----------------------------------------- */


/* =============== 汎用ボタン 2025-09-01 =============== */

/*
<div class="button-center">
    <a href="<?php echo esc_url( home_url() ); ?>" class="btn-arrow_w2cc">
        <span class="btn-text">トップページへ</span>
        <span class="btn-circle"><span class="arrow">→</span></span>
    </a>
</div>
*/

/* ポジション ==================== */
.button-center {
text-align: center;
padding: 20px 0;
}
.button-left {
text-align: left;
padding: 20px 0;
}
.button-right {
text-align: right;
padding: 20px 0;
}

/* 右側正円矢印 色付き ==================== */
/*
リンク効果がかちあった時は
btn-arrow を付与して
例：<a href="<?php echo esc_url( home_url('/inquiry_form') ); ?>" class="btn-arrow btn-arrow_w2cc">
勝っている方のクラス名末尾に　:not(.btn-arrow) を追加
例：.page-inquiry .content-wrap .body-box a:hover:not(.btn-arrow)
*/
.btn-arrow_wcc,
.btn-arrow_w2cc,
.btn-arrow_w3cc,
.btn-arrow_w4cc,
.btn-arrow_w5cc {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 0.6em 1em 0.6em 1.4em;
	text-decoration: none;
	font-size: 1.1rem;
	font-weight: 500;
	letter-spacing: .1em;
	border-radius: 30px;
	background-color: rgba(255,255,255,0.00);
	transition: background-color 0.3s ease;
}
.btn-arrow_wcc {
  color: var(--cc);
  border: solid 1px var(--cc);
}
.btn-arrow_w2cc {
  color: var(--2cc);
  border: solid 1px var(--2cc);
}
.btn-arrow_3wcc {
  color: var(--3cc);
  border: solid 1px var(--3cc);
}
.btn-arrow_w4cc {
  color: var(--4cc);
  border: solid 1px var(--4cc);
}
.btn-arrow_w5cc {
  color: var(--5cc);
  border: solid 1px var(--5cc);
}
.btn-arrow_wcc .arrow,
.btn-arrow_w2cc .arrow,
.btn-arrow_w3cc .arrow,
.btn-arrow_w4cc .arrow,
.btn-arrow_w5cc .arrow {
  font-size: 1.2rem;
  line-height: 1;
}
.btn-arrow_wcc:hover .btn-circle,
.btn-arrow_w2cc:hover .btn-circle,
.btn-arrow_w3cc:hover .btn-circle,
.btn-arrow_w4cc:hover .btn-circle,
.btn-arrow_5wcc:hover .btn-circle {
  transform: translateX(5px); /* 矢印が右にスッと動く */
}
.btn-arrow_wcc .btn-circle,
.btn-arrow_w2cc .btn-circle,
.btn-arrow_w3cc .btn-circle,
.btn-arrow_w4cc .btn-circle,
.btn-arrow_w5cc .btn-circle {
  color: #fff;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
}
.btn-arrow_wcc .btn-circle {
  background-color: var(--cc);
}
.btn-arrow_w2cc .btn-circle {
  background-color: var(--2cc);
}
.btn-arrow_w3cc .btn-circle {
  background-color: var(--3cc);
}
.btn-arrow_w4cc .btn-circle {
  background-color: var(--4cc);
}
.btn-arrow_w5cc .btn-circle {
  background-color: var(--5cc);
}
.btn-arrow_wcc:hover,
.btn-arrow_w2cc:hover,
.btn-arrow_w3cc:hover,
.btn-arrow_w4cc:hover,
.btn-arrow_w5cc:hover{
color: #fff;
}
.btn-arrow_wcc:hover {
border: solid 1px rgba(255,255,255,0.00);
background-color: var(--cc);
}
.btn-arrow_w2cc:hover {
border: solid 1px rgba(255,255,255,0.00);
background-color: var(--2cc);
}
.btn-arrow_3wcc:hover {
border: solid 1px rgba(255,255,255,0.00);
background-color: var(--3cc);
}
.btn-arrow_w4cc:hover {
border: solid 1px rgba(255,255,255,0.00);
background-color: var(--4cc);
}
.btn-arrow_w5cc:hover {
border: solid 1px rgba(255,255,255,0.00);
background-color: var(--5cc);
}

/* 右側正円矢印 ベタ上 白ヌキボタン ==================== */
.btn-arrow_cc,
.btn-arrow_2cc,
.btn-arrow_3cc,
.btn-arrow_4cc,
.btn-arrow_5cc {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0.6em 1em 0.6em 1.4em;
  color: #fff;
  text-decoration: none;
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: .1em;
  border: solid 1px #fff;
  border-radius: 30px;
  background-color: rgba(255,255,255,0.00);
  transition: background-color 0.3s ease;
}
.btn-arrow_cc .arrow,
.btn-arrow_2cc .arrow,
.btn-arrow_3cc .arrow,
.btn-arrow_4cc .arrow,
.btn-arrow_5cc .arrow {
  font-size: 1.2rem;
  line-height: 1;
}
.btn-arrow_cc:hover .btn-circle,
.btn-arrow_2cc:hover .btn-circle,
.btn-arrow_3cc:hover .btn-circle,
.btn-arrow_4cc:hover .btn-circle,
.btn-arrow_5cc:hover .btn-circle {
  transform: translateX(5px); /* 矢印が右にスッと動く */
}

.btn-arrow_cc .btn-circle,
.btn-arrow_2cc .btn-circle,
.btn-arrow_3cc .btn-circle,
.btn-arrow_4cc .btn-circle,
.btn-arrow_5cc .btn-circle {
  background-color: #fff;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
}
.btn-arrow_cc .btn-circle {
  color: var(--cc);
}
.btn-arrow_2cc .btn-circle {
  color: var(--2cc);
}
.btn-arrow_3cc .btn-circle {
  color: var(--3cc);
}
.btn-arrow_4cc .btn-circle {
  color: var(--4cc);
}
.btn-arrow_5cc .btn-circle {
  color: var(--5cc);
}
.btn-arrow_cc:hover {
color: var(--cc);
border: solid 1px var(--cc);
background-color: rgba(255,255,255,1.00);
}
.btn-arrow_2cc:hover {
color: var(--2cc);
border: solid 1px var(--2cc);
background-color: rgba(255,255,255,1.00);
}
.btn-arrow_3cc:hover {
color: var(--3cc);
border: solid 1px var(--3cc);
background-color: rgba(255,255,255,1.00);
}
.btn-arrow_4cc:hover {
color: var(--4cc);
border: solid 1px var(--4cc);
background-color: rgba(255,255,255,1.00);
}
.btn-arrow_5cc:hover {
color: var(--5cc);
border: solid 1px var(--5cc);
background-color: rgba(255,255,255,1.00);
}

/* === 共通ベース（両系統まとめて拾う） ==================== */
.btn-arrow_wcc, .btn-arrow_w2cc, .btn-arrow_w3cc, .btn-arrow_w4cc, .btn-arrow_w5cc,
.btn-arrow_cc,  .btn-arrow_2cc,  .btn-arrow_3cc,  .btn-arrow_4cc,  .btn-arrow_5cc {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;   /* ← 全体は左揃え */
  gap: 10px;
  padding: .6em 1em .6em 1.4em;
  text-decoration: none;
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: .05em;
  line-height: 1.2em;
  border-radius: 30px;
  background-color: transparent;
  transition: background-color .3s ease, color .3s ease;
  box-sizing: border-box;
  max-width: 100%; /* 狭い幅で崩れ防止 */
}

/* === テキスト部分（左寄せ＆可変幅） ==================== */
.btn-arrow_wcc .btn-text,
.btn-arrow_w2cc .btn-text,
.btn-arrow_w3cc .btn-text,
.btn-arrow_w4cc .btn-text,
.btn-arrow_w5cc .btn-text,
.btn-arrow_cc  .btn-text,
.btn-arrow_2cc .btn-text,
.btn-arrow_3cc .btn-text,
.btn-arrow_4cc .btn-text,
.btn-arrow_5cc .btn-text {
  flex: 1;            /* ← 空いた分を全部取る */
  text-align: left;   /* ← 左寄せ */
  white-space: normal;/* ← 折り返しを許可 */
  overflow-wrap: break-word;
}

/* === 円は正円を厳守 ==================== */
.btn-arrow_wcc .btn-circle, .btn-arrow_w2cc .btn-circle, .btn-arrow_w3cc .btn-circle,
.btn-arrow_w4cc .btn-circle, .btn-arrow_w5cc .btn-circle,
.btn-arrow_cc  .btn-circle, .btn-arrow_2cc  .btn-circle, .btn-arrow_3cc  .btn-circle,
.btn-arrow_4cc .btn-circle, .btn-arrow_5cc  .btn-circle {
  flex: 0 0 34px;       /* 縮まず広がらず固定 */
  inline-size: 34px;    /* 幅 */
  aspect-ratio: 1 / 1;  /* 正方形保証 → border-radiusで正円 */
  border-radius: 50%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .3s ease;
}

/* === 矢印スライド ==================== */
.btn-arrow_wcc:hover .btn-circle,
.btn-arrow_w2cc:hover .btn-circle,
.btn-arrow_w3cc:hover .btn-circle,
.btn-arrow_w4cc:hover .btn-circle,
.btn-arrow_w5cc:hover .btn-circle,
.btn-arrow_cc:hover  .btn-circle,
.btn-arrow_2cc:hover .btn-circle,
.btn-arrow_3cc:hover .btn-circle,
.btn-arrow_4cc:hover .btn-circle,
.btn-arrow_5cc:hover .btn-circle {
  transform: translateX(5px);
}

/* === 狭幅対応 ==================== */
@media (max-width: 480px) {
  .btn-arrow_wcc, .btn-arrow_w2cc, .btn-arrow_w3cc, .btn-arrow_w4cc, .btn-arrow_w5cc,
  .btn-arrow_cc,  .btn-arrow_2cc,  .btn-arrow_3cc,  .btn-arrow_4cc,  .btn-arrow_5cc {
    gap: 8px;
    padding: .5em .9em .5em 1.1em;
  }
}



/* =============== 汎用ボタン 2025-09-01 ここまで =============== */



/* ---------- ボタンの基本スタイル ---------- */
.btn_position {
width: 100%;
text-align: center;
padding-bottom: 30px;
}
.btn_position2 {
width: 96%;
text-align: center;
padding-bottom: 20px;
margin: 0 2%;
}
.btn, a.btn, button.btn {
font-size: 1.2em;
line-height: 1.2em;
/*アニメーションの起点とするためrelativeを指定*/
position: relative;
overflow: hidden;
/*ボタンの形状*/
min-width: 240px;
text-decoration: none;
display: inline-block;
border: 1px solid #555;/* ボーダーの色と太さ */
padding: 1em 2em;
text-align: center;
outline: none;
/*アニメーションの指定*/   
transition: all 0.3s ease;
}
@media (max-width: 1199px) {
.btn, a.btn, button.btn {
padding: 1em 1.2em;
}
}
/*ボタン内spanの形状*/
.btn span {
  position: relative;
  z-index: 3;/*z-indexの数値をあげて文字を背景よりも手前に表示*/
  color:#fff;
}
.btn:hover span{
  color:#fff ;
}

/*形状・カラー*/
/*ボタン01*/
.btn01 {
border-radius: 1.8em;
background-color: #0596D9;
border: 4px solid var(--2bc) !important;
box-shadow: 3px 3px 5px 5px rgba(0,0,0,0.2);
}
.btn01:hover {
box-shadow: 1px 1px 2px 2px rgba(0,0,0,0.2);
}

/*ボタン02*/
.btn02 {
border-radius: 1.8em;
background-color: #0596D9;
border: none !important;
}

/*ボタン03*/
.btn03 {
border-radius: 1.8em;
background-color: var(--2cc);
border: none !important;
}
.btn03.bgch:hover {
background-color: var(--3cc);
}

/*ボタン04*/
.btn04 {
border-radius: 1.8em;
background-color: #009886;
border: 4px solid var(--bc) !important;
box-shadow: 3px 3px 5px 5px rgba(0,0,0,0.2);
}
.btn04:hover {
box-shadow: 1px 1px 2px 2px rgba(0,0,0,0.2);
}

/*ボタン05*/
a.btn05 {
color: var(--2cc);
/* border-radius: 1.8em; */
border-radius: 10px;
min-width: 280px;
border: solid 1px var(--2cc);
background: #fff;
transition: all 0.3s ease;
}
a.btn05 span {
font-size: 1em;
color: var(--2cc);
transition: all 0.6s ease;
}

/*ボタン06*/
a.btn06 {
color: var(--2bc);
/* border-radius: 1.8em; border-radius: 10px; */
border-radius: 1.8em;
min-width: 280px;
border: solid 1px var(--2bc);
background: #fff;
transition: all 0.3s ease;
}
a.btn06 span {
font-size: 1em;
color: var(--2bc);
transition: all 0.6s ease;
}


/*背景アクション*/
/*== 背景が流れるボタン（オレンジ　左から右） */
.bgleft:before {
  content: '';
    /*絶対配置で位置を指定*/
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
    /*色や形状*/
  background: var(--co02);  /*背景色*/
  width: 100%;
  height: 100%;
    /*アニメーション*/
  transition: transform .6s cubic-bezier(0.8, 0, 0.2, 1) 0s;
  transform: scale(0, 1);
  transform-origin: right top;
}
/*hoverした際の形状*/
.bgleft:hover:before{
  transform-origin:left top;
  transform:scale(1, 1);
}
/*== 背景が流れるボタン（青→オレンジ　左から右）ここまで */

/*== 背景が流れるボタン（コーポレートカラー2　左から右） */
.bgleft2:before {
  content: '';
    /*絶対配置で位置を指定*/
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
    /*色や形状*/
    color: #fff;
  background: var(--2cc);  /*背景色*/
  width: 100%;
  height: 100%;
    /*アニメーション*/
  transition: transform .6s cubic-bezier(0.8, 0, 0.2, 1) 0s;
  transform: scale(0, 1);
  transform-origin: right top;
}
/*hoverした際の形状*/
.bgleft2:hover:before{
  transform-origin:left top;
  transform:scale(1, 1);
}
/*== 背景が流れるボタン（コーポレートカラー2　左から右）ここまで */

/*== 背景が流れるボタン（コーポレートカラー3　左から右） */
.bgleft3:before {
  content: '';
    /*絶対配置で位置を指定*/
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
    /*色や形状*/
  background: var(--3cc);  /*背景色*/
  width: 100%;
  height: 100%;
    /*アニメーション*/
  transition: transform .6s cubic-bezier(0.8, 0, 0.2, 1) 0s;
  transform: scale(0, 1);
  transform-origin: right top;
}
/*hoverした際の形状*/
.bgleft3:hover:before{
  transform-origin:left top;
  transform:scale(1, 1);
}
/*== 背景が流れるボタン（コーポレートカラー3　左から右）ここまで */

/*== 背景が流れるボタン（ bc （緑）カラー　左から右） */
.bgleft4:before {
  content: '';
    /*絶対配置で位置を指定*/
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
    /*色や形状*/
  background: var(--bc);  /*背景色*/
  width: 100%;
  height: 100%;
    /*アニメーション*/
  transition: transform .6s cubic-bezier(0.8, 0, 0.2, 1) 0s;
  transform: scale(0, 1);
  transform-origin: right top;
}
/*hoverした際の形状*/
.bgleft4:hover:before{
  transform-origin:left top;
  transform:scale(1, 1);
}
/*== 背景が流れるボタン（ 2bc （緑）カラー　左から右）ここまで */

/*== 背景が流れるボタン（ 2bc （青）カラー　左から右） */
.bgleft5:before {
  content: '';
    /*絶対配置で位置を指定*/
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
    /*色や形状*/
  background: var(--2bc);  /*背景色*/
  width: 100%;
  height: 100%;
    /*アニメーション*/
  transition: transform .6s cubic-bezier(0.8, 0, 0.2, 1) 0s;
  transform: scale(0, 1);
  transform-origin: right top;
}
/*hoverした際の形状*/
.bgleft5:hover:before{
  transform-origin:left top;
  transform:scale(1, 1);
}
/*== 背景が流れるボタン（ 2bc （青）カラー　左から右）ここまで */



/*ボタン02*/
a.btn-flat {
overflow: hidden;
padding: 1em 1.8em;
color: #fff;
border-radius: 1.8em;
background: var(--cc50);
transition: all 0.3s ease;
}
a.btn-flat span {
  position: relative;
  z-index: 1;
}
a.btn-flat:hover {
transition: all 0.3s ease;
}

a.btn-flat:before {
  position: absolute;
  top: 0;
  left: calc(-100% + 0px);
  width: 100%;
  height: 100%;
  content: '';
  -webkit-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
  
  -webkit-transform: translateX(50%) translateY(0);
  transform: translateX(50%) translateY(0);
  
  background: var(--cc70);
}

a.btn-flat:after {
  position: absolute;
  top: 0;
  right: calc(-100% + 0px);
  width: 100%;
  height: 100%;
  content: '';
  -webkit-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
  
  -webkit-transform: translateX(-50%) translateY(0);
  transform: translateX(-50%) translateY(0);

  background: var(--cc70);
}

a.btn-flat:hover:before {
  -webkit-transform: translateX(0) translateY(0);
  transform: translateX(0) translateY(0);
}

a.btn-flat:hover:after {
  -webkit-transform: translateX(0) translateY(0);
  transform: translateX(0) translateY(0);
}

/*小ボタン01*/
a.btn-flat_mini {
overflow: hidden;
width: auto;
padding: 0.7em 1.8em;
color: #fff;
border-radius: 1.5em;
border: solid 1px #fff;
transition: all 0.3s ease;
}
a.btn-flat_mini:hover {
color: var(--cc80);
background-color: #fff;
transition: all 0.3s ease;
}

/* -----------------------------------------　テーブル　---------------------------------------- */

table{
  border-collapse: collapse;
  width: 100%;
}
p.table_note01 {
font-size: 0.9em;
line-height: 1.5em;
padding-left:1em;
text-indent:-1em;
padding-bottom: 5px;
margin-bottom: 0px;
}

.table_01 {
  border-collapse: separate;
  border-spacing: 0px 25px;
}
.table_01 th {
color: var(--4cc);
font-size: 1em;
letter-spacing: .15em;
font-weight: 600;
line-height: 1.5em;
text-align: left;
width: 28%;
min-width: 115px;
border-bottom: solid 3px var(--4cc);
padding: 0 0 3px 0;
}
.table_01 td {
color: var(--cg02);
text-align: left;
font-size: 0.9em;
line-height: 1.5em;
padding: 0 0 4px 20px;
border-bottom: dotted 1px var(--cg02);
}
.table_01 td img {
width: 100%;
border: solid 1px #B8B8B8;
margin-bottom: 10px;
}



@media screen and (max-width: 679px) {
.table_01 {
    width: 100%;
  }
  table.table_01 th,
  table.table_01 td {
    display: block;
    width: 100%;
  }
   table.table_01 th {
   padding-bottom: 2px;
   }
  .table_01 tr:last-child {
  }

  table.table_01 th {
  margin-bottom: 10px;
  }
  
  .table_01 td {
color: var(--cg02);
text-align: left;
font-size: 0.9em;
line-height: 1.5em;
padding: 0 0 2px 20px;
border-bottom: none;
}


.base_container .table_title {
color: var(--cc);
text-align: center;
font-size: 1.4em;
line-height: 1.1em;
padding: 5px 0 ;
margin: 0;
}
.table-wrap_02 {
box-sizing: border-box;
width: 100%;
overflow-x: scroll;
border-top: solid 2px var(--cg05);
border-right: solid 2px var(--cg05);
border-bottom: solid 2px var(--cg05);
border-left: solid 2px var(--cg05);
margin-bottom: 20px;
}

.table_02 {
width: 100%;
}
} /* max-width: 640px */

@media screen and (max-width: 579px) {
.table_01 td {
font-size: 1em;
}
}

@media screen and (max-width: 1099px) {
.table-wrap_02 {
border-right: dashed 3px var(--cc50);
}
}

.table_02 th, .table_02 td {
border: solid 1px var(--cg07);
}
.table_02 th:first-child, .table_02 td:first-child {
border-left: none;
}

.table_02 td:first-child {
box-sizing: border-box;
min-width: 170px;
color: var(--cc);
text-align: left;
background: var(--cc10);
padding: 10px 0 10px 13px;
}

.table_02 .thead th {
min-width: 70px;
color: #FFF;
font-size: var(--f4);
font-weight: normal;
text-align: center;
background-color: var(--cc70);
padding: 5px 0;
margin: 0px;
}
.table_02 td {
width: 100px;
color: var(--bcg);
font-size: var(--f5);
text-align: center;
padding: 10px 5px;
}
.table_02 .thead_fixed-left {
position: sticky;
left: 0;
border-right: solid 2px var(--cg05);
  }
.table_02 tr:hover td {
background-color: var(--cc20);
}


@media screen and (max-width: 640px) {

.table-wrap_02 {
border-right: solid 2px var(--cg05);
}
  .table_02 {
    width: 100%;
  }
  .table_02 .thead {
    display: none;
  }
  .table_02 tr {
    width: 100%;
  }
  .table_02 td {
    display: block;
    text-align: center;
    width: 100%;
  }
.table_02 tr:hover td {
background-color: transparent;
}
.table_02 tr:hover td:first-child{
background: var(--cc70);
}
  .table_02 td:first-child {
    background: var(--cc70);
    color: #fff;
    font-weight: bold;
    text-align: center;
  }
  .table_02 td:before {
    content: attr(data-label);
    float: left;
    color: var(--cc70);
    font-weight: bold;
    padding-left: 15px;
    margin-right: 10px;
  }
.table_02 td:last-child {
margin-bottom: 10px;
}

} /* max-width: 640px */




/*-------------------- GoogleMap--------------------*/

.google-map_frame {
    width: 100%;
    padding: 0 0 0 0;
}
.google-map_frame .google-map, .google-map_frame100 .google-map {
height: 660px;
border: solid 1px var(--cg05);
border-radius: 10px;
margin-bottom: 30px;
}

/* GoogleMap アイコンの吹き出し内 */
.google-map_frame .speech_bubble {
text-align: center;
}
.google-map_frame .speech_bubble img {
padding-bottom: 10px;
}

.google-map_frame .google-map_info {
padding: 0 3% 20px 3%;
}
.google-map_frame .google-map_info h3 {
text-align: center;
}
.google-map_frame .google-map_info p {
text-align: center;
padding-bottom: 15px;
}

/* マップのピンのエフェクト 波紋*/
/* ピンのラッパー */
.google-map-pin-wrap {
  position: relative;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ピン本体 */
.google-map-pin img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  position: relative;
  z-index: 2;
}

/* 波紋 */
.google-map-ripple {
  position: absolute;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(46, 175, 94, 0.35); /* 事務所カラーの緑系 (例: var(--5cc)) */
  z-index: 1;
  animation: ripple 3.5s infinite ease-out;
}

@keyframes ripple {
  0% {
    transform: scale(0.5);
    opacity: 0.8;
  }
  100% {
    transform: scale(3.0);
    opacity: 0;
  }
}


/*-------------------- You tube レスポンシブ対応 --------------------*/
.wp-block-embed__wrapper .youtube {
position: relative;
width: 100%;
padding-top: 56.25%;
}
.wp-block-embed__wrapper .youtube iframe{
position: absolute;
top: 0;
right: 0;
width: 100% !important;
height: 100% !important;
}


/*-------------------- Wordpress ブロック --------------------*/
.wp-block-columns.is-layout-flex {
row-gap: 0.5em;
}
ul.wp-block-list, ol.wp-block-list {
padding: 0 0 0 0;
margin: 25px 0 20px 30px;
}
ul.wp-block-list li, ol.wp-block-list li {
line-height: 1.6em;
padding: 0 0 15px 0;
}
/* 段落背景を角丸に */
p.has-background {
border-radius: 5px;
}

/*-------------------- Wordpress コアブロック --------------------*/
/* 見出し */

/* 項目緑 */
.single_body .is-style-headitem {
color: var(--bc);
font-size: clamp(1.2em, 2vw, 1.4em);
font-weight: 600;
line-height: 1.5em;
letter-spacing: .1em;
border-left: solid 8px var(--bc);
border-bottom: solid 1px var(--bc);
padding: 0 0 0 8px;
margin: 40px 0 15px -10px;
}
/* 項目緑ヌキ */
.single_body .is-style-headitem2 {
color: #fff;
font-size: clamp(1.2em, 2vw, 1.4em);
font-weight: 500;
line-height: 1.5em;
letter-spacing: .1em;
background-color: var(--bc);
padding: 5px 0 5px 10px;
margin: 40px 0 15px -10px;
}
/* 項目緑ヌキ角丸 */
.single_body .is-style-headitem5 {
color: #fff;
font-size: clamp(1.2em, 2vw, 1.4em);
font-weight: 500;
line-height: 1.5em;
letter-spacing: .1em;
background-color: var(--bc);
border-radius: 5px;
padding: 8px 10px 8px 15px;
margin: 40px 0 30px -10px;
}
/* 項目緑フチ */
.single_body .is-style-headitem7 {
color: var(--bc);
font-size: clamp(1.2em, 2vw, 1.4em);
font-weight: 500;
line-height: 1.5em;
letter-spacing: .1em;
border: solid 2px var(--bc);
border-radius: 5px;
padding: 8px 10px 8px 15px;
margin: 40px 0 30px -10px;
}

/* 項目青 */
.single_body .is-style-headitem3 {
color: var(--2bc);
font-size: clamp(1.2em, 2vw, 1.4em);
font-weight: 600;
line-height: 1.5em;
letter-spacing: .1em;
border-left: solid 8px var(--2bc);
border-bottom: solid 1px var(--2bc);
padding: 0 0 0 8px;
margin: 40px 0 15px -10px;
}
/* 項目青ヌキ */
.single_body .is-style-headitem4 {
color: #fff;
font-size: clamp(1.2em, 2vw, 1.4em);
font-weight: 500;
line-height: 1.5em;
letter-spacing: .1em;
background-color: var(--2bc);
padding: 5px 0 5px 10px;
margin: 40px 0 15px -10px;
}
/* 項目青ヌキ角丸 */
.single_body .is-style-headitem6 {
color: #fff;
font-size: clamp(1.2em, 2vw, 1.4em);
font-weight: 500;
line-height: 1.5em;
letter-spacing: .1em;
background-color: var(--2bc);
border-radius: 5px;
padding: 8px 10px 8px 15px;
margin: 40px 0 30px -10px;
}
/* 項目青フチ */
.single_body .is-style-headitem8 {
color: var(--2bc);
font-size: clamp(1.2em, 2vw, 1.4em);
font-weight: 500;
line-height: 1.5em;
letter-spacing: .1em;
border: solid 2px var(--2bc);
border-radius: 5px;
padding: 8px 10px 8px 15px;
margin: 40px 0 30px -10px;
}

/* 項目CC */
.single_body .is-style-headitem9 {
color: var(--2cc);
font-size: clamp(1.2em, 2vw, 1.4em);
font-weight: 600;
line-height: 1.5em;
letter-spacing: .1em;
border-left: solid 8px var(--2cc);
border-bottom: solid 1px var(--2cc);
padding: 0 0 0 8px;
margin: 40px 0 15px -10px;
}
/* 項目CCヌキ */
.single_body .is-style-headitem10 {
color: #fff;
font-size: clamp(1.2em, 2vw, 1.4em);
font-weight: 500;
line-height: 1.5em;
letter-spacing: .1em;
background-color: var(--2cc);
padding: 5px 0 5px 10px;
margin: 40px 0 15px -10px;
}
/* 項目CCヌキ角丸 */
.single_body .is-style-headitem11 {
color: #fff;
font-size: clamp(1.2em, 2vw, 1.4em);
font-weight: 500;
line-height: 1.5em;
letter-spacing: .1em;
background-color: var(--2cc);
border-radius: 5px;
padding: 8px 10px 8px 15px;
margin: 40px 0 30px -10px;
}
/* 項目CCフチ */
.single_body .is-style-headitem12 {
color: var(--2cc);
font-size: clamp(1.2em, 2vw, 1.4em);
font-weight: 500;
line-height: 1.5em;
letter-spacing: .1em;
border: solid 2px var(--2cc);
border-radius: 5px;
padding: 8px 10px 8px 15px;
margin: 40px 0 30px -10px;
}


/* 段落 */

/* 下部点線　赤　 */
.single_body .is-style-bbd1-3cc{
text-decoration: underline;
text-decoration-style: dashed;
text-decoration-color: var(--3cc);
}

/* 白抜き文字　2cc　 */
.is-style-knockout-text01 {
display: inline-block;
color: #fff;
letter-spacing: .1em;
background-color:  var(--2cc);
padding: 0.3em 0.6em 0.2em 0.6em;
border-radius: 0.5em;
}

/* 白抜き文字　3cc　 */
.is-style-knockout-text02 {
display: inline-block;
color: #fff;
letter-spacing: .1em;
background-color:  var(--3cc);
padding: 0.3em 0.6em 0.2em 0.6em;
border-radius: 0.5em;
}

/* 白抜き文字　2bc　 */
.is-style-knockout-text03 {
display: inline-block;
color: #fff;
letter-spacing: .1em;
background-color:  var(--2bc);
padding: 0.3em 0.6em 0.2em 0.6em;
border-radius: 0.5em;
}

/* ドロップキャップ1 緑 */
.is-style-dropcap1::first-letter {
  font-size: 1.4em;
  line-height: 1.2em;
  color: #FFF;
  font-weight: bold;
  margin-right: 10px;
  background-color: var(--bc);
  border-radius: 5px;
  padding: 8px 10px;
}
.is-style-dropcap1 {
  text-indent: -5em;
  padding-left: 5em;
  margin: 0 0 0.5em 0;
}
.is-style-dropcap1::first-line {
    text-indent: 0;
}


/* ドロップキャップ2 CC */
.is-style-dropcap2::first-letter {
  font-size: 1.4em;
  line-height: 1.2em;
  color: #FFF;
  font-weight: bold;
  margin-right: 10px;
  background-color: var(--2cc);
  border-radius: 5px;
  padding: 8px 10px;
}
.is-style-dropcap2 {
  text-indent: -5em;
  padding-left: 5em;
margin: 0 0 0.5em 0;
}
.is-style-dropcap1::first-line {
    text-indent: 0;
}


/* 区切り線 */
/* 点線 */
.single_content-body .wp-block-separator.is-style-dotted-line01 {
border: none;
border-top: 1px dotted var(--bcg5);
width: 100%;
margin: 1.5em auto 2.5em;
}
.single_content-body .wp-block-separator.is-style-dashed-line01 {
border: none;
border-top: 1px dashed var(--bcg7);
width: 100%;
margin: 1.5em auto 2.5em;
}


/* テーブル */
.is-style-table_01 {
  border-collapse: separate;
  border-spacing: 0px 25px;
}
.is-style-table_01 th {
color: var(--4cc);
font-size: 1em;
letter-spacing: .15em;
font-weight: 600;
line-height: 1.5em;
text-align: left;
width: 28%;
min-width: 115px;
border-bottom: solid 3px var(--4cc);
padding: 0 0 3px 0;
}
.is-style-table_01 td {
color: var(--cg02);
text-align: left;
font-size: 0.9em;
line-height: 1.5em;
padding: 0 0 4px 20px;
border-bottom: dotted 1px var(--cg02);
}
.is-style-table_01 td img {
width: 100%;
border: solid 1px #B8B8B8;
margin-bottom: 10px;
}

@media screen and (max-width: 679px) {
.is-style-table_01 {
    width: 100%;
  }
  table.is-style-table_01 th,
  table.is-style-table_01 td {
    display: block;
    width: 100%;
  }
   table.is-style-table_01 th {
   padding-bottom: 2px;
   }
  .is-style-table_01 tr:last-child {
  }

  table.is-style-table_01 th {
  margin-bottom: 10px;
  }
  
.is-style-table_01 td {
color: var(--cg02);
text-align: left;
font-size: 0.9em;
line-height: 1.5em;
padding: 0 0 2px 20px;
border-bottom: none;
}
} /* max-width: 640px */



/* ======================================================================
汎用アニメーション
======================================================================== */

/* 動きのみ css各箇所で調整追加 ========================= */
/* 例： animation: sway5deg 1s ease-in-out infinite alternate; ========================= */

@keyframes sway3deg {
  0% {
    transform: rotate(-3deg);
  }
  100% {
    transform: rotate(3deg);
  }
}

@keyframes sway5deg {
  0% {
    transform: rotate(-5deg);
  }
  100% {
    transform: rotate(5deg);
  }
}

@keyframes sway10deg {
  0% {
    transform: rotate(-10deg);
  }
  100% {
    transform: rotate(10deg);
  }
}

/* スクロールして出てきたら下線が引かれるアニメーション + JS制御 --------------------*/
/* 蛍光ペン風・行ごとに引く（テキストの下に敷く） */
/* 既存 .animated-underline はそのまま（背景アニメは .segmented で無効化済み想定） */
.animated-underline{
  position: relative;
  overflow: visible;
  z-index: 0;
  isolation: isolate;
	--underline-color: var(--2cc20);
	--underline-thickness: 12px;   /* お好みで */
	--underline-offset: 4px;       /* もう少し下げたい時に */
  padding-bottom: calc(var(--underline-thickness) + var(--underline-offset));
}

/* 行ごとの実線 */
.animated-underline__line{
  position: absolute;
  left: 0; top: 0;                 /* JSで上書き */
  height: var(--underline-thickness, 12px);
  /* ★色はCSS変数に完全委譲（JSで上書きしない） */
  background: var(--underline-color); /* ← JSで上書きしない */
  border-radius: 6px;
  transform: scaleX(0.0001);
  transform-origin: left;
  transition: transform 900ms ease-out;
  will-change: transform;
  pointer-events: none;
  z-index: -1;                      /* 文字の背面 */
}
.animated-underline__line.on{ transform: scaleX(1); }



/*-------------------- アニメーション プロパティ参考 --------------------*/
.glowAnime01 {
animation-name:glow_anime_01;          /* 使用するアニメーション名 */
animation-delay: 1.5s;                   /* 開始時間*/
animation-duration: 1s;                /* アニメーション時間*/
animation-timing-function: ease-out;   /* 進行*/
animation-iteration-count: 1;          /* 回数（無制限：infinite）*/
animation-fill-mode: forwards;         /* アニメーション後のスタイル*/
}
@keyframes glow_anime_01{
	0% { opacity:1; text-shadow: 0 0 0 #fff,0 0 0 #fff;}
	50% { opacity:1;text-shadow: 0 0 10px #fff,0 0 15px #fff; }
	100% { opacity:1; text-shadow: 0 0 0 #fff,0 0 0 #fff;}
}


/*======================================================================
動くWEBデザイン
========================================================================*/

/*======================================================================
テキスト
========================================================================*/

/* ========= 1文字ずつ出現させるためのCSS =============== */
/* ★トップページイントロに使用 */
.eachTextAnime span {opacity: 0;}
.eachTextAnime.appeartext span{ animation:text_anime_on 2s ease-out forwards; }
@keyframes text_anime_on {
  0% {opacity:0;}
  100% {opacity:1;}
}

/*========= 光りながら出現 ===============*/
.glowAnime span{opacity: 0;}
/*アニメーションで透過を0から1に変化させtext-shadowをつける*/
.glowAnime.glow span{ animation:glow_anime_on 1s ease-out forwards; }
@keyframes glow_anime_on{
	0% { opacity:0; text-shadow: 0 0 0 #fff,0 0 0 #fff;}
	50% { opacity:1;text-shadow: 0 0 10px #fff,0 0 15px #fff; }
	100% { opacity:1; text-shadow: 0 0 0 #fff,0 0 0 #fff;}
}

/*========= テキストの回転 ===============*/
.rollAnime.roll span {
    transition-property: opacity,transform;
    transform: rotateY(360deg);
    transition: all .8s cubic-bezier(.77,0,.175,1);
    transition-timing-function: cubic-bezier(.77,0,.175,1);
    display: inline-block;
}



/* ======================================================================
パーツ
======================================================================== */

/* フェードアニメーションを加えたい箇所に、下記の各クラス名内のフェード基本名の後に 『 Trigger 』 を付け加えて class=" " 内に配置 例：class=" fadeInTrigger-05s "  */
/* 新設する場合は finework_theme.js に登録が必要 */

/*========= フェードイン ===============*/
.fadeIn {
animation-name:fadeInAnime;
animation-duration:1s;
animation-delay: 0.5s;
animation-fill-mode:forwards;
animation-timing-function: ease-out; 
opacity:0;
}
.fadeIn-05s {
animation-name:fadeInAnime;
animation-duration:1s;
animation-delay: 1s;
animation-fill-mode:forwards;
animation-timing-function: ease-out; 
opacity:0;
}
.fadeIn-1s {
animation-name:fadeInAnime;
animation-duration:1s;
animation-delay: 1.5s;
animation-fill-mode:forwards;
animation-timing-function: ease-out; 
opacity:0;
}
.fadeIn-2s {
animation-name:fadeInAnime;
animation-duration:1s;
animation-delay: 2.5s;
animation-fill-mode:forwards;
animation-timing-function: ease-out; 
opacity:0;
}

@keyframes fadeInAnime{
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}
/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.fadeInTrigger{
    opacity: 0;
}

/*========= フェードアップ ===============*/
.fadeUp{
animation-name:fadeUpAnime;
animation-duration:1s;
animation-delay: 0.5s;
animation-fill-mode:forwards;
animation-timing-function: ease-out; 
opacity:0;
}
.fadeUp-05s{
animation-name:fadeUpAnime;
animation-duration:1s;
animation-delay: 1.0s;
animation-fill-mode:forwards;
animation-timing-function: ease-out; 
opacity:0;
}
.fadeUp-1s{
animation-name:fadeUpAnime;
animation-duration:1s;
animation-delay: 1.5s;
animation-fill-mode:forwards;
animation-timing-function: ease-out; 
opacity:0;
}
.fadeUp-2s{
animation-name:fadeUpAnime;
animation-duration:1s;
animation-delay: 2.5s;
animation-fill-mode:forwards;
animation-timing-function: ease-out; 
opacity:0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
  transform: translateY(100px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}
/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.fadeUpTrigger {
    opacity: 0;
}

/*========= フェードダウン ===============*/
.fadeDown {
animation-name:fadeDownAnime;
animation-duration:1s;
animation-delay: 0.5s;
animation-fill-mode:forwards;
animation-timing-function: ease-out; 
opacity:0;
}
.fadeDown-05s {
animation-name:fadeDownAnime;
animation-duration:1s;
animation-delay: 1s;
animation-fill-mode:forwards;
animation-timing-function: ease-out; 
opacity:0;
}
.fadeDown-1s {
animation-name:fadeDownAnime;
animation-duration:1s;
animation-delay: 1.5s;
animation-fill-mode:forwards;
animation-timing-function: ease-out; 
opacity:0;
}
.fadeDown-2s {
animation-name:fadeDownAnime;
animation-duration:1s;
animation-delay: 2.5s;
animation-fill-mode:forwards;
animation-timing-function: ease-out; 
opacity:0;
}

@keyframes fadeDownAnime {
  from {
    opacity: 0;
	transform: translateY(-100px);
  }
  to {
    opacity: 1;
	transform: translateY(0);
  }
}

.fadeDown-300px {
animation-name:fadeDownAnime-300px;
animation-duration:1s;
animation-delay: 0.5s;
animation-fill-mode:forwards;
animation-timing-function: ease-out; 
opacity:0;
}

@keyframes fadeDownAnime-300px {
  from {
    opacity: 0;
	transform: translateY(-300px);
  }
  to {
    opacity: 1;
	transform: translateY(0);
  }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.fadeDownTrigger{
    opacity: 0;
}

/*========= フェードレフト ===============*/
.fadeLeft {
animation-name:fadeLeftAnime;
animation-duration:1s;
animation-delay: 0.5s;
animation-fill-mode:forwards;
animation-timing-function: ease-out; 
opacity:0;
}
.fadeLeft-05s {
animation-name:fadeLeftAnime;
animation-duration:1s;
animation-delay: 1s;
animation-fill-mode:forwards;
animation-timing-function: ease-out; 
opacity:0;
}
.fadeLeft-1s {
animation-name:fadeLeftAnime;
animation-duration:1s;
animation-delay: 1.5s;
animation-fill-mode:forwards;
animation-timing-function: ease-out; 
opacity:0;
}
.fadeLeft-2s {
animation-name:fadeLeftAnime;
animation-duration:1s;
animation-delay: 2.5s;
animation-fill-mode:forwards;
animation-timing-function: ease-out; 
opacity:0;
}

@keyframes fadeLeftAnime {
  from {
    opacity: 0;
	transform: translateX(-200px);
    animation-timing-function: ease-out; 
  }

  to {
    opacity: 1;
	transform: translateX(0);
  }
}
/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.fadeLeftTrigger {
    opacity: 0;
}

/*========= フェードライト ===============*/

.fadeRight {
animation-name:fadeRightAnime;
animation-duration:1s;
animation-delay: 0.5s;
animation-fill-mode:forwards;
animation-timing-function: ease-out; 
opacity:0;
}
.fadeRight-05s {
animation-name:fadeRightAnime;
animation-duration:1s;
animation-delay: 1s;
animation-fill-mode:forwards;
animation-timing-function: ease-out; 
opacity:0;
}
.fadeRight-1s{
animation-name:fadeRightAnime;
animation-duration:1s;
animation-delay: 1.5s;
animation-fill-mode:forwards;
animation-timing-function: ease-out; 
opacity:0;
}
.fadeRight-2s{
animation-name:fadeRightAnime;
animation-duration:1s;
animation-delay: 2.5s;
animation-fill-mode:forwards;
animation-timing-function: ease-out; 
opacity:0;
}

@keyframes fadeRightAnime{
  from {
    opacity: 0;
	transform: translateX(200px);
  }

  to {
    opacity: 1;
	transform: translateX(0);
  }
}
/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.fadeRightTrigger{
    opacity: 0;
}




/*========= 回転 ===============*/
/* X 軸（縦へ） */
.rotateX{
	animation-name:rotateXAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
}

@keyframes rotateXAnime{
	from{
		transform: rotateX(0);
		}
	to{
		transform: rotateX(-360deg);
		}
}


/* 　Y 軸（横へ） */
.rotateY{
	animation-name:rotateYAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
}

@keyframes rotateYAnime{
	from{
		transform: rotateY(0);
		}
	to{
		transform: rotateY(-360deg);
		}
}


/* Z 軸（左へ） */
.rotateLeftZ{
	animation-name:rotateLeftZAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
}

@keyframes rotateLeftZAnime{
	from{
		transform: rotateZ(0);
		}
	to{
		transform: rotateZ(-360deg);
		}
}


/* Z 軸（右へ） */
.rotateRightZ{
	animation-name:rotateRightZAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
}

@keyframes rotateRightZAnime{
	from{
		transform: rotateZ(0);
		}
	to{
		transform: rotateZ(360deg);
		}
}


/*--------------------
reCAPTCHA for MW WP Form による
右下の Google reCAPTCHA バッジ位置の調整
※底辺からの高さのみ変更可能
--------------------*/
.grecaptcha-badge {
z-index: 9999 !important;
bottom: 110px !important;
}
@media (max-width: 779px){
.grecaptcha-badge {
bottom: 90px !important;
}
}
@media (max-width: 549px){
.grecaptcha-badge {
bottom: 110px !important;
}
}