@charset "UTF-8";

/* CSS Document */
@font-face {
   font-family: Antonio;
   src: url('../fonts/static/Antonio-Medium.ttf') format("truetype");
   font-weight: normal;
   font-style: normal;
}

@font-face {
   font-family: Antonio;
   src: url('../fonts/static/Antonio-Bold.ttf') format("truetype");
   font-weight: bold;
   font-style: normal;
}

.clear{ clear:both;}

.disable-auto-tel a[href^="tel:"] {
  color: inherit;
  text-decoration: none;
  pointer-events: none;}
.max990{
max-width:990px;margin:0 auto;padding:0 30px;
}
.zone_footer{
	width:100%;
	position:relative;
	background:#fff;
	padding:50px 0 0 0;
	text-align:left;
}
.footer_left{
position:absolute;
left:0;
}
.footer_right{
position:absolute;
right:10px;
}
.footer_logo img{
	width:270px;
}
.footer_menu{
padding:60px 0 0 0;
}
.footer_menu a{
text-decoration: none;
color: #333;
}
.footer_menu a:hover{
color:#FF0000;
border-bottom:0px solid #FF0000;
}
ul.list05 {
display: flex;
justify-content: flex-start;
align-items: left;
list-style: none;
margin-left:-50px!important;
}
.list05 li {
  padding: 0 15px;
  border-right: #ddd 1px solid;
}
.list05 li:first-child {
}
.list05 li:last-child {
  border-right: none;
}
.footer_menu02{
padding:20px 0 40px 0;
line-height:2em;
}
.footer_menu02 a{
text-decoration:none;
color:#000;
}
.footer_menu02 a:hover{
color:#FF0000;
}
.footer_r_con{
text-align:right;
margin-top:-50px;
}
.footer_tel{
padding:70px 0 30px;
}
.footer_tel img{
	width:300px;
}
.footer_add{
line-height:1.6em;
}
.copy{
	clear:both;
	margin:30px 0 50px;
}
@media screen and (max-width:767px){
.footer_left{
display:none
}
.footer_right{
display:none
}
.footer_logo img{
	width:220px;
}
.copy_sp{
margin:50px 0 0px;
}
}

@media screen and  (min-width:767px) {
	.copy_sp{
		display:none;
	}
}
/* PAGE TOP ------------------------------*/
/*リンクの形状*/
#page-top a{
  display: flex;
  justify-content:center;
  align-items:center;
  transition:all 0.3s;
}
#page-top img{
	width:15px;
}
/*リンクを右下に固定*/
#page-top {
  position: fixed;
  right: 15px;
  bottom:260px;
  z-index: 2;
    /*はじめは非表示*/
  opacity: 0;
  transform: translateY(400px);
}

/*　上に上がる動き　*/

#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(400px);
  }
}
@media screen and (max-width:767px){
#page-top a{
  display: flex;
  justify-content:center;
  align-items:center;
  transition:all 0.3s;
}
#page-top img{
	width:15px;
}
/*リンクを右下に固定*/
#page-top {
  position: fixed;
  right: 15px;
  bottom:10px;
  z-index: 2;
    /*はじめは非表示*/
  opacity: 0;
  transform: translateY(400px);
}

/*　上に上がる動き　*/

#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(200px);
  }
}
}
/* full screen navi ◇ ------------------------------*/

