@charset "utf-8";

@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css");
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');

:root {

	--primary-color: #cd3030;			/*テンプレートのテーマカラー*/
	--primary-inverse-color: #fff;		/*上のprimary-colorの対となる色*/

	--secondary-color: #cd3030;			/*テンプレートのサブカラー*/
	--secondary-inverse-color: #fff;	/*secondary-colorの対となる色*/
	
	--accent-color: #cd3030;			/*テンプレートのアクセントカラー*/
	--accent-inverse-color: #fff;		/*accent-colorの対となる色*/

	/*余白の一括管理用。主に左右の余白に使っています。4rem＝4文字分。*/
	--content-space: 4rem;
	
        --#{$prefix}accordion-bg: #cd3030;
        --bs-table-bg: #fa9b9b;

        --bs-btn-bg:#cd3030;

        --bs-primary-border-subtle: #cd3030;
        --bs-primary-bg-subtle:#fce6e6;
        --bs-table-bg:#fce6e6;
        --bs-primary-border-subtle: #cd3030;
        --border-color: #cd3030;

}

html { scroll-behavior: smooth; }
body { scroll-behavior: smooth; }

h3, .h3 {
  font-size: 1.2rem;
}
@media (min-width: 1200px) {
  h3, .h3 {
    font-size: 2rem;
  }
}

h1.box{
    border:solid 1px #000000;
    color:#300;
    background-color:#fce6e6;
    width:80%;
    margin:5px auto;
    padding:5px auto;
    font-size : 13pt;
    height:25px;
    line-height:25px;
    text-align:center;
}
.text{
    background-color : #fce6e6;
    padding:5px 5px 5px 5px;

}
.link{
    color:#000033;
    border :0px;
    padding:1px;
    font-size : 13pt;
    vertical-align:text-bottom;
}
span#page{
    background-color:#fce6e6;
    color:#300;
    cursor : default;
    height:13pt	;
}
dt {
font-weight: normal;
}
.top-label {
text-align: center;
font-size:150%;
color:#ED037E;
font-weight: bold;
}
.fun-label {
text-align:center;
font-size:18pt;
font-weight:bold;
}

.to-top {
text-align: right;
font-weight:bold;
}

.center {
    width : 98% ; /* IE8以下とAndroid4.3以下用フォールバック */
    width : -webkit-calc(100% - 10px) ;
    width : calc(100% - 10px) ;
    padding-left: auto;
    padding-right: auto;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    justify-content: center;
}
.left {
    text-align: left;
}
  .wrapper {
    max-width: 100%;
    margin: 0 auto;
    text-align: center;
    background-color : #eeeeff;
  }
  .txt {
    display: inline-block;
    text-align: left;
  }
.tel {
  display       : inline-block;
  border-radius : 7%;          /* 角丸       */
  text-align    : center;      /* 文字位置   */
  cursor        : pointer;     /* カーソル   */
  padding       : 5px 5px;   /* 余白       */
font-size:160%;
font-weight: bold;
background-color:#009100;
  color         : #fff;     /* 文字色     */
}
.tel:hover {
  background-color: #9ff59f;
  color         : #009100;     /* 文字色     */
  box-shadow    : none;        /* カーソル時の影消去 */
}
.tel2 {
  display       : inline-block;
  border-radius : 7%;          /* 角丸       */
  text-align    : center;      /* 文字位置   */
  cursor        : pointer;     /* カーソル   */
  padding       : 5px 5px;   /* 余白       */
font-size:120%;
font-weight: bold;
  color         : #009100;     /* 文字色     */
}
.button {
  display       : inline-block;
  border-radius : 7%;          /* 角丸       */
  font-size     : 20pt;        /* 文字サイズ */
  text-align    : center;      /* 文字位置   */
  cursor        : pointer;     /* カーソル   */
  padding       : 12px 12px;   /* 余白       */
  background-color: #cd3030;;
  color         : #fff;     /* 文字色     */
  line-height   : 1em;         /* 1行の高さ  */
  transition    : .3s;         /* なめらか変化 */
}
.button:hover {
  background-color: #fa9b9b;
  color         : #cd3030;     /* 文字色     */
  box-shadow    : none;        /* カーソル時の影消去 */
}
.description { font-size : 120%;
}
.act-tel {
padding:5px 172px 5px 5px;width:100%;margin-right:-168px;
}
.hdr-action .hdr-action-list .act-tel .tel-btn {
padding:12px 0 0;display:block;border:1px solid #008c2e;border-radius:5px;background:-webkit-gradient(linear,left top,left bottom,from(#26bf58),to(#019a33));background:linear-gradient(to bottom,#26bf58,#019a33);text-align:center;box-shadow:0 2px 2px rgba(0,0,0,0.3);-webkit-box-sizing:border-box;box-sizing:border-box;
}
.hdr-action .hdr-action-list .act-tel .tel-btn.ab-test01 {
border:1px solid #bb2d00;background:-webkit-gradient(linear,left top,left bottom,from(#fc3c01),to(#d43200));background:linear-gradient(to bottom,#fc3c01,#d43200);
}
.hdr-action .hdr-action-list .act-tel .tel-btn.ab-test02 {
border:1px solid #008c2e;background:-webkit-gradient(linear,left top,left bottom,from(#25be57),to(#019a33));background:linear-gradient(to bottom,#25be57,#019a33);padding-top:10px;
}
.hdr-action .hdr-action-list .act-tel .tel-btn.ab-test02 img {
width:128px;display:block;
}
.hdr-action .hdr-action-list .act-tel .tel-btn.ab-test03 {
border:1px solid #2242b7;background:-webkit-gradient(linear,left top,left bottom,from(#3b64fd),to(#3555cc));background:linear-gradient(to bottom,#3b64fd,#3555cc);
}
.right {
display: block;
text-align:right;
}
.center {
display: block;
text-align:center;
}
.left {
display: block;
text-align:left;
}

