html {  
  background: #0f6983;
  color: #444;
  padding: constant(safe-area-inset-right); 
  padding: constant(safe-area-inset-bottom); 
  padding: constant(safe-area-inset-left); 
  padding: constant(safe-area-inset-top);
}

input[type="text"],
select {
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;
    height: 35px;
    line-height: 35px;
    vertical-align: middle;
    border:1px solid #CCC;
}

input[type="checkbox"] {
  transform: scale(1.4);
}

img {
  max-width: 100%;
}
@-moz-document url-prefix() { /* for firefox */
    input,
		select {
        background:none;
        background-color: #FFF;
    }

}

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

  body::before {
    content: "";
    background: #0f6983 url('../images/top_img.png') no-repeat center 40%;
    background-size: cover;
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
  }
}

/*-------------------------------------
　　文字装飾
-------------------------------------*/

/* --BODY-- */
body,
input,
textarea,
select {
  font-size: 16px;
  line-height: 1.6em;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0.02em;
  /*font: 16px "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic", "ヒラギノ角ゴ", "メイリオ", "Meiryo", "Lucida Grande", "Lucida Sans Unicode", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", Helvetica, Arial, Verdana, sans-serif;*/
-webkit-text-size-adjust: none;
}

/*-------------------------------------
　　リンク装飾
-------------------------------------*/

a:link    	{color:#336699;text-decoration:none;}
a:visited 	{color:#336699;text-decoration:underline;}
a:active  	{color:#FF3333;text-decoration:none;}
a:hover  	{color:#666666;text-decoration:none;}

a:hover img{
  filter: alpha(opacity=80);
  opacity:0.8;
}

/*-------------------------------------
　　レスポンシブ用
-------------------------------------*/

.pc {
	display: block;
}	
.sp,
.sp550 {
	display: none;
}

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

.pc {
	display: none;
}	
.sp {
	display: block;
}

}

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

  .sp550 {
    display: block;
  }

}

/*-------------------------------------
　　flex
-------------------------------------*/

.flex {	
  width: 100%;
  max-width: 100%;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-box;
  display: -webkit-flexbox;
  display: -moz-flexbox;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  justify-content: space-between;
}

/*-------------------------------------
　　アイテム
-------------------------------------*/

.al_center {
  text-align: center;
}

.al_left {
  text-align: left;
}

.al_right {
  text-align: right;
}

.uline { text-decoration: underline;}

.txt_small {
  font-size: 88%;
}

.bold { font-weight: bold;} 

.txt {
  text-align: center;
}

span.br {
  display: inline-block;
}

.mb20 { margin-bottom: 20px;}

@media screen and (max-width:1000px){
.txt {
  text-align: left;
}
}

/*-------------------------------------
　　全体
-------------------------------------*/

#wrap {
  width: 100%;
  background: #3d2a2a url(../images/top_img.png) no-repeat center;
  background-size: cover;
  background-attachment: fixed;
}

#wrap_u {
  width: 100%;
  background: #3d2a2a url(../images/top_img.png) no-repeat center;
  background-size: cover;
  background-attachment: fixed;
}
@media screen and (max-width:1000px){
  #wrap,
  #wrap_u{
    width: 100%;
    background: none;
    overflow: hidden;
  } 
}
/*-------------------------------------
　　ヘッダー
-------------------------------------*/

header {
  width: 100%;
  height: auto;
  text-align: right;
  padding: 10px 0;
  position: fixed;
  top: 0;
  z-index: 100;
}

.h1_logo {
  background: #fff;
  border: #CCC 6px solid;
  border-radius: 50%;
  display: inline-block;
  margin: 0 auto;
  position: absolute;
  top: 10px;
  left: 20px;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
}

.h1_logo:hover {
  -webkit-transform: scale( 1.2 );
  -moz-transform: scale( 1.2 );
}

.h1_logo img {
  width: 100px;
  max-width: 100%;
  vertical-align: bottom;
}

#hmenu {
  border-right: #336699 1px solid;
  margin: 20px 30px;
  position: fixed;
  top: 0;
  right: 0;
  /* background-color: rgba(255,255,255,0.4); */
  z-index: 9000;
  /* text-shadow: 0 0 5px rgba(255,255,255,0.8); */
}

#hmenu li {
  width: 200px;
  border-left: #336699 1px solid;
  display: inline-block;
  font-weight: bold;
  text-align: center;
  vertical-align: middle;
}

#hmenu li a {
  width: 100%;
  display: block;
  padding: 10px 20px;
}

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

.h1_logo img {
  width: 70px;
}

}

@media screen and (max-width:1000px){
  header {
    width: 100%;
    height: auto;
    /*background: rgba(255,255,255,0.6);*/
    padding: 10px 0;
  }
  
  .h1_logo {
    top: 0;
    left: 0;
  }
  
  .h1_logo img {
    width: 60px;
  }
    
  #hmenu {
    margin: 5px 10px;
  }
  
  #hmenu li {
    width: auto;
    font-size: 88%;
  }
  
  #hmenu li a {
    padding: 0 10px;
  }
}

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

footer {
  background: #fff;
  padding: 30px 0 80px;
}

.fmenu {
  padding: 15px;
  justify-content: center;
}

.fmenu li {
  padding: 0 15px;
  margin-bottom: 20px;
}

#copy {
  color: #999;
  margin: auto;
  text-align: center;
  padding: 10px;
}
@media screen and (max-width:1000px){
  #copy {
  font-size: 88%;
  padding: 5px 10px;
}
}