@charset "utf-8";

@media (max-width: 801px) {
	#wrapper { background: url('../img/bg/kv@sp.jpg') no-repeat 50% 0 / 100% auto;}
}

#page-kv { position: relative; background: url('../img/bg/kv.jpg') no-repeat 50% 0 / 2500px auto;}
#page-kv .inner-kv {}
#page-kv .ctn { position: absolute; width: 100%; z-index: 5;}
#page-kv .ctn .inner { position: relative; width: 92%; max-width: 1100px; margin: 0 auto; padding-top: 180px;}
#page-kv .ctn h1 { line-height: 1; transition: 0.36s linear; transition-delay: 1.2s; opacity: 0;}
#page-kv .ctn h1 img { width: 80%; max-width: 560px;}
#page-kv .ctn p { font-size: 18px; font-weight: 600; letter-spacing: 0.1rem;}
#page-kv .bg { position: relative; width: 100%; height: 460px; overflow: hidden;}
#page-kv .bg .line { position: absolute; left: 0; bottom: 30px; width: 100%; z-index: 2;}
#page-kv .bg .line .line-pc { position: relative; width: 100%; padding-top: 330px; overflow: hidden;}
#page-kv .bg .line .line-pc svg { position: absolute; left: 50%; top: 0; width: auto; width: 1850px; transform: translateX(-50%);}
#page-kv .bg .line .line-pc svg .cls-1 { fill: none; stroke: #fff;
 stroke-width: 15px;
 stroke-dasharray: 4000;
 stroke-dashoffset: 4000;
}
#page-kv .bg .line .line-pc image { width: 100%;}

#page-kv .bg .line .line-sp { display: none; position: relative; width: 100%; padding-top: 30vw; overflow: hidden;}
#page-kv .bg .line .line-sp svg { position: absolute; left: 0; bottom: 0; width: 100%;}
#page-kv .bg .line .line-sp svg .cls-1 { fill: none; stroke: #fff;
 stroke-width: 15px;
 stroke-dasharray: 2000;
 stroke-dashoffset: 2000;
}
#page-kv .bg .line .line-sp image { width: 100%;}

#page-kv.show .ctn h1 { opacity: 1;}
#page-kv.show .bg .circle { opacity: 1;}
#page-kv.show .bg .line .line-pc svg .cls-1 { animation: 2.4s ease-in-out wave-1 forwards; animation-delay: 0s;}
#page-kv.show .bg .line .line-sp svg .cls-1 { animation: 1.4s linear wave-1sp forwards; animation-delay: 0.8s;}
@keyframes wave-1{
 0% { stroke-dashoffset: 4000;}
 100% { stroke-dashoffset: 0;}
}
@keyframes wave-1sp{
 0% { stroke-dashoffset: 2000;}
 100% { stroke-dashoffset: 0;}
}

@media (max-width: 801px) {
	#page-kv { background: none;}
	#page-kv .ctn .inner { padding-top: 24vw;}
	#page-kv .bg { height: 52vw;}
	#page-kv .bg .line { bottom: 0px;}
	#page-kv .bg .line .line-pc { display: none;}
	#page-kv .bg .line .line-sp { display: block;}
}
@media (max-width: 641px) {
}
@media (max-width: 481px) {
	#page-kv .ctn .inner { padding-top: 18vw;}
	#page-kv .bg { height: 46vw;}
}




#about {}
#about .inner-sct { padding: 40px 0 60px;}
#about .ttl { margin-bottom: 50px;}
#about .ttl h2 { transition-delay: 1.6s;}
#about .ttl h2 img { width: 180px;}
#about .ctn { width: 86%; max-width: 1100px; margin: 0 auto; transition: 0.5s cubic-bezier(0.5, 1, 0.89, 1); transition-delay: 1.8s; opacity: 0;}
#about .flex { display: flex; justify-content: space-between; width: 100%;}
#about .flex.re { flex-direction: row-reverse;}
#about .flex.mb { margin-bottom: 50px;}
#about .txt { width: 540px;}
#about .fig { width: calc(100% - 580px);}
#about .txt p { margin-bottom: 30px; letter-spacing: 0.1rem; line-height: 1.85;}
#about .txt p:last-of-type { margin-bottom: 0px;}
#about .txt p span { display: block;}
#about .fig h3 { margin-bottom: 20px; font-size: 20px; font-weight: 700; text-align: center;}
#about .fig figure { text-align: center;}
#about .fig figure img { width: 100%;}
#about .btn a { max-width: 160px; font-size: 22px;}
#about .btn a span { padding-left: 30px;}
#about.show .ttl h2 { opacity: 1;}
#about.show .ctn { opacity: 1;}
@media (max-width: 1001px) {
	#about .fig { width: calc(100% - 480px);}
	#about .txt { width: 450px;}
	#about .txt p { font-size: 14px;}
}
@media (max-width: 801px) {
	#about .ttl { margin-bottom: 30px;}
	#about .flex { display: block;}
	#about .flex.mb { margin-bottom: 30px;}
	#about .txt { width: 100%; margin-bottom: 30px;}
	#about .fig { width: 100%;}
	#about .fig figure { text-align: center;}
	#about .fig figure img { width: 90%; max-width: 500px;}
	#about .txt p { margin-bottom: 20px;}
}
@media (max-width: 481px) {
	#about .inner-sct { padding: 40px 0;}
	#about .ttl { margin-bottom: 20px;}
	#about .ttl h2 img { width: auto; height: 25px;}
	#about .txt { margin-bottom: 20px;}
	#about .fig h3 { margin-bottom: 12px; font-size: 16px;}
	#about .txt p { margin-bottom: 12px; font-size: 12px; line-height: 1.65;}
}