/*画像ブロック共通*/
img .list-half .image-l img, .list-half .image-r img .bg-gradient {
	border-radius: 50px;	/*角を丸くする指定。*/
	box-shadow: 10px 10px rgba(0,0,0,0.1);	/*ボックスの影。右へ、下へ、0,0,0は黒の事で0.1は色が10%出た状態。*/
}
	/*画像ブロック共通*/
	.list-half .image-l, .list-half .image-r {
		width: 50%;			/*画像の幅*/
	}

	/*画像を右に配置する場合*/
	.list-half .image-r {
		margin-left: 2rem;	/*画像の左側に空けるスペース*/
	}

/*画像ブロック共通*/
img .list-half .image-l img, .list-half .image-r img {
	border-radius: 50px;	/*角を丸くする指定。*/
	box-shadow: 10px 10px rgba(0,0,0,0.1);	/*ボックスの影。右へ、下へ、0,0,0は黒の事で0.1は色が10%出た状態。*/
}
	/*画像ブロック共通*/
	.list-half .image-l, .list-half .image-r {
		width: 50%;			/*画像の幅*/
	}

	/*画像を左に配置する場合*/
	.list-half .image-l {
		order: -1;
		margin-right: 2rem;	/*画像の右側に空けるスペース*/
	}
/*ボックス内のh3見出し（大きな端末で左側に配置される背景色つきの見出し）*/
.flow-box .title h3 {
	background: var(--primary-color);		/*背景色。css冒頭のprimary-colorを読み込みます。*/
	color: var(--primary-inverse-color);	/*文字色。css冒頭のprimary-inverse-colorを読み込みます。*/
	margin-left: calc(-1 * var(--content-space));
	margin-right: calc(-1 * var(--content-space));
	text-align: center;	/*テキストをセンタリング*/
	padding: 2rem;		/*見出し内の余白。２文字分。*/
	margin-bottom: 2rem;	/*見出しの下に空けるスペース。２文字分。*/
}

/*h3内のspan（小さな装飾文字）*/
.flow-box .title h3 span {
	display: block;
	font-size: 1.2em;	/*文字サイズ。親要素の70%。*/
}

@media (prefers-reduced-motion: no-preference) {
  :root {
    scroll-behavior: smooth;
  }
}
.pagetop {
    display: none;
    position: fixed;
    bottom: 30px;
    right: 15px;
}
.pagetop a {
    display: block;
    background-color: #cd3030;
    text-align: center;
    color: #fff;
    font-size: 12px;
    text-decoration: none;
    padding: 5px 10px;
	filter:alpha(opacity=50);
    -moz-opacity: 0.5;
    opacity: 0.5;
}
.pagetop a:hover {
    display: block;
    background-color: #fa9b9b;
    text-align: center;
    color: #fff;
    font-size: 12px;
    text-decoration: none;
    padding:5px 10px;
	filter:alpha(opacity=50);
    -moz-opacity: 0.5;
    opacity: 0.5;
}

.table-primary,
.table-primary > th,
.table-primary > td {
  background-color: #cd3030;
}

.table-primary th,
.table-primary td,
.table-primary thead th,
.table-primary tbody + tbody {
  border-color: #cd3030;
}

.table-hover .table-primary:hover {
  background-color: #cd3030;
}

.table-hover .table-primary:hover > td,
.table-hover .table-primary:hover > th {
  background-color: #eef;
}

 td {
font-weight:700;
}

@media (prefers-reduced-motion: no-preference) {
  :root {
    scroll-behavior: smooth;
  }
}

[data-bs-theme="blue"] {
  --bs-body-color: var(--bs-white);
  --bs-body-color-rgb: #{to-rgb($white)};
  --bs-body-bg: var(--bs-blue);
  --bs-body-bg-rgb: #{to-rgb($blue)};
  --bs-tertiary-bg: #{$blue-600};

  .dropdown-menu {
    --bs-dropdown-bg: #{mix($blue-500, $blue-600)};
    --bs-dropdown-link-active-bg: #{$blue-700};
  }

  .btn-secondary {
    --bs-btn-bg: #{mix($gray-600, $blue-400, .5)};
    --bs-btn-border-color: #{rgba($white, .25)};
    --bs-btn-hover-bg: #{darken(mix($gray-600, $blue-400, .5), 5%)};
    --bs-btn-hover-border-color: #{rgba($white, .25)};
    --bs-btn-active-bg: #{darken(mix($gray-600, $blue-400, .5), 10%)};
    --bs-btn-active-border-color: #{rgba($white, .5)};
    --bs-btn-focus-border-color: #{rgba($white, .5)};
    --bs-btn-focus-box-shadow: 0 0 0 .25rem rgba(255, 255, 255, .2);
  }
}

.accordion {
  --bs-accordion-border-color: #cd3030;
}

.button {
  color: $ButtonFg;
  background-color: $ButtonBg;
  padding: $ButtonPadding;
}

.button:hover {
  color: $HoverButtonFg;
  background-color: $HoverButtonBg;
}

svg {
  fill: currentColor;
}