#toggle { position: fixed; z-index: 1000;}
@media screen and (max-width:767px) { #toggle { top: 28px; right: 20px;}}
@media screen and (min-width:768px) {#toggle { top: 33px; right: 30px;}}
#toggle-box { position: relative; width: 30px; height: 30px; cursor: pointer;}
#toggle-box > span { height: 2px; left: 7px; display: inline-block; background: #000; position: absolute; transition: all .6s;}
#toggle-box > span:nth-child(1) { top: 11px; width: 90%;}
#toggle-box > span:nth-child(2) { top: 19px; width: 90%;}
.is-open #toggle-box > span {background: #fff;}
.is-open #toggle-box > span:nth-child(1) { top: 10px; left: 9px; transform: translateY(6px) rotate(-45deg); width: 90%;}
.is-open #toggle-box > span:nth-child(2) { top: 22px; left: 9px; transform: translateY(-6px) rotate(45deg); width: 90%;}
.is-open #nav-content {z-index: 999; transform: translateX(0);}

#nav-content h2 {}
#nav-content {
    z-index: 900;
    padding: 40px 0 0;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    right: 0;
    background-color: rgba(255,0,0,1); /* メニュー自体は赤 */
    
    /* スクロール設定 */
    overflow-y: auto;
    overscroll-behavior-y: none;
    -webkit-overflow-scrolling: touch;

    /* ▼▼▼ ここが修正のキモです ▼▼▼ */
    
    /* 通常時（閉じているとき）は画面右へ飛ばし、かつ「非表示」にする */
    transform: translateX(100%);
    visibility: hidden; 
    
    /* 閉じるときのアニメーション設定：
       transformは1秒かけて動くが、
       visibilityは「1秒待ってから（delay 1s）」hiddenになる */
    transition: transform 1s cubic-bezier(0.215, 0.61, 0.355, 1), visibility 0s linear 1s;
}
.is-open #nav-content {
    /* 画面内に入れる */
    transform: translateX(0);
    
    /* 開くときは「即座に」表示する（delay 0s） */
    visibility: visible;
    
    /* 開くときのアニメーション設定 */
    transition: transform 1s cubic-bezier(0.215, 0.61, 0.355, 1), visibility 0s linear 0s;
}
.in_logo img{
width:200px;
}

@media screen and (max-width:767px) {
.nav-content_in ul { margin: 10px 0 0 0; padding: 0; list-style: none; }
	#nav-content{ background-color: rgba(255,0,0,1); }
#gloval-nav li { font-size:1.3rem;margin:10px 0 0 0;} 
	.nav-content_in_foot-tel { font-size:1.2rem; margin:0;}
.nav-content_in_foot-tellogo img{width:220px;}
}
@media screen and (min-width:768px) and ( max-width:1024px) { 
.nav-content_in ul { margin: 10px 0 0 0; padding: 0; list-style: none; }
	#nav-content{ background-color: rgba(255,0,0,1); }
#gloval-nav li { font-size:1.5rem;margin:20px 0 0 0;} 
	.nav-content_in_foot-tel { font-size:1.4rem; margin:0;}
.nav-content_in_foot-tellogo img{width:250px;}
}
@media screen and (min-width:1024px) { 
.nav-content_in ul { margin: 10px 0 0 0; padding: 0; list-style: none; }
	#nav-content{ background-color: rgba(255,0,0,1); }
#gloval-nav li { font-size:1.8rem;margin:30px 0 0 0;} 
	.nav-content_in_foot-tel { font-size:1.7rem; margin:0;}
.nav-content_in_foot-tellogo img{width:270px;}
}

.nav-content_in li { margin-top: 0px; padding: 0; font-weight: bold;}
.nav-content_in li a{
	padding: 10px;
	text-decoration: none;
	color: #fff;}
.nav-content_in li a:hover{}
.nav-content_in,.nav-content_in_foot-icon,.nav-content_in_foot-tellogo {padding:10px 10px 10px 0; margin-left:5%;}

.nav-content_in_foot-icon li {float: left; list-style: none; margin: 10px;}
.nav-content_in_foot-icon a {
    border-radius: 50%;
    display: flex;
    width: 45px;
    height: 45px;
    background: #fff;
    margin: 10px 0;
    border: 2px solid #fff;
	box-sizing: border-box;
    -webkit-transition: all 0.6s ease;
    -moz-transition: all 0.6s ease;
    -o-transition: all 0.6s ease;
    transition: all  0.6s ease;}
.nav-content_in_foot-icon a:hover {
    background: #666;
    border: 2px solid #666;
	box-sizing: border-box;}

#nav-content_in_foot-icon_img { filter: invert(0%) sepia(0%) saturate(0%) hue-rotate(34deg) brightness(100%) contrast(100%);
	margin-left:-1px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all  0.3s ease;}
#nav-content_in_foot-icon_img:hover { filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(34deg) brightness(100%) contrast(100%);}
.copyright {font-size:1.1rem; font-weight:bold;}
.top_logo {
	margin-top:33px;
	padding-left:30px;
	text-align:left;
}



