*,*: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(12px, 1.4vw, 16px); line-height:1.6em; letter-spacing: 0.1em; background-color:#e6f4f5; color:#212529; font-family: "Mplus 1p"; animation: bugfix infinite 1s; -webkit-animation: bugfix infinite 1s;}

p { width:90%; margin-left:5%; margin-top:15px; text-align: justify; font-size:1.2em; line-height:1.8em;}

.txtgr{color:#6F7215;}
.txtrd{color:#EB515D;}
.txtbl{color:#253C81;}
.txtor{color:#E8CD4C;}

.bg-bl{background-color:#8ee6f2;}
.bg-wh{background-color:#fff;}
/*
backgound color
#E9E5DE
#F3F4F2
*/
iframe.youtube-16-9 {
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
}

table{width:100%;}
table th,table td{  padding: 2em 10px 2em 2em;  border: 1px solid #bbb;}
/*
********************************************************************************************************************************
page top botton
********************************************************************************************************************************
*/
#page-top a{ display: flex; justify-content:center; align-items:center; background:#8ee6f2; border:solid 1px #000; border-radius: 5px; width: 60px; height: 60px; color: #000; 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: #7BD4F2;}

/*リンクを右下に固定*/
#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{ background-color: #8ee6f2;} /*メニュー背景*/

#menupc{display:block; position:fixed; top:0; width:100%; z-index:500; 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 a:hover{	color:#000;}
.gnavi li a::after {
    content: '';
    /*絶対配置で線の位置を決める*/
    position: absolute; bottom: 0; left: 5%;
    /*線の形状*/
    width: 90%; height: 2px; background:#fff;
    /*アニメーションの指定*/
    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{ background-color: #8ee6f2;} /*メニュー背景*/
#overlay-button span {background-color: #fff;}/*ハンバーガー真ん中線*/
#overlay-button span:before, #overlay-button span:after {background-color: #fff;}/*ハンバーガー上下線*/
#overlay-button:hover span,
#overlay-button:hover span:before,
#overlay-button:hover span:after {background: #fff;}/*ハンバーガーhover*/
#overlay { background: #e6f4f5;}/*ハンバーガーをクリックした後の背景*/

#menumb{display:block; position:fixed; top:0; width:100%; height:120px; 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;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: #fff;position: absolute;content: "";transition: all .2s ease-in-out;}/*ハンバーガー上下線*/

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); background-color: #8ee6f2;}/*閉じる*/
input[type=checkbox]:checked ~ #overlay-button span:after {transform: rotate(-45deg) translate(7px, -7px); background-color: #8ee6f2;}/*閉じる*/

#overlay {height: 100vh; width: 100vw; 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.1em; padding:2px;}
#overlay ul li a:hover {color: #000!important; background-color:#ccc;}

/*
********************************************************************************************************************************
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-photo06 {background:url(../WebP/catch-top2024-006.webp);}
.slider-photo07 {background:url(../WebP/catch-top2024-007.webp);}
.slider-photo08 {background:url(../WebP/catch-top2024-008.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-photo06 {background:url(../WebP/catch-top2024-006mb.webp);}
.slidermb-photo07 {background:url(../WebP/catch-top2024-007mb.webp);}
.slidermb-photo08 {background:url(../WebP/catch-top2024-008mb.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%;}

/*
********************************************************************************************************************************
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, .h1,h2, .h2,h3, .h3,h4, .h4,h5, .h5,h6, .h6 { font-size: 2rem;}

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

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

@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: 4rem;} 
h2, .h2 { font-size: 4rem;} 
h3, .h3 { font-size: 3rem;} 
h4, .h4 { font-size: 3rem;} 
h5, .h5 { font-size: 3rem;} 
h6, .h6 { font-size: 3.5rem;}
}

h1,.h1{ color:#8ee6f2;}
/*
font-family: 'Noto Serif JP', serif;
*/
h2,h3,h4,h5,h6,.h2,.h3,.h4,.h5,.h6{ color:#8ee6f2;}

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

/* 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;}
}

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

.card{width:100%;border:none; 
/*
background-color:#fefeee; 
box-shadow: inset -4px -4px 5px -13px rgba(250, 250, 0, 0.5), inset 3px 3px 6px 0px rgba(50, 50, 0, 0.3);
*/
}
.card-body{width:100%; margin-left:3%;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:85%;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);}


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

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

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_canvas0{ position:relative; max-width:100%; height:75vh;}

/*
********************************************************************************************************************************
footer
********************************************************************************************************************************
*/
#FtArea {position: relative; background-color:#8ee6f2;}
.footerlinks{ background-color:#8ee6f2;/* border-top:1px solid #222; border-bottom:1px solid #222;*/}
#footer{
  position: relative;
  z-index: 2;
}
.footer-company{	padding-bottom:50px;}
/*
********************************************************************************************************************************
fonts
********************************************************************************************************************************
*/
.wf-noto{font-family: 'Noto Serif JP', serif;}

.m-plus-rounded-1c-bold {
  font-family: "M PLUS Rounded 1c", serif;
  font-weight: 700;
  font-style: normal;
}

/*
********************************************************************************************************************************
ダークモード
********************************************************************************************************************************
@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;}
}

*/