@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+Antique:wght@300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Belgrano&display=swap');

/************************************
** 全体共通
************************************/

body {
	text-align:center;
	font-family: 'Zen Kaku Gothic Antique', sans-serif;
	font-weight:400;}

section {
	padding:60px 0;}

a {
	text-decoration:underline;}

h2 {
	font-size:2em;
	margin-bottom:60px;}

h2::before {
	display:block;
	font-size:0.5em;
	font-family: 'Belgrano', serif;
	color:#999;
	margin-bottom:15px;}

.inner {
	max-width:950px;
	margin:0 auto;}

p {
	text-align:left;
	line-height:2em;
	max-width:950px;
	margin:0 auto;}

p.lead {
	text-align:center;
	font-size:1.1em;}

.br::before {
  content: "\A";
  white-space: pre;}

.button {
	margin:30px auto 0 auto;}

.clear {
	clear:both;}

.reverse {
	flex-direction: row-reverse;}

.attention {
	color:#00a0da;
	font-weight:600;}


/* 599px以下の場合 */
@media screen and (max-width: 599px) {

.inner {
	width:100%;}

h2 {
	line-height:1.3em;}

h2::before {
	margin-bottom:5px;}

.br2::before {
  content: "\A";
  white-space: pre;}

.br::before {
  content: "\A";
  white-space: nowrap;}

.invisible {
	display:none;}

}


/************************************
** ヘッダー
************************************/

header {
	width:100%;}

header .inner {
	display:flex;
	align-items:center;
	justify-content:space-between;}

header a:before {
	color:#bcbcbb;
	font-size:0.7em;
	display:block;
	margin-bottom:5px;}

header .menu0:before {
	content:"NEW SERVICE";}

header .menu1:before {
	content:"SERVICE 01";}

header .menu2:before {
	content:"SERVICE 02";}

header .menu3:before {
	content:"SERVICE 03";}

#logo_h {
	max-width:50%;
	display:block;
	margin:0 auto;}

header nav{
	width: 100%;
	height: 90px;
	position: relative;}

.drawer{
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	position: relative;
	height: 90px;}

header li a {
	text-decoration:none;
	font-weight:500;}

@media screen and (min-width: 600px) {
#logo_h {
	margin:0;}

header::after{
	display:none;}

header nav{
	display: flex;}

.Toggle{
	display: none;}

.menus{
	width: 100%;
	background-color: transparent;
	margin-top:0;
	-webkit-transform: translateX(0);
	transform: translateX(0);}

.menus ul{
 	display: flex;
	width: 100%;
	height:90px;
	z-index:9999999;
	justify-content: space-between;
	align-items: flex-end;
	padding-left:90px;
	position:relative;
	bottom:27px;}

.menus ul li {
	display:flex;
	justify-content:flex-end;}

.menus ul li a:hover{
	background-color:transparent;}

ul.sp_only {
	display:none;}

.sp_t {
	display:none;}
}


/* 599px以下の場合 */
@media screen and (max-width: 599px) {

header a:before {
	display:inline;
	margin-right:10px;}

/*ナビゲーション部分*/
.menus {
	height:100vh;}

.menus ul{
 	display: flex;
	flex-wrap:nowrap;
	flex-direction: column;
	width:70%;}

.menus ul li a {
	display:block;
	padding:1em;
	font-size:0.9em;
	line-height:1.5em;}

.menus ul li a:hover{
	background-color:rgba(0,0,0,0.5);}

.menus{
  text-align:left;
  background-color:rgba(255,255,255,0.95);
  transition: .5s ease;/*滑らかに表示*/
  -webkit-transform: translateX(-105%);
  transform: translateX(-105%);/*左に隠しておく*/
  width:100%;}

/*OPEN時の動き*/
.menus.open {
 -webkit-transform: translateX(0%);
 transform: translateX(0%);/*中身を表示（右へスライド）*/}

/*トグルボタンのスタイルを指定*/
.Toggle {
    display: block;
    position: fixed;    /* bodyに対しての絶対位置指定 */
    width: 35px;
    height: 42px;
    cursor: pointer;
    z-index: 3;
	right:15px;}

.Toggle span {
    display: block;
    position: absolute;
    width: 35px;
    border-bottom: solid 2px #666;
    -webkit-transition: .35s ease-in-out; /*変化の速度を指定*/
    -moz-transition: .35s ease-in-out;    /*変化の速度を指定*/
    transition: .35s ease-in-out;     /*変化の速度を指定*/}

.Toggle span:nth-child(1) {
    top:5px;}
 
.Toggle span:nth-child(2) {
    top: 18px;}
 
.Toggle span:nth-child(3) {
    top: 32px;}

.Toggle.active span:nth-child(1) {
    top: 18px;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    transform: rotate(-45deg);}
 
/* 2番目と3番目のspanを45度に */
.Toggle.active span:nth-child(2),
.Toggle.active span:nth-child(3) {
    top: 18px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);}

.menus{
	position: fixed;
	z-index:99999;}

.menu_block {
	display:flex;
	margin-bottom:45px;}

ul.sp_only {
	display:flex;}

.sp_t {
	display:flex;
	align-items:center;
	line-height:1.5em;
	font-size:0.9em;
	font-weight:700;
	width:30%;
	border-right:1px solid #999;
	margin-left:30px;}

}



/************************************
** ナビゲーションマウスオーバー
************************************/
header nav li a{
  position: relative;}