#program .inner-sct { padding: 60px 0;}
#program .ttl { margin-bottom: 40px;}
#program .ttl h2 img { width: 240px; vertical-align: middle;}
#program .ttl h2 span{ vertical-align: middle;}
#program .ctn { width: 86%; max-width: 1100px; margin: 0 auto;}
#program .flex { display: flex; justify-content: space-between; width: 100%;}
#program .box { width: 23%; max-width: 240px; transition: 0.5s cubic-bezier(0.5, 1, 0.89, 1); transform: translateY(20px); opacity: 0;}
#program .box:nth-of-type(1) {}
#program .box:nth-of-type(2) { transition-delay: 0.2s;}
#program .box:nth-of-type(3) { transition-delay: 0.4s;}
#program .box:nth-of-type(4) { transition-delay: 0.6s;}
#program .box h3 { text-align: center;}
#program .box h3 img { width: 50%; max-width: 80px;}
#program .box p { margin-bottom: 15px; font-size: 14px; letter-spacing: 0.1rem;}
#program .box p:last-child { margin-bottom: 0px;}
#program .box p span { display: block; padding: 20px 0; font-size: 18px; font-weight: 700; line-height: 1.2; text-align: center;}
#program .box p a { color: #333;}
#program .box p a:hover { text-decoration: none;}
#program .box ul { margin-bottom: 15px; padding-left: 1.2em; list-style: disc;}
#program .box ul li { font-size: 14px;}

#program .show .box { transform: translateY(0px); opacity: 1;}
@media (max-width: 1001px) {
	#program .box p { font-size: 13px;}
	#program .box ul li { font-size: 13px;}
}
@media (max-width: 801px) {
	#program .ttl { margin-bottom: 20px;}
	#program .flex { flex-wrap: wrap;}
	#program .box { width: 48%; max-width: 48%; padding: 20px 0;}
}
@media (max-width: 481px) {
	#program .inner-sct { padding: 40px 0;}
	#program .ttl { margin-bottom: 12px;}
	#program .ttl h2 img { width: auto; height: 36px;}
	#program .flex { display: block;}
	#program .box { width: 100%; max-width: 100%; padding: 16px 0px;}
	#program .box p span { padding: 10px 0;}
}


#purpose .inner-sct { padding: 60px 0;}
#purpose .ttl { margin-bottom: 30px;}
#purpose .ttl h2 img { width: 230px; vertical-align: middle;}
#purpose .ttl h2 span{ vertical-align: middle;}
#purpose .ctn { width: 86%; max-width: 1100px; margin: 0 auto;
 transition: 0.5s cubic-bezier(0.5, 1, 0.89, 1); transform: translateY(20px); opacity: 0;
}
#purpose .flex { display: flex; justify-content: space-between; flex-direction: row-reverse; width: 100%;}
#purpose .pht { width: calc(100% - 580px);}
#purpose .txt { width: 560px;}
#purpose .pht h3 { margin-bottom: 20px; font-size: 20px; font-weight: 700; text-align: center;}
#purpose .pht figure { text-align: center;}
#purpose .pht figure img { width: 100%;}
#purpose .txt p { margin-bottom: 30px; letter-spacing: 0.1rem; line-height: 1.85;}
#purpose .txt p:last-of-type { margin-bottom: 0px;}
#purpose .ctn.show { transform: translateY(0px); opacity: 1;}
@media (max-width: 1001px) {
	#purpose .pht { width: calc(100% - 520px);}
	#purpose .txt { width: 480px;}
	#purpose .txt p { font-size: 14px;}
}
@media (max-width: 801px) {
	#purpose .ttl { margin-bottom: 20px;}
	#purpose .flex { display: block;}
	#purpose .pht { width: 100%; margin-bottom: 30px;}
	#purpose .txt { width: 100%;}
	#purpose .pht figure img { width: 80%; max-width: 400px; }
	#purpose .txt p { margin-bottom: 20px;}
}
@media (max-width: 481px) {
	#purpose .inner-sct { padding: 40px 0;}
	#purpose .ttl h2 img { width: auto; height: 36px;}
	#purpose .pht { margin-bottom: 20px;}
	#purpose .txt p { margin-bottom: 12px; font-size: 12px;}
}



