@charset "utf-8";
/* CSS Document */
/*font-family: 'M PLUS 1p', sans-serif;*/
/*font-family: 'Sawarabi Gothic', sans-serif;*/
/*font-family: 'Raleway', sans-serif;*/
@media (min-width:960px) {
 .for_pc {
  display: block;
 }
 .for_sp {
  display: none !important;
 }
 a[href^="tel"] {
  pointer-events: none;
 }
}
.attention {
 color: #e60012;
}
sup {
 font-size: 70%;
 vertical-align: text-bottom;
}
a,
button {
 text-decoration: none;
 -webkit-transition: all 0.35s ease;
 -moz-transition: all 0.35s ease;
 -ms-transition: all 0.35s ease;
 -o-transition: all 0.35s ease;
 transition: all 0.35s ease;
}
/*a:hover,
button:hover {
 filter: alpha(opacity=70);
 -moz-opacity: 0.7;
 opacity: 0.7;
}
*/
button {
 font-family: 'M PLUS Rounded 1c', "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
}
@keyframes html {
 0% {
  opacity: 0;
 }
 100% {
  opacity: 1;
 }
}
html {
 animation: html 0.5s 0.5s forwards;
 opacity: 0;
 width: 100%;
 font-family: 'Sawarabi Gothic', sans-serif;
 font-weight: 400;
 font-size: 10px;
 color: #333;
 overflow-y: auto;
}
body {
 position: relative;
 background-color: #fff;
 overflow: hidden;
}
header {
 position: absolute;
 right: 0;
 top: 0;
 width: 100%;
 padding: 3rem 0 5.5rem;
 z-index: 1;
}
header::before {
 content: "";
 position: absolute;
 display: block;
 width: 100%;
 height: 10rem;
 bottom: 0;
 left: 0;
 background-color: #fff;
 transform: skewY(-2deg);
 z-index: 0;
}
header > div {
 position: relative;
 display: flex;
 justify-content: space-between;
 width: 96rem;
 margin: auto;
 z-index: 1;
}
header > div h1 {
 z-index: 2;
}
header > div p {
 text-align: right;
 line-height: 2.5rem;
}
header > div p span {
 font-size: 1.8rem;
}
header > div p a {
 font-family: 'Raleway', sans-serif;
 font-size: 4rem;
 font-weight: 700;
 color: #5daadf;
}
header > div p a i {
 font-size: 3rem;
}
header nav {
 position: absolute;
 width: 100%;
 left: 0;
 bottom: -2.5rem;
 background-color: #5daadf;
 transform: skewY(-2deg);
 overflow: hidden;
}
header nav p.pc_nav {
 display: flex;
 justify-content: space-between;
 width: 96rem;
 margin: auto;
}
header nav p.pc_nav a {
 position: relative;
 display: inline-block;
 margin-right: 10rem;
 padding: 1.5rem 0;
 transform: skewY(2deg);
 font-size: 2rem;
 color: #fff;
}
#top header nav p.pc_nav a:nth-child(1),
#about_us header nav p.pc_nav a:nth-child(2),
#contact_us header nav p.pc_nav a:nth-child(3) {
 pointer-events: none;
}
#top header nav p.pc_nav a:nth-child(1)::after,
#about_us header nav p.pc_nav a:nth-child(2)::after,
#contact_us header nav p.pc_nav a:nth-child(3)::after {
 background-color: #1b323f;
}
header nav p.pc_nav a:nth-child(2) {
 margin-right: 40rem;
}
header nav p.pc_nav a::before {
 position: absolute;
 content: "";
 display: block;
 height: 8em;
 width: 8em;
 left: calc(50% - 4em);
 top: calc(50% - 4em);
 border: 3rem solid #1b323f;
 border-radius: 10rem;
 -webkit-border-radius: 10rem;
 -moz-border-radius: 10rem;
 -webkit-transition: all 0.35s ease;
 -moz-transition: all 0.35s ease;
 -ms-transition: all 0.35s ease;
 -o-transition: all 0.35s ease;
 transition: all 0.35s ease;
 z-index: 1;
 filter: alpha(opacity=0);
 -moz-opacity: 0;
 opacity: 0;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 -o-box-sizing: border-box;
 -ms-box-sizing: border-box;
 box-sizing: border-box;
}
header nav p.pc_nav a:hover::before {
 animation: navi_button 0.5s ease infinite;
}
@keyframes navi_button {
 100% {
  width: 0.2rem;
  height: 0.2rem;
  top: calc(50% - 0.1rem);
  left: calc(50% - 0.1rem);
  border-width: 0.1rem;
  filter: alpha(opacity=100);
  -moz-opacity: 1;
  opacity: 1;
 }
}
header nav p.pc_nav a::after {
 position: absolute;
 content: "";
 display: block;
 height: 8em;
 width: 8em;
 left: calc(50% - 4em);
 top: calc(50% - 4em);
 background-color: #1b323f33;
 border-radius: 100rem;
 -webkit-border-radius: 100rem;
 -moz-border-radius: 100rem;
 -webkit-transition: all 0.35s ease;
 -moz-transition: all 0.35s ease;
 -ms-transition: all 0.35s ease;
 -o-transition: all 0.35s ease;
 transition: all 0.35s ease;
 z-index: 0;
}
header nav p.pc_nav a:hover::after {
 animation: navi_button_background 0.5s ease forwards;
}
@keyframes navi_button_background {
 10% {
  background-color: #ffffffaa;
 }
 20% {
  background-color: initial;
 }
}
header nav p.pc_nav a span {
 position: relative;
 z-index: 2;
}
#main_body {
 width: 96rem;
 margin: auto;
 padding: 4rem 0 14rem;
 animation: body 1s 3s ease forwards;
}
@keyframes body {
 100% {
  margin-top: 0;
  opacity: 1;
 }
}
#main_body p.introduction {
 font-size: 2rem;
 line-height: 1.6em;
}
footer {
 padding: 0 0 2rem;
 background-color: #1b323f;
 background-image: url("/images/background_footer.jpg");
 background-position: center;
 background-repeat: no-repeat;
 background-size: cover;
}
footer nav {
 position: relative;
 padding: 5rem 0 0;
 top: -5rem;
 background-color: #5daadf;
 transform: skewY(-2deg);
 overflow: hidden;
}
footer nav::before {
 position: absolute;
 display: block;
 content: "";
 width: 100%;
 height: 10rem;
 top: -5rem;
 left: 0;
 background-color: #fff;
 transform: skewY(2deg);
}
footer nav p {
 display: flex;
 width: 96rem;
 margin: auto;
 transform: skewY(2deg);
}
footer nav a {
 position: relative;
 display: inline-block;
 padding: 1.5rem 0;
 font-size: 1.6rem;
 color: #fff;
}
footer nav a::after {
 position: absolute;
 display: block;
 content: "";
 width: 0;
 height: 0;
 top: 50%;
 left: 50%;
 background-color: #fff;
 border-radius: 10rem;
 -webkit-border-radius: 10rem;
 -moz-border-radius: 10rem;
 filter: alpha(opacity=60);
 -moz-opacity: 0.6;
 opacity: 0.6;
}
footer nav a:hover::after {
 animation: footer_navi_button 0.5s infinite;
}
@keyframes footer_navi_button {
 100% {
  width: 20rem;
  height: 20rem;
  top: calc(50% - 10rem);
  left: calc(50% - 10rem);
  filter: alpha(opacity=0);
  -moz-opacity: 0;
  opacity: 0;
 }
}
footer nav a span {
 padding: 0 1em;
 border-right: 1px solid #1b323f;
}
footer nav a:first-child span {
 padding-left: 0;
}
footer nav a:last-child span {
 border-right: none;
}
footer div.office {
 position: relative;
 display: flex;
 justify-content: space-around;
 width: 96rem;
 margin: auto;
}
footer div.office div {
 padding: 2rem 3rem;
 background-color: #5daadf33;
}
footer div.office div h2 {
 font-family: 'M PLUS 1p', sans-serif;
 font-size: 1.6rem;
 font-weight: 700;
 line-height: 1.6em;
 color: #5daadf;
}
footer div.office div p,
footer div.office div p a {
 font-size: 1.6rem;
 line-height: 1.6em;
 color: #fff;
}
footer div.office div p a:nth-child(3) {
 margin-left: 1em;
}
footer div.office div p i {
 margin: 0 0.5em;
}
footer div.office div p i:first-child {
 margin-left: 0;
}
footer .copyright {
 margin-top: 6rem;
 font-family: 'Raleway', sans-serif;
 font-size: 1.4rem;
 font-weight: 400;
 text-align: center;
 color: #fff;
}
/*@media (min-width:960px) and (max-width:1050px) {}*/
/* ~959 */
@media (max-width:959px) {
 .for_pc {
  display: none !important;
 }
 .for_sp {
  display: block;
 }
 html {
  font-size: calc(100vw / 75);
 }
 header::before {
  border-bottom: 0.2rem solid #5daadf;
 }
 header > div {
  position: static;
  width: auto;
  z-index: 0;
 }
 header > div h1 {
  width: 45rem;
  margin-left: 2rem;
 }
 header > div h1 img {
  width: 100%;
 }
 header nav {
  position: fixed;
  bottom: auto;
  top: 0;
  padding: 20rem 2rem 2rem;
  background-color: transparent;
  transform: skewY(0);
  overflow: auto;
  clip-path: circle(5rem at right 7rem top 7rem);
  -webkit-transition: all 0.35s ease;
  -moz-transition: all 0.35s ease;
  -ms-transition: all 0.35s ease;
  -o-transition: all 0.35s ease;
  transition: all 0.35s ease;
 }
 header nav.open {
  height: 100vh;
  clip-path: circle(150rem at right 7rem top 7rem);
  background-color: #000000cc;
 }
 header nav p.sp_nav {
  display: block;
  position: absolute;
  top: 2rem;
  right: 2rem;
 }
 header nav p.sp_nav a {
  display: block;
  width: 10rem;
  height: 10rem;
  background-color: #fff;
  border: 0.2rem solid #5daadf;
  border-radius: 10rem;
  -webkit-border-radius: 10rem;
  -moz-border-radius: 10rem;
  font-size: 5rem;
  color: #5daadf;
  text-align: center;
  line-height: 9.7rem;
 }
 header nav p.sp_nav a i:last-child {
  display: none;
 }
 header nav p.pc_nav {
  display: flex !important;
  flex-direction: column;
  position: relative;
  width: auto;
  z-index: 1;
 }
 header nav p.pc_nav a {
  margin: 0 0 4rem 0 !important;
  padding: 2rem;
  transform: skewY(0);
  background-color: #5daadf;
  border-radius: 0.4rem;
  -webkit-border-radius: 0.4rem;
  -moz-border-radius: 0.4rem;
  font-size: 4rem;
  overflow: hidden;
 }
 header nav p.pc_nav a::before {
  content: none;
 }
 header nav p.pc_nav a::after {
  height: 40rem;
  width: 40rem;
  top: -9rem;
  left: -8rem;
 }
 footer {
  padding-bottom: 20rem;
 }
 footer nav {
  height: 8rem;
 }
 footer nav p {
  display: none;
 }
 footer div.office {
  flex-direction: column;
  width: 100%;
 }
 footer div.office div {
  margin: 1rem 3rem;
 }
 footer div.office div h2 {
  font-size: 3.2rem;
 }
 footer div.office div p {
  font-size: 3.2rem;
 }
 footer div.office div p,
 footer div.office div p a {
  font-size: 3.2rem;
 }
 footer .copyright {
  font-size: 2.8rem;
 }
 footer + p.telephone {
  position: fixed;
  width: calc(100% - 2rem);
  left: 1rem;
  bottom: 0;
  padding: 3rem 0 4rem;
  background-color: #5daadfee;
  border-top-left-radius: 3rem;
  border-top-right-radius: 3rem;
  box-shadow: 0px 0px 4px 4px #00000066;
  -webkit-box-shadow: 0px 0px 4px 4px #00000066;
  -moz-box-shadow: 0px 0px 4px 4px #00000066;
  box-shadow: 0px 0px 4px 4px #00000066;
  text-align: center;
  border-top-left-radius: 3rem;
  -webkit-top-left-border-radius: 3rem;
  -moz-top-left-border-radius: 3rem;
  border-top-right-radius: 3rem;
  -webkit-top-right-border-radius: 3rem;
  -moz-top-right-border-radius: 3rem;
  line-height: 2.5rem;
  z-index: 1;
 }
 footer + p.telephone span {
  color: #fff;
  font-size: 3rem;
 }
 footer + p.telephone a {
  display: block;
  margin-top: 2rem;
  font-family: 'Raleway', sans-serif;
  font-size: 6rem;
  font-weight: 700;
  color: #fff;
 }
 footer + p.telephone a i {
  font-size: 3rem;
 }
}