header nav li a:hover{
  color:#00a0da;}

header nav li a::after {
    content: '';
    /*絶対配置で線の位置を決める*/
    position: absolute;
    bottom: -15px;
    left: 10%;
    /*線の形状*/
    width: 80%;
    height: 2px;
    background:#00a0da;
    /*アニメーションの指定*/
    transition: all .3s;
    transform: scale(0, 1);/*X方向0、Y方向1*/
    transform-origin: center top;/*上部中央基点*/}

/*現在地とhoverの設定*/
header nav li a:hover::after {
    transform: scale(1, 1);/*X方向にスケール拡大*/}

/************************************
** お問い合わせ
************************************/

#contact {
	border-top:3px solid #00a0da;}

#contact .lead {
	margin-top:60px;
	font-size:1.2em;}

#contact .button,
#career_info .button {
	background:#00a0da url(../image/circle_a3.png) no-repeat 98% center;
	height:75px;
	width:35%;
	margin:15px auto 0 auto;
	border-radius:10px;
	font-weight:600;
	color:#fff;
	display:flex;
	align-items:center;
	justify-content:center;
	font-size:1.3em;
	position:relative;}

#contact a,
#career_info a {
	text-decoration:none;
	display:block;}

#contact .button_text,
#career_info .button_text{
	position:relative;
	display:inline-block;}

#contact .phone {
	width:35%;
	border-bottom:1px solid #00a0da;}

#contact .tel {
	color:#00a0da;
	font-weight:600;
	font-size:2.5em;
	text-align:center;
	width:35%;
	border-bottom:1px solid #00a0da;
	margin-bottom:10px;}

#contact .tel:before {
	content:url(../image/tel.png);
	vertical-align: middle;
	position:relative;
	bottom:3px;
	right:15px;}

#contact small {
	font-size:1.1em;}


/* 599px以下の場合 */
@media screen and (max-width: 599px) {

#contact .lead {
	margin-top:0px;
	font-size:1em;}

#contact .button,
#career_info .button {
	width:calc(100% - 60px);
	height:60px;
	font-size:1.4em;
	background:#00a0da url(../image/circle_a4.png) no-repeat 96% center;}

#contact .button_text,
#career_info .button_text{
	left:8px;
	bottom:3px;}

#contact .phone {
	width:calc(100% - 60px);
	margin-top:30px;}

#contact .tel {
	width:calc(100% - 60px);
	font-size:2em;}

#contact .tel:before {
	transform: scale(0.8);
	display:inline-block;
	float:left;
	bottom:-3px;
	right:-10px;}
}

/************************************
** フッター
************************************/

footer {
	padding:0 0 30px 0;
	width:100%;
	margin:60px auto 0  auto;
	background:#f7f5f2;
	position:relative;}

footer .logo_back {
	background:#f7f5f2;
	border-radius:50%;
	width:220px;
	height:220px;
	position:absolute;
	top:-25px;
	left:0;
	right:0;
	margin:auto;
	display:flex;
	align-items:center;
	justify-content:center;
	z-index:0;}

footer .logo_back img {
	width:140px;
	height:auto;
	position:relative;
	bottom:20px;
	z-index:1;}

footer .inner {
	display:flex;
	justify-content:space-between;
	align-items: stretch;
	padding-top:180px;
	z-index:10;
	position:relative;
	text-align:left;}

footer b {
	display:block;
	border-bottom:1px solid #00a0da;
	font-weight:500;
	padding-bottom:5px;}

footer ul {
	margin:15px auto;}

footer li {
	line-height:1.89em;
	font-size:0.9em;}

footer a {
	text-decoration:none;}


footer .box3 .instagram {
	margin:15px 0 45px 0;
	display:flex;
	align-items:center;}

footer .box3 .instagram img {
	margin-right:10px;}

footer .box3 .instagram a {
	font-weight:400;
	font-size:0.9em;
	line-height:1.1em;}

footer .box3 a {
	font-weight:600;
	color:#00a0da;}

footer .box3 .contact:after {
	content:url(../image/arrow.png);
	padding-left:5px;}

footer small {
	display:block;
	font-family: 'Belgrano', serif;
	margin:30px auto 0 auto;}

/* 599px以下の場合 */
@media screen and (max-width: 599px) {

footer .inner {
	display:block;
	width:100%;}

footer .box1 {
	width:85%;
	margin:0 auto 30px auto;}

footer .box2 {
	width:85%;
	margin:0 auto;}

footer .box3 {
	width:85%;
	margin:0 auto;
	display:flex;
	flex-direction:column;
	justify-content:center;}
}


/************************************
** その他
************************************/

/*リンクの形状*/
#page-top a{
  width: 60px;
  height: 60px;
  border-radius:50%;
  background:#dddddb;
  transition:all 0.6s;
  display:flex;
  align-items:center;
  justify-content:center;}

#page-top a:hover{
  background: #c9c9c9;}

/*リンクを右下に固定*/
#page-top {
  position: fixed;
  right: 10px;
  bottom:10px;
  z-index: 2;
    /*はじめは非表示*/
  opacity: 0;
  transform: translateY(100px);
}

/*　上に上がる動き　*/

#page-top.UpMove{
  animation: UpAnime 0.5s forwards;
}
@keyframes UpAnime{
  from {
    opacity: 0;
  transform: translateY(100px);
  }
  to {
    opacity: 1;
  transform: translateY(0);
  }
}

/*　下に下がる動き　*/

#page-top.DownMove{
  animation: DownAnime 0.5s forwards;
}
@keyframes DownAnime{
  from {
    opacity: 1;
  transform: translateY(0);
  }
  to {
    opacity: 1;
  transform: translateY(100px);}
}