@charset "utf-8";

#page-kv {}
#page-kv .inner-kv { position: relative; padding-top: 80px;}
#page-kv .kv-txt { position: absolute; left: 0; bottom: 0; width: 100%; z-index: 2;}
#page-kv .kv-txt div { width: 92%; max-width: 1100px; margin: 0 auto; padding-bottom: 18px;}

#page-kv .kv-txt h1 { margin-bottom: 12px; color: #173762; font-size: clamp(48px,8.4vw,84px); line-height: 1; transition: 0.3s ease; opacity: 1;}
#page-kv .kv-txt p { color: #173762; font-size: 18px; letter-spacing: 0.05rem; line-height: 1;}
#page-kv .kv-txt p:before { content: ''; display: inline-block; width: 17px; height: 15px; margin-right: 8px; vertical-align: middle;
 background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 200 166"><path d="M149.5.8l-.8-.8H51.3L0,53.6l100,112.2,100-112.2L149.5.8Z" fill="%23173762"/></svg>');
 background-repeat: no-repeat; background-position: 50% 50%; background-size: 100% auto;
 transition: 0.3s ease; transition-delay: 0.2s; opacity: 1;
}
#page-kv .kv-txt p span { position: relative; display: inline-block; vertical-align: middle; transition: 0.3s ease; transition-delay: 0.3s; opacity: 1;}
#page-kv .bg { position: relative; width: 100%; max-width: 1400px; margin: 0 auto; padding-left: 360px; z-index: 1:}
#page-kv .bg picture { display: block; width: 100%; line-height: 1;}
#page-kv .bg picture img { width: 100%;}
#page-kv .bg-blank { height: 180px;}
@media (max-width: 1201px) {
	#page-kv .bg { padding-left: 260px;}
}
@media (max-width: 801px) {
	#page-kv .inner-kv { padding: 74px 0 52px;}
	#page-kv .kv-txt div { padding-bottom: 0px;}
	#page-kv .kv-txt h1 { margin-bottom: 8px; font-size: clamp(47px,8.0vw,60px);}
	#page-kv .bg { padding-left: 20vw;}
	#page-kv .bg picture { position: relative; padding-top: 45%; overflow: hidden;}
	#page-kv .bg picture img { position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: auto; height: 100%; object-fit: cover;}

	#page-kv .bg-blank { height: 80px;}
}
@media (max-width: 481px) {
	#page-kv .inner-kv { padding: 68px 0 40px;}
	#page-kv .kv-txt p { font-size: 13px;}
	#page-kv .kv-txt p:before { width: 10px; height: 8px; margin-right: 6px;}

	#page-kv .bg-blank { height: 60px;}
}


