/* 
** The Header Media Queries **
** Tweak as per your needs **
*/

/*/////////////////////////////////////////////////////////////////////////
						Body
//////////////////////////////////////////////////////////////////////////*/
body {
font-size:100%;
-webkit-text-size-adjust: 100%;
font-family: "メイリオ","ＭＳ Ｐゴシック",Osaka,"ヒラギノ角ゴ Pro W3";
line-height: 1.5;
margin:0 auto;
width:100%;
border-top:4px solid #20B97B;
background:url(../img/common/hback.jpg) top left repeat-x;
font-size: 12px;
}


@media screen and (max-width:768px) {
body {
min-width:640px;
max-width:768px;
font-family: "メイリオ","ＭＳ Ｐゴシック",Osaka,"ヒラギノ角ゴ Pro W3";
font-size: 24px;
}
}



/*/////////////////////////////////////////////////////////////////////////
						H1
//////////////////////////////////////////////////////////////////////////*/
div#hl{
width: 380px;
height: 80px;
float: left;
margin-top: 3px;
}

div#hl h1{
font-size:11px;
color:#56CDA3;
height:24px;
float:left;
font-weight:100;
text-indent:4px;
margin-top: 3px;
}

@media screen and (max-width:768px) {
h1 {
font-size:15px;
height:24px;
text-align:left;
text-indent:1em;
}
}


div#hl h1 .logo{
margin-top: 0;
}


/*/////////////////////////////////////////////////////////////////////////
						H2
//////////////////////////////////////////////////////////////////////////*/

h2{
width:900px;
margin:20px auto;
padding:0;
margin-top:30px;
}
@media screen and (max-width: 768px) {
h2{
width:640px;
margin-top:10px;
}
}


/*/////////////////////////////////////////////////////////////////////////
						table.tb01
//////////////////////////////////////////////////////////////////////////*/

table.tb01{
  width:740px;
  border: solid 1px #AEB1B5; 
  border-collapse: collapse;
  border-spacing:5px;
}

table.tb01 td{
  padding:5px;
  border: solid 1px #AEB1B5;
  border-collapse: collapse; 
}

table.tb01{
width:740px;
border:1px solid #CCCCCC;
}


@media screen and (max-width:768px) {
table.tb01{
width:620px;
border:1px solid #CCCCCC;
}
}

table.tb01 tr td{
border:1px solid #CCCCCC;
}


@media screen and (max-width:768px) {
table.tb01 tr td{
border:1px solid #CCCCCC;
}
}


/*/////////////////////////////////////////////////////////////////////////
						div.sp2amg2
//////////////////////////////////////////////////////////////////////////*/

div.sp2amg2{
width:780px;
margin:10px auto;
padding:0;
font-size:15px;
line-height:3;
background-color:#FFFFFF;
color:#000000;
margin-bottom:20px;
}

@media screen and (max-width:768px) {
div.sp2amg2{
width:580px;
margin:0 auto;
line-height:3;
font-size: 24px;
}
}
/*/////////////////////////////////////////////////////////////////////////
						table.aboutabl
//////////////////////////////////////////////////////////////////////////*/
table.aboutabl td{
  padding:5px;
  vertical-align: middle;
}

.brand {
font-size:11px;
color:#56CDA3;
height:15px;
float:left;
font-weight:100;
text-indent:5px;
   }

