*,*:before,*:after { -webkit-box-sizing: inherit; box-sizing: inherit;}
html { -webkit-box-sizing: border-box; box-sizing: border-box; font-size: 62.5%;}
body{ font-size: clamp(10px, 1.3vw, 14px); line-height:1.6em; letter-spacing: 0.1em; background-color:#F7F6F5; color:#212529; font-family: "Mplus 1p"; animation: bugfix infinite 1s; -webkit-animation: bugfix infinite 1s; margin-top:120px;}

p { width:90%;margin-left:5%; margin-top:15px; text-align: justify;}

.ELLgr{color:#32AE71;}
.ELLrd{color:#DF6624;}
.ELLbl{color:#55BAC8;}
.ELLor{color:#EEC222;}

/*
backgound color
#E9E5DE
#F3F4F2
*/

/*
********************************************************************************************************************************
page top botton
********************************************************************************************************************************
*/
#page-top a{ display: flex; justify-content:center; align-items:center; background:#32AE71; border-radius: 5px; width: 60px; height: 60px; color: #fff; text-align: center; text-transform: uppercase;  text-decoration: none; font-size:1.4rem; line-height:1.2em; transition:all 0.3s;}
#page-top a:hover{ background: #55BAC8;}

/*リンクを右下に固定*/
#page-top { position: fixed; right: 20px; z-index: 100; opacity: 0; transform: translateY(100px); /*bottom位置はmoairy.jsで*/}

/*　上に上がる動き　*/
#page-top.UpMove{ animation: UpAnime 0.5s forwards;}
@keyframes UpAnime{
  from { opacity: 0; transform: translateY(100px); }
  to { opacity: 1; transform: translateY(0); }
}

/*　下に下がる動き　*/
#page-top.DownMove{ animation: DownAnime 0.5s forwards;}
@keyframes DownAnime{
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 1; transform: translateY(100px); }
}

/*
********************************************************************************************************************************
global navigation
********************************************************************************************************************************
*/
#menupc{display:block; position:fixed; top:0; width:100%; z-index:500; background-color: #fff; margin-bottom:10px; opacity:0.8;}

.gnavi{ display: flex; list-style: none; margin-top:10px;　margin-bottom:40px;}
.gnavi li a{ display: block;text-decoration: none; color: #333;}
@media (min-width: 576px) {.gnavi li a{padding:0 2px; font-size:0.75em;}}
@media (min-width: 768px) {.gnavi li a{padding:0 4px; font-size:0.8em;}}
@media (min-width: 992px) {.gnavi li a{padding:0 6px; font-size:0.8em;}}
@media (min-width: 1200px) {.gnavi li a{padding:0 10px; font-size:0.9em;}}

.gnavi li{ position: relative; margin:0 8px; }
.gnavi li.current{ text-decoration: none; }

.gnavi li.current a,.gnavi li a:hover{	color:#333;}
.gnavi li a::after {
    content: '';
    /*絶対配置で線の位置を決める*/
    position: absolute; bottom: 0; left: 10%;
    /*線の形状*/
    width: 80%; height: 2px; background:#32AE71;
    /*アニメーションの指定*/
    transition: all .3s; transform: scale(0, 1);/*X方向0、Y方向1*/ transform-origin: center top;/*上部中央基点*/
}

/*現在地とhoverの設定*/
.gnavi li.current a::after,.gnavi li a:hover::after { transform: scale(1, 1);/*X方向にスケール拡大*/}
.lead{	padding: 50px 20px;}

/*
********************************************************************************************************************************
mobile menu CSS only
********************************************************************************************************************************
*/
#menumb{display:block; position:fixed; top:0; width:100%; height:120px; background-color: #fff; z-index:10;}
@keyframes bugfix {
  from {padding: 0; }
  to {padding: 0; }
}
@-webkit-keyframes bugfix {
  from {padding: 0;}
  to {padding: 0;}
}
.mblogo{position: absolute; width:45%; top:-14px; padding: 26px 11px;cursor: pointer;user-select: none; z-index:10; margin-top:15px;}
#overlay-button {position: absolute;right: 1em;top: 1em;padding: 26px 11px;cursor: pointer;user-select: none; z-index:10; margin-top:15px;}
#overlay-button span {height: 4px;width: 35px;border-radius: 2px;background-color: #32AE71;position: relative;display: block;transition: all .2s ease-in-out;}
#overlay-button span:before {top: -10px;visibility: visible;}
#overlay-button span:after {top: 10px;}
#overlay-button span:before, #overlay-button span:after {height: 4px;width: 35px;border-radius: 2px;background-color: #32AE71;position: absolute;content: "";transition: all .2s ease-in-out;}
#overlay-button:hover span, #overlay-button:hover span:before, #overlay-button:hover span:after {background: #32AE71;}

input[type=checkbox] {display: none;}
input[type=checkbox]:checked ~ #overlay { visibility: visible; transform: translateX(0%);}/**/
input[type=checkbox]:checked ~ #overlay-button:hover span, input[type=checkbox]:checked ~ #overlay-button span {background: transparent;}
input[type=checkbox]:checked ~ #overlay-button span:before {transform: rotate(45deg) translate(7px, 7px);}
input[type=checkbox]:checked ~ #overlay-button span:after {transform: rotate(-45deg) translate(7px, -7px);}

#overlay {height: 100vh; width: 100vw; background: #E9E5DE; z-index: 2; visibility: hidden; position: fixed;transition: all 250ms ease-out;transform: translateX(100%);}/**/

#overlay.active { }
#overlay ul {display: flex; justify-content: center; align-items: center; flex-direction: column; text-align: center; height: 100vh;padding-left: 0; list-style-type: none;}
#overlay ul li {padding: 1em; width:80%; border-bottom:1px #000 solid;}
#overlay ul li a {display:block; color: #333; text-decoration: none; font-size: 1.5em; padding:5px;}
#overlay ul li a:hover {color: #000!important; background-color:#ccc;}

/*
********************************************************************************************************************************
pankuzu
********************************************************************************************************************************
*/
.pankuzu{margin: 0;  padding: 0;  list-style: none; font-size:0.8em; width:100%;}
.pankuzu li { display: inline-block; list-style: none; vertical-align: middle;}
.pankuzu li:before {content: '';}
.pankuzu li:first-child:before {font-family: bootstrap-icons; content: '\F422'; font-weight: normal; color: #33AE71;}
.pankuzu li:after {font-family: bootstrap-icons; content: ' \F231'; padding: 0 0.2em; color: #555; font-size: 0.9em;}
.pankuzu li:last-child:after { content: '';}
.pankuzu li a { display: inline-block; padding: 0.1em 0.9em; border-radius: 15px; text-decoration: none; color: #333; background: #B1F0C1; font-size: 0.9em;}
.pankuzu li a:hover {  color: #fff; background: #33AE71;}

/*
********************************************************************************************************************************
slider
********************************************************************************************************************************
*/
#header{width:100%; height: 100vh; position: relative;}
#headermb{width:100%; height: 100vh; position: relative;}
.slider {margin: 0; padding: 0;
	z-index: 1;
	/*↑z-indexの値をh1のz-indexの値よりも小さくして背景に回す*/
	height:100vh;/*スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
	box-sizing:border-box;
}

/*　背景画像設定　*/
.slider-photo01 {background:url(../WebP/catch-top2024-001.webp);}
.slider-photo02 {background:url(../WebP/catch-top2024-002.webp);}
.slider-photo03 {background:url(../WebP/catch-top2024-003.webp);}
.slider-photo04 {background:url(../WebP/catch-top2024-004.webp);}
.slider-photo05 {background:url(../WebP/catch-top2024-005.webp);}

.slider-photo {
  width: 100%;/*各スライダー全体の横幅を画面の高さいっぱい（100%）にする*/
  height:100vh;/*各スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
  background-repeat: no-repeat;/*背景画像をリピートしない*/
  background-position: center;/*背景画像の位置を中央に*/
  background-size: cover;/*背景画像が.slider-photo全体を覆い表示*/
  margin: auto;
}

.slider-mb { margin: 0; padding: 0; z-index:1;/*↑z-indexの値をh1のz-indexの値よりも小さくして背景に回す*/	height: auto;/*スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/}

/*　背景画像設定　*/
.slidermb-photo01 {background:url(../WebP/catch-top2024-001mb.webp);}
.slidermb-photo02 {background:url(../WebP/catch-top2024-002mb.webp);}
.slidermb-photo03 {background:url(../WebP/catch-top2024-003mb.webp);}
.slidermb-photo04 {background:url(../WebP/catch-top2024-004mb.webp);}
.slidermb-photo05 {background:url(../WebP/catch-top2024-005mb.webp);}

.slidermb-photo {
left:0;
  width: 100%;/*各スライダー全体の横幅を画面の高さいっぱい（100%）にする*/
  height:100vh;/*各スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
  background-repeat: no-repeat;/*背景画像をリピートしない*/
  background-position: center;/*背景画像の位置を中央に*/
  background-size: cover;/*背景画像が.slider-photo全体を覆い表示*/
  margin: auto;
}

/*矢印の設定*/
.slick-prev, .slick-next {position: absolute;z-index: 3;top: 40%;cursor: pointer;/*マウスカーソルを指マークに*/outline: none;/*クリックをしたら出てくる枠線を消す*/border-top: 2px solid #27B775;/*矢印の色*/border-right: 2px solid #27B775;/*矢印の色*/height: 25px;width: 25px;}
.slick-prev {/*戻る矢印の位置と形状*/left:2.5%;transform: rotate(-135deg);}
.slick-next {/*次へ矢印の位置と形状*/right:2.5%;transform: rotate(45deg);}

/*ドットナビゲーションの設定*/
.slick-dots {position: relative;z-index: 3;text-align:center;margin:-50px 0 0 0;/*ドットの位置*/}
.slick-dots li {display:inline-block;margin:0 5px;}
.slick-dots button {color: transparent;outline: none;width:8px;/*ドットボタンのサイズ*/height:8px;/*ドットボタンのサイズ*/display:block;border-radius:50%;background:#fff;/*ドットボタンの色*/}
.slick-dots .slick-active button{background:#27B775;/*ドットボタンの現在地表示の色*/}

.slider-item li img { width:100%;}

/*
********************************************************************************************************************************
ドロア CSS only
********************************************************************************************************************************
*/
.close {	z-index: 28;	inset: 0;	pointer-events: none;	transition: background-color .6s;}
#drawer:checked ~ .close {	pointer-events: auto;	background-color: rgba(0,0,0,.3);}

/* :::::: toggle button :::::: */
#drawer {	display:none;} /*スイッチング用チェックボックス*/
#kitlinks label {	cursor: pointer;	position: fixed;-ms-writing-mode: tb-rl; writing-mode: vertical-rl;text-align:center; padding:0 10px;}
.open {	z-index: 29;	top: 130px;	right:-6px ;	width: 40px;	height: 300px;	border-radius: 6px;	background: #86c0de;	transition: background .6s, transform .6s cubic-bezier(0.215, 0.61, 0.355, 1); opacity:0.7;}
@media (min-width: 768px) {.open{ opacity:1; color:white; }}

#kitlinks label.close{ color:#fff; opacity:1.0;}

.open::before,.open::after {	content: "";}
.open span,.open::before,.open::after {	content: "";	position: absolute;	top: calc(10% - 1px);	left: 25%;	width: 40%;	border-bottom: 2px solid #fff;	transition: transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);}
.open::before {	transform: translateY(-8px);}
.open::after {	transform: translateY(8px);}
.close {	z-index: 28;	inset: 0;	pointer-events: none;	transition: background .6s;}

#drawer:checked + .open {	background: #dc6688;	transform: translateX(-300px);}
#drawer:checked + .open span {	transform: scaleX(0);}
#drawer:checked + .open::before {	transform: rotate(135deg) scaleX(1.2);}
#drawer:checked + .open::after {	transform: rotate(-135deg) scaleX(1.2);}
#drawer:checked ~ .close {	pointer-events: auto;	background: rgba(0,0,0,.3); color:#fff; opacity:1.0;}

/* :::::: drawer menu :::::: */
.menu {	z-index: 30;	position: fixed;	overflow: auto;	top: 120px;	right: 0;	width: 300px;	height: 80%;	margin: 0;	padding: 10px;	box-sizing: border-box;	background: rgba(255,255,255,1);	transform: translateX(100%);	transition: transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);}
.menu a {	display: block;	padding: 0.5em;	color: #333;	text-decoration: inherit;	transition: background .6s;}
.menu a:hover {	background: #fff;}
#drawer:checked ~ .menu {	transform: none;}

/*
********************************************************************************************************************************
bootstrap
********************************************************************************************************************************
*/

/* H1 - H6 */
h1, .h1 { font-size: 3rem; line-height:1.5em;} 
h2, .h2 { font-size: 3rem;} 
h3, .h3 { font-size: 3rem;} 
h4, .h4 { font-size: 3rem;} 
h5, .h5 { font-size: 3rem;} 
h6, .h6 { font-size: 3rem;}

/* H1 - H6 */
@media (min-width: 576px) {
h1, .h1 { font-size: 3rem;} 
h2, .h2 { font-size: 3rem;} 
h3, .h3 { font-size: 3rem;} 
h4, .h4 { font-size: 3rem;} 
h5, .h5 { font-size: 3rem;} 
h6, .h6 { font-size: 3rem;}
}

@media (min-width: 768px) {
h1, .h1 { font-size: 3rem;} 
h2, .h2 { font-size: 3rem;} 
h3, .h3 { font-size: 3rem;} 
h4, .h4 { font-size: 3rem;} 
h5, .h5 { font-size: 3rem;} 
h6, .h6 { font-size: 3rem;}
}

@media (min-width: 992px) {
h1, .h1 { font-size: 3rem;} 
h2, .h2 { font-size: 3rem;} 
h3, .h3 { font-size: 3rem;} 
h4, .h4 { font-size: 3rem;} 
h5, .h5 { font-size: 3rem;} 
h6, .h6 { font-size: 3rem;}
}

@media (min-width: 1200px) {
h1, .h1 { font-size: 4.5rem;} 
h2, .h2 { font-size: 3.5rem;} 
h3, .h3 { font-size: 3rem;} 
h4, .h4 { font-size: 3rem;} 
h5, .h5 { font-size: 3rem;} 
h6, .h6 { font-size: 3.5rem;}
}

h1,.h1{font-family: 'Noto Serif JP', serif; color:#32AE71;}
/*
font-family: 'Noto Serif JP', serif;
*/
h2,h3,h4,h5,h6,.h2,.h3,.h4,.h5,.h6{font-family: 'Noto Serif JP', serif; color:#333; margin-bottom:15px;}

/****************************************************/

/* display */
.display-1 { font-size: 6rem; font-weight: 300; line-height: 1.2;}
.display-2 { font-size: 5.5rem; font-weight: 300; line-height: 1.2;}
.display-3 { font-size: 4.5rem; font-weight: 300; line-height: 1.2;}
.display-4 { font-size: 3.5rem; font-weight: 300; line-height: 1.2;}
.display-5 { font-size: 2.5rem; font-weight: 300; line-height: 1.2;}
.display-6 { font-size: 1.5rem; font-weight: 300; line-height: 1.2;}
/****************************************************/

.m-6 { margin: 2rem !important;}
.mt-6,.my-6 { margin-top: 2rem !important;}
.me-6,.mx-6 { margin-right: 2rem !important;}
.mb-6,.my-6 { margin-bottom: 2rem !important;}
.ms-6,.mx-6 { margin-left: 2rem !important;}

/* margin */
@media (min-width: 576px) {
.m-6 { margin: 2rem !important;}
.mt-6,.my-6 { margin-top: 1rem !important;}
.me-6,.mx-6 { margin-right: 1rem !important;}
.mb-6,.my-6 { margin-bottom: 1rem !important;}
.ms-6,.mx-6 { margin-left: 1rem !important;}
}
@media (min-width:768px){
.m-6 { margin: 3rem !important;}
.mt-6,.my-6 { margin-top: 3rem !important;}
.me-6,.mx-6 { margin-right: 3rem !important;}
.mb-6,.my-6 { margin-bottom: 3rem !important;}
.ms-6,.mx-6 { margin-left: 3rem !important;}
}
@media (min-width:992px){
.m-6 { margin: 6rem !important;}
.mt-6,.my-6 { margin-top: 6rem !important;}
.me-6,.mx-6 { margin-right: 6rem !important;}
.mb-6,.my-6 { margin-bottom: 6rem !important;}
.ms-6,.mx-6 { margin-left: 6rem !important;}
}
/****************************************************/

.p-6 { padding: 2rem !important;}
.pt-6,.py-6 { padding-top: 2rem !important;}
.pe-6,.px-6 { padding-right: 2rem !important;}
.pb-6,.py-6 { padding-bottom: 2rem !important;}
.ps-6,.px-6 { padding-left: 2rem !important;}

/* padding */
@media (min-width:576px){
.p-6 { padding: 1rem !important;}
.pt-6,.py-6 { padding-top: 1rem !important;}
.pe-6,.px-6 { padding-right: 1rem !important;}
.pb-6,.py-6 { padding-bottom: 1rem !important;}
.ps-6,.px-6 { padding-left: 1rem !important;}
}
@media (min-width:768px){
.p-6 { padding: 3rem !important;}
.pt-6,.py-6 { padding-top: 3rem !important;}
.pe-6,.px-6 { padding-right: 3rem !important;}
.pb-6,.py-6 { padding-bottom: 3rem !important;}
.ps-6,.px-6 { padding-left: 3rem !important;}
}
@media (min-width:992px){
.p-6 { padding: 6rem !important;}
.pt-6,.py-6 { padding-top: 6rem !important;}
.pe-6,.px-6 { padding-right: 6rem !important;}
.pb-6,.py-6 { padding-bottom: 6rem !important;}
.ps-6,.px-6 { padding-left: 6rem !important;}
}

/****************************************************/

/* ELL text colors */
.text-white { color: #fff !important;}
a.text-white:hover, a.text-white:focus { color: rgba(213,173,112,1.0) !important;}

.text-ellgr { color: rgba(50, 174, 113,1.0) !important;}
a.text-ellgr:hover, a.text-ellgr:focus { color: #2E9B65 !important;}

.text-ellbl { color: rgba(85, 186, 200,1.0) !important;}
a.text-ellbl:hover, a.text-ellbl:focus { color: #489EAA !important;}

.text-ellor { color: rgba(238, 194, 34,1.0) !important;}
a.text-ellor:hover, a.text-ellor:focus { color: #D8B01E !important;}

.text-ellrd { color: rgba(223, 102, 36,1.0) !important;}
a.text-ellrd:hover, a.text-ellrd:focus { color: #C95D23 !important;}
/****************************************************/
/* ELL background colors */
.bg-white {background-color: #fff !important;}
.bg-light {background-color: #fff !important;}

.bg-ellgr {background-color: rgba(50, 174, 113,1.0) !important;}
a.bg-ellgr:hover, a.bg-ellgr:focus,button.bg-ellgr:hover,button.bg-ellgr:focus {background-color: #2E9B65 !important;}

.bg-ellbl {background-color: rgba(85, 186, 200,1.0) !important;}
a.bg-ellbl:hover, a.bg-ellbl:focus,button.bg-ellbl:hover,button.bg-ellbl:focus {background-color: #489EAA !important;}

.bg-ellor {background-color: rgba(238, 194, 34,1.0) !important;}
a.bg-ellor:hover, a.bg-ellor:focus,button.bg-ellor:hover,button.bg-ellor:focus {background-color: #D8B01E !important;}

.bg-ellrd {background-color: rgba(223, 102, 36,1.0) !important;}
a.bg-ellrd:hover, a.bg-ellrd:focus,button.bg-ellrd:hover,button.bg-ellrd:focus {background-color: #C95D23 !important;}

.bg-transparent {background-color: transparent !important;}
/****************************************************/

/* ELL border colors */
.border-ellgr {border-color: rgba(50, 174, 113,1.0) !important;}
.border-ellbl {border-color: rgba(85, 186, 200,1.0) !important;}
.border-ellor {border-color: rgba(238, 194, 34,1.0) !important;}
.border-ellrd {border-color: rgba(223, 102, 36,1.0) !important;}

/* border colors */
.border-light {border-color: #eff2f4 !important;}
.border-dark {border-color: #343a40 !important;}

.card{width:90%;border:none; background-color:#fff; 
box-shadow: inset -8px -8px 5px -13px rgba(255, 255, 255, 0.5), inset 5px 5px 10px 0px rgba(0, 0, 0, 0.3);
}
.card-body{width:90%; margin-left:5%;lex:1 1 auto;padding:2rem 2rem;}
.card-title{margin-bottom:.5rem}
.card-subtitle{margin-top:-.25rem;margin-bottom:0;font-size:0.6em;}
.card-text{ margin-top:60px;}
.card-img,.card-img-bottom,.card-img-top{width:80%;margin-left:10%;}

.breadcrumb{font-size:0.8em;}
/*
********************************************************************************************************************************
contents
********************************************************************************************************************************
*/
h1 .title,h2 .title,h3 .title,h4 .title,h5 .title,h6 .title{ font-size: 4rem !important;}
.tokucyo{ background-color:#fff; box-shadow: -5px -5px 10px 0px rgba(255, 255, 255, 0.5), 5px 5px 10px 0px rgba(0, 0, 0, 0.3);}
.tokucyo img{width:90%; margin-left:5%; margin-bottom:18px;}

.butn,a.butn,button.butn { font-size: 2rem; font-weight: 700; line-height: 1.5; position: relative; display: inline-block; padding: 1rem 4rem; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-transition: all 0.3s; transition: all 0.3s; text-align: center; vertical-align: middle; text-decoration: none; letter-spacing: 0.1em; color: #32AE71;  border-radius: 0.5rem;margin:20px 0;}

/**/
a.butn-border { padding: 1.5rem 4rem; border: 3px solid #32AE71; border-radius: 0; border-radius: 100vh; background: #fff;}
a.butn-border:before { position: absolute; top: 2px; left: 2px; width: calc(100% - 4px); height: calc(100% - 4px); content: ''; -webkit-transition: all .3s; transition: all .3s; border: 3px dotted #32AE71; border-radius: 100vh;}
a.butn-border:hover:before { top: 0; left: 0; width: 100%; height: 100%;background-color: rgba(50, 174, 113,0.1)}


/*詳細を見るボタン*/
a.butn-flat { overflow: hidden; padding: 1.5rem 6rem; color: #fff; border-radius: 0; background: #32AE71;}
a.butn-flat span { position: relative;}
a.butn-flat:before { position: absolute; top: 0; left: 5%; width: 150%; height: 500%; content: ''; -webkit-transition: all .5s ease-in-out; transition: all .5s ease-in-out; -webkit-transform: translateX(-97%) translateY(-60%) rotate(135deg); transform: translateX(-97%) translateY(-70%) rotate(135deg); background: #fff100;}
/*↓↓↓↓黄色背景がスマフォだと大きくなるので、パソコン用を再指定↓↓↓↓*/
@media (min-width:768px){a.butn-flat:before {left: 110px;}}

a.butn-flat:hover:before { -webkit-transform: translateX(3%) translateY(3%) rotate(135deg); transform: translateX(3%) translateY(3%) rotate(135deg);}

.kubomi{
border:none;border-radius: 10px; background-color:#fff;
box-shadow: inset -8px -8px 5px -13px rgba(255, 255, 255, 0.5), inset 5px 5px 10px 0px rgba(0, 0, 0, 0.3);
}

/*吹き出し*/
.fukidasi-left{ background: #E2FAFD; border: solid 3px #55BAC8;}
.fukidasi-right{ background: #FAF2E4; border: solid 3px #EEC222;}

.fukidasi-left,
.fukidasi-right { position: relative; display: inline-block; margin: 0.5em 0 0.5em 15px; padding: 10px 20px; min-width: 120px; max-width: 100%; color: #212529; font-size: 16px; box-sizing: border-box; text-align: justify;}

.fukidasi-left:before {  content: ""; position: absolute; top: 50%; left: -24px; margin-top: -12px; border: 12px solid transparent; border-right: 12px solid #E2FAFD; z-index: 2;}
.fukidasi-left:after { content: ""; position: absolute; top: 50%; left: -30px; margin-top: -14px; border: 14px solid transparent; border-right: 14px solid #55BAC8; z-index: 1;}

.fukidasi-right:before { content: ""; position: absolute; top: 50%; right: -24px; margin-top: -12px; border: 12px solid transparent; border-left: 12px solid #FAF2E4; z-index: 2;}
.fukidasi-right:after { content: ""; position: absolute; top: 50%; right: -30px; margin-top: -14px; border: 14px solid transparent; border-left: 14px solid #EEC222; z-index: 1;}

.fukidasi-left p,.fukidasi-right p { margin: 0; padding: 0;}

.att{color:#cf2143; font-size:0.8em; margin-left:0.5em;}
.att::before{content:'*';}

label{font-size:0.9em;}
.form-control{font-size:1em;}

button.btn-border-on {  border: 2px solid #32AE71;  border-radius: 0;  background: #fff;}
button.btn-border-on:hover {  color: #fff;  background: #32AE71;}
button.btn-border-off {  border: 2px solid #333;  border-radius: 0;  background: #333; color:#fff;}
button.btn-border-off:hover {  color: #fff;  background: #000;}

/*
********************************************************************************************************************************
YouTube
********************************************************************************************************************************
*/
.youtube { width: 100%;  aspect-ratio: 16 / 9; }
.youtube iframe { width: 100%;  height: 100%; }

/*
********************************************************************************************************************************
googlemap
********************************************************************************************************************************
*/

.gmapbox{width:100%; height:449px; background:transparent url(../images/bg_googlemap.jpg) top center no-repeat; background-size:contain;}
#map_canvas{ position:relative; max-width:60%; height:700px; margin:50px 0 0 0; padding-right:30px;}
/*
********************************************************************************************************************************
footer
********************************************************************************************************************************
*/
#FtArea {position: relative; margin-bottom:100px;}
.footerlinks{ border-top:1px solid #222; border-bottom:1px solid #222;}
#footer{
  background:#32AE71;
  position: relative;
  z-index: 2;
  padding:5px 20px;

}
/*
********************************************************************************************************************************
fonts
********************************************************************************************************************************
*/
.wf-noto{font-family: 'Noto Serif JP', serif;}

/*
********************************************************************************************************************************
ダークモード
********************************************************************************************************************************
@media (prefers-color-scheme: dark) {
  body { background-color: #999; color: #fff;}
		#FtArea { color: #fff;}
		.footerlinks{ border-top:1px solid #eee; border-bottom:1px solid #eee;}
		.footerlinks a{ color: #fff;}
}

*/