@charset "UTF-8";

:root {

/* 共通設定（基本カラーなどなど） */

}

body {font-family:'Zen Kaku Gothic New', sans-serif;color: #000000;position: relative;font-weight: 300;}


/*-------------------------
__base_style
-------------------------*/
#wrap{}
h1{}

/*-------------------------
__header
-------------------------*/
#header{}

/*-------------------------
__content
-------------------------*/
.topic_path{clear:both;padding:0 40px 40px;}
.topic_path ul{width:100%;text-align:left;}
.topic_path li{font-size:1.4em;line-height:1.4;font-weight:700;color:#000;vertical-align:top;display:inline-block;}
.topic_path li:before{content:">";color:#000;font-weight:400;margin-left:5px;margin-right:5px;}
.topic_path li:first-child:before{content:"";margin:0;}
.topic_path li a{font-weight:400;color:#000;text-decoration:underline;}
.topic_path li a:hover{text-decoration:none;}

#content #main{display:block;}

/*-------------------------
__footer
-------------------------*/
#footer {
}
.re_top{display:none;height:40px;width:40px;overflow:hidden;position:fixed;z-index:9999;right:15px;bottom:15px;}
.re_top img { width: 100%;height: auto;}
.re_top a{display:block;}
.re_top a:hover img{margin-top:-40px;}


.copyright {background: #000000;}
.copyright p {font-size: 14px;line-height: 60px; text-align: center;color: #ffffff;}
@media screen and (max-width: 767px) {
.copyright {background: #000000;}
.copyright p {font-size: 3vw;line-height: 60px; text-align: center;color: #ffffff;}
}





header {
position: fixed; /*← fixedで固定 */
width: 100%; 
height: 4vw; 
box-sizing: border-box;
top: 0; 
left: 0; 
display: flex; 
align-items: center; 
z-index: 99;
}

.pc {display: block;}
.sph {display: none;}

.header_back {}
.header_back h1 {font-size: 2vw;line-height: 1.6;font-weight: 500;color: #fff; position: absolute;left: 40px;top: 30px;
transition-property: all;
transition-duration: 1s;}
.header_back h1 a {color: #fff;text-decoration: none;}


.header_back2 {}
.header_back2 h1 {font-size: 2vw;line-height: 1.6;font-weight: 500;color: #000; position: absolute;left: 40px;top: 30px;
transition-property: all;
transition-duration: 1s;}
.header_back2 h1 a {color: #000;text-decoration: none;}




.header_menu {position: absolute;
top: 2.5vw;right: 40px;
transition-property: all;
transition-duration: 1s;}
.header_menu ul {
display:-webkit-box;
display:-moz-box;
display:-ms-flexbox;
display:-webkit-flex;
display:-moz-flex;
display:flex;
-webkit-box-lines:multiple;
-moz-box-lines:multiple;
-webkit-flex-wrap:wrap;
-moz-flex-wrap:wrap;
-ms-flex-wrap:wrap;
flex-wrap:wrap;
}
.header_menu ul li {font-size: 1.2vw;line-height: 1.6;font-weight: 500;}
.header_menu ul li a {color: #fff;text-decoration: none;

transition-property: all;
transition-duration: 1s;
}
.header_menu ul li a:hover {text-decoration: underline;}
.header_menu ul li::after {
content: "／";
margin: 0 10px;color: #fff;
}
.header_menu ul li:last-child::after {
content: inherit;
}


.header_menu2 {position: absolute;
top: 2.5vw;right: 40px;
transition-property: all;
transition-duration: 1s;}
.header_menu2 ul {
display:-webkit-box;
display:-moz-box;
display:-ms-flexbox;
display:-webkit-flex;
display:-moz-flex;
display:flex;
-webkit-box-lines:multiple;
-moz-box-lines:multiple;
-webkit-flex-wrap:wrap;
-moz-flex-wrap:wrap;
-ms-flex-wrap:wrap;
flex-wrap:wrap;
}
.header_menu2 ul li {font-size: 1.2vw;line-height: 1.6;font-weight: 500;}
.header_menu2 ul li a {color: #000;text-decoration: none;

transition-property: all;
transition-duration: 1s;
}
.header_menu2 ul li a:hover {text-decoration: underline;}
.header_menu2 ul li::after {
content: "／";
margin: 0 10px;color: #000;
}
.header_menu2 ul li:last-child::after {
content: inherit;
}




@media screen and (max-width: 1060px) {

}
@media screen and (max-width: 767px) {

header {
position: fixed; /*← fixedで固定 */
width: 100%; 
height: 12vw; 
box-sizing: border-box;
top: 0; 
left: 0; 
display: flex; 
align-items: center; 
z-index: 99;
}

.pc {display: none;}
.sph {display: block;}

.header_back {}
.header_back h1 {font-size: 4.2vw;line-height: 1.6;font-weight: 500;color: #fff; 
position: absolute;
top: 50%;
left: 5vw;
transform: translateY(-50%);
-webkit- transform: translateY(-50%);
transition-property: all;
transition-duration: 1s;}
.header_back h1 a {color: #fff;text-decoration: none;}
.header_back h1 span {font-size: 3.8vw;}


.header_back2 {}
.header_back2 h1 {font-size: 4.2vw;line-height: 1.6;font-weight: 500;color: #000; 
position: absolute;
top: 50%;
left: 5vw;
transform: translateY(-50%);
-webkit- transform: translateY(-50%);
transition-property: all;
transition-duration: 1s;}
.header_back2 h1 a {color: #000;text-decoration: none;}
.header_back2 h1 span {font-size: 3.8vw;}



/* overlay-styles.css */
.hamburger-overlay {



position: absolute;
top: 50%;
right: 2.5vw;
transform: translateY(-50%) ;
-webkit- transform: translateY(-50%) ;
width: 48px;
height: 48px;
border: none;
background: transparent;
cursor: pointer;
z-index: 999;
}
.hamburger-overlay__line {
position: absolute;
left: 11px;
width: 26px;
height: 2px;
background-color: #fff;
transition: all .6s;
}
.hamburger-overlay__line:nth-of-type(1) { top: 14px; }
.hamburger-overlay__line:nth-of-type(2) { top: 23px; }
.hamburger-overlay__line:nth-of-type(3) { top: 32px; }
.hamburger-overlay.active .hamburger-overlay__line {background-color: #fff!important;}
.hamburger-overlay.active .hamburger-overlay__line:nth-of-type(1) {transform: translateY(9px) rotate(-45deg);}
.hamburger-overlay.active .hamburger-overlay__line:nth-of-type(2) {opacity: 0;}
.hamburger-overlay.active .hamburger-overlay__line:nth-of-type(3) {transform: translateY(-9px) rotate(45deg);}
.nav-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background-color: rgba(0, 0, 0, 0.95);
visibility: hidden;
opacity: 0;
transition: all .6s;
z-index: 900;
}
.nav-overlay.active {
visibility: visible;
opacity: 1;
}
.nav-overlay__content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
text-align: center;
}
.nav-overlay__list {
margin: 0;
padding: 0;
list-style: none;
}
.nav-overlay__item {
opacity: 0;
transform: translateY(20px);
transition: all .6s;
}
.nav-overlay.active .nav-overlay__item {
opacity: 1;
transform: translateY(0);
}
.nav-overlay.active .nav-overlay__item:nth-child(1) { transition-delay: 0.1s; }
.nav-overlay.active .nav-overlay__item:nth-child(2) { transition-delay: 0.2s; }
.nav-overlay.active .nav-overlay__item:nth-child(3) { transition-delay: 0.3s; }
.nav-overlay.active .nav-overlay__item:nth-child(4) { transition-delay: 0.4s; }
.nav-overlay__link {
display: block;
padding: 20px;
color: #fff!important;
font-size: 24px;
text-decoration: none;
transition: color .3s;
}
.nav-overlay__link:hover {color: #4a90e2;}
.nav-overlay__link a {display: block;}
}









.header{  background-color:rgba(255, 255, 255, 0);
transition-property: all;
transition-duration: 1s;}
.header.scrolled {
background-color:rgba(255, 255, 255, 0.75);color: #000!important;
transition-property: all;
transition-duration: 1s;
height: 60px;
}
.header.scrolled h1,
.header.scrolled a,
.header.scrolled ul li::after{color: #000;

transition-property: all;
transition-duration: 1s;
}
.header.scrolled h1 {font-size: 1.4vw;top:20px;}
.header.scrolled .header_menu {top: 20px;}
@media screen and (max-width: 1060px) {

}
@media screen and (max-width: 767px) {
.header{  background-color:rgba(255, 255, 255, 0);
transition-property: all;
transition-duration: 1s;}
.header.scrolled {
background-color:rgba(255, 255, 255, 0.75);color: #000!important;
transition-property: all;
transition-duration: 1s;}
.header.scrolled h1,
.header.scrolled a,
.header.scrolled ul li::after{color: #000;

transition-property: all;
transition-duration: 1s;
}
.header.scrolled h1 {font-size: 3.6vw;
position: absolute;
top: 50%;
left: 5vw;
transform: translateY(-50%);
-webkit- transform: translateY(-50%);
}
.header_back h1 span {font-size: 3vw;}
.header.scrolled .header_menu {top: 1vw;}

.header.scrolled .hamburger-overlay__line {
background-color: #000;
}


}





.header{  background-color:rgba(255, 255, 255, 0);
transition-property: all;
transition-duration: 1s;}
.header.layer {
background-color:rgba(255, 255, 255, 0.75);color: #000!important;
transition-property: all;
transition-duration: 1s;}
.header.layer h1,
.header.layer a,
.header.layer ul li::after{color: #000;

transition-property: all;
transition-duration: 1s;
}
.header.layer h1 {font-size: 1.4vw;top:1vw;}
.header.layer .header_menu {top: 1vw;}
@media screen and (max-width: 1060px) {

}
@media screen and (max-width: 767px) {
.header{  background-color:rgba(255, 255, 255, 0);
transition-property: all;
transition-duration: 1s;}
.header.layer {
background-color:rgba(255, 255, 255, 0.75);color: #000!important;
transition-property: all;
transition-duration: 1s;}
.header.layer h1,
.header.layer a,
.header.layer ul li::after{color: #000;

transition-property: all;
transition-duration: 1s;
}
.header.layer h1 {font-size: 3.6vw;
position: absolute;
top: 50%;
left: 5vw;
transform: translateY(-50%);
-webkit- transform: translateY(-50%);
}
.header_back h1 span {font-size: 3vw;}
.header.layer .header_menu {top: 1vw;}

.header.layer .hamburger-overlay__line {
background-color: #000;
}


}





#service{
padding-top: 100px;
margin-top: -100px;}


#profile,
#form {
padding-top: 60px;
margin-top: -60px;}
@media screen and (max-width: 767px) {
#service,
#profile,
#form {    padding-top: 60px;
margin-top: -60px;}

}






.error_back {padding: 230px 0 0;}
.error_title {}
.error_title p {font-size: 28px;line-height: 2; text-align: center; width: 960px;margin: auto; text-align: center;position: relative;}
.error {padding: 40px 0 160px;}
.error p {font-size: 18px;line-height: 28px;text-align: center;}
@media screen and (max-width: 1060px) {

}
@media screen and (max-width: 767px) {
.error_back {padding: 100px 0 0;}
.error_title {}
.error_title p {font-size: 4vw;text-align: center;width: 90%;margin: auto; text-align: center;position: relative;}
.error {padding: 10% 0;margin: 0 5%;}
.error p {font-size: 12px;line-height: 18px;text-align: left;}

}