.box{
margin-top:-38px;
padding:0 70px 0 0;
}
.box a{
text-decoration: none;
color: #333;
}
.box a:hover{
color:#FF0000;
border-bottom:0px solid #FF0000;
}
ul.list02 {
display: flex;
justify-content: flex-end;
align-items: center;
list-style: none;
}
.list02 li {
  padding: 0 15px;
  border-right: #ddd 0px solid;
	font-weight:bold;
}
.list02 li:last-child {
  border-right: none;
}
.kakomi{
	color:#fff;
	background:#000;
	padding:6px 20px!important;
	text-align:center;
	border-radius:30px;
	margin:0 10px;
}
.kakomi a{
	color:#fff;
}
.kakomi:hover{
	color:#fff;
	background:#ff0000;
	padding:6px 20px!important;
	text-align:center;
	border-radius:30px;
	margin:0 10px;
}
.kakomi a:hover{
color:#fff;
}
@media screen and (max-width:767px) {
.top_logo {
	margin-top:20px;
	padding:0 0 15px 20px;
}
.box{
display:none;
}
	
	
	
	
	
	
	
	
}
/* PC表示で電話番号リンクを無効 ◇ ------------------------------*/
@media screen and (min-width: 768px){
a[href^="tel:"] {
pointer-events: none;
cursor: default;
}
}

/* text ◇ ------------------------------*/
p {text-justify: inter-ideograph;}

h1,
h2,
h3,
h4,
h5,
h6 {
	clear: both;
	font-weight: bold;
	margin: 0;
	text-rendering: optimizeLegibility;}

small {font-size: 75%;}

/* other ◇ ------------------------------*/
@media screen and  (min-width:992px) {
.max1600{max-width:1600px;margin:0 auto;padding:0 50px 30px;}
.max1400{max-width:1400px;margin:0 auto;padding:0 30px 30px;}
.max1200{max-width:1200px;margin:0 auto;padding:0 30px 30px;}
.max1100{max-width:1100px;margin:0 auto;padding:0 50px 30px;}
.max1000{max-width:1000px;margin:0 auto;padding:0 50px 30px;}
.max960{max-width:960px;margin:0 auto;padding:0 30px 30px;}
.max800{max-width:800px;margin:0 auto;padding:0 50px 30px;}
.max700{max-width:700px;margin:0 auto;padding:0 50px 30px;}
.max600{max-width:600px;margin:0 auto;padding:0 50px 30px;}
.max500{max-width:500px;margin:0 auto;padding:0 50px 30px;}
.max400{max-width:400px;margin:0 auto;padding:0 50px 30px;}
.max600ex{max-width:600px;margin:0 auto;padding:0 50px 30px;}
}
@media screen and (min-width:577px) and ( max-width:992px) {
.max1600{max-width:1600px;margin:0 auto;padding:0 30px 30px;}
.max1400{max-width:1400px;margin:0 auto;padding:0 30px 30px;}
.max1200{max-width:1200px;margin:0 auto;padding:0 30px 30px;}
.max1100{max-width:1100px;margin:0 auto;padding:0 30px 0px;}
.max1000{max-width:1000px;margin:0 auto;padding:0 30px 30px;}
.max960{max-width:960px;margin:0 auto;padding:0 30px 30px;}
.max800{max-width:800px;margin:0 auto;padding:0 30px 30px;}
.max700{max-width:700px;margin:0 auto;padding:0 30px 30px;}
.max600{max-width:600px;margin:0 auto;padding:0 30px 30px;}
.max500{max-width:500px;margin:0 auto;padding:0 30px 30px;}
.max400{max-width:400px;margin:0 auto;padding:0 30px 30px;}
.max600ex{max-width:600px;margin:0 auto;padding:0 30px 30px;}
}
@media only screen and (max-width: 576px) {
.max1600{max-width:1600px;margin:0 auto;padding:0 15px 30px;}
.max1400{max-width:1400px;margin:0 auto;padding:0 15px 30px;}
.max1200{max-width:1200px;margin:0 auto;padding:0 15px 30px;}
.max1100{max-width:1100px;margin:0 auto;padding:0 15px 0px;}
.max1000{max-width:1000px;margin:0 auto;padding:0 15px 30px;}
.max960{max-width:900px;margin:0 auto;padding:0 15px 15px;}
.max800{max-width:800px;margin:0 auto;padding:0 15px 30px;}
.max700{max-width:700px;margin:0 auto;padding:0 15px 30px;}
.max600{max-width:600px;margin:0 auto;padding:0 15px 30px;}
.max500{max-width:576px;margin:0 auto;padding:0 0px 30px;}
.max400{max-width:576px;margin:0 auto;padding:0 0px 30px;}
.max600ex{max-width:280px;margin:0 auto;padding:0 15px 30px;}
.br-sp { display:none; }
}