#member .inner-sct { padding: 60px 0;}
#member .ttl { margin-bottom: 20px;}
#member .ttl h2 img { width: 240px;}
#member .ctn { width: 86%; max-width: 1100px; margin: 0 auto;}
#member .bloc { width: 100%; padding: 30px 0; transition: 0.36s linear; opacity: 0;}
#member .flex { position: relative; display: flex; justify-content: space-between; width: 100%;
 transition: 0.5s cubic-bezier(0.5, 1, 0.89, 1); transform: translateY(20px);
}
#member .pht { width: 24%;}
#member .txt { width: 72%;}
#member .pht figure { position: relative;}
#member .pht figure img { display: block; width: 100%; }
#member .pht figure img.def { position: relative; transition: 0.3s ease; opacity: 1;}
#member .pht figure img.hover{ position: absolute; left: 0; top: 0; transition: 0.3s ease; opacity: 0;}
#member .txt h3 { margin-bottom: 10px; font-weight: 700; letter-spacing: 0.1rem;}
#member .txt h3 span { display: inline-block; vertical-align: middle;}
#member .txt h3 span.name { margin-right: 20px; font-size: 18px;}
#member .txt h3 span.group{ font-size: 14px; padding: 2px 20px; background: #ececec; border-radius: 50px;}
#member .txt .inner { position: relative;}
#member .txt .hover { position: absolute; left: 0; top: 0;}
#member .txt .def { transition: 0.3s ease; opacity: 1;}
#member .txt .def p { font-size: 14px; letter-spacing: 0.1rem;}
#member .txt .def p.area { margin-bottom: 8px; font-weight: 700;}
#member .txt .def p.comment{ line-height: 1.8;}
#member .txt .hover { transition: 0.3s ease; opacity: 0;}
#member .txt .hover p { font-size: 14px; letter-spacing: 0.1rem;}
#member .txt .hover p.hobby { margin-bottom: 8px; font-weight: 700;}
#member .txt .hover p.comment{ line-height: 1.8;}

#member .flex:hover .pht figure img.def { opacity: 0;}
#member .flex:hover .pht figure img.hover { opacity: 1;}
#member .flex:hover .txt .def { opacity: 0;}
#member .flex:hover .txt .hover { opacity: 1;}

#member .bloc.show { opacity: 1;}
#member .show .flex { transform: translateY(0px);}
@media (max-width: 801px) {
	#member .txt h3 span.name { margin-right: 16px; font-size: 16px;}
	#member .txt h3 span.group{ font-size: 12px;}
	#member .txt .def p { font-size: 13px;}
	#member .txt .hover p { font-size: 13px;}
}
@media (max-width: 481px) {
	#member .inner-sct { padding: 40px 0;}
	#member .ttl { margin-bottom: 12px;}
	#member .ttl h2 img { width: auto; height: 25px;}
	#member .bloc { padding: 16px 0;}
	#member .flex { display: block;}
	#member .pht { width: 50%; margin: 0 auto 20px;}
	#member .txt { width: 100%;}
	#member .txt h3 { margin-bottom: 6px;}
	#member .txt h3 span.name { margin-right: 12px; font-size: 14px;}
	#member .txt h3 span.group{ font-size: 10px;}
	#member .txt .def p { font-size: 12px; letter-spacing: 0.05rem;}
	#member .txt .def p.area { margin-bottom: 4px;}
	#member .txt .hover p { font-size: 12px; letter-spacing: 0.05rem;}
	#member .txt .hover p.hobby { margin-bottom: 4px;}
}


#media .inner-sct { padding: 80px 0;}
#media .ttl { margin-bottom: 30px;}
#media .ttl h2 img { width: 180px;}
#media .ctn { width: 86%; max-width: 1100px; margin: 0 auto; transition: 0.3s ease; opacity: 0;}
#media .ctn ul { position: relative; transition: 0.5s cubic-bezier(0.5, 1, 0.89, 1); transform: translateY(20px);}
#media .ctn ul li { position: relative; padding: 20px 0; padding-left: 150px; border-bottom: dashed 1px #ccc; font-size: 14px; letter-spacing: 0.08rem;}
#media .ctn ul li:last-child { border-bottom: none;}
#media .ctn ul li time { display: block; width: 120px; padding: 2px; background: #eee; border-radius: 50px; text-align: center;
 position: absolute; left: 0; top: 20px; font-size: 14px; line-height: 1.2;
}
#media .ctn ul li span { display: block; font-weight: 700;}
#media .ctn.show { opacity: 1;}
#media .ctn.show ul { transform: translateY(0px);}
@media (max-width: 481px) {
	#media .inner-sct { padding: 40px 0;}
	#media .ttl { margin-bottom: 20px;}
	#media .ttl h2 img { width: auto; height: 25px;}
	#media .ctn ul li { padding: 12px 0; font-size: 13px;}
	#media .ctn ul li time { position: relative; left: auto; top: auto; width: 90px; margin-bottom: 6px; font-size: 11px;}
}




