@charset "utf-8";

/*-----------------------------------------------
blue   16,143,174
purple 86,33,123
pink   200,61,136
-----------------------------------------------*/

/*-----------------------------------------------
  font
-----------------------------------------------*/
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap");

/*-----------------------------------------------
  common
-----------------------------------------------*/
body,
input,
textarea {
font-size: 16px;
font-family: "Noto Sans JP", sans-serif;
font-weight: 400;
line-height: 1.5;
color: #000;
}
a {
color: #000;
text-decoration: none;
transition: 0.2s;
}
a img {
transition: 0.2s;
}
a:hover {
text-decoration: none;
}
img {
display: block;
max-width: 100%;
}
@media screen and (max-width: 640px) {
}
/* object-fit */
img.objectFit {
object-fit: cover;
font-family: "object-fit: cover;";
}

/*-----------------------------------------------
  layout
-----------------------------------------------*/
body {
/*
background-image: url("../img/body_bg.jpg");
background-position: center top;
background-repeat: repeat-x;
background-size: 1920px;
*/
}
#contents {
display: flex;
max-width: 1080px;
margin:  0 auto;
justify-content: space-between;
padding: 4%;
background: #FFF;
box-sizing: content-box;
}
main {
width: calc(92% - 250px);
}
aside {
width: 250px;
}

/*-----------------------------------------------
  header
-----------------------------------------------*/
header {
padding: 20px;
background: #FFF;
}
header .inner {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
max-width: 1080px;
margin:  0 auto;
}
header .logo {
max-width: 360px;
}
header .contact {
max-width: 540px;
}
header .contact .comment {
margin-bottom: 1em;
font-size: 0.7em;
color: #999;
}
@media screen and (max-width: 1024px) {
	header {
	padding: 0;
	}
	header .inner {
	display: block;
	padding: 0;
	}
	header .header {
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
	padding: 2.5% 4%;
	}
	header .logo {
	width: 35%;
	}
	header  .tel_sp {
	display: block;
	margin: 0 6% 0 auto;
	width: 200px;
	font-size: 0.85em;
	line-height: 0.65;
	text-align: right;
	color: rgba(0,95,190,1);
	}
}
@media screen and (max-width: 640px) {
	header  .tel_sp {
	right: calc(8vw + 10%);
	width: 45%;
	font-size: 0.65em;
	}
}

/* burger */
header .burger {
display: none;
position: relative;
z-index: 2000;
width: 35px;
height: 35px;
border-radius: 2px;
}
header .burger:hover {
cursor: pointer;
}
header .burger:before,
header .burger:after,
header .burger span {
display: block;
width: 100%;
position: absolute;
left: 0;
right: 0;
transition: 0.2s;
}
header .burger:before {
content: "";
top: 10%;
border-bottom: 2px solid rgba(0,95,190,1);
}
header .burger:after {
content: "";
bottom: 10%;
border-bottom: 2px solid rgba(0,95,190,1);
}
header .burger span {
border-bottom: 2px solid rgba(0,95,190,1);
top: calc(50% - 1px);
}
header .burger.on span {
display: none;
}
header .burger.on:before {
top: calc(50% - 1px);
transform: rotate(-45deg);
}
header .burger.on:after {
bottom: calc(50% - 1px);
transform: rotate(45deg);
}
@media screen and (max-width: 1024px) {
	header .burger {
	display: block;
	}
}
@media screen and (max-width: 640px) {
	header .burger {
	width: 8vw;
	height: 8vw;
	}
}

