@charset "utf-8";*,::after,::before{box-sizing:border-box}html{font-family: "hagrid", "source-han-sans-japanese", sans-serif;line-height:1.15;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}article,aside,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";margin:0;font-size:1rem;font-weight:400;line-height:1.5;color:#212529;text-align:left;background-color:#fff}[tabindex="-1"]:focus:not(:focus-visible){outline:0!important}hr{box-sizing:content-box;height:0;overflow:visible}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:.5rem}p{margin-top:0;margin-bottom:1rem}abbr[data-original-title],abbr[title]{text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;cursor:help;border-bottom:0;-webkit-text-decoration-skip-ink:none;text-decoration-skip-ink:none}address{margin-bottom:1rem;font-style:normal;line-height:inherit}dl,ol,ul{margin:0;padding:0;list-style:none}ol ol,ol ul,ul ol,ul ul{margin:0}dt{font-weight:700}dd{margin-bottom:.5rem;margin-left:0}blockquote{margin:0 0 1rem}b,strong{font-weight:bolder}small{font-size:80%}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}a{;text-decoration:none;background-color:transparent}a:hover{text-decoration:none}a:not([href]):not([class]){color:inherit;text-decoration:none}a:not([href]):not([class]):hover{color:inherit;text-decoration:none}code,kbd,pre,samp{font-size:1em}pre{margin-top:0;margin-bottom:1rem;overflow:auto;-ms-overflow-style:scrollbar}figure{margin:0 0 1rem}img{vertical-align:middle;border-style:none}svg{overflow:hidden;vertical-align:middle}table{border-collapse:collapse}caption{padding-top:.75rem;padding-bottom:.75rem;color:#6c757d;text-align:left;caption-side:bottom}th{text-align:inherit;text-align:-webkit-match-parent}label{display:inline-block;margin-bottom:.5rem}button{border-radius:0}button:focus:not(:focus-visible){outline:0}button,input,optgroup,select,textarea{margin:0;font-size:inherit;line-height:inherit}button,input{overflow:visible}button,select{text-transform:none}[role=button]{cursor:pointer}select{word-wrap:normal}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]:not(:disabled),[type=reset]:not(:disabled),[type=submit]:not(:disabled),button:not(:disabled){cursor:pointer}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{padding:0;border-style:none}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}textarea{overflow:auto;resize:vertical}fieldset{min-width:0;padding:0;margin:0;border:0}legend{display:block;width:100%;max-width:100%;padding:0;margin-bottom:.5rem;font-size:1.5rem;line-height:inherit;color:inherit;white-space:normal}progress{vertical-align:baseline}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{outline-offset:-2px;-webkit-appearance:none}[type=search]::-webkit-search-decoration{-webkit-appearance:none}output{display:inline-block}summary{display:list-item;cursor:pointer}template{display:none}[hidden]{display:none!important}.featherlight-sample{display:none}#law td{background:#fff;border:solid 1px #999}ol{margin-bottom:1rem}.clearfix:after{content:"";clear:both;display:block}.button,::file-selector-button{inline-size:fit-content;touch-action: manipulation;user-select:none;}*:focus-visible{outline:2px solid magenta;outline-offset:2px}

/*
font-family: "source-han-sans-japanese", sans-serif;
font-family: "hagrid", sans-serif;
font-family: "hagrid-black", sans-serif;
font-family: "hagrid-text", sans-serif;
font-family: "inter-variable", sans-serif;
font-family: "noto-sans", sans-serif;
font-family: "Inter", sans-serif;
*/

*{ transition: 0.5s;}
header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;}
header .logo {
    width: 250px;
    padding: 30px 38px;
    background: #fff;
    border-radius: 0 0 30px 0;
    position: relative;}
header .logo a {
    display:block;
    position: relative;}
header .logo:before {
    content: "";
    box-shadow: 5px 5px 10px #00000040;
    mix-blend-mode: multiply;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border-radius: 0 0 30px 0;}
header .logo img {
    width: 100%;
    max-width: 174px;}
header nav {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 99;}
header nav ul {
    background-image: linear-gradient(270deg, #b1dee3, #1e61ae);
    display: flex;
    align-items: center;
    padding: 0 40px 0 20px;
    border-radius: 0 0 0 30px;}
header nav ul li a {
    padding: 30px 20px;
    width: max-content;
    display: block;
    font-size: 18px;
    color: #fff;
    font-weight: 500;}
header nav ul li:last-child a {
    background: #fff;
    color: #1e61ae;
    padding: 5px 20px;
    border-radius: 30px;}
#page-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    font-size: 77%;
    z-index: 99;}
#page-top a {
/*    background: #666;*/
    text-decoration: none;
    color: #fff;
/*    width: 100px;*/
    padding: 30px 0;
    text-align: center;
    display: block;
    border-radius: 5px;
