@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&display=swap');

/* ==========================================================================
   01. Reset
   ========================================================================== */
html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; }
h1,
h2,
h3,
h4,
h5,
h6, p { font-weight: normal; transform: rotate(0.05deg);}
body { line-height: 1; font-family: 'Noto Sans JP', sans-serif; overflow-x: hidden; -webkit-text-size-adjust: 100%;}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section { display: block; }
ul, li { list-style: none; }
blockquote,
q { quotes: none; }
blockquote:before,
blockquote:after,
q:before,
q:after { content: none; }
a { margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent; text-decoration: none;
-webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all  0.3s ease; color:#000; }
a:hover { opacity: .7; }
ins { background-color: #ff9; color: #000; text-decoration: none; }
mark { background-color: #ff9; color: #000; font-style: italic; font-weight: bold; }
del { text-decoration: line-through; }
abbr[title],
dfn[title] { border-bottom: 1px dotted; cursor: help; }
table { border-collapse: collapse; border-spacing: 0; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
input,
select { vertical-align: middle; }

/* ==========================================================================
   02. common
   ========================================================================== */

.header {
  position: fixed;
  top: 0;
  z-index: 999;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  width: 100%;
	background: rgba(255, 255, 255,0);
}
.header.is-scroll{ background: rgba(255, 255, 255 ,1); box-shadow: 0px 2px 3px 0px #cfcece;}

.header .container{ width: 100%; position: relative; padding: 60px 0 0;}
@media only screen and (max-width: 768px) {
	.header .container{ padding: 15px 0;}
}
.header .container .top_cv_btn{ position: absolute; top:0; right: 0; width: 550px; display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center;}
.header .container .top_cv_btn li{text-align: center;}
.header .container .top_cv_btn li.office_link a{ text-align: center; font-size: 14px; color: #000; position: relative;}
.header .container .top_cv_btn li.office_link a:after{ content: ""; width: 13px; height: 13px; background: url("../../img/link_icon01.svg") no-repeat center center/ cover; position: absolute; top: 0; bottom: 0; margin:  auto; right: -20px;}
.header .container .top_cv_btn li.office_link a:hover{ color: #0065b3; opacity: 1;}
.header .container .top_cv_btn li.contact_btn a{display: block; width: 200px; background: #0065b3; font-size: 16px; color: #fff; padding: 20px 0;}
@media only screen and (max-width: 768px) {
	.header .container .top_cv_btn{ display: none;}
}

.header .header_content{ width: 1200px; margin: 0 auto; position: relative;}

@media only screen and (max-width: 1200px) {
	.header .header_content{ width: 95%; }
}

@media only screen and (max-width: 768px) {
	.header .header_content{ width: 100%; }
}

.header .logo {
    position: relative;
    z-index: 9999;
	width: 300px; display: flex; align-items: center;justify-content: space-between;
}

.header .logo:hover {
  opacity: 0.6;
}

@media only screen and (max-width:820px) {
	.header .logo {
		width: 30%;
	}
}

@media only screen and (max-width: 768px) {
  .header .logo {
    width: 12.6rem;
	  margin: 0 15px;
  }
}

.header .logo img{
    width:182px;
    height: auto;
}

@media only screen and (max-width:820px) {
	.header .logo img{
		width:60%;
	}
}

.header .logo p{
    font-size: 14px;
    color: #717171;
    display: inline;
}

.wrap {
	width: 1200px;
    max-width: 100%;
	margin: 0 auto;
	box-sizing: border-box;
}

@media only screen and (max-width: 1200px) {
	.wrap {
		width: 95%;
	}
}

@media only screen and (max-width: 768px) {
	.btn_hamburger {
	  position: absolute;
	  top: 25px;
	  right: 20px;
	  width: 2.5rem;
	}
	.btn_hamburger span {
	  width: 2.5rem;
	  height: 0.2rem;
	  background: #0065b3;
	  -webkit-transition: 0.4s;
	  transition: 0.4s;
	  display: block;
		position: absolute; 
	}
	.btn_hamburger span:hover, .btn_hamburger span:active{opacity: 1;}
	.btn_hamburger span:nth-child(1){ top: 0;}
	.btn_hamburger span:nth-child(2){ top: 10px;}
	.btn_hamburger span:nth-child(3){top: 20px;}



	.btn_hamburger.is-active span:first-child {
	  -webkit-transform: rotate(-45deg) translate(-0.5rem, 0.4rem);
			  transform: rotate(-45deg) translate(-0.5rem, 0.4rem);
	}
	.btn_hamburger.is-active span:nth-child(2){display: none;}

	.btn_hamburger.is-active span:last-child {
	  -webkit-transform: rotate(45deg) translate(-0.4rem, -0.3rem);
			  transform: rotate(45deg) translate(-0.4rem, -0.3rem);
		position: absolute;
		top: 20px;
	}
}
.gnavi{ width: 650px; position: absolute; right: 0; top: 18px; }
.gnavi ul.navi{ width: 100%; display: flex; justify-content: space-between;}
.gnavi ul.navi li a{ color: #000; font-size: 14px; position: relative;}
@media only screen and (max-width: 768px) {
	.gnavi ul.navi li a{  font-size: 18px; font-weight: bold;}
}
.gnavi ul.navi li a:hover{ color: #0065b3; opacity: 1; }
.gnavi ul.navi li a:hover:after{ content: ""; width: 8px; height: 8px; background: #0065b3;  left: 0; right: 0; margin: auto; bottom: -15px; position: absolute; border-radius: 50%;}

/*
.gnavi ul.navi li a.current{ color: #0065b3; opacity: 1; }
.gnavi ul.navi li a.current:after{ content: ""; width: 8px; height: 8px; background: #0065b3;  left: 0; right: 0; margin: auto; bottom: -15px; position: absolute; border-radius: 50%;}
*/
.gnavi hr{display: none;}
.gnavi .navibtn{display: none;}

@media only screen and (max-width:820px) {
	.gnavi{ width: 60%;  }
}

@media only screen and (max-width: 768px) {
	  .gnavi {
		/*left: -100%;*/
		  top:-100%;
		width: 100%;
		height: 100vh;
		position: absolute;
		/*top: 0;*/
		 bottom: 0;
		background: #ffffff;
		-webkit-transition: 0.3s;
		transition: 0.3s;
		opacity: 0;
		  display: none;
	  }

	.header.is-show .gnavi {
	  /*left: 0;*/
		top: 0;
	  opacity: 1; top: -15px;
		display: block;

	}

	.header .gnavi ul.navi{
			gap:32px 0; flex-wrap: wrap; align-items: flex-start; width: 70%; margin: 80px auto 20px; height: max-content;
	}

	.header .gnavi ul.navi li{width: 100%;}	

	.header .navi li a {
	  color: #000; font-size: 16px;
	}
	.gnavi ul.navi li a.current:after{ background: none;  }
	.gnavi hr{display: block; border: none; border-bottom: 1px solid #abacac; width: 90%; margin:  30px auto;}
	.gnavi .navibtn{display: block; width: 70%; margin: 0 auto; display: flex; flex-wrap: wrap; gap:25px 0;}
	.gnavi .navibtn li{text-align: left; width: 100%;}
	.gnavi .navibtn li.office_link a{ text-align: center; font-size: 18px; color: #000; position: relative;}
	.gnavi .navibtn li.office_link a:after{ content: ""; width: 13px; height: 13px; background: url("../../img/link_icon01.svg") no-repeat center center/ cover; position: absolute; top: 0; bottom: 0; margin:  auto; right: -20px;}
	.gnavi .navibtn li.office_link a:hover{ color: #0065b3; opacity: 1;}
	.gnavi .navibtn li.contact_btn a{display: block; width: 100%; background: #0065b3; font-size: 16px; color: #fff; padding: 20px 0; text-align: center;}
}


/* ==========================================================================
footer
   ========================================================================== */
footer .footer_top{
	background: #e5eff8; width: 100%; min-height: 250px; position: relative; line-height: 0;
}
@media only screen and (max-width: 820px) {
	footer .footer_top{min-height: 180px; }
}

@media only screen and (max-width:768px) {
	footer .footer_top{	min-height:auto;}
}

footer .footer_top .img{position: absolute; top: 0; right: 0;} 
@media only screen and (max-width:820px) {
	footer .footer_top .img{width: 45%;} 
	footer .footer_top .img img{width: 100%; height: auto; object-fit: cover; }
}

@media only screen and (max-width:768px) {
	footer .footer_top .img{position: relative; top: auto; right: auto; width: 100%;} 
}

footer .footer_top .wrap{ width: 1200px; margin: 0 auto; padding: 110px 0;}
@media only screen and (max-width: 1200px) {
	footer .footer_top .wrap{ width: 95%; }
}
@media only screen and (max-width: 820px) {
	footer .footer_top .wrap{ padding: 75px 0;}
}
@media only screen and (max-width:768px) {
	footer .footer_top .wrap{ padding: 35px 0;}
}

footer .footer_top .wrap p a{ font-size: 32px; color: #43494c; }
footer .footer_top .wrap p a:hover{ color: #0065b3; opacity: 1;}
@media only screen and (max-width:768px) {
	footer .footer_top .wrap p a{ font-size: 26px; font-weight: bold;}
}

footer .footer_top .wrap p:after{ content: ""; width: 28px; height: 25px; background: url("../../img/link_icon01.svg") no-repeat center/cover; display: inline-block; margin: 0 0 0 10px;}
@media only screen and (max-width:768px) {
	footer .footer_top .wrap p:after{ width: 23px; height: 20px; }
}


footer .footer_middle{ width: 100%; background: #5a5a5a; padding: 25px 0 50px;}

@media only screen and (max-width:768px) {
	footer .footer_middle{ padding: 15px 0;}
}

footer .footer_middle .wrap{width: 1200px; margin: 0 auto;}
@media only screen and (max-width: 1200px) {
	footer .footer_middle .wrap{width: 95%; }
}
footer .footer_middle .wrap .linkarea01{ width: 100%; border-bottom: 1px solid #fff; padding: 0 0 30px;}
footer .footer_middle .wrap .linkarea01 a{font-size: 14px; color: #fff; font-weight: bold;}
@media only screen and (max-width:768px) {
	footer .footer_middle .wrap .linkarea01{display: none;}
}

footer .footer_middle .wrap .linkarea02{width: 100%; display: flex; justify-content: space-between; padding: 30px 0;}
footer .footer_middle .wrap .linkarea02 ul.linktxt01{ width: 730px; display: flex; justify-content: space-between; flex-wrap: wrap; }
@media only screen and (max-width: 820px) {
	footer .footer_middle .wrap .linkarea02 ul.linktxt01{ width: 70%; }
}

@media only screen and (max-width: 768px) {
	footer .footer_middle .wrap .linkarea02 ul.linktxt01{ display: none;}
}

footer .footer_middle .wrap .linkarea02 ul.linktxt01 li a{font-size: 14px; font-weight: bold; line-height: 1.6; color: #fff;}
footer .footer_middle .wrap .linkarea02 ul.linkbtn01{ width: 280px; display: flex; flex-wrap: wrap; gap: 15px 0;}
@media only screen and (max-width: 820px) {
	footer .footer_middle .wrap .linkarea02 ul.linkbtn01{ width: 25%; }
}

@media only screen and (max-width: 768px) {
	footer .footer_middle .wrap .linkarea02 ul.linkbtn01{ width: 85%; margin: 0 auto; gap: 30px 0;}
}

footer .footer_middle .wrap .linkarea02 ul.linkbtn01 li{width: 100%;}
footer .footer_middle .wrap .linkarea02 ul.linkbtn01 li a{text-align: center; color: #fff; font-size: 14px; font-weight: bold; padding: 15px 0; width: 100%; display: block; border-radius: 5px;}
@media only screen and (max-width: 768px) {
	footer .footer_middle .wrap .linkarea02 ul.linkbtn01 li a{font-size: 16px; padding: 15px 0 15px 20px; text-align: left; box-sizing: border-box;}
}
footer .footer_middle .wrap .linkarea02 ul.linkbtn01 li:nth-child(1) a{ background: #36688a;}
footer .footer_middle .wrap .linkarea02 ul.linkbtn01 li:nth-child(2) a{ background: #925b63;}
footer .footer_middle .wrap .linkarea02 ul.linkbtn01 li:nth-child(3) a{ background: #a38a2d;}
footer .footer_middle .wrap .linkarea02 ul.linkbtn01 li a:hover{opacity: 1;}
footer .footer_middle .wrap .linkarea02 ul.linkbtn01 li:nth-child(1) a:hover{ background: #0f486d;}
footer .footer_middle .wrap .linkarea02 ul.linkbtn01 li:nth-child(2) a:hover{ background: #753a42;}
footer .footer_middle .wrap .linkarea02 ul.linkbtn01 li:nth-child(3) a:hover{ background: #866d06;}
footer .footer_linktxt02{ width: 100%; background: #444;}
footer .footer_linktxt02 ul{width: 1200px; margin: 0 auto; display: flex; justify-content: flex-end; padding: 20px 0; gap: 0 30px; }
@media only screen and (max-width: 1200px) {
	footer .footer_linktxt02 ul{width: 95%;}
}

@media only screen and (max-width: 768px) {
	footer .footer_linktxt02 ul{flex-wrap: wrap; justify-content: space-around; gap:  15px;}
}
footer .footer_linktxt02 ul li a{font-size: 12px; line-height: 1.6; color: #fff;     position: relative;   padding: 0 10px 0 0;}
footer .footer_linktxt02 ul li a:after{ content: ""; width: 15px; height: 15px; background: url("../../img/link_icon03.svg") no-repeat center/ cover; position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    right: -10px;}
@media only screen and (max-width: 768px) {
	footer .footer_linktxt02 ul li{ width: auto; margin: 0 20px;}
	footer .footer_linktxt02 ul li a{font-size: 11px; line-height: 1.6; color: #fff;}
	footer .footer_linktxt02 ul li a:after{ content: ""; width: 15px; height: 15px; background: url("../../img/link_icon03.svg") no-repeat center/ cover; display: inline-block; margin-left: 5px;}
}

footer .footer_bottom{ width: 100%; background: #fff; padding: 60px 0;}
@media only screen and (max-width: 820px) {
	footer .footer_bottom{ padding: 40px 0;}
}

@media only screen and (max-width: 768px) {
	footer .footer_bottom{ padding: 20px 0;}
}
footer .footer_bottom .wrap{ width: 1200px; margin: 0 auto;}
@media only screen and (max-width: 1200px) {
	footer .footer_bottom .wrap{ width: 95%; }
}
footer .footer_bottom .wrap .img01{ width: 170px; margin-bottom: 20px}
footer .footer_bottom .wrap .img02{width: 115px; margin-bottom: 30px;}
footer .footer_bottom .wrap .img01 img, footer .footer_bottom .wrap .img02 img{ width: 100%; height: auto;}
footer .footer_bottom .wrap p{font-size: 12px; color: #281915; line-height: 1.6;}

/* ==========================================================================
btn
========================================================================== */

.ScrollTop {
  position: fixed;
  right: 50px;
  bottom: 50px;
  width: 45px;
  height: 45px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.65s;
}

@media only screen and (max-width: 768px) {
	.ScrollTop {
	  right: 20px;
	  bottom: 20px;
	}
}

.ScrollTop img{width: 100%; height: auto;}

.ScrollTop.isActive {
  transition: all 0.65s;
}


/* ==========================================================================
layout
   ========================================================================== */
.pl30{padding-left: 30px;}
.mb20{margin-bottom: 20px;}


.sp_on{ display: none;}
 @media (max-width: 768px) {
.sp_on{  display: block;}     
}

.tab_on{ display: none;}
 @media (max-width: 979px) {
.tab_on{  display: block;}     
}

.pc_on{ display: block;}
 @media (max-width: 768px) {
.pc_on{  display: none;}     
}

@media screen and (min-width: 768px) {
	a[href^="tel:"] {
		pointer-events: none;
	}
}