@charset "UTF-8";
/*
 * common.css
 *
 */


/* !HTML5 elements
---------------------------------------------------------- */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section
{ display: block;}

/* !Reseting
---------------------------------------------------------- */
body {
	font-family: "-apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", "Hiragino Kaku Gothic ProN", "メイリオ", meiryo, sans-serif";
	font-size: 16px;
	line-height: 1.5;
}
img {
	vertical-align:bottom;
	width: 100%;
}
.bold {
    font-weight: bold;
}
a {
	text-decoration: none;
	color: #000BFF;
}
a:hover {
	opacity:0.6;
	text-decoration: underline;
}
.red {
	color: red;
}
.kyocho {
	color: red;
	font-weight: bold;
}
.only_sp,
#dialog_menu {
	display:none;
}

/*==================================
             common
==================================*/
#wrapper {
	width: 100%;
	margin: 0px 0px;
}
.concept-in,
.section-in,
.footer-in,
#header-menu ul {
    width: 1100px;
    margin: 10px auto 100px;
}
.header-in {
    width: 1100px;
    margin: 10px auto 12px;
}
#header-menu {
    height: auto;
    padding: 2px 0px;
}
#header-menu ul {
    position: static;
}
#header-menu.fixed {
    position: fixed;
    bottom: auto;
    top: 0;
}
.more_btn {
	margin: 20px 0px;
}
.more_btn a{
	font-size: 12px;
	display: block;
	background-color: #1d2088;
	padding: 10px;
	border-radius: 31px;
	width: 130px;
	text-align: center;
	color: #fff;
	font-weight: bold;
	margin: 0px auto;
}
h3 {
    font-size: 24px;
    color: #1d2088;
    font-weight: bold;
    margin-bottom: 30px;
    background-color: #eee;
    width: fit-content;
    padding: 5px 100px;
}
h3.page-title {
    width: auto;
    background-color: #fff;
    position: relative;
    font-size: 57px;
    text-align: center;
    padding: 80px 0px 0px;
    line-height: 0.6em;
}
h3.page-title::before {
    content: "";
    background-image: url(../img/midashi.svg);
    position: relative;
    display: block;
    background-size: contain;
    width: 128px;
    height: 39px;
    top: -15px;
    background-repeat: no-repeat;
    left: 50%;
    margin-left: -45px;
}
h3.page-title span::before {
    content: '\A';
    white-space: pre;
}
h3.page-title span {
    font-size: 24px;
}
.googlemaps iframe,
.googlemaps object,
.googlemaps embed {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    -webkit-transition: all 0.7s ease;
    -moz-transition: all 0.7s ease;
    -o-transition: all 0.7s ease;
    transition: all  0.7s ease;
}
.googlemaps iframe:hover,
.googlemaps object:hover,
.googlemaps embed:hover {
    -webkit-filter: grayscale(0%);
    -moz-filter: grayscale(0%);
    -ms-filter: grayscale(0%);
    -o-filter: grayscale(0%);
    filter: grayscale(0%);
}
iframe {
  vertical-align: bottom;
}

/*==================================
             header
==================================*/
header {
    width: 100%;
}
.header-in {
    position: relative;
}
header img {
    width: 300px;
    height: auto;
}
.head-contact {
    position: absolute;
    top: 30px;
    right: 0px;
}
.head-contact a {
    padding: 20px 40px;
    color: #fff;
    background-color: #294fa1;
}

/*==================================
            first-view
==================================*/
.first-view {
    height: calc(100vh - 64px);
    position: relative;
}
.main-img {
    height: 100%;
    text-align: center;
}
.main-img img {
    height: 100%;
    width: auto;
    object-fit: cover;
}
.main-img img.sp {
    display: none;
}
h2{
    font-size: 34px;
    font-weight: bold;
    position: absolute;
    bottom: 30%;
    left: 10%;
    padding: 20px;
    background: rgb(175, 202, 265, 0.6);
}
h2.slide_add_in  {
    clip-path: inset(0 100% 0 0);
/*    display: inline-block;
    animation: textanimation 1s 0.6s forwards;*/
    margin: 0;
}
@keyframes textanimation {
    0% {
        clip-path: inset(0 100% 0 0);
    }
    100% {
        clip-path: inset(0);
    }
}
#header-menu {
    position: relative;
    width: 100%;
    bottom: 0;
    z-index: 10;
    background-color: #030c64;
}
#header-menu ul {
    bottom: 2px;
    right: 0;
    left: 0;
    margin: 0 auto;
    display: flex;
    flex-wrap: nowrap;
    text-align: center;
}
#header-menu ul  li {
    width: calc(1100px / 6);
    padding: 0px 10px;
}
#header-menu ul  li:nth-of-type(1) { background-color:#fff }
#header-menu ul  li:nth-of-type(2) { background-color:#f9cfb1 }
#header-menu ul  li:nth-of-type(3) { background-color:#f0f097 }
#header-menu ul  li:nth-of-type(4) { background-color:#c4e1bc }
#header-menu ul  li:nth-of-type(5) { background-color:#c1d9f1 }
#header-menu ul  li:nth-of-type(6) { background-color:#8d96b1; letter-spacing:-0.14em; }
#header-menu ul  li a {
    color: #000;
    display: block;
    padding: 20px 0px;
}
#header-menu ul li:hover {
    opacity: 0.6;
}