#voice { transition: 0.3s ease; transition-delay: 1.6s; opacity: 0;}
#voice.show { opacity: 1;}
#voice .inner-sct { padding: 40px 0;}
#voice .ttl { margin-bottom: 20px;}
#voice .ttl h2 img { width: 240px;}
#voice .ctn { width: 86%; max-width: 1100px; margin: 0 auto;}
#voice .bloc { width: 100%; padding: 30px 0; transition: 0.36s linear; opacity: 1;}
#voice .flex { position: relative; display: flex; justify-content: space-between; width: 100%;
 transition: 0.5s cubic-bezier(0.5, 1, 0.89, 1); transform: translateY(0px);
}
#voice .pht { width: 24%;}
#voice .txt { width: 72%;}
#voice .pht figure { position: relative;}
#voice .pht figure img { display: block; width: 100%; }
#voice .txt h3 { margin-bottom: 10px; font-size: 20px; font-weight: 700; letter-spacing: 0.1rem;}
#voice .txt h3 span {}
#voice .txt p { margin-bottom: 20px; font-size: 16px; letter-spacing: 0.1rem; line-height: 1.8;}
#voice .txt .btn { max-width: 300px; margin: 0 0 0 auto;}
#voice .txt .btn a { font-size: 18px;}

#voice .bloc.show { opacity: 1;}
#voice .show .flex { transform: translateY(0px);}
@media (max-width: 801px) {
	#voice .txt h3 span.area { display: block;}
	#voice .txt h3 span.name { display: block;}
	#voice .txt p { font-size: 14px;}
	#voice .txt .btn a { font-size: 16px;}
}
@media (max-width: 481px) {
	#voice .inner-sct { padding: 20px 0;}
	#voice .bloc { padding: 20px 0;}
	#voice .flex { display: block;}
	#voice .pht { width: 50%; margin: 0 auto 20px;}
	#voice .txt { width: 100%;}
	#voice .txt h3 { margin-bottom: 8px; font-size: 16px;}
	#voice .txt p { margin-bottom: 12px; font-size: 13px; letter-spacing: 0.05rem;}
	#voice .txt .btn { max-width: 220px;}
	#voice .txt .btn a { font-size: 13px;}
}



#dictionary { transition: 0.3s ease; transition-delay: 1.6s; opacity: 0;}
#dictionary.show { opacity: 1;}

#dictionary .inner-sct { padding: 40px 0 80px;}
#dictionary .wrap-flex { display: flex; justify-content: space-between; width: 92%; max-width: 1200px; margin: 0 auto;}
#dictionary .main { width: 70%;}
#dictionary .side { width: 26%;}

#dictionary .main h4.tit { margin-bottom: 10px; font-size: 18px; font-weight: 600; letter-spacing: 0.1rem;}
#dictionary .main .ctn { display: flex; flex-wrap: wrap; justify-content: space-between;}
#dictionary .main .box { position: relative; width: 47.5%; padding: 20px 15px 36px;}
#dictionary .main .box span.tags { position: absolute; left: 0; top: 5px; z-index: 5; display: inline-flex; flex-wrap: wrap;}
#dictionary .main .box span.tag {
 display: inline-block; padding: 4px 20px 5px;
 background: #fff; border: solid 1px #105d9b; border-radius: 50px;
 color: #105d9b; font-size: 16px; font-weight: 600; line-height: 1.2;
}
#dictionary .main .box a { position: relative; z-index: 1; display: block; color: #000; text-decoration: none;
 transition: 0.36s linear;
}
#dictionary .main .box a dl dt { position: relative; width: 100%; margin-bottom: 12px; padding-top: 64%; border: solid 1px #105d9b; border-radius: 20px; overflow: hidden;}
#dictionary .main .box a dl dt span.thumb { display: block; width: 102%; padding-top: 66%;
 position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
 background-size: cover; background-repeat: no-repeat; background-position: 50% 50%;
 transition: 0.4s ease-out;
}
#dictionary .main .box a dl dd { font-size: 18px; font-weight: 600; letter-spacing: 0.1rem;}
#dictionary .main .box a:hover { opacity: 0.8;}
#dictionary .main .box a:hover dl dt span.thumb { transform: translate(-50%,-50%) scale(1.08);}


#dictionary .dictionary-pager { text-align: center;}
#dictionary .dictionary-pager ol { font-size: 0;}
#dictionary .dictionary-pager ol li { display: inline-block; padding: 4px; font-size: 16px;}
#dictionary .dictionary-pager ol li span,
#dictionary .dictionary-pager ol li a { display: block; width: 30px; height: 30px; font-weight: 700;}
#dictionary .dictionary-pager ol li span.current { background: #105d9b; color: #fff;}
#dictionary .dictionary-pager ol li a { background: #fff; border: solid 1px #105d9b; color: #105d9b; text-decoration: none;}
#dictionary .dictionary-pager ol li a:hover { background: #105d9b; color: #fff;}


@media (max-width: 1001px) {
	#dictionary .main .box { padding: 12px 10px 30px;}
	#dictionary .main .box span.tags { top: 0px;}
	#dictionary .main .box span.tag { font-size: 14px;}
	#dictionary .main .box a dl dd { font-size: 16px;}
}
@media (max-width: 801px) {
	#dictionary .wrap-flex { display: block; width: 90%;}
	#dictionary .main { width: 100%; margin-bottom: 40px;}
	#dictionary .side { width: 100%;}
}
@media (max-width: 481px) {
	#dictionary .main h4.tit { font-size: 14px; letter-spacing: 0.05rem;}
	#dictionary .main .box { padding: 10px 5px 25px;}
	#dictionary .main .box span.tag { padding: 2px 12px 3px; font-size: 10px;}
	#dictionary .main .box a dl dt { margin-bottom: 8px; border-radius: 12px;}
	#dictionary .main .box a dl dd { font-size: 12px; font-weight: 400; letter-spacing: 0.05rem;}
}