/*    text-shadow: 1px 0 #1e61ae, 2px 0 #1e61ae, 0 1px #1e61ae, 0 2px #1e61ae, 1px 1px #1e61ae, 2px 2px #1e61ae, -1px 0 #1e61ae, -2px 0 #1e61ae, 0 -1px #1e61ae, 0 -2px #1e61ae, 1px -1px #1e61ae, 2px -1px #1e61ae, -1px 1px #1e61ae, -1px 2px #1e61ae, 1px -2px #1e61ae, 2px -2px #1e61ae, -2px 1px #1e61ae, -2px 2px #1e61ae, -1px -1px #1e61ae, -2px -2px #1e61ae;*/
    font-weight: 500;
}
#page-top a:before {
    content:"";
    background-image: url(../img/arrow.svg);
    width: 20px;
    height: 30px;
    display: block;
    margin: 0 auto;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    filter: brightness(0) saturate(100%) invert(29%) sepia(26%) saturate(4041%) hue-rotate(196deg) brightness(92%) contrast(90%);
    position: relative;
    top: 0;
    left: 0;
    transition: 0.5s;
    transform: rotate(-90deg);
}
#page-top a:hover:before {
    top: -10px;
}
#page-top a span {
    background: #1e61ae;
    display: block;
    line-height: 1;
    padding: 3px 5px;
    text-box: trim-both cap alphabetic;}
#page-top a:hover {
    text-decoration: none;
/*    background: #999;*/}
@media screen and (max-width: 768px) {
	#page-top {
	    bottom: 30px;
	    font-size: 60%;}
	#page-top a {
/*	    width: 60px;*/
	    padding: 10px 0;}
}
footer {
    background: #fff;
    padding: min(7dvh, 50px) 0;
    margin-top: min(10dvh, 70px);}
.FadeUp {
  opacity: 0;
  transform: translateY(40px);
  transition: all 0.8s ease;}
.FadeUp.active {
  opacity: 1;
  transform: translateY(0);}
.mainvisual {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -1;}
.mainvisual .bg {
    display: flex;
    width: 100%;
    position: relative;}
.mainvisual .bg:after {
    content: "";
    background-image: url(../img/m.png);
    width: 105%;
    position: absolute;
    left: -2.5%;
    bottom: 0;
    height: 70%;
    background-position: top center;
    background-size: 100%;}
.mainvisual .bg li {
    opacity: 0;
    transform: translateY(0);
    animation-duration: 1s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-out;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);}
.mainvisual .bg li img { width:100%;}
.mainvisual .bg li:nth-child(1) {
    width: calc(26% + 2.5vw);
    margin: 0 -2.2vw;
    transform: translateY(-80px);
    animation-name: fadeDown;
    animation-delay: 0.3s;}
.mainvisual .bg li:nth-child(2) {
    width: calc(26% + 5.2vw);
    margin: 0 -2.3vw 0 -3.2vw;
    transform: translateY(80px);
    animation-name: fadeUp;
    animation-delay: 0.8s;}
.mainvisual .bg li:nth-child(3) {
    width: calc(26% + 5.20vw);
    margin: 0 -3.2vw;
    transform: translateY(-80px);
    animation-name: fadeDown;
    animation-delay: 1.3s;}
.mainvisual .bg li:nth-child(4) {
    width: calc(26% + 2.6vw);
    margin: 0 0 0 -2.6vw;
    transform: translateY(80px);
    animation-name: fadeUp;
    animation-delay: 1.8s;}
@keyframes fadeDown {
    to { opacity: 1; transform: translateY(0);}}
@keyframes fadeUp {
    to { opacity: 1; transform: translateY(0);}}
.mainvisual .title {
    position: absolute;
    width: 90%;
    max-width: 900px;
    margin: 0 auto;
    display: block;
    top: 65%;
    left: 50%;
    transform: translate(-50%, -50%);}
.mainvisual .title h1,
.mainvisual .title h2 {
    font-size: 90px;
    line-height: 1;
    color: #fff;
    font-weight: 500;}
