@charset "utf-8";

@media screen and (min-width: 992px),
print {
.navv.change-color {
  background-color:rgba(255,255,255,0.7);
  transition: 0.3s;
}
    
    }

.sp-back{
    background-color:rgba(255,255,255,0.7);
}

@media screen and (min-width: 992px),
print {
    .sp-back{
    background-color:rgba(255,255,255,0.4);
}
}

/*
++++++++++++++++++

マイスヘッダー

+++++++++++++++++++
*/

#header {

  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height:80px;
  z-index: 999;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.4);
    padding-left:20px;
	padding-right:10px;
    display: flex;
    justify-content: space-between;
    align-items: center;

}


@media screen and (min-width: 992px),
print {

  #header {
    height:90px;
      padding:10px 10%;
      align-items: center;
  }
}

.header-logo{
    width:260px;
}

@media screen and (min-width: 992px),
print {
	.header-logo{
        padding-top:5px;
    width:350px;
        font-size:20px;
}
}

.header-logo a{
    color:#000;
}

.header-logo a:visited{
    color:#000;
}

.header-logo a:hover{
    color:#ccc;
}

/*
++++++++++++++++++++++++++

グローバルナビ

++++++++++++++++++++++++++
*/

.hearder-right{
    width:15%;
}

@media screen and (min-width: 992px),
print {
    .hearder-right{
    width:50%;
        display: flex;
        justify-content: flex-end;
}
}

@media screen and (min-width: 992px),
print {
   .hearder-nav-box{
    width:30%;
       display: flex;
       justify-content: flex-end;
       align-items: center;
	   padding-top:10px;

} 
}


.header-nav {
  display: none;
  width: 100%;
  height:100vh;
  z-index:10;
  overflow: auto;
    position: absolute;
  top: 0;
  left: 0;
  right: 0;
    padding:100px 30px 50px;
	background: rgba(0,0,0,0.8);
}

@media screen and (min-width: 992px),
print {
    .header-nav {
    padding:160px 30px 70px;

}
}

.header-nav.is-show {
  display: block;
}


.hearder-nav-box-menu{
    display: none;
}


@media screen and (min-width: 992px),
print {
    .hearder-nav-box-menu{
    display:block;
        font-size:16px;
		width:100px;
}
}

/*
++++++++++++++++++++++++++

g-nav

++++++++++++++++++++++++++
*/

.g-nav{
	padding:50px 10px 0;
}

@media screen and (min-width: 992px),
print {
	.g-nav{
	padding:70px 30px 0;
		max-width:900px;
		margin:auto;
}
}

.g-nav ul{
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-column-gap:60px;
}

@media screen and (min-width: 768px)
{
	.g-nav ul{
	grid-template-columns: 1fr 1fr 1fr 1fr;
	grid-column-gap:70px;
}
}

@media screen and (min-width: 992px),
print {
	.g-nav ul{
	grid-column-gap:90px;
}
}

.g-nav li{
	margin-bottom:30px;
}

@media screen and (min-width: 992px),
print {
	.g-nav li{
	margin-bottom:70px;
}
}

.g-nav-photo{
	margin-bottom: 7px;
}

.g-nav-photo img{
	border-radius:10px; 
}

.g-nav-name{
	font-size:13px;
	color:#fff;
}

.g-nav-name a{
	color:#fff;
}

.g-nav-name a:visited{
	color:#fff;
}

.g-nav-name a:hover{
	color:#ccc;
}

.g-nav-tel{
	color:#fff;
}

@media screen and (min-width:768px),
print {
.g-nav-tel{
	max-width:600px;
	margin:auto;
}
	}

.g-nav-tel-number{
	font-size:29px;
	margin-bottom:10px;
}

.g-nav-tel-number a{
	color:#fff;
}

.g-nav-tel-number a:visited{
	color:#fff;
}

@media screen and (min-width:768px),
print {
.g-nav-tel-number{
	font-size:45px;
}
	}

.g-nav-tel-t1{
	font-size:12px;
	line-height: 2.3;
}

@media screen and (min-width:768px),
print {
.g-nav-tel-t1{
	font-size:14px;
	line-height: 2.3;
}
	}


/*
+++++++++++++++++++++++

電話

++++++++++++++++++++++++
*/

.hearder-tel{
    display: none;
}

@media screen and (min-width: 992px),
print {
    .hearder-tel{
    display: flex;
		justify-content: flex-end;
		align-items: center;
        width:auto;
}
}

.hearder-tel-icon{
    width:30px;
    margin-right:10px;
}

.hearder-tel-right{
    padding-top:4px;
}

.hearder-tel-t1{
    font-size:12px;
}

.hearder-tel-number{
    font-size:23px;
}

.hearder-tel-number a{
	color:#000;
}

.hearder-tel-number a:visited{
	color:#000;
}

/*
+++++++++++++++++++++++++++++++

ロゴエリア

++++++++++++++++++++++++++++++++
*/



/*
++++++++++++++++++++++++++++++++++++++

@media screen and (min-width: 992px),
print {
    
}

@media screen and (min-width: 768px) and (max-width:991px)
{
}

border-radius:20px; 

+++++++++++++++++++++++++++++++++++++++++
*/