.site-header {
  position: relative;
  z-index: 9999;
  background-color: #fff; }
/*/////////////////////////////////////////////////////////////////////////
					.site-header__start
//////////////////////////////////////////////////////////////////////////*/

.site-header__start {
  height:80px;
  margin:0 auto;
  padding:0;
  background-color:#FFFFFF;
  width:100% !important;
  max-width:940px;
}

@media screen and (max-width:768px) {
.site-header__start {
width:640px;
height:80px;
margin:5px auto;
padding:0;
} }  
  
  
 
.site-header__end {
  display: flex;
  align-items: center; }


/*/////////////////////////////////////////////////////////////////////////
					.site-header__wrapper
//////////////////////////////////////////////////////////////////////////*/

.site-header__wrapper {

width:100%;
height:80px;
margin: 0 auto;
padding:0;
margin-top:15px;
max-width:940px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 1rem;
  padding-bottom: 1rem; }
  
  @media (min-width: 769px) {
    .site-header__wrapper {
     padding-top: 0;
     padding-bottom: 0; 
     } 
     }
 
 
        
  @media (max-width: 768px) { 
  div.tel2{
  display:none;
  }
  } 
  
  @media (min-width: 769px) { 
  div.tel2{
  display:block;
 } 
 }
 
  @media (min-width: 769px) { 
  ul.fbs{
  display:none;
}  

}

@media (max-width: 768px) { 
  ul.fbs{
  width:100%;
  height:200px;
  position:fixed;
  bottom:1px;
  left:1px;
  display:block;
  z-index:999;
  margin:0;
  padding:0;
}

li.telsf{
width:50%;
font-size:24px;
background:#CCFFCC;
float:left;
text-align:center;
}  

li.mailsf{
width:50%;
font-size:24px;
background:#66FFFF;
float:right;
text-align:center;
}   
}



	@media (min-width: 769px) {
  .nav__wrapper {
    display: none; 
	}

  }

@media (max-width: 768px) {
  .nav__wrapper {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    z-index: -1;
	display:block;
    background-color: #fff;
   
    visibility: hidden;
	opacity:0.95;
    transform: translateY(30px);
    transition: transform 0.3s ease-out, opacity 0.3s ease-out; }
    .nav__wrapper.active {
      visibility: visible;
      transform: translateY(0); } }

.nav__item a {
  display: block;
  padding: 1.5rem 1rem;
  font-size:24px;
  font-weight:bold;
  color:#21B77A;
   font-family: "メイリオ","ＭＳ Ｐゴシック",Osaka,"ヒラギノ角ゴ Pro W3";
  border-bottom:#66CC99 1px solid;
  z-index: 999; }

.nav__toggle {
  display: none; }
  @media (max-width: 768px) {
    .nav__toggle {
      display: block;
      position: absolute;
      right: 0.5rem;
      top:1px;
	  background:none;
	  text-decoration:none;
	  border:none; } }
	  
@media (min-width: 769px){
.search {
  float:right;
  width: 235px;
  height:50px;
  margin:0 auto;
  padding:0;
  margin-top:0;
   display: block;
}
}
@media (max-width: 768px){
.search{
  float:right;
  width: 180px;
  height:75px;
  margin:0 auto;
  padding:0;
  margin-top:0;
  display:block;
  padding-right:100px;
}

.search a{
  float:right;
  width: 80px;
  height:75px;
  margin:0 auto;
  padding:0;
   display: block;
   padding-bottom:5px;
}

.search__toggle {
  appearance: none;
  order: 1;
  font-size: 0;
  width: 34px;
  height: 34px;
  background: url("../img/header-3/search.svg") center right/22px no-repeat;
  border: 0; }
  @media (min-width: 769px) {
    .search__toggle {
      border-left: 1px solid #979797;
      padding-left: 10px; } }
  @media (max-width: 768px) {
    .search__toggle {
      position: absolute;
      right: 5.5rem;
      top: 0.65rem;
      background: url("../img/header-3/tel4s.png") center/22px no-repeat; } }
.search__form {
  display: none; }
  .search__form.active {
    display: block; }
  @media (max-width: 768px) {
    .search__form {
      position: absolute;
      left: 0;
      right: 0;
      top: 100%;
      background-color: red; }
      .search__form input {
        width: 100%; } }
  .search__form input {
    min-width: 200px;
    appearance: none;
    border: 0;
    background-color: #fff;
    border-radius: 0;
    font-size: 16px;
    padding: 0.5rem; }
    @media (max-width: 768px) {
      .search__form input {
        border-bottom: 1px solid #979797; } }