#flow { transition: 0.3s ease; transition-delay: 1.6s; opacity: 0;}
#flow.show { opacity: 1;}

#flow .inner-sct { padding: 40px 0 80px;}
#flow .ttl { margin-bottom: 40px;}
#flow .ttl h2 img { width: 285px;}
#flow .ctn { width: 86%; max-width: 1100px; margin: 0 auto; transition: 0.5s cubic-bezier(0.5, 1, 0.89, 1); transition-delay: 1.8s; opacity: 1;}
#flow .ctn ol { margin: 0 auto 30px; font-size: 0;}
#flow .ctn ol li { position: relative; display: inline-block; width: 20%; font-size: 14px; line-height: 1.4; vertical-align: middle;}
#flow .ctn ol li:before { content: ''; display: block; width: 100%; height: 100%;
 position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
 background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 220 72" width="220px" height="72px"><polygon points="200 72 0 72 20 36 0 0 200 0 220 36 200 72" fill="%23ececec"/></svg>');
 background-repeat: no-repeat; background-size: 100% auto; background-position: 50% 50%;
}
#flow .ctn ol li:nth-child(1):before { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 220 72" width="220px" height="72px"><polygon points="200 72 0 72 0 36 0 0 200 0 220 36 200 72" fill="%23105d9b"/></svg>');
}

#flow .ctn ol li span { position: relative; z-index: 2; display: block; width: 100%; padding: 15px 0; text-align: center;}
#flow .ctn ol li:nth-child(1) span { color: #fff; font-weight: 700;}
#flow .ctn ol li:nth-child(3) span,
#flow .ctn ol li:nth-child(4) span,
#flow .ctn ol li:nth-child(5) span { padding: 25px 0;}

#flow .flex { display: flex; justify-content: space-between; width: 100%;}
#flow .txt { width: 620px;}
#flow .fig { width: calc(100% - 650px);}
#flow .txt p { margin-bottom: 30px; letter-spacing: 0.1rem; line-height: 1.85;}
#flow .txt p:last-of-type { margin-bottom: 0px;}
#flow .txt p span { display: block;}
#flow .fig h3 { margin-bottom: 20px; font-size: 20px; font-weight: 700; text-align: center;}
#flow .fig figure { text-align: center;}
#flow .fig figure img { width: 100%; height: 100%;}

#flow.show .ttl h2 { opacity: 1;}
@media (max-width: 1001px) {
	#flow .ctn ol li { font-size: 12px;}
	#flow .fig { width: calc(100% - 500px);}
	#flow .txt { width: 450px;}
	#flow .txt p { font-size: 14px;}
}
@media (max-width: 801px) {
	#flow .ttl { margin-bottom: 30px;}
	#flow .ctn ol { width: 100%; max-width: 320px;}
	#flow .ctn ol li { display: block; width: 100%; font-size: 14px;}

	#flow .ctn ol li:before {
	 background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 220 80" width="220px" height="80px"><polygon points="0 60 0 0 220 0 220 55 110 80 0 55" fill="%23ececec"/></svg>'); background-size: 100% 100%;
	}
	#flow .ctn ol li:nth-child(1):before { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 220 80" width="220px" height="80px"><polygon points="0 60 0 0 220 0 220 55 110 80 0 55" fill="%23105d9b"/></svg>');
	}
	#flow .ctn ol li span { padding: 20px 0 30px;}
	#flow .ctn ol li:nth-child(3) span,
	#flow .ctn ol li:nth-child(4) span,
	#flow .ctn ol li:nth-child(5) span { padding: 25px 0 30px;}

	#flow .flex { display: block;}
	#flow .txt { width: 100%; margin-bottom: 30px;}
	#flow .fig { width: 100%;}
	#flow .fig figure img { width: 80%; max-width: 400px; }
	#flow .txt p { margin-bottom: 20px;}
}
@media (max-width: 481px) {
	#flow .inner-sct { padding: 40px 0;}
	#flow .ttl { margin-bottom: 20px;}
	#flow .ttl h2 img { width: auto; height: 25px;}
	#flow .ctn ol li span { padding: 15px 0 25px;}
	#flow .ctn ol li:nth-child(3) span,
	#flow .ctn ol li:nth-child(4) span,
	#flow .ctn ol li:nth-child(5) span { padding: 25px 0 35px;}
	#flow .fig { margin-bottom: 20px;}
	#flow .txt p { margin-bottom: 12px; font-size: 12px;}
}