/*==================================
            concept
==================================*/
.concept {
    background-position: center;
    background-repeat: no-repeat;
    background-image: linear-gradient(to top, rgba(255, 255, 255, 1) 0%, transparent 20%, transparent 80%, rgba(255, 255, 255, 0) 100%),
                    url('../img/back1.jpg');
    background-attachment: fixed;
    background-size: cover;
    margin-bottom: 100px;
}
.concept-in {
    margin: 0px auto;
}
.concept h4 {
    font-size: 32px;
    color: #fff;
    font-weight: bold;
    padding: 100px 100px 20px;
}
.hokuto {
    font-size: 52px;
    font-weight: bold;
}
.concept p {
    font-size: 21px;
    color: #fff;
    font-weight: bold;
    line-height: 3em;
    padding: 30px 100px 200px;
}

/*==================================
            service
==================================*/
.service ul {
    display: flex;
    flex-wrap: wrap;
}
.service ul li {
    width: calc(25% - 26px);
    margin: 0px 10px 10px;
    padding: 25px 3px;
    text-align: center;
}
.service ul li:nth-of-type(1) { background-color: #fef2ea; }
.service ul li:nth-of-type(2) { background-color: #fcfbdd; }
.service ul li:nth-of-type(3) { background-color: #ebf4e4; }
.service ul li:nth-of-type(4) { background-color: #e5f2fc; }
.service ul li h5 {
    font-size: 12px;
    font-weight: bold;
}
.service ul li:nth-of-type(1) h5 {color:#b07246 ;}
.service ul li:nth-of-type(2) h5 {color:#a5a347 ;}
.service ul li:nth-of-type(3) h5 {color:#578a46 ;}
.service ul li:nth-of-type(4) h5 {color:#346287 ;}
.service ul li h6 {
    font-size: 24px;
    font-weight: bold;
    padding: 5px 20px 20px;
}
.service ul li p:nth-of-type(1) {
    font-size: 18px;
    padding: 15px;
    text-align: left;
}
.service-link-p {
    padding: 0px 30px;
    text-align: left;
}

/*==================================
            staff
==================================*/
.staff_slider {
    margin: 0px 25px;
}
.slick-slide {
    margin: 0px 5px;
    border: 1px solid #BDBDBD;
    padding: 10px 20px;
}
.name {
    text-align: center;
    font-weight: bold;
    font-size: 24px;
    padding: 20px 0px 10px 0px;
}
.comment {
    height: 130px;
}
.featherlight-content {
    width: 80vw;
}
.staff-shosai {
    text-align: center;
    display: none;
    padding: 20px 50px;
}
.staff-shosai>*:not(.name) {
    text-align: left;
}
.staff-shosai img {
    width: 300px;
    height: auto;
}
.staff-shosai .comment{
    height: auto;
}
.staff-shosai .name {
    font-size: 36px;
    padding: 20px 0px 10px 0px;
}
.staff-q {
    font-size: 21px;
    color: #848484;
    font-weight: bold;
    display: block;
    padding: 20px 0px 10px;
}
/*==================================
            topic-blog
==================================*/
.topic-blog ul {
    border: 1px solid #BDBDBD;
    padding: 20px;
    height: 200px;
    overflow-y: auto;
}
.topic-blog {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 0px;
}
.topic-blog section {
    width: calc(50% - 20px);
    margin: 0px 10px;
}
.topic-blog ul li {
    border-bottom: 1px solid #eee;
    padding: 10px 20px;
    display: flex;
}
.topic-blog ul li time {
    margin-right: 30px;
}
.topic-blog ul li p::after {
    
}
/*==================================
            news&topic
==================================*/
.single .news p.date-box {
    font-size: 12px;
}
.single .news p {
    padding: 20px 0px;
    font-size: 18px;
}
.single .news img {
    width: 300px;
    height: auto;
}
/*==================================
            blog
==================================*/
.single .blog p.date-box {
    font-size: 12px;
}
.single .blog p {
    padding: 20px 0px;
    font-size: 18px;
}
.single .blog img {
    width: 300px;
    height: auto;
}

/*==================================
            area
==================================*/
.area-div {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.area img {
    width: 200px;
}
.area-div p {
    font-size: 28px;
    font-weight: bold;
    padding: 60px 10px 50px 30px;
}
/*==================================
            contact
==================================*/
.contact {
    text-align: center;
}
.contact img {
    width: 75%;
}
/*==================================
            footer
==================================*/
footer {
    background-position: center;
    background-repeat: no-repeat;
    background-image: url('../img/back1.jpg');
    padding: 20px 5px 0px;
}
.footer-in {
    display: flex;
    flex-wrap: wrap;
    position: relative;
}
footer img {
    width: 300px;
}
footer p,
footer a {
    color: #fff;
}
.footer-address {
    padding: 40px 0px 10px;
}
.jigyosho-no {
    font-size: 12px;
}
.footer-nav {
    position: absolute;
    margin-left: 30px;
    right: 20px;
    top: 10px;
}
.footer-nav ul {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(5, auto);
    gap: 20px 30px;
    font-size: 14px;
}
.footer-nav li::before {
    content: "\f0da";
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: 16px;
    padding: 0px 15px 0px 0px;
    position: relative;
    top: 2px;
    color: #FFF;
}
footer .copyright {
    background-color: #fff;
    text-align: center;
    padding: 2px 0px;
    color: #000;
}
.sp-footer {
    display: none;
}