@import  url(https://fonts.googleapis.com/css?family=Montserrat);
@charset "utf-8";
* {
   box-sizing: border-box;
}
body {
   margin: 0;
   padding: 0;
   font-family:"HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";
   background-color: #e6e6e6;
   letter-spacing : 0.2em;
   box-sizing: border-box;
}
html {
    /* ベースのフォントサイズを10pxとする */
    font-size: 62.5%;
}

header{
	background-color: #FFFFFF;
}

/* 600px以上はハンバーガーボタン非表示、ヘッダー固定 */
@media screen and (min-width: 600px) {
  #logo img{max-width:250px;}	
	
nav{
 display: flex;
}
 
.Toggle{
 display: none;
}
.menu{
width: 100%;
font-size:0.9em;
background-color: transparent;
margin:0 10px;
-webkit-transform: translateX(0);
transform: translateX(0);
}
.menu ul{
 height: 70px;
 display: flex;
 flex-wrap: wrap;
 justify-content: flex-end;
 align-items: center;
}
.menu ul li {
	   font-family:"HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";
	 font-size: 1.6rem;
list-style:none;
}
.menu ul li a{
 padding: 0 1em;
 border-bottom: none;
}
.menu ul li a:hover{
background-color:transparent;
}

.mo {
    display: none;
  }

}
/**************** ここまで、メニューのスタイリング ****************/
.main-visual {
   display: flex;
   justify-content: center;
   align-items: center;
   height: 100vh;
   background: url('img/main.jpg') top center / cover no-repeat;
}
h2 {
   margin: 0;
   font-size: 30px;
   font-weight: normal;
   color: #fff;
}

#info1 h3 {
  font-size: 1.6rem;
font-family:"HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";
color:#114371;
margin:10px 0px 5px 10px;
margin-bottom:20px;
line-height:2.0;
text-align:center;
}
#info1 p {
 font-size:13px;
font-family:"HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";
color:#000000;
margin:10px 0px 5px 10px;
margin-bottom:20px;
line-height:2.0;
}


#photo-bk{
 width:100%;
 height:700px;
 background-color:#000;
}
#photo{
 width:1000px;
 height:650px;
 background-color:#000;
 margin:auto;
}
#photo h3 {
 font-size: clamp(30px,3vw,32px);
font-family:"HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";
color:#FFFFFF;
margin:10px 0px 5px 10px;
text-align:center;
margin-bottom:20px;
line-height:2.0;
}

#footer01 ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
 
#footer01 {
  position: relative;
  background: #222;
}

#footer01 p {
		   font-family:"HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";
	 font-size: 1.4rem;
	 color:#FFFFFF;
	 text-align:center;
}
 
#footer01 .logo {
  text-align: center;
  padding: 20px 0;
  border-bottom: 1px solid #111;
}
 
#footer01 .logo a {
  display: inline-block;
}
 
#footer01 .logo img {
  width: 120px;
}
 
#footer01 .nav1 a {
  display: block;
  padding: 0 10px;
  color: #ccc;
}
 

  #footer01 .nav1 {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 20px 0;
  }
  #footer01 .nav1 a:hover {
    color: #ca353b;
  }


@media screen and (max-width:600px){

@charset "UTF-8";
 
 html {
    /* ベースのフォントサイズを10pxとする */
    font-size: 62.5%;
}
 
img{width:100%;}
 
/*ロゴの大きさを調整*/
#logo img {
  max-width:45%;
}


nav{
 width: 100%;
 height: 70px;
 position: relative;
 background: #F6F6F6;
  
}
.drawer{
 display: flex;
 flex-direction: row;
 align-items: center;
 justify-content: space-between;
 position: relative;
 height: 70px;
 padding: 0 1em;
}

/*ナビゲーション部分*/

.menu ul li {
	font-size: 1.6rem;/* calcサポート外をフォールバック */
    font-size: calc(1.4rem + ((1vw - 0.48rem) * 0.5556));/* viewportが480px以上1200px以下可変 */
list-style:none;
}

.menu ul li a {
display:block;
  font-weight:bold;
padding: 2em;
border-bottom: 1px dotted #CCC;
  color:#333;
  text-decoration:none;
}


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


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


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

}



/*トグルボタンのスタイルを指定*/
.Toggle {
    display: block;
    position: fixed;    /* bodyに対しての絶対位置指定 */
    width: 42px;
    height: 42px;
    cursor: pointer;
    z-index: 3;
  right:15px;
}
 
.Toggle span {
    display: block;
    position: absolute;
    width: 50px;
    border-bottom: solid 4px #333;
    -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);
}
   .main-visual {
      padding: 0 4%;
   }
   h2 {
      line-height: 1.6;
      text-align: center;
   }

.pc {
    display: none;
  }

#photo{
 max-width:100%;
 height:auto;
 background-color:#000;
 margin:auto;
}
#photo h3 {
 font-size: clamp(20px,3vw,22px);
font-family:"HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";
color:#FFFFFF;
margin:10px 0px 5px 10px;
text-align:center;
margin-bottom:20px;
line-height:2.0;
}

 
 

 
#footer01 {
  position: relative;
  background: #222;
  text-align: center;
}
 
 #footer01 ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
 
#footer01 .logo {
  text-align: center;
  padding: 20px 0;
  border-bottom: 1px solid #111;
}
 
#footer01 .logo a {
  display: inline-block;
}
 
#footer01 .logo img {
  width: 120px;
}
 
 
  #footer01 .nav1 li {
    border-top: 1px solid #555555;
  }
 
 
  #footer01 .nav1 li:last-child {
    border-bottom: 1px solid #555555;
  }
 
    #footer01 .nav1 li a {
        padding: 12px 20px;
    text-align: left;
  } 
 

}