#slide .inner-sct { padding: 40px 0 80px;}
#slide .ttl { margin-bottom: 30px;}
#slide.show .ttl h2 { opacity: 1;}
#slide .ttl h2 img { width: 135px;}
#slide .ctn { width: 86%; max-width: 600px; margin: 0 auto 30px;
 transition: 0.3s ease; transition-delay: 0.6s; opacity: 0;
}
#slide .ctn .frame { position: relative; width: 100%; margin: 0 auto 30px; padding-top: 80.8%;}
#slide .ctn iframe { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
 width: 100%; height: 100%; border: none;
}

#slide .ctn .submit { position: relative; width: 100%; max-width: 580px; margin: 0 auto; border-radius: 50px; background: #105d9b; overflow: hidden;}
#slide .ctn .submit::before,
#slide .ctn .submit::after { content: ''; display: block; position: absolute; top: 50%;}
#slide .ctn .submit::before{ width: 18px; height: 18px; left: 15px; transform: translate(-100px,-50%) scale(0);
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 50 45" width="50px" height="45px"><path d="M49.34,24.31c.07-.1.12-.21.17-.32.06-.12.14-.23.19-.36.06-.13.09-.27.13-.41.03-.11.07-.21.1-.32.1-.51.1-1.03,0-1.54-.02-.11-.06-.21-.1-.32-.04-.14-.07-.28-.13-.41-.05-.13-.12-.24-.19-.36-.06-.11-.11-.22-.17-.32-.13-.2-.28-.38-.45-.55-.02-.02-.03-.04-.04-.05L30.65,1.15c-1.54-1.54-4.03-1.54-5.56,0-1.54,1.54-1.54,4.03,0,5.56l11.48,11.48H3.93c-2.17,0-3.93,1.76-3.93,3.93s1.76,3.93,3.93,3.93h32.63l-11.48,11.48c-1.54,1.54-1.54,4.03,0,5.56.77.77,1.78,1.15,2.78,1.15s2.01-.38,2.78-1.15l18.2-18.2s.03-.04.04-.05c.16-.17.32-.35.45-.55Z" fill="%23ffffff"></path></svg>');
 background-repeat: no-repeat; background-size: 100% auto; background-position: 50% 50%;
 transition: 0.4s ease 0.1s;
}
#slide .ctn .submit::after { content: ''; display: block; width: 9px; height: 9px; background: #fff; border-radius: 50%; right: 20px;
 transform: translate(0,-50%); transition: 0.4s ease;
}

#slide .ctn .submit input[type="button"] { display: block; width: 100%; padding: 15px; background: none; border: none;
 color: #fff; font-size: 20px; font-weight: 700; text-align: center;
 transition: 0.4s ease 0.06s; z-index: 2;
}
#slide .ctn .submit:hover { background: #407daf;}
#slide .ctn .submit:hover:before { transform: translate(0,-50%) scale(1);}
#slide .ctn .submit:hover:after { height: 2px; transform: translate(50px,-50%);}
#slide .ctn .submit:hover input[type="button"] { text-indent: 25px;}

#slide .note { text-align: center; transition: 0.3s ease; transition-delay: 0.6s; opacity: 0;}
#slide .note ul { display: inline-block; padding: 0 20px; text-align: left;}
#slide .note ul li { font-size: 14px;}

#slide.show .ctn { opacity: 1;}
#slide.show .note { opacity: 1;}
@media (max-width: 801px) {
	#slide .ctn .submit input[type="button"]{ padding: 12px; font-size: 16px;}
}
@media (max-width: 481px) {
	#slide .ttl { margin-bottom: 20px;}
	#slide .ttl h2 img { width: auto; height: 25px;}
	#slide .ctn .submit input[type="button"]{ padding: 10px; font-size: 13px;}
	#slide .note ul li { font-size: 11px;}
}



#article { transition: 0.3s ease; transition-delay: 1.6s; opacity: 0;}
#article.show { opacity: 1;}

#article .inner-sct { padding: 40px 0 80px;}
#article .wrap-flex { display: flex; justify-content: space-between; width: 92%; max-width: 1200px; margin: 0 auto;}
#article .main { width: 70%;}
#article .side { width: 26%;}
@media (max-width: 801px) {
	#article .wrap-flex { display: block; width: 90%;}
	#article .main { width: 100%; margin-bottom: 40px;}
	#article .side { width: 100%;}
}



#article .article-hd { margin-bottom: 20px; padding-bottom: 15px; border-bottom: solid 1px #000;}
#article .article-hd p { margin-bottom: 8px; line-height: 1.2;}
#article .article-hd p time { display: inline-block; color: #999; font-size: 14px; vertical-align: middle;}
#article .article-hd p span { display: inline-block; margin-left: 10px; vertical-align: middle;
 padding: 4px 20px; background: #f0f0f0; border-radius: 50px; color: #333; font-size: 12px;
}
#article .article-hd h2 { font-size: clamp(18px,2.4vw,24px);}

#article .article-ctn { margin-bottom: 100px;}
#article .article-ctn .detail-article-ttl-border { margin-bottom: 20px;
    padding: 20px 0;
    border-top: 1px solid #3d3d3d;
    border-bottom: 1px solid #3d3d3d;
}
#article .article-ctn h3 { font-size: clamp(16px,2.1vw,21px);}
#article .article-ctn h4 { font-size: clamp(15px,2.0vw,20px);}
#article .article-ctn p { margin-bottom: 30px; letter-spacing: 0.1rem;}
#article .article-ctn a { color: #105d9b;}
#article .article-ctn a:hover { text-decoration: none;}

