@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');
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic&display=swap');

@charset "UTF-8";
/********************************/
/* トップ　*/
/********************************/
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:10px 0 10px; background:#fff;overflow:hidden; display:flex;}
h1.menulogo{max-width:108px;margin:0; padding: 0 0 0 1%;}
ul.hmenu{ width:80%; text-align:right;margin:10px 10px 0 0; padding:0;}
ul.hmenu li{ display:inline-block;text-align:center; list-style:none;color:#000;  padding:0 0 0 10px; margin:0 5px; line-height:1.4; border-left:3px solid #F54767;}
ul.hmenu li a{font-size:14px;color:#000; text-decoration:none;}
ul.hmenu li a:hover{ opacity:0.5;}
header .linelink{max-width:192px; margin:0 10px 0 0; padding:0;}

#mainback{ clear:both;position:relative;height: auto;background: url(../img/mainback.jpg) no-repeat top center; background-size: cover;padding-top:37.3%; }
#mainback .maining{max-width:700px; margin:0 auto; height:auto; padding:0; text-align:center;}
#mainback .maintex{position: absolute;top: 65%;right: 0;bottom: 0;left: 0;margin:0 auto;padding:0; text-align:center;}
#mainback .maintex p{ text-align:center;font-size:3.7vw; font-weight:900; color:#DD004A; line-height:120%;text-shadow:#fff 1px 1px 5px, #fff -1px 1px 5px, #fff 1px -1px 5px, #fff -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:270px;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;-webkit-text-decoration:underline 8px #e2005c;-webkit-text-underline-offset: -0.1rem;}
.backy{background:#FFF89F; padding:2px 5px;} 
/********************************/
/* コンテンツ　*/
/********************************/

#c1{max-width:1024px; margin:0 auto 8%; padding:0;}
.c1in{position:relative;width:100%;background: url(../img/c1back.png) no-repeat top center; background-size: cover; margin:0% auto; padding-top:48%;height: auto;}
.c1in h2{ position:absolute; margin:0 auto; top:12%; left:0; right:0; bottom:0; font-size:48px; line-height:1.3;font-family: "Noto Serif JP", serif; color:#000;font-weight:900; text-align:center;text-shadow:#fff 1px 1px 5px, #fff -1px 1px 5px, #fff 1px -1px 5px, #fff -1px -1px 5px;}
.c1h2fir{ display:inline-block;font-family: "Noto Sans JP", sans-serif;font-size:28px; font-weight:600; padding-bottom:3%; line-height:1.5;}
#c1 .c1tex{width:90%; margin:0 auto; background:#fff;border-radius:6px; padding:20px 25px;}
#c1 .c1tex p{color:#000; font-size:21px; text-align:left; line-height:1.5;}


#c2{width:100%;background:#FFF7F8;margin:0 auto; padding:5% 0 5%;}
.c2in{max-width:1024px; margin:0 auto; padding:0;}
.c2in h2{max-width:340px; font-size:42px; margin:0 auto 5%; padding:10px;line-height:1.3; text-align:center; }
.h2en{ display:block;padding-bottom:10px; margin-bottom:15px;font-family: "Caveat", cursive;font-optical-sizing: auto;font-weight: 400;font-style: normal; color:#E00045;line-height:1.3; font-size:42px;border-bottom:1px solid #E00045;}
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:#F54767; font-weight:800; 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{padding-right: 17px;font-weight: 600;font-size: 32px; font-style:italic;}

#c3{width:100%;background:#fff; margin:0 auto; padding:5% 0 5%;}
.c3in{max-width:1024px; margin:0 auto; padding:0;}
.c3in h2{max-width:220px; font-size:42px; margin:0 auto 5%; padding:10px;line-height:1.3; text-align:center;}
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;}
.koetit{ display:block; text-align:center; font-size:20px; font-weight:800;}

#c4{width:100%;background:#00C0C9; margin:0 auto; padding:5% 0 5%;}
.c4in{max-width:1024px; margin:0 auto; padding:0;}
.c4in h2{max-width:220px; color:#fff; font-size:42px; margin:0 auto 3%; padding:10px;line-height:1.3; text-align:center;}
.h2en2{ display:block;padding-bottom:10px; margin-bottom:15px;font-family: "Caveat", cursive;font-optical-sizing: auto;font-weight: 400;font-style: normal; color:#fff;line-height:1.3; font-size:42px;border-bottom:1px solid #fff;}
.c4in p{text-align:center; font-size:28px; margin:0; padding:0 0 3%; line-height:1.4; color:#fff;}
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:#fff; 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:#fff; font-weight:600; line-height:1.4;}

#c5{width:100%;background:#FFFBE9; margin:0 auto; padding:5% 0 5%;}
.c5in{max-width:1024px; margin:0 auto; padding:0;}
.c5in h2{max-width:550px; color:#000; font-size:42px; margin:0 auto 5%; padding:10px;line-height:1.3; text-align:center;}
.c5in p.c5p{text-align:center; font-size:42px; margin:0; padding:0 0 1%; line-height:1.4; color:#E00045;font-family: "Zen Maru Gothic", serif;font-weight: 900;}
.c5in .c5img{max-width:860px; margin:0 auto; padding:0; text-align:center;}
.c5in .c5tex{ width:75%; margin:0 auto; background:#fff;border-radius:6px; padding:20px 25px;}
.c5in .c5tex p{color:#000;font-weight: 400; font-size:21px; text-align:left; line-height:1.5;}

#c6{width:100%;background:#fff; margin:0 auto; padding:5% 0 5%;}
.c6in{max-width:1024px; margin:0 auto; padding:0;}
.c6in h2{max-width:260px; font-size:42px; margin:0 auto 7%; padding:10px;line-height:1.3; text-align:center;}
.c6in dl{ max-width:800px; text-align:left; margin:0 auto; padding:0;}
.c6in dl dt{ color:#008989; font-size:21px; border-bottom:1px solid #000;line-height:1.5; font-weight:800; padding-bottom:2%;}
.c6in dl dd{ color:#000;font-size:21px;line-height:1.5; margin-bottom:7%;padding-top:2%;}
.c6in dl img{ max-width:58px; height:auto;display: inline-block;vertical-align: middle;}

#c7{max-width:1024px; margin:0 auto; padding:0;}
.c7in{position:relative;width:100%;background: url(../img/c7_back.jpg) no-repeat top center; background-size: cover; margin:7% auto 7%; padding-top:53.6%;height: auto;border-radius: 10px;}
.c7in .c7tex{ position:absolute; bottom:10%; left:8%; }
.c7in .c7tex p{font-size:62px; color:#DD004A; line-height:1.4;font-weight:900; 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 dl dt{ border-top: 1px solid;border-bottom: 1px solid;display: inline-block;margin: 40px auto 20px;font-size:20px;color: #333;padding:10px 0;}
.inbox h3{text-align:left;margin: 0 auto;font-size:21px;color:#333;padding:20px 0 0px;}
.inbox dl dd{font-size:16px;padding:10px 0;color: #555;text-align:left;}
.inbox dl dd ul{width:95%; margin:0 auto;text-align: left;}
.inbox dl dd ul li{font-size:16px; list-style: decimal;margin-left: 20px;}
.inbox dl dd ul.ulno li{font-size:16px; list-style: none;counter-increment: cnt;margin-left: 20px;color: #555;}
.inbox dl dd 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: #333; border-radius:10px;}
p.ptpage a{text-decoration:none; color:#fff;}
/********************************/
/* フッタ　*/
/********************************/
footer{background:#e90059;padding:0 0 3%;clear:both;margin:0 auto;}
ul.footm{max-width:650px; display:flex; flex-wrap: wrap; margin:0 auto 2%; padding:0;}
ul.footm li{ width:31%; margin:0;padding:0 0 0 10px;list-style:none; font-size:16px; color:#FFF; text-align:left; border-left:3px solid #fff;}
ul.footm li a{color:#fff; text-decoration:none;}
ul.footm li a:hover{color:#ccc;}
p.flogo{max-width:108px; 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; text-align:left;}
table.tbl_01 thead th{background:#969cfa;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{color:#DD0000;}
.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: 1280px) {
#mainback{ padding-top:47.3%; }
#mainback .maintex p {font-size: 4.7vw;}
}

@media only screen and (max-width: 1024px) {
.c7in{border-radius: 0px;}
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 li a{font-size:12px;}
.c7in .c7tex p {font-size: 56px;}
}


@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:10px 0; background:#fff;overflow:hidden;position: static;}
h1.menulogo {padding: 0; text-align:center; margin:0 auto;}

.plogo {max-width: none; width:35%; height:auto;}
ul.hmenu{display:none;}
.chach01 p {font-size: 42px;}

.c1in { padding-top:52%;margin: 0% auto;}
#c1 h2 {top: 12%;left:0;font-size: 42px;}
.c1h2fir {font-size: 24px;}
#c1 .c1tex p {font-size: 20px;}
#c1 .c1tex {width: 90%;padding: 15px 20px;}

.number {padding-right: 12px;font-size: 26px;}
ul.toku li {max-width:none; width:44%;margin: 2.8%;}
ul.toku li h3 {font-size: 22px;}

.c6in{max-width:none; width:90%; margin:0 auto; padding:0;}
.c7in .c7tex p {font-size: 44px;}

.linebt {max-width:none; width:88%;margin: 6% auto 6%;}

.inbox dl dd {font-size: 16px;}
.inbox dl dd ul li{font-size:16px;}
.inbox dl dt {font-size:18px;}
.inbox h3{font-size:20px;}
.inbox dl dd ul.ulno li {margin-left: 10px;}

footer {padding:2% 0 5%;}
ul.footm{max-width:none; width:90%; display:flex; flex-wrap: wrap; margin:0 auto 20px; padding:0;justify-content: center;}
ul.footm li{ width:auto; margin:0 10px 0 0;padding:0 0 0 5px;list-style:none; font-size:18px; color:#FFF;}
p.flogo{max-width:none; width:20%; height:auto; margin:0 auto; padding:2% 0 5%;}

/* 以下ハンバーガーメニュー */
#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: #DD004A;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:#DD004A;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) {
	.c1h2fir {font-size: 22px;}
	#c1 h2 {font-size: 32px;}
	.chach01 p {font-size: 35px;}
	
	
	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 h2 { max-width: 500px;font-size: 35px; text-align: center;}
	.c5in .c5tex p {font-size: 20px;}
	.c5in p.c5p {font-size: 36px;}
	.c6in dl dt {font-size: 18px;}
	.c6in dl dd {font-size: 18px;}
	.c7in {padding-top: 63.6%;}
	.c7in .c7tex p {font-size: 36px;}
	.c7in .c7tex {bottom: 10%;left: 2%;}
	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: 16px;}
	#c1 .c1tex {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;}

header {padding: 5px 0;}
h1.menulogo {max-width:none; width:15%;}
.plogo {width: 30%;}
.chach01 p {font-size:24px;}
ul.cyui {padding: 0 0 18%;}
ul.cyui li {font-size: 14px;}
.c1in {padding-top: 60%;}
#c1 h2{top: 10%;left:0;font-size: 26px;}
.c1h2fir {font-size: 16px;padding-bottom: 6%;}
.h2en,  .h2en2{padding-bottom: 5px;margin-bottom: 10px;font-size: 36px;}
.c2in h2 {font-size: 30px;max-width: 300px;}
ul.toku li h3, ul.flow li h3{font-size: 26px;}
.c3in h2 {font-size: 30px;}
.c4in h2 {font-size: 30px;}
.c4in p {font-size: 22px;}

ul.koe li {margin: 4% auto 5%;}
ul.koe li p {font-size: 16px;padding: 5px 0 10px;}
.c5in { max-width:none; width:100%; padding:0; }
.c5in h2 {font-size: 24px;max-width: 360px;}
.c5in p.c5p {font-size: 28px;}
.c5in .c5tex p {font-size:18px;}
.c5in .c5tex {width: 88%;padding: 15px 15px;}

.c6in h2{max-width:220px; font-size: 30px;}
.c6in dl img {max-width: 38px;}
.c6in dl dd {margin-bottom: 15%;}
.c7in {padding-top: 70%;}
.c7in .c7tex p {font-size: 28px;}
.number {font-size: 28px;}
#c2, #c3, #c4{padding: 10% 0 5%;}
#c5{padding: 10% 0 10%;}
#c6{padding: 10% 0 0%;}
.fs28{ font-size:24px;}

p.flogo {width: 20%;}
ul.footm li {font-size: 16px;width: 100%;margin: 0;padding: 3%;border-left:none;}

#menu_cont ul li a {font-size: 24px;padding: 20px 10px;}

.inbox{width: 90%;}
.inbox dl dd {font-size: 14px;padding: 10px 0;}
.inbox dl dd ul li{font-size:15px;}
.inbox dl dt {margin-top: 20px; font-size:16px; margin-bottom:15px;}
.inbox h3{font-size:16px;padding:15px 0;}
.inbox dl dd 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;}

}