img {
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
	transition: .5s;
    -ms-interpolation-mode: bicubic}

a:hover img{
  filter: opacity(70%);
}

/* ◆ margin ◇ ------------------------------*/
.ma0    { margin: 0px}
.ma5    { margin: 5px}

.mt5    { margin-top: 5px}
.mt10   { margin-top: 10px}
.mt15   { margin-top: 15px}
.mt20   { margin-top: 20px}
.mt30   { margin-top: 30px}
.mt40   { margin-top: 40px}
.mt50   { margin-top: 50px}
.mt60   { margin-top: 60px}
.mt70   { margin-top: 70px}
.mt80   { margin-top: 80px}
.mt90   { margin-top: 90px}
.mt100  { margin-top: 100px}
.mt120  { margin-top: 120px}
.mt150  { margin-top: 150px}

.mb5    { margin-bottom: 5px}
.mb10   { margin-bottom: 10px}
.mb15   { margin-bottom: 15px}
.mb20   { margin-bottom: 20px}
.mb30   { margin-bottom: 30px}
.mb40   { margin-bottom: 40px}
.mb50   { margin-bottom: 50px}
.mb60   { margin-bottom: 60px}
.mb70   { margin-bottom: 70px}
.mb80   { margin-bottom: 80px}
.mb90   { margin-bottom: 90px}
.mb100  { margin-bottom: 100px}

.mr5    {margin-right: 5px}
.mr-10    {margin-right: -10px}
.mr10   {margin-right: 10px}
.mr15   {margin-right: 15px}
.mr20   {margin-right: 20px}

.ml5    {margin-left: 5px}
.ml10   {margin-left: 10px}
.ml15   {margin-left: 15px}
.ml20   {margin-left: 20px}

@media only screen and (max-width: 576px) {
.mt10sp  { margin-top: 10px}
.mt15sp   { margin-top: 15px}
.mt20sp   { margin-top: 20px}
.mt30sp   { margin-top: 30px}
.mt40sp   { margin-top: 40px}
.mt50sp   { margin-top: 50px}
.mt60sp   { margin-top: 60px}
.mt70sp   { margin-top: 70px}
.mt80sp   { margin-top: 80px}
}

/* ガター幅（余白）を調整 ◇ ------------------------------*/
.row-0      { margin-left:0px; margin-right:0px;}
.row-0>div  { padding-right:0px; padding-left:0px;}

.row-10     { margin-left:-5px; margin-right:-5px;}	
.row-10>div { padding-right:5px; padding-left:5px;}

.row-20     { margin-left:-10px; margin-right:-10px;}
.row-20>div { padding-right:10px; padding-left:10px;}

.row-30     { margin-left:-15px; margin-right:-15px;}
.row-30>div { padding-right:15px; padding-left:15px;}

.row-40     { margin-left:-20px; margin-right:-20px;}
.row-40>div { padding-right:20px; padding-left:20px;}

.row-50     { margin-left:-25px; margin-right:-25px;}
.row-50>div { padding-right:25px; padding-left:25px;}

.row-60     { margin-left:-30px; margin-right:-30px;}
.row-60>div { padding-right:30px; padding-left:30px;}

.row-70     { margin-left:-35px; margin-right:-35px;}
.row-70>div { padding-right:35px; padding-left:35px;}

.row-100     { margin-left:-50px; margin-right:-50px;}
.row-100>div { padding-right:50px; padding-left:50px;}

.o-3column{ margin:0 -60px;}
.o-3column>div{ padding: 0 60px;}