#article .article-ctn .alignnone,
#article .article-ctn .alignleft,
#article .article-ctn .alignright,
#article .article-ctn .aligncenter { display: block; max-width: 100%; height: auto;}
#article .article-ctn .alignnone,
#article .article-ctn .aligncenter { margin: 0 auto;}
#article .article-ctn .alignright { margin: 0 0 0 auto;}
#article .article-ctn .alignnone img,
#article .article-ctn .alignleft img,
#article .article-ctn .alignright img,
#article .article-ctn .aligncenter img { display: block; max-width: 100%; height: auto;}
#article .article-ctn .alignnone img,
#article .article-ctn .aligncenter img { margin: 0 auto;}
#article .article-ctn .alignright img { margin: 0 0 0 auto;}

#article .article-ctn .wp-caption img { margin-bottom: 10px;}
#article .article-ctn .wp-caption p { font-size: 14px;}
@media (max-width: 481px) {
	#article .article-ctn { margin-bottom: 80px;}
	#article .article-ctn .detail-article-ttl-border { padding: 12px 0;}
	#article .article-ctn p { margin-bottom: 20px; font-size: 14px; letter-spacing: 0.05rem;}
	#article .article-ctn .wp-caption p { font-size: 12px;}
}



#article ul.detail-pager { display: flex; justify-content: space-between; width: 100%; margin-bottom: 60px; font-size: 0;}
#article ul.detail-pager li { width: 48%; font-size: 14px;}
#article ul.detail-pager li a { position: relative; display: block; width: 100%; color: #000; text-decoration: none;}
#article ul.detail-pager li.float-l a { padding-left: 100px;}
#article ul.detail-pager li.float-r a { padding-right: 100px;}
#article ul.detail-pager li a span.detail-pager-head { display: block; width: 90px; padding: 2px 0; background: #f0f0f0; border-radius: 50px;
 position: absolute; top: 50%; transform: translateY(-50%);
 font-size: 12px; text-align: center;
}
#article ul.detail-pager li.float-l a span.detail-pager-head { left: 0; }
#article ul.detail-pager li.float-r a span.detail-pager-head { right: 0;}
#article ul.detail-pager li a:hover { color: #105d9b;}
@media (max-width: 481px) {
	#article ul.detail-pager li { font-size: 12px;}
	#article ul.detail-pager li.float-l a { padding-top: 28px; padding-left: 0px;}
	#article ul.detail-pager li.float-r a { padding-top: 28px; padding-right: 0px;}
	#article ul.detail-pager li a span.detail-pager-head { top: 0; transform: translateY(0%);}
}


#article .dictionary-detail-bottom {}
#article .dictionary-detail-bottom h3 { margin-bottom: 20px; padding-bottom: 10px; border-bottom: solid 1px #000;
 font-size: clamp(16px,1.8vw,18px); font-weight: 700;
}

#article ul.dictionary-detail-bottom-keyword { margin-bottom: 40px;}
#article ul.dictionary-detail-bottom-keyword li { display: inline-block; padding: 5px 8px; padding-left: 0px; font-size: 14px;}
#article ul.dictionary-detail-bottom-keyword li a { position: relative; display: block; padding: 4px 10px; padding-left: 25px; line-height: 1.2;
 background: #f0f0f0; border-radius: 50px; color: #333; text-decoration: none;
}
#article ul.dictionary-detail-bottom-keyword li a:before { content: ''; display: block; width: 12px; height: 12px;
 background: url('/wp-content/themes/area_partner/assets/img/common/icon/tag_icon.png') no-repeat 50% 50% / 100% auto;
 position: absolute; top: 50%; left: 8px; transform: translateY(-50%);
}
#article ul.dictionary-detail-bottom-keyword li a:hover { background: #105d9b; color: #fff;}


#article .yarpp-related ul { font-size: 0; }
#article .yarpp-related ul li { display: inline-block; width: 50%; padding: 10px; font-size: 14px; vertical-align: top;}
#article .yarpp-related ul li a { position: relative; display: block; min-height: 60px; padding: 4px; padding-left: 80px; color: #000;}
#article .yarpp-related ul li a .inner02-dictionary-bottom-news-img { width: 60px; height: 60px;
 background-size: cover; background-position: 50% 50%;
 position: absolute; left: 0; top: 50%; transform: translateY(-50%);
}
#article .yarpp-related ul li a:hover { text-decoration: none;}
@media (max-width: 641px) {
	#article .yarpp-related ul li { display: block; width: 100%; padding: 8px 0;}
}
@media (max-width: 481px) {
}