.ttl { position: relative;}
.ttl h2 { position: relative; z-index: 2; color: #173762; font-weight: 400; letter-spacing: 0.05rem;}
.ttl:after { content: ''; display: block; width: 40px; height: 1px; background: #173762;}
@media (max-width: 801px) {
	.ttl:after { height: 0.5px;}
}
@media (max-width: 481px) {
	.ttl:after { width: 24px;}
}



.side-txt { display: block; width: 18px; position: absolute; left: -12px; top: 0px;}
@media (max-width: 1241px) {
	.side-txt { left: 5px; width: 12px;}
}
@media (max-width: 801px) {
	.side-txt { left: auto; right: 10px;}
}
@media (max-width: 481px) {
	.side-txt { right: 16px;}
}


.viewmore { width: 100%; max-width: 136px;}
.viewmore a { position: relative; display: block; width: 100%; padding: 6px 0 8px; padding-right: 20px; border: solid 1px #173762; border-radius: 50px;
 color: #173762; font-size: 16px; line-height: 1; text-align: center; text-decoration: none;
}
.viewmore a:before,
.viewmore a:after { content: ''; display: block; width: 12px; height: 12px; position: absolute; right: 9px; top: 50%;
 background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 20 18"><polygon points="20 8 12 0 10.9 1.1 17.9 8 0 8 0 9.5 17.9 9.5 10.9 16.5 12 17.6 20 9.5 20 8" fill="%23173762"/></svg>');
 background-repeat: no-repeat; background-position: 50% 50%; background-size: 100% auto; transition: 0.2s ease;
}
.viewmore a:before{ transform: translate(0,-50%) scale(1);}
.viewmore a:after { transition-delay: 0.1s; transform: translate(-9px,-50%) scale(0); }
.viewmore a:hover:before{ transform: translate(10px,-50%) scale(0);}
.viewmore a:hover:after { transform: translate(0,-50%) scale(1);}
@media (max-width: 481px) {
	.viewmore { max-width: 120px;}
	.viewmore a { font-size: 13px;}
}


.more { width: 100%; max-width: 100px;}
.more a { position: relative; display: block; width: 100%; padding: 6px 0 8px; padding-right: 20px; border: solid 1px #173762; border-radius: 50px;
 color: #173762; font-size: 16px; line-height: 1; text-align: center; text-decoration: none;
}
.more a:before,
.more a:after { content: ''; display: block; width: 12px; height: 12px; position: absolute; right: 9px; top: 50%;
 background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 20 18"><polygon points="20 8 12 0 10.9 1.1 17.9 8 0 8 0 9.5 17.9 9.5 10.9 16.5 12 17.6 20 9.5 20 8" fill="%23173762"/></svg>');
 background-repeat: no-repeat; background-position: 50% 50%; background-size: 100% auto; transition: 0.2s ease;
}
.more a:before{ transform: translate(0,-50%) scale(1);}
.more a:after { transition-delay: 0.1s; transform: translate(-9px,-50%) scale(0); }
.more a:hover:before{ transform: translate(10px,-50%) scale(0);}
.more a:hover:after { transform: translate(0,-50%) scale(1);}
@media (max-width: 481px) {
	.more { max-width: 90px;}
	.more a { font-size: 13px;}
}



.common-sct .ctn { position: relative; width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 50px;}
.common-sct .ctn .flex { display: flex; flex-wrap: wrap; justify-content: space-between;}
.common-sct .ctn .box { width: 47.5%; padding: 30px 0;}
.common-sct .ctn .box .pht { margin-bottom: 12px;}
.common-sct .ctn .box a,
.common-sct .ctn .box figure { position: relative; display: block; width: 100%; overflow: hidden;}
.common-sct .ctn .box a.line { border: solid 1px #173762;}
.common-sct .ctn .box a img,
.common-sct .ctn .box figure img { width: 100%; transition: 0.3s ease;}
.common-sct .ctn .box a:hover img { transform: scale(1.06); opacity: 0.8;}
.common-sct .ctn .box .tit { position: relative; margin-bottom: 18px; padding-top: 8px; padding-right: 120px;}
.common-sct .ctn .box .tit h4 { color: #173762; font-size: clamp(18px,2.4vw,26px); line-height: 1.4;}
.common-sct .ctn .box .tit .more { position: absolute; right: 0; top: 8px;}
.common-sct .ctn .box .txt h4 { margin-bottom: 8px; font-size: clamp(16px,2.2vw,24px);}
.common-sct .ctn .box .txt p { letter-spacing: 0.05rem; line-height: 1.8;}
@media (max-width: 1001px) {
	.common-sct .ctn .box .txt p { font-size: 14px;}
}
@media (max-width: 641px) {
	.common-sct .ctn .flex { display: block;}
	.common-sct .ctn .box { width: 100%; padding: 20px 0;}
}
@media (max-width: 481px) {
	.common-sct .ctn { padding: 0 24px;}
	.common-sct .ctn .box .tit { margin-bottom: 12px; padding-right: 100px;}
	.common-sct .ctn .box .txt p { font-size: 12px;}
}




.policy-ctn { position: relative; width: 100%; max-width: 1200px; margin: 0 auto; padding: 50px;}
.policy-ctn h2 { margin-bottom: 20px; color: #173762; font-size: clamp(18px,3.0vw,30px); line-height: 1.4;}
.policy-ctn h3 { margin-bottom: 20px; color: #173762; font-size: clamp(15px,2.6vw,26px); line-height: 1.2;}
.policy-ctn p { margin-bottom: 40px;}
.policy-ctn p:last-child { margin-bottom: 0px;}
@media (max-width: 801px) {
	.policy-ctn p { font-size: 14px;}
}
@media (max-width: 481px) {
	.policy-ctn{ padding: 40px 24px;}
	.policy-ctn h2 { margin-bottom: 12px;}
	.policy-ctn h3 { margin-bottom: 12px;}
	.policy-ctn p { font-size: 12px;}
}