/*-----------------------------------------------
  nav
-----------------------------------------------*/
nav {
background: rgba(16,143,174,1);
}
nav ul {
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: flex-start;
max-width: 1080px;
margin:  0 auto;
}
nav li {
position: relative;
width: 18.8%;
text-align: center;
border-right: 1px solid rgba(255,255,255,0.5);
}
nav li.home {
width: 6%;
text-indent: -9999px;
border-left: 1px solid rgba(255,255,255,0.5);
}
nav a {
display: block;
padding: 0.8em 0.5em;
color: #FFF;
}
nav li:hover a {
background: rgba(0,0,0,0.1);
}
nav li.home {
background-image: url("../img/ico_home_w.png");
background-position: center center;
background-repeat: no-repeat;
background-size: 1em;
}
nav li.home:hover {
background-image: url("../img/ico_home_w.png");
}
nav li.privacy,
nav li.link {
display: none;
}
nav a.active {
color: #FFF;
background-color: rgba(0,80,96,1);
}
nav li ul {
position: absolute;
display: none;
border: 0;
}
nav li li {
width: 16em;
font-size: 0.9em;
text-align: left;
background-color: rgba(255,255,255,0.85);
border: 0;
}
nav li li a {
color: #FFF;
background-color: rgba(0,0,0,0.8);
background-image: url("../img/arw_right_w.png");
background-position: right 0.5em center;
background-repeat: no-repeat;
background-size: 0.75em;
}
nav li li a:hover {
background-color: rgba(0,0,0,0.7);
}
@media screen and (max-width: 800px) {
	nav {
	display: none;
	padding: 0;
	background-color: rgba(255,255,255,0.85);
	}
	nav ul {
	z-index: 200;
	display: block;
	border-right: 0;
	}
	nav li {
	position: static;
	width: 100%;
	text-align: left;
	border-left: 0;
	}
	nav li.home {
	width: 100%;
	}
	nav a {
	padding: 0.8em 1em;
	}
	nav li:hover {
	background-color: rgba(0,80,96,1);
	}
	nav li:hover a {
	color: #FFF;
	}
	nav li.home {
	background-position: left 1em center;
	}
	nav li.privacy,
	nav li.link {
	display: block;
	}
	nav li ul {
	position: static;
	}
	nav li li {
	width: 100%;
	}
}

/*-----------------------------------------------
  footer
-----------------------------------------------*/
footer {
}
/* data */
footer .data {
display: flex;
justify-content: center;
align-items: flex-end;
padding: 2% 4%;
background: rgba(16,143,174,0.25);
}
footer .data .photo {
max-width: 300px;
margin-right: 10px;
border-radius: 5px;
}
footer .data dt {
max-width: 220px;
}
footer .data dd {
margin-left: 2.5em;
font-size: 0.85em;
}
footer .data .tel a {
padding-left: 0.85em;
font-family: "Roboto", sans-serif;
font-size: 2.5em;
font-weight: 700;
line-height: 1.25;
color: rgba(86,33,123,1);
background-image: url(../img/ico_tel.png);
background-position: left center;
background-repeat: no-repeat;
background-size: 0.75em;
}
footer .data .tel,
footer .data .address {
margin-top: 1em;
padding-top: 0.5em;
border-top: 1px dotted rgba(86,33,123,1);
}
@media screen and (max-width: 640px) {
}

/* navi */
footer .navi {
padding: 2% 4%;
background: rgba(0,0,0,0.025);
}
footer .navi ul {
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: center;
align-items: center;
max-width: 1050px;
margin: 0 auto;
}
footer .navi li:not(:first-child) {
margin-left: 1.5em;
}
footer .navi a {
text-decoration: underline;
}
footer .navi a:hover {
text-decoration: underline;
}
@media screen and (max-width: 640px) {
	footer .navi {
	padding: 8% 0;
	background: rgba(0,95,190,1);
	}
	footer .navi ul {
	font-weight: 400;
	border-top: 1px solid #FFF;
	}
	footer .navi li {
	width: 50%;
	font-size: 0.9em;
	text-align: center;
	border-bottom: 1px solid #FFF;
	}
	footer .navi li:nth-child(odd) {
	border-right: 1px solid #FFF;
	}
	footer .navi a {
	display: block;
	padding: 1.25em 0;
	}
	footer .navi li:not(:first-child) {
	margin-left: 0;
	}
}
/* copyright */
footer .copyright {
padding: 2% 4%;
font-size: 0.7em;
text-align: center;
color: #FFF;
background: rgba(16,143,174,1);
}
@media screen and (max-width: 640px) {
	footer .copyright {
	padding: 4%;
	}
}

/*-----------------------------------------------
  page Top
-----------------------------------------------*/
#pagetop {
position: fixed;
bottom: 10px;
right: 10px;
}
#pagetop a {
display: block;
padding: 20px;
background: rgba(16,143,174,1);
opacity: 0.9;
border-radius: 100%;
}
#pagetop img {
width: 20px;
}
#pagetop a:hover {
opacity: 0.5;
}

/*-----------------------------------------------
  aside
-----------------------------------------------*/
aside .sns li {
border: 1px solid #CCC;
border-radius: 5px;
}
aside .sns li:not(:first-child) {
margin-top: 10px;
}
aside .sns img {

}
aside .bnr li {
margin-top: 20px;
}
aside .bnr a:hover img {
opacity: 0.8;
}
@media screen and (max-width: 640px) {
}