.side h3 { margin-bottom: 12px;}
.side h3.mb0 { margin-bottom: 0px;}
.side h3 img { display: inline-block; vertical-align: middle; margin-right: 15px;}
.side h3 img.cate { width: 50%; max-width: 180px;}
.side h3 img.search { width: 35%; max-width: 126px;}
.side h3 img.rank { width: 44.5%; max-width: 160px;}
.side h3 img.new { width: 25.5%; max-width: 92px;}
.side h3 img.keyword { width: 48%; max-width: 174px;}
.side h3 span { display: inline-block; vertical-align: middle;}

.side ul { font-size: 0;}
.side ul.category { margin-bottom: 30px;}
.side ul.category li { position: relative; padding: 6px; padding-left: 15px; font-size: 14px;}
.side ul.category li::before { content: ''; display: block; width: 5px; height: 1px; background: #000;
 position: absolute; left: 5px; top: 1.45em; font-size: 12px;
}
.side ul.category li a { color: #000; text-decoration: none;}
.side ul.category li a:hover { color: #105d9b;}


.side .serchbox { margin-bottom: 30px;}
.side .serchbox form { position: relative; width: 100%; max-width: 280px; margin: 0; border: solid 1px #dcdcdc; border-radius: 20px; overflow: hidden;}
.side .serchbox form input[type="text"] { width: 100%; padding: 5px 20px; border: none; text-align: left; vertical-align: baseline; outline: none;}
.side .serchbox .search-button { display: block; width: 30px; height: 30px; border: none; text-indent: -9999px;
 position: absolute; top: 4px; right: 10px;
 background: url('/wp-content/themes/area_partner/assets/img/common/icon/search.png') 50% no-repeat;
}

.side ul.ranking { margin-bottom: 30px;}
.side ul.ranking li { position: relative; padding: 10px 6px;}

.side ul.ranking li:nth-child(1):before { content: '1';}
.side ul.ranking li:nth-child(2):before { content: '2';}
.side ul.ranking li:nth-child(3):before { content: '3';}
.side ul.ranking li:nth-child(4):before { content: '4';}
.side ul.ranking li:nth-child(5):before { content: '5';}

.side ul.ranking li::before { display: block; width: 21px; height: 21px;
 background: #ccc; border: solid 1px #fff; border-radius: 50px;
 position: absolute; left: 0; top: 2px; z-index: 2; color: #666; font-size: 14px; line-height: 18px; text-align: center;
}
.side ul.ranking li a { color: #333; text-decoration: none;}
.side ul.ranking li a dl { display: table; width: 100%;}
.side ul.ranking li a dl dt,
.side ul.ranking li a dl dd { display: table-cell; vertical-align: top;}
.side ul.ranking li a dl dt { width: 60px;}
.side ul.ranking li a dl dd { width: auto; padding-left: 10px; font-size: 13px; line-height: 1.4;}
.side ul.ranking li a dl dt span { display: block; width: 100%; padding-top: 100%;
 background-position: 50% 50%; background-size: cover; background-repeat: no-repeat;
}
.side ul.ranking li a:hover { color: #105d9b;}

.side ul.new { margin-bottom: 10px;}
.side ul.new li { position: relative; padding: 10px 6px;}
.side ul.new li a { color: #333; text-decoration: none;}
.side ul.new li a dl { display: table; width: 100%;}
.side ul.new li a dl dt,
.side ul.new li a dl dd { display: table-cell; vertical-align: top;}
.side ul.new li a dl dt { width: 60px;}
.side ul.new li a dl dd { width: auto; padding-left: 10px; font-size: 13px; line-height: 1.4;}
.side ul.new li a dl dt span { display: block; width: 100%; padding-top: 100%;
 background-position: 50% 50%; background-size: cover; background-repeat: no-repeat;
}
.side ul.new li a:hover { color: #105d9b;}

.side .more.mb { margin-bottom: 30px;}
.side .more p { font-size: 14px; text-align: right; }
.side .more p a { color: #000;}
.side .more p a:hover { text-decoration: none;}

.side ul.tags li { position: relative; display: inline-block; padding: 4px; font-size: 13px;}
.side ul.tags li a { position: relative; display: block; padding: 4px 10px; padding-left: 25px; line-height: 1.2;
 background: #f0f0f0; border-radius: 50px; color: #333; text-decoration: none;
}
.side ul.tags li a:before { content: ''; display: block; width: 12px; height: 12px;
 background: url('/wp-content/themes/area_partner/assets/img/common/icon/tag_icon.png') no-repeat 50% 50% / 100% auto;
 position: absolute; top: 50%; left: 8px; transform: translateY(-50%);
}
.side ul.tags li a:hover { background: #105d9b; color: #fff;}

@media (max-width: 1001px) {
}
@media (max-width: 801px) {
}
@media (max-width: 481px) {
	.side h3 { font-size: 12px;}
	.side h3 img.cate { width: auto; max-width: 180px; height: 36px;}
	.side h3 img.search { width: auto; max-width: 126px; height: 36px;}
	.side h3 img.rank { width: auto; max-width: 160px; height: 36px;}
	.side h3 img.new { width: auto; max-width: 92px; height: 36px;}
	.side h3 img.keyword { width: auto; max-width: 174px; height: 36px;}
	.side ul.tags li { font-size: 12px;}
	.side ul.tags li a:before { width: 10px; height: 10px;}
}