.mainvisual .title h1 span,
.mainvisual .title h2 span {
    background: #1e61ae;
    text-box: trim-both cap alphabetic;
    display: block;
    width: max-content;
    margin: 7px 0;
    padding: 7px;
    font-family: "hagrid", sans-serif;
    font-size: 90px;
    color: #fff;}
.mainvisual .title p {
    margin: 14px 0 0;
    color: #1e61ae;
    font-weight: 500;
    background: #b1dee3;
    width: max-content;
    padding: 3px 6px;
    font-size: 24px;
    line-height: 1;}
.top_news,
.top_about,
.top_works {
    position: relative;
    z-index: 1;
    background: #fff;}
.top_news .inner,
.top_about .inner,
.top_works .inner {
    width: 90%;
    max-width: 900px;
    margin: 0 auto;
    padding: 5dvh 0 10dvh;}
.top_works .inner { padding: 5dvh 0 0;}
.top_news .inner .detail,
.top_about .inner .detail {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;}
h2 {
    font-family: "hagrid", sans-serif;
    color: #1e61ae;
    font-size: 70px;
    line-height: 1;
    width: max-content;
    font-weight: 500;}
.top_services h2 { color: #fff;}
h2 span {
    font-size: 21px;
    color: #b1dee3;
    display: block;
    margin-top: 10px;}
.top_news ul,
.top_about p {
    margin: 0 0 0 auto;
    font-size: 17px;}
.top_news ul { width: calc(100% - 270px);}
.top_about p { width: calc(100% - 300px);}
.top_news ul li a {
    font-size: 17px;
    color: #000;
    padding: 14px 28px;
    width: 100%;
    flex-wrap: wrap;
    display: flex;
    align-items: center;
    gap: 20px;
    border-top: solid 1px #b1dee3;}
.top_news ul li:last-child a { border-bottom: solid 1px #b1dee3;}
.top_news ul li a:hover { color: #1e61ae;}
.top_news ul li a .date {
    font-size: 17px;
    font-weight: 500;
    color: #1e61ae;
    width: 120px;}
.top_news ul li a .text {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 18px;
    color: #000;
    width: calc(100% - 150px);}
.top_about p span {
    font-size: 28px;
    font-weight: 500;
    display: block;
    margin-bottom: 3dvh;}
.more a {
    display: block;
    width: max-content;
    margin: 0 0 0 auto;}
.more a span {
    color: #1e61ae;
    font-weight: 500;
    background: #b1dee3;
    padding: 7px 24px 7px 14px;
    border-radius: 20px 0 0 20px;
    display: flex;
    width: 150px;
    margin: 5dvh 0 0 auto;}
.more a span:after {
    content: "";
    background-image: url(../img/arrow.svg);
    width: 10px;
    aspect-ratio: 109 / 150;
    display: block;
    margin: 0px 0 0 5px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    filter: brightness(0) saturate(100%) invert(72%) sepia(20%) saturate(532%) hue-rotate(171deg) brightness(91%) contrast(93%);
    position: relative;
    left: 0;
    transition: 0.5s;}
.more a span:hover:after {
    left: 30px;
    transform: scale(1.5);}
.Grd { background-image: linear-gradient(0deg, #b1dee3, #1e61ae);}
.top_services { padding: min(8dvh, 60px) 0;}
.top_services .inner {
    width: 90%;
    max-width: 900px;
    margin: 0 auto;}
.top_services ul {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin: min(5dvh, 40px) auto 0;}
.top_services li { width: 100%;}
.top_services a {
    background: #fff;
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    padding: 59.5px min(5dvh,40px);
    border-radius: 30px;
    box-shadow: 0 5px 0 #1e61ae;
    transition: .2s ease;}
.top_services a:hover {
    transform: translateY(5px);
    box-shadow: 0 0 0 #1e61ae;}
.top_services a:after {
    content: "";
    background-image: url(../img/arrow.svg);
    width: 20px;
    height: 30px;
    display: block;
    margin: 0px 0 0 5px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    filter: brightness(0) saturate(100%) invert(72%) sepia(20%) saturate(532%) hue-rotate(171deg) brightness(91%) contrast(93%);
    position: relative;
    left: 20px;
    transition: 0.5s;}
.top_services a span {
    font-size: 28px;
    width: 48%;
    font-weight: 500;
    color: #1e61ae;}
.top_services a small {
    font-size: 15px;
    width: 46%;
    color: #000;
    font-weight: 500;}
.top_works a {
    font-size: 17px;
    color: #000;
    border-top: solid 1px #b1dee3;
    padding: 30px min(5dvh,40px);
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    background: #fff;}
.top_works a:hover { background: #f0f0f0;}
.top_works li:last-child a { border-bottom: solid 1px #b1dee3;}
.top_works a:after {
    content: "";
    background-image: url(../img/arrow.svg);
    width: 20px;
    height: 30px;
    display: block;
    margin: 0px 0 0 5px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    filter: brightness(0) saturate(100%) invert(72%) sepia(20%) saturate(532%) hue-rotate(171deg) brightness(91%) contrast(93%);
    transition: 0.5s;
    position: absolute;
    top: 80%;
    left: 93%;}
.top_works a:hover:after { left: 96%;}
.top_works a img {
    background: #1e61ae;
    width: 330px;
    height: 210px;
    display: block;}
.top_works a span {
    width: calc(100% - 400px);
    margin: 0 0 0 auto;}
.top_works a strong {
    font-size: 25px;
    display: block;
    font-weight: 500;}
.top_works a small {
    width: 85%;
    font-size: 15px;
    color: #1e61ae;
    line-height: 25px;
    margin-top: 33px;
    display: block;}
footer .inner {
    width: 95%;
    margin: 0 auto;
    padding: min(5dvh,40px);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;}
footer .inner a {
    position: relative;
    background: #fff;
    padding: 45px 35px;
    width: calc(100% / 2);}
footer .inner a:first-child { border-radius: 30px 0 0 30px;}
footer .inner a:first-child:after {
    content: "";
    width: 1px;
    height: 80%;
    background: #1e61ae;
    display: block;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(0%, -50%);}
footer .inner a:last-child {
    border-radius: 0 30px 30px 0;
    position: relative;
    left: -1px;}
footer .inner a:hover { background: #f0f0f0;}
footer .inner a:hover span { color: #1e61ae;}
footer .inner a span:after {
    content: "";
    background-image: url(../img/arrow.svg);
    width: 20px;
    height: 30px;
    display: block;
    margin: 0px 0 0 5px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    filter: brightness(0) saturate(100%) invert(72%) sepia(20%) saturate(532%) hue-rotate(171deg) brightness(91%) contrast(93%);
    position: relative;
    left: 0;
    transition: 0.5s;}
footer .inner a:hover span:after { left: 20px;}
footer .inner strong {
    font-family: "hagrid", sans-serif;
    color: #1e61ae;
    font-size: 70px;
    line-height: 1;
    font-weight: 500;}
footer .inner small {
    font-size: 21px;
    color: #b1dee3;
    margin-left: 14px;}
footer .inner span {
    font-size: 15px;
    width: 100%;
    margin-top: min(5dvh,40px);
    color: #000;
    font-weight: 500;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;}
footer .detail {
    width: 95%;
    margin: 0 auto;
    padding: min(5dvh,40px) min(5dvh,40px) 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;}
footer .logo a img { width: 315px;}
footer .logo p { margin: min(5dvh, 40px) 0 0.5rem;}
footer .logo span {
    font-size: 17px;
    font-weight: 500;
    color: #fff;}
footer .logo small {
    font-size: 15px;
    font-weight: 500;
    color: #fff;
    display: block;}
footer .menu ul { position: relative;}
footer .menu ul:before {
    content: "";
    width: 1px;
    height: 105%;
    display: block;
    background: #b1dee3;
    top: -2.5%;
    left: -25px;
    position: absolute;}
footer .menu li { margin: min(3dvh, 20px) 0}
footer .menu a {
    color: #fff;
    font-size: 21px;}
footer .copy {
    width: 95%;
    margin: 0 auto;
    padding: 0 min(5dvh,40px);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;}
footer .copy small {
    font-size: 15px;
    font-weight: 500;
    color: #fff;
    display: block;}
@media screen and (max-width: 1280px) {
	footer .inner small {
	    margin-left: 0;
	    display: block;}
}
@media screen and (max-width: 1024px) {
	header nav ul {
	    padding: 0 20px 0 10px;
	    border-radius: 0 0 0 15px;}
	header nav ul li a {
	    padding: 20px 10px;
	    font-size: 15px;}
	header .logo {
	    width: 120px;
	    padding: 10px;
	    border-radius: 0 0 15px 0;}
	header .logo:before { border-radius: 0 0 15px 0;}
	.mainvisual .title h1 span,
	.mainvisual .title h2 span { font-size: 45px;}
	.mainvisual .title p {
	    margin: 2dvh 0 0;
	    color: #1e61ae;
	    font-weight: 500;
	    background: #b1dee3;
	    width: max-content;
	    padding: 3px 6px;
	    font-size: 15px;
	    line-height: 1;}
	.top_news .inner .detail, .top_about .inner .detail { display: block;}
.top_news ul li a .date,.top_news ul li a .text {font-size: 4vw;}
	h2 {
	    font-size: 35px;
	    width: max-content;
        max-width: 100%;}
	h2 span { font-size: 15px;}
	.top_news ul, .top_about p {
	    margin: 5dvh 0 0 auto;
	    width: 100%;
	    font-size: 18px;}
	.top_news ul li a {
	    font-size: 18px;
	    padding: 7px 14px;}
	.top_about p span { font-size: 20px;}
	.top_services a {
	    display: block;
	    padding: 30px min(10dvh, 80px) 30px min(5dvh, 40px);}
	.top_services a span {
	    width: 100%;
	    font-size: 20px;
	    display: block;}
	.top_services a small {
	    font-size: 18px;
	    width: 100%;
	    color: #000;
	    font-weight: 500;
	    margin: 3dvh 0 0;
	    display: block;}
	.top_services a:after {
	    position: absolute;
	    left: initial;
	    top: 50%;
	    right: 10px;
	    transform: translate(-50%, -50%);}
	.top_works a {
	    font-size: 20px;
	    padding: 30px 0;}
	.top_works a img {
	    width: 30%;
	    height: initial;
	    aspect-ratio: 33 / 21;}
	.top_works a strong {
	    font-size: 20px;
	    width: 80%;}
	.top_works a span {
	    display: block;
	    width: calc(100% - 35%);}
	.top_works a small {
	    width: 80%;
	    font-size: 15px;
	    line-height: 25px;
	    margin-top: 3dvh;}
	.top_works a:after {
	    position: absolute;
	    top: 50%;
	    left: 93%;
	    transform: translate(-50%, -50%);}
	footer { padding: min(3dvh, 30px) 0;}
	footer .inner { padding: min(5dvh, 40px) 0;}
	footer .inner a { padding: 22.5px 17.5px;}
	footer .inner strong { font-size: 35px;}
	footer .inner small {
	    font-size: 15px;
	    color: #b1dee3;
	    margin-left: 0;
	    display: block;}
	footer .inner span {
	    font-size: 15px;
	    width: 100%;
	    margin-top: min(3dvh, 40px);}
	footer .logo a img { width: 200px;}
	footer .logo span { font-size: 18px;}
	footer .logo small { font-size: 13px;}
	footer .menu a { font-size: 18px;}
	footer copyright span { font-size: 13px;}
}
@media screen and (max-width: 768px) {
	.mainvisual .bg {
	    flex-wrap: wrap;
	    overflow: hidden;}
	.mainvisual .bg li:nth-child(1),
	.mainvisual .bg li:nth-child(2),
	.mainvisual .bg li:nth-child(3),
	.mainvisual .bg li:nth-child(4) {
	    margin: -6.2dvw 0;
	    width: 100%;}
	picture {
	    display: block;
	    width: auto;
	    height: 100%;}
	picture img { width: 100%;}
	.mainvisual .bg:after {
	    content: "";
	    background-image: url(../img/m@2x.png);
	    width: 56%;
	    position: absolute;
	    top: 0;
	    height: calc(100% + 12.4vw);
	    background-position: 100%;
	    background-size: cover;
	    background-repeat: no-repeat;
	    aspect-ratio: 374 / 975;}
	.mainvisual .title { top: 90vw;}
	.mainvisual .title h1 span,
	.mainvisual .title h2 span { font-size: 11vw;}
	.mainvisual .title p { font-size: 4vw;}
	.mainvisual .bg li:nth-child(1) {
	    transform: translateX(-80px);
	    animation-name: fadeLeft;}
	.mainvisual .bg li:nth-child(2) {
	    transform: translateX(80px);
	    animation-name: fadeRight;}
	.mainvisual .bg li:nth-child(3) {
	    transform: translateX(-80px);
	    animation-name: fadeLeft;}
	.mainvisual .bg li:nth-child(4) {
	    transform: translateX(80px);
	    animation-name: fadeRight;}
	@keyframes fadeLeft { to { opacity: 1; transform: translateX(0);}}
	@keyframes fadeRight { to { opacity: 1; transform: translateX(0);}}
	.top_news { margin: 5dvh 0 0;}
	.top_news ul li a {
	    padding: 7px 0;
	    font-size: 3.5vw;}
	.more a span {
	    margin: 3dvh 0 0 auto;
	    font-size: 3.5vw;
	    width: max-content;}
	.more a span:hover:after { left: 15px;}
	.top_news .inner, .top_about .inner, .top_works .inner {
	    width: 100%;
	    margin: 5dvh auto;
	    padding: 0;}
	.top_works .inner { margin: 5dvh auto 10dvh;}
	.top_news .inner .detail, .top_about .inner .detail,.top_works h2,.top_works .inner ul {
	    display: block;
	    width: 90%;
	    margin: 0 auto;
	    font-size: 10vw;}
	.top_news ul, .top_about p { font-size: 3.5vw;}
	.top_about p span { font-size: 4vw;}
	.top_services a span { font-size: 4vw;}
	.top_services a small { font-size: 3.5vw;}
	.top_works .inner ul { margin: 3dvh auto;}
	.top_works a {
	    font-size: 4vw;
	    padding: 15px 0;
	    display: block;}
	.top_works a img {
	    width: 100%;
	    height: initial;
	    aspect-ratio: 33 / 21;
	    margin-bottom: 3vw;}
	.top_works a span {
	    display: block;
	    width: 100%;
	    margin: 0;}
	.top_works a strong {
	    font-size: 4vw;
	    width: 100%;}
	.top_works a small {
	    width: 90%;
	    font-size: 2.8vw;
	    line-height: 1.4;
	    margin-top: 2.8vw;}
	.top_works a:after {
	    width: 3vw;
	    aspect-ratio: 109 / 150;
	    height: initial;
	    top: 95%;}
	footer .inner {
	    padding: 0;
	    flex-wrap: wrap;
	    width: 100%;}
	footer .inner strong {
	    font-size: 10vw;
	    display: flex;
	    align-items: end;}
	footer .inner a {
	    padding: 6vw;
	    width: 90%;
	    margin: 0 auto;}
	footer .inner a:first-child { border-radius: 15px 15px 0 0;}
	footer .inner a:last-child { border-radius: 0 0 15px 15px;left:0;}
	footer .inner small {
	    font-size: 2.8vw;
	    color: #b1dee3;
	    margin-left: 2vw;
	    display: block;}
	footer .inner span { font-size: 2.8vw;}
	footer .inner a span:after {
	    width: 3vw;
	    aspect-ratio: 109 / 150;
	    height: initial;
	    top: 80%;}
	footer .inner a:hover span:after { left: 15px;}
	footer .inner a:first-child:after {
	    width: 90%;
	    height: 1px;
	    top: initial;
	    right: initial;
	    transform: translate(-50%, -50%);
	    bottom: 0;
	    left: 50%;}
	footer .detail {
	    flex-wrap: wrap;
	    width: 100%;
	    padding: min(5dvh, 40px) 0 0;}
	footer .logo { width: 100%;}
	footer .logo a {
	    display: block;
	    width: 50%;
	    margin: 0 auto;}
	footer .logo a img { width: 100%;}
	footer .logo p {
	    margin: 2vw;
	    text-align: center;}
	footer .logo span { font-size: 3vw;}
	footer .logo small { font-size: 2.8vw;}
	footer .menu {
	    width: 90%;
	    margin: 0 auto;}
	footer .menu ul {
	    display: flex;
	    flex-wrap: wrap;
	    width: 80%;}
	footer .menu ul:before { display: none;}
	footer .menu li {
	    margin: min(2vw, 10px) 0 0;
	    width: 50%;}
	footer .menu a { font-size: 3.5vw;}
	footer copyright {
	    width: max-content;
	    margin: 0 0 0 auto;}
	header .menu {
	    position: fixed;
	    top: 0;
	    right: 0;
	    background-image: linear-gradient(270deg, #b1dee3, #1e61ae);
	    width: 60px;
	    height: 40px;
	    border-radius: 0 0 0 20px;
	    z-index: 100;
	    transition: 0.5s;
	    cursor: pointer;}
	header .menu span {
	    width: 40%;
	    height: 2px;
	    display: block;
	    background: #fff;
	    position: absolute;
	    top: 50%;
	    left: 50%;
	    transform: translate(-50%, -50%);
	    transition: 0.5s;}
	header .menu span:before,
	header .menu span:after {
	    content: "";
	    width: 100%;
	    height: 2px;
	    display: block;
	    background: #fff;
	    position: absolute;
	    left: 50%;
	    transform: translate(-50%, -50%);
	    transition: 0.5s;}
	header .menu span:before { top: -6px;}
	header .menu span:after { top: 8px;}
	header nav {
	    width: 80%;
	    right: -100%;}
	header nav ul {
	    display: block;
	    padding: 12vw 5vw 5vw;}
	header nav ul li a {
	    width: 100%;
	    display: flex;
	    justify-content: space-between;
	    border-bottom: dotted 1px;}
	header nav ul li a:hover { color: #ffffff;}
	header nav ul li:last-child a:hover { color: #1e61ae;}
	header nav ul li a:after {
	    content: "";
	    background-image: url(../img/arrow.svg);
	    width: 10px;
	    aspect-ratio: 109 / 150;
	    display: block;
	    margin: 0px 0 0 5px;
	    background-repeat: no-repeat;
	    background-size: 100% 100%;
	    filter: brightness(0) saturate(100%) invert(100%) sepia(1%) saturate(1157%) hue-rotate(219deg) brightness(113%) contrast(100%);
	    position: relative;
	    left: 0;
	    transition: 0.5s;}
	header nav ul li:last-child a {
	    margin: 2dvh 0 0;
	    padding: 2dvh;
	    border: none;
	    text-align: center;
	    align-items: center;
	    justify-content: center;}
	header nav ul li:last-child a:after { display:none;}
	header .menu.active { background-image: initial;}
	header .menu.active span { background: #ffffff00;}
	header .menu.active span:before,
	header .menu.active span:after { top: 50%;}
	header .menu.active span:before { transform: translate(-50%, -50%) rotate(45deg);}
	header .menu.active span:after { transform: translate(-50%, -50%) rotate(-45deg);}
	header nav.active { right: 0%;}
}
@media screen and (max-width: 480px) {}
@media screen and (max-width: 320px) {}

.breadcrumbs{
    width: min(94%, 900px);
    margin: 14px auto 0;}
.breadcrumbs ul{
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;}
.breadcrumbs li{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    line-height: 1.4;
    color: #666;}
.breadcrumbs li + li::before{
    content: "›";
    display: inline-block;
    color: #a7b7c7;
    font-size: 16px;
    line-height: 1;
    transform: translateY(-1px);}
.breadcrumbs a{
    color: #1e61ae;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-bottom: 1px solid rgba(30, 97, 174, 0.15);
    transition: background .2s, border-color .2s, transform .2s;}
.breadcrumbs a:hover{
    background: #eef5ff;
    border-color: rgba(30, 97, 174, 0.25);
    transform: translateY(-1px);}
.breadcrumbs li:last-child{
    color: #222;
    font-weight: 500;}
.breadcrumbs li:last-child{ max-width: 100%;}
.breadcrumbs li:last-child{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;}
@media (max-width: 768px){
	.breadcrumbs{ margin-top: 10px;}
	.breadcrumbs li{ font-size: 13px;}
	.breadcrumbs a{ padding: 5px 9px;}
}
.sub .mainvisual { z-index: 0;}
.sub .mainvisual .bg:after {
    content: "";
    background-image: url(../img/m_.png);
    width: 105%;
    position: absolute;
    bottom: -10px;
    height: 100%;
    background-position: bottom center;
    background-size: 100%;
    background-repeat: no-repeat;}
.sub .mainvisual .bg picture,
.sub .mainvisual .bg img { width: 100%;}
.mainvisual .title { top: 55%;}
.sub .mainvisual .title h1 span,
.sub .mainvisual .title h2 span { margin: 7px auto;}
.sub .mainvisual .title p { margin: 14px auto 0;}
.sub .mainvisual .title ul {
    display: flex;
    justify-content: space-around;
    margin: 5dvh 0 0;}
.sub .mainvisual .title ul li { width: 32%;}
.sub .mainvisual .title ul li a {
    width: 100%;
    font-size: 25px;
    color: #000;
    display: block;
    font-weight: 500;
    background: #f0f0f0;
    border-radius: 100px;
    padding: 14px;
    text-align: center;
    position: relative;}
.sub .mainvisual .title ul li a:after {
    content: "";
    background-image: url(../img/arrow.svg);
    width: 22.5px;
    aspect-ratio: 109 / 150;
    display: block;
    margin: 0;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    filter: brightness(0) saturate(100%) invert(25%) sepia(99%) saturate(1138%) hue-rotate(192deg) brightness(94%) contrast(88%);
    position: absolute;
    top: 100%;
    left: 50%;
    transition: 0.5s;
    transform: translate(-50%, -50%) rotate(90deg);}
.sub .mainvisual .title ul li a:hover:after {
    top: calc(100% + 10px);}


.philosophy .inner,
.overview .inner,
.access .inner,
.digital .inner,
.web .inner,
.development .inner {
    width: 90%;
    max-width: 900px;
    margin: 0 auto min(10dvh, 70px);
    padding: 5dvh 0;}
.philosophy .inner,
.digital .inner { padding: min(10dvh,70px) 0 min(5dvh,40px);}
.philosophy .inner h2 {
    display: flex;
    align-items: baseline;
    background: #fff;
    padding: 10px;
    margin-bottom: min(7dvh, 50px);}
.philosophy .inner h2 span { margin-left: 7px;}
.philosophy .inner p,
.digital .inner p {
    font-size: 17px;
    line-height: 1.8;
    margin-bottom: 40px;
    color: #fff;}
.philosophy .inner p span {
    display: block;
    margin: 0 0 0 auto;
    width: max-content;
    background: #fff;
    font-size: 21px;
    font-weight: 500;
    color: #1e61ae;
    padding: 10px 14px;
    line-height: 1;
    text-box: trim-both cap alphabetic;}
.philosophy .inner p small {
    font-size: 17px;
    margin-right: 14px;}
.overview dl {
    margin: min(5dvh, 30px) 0;
    display: flex;
    flex-wrap: wrap;}
.overview dl dt,
.overview dl dd {
    font-size: 17px;
    font-weight: 500;
    padding: 10px;
    border-bottom: solid 1px #b1dee3;}
.overview dl dt { width: 200px;}
.overview dl dd {
    width: calc(100% - 200px);
    margin: 0;}
.access .inner { margin: 0 auto 0;}
.access iframe {
    width: 100%;
    height: 500px;
    border: none;
    background: #ccc;}
.digital .inner p,
.web .inner p,
.development .inner p {
    color: #000;
    line-height: 1.5;
    margin: min(3vw, 30px) auto;}
.digital .inner .img,
.web .inner .img,
.development .inner .img {
    width: 100%;
    max-width: 900px;
    height: 0;
    padding-bottom: 24.4%;
    background: #ccc;
    overflow: hidden;
    position: relative;}
.digital .inner .img img,
.web .inner .img img,
.development .inner .img img{
    width: 100%;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);}
.digital .more,
.web .more,
.development .more {
    position: absolute;
    right: 0;
    bottom: 20px;}
.digital .more span,
.web .more span,
.development .more span { margin: 0 0 0 auto;}
.sub.works .mainvisual .title ul.forth{
    flex-wrap: wrap;
    gap: 20px;
    width: 90%;
    margin: 5dvh auto 0;
    flex-wrap: wrap;
    gap: 20px;}
.sub.works .mainvisual .title ul.five{
    flex-wrap: wrap;
    gap: 20px;
    width: 90%;
    margin: 5dvh auto 0;}
.sub.works .mainvisual .title ul.forth li { width: calc((100% /2) - 20px);}
.sub.works .mainvisual .title ul.five li { width: max-content;}
.sub.works .work .inner {
    width: 90%;
    max-width: 900px;
    margin: 0 auto min(10dvh, 70px);
    padding: 5dvh 0;}
.sub.works .work .inner h2 {
    font-size: 50px;
    border-bottom: solid #1e61ae;
    width: 100%;
    padding: 10px 0;
    margin: 0 auto min(5dvh, 30px);}
.sub.works .work .inner .item {
    background: #f0f0f0;
    border-radius: 30px 30px 0 30px;
    padding: min(5dvh, 30px);
    display: flex;
    gap: 20px;
    margin-bottom: min(5dvh, 30px);}
.sub.works .work .inner .item .img {
    width: 230px;
    aspect-ratio: 23 / 28;
    background: #1e61ae;
    position: relative;}
.sub.works .work .inner .item .img img {
    width: auto;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);}
.sub.works .work .inner .item .detail {
    width: calc(100% - 250px);
    display: flex;
    flex-direction: column;}
.sub.works .work .inner .item .detail h3,
.sub.works .work .inner .item .detail .cat,
.sub.works .work .inner .item .detail .name {
    color: #1e61ae;
    font-weight: 500;}
.sub.works .work .inner .item .detail h3 { font-size: 30px;}
.sub.works .work .inner .item .detail .cat { font-size: 20px;}
.sub.works .work .inner .item .detail .name {
    font-size: 15px;
    margin: auto 0 0 auto;
    display: block;
    width: max-content;}
.news {
    width: 90%;
    max-width: 900px;
    margin: 0 auto min(10dvh, 70px);
    padding: 5dvh 0;}
.news .inner { margin-bottom: 30px;}
.news .inner .date {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;}
.news .inner .date div {
    margin: 0;
    background: #f0f0f0;
    padding: 8.5px 35px;
    border-radius: 30px;
    font-size: 18px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;}
.news .inner .date div.active{
    background: #1e61ae;
    color: #fff;}
.news .inner .date div a { color: #000;}
.news .inner .date div.active a { color: #fff;}
.news .detail {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;}
.news .detail ul,
.news .detail li { width: 100%;}
.news .detail a {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px;
    border-top: solid 1px #b1dee3;}
.news .detail li:last-child a { border-bottom: solid 1px #b1dee3;}
.news .detail .date {
    font-size: 17px;
    font-weight: 500;
    color: #1e61ae;
    width: 120px;}
.news .detail .text {
    display:block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 18px;
    color: #000;
    width: calc(100% - 150px);}
.sub .mainvisual .title h2 {
    width: max-content;
    margin: 0 auto;}
.newsDetail {
    width: 90%;
    max-width: 900px;
    margin: 0 auto min(10dvh, 70px);
    padding: 5dvh 0;}
.newsDetail article header {
    position: relative;
    top: initial;
    left: initial;
    z-index: 1;
    padding: 20px;}
.newsDetail article header time {
    font-size: 20px;
    font-weight: 500;
    color: #1e61ae;}
.newsDetail article header h1 {
    font-size: clamp(22px, 3vw, 28px);
    font-weight: 500;
    color: #000;
    margin: 0;
    line-height: 1.4;}
.newsDetail .body h2 {
    font-size: 18px;
    margin: 2em 0 0.6em;}
.newsDetail .body{
    border-top: solid 1px #b1dee3;
    border-bottom: solid 1px #b1dee3;
    padding-top: 22px;
    font-size: 16px;
    line-height: 1.9;
    padding: 22px 20px 20px;}
.newsDetail .body p{ margin: 0 0 1.2em; }
.newsDetail .nav{
    display: flex;
    gap: 14px;
    justify-content: space-between;
    margin-top: 26px;
    background: initial;
    padding: initial;}
.newsDetail .nav a{
    padding: 12px 14px;
    border: solid 1px #b1dee3;
    border-radius: 12px;}
@media screen and (max-width: 1024px) {
	.sub .mainvisual .title ul li a { font-size: 18px;}
	.philosophy .inner p { font-size: 18px;}
	.philosophy .inner p span { font-size: 20px;}
	.philosophy .inner p small { font-size: 16px;}
	.overview dl dt, .overview dl dd { font-size: 18px;}
}
@media screen and (max-width: 768px) {
	.sub .mainvisual .bg:after {
	    content: "";
	    background-image: url(../img/m_@2x.png);
	    width: 100%;}
	.sub .mainvisual .title ul { display: block;}
	.sub .mainvisual .title ul li {
	    width: max-content;
	    margin: 0 auto 7vw;}
	.sub .mainvisual .title ul li a {
	    font-size: 4vw;
	    padding: 7px 5dvh;}
	.sub .mainvisual .title ul li a:after { width: 11.25px;}
	.philosophy .inner { padding: min(10dvh, 70px) 0 1px;}
	.philosophy .inner h2 { margin-bottom: min(7dvh, 25px);}
	.philosophy .inner p { font-size: 3.5vw;}
	.philosophy .inner p span { font-size: 5vw;}
	.philosophy .inner, .overview .inner { margin: 0 auto min(5dvh, 35px);}
	.overview dl dt,
	.overview dl dd {
	    font-size: 4vw;
	    width: 100%;}
	.overview dl dt {
	    border: none;
	    padding: 10px 10px 0;
	    font-weight: bold;}
	.overview dl dd { padding: 0 10px 10px;}
	.access .inner {
	    margin: 0 auto 0;
	    padding: 0;}
	.overview h2,
	.access h2 {
	    display: flex;
	    align-items: baseline;}
	.overview h2 span,
	.access h2 span { margin-left: 7px;}
	.access iframe { height: 400px;}
.newsDetail article header {

    padding: 0 0 20px;
}
.newsDetail article header time {
    font-size: 4vw;}
.newsDetail article header h1 {
    font-size: 6vw;}
.newsDetail .body {
    padding: 22px 0 20px;}
.newsDetail .body p {
    margin: 0 0 .6em;
}

.news .inner .date div { margin: 0 auto;}
.news .detail .date { width: 100px;}
.news .detail .text { width: calc(100% - 100px);}
.news .detail .date,.news .detail .text {font-size: 4vw;}
.news .inner .date div.all {
    width: 100%;
    text-align: center;}
footer .copy small {
    font-size: 12px;
    margin: 30px auto;}
}


.contact {
    width: 90%;
    max-width: 900px;
    margin: 0px auto min(10dvh, 70px);
    padding: min(10dvh,70px) 0 min(5dvh,40px);}
.contact dl {
    display: flex;
    flex-wrap: wrap;}
.contact dl dt {
    width: min(35%, 250px);
    color: #1e61ae;
    font-size: 17px;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;}
.contact dl dt:after {
    content: "必須";
    color: #fff;
    background: #b1dee3;
    font-size: 15px;
    line-height: 1;
    padding: 3.5px 7px;}
.contact dl dt.gender:after { display:none;}
.contact dl dd {
    width: calc(100% - min(35%, 250px));
    margin-bottom: 20px;}
.contact dl dd select,
.contact dl dd input,
.contact dl dd textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
    border: none;
    border-radius: 0;
    font-size: 17px;
    background: #f0f0f0;}
*:focus-visible {
    outline: 2px solid #1e61ae;
    outline-offset: 0;
    background: #fff;}
.contact dl dd.gender {
    display: flex;
    gap: min(5vw, 40px);}
.contact dl dd input[type="radio"] {
    display: none;
    width: 30px;
    height: 30px;
    background: #f0f0f0;
    accent-color: #1e61ae;}
.contact dl dd.gender label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 17px;
    cursor: pointer;
    line-height: 1;
    margin: 0;}
.contact dl dd.gender label::before {
    content: "";
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #f0f0f0;
    border: none;
    transition: 0.3s;}
.contact dl dd.gender input[type="radio"]:checked + label::before {
    background: #1e61ae;
    border-color: #1e61ae;}
.contact input[name="contact_hp"] { display: none;}
.contact p {
    display: flex;
    gap: 40px;
    align-items: center;
    justify-content: center;
    margin: min(5vw, 50px) auto 0;}
.contact input[type="submit"] {
    background: #1e61ae;
    font-size: 17px;
    width: 120px;
    height: 30px;
    color: #fff;
    border: none;
    border-radius: 0;}
.contact input[type="reset"] {
    background: #b1dee3;
    font-size: 17px;
    width: 120px;
    height: 30px;
    color: #1e61ae;
    border: none;
    border-radius: 0;}
@media screen and (max-width: 768px) {
	.contact dl {
	    display: block;
	    flex-wrap: wrap;}
	.contact dl dt {
	    width: 100%;
	    margin-bottom: 10px;}
	.contact dl dd {
	    width: 100%;
	    margin-bottom: 30px;}
}