@charset "UTF-8";
/********************************/
/* トップ　*/
/********************************/
@font-face
{font-family: 刻明朝; src: url('https://cdn.leafscape.be/kokumin/font_1_kokumr_1.00_rls_web.woff2')format("woff2");}
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200..900&display=swap');

img{width:100%; height:auto;}
::before, ::after {box-sizing: border-box;}

body {width:100%;font-family: "Noto Sans JP", sans-serif; font-weight:500;background-attachment:fixed;background:#fff;padding:0;margin:0;vertical-align:top;height:100%;text-align:center;line-height:165%;}

header{width:100%;margin:0 auto; padding:5px 0 10px; background:rgba(255, 255, 255, 0.8);overflow:hidden;position: fixed;top: 0;left: 0;z-index:1;}
h1.menulogo{max-width:154px; float:left; margin:0; padding: 0 0 0 3%;}
ul.hmenu{ width:65%;display:flex; justify-content:  flex-end; margin:0 auto; padding:0; float:right;}
ul.hmenu li{text-align:center; list-style:none;color:#000;  padding:5px 0 5px; margin:0 15px; line-height:200%; border-bottom:2px solid #15ad90;}
ul.hmenu li a{font-size:18px;color:#000; text-decoration:none;vertical-align: -webkit-baseline-middle;}
ul.hmenu li a:hover{ opacity:0.5;}
ul.hmenu li.linelink{max-width:192px; margin:0; padding:0;border-bottom:none;}

#mainback{ clear:both;margin-top:3.4%; position:relative;height: auto;background: url(../img/mainback.jpg) no-repeat top center; background-size: cover; padding-top:37.3%;}
#mainback .maintex{max-width:1200px;position: absolute;bottom:10%;left:5%;transform:margin:0 auto;padding:0; text-align:center;text-shadow:0 0 10px #fff;}
#mainback .maintex p{ text-align:left;font-size:4.0vw; font-weight:900; color:#fff; line-height:120%;text-shadow:#555 1px 1px 5px, #555 -1px 1px 5px, #555 1px -1px 5px, #555 -1px -1px 5px;}

.chach01{max-width:1024px;margin:0 auto 3%; text-align:center; padding:5% 0 0}
.chach01 p{ font-size:36px; text-align:center; color:#000; line-height:150%; font-weight:600;}
.plogo{ max-width:444px;margin:0 auto; padding:0;}
.linebt{max-width:702px; margin:3% auto 3%;}
.linebt a:hover{ opacity:0.5;}
ul.cyui{margin:0 auto; padding:0 0 8%;}
ul.cyui li{ font-size:18px; text-align:center; line-height:160%; list-style:none;}
.uline{text-decoration:underline 8px #e2005c;text-underline-offset: -0.1rem;}
/********************************/
/* コンテンツ　*/
/********************************/

#c1{max-width:1024px; margin:0 auto; padding:0;}
.c1in{position:relative;width:100%;background: url(../img/c1_back.jpg) no-repeat top center; background-size: cover; margin:0% auto 10%; padding-top:53.6%;height: auto;border-radius: 10px;}
.c1in h2{ position:absolute; top:34%; left:8%; font-size:48px; line-height:1.3;font-family: "Noto Serif JP", serif; color:#000;font-weight:900; text-align:left;text-shadow:#fff 1px 1px 5px, #fff -1px 1px 5px, #fff 1px -1px 5px, #fff -1px -1px 5px;}
.c1in .c1tex{ position:absolute; bottom:10%; left:8%;width:77%; margin:0 auto; background:#fff; opacity:0.9; border-radius:6px; padding:20px 25px;}
.c1in .c1tex p{color:#000; font-size:21px; text-align:left; line-height:1.5;}

#c2{width:100%;background:#ffefdc;margin:0 auto; padding:7% 0 5%;}
.c2in{max-width:1024px; margin:0 auto; padding:0;}
.c2in h2{font-size:36px; margin:0 auto 5%; padding:0 0 0 20px;line-height:1.3; text-align:left; border-left:8px solid #009983;}
ul.toku{ width:100%;display:flex; flex-wrap:wrap; margin:0 auto; padding:0;}
ul.toku li{max-width:434px; margin:3.8%; padding:0; list-style:none;}
ul.toku li h3{ text-align:center; font-size:28px; color:#d10257; font-weight:600; line-height:1.4;}
ul.toku li img{border-radius:10px;margin-bottom:10px;}
ul.toku li p{ font-size:18px; text-align:left; color:#000; line-height:1.5; padding:10px 0;}
.number{font-family: "Noto Serif JP", serif; font-style:italic;padding-right: 17px;font-weight: 600;font-size: 32px;}

#c3{width:100%;background:#fff; margin:0 auto; padding:5% 0 5%;}
.c3in{max-width:1024px; margin:0 auto; padding:0;}
.c3in h2{font-size:36px; margin:0 auto 5%; padding:0 0 0 20px;line-height:1.3; text-align:left; border-left:8px solid #009983;}
ul.koe{ width:100%;display:flex;margin:0 auto; padding:0;}
ul.koe li{width:33%; margin:2% 3% 2% 0; padding:0; list-style:none;}
ul.koe li img{border-radius:10px;}
ul.koe li p{ font-size:18px; text-align:left; color:#000; line-height:1.5; padding:10px 0;}
.koeage{ display:block;font-size: 14px; text-align:right;}
ul.koe li:last-child{margin:2% 0 2% 0;}
.kanso{ display:block;font-size: 12px; color:#888; ; text-align:right; padding-top:10px;}


#c4{width:100%;background:#ceedf2; margin:0 auto; padding:5% 0 5%;}
.c4in{max-width:1024px; margin:0 auto; padding:0;}
.c4in h2{font-size:36px; margin:0 auto 5%; padding:0 0 0 20px;line-height:1.3; text-align:left; border-left:8px solid #009983;}
ul.flow{ width:100%;display:flex;margin:0 auto; padding:0;}
ul.flow li{width:33%; margin:2% 3% 2% 0; padding:0; list-style:none;}
ul.flow li img{border-radius:10px; margin-bottom:10px;}
ul.flow li p{ font-size:18px; text-align:left; color:#000; line-height:1.5; padding:10px 0;}
ul.flow li:last-child{margin:2% 0 2% 0;}
ul.flow li h3{ text-align:center; font-size:28px; color:#d10257; font-weight:600; line-height:1.4;}

#c5{max-width:1024px; margin:0 auto; padding:0;}
.c5in{position:relative;width:100%;background: url(../img/c5_back.jpg) no-repeat top center; background-size: cover; margin:10% auto 7%; padding-top:53.6%;height: auto;border-radius: 10px;}
.c5in .c5tex{ position:absolute; bottom:10%; left:8%; }
.c5in .c5tex p{font-size:32px; line-height:1.4;color:#000;font-weight:600; text-align:left;text-shadow:#fff 1px 1px 5px, #fff -1px 1px 5px, #fff 1px -1px 5px, #fff -1px -1px 5px;}

.inbox{width: 50%;font-size:16px;margin: 0 auto;padding-bottom: 40px;text-align:left;}
.inbox h2{ border-top: 1px solid;border-bottom: 1px solid;display: inline-block;margin: 40px auto 20px;font-size:24px;color: #333;padding:10px 0;}
.inbox h3{text-align:left;margin: 0 auto;font-size:21px;color:#333;padding:20px 0 0px;}
.inbox p{font-size:16px;padding:20px 0;color: #555;text-align:left;}
.inbox ul{width:95%; margin:0 auto;text-align: left;}
.inbox ul li{font-size:16px; list-style: decimal;margin-left: 20px;}
.inbox ul.ulno li{font-size:16px; list-style: none;counter-increment: cnt;margin-left: 20px;color: #555;}
.inbox ul.ulno li::before {content: "(" counter(cnt) ")";}

.totop{position: fixed;bottom: 16px;right: 16px;}
.totop img{width:100%; height:auto;}
.totop a{display: block;text-decoration: none;}
.totop:hover{opacity: 0.85 ;}
.clear{clear:both;}

p.ptpage { width:50%;text-align: center;margin: 7% auto;padding: 10px;font-size: 16px;border: 1px solid #333;background: #efefef; border-radius:10px;}
p.ptpage a{text-decoration:none;}
/********************************/
/* フッタ　*/
/********************************/
footer{background:#c23c40;padding:3.5% 0;clear:both;margin:0 auto;}
ul.footm{max-width:800px; display:flex; flex-wrap: wrap; margin:0 auto; padding:0;}
ul.footm li{ width:32%; margin:0;padding:0 0.5%;list-style:none; font-size:16px; color:#FFF; text-align:center;}
ul.footm li a{color:#fff; text-decoration:none;}
ul.footm li a:hover{color:#ccc;}
p.flogo{max-width:222px; margin:0 auto; padding:2% 0;}
p.ad{color:#fff;text-align:center;font-size:14px;}
/********************************/

/*================= table  ====================*/
table.tbl_01{width:100%;margin-top: 0.5em;}
table.tbl_01 thead th{background:#87ba4a;color:#FFF;}
table.tbl_01{border-top:1px solid #7f7f7f;border-left:1px solid #7f7f7f;}
table.tbl_01 td,table.tbl_01 th{border-right:1px solid #7f7f7f;border-bottom:1px solid #7f7f7f;padding:0.5em; color: #333}
table.tbl_01.center th,table.tbl_01.center td{text-align: center;}

/********************************/
/* 草食　*/
/********************************/
.rbl{font-size:24px;color:#CC0000;font-weight:700;background:#FF9;}
.blb{color: #03C;font-weight:700;}
.bl{color: #003399;}
.rb{font-weight:700;color:#ff0000;}
.rr{color: #CC0000;}
.bb{font-weight:700;color: #000000;}
.wb{font-weight:700;color: #FFF;}
.fb{font-weight:700;}
.yb{font-weight:700;color: #ffe400;}
.greenbold{font-weight:700;color: #006600;}

/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc { display: block !important; }
.sp { display: none !important; }
/*PCでは無効（改行しない）*/
.spbr{display: none; !important;}
/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */

@media only screen and (max-width: 1024px) {
#mainback {margin-top: 6.4%;}
.c1in, .c5in{border-radius: 0px;}
.c2in h2, .c3in h2, .c4in h2 { margin-left:5%;}
ul.toku li {max-width:none;width: 42%;}
ul.koe{flex-wrap:wrap;}
ul.koe li {max-width:none;width: 42%; margin:3.8%;}
ul.koe li:last-child{margin:3.8%;}
ul.flow{flex-wrap:wrap;}
ul.flow li {max-width:none;width: 42%; margin:3.8%;}
ul.flow li:last-child{margin:3.8%;}
.inbox{width: 80%;}
}
@media only screen and (max-width: 980px) {
ul.hmenu{ width:75%;}
ul.hmenu li a{font-size:16px;}
#c1 h2{ top:30%; left:8%; font-size:42px; line-height:1.3;}
#c1 .c1tex{bottom:10%; left:8%;width:80%; margin:0 auto; background:#fff; opacity:0.9; border-radius:6px; padding:20px 25px;}
#c1 .c1tex p{color:#000; font-size:19px; text-align:left; line-height:1.5;}
}


@media only screen and (max-width: 820px) {
.pc { display: none !important; }
.sp { display: block !important; line-height:0;}
header{width:100%;margin:0 auto; padding:0px 0 10px; background:#fff;overflow:hidden;position: static;}
.plogo {max-width: none; width:45%; height:auto;}
ul.hmenu{display:none;}
.chach01 p {font-size: 30px;}
#c1 h2 {top: 38%;left: 4%;font-size: 36px;}
#c1 .c1tex {bottom: 10%;left: 2%;width: 90%;padding: 15px 20px;}
#c1 .c1tex p {font-size: 16px;}
.c1in {padding-top: 65.6%;margin: 0% auto;}
ul.toku li {max-width:none; width:44%;margin: 2.8%;}
ul.toku li h3 {font-size: 24px;}
.c5in {padding-top: 65.6%;margin:0 auto 7%;}
.c5in .c5tex p {font-size: 26px;}
.linebt {max-width:none; width:88%;margin: 6% auto 6%;}

.inbox p {font-size: 18px;}
.inbox ul li{font-size:19px;}
.inbox h2 {font-size:22px;}
.inbox h3{font-size:20px;}
.inbox dl dt, .innerS dl dd{font-size: 16px;}
.inbox ul.ulno li {margin-left: 10px;}

footer {padding:5% 0;}
ul.footm{max-width:none; width:90%; display:flex; flex-wrap: wrap; margin:0 auto; padding:0;}
ul.footm li{ width:33%; margin:0;padding:0 0 5%;list-style:none; font-size:19px; color:#FFF; text-align:center;}
p.flogo{max-width:none; width:30%; height:auto; margin:0 auto; padding:2% 0;}

/* 以下ハンバーガーメニュー */
#wrapper {position: relative;left: 0;transition: left 0.5s cubic-bezier(0.075, 0.82, 0.165, 1); /* ドロワーメニューと同じ設定にしておく */}
#check_input:checked ~ #wrapper {left: -80%;}
/* input非表示 */
#check_input {display: none;}
/* ハンバーガーボタン */
#menu_btn {position: fixed;top: 10px;right: 10px;height: 70px;width: 70px;display: flex;justify-content: center;align-items: center;z-index: 100;background-color: #00b29c;cursor: pointer;}
/* 三本線*/
#menu_btn span,
#menu_btn span::before,
#menu_btn span::after {content: "";display: block;position: absolute; height: 3px; width: 25px;border-radius: 3px;background-color: #fff;transition: all 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);}
#menu_btn span::before { bottom: 8px;}
#menu_btn span::after {top: 8px;}
/* クリックされたら三本線が×に変化する */
#check_input:checked ~ #menu_btn span {background-color: transparent; }
#check_input:checked ~ #menu_btn span::before { bottom: 0; transform: rotate(45deg);}
#check_input:checked ~ #menu_btn span::after {top: 0;transform: rotate(-45deg);}
/* ドロワーメニュー */
#menu_cont {position: fixed;top: 0;left: 100%;width: 80%;height: 100%;background-color:#00b29c;opacity:0.9;z-index: 90;transition: left 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);}
/* ドロワーメニュー外の背景 */
#drawer_back {display: none;position: fixed; top: 0;left: 0;width: 100%; height: 100%;background: rgba(0, 0, 0, 0.5);z-index: 80;opacity: 0.5;}
/* メニューリストの装飾 */
#menu_cont ul {padding: 10% 10% 0}
#menu_cont ul li {list-style: none;}
#menu_cont ul li a {display: block; width: 100%;padding:30px 10px;margin: 30px auto;color:#fff;text-decoration: none;font-size:28px;}
#menu_cont ul li a:hover {opacity: 0.7;}
/* クリックされたらドロワーメニュー表示 */
#check_input:checked ~ #menu_cont {left: 20%;}
#check_input:checked ~ #drawer_back {display: block;}
}

@media only screen and (max-width: 640px) {
	#c1 h2 {top: 30%;left: 4%;font-size: 26px;}
	.chach01 p {font-size: 24px;}
	
	.c2in h2 {font-size: 26px;}
	.c3in h2 {font-size: 30px;}
	.c4in h2 {font-size: 30px;}
	ul.toku li {max-width: none;width: 88%;margin: 4% auto;}
	ul.toku li h3 {font-size: 28px;}
	ul.koe li {max-width: none;width: 88%;margin: 4% auto;}
	ul.flow li {max-width: none;width: 88%;margin: 4% auto;}
	ul.flow li h3 {font-size: 28px;}
	.c5in .c5tex p {font-size: 22px;}
	ul.footm li {font-size: 16px;}
	ul.footm {width: 96%;}
	.fs28{ font-size:30px;}
	
	.inbox{width: 90%;}
}

@media only screen and (max-width: 531px) {
	#c1 .c1tex p {font-size: 14px;}
	#c1 .c1tex {left:3%;width: 90%;padding: 10px 10px;}
	footer {padding:1% 0 5%;}
	ul.footm {width:96%;display: flex;flex-wrap: wrap;}
	ul.footm li {font-size: 16px;width:100%;margin: 0;padding:3%;text-align:left; border-bottom:1px dotted #932f37;}
}

@media only screen and (max-width: 480px) {
.pc { display: none !important; }
.sp { display: block !important;}

.menu-btn {position: absolute;top: 12px;left: 10px;z-index: 2;width: 40px;height: 40px;display: flex;justify-content: center;align-items: center;background: #913738;color: #fff;}
.menu-btn a{color: #fff;}
.menu{position: fixed;top: 0;right: 0;z-index: 1;width: 100vw;height: 100vh;display: flex;flex-direction: column;align-items: center;justify-content: center;background: #913738;}
.menu__item{width: 100%;height: auto;padding: .5em 1em;text-align: center;color: #fff;box-sizing: border-box;}
.menu{transform: translateX(100vw);transition: all .3s linear;}
.menu.is-active{transform: translateX(0);}
#menu_btn {height: 58px;width: 58px;}

.chach01 p {font-size: 19px;}
ul.cyui li {font-size: 14px;}
#c1 .c1tex { left:2%;bottom:5%;}
.c1in {padding-top: 77.6%;}
#c1 h2 { top:32%;font-size:5.7vw; letter-spacing:-0.1rem;}
.c5in {padding-top: 77.6%;}
.c5in .c5tex p {font-size: 4.7vw;}
.c5in .c5tex {bottom: 5%;left: 4%;}
.c2in h2 {font-size: 19px;}
.c3in h2 {font-size: 26px;}
.c4in h2 {font-size: 26px;}
ul.toku li h3, ul.flow li h3{font-size: 28px;}
.number {font-size: 28px;}
#c2, #c3, #c4{padding: 10% 0 5%;}
.fs28{ font-size:24px;}

.inbox{width: 90%;}
.inbox p {font-size: 14px;padding: 10px 0;}
.inbox ul li{font-size:15px;}
.inbox h2 {margin-top: 20px; font-size:18px; margin-bottom:15px;}
.inbox h3{font-size:16px;padding:15px 0;}
.inbox ul.ulno li {margin-left: 0px;}
.spbr{display: block;}
.totop {opacity: 0.85 ;bottom: 10px; right:10px; text-align:right;}
.totop img{width:68%; height:auto;}
footer{padding:10px 0;}
p.ad{font-size:12px;}

}