@charset "UTF-8";

html,body { height:100%;overflow:hidden; }


body {
	margin: 0;
	padding:0;
	font-weight:400;
	font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
	-webkit-text-size-adjust: 100%;
  font-feature-settings: "palt";
  letter-spacing: 0.1em;
  font-size:14px;
  line-height:150%;
	text-align: center;
  overflow: hidden!important;
  background-color: #ffffff;
}


@font-face {
	font-family: 'seesawbooks';
	font-style: normal;
	font-weight: 700;
	src: url("../fonts/GrotescoHeavy.eot");
	src: url("../fonts/GrotescoHeavy.eot?#iefix") format("embedded-opentype"), url("../fonts/GrotescoHeavy.ttf") format("truetype"), url("../fonts/GrotescoHeavy.woff") format("woff")
  }





img{
	vertical-align: top;
	-ms-interpolation-mode:bicubic;   /* IE 7+ */
 image-rendering: optimizeQuality; /* Fx, (Gecko 1.9.2) */
  max-width: 100%;
  height: auto;
	width /****/:auto;  /*IE8�̂ݓK�p*/
}


img[src*=".svg"] {
	width: 100%; 
  }

/* HEADER
-------------------------------------------------------------------------------*/


.page {
  height: 100vh;
  overflow: hidden!important;
}

.box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  /* 左右中央寄せ */
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  
  /* 上下中央寄せ */
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  
  padding:0px;
  box-sizing: border-box;
  
  width: 100vw;
  height: auto;
  min-height: 100vh;  
  background-size: cover;
  background-position: center;
}


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

  .box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    /* 左右中央寄せ */
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    
    /* 上下中央寄せ */
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    
    padding:0px;
    box-sizing: border-box;
    
    width: 100vw;
    height: auto;
    min-height: 100vh;  
    background-size: cover;
    background-position: center;
  }

}



/* Opening
-----------------------------------------*/


img.Opening__text{
	  width:240px;
	  position: absolute;
	  top:42%;
	  left: 50%;
	  transform: translate(-50%, -50%);
	  -webkit-transform:translate(-50%, -50%);
	  z-index: 100;
	}


ul.add{
  margin:0;
  padding:0;
  position: relative;
  top:140px;
  color:#000000;
  font-family: 'seesawbooks';
}

ul.add li small{
  line-height:140%;
  display:block;
  margin:10px 0 0 0;
  font-size:11px;
}

ul.add a{
  color:#000000;
}


ul.add li{
  margin:0 0 5px 0;
}

ul.txt-nav{
  width:auto;
  font-size:10px;
  text-align: center;
  margin:10px auto 0 auto;
  padding:0;
  line-height: 140%;
}


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


    img.Opening__text{
      width:60%;
      position: absolute;
      top:32%;
      left: 50%;
      transform: translate(-50%, -50%);
      -webkit-transform:translate(-50%, -50%);
      z-index: 100;
    }

    ul.add{
      margin:0;
      padding:0;
      position: relative;
      top:55px;
    }
    
    ul.add li{
      margin:0 0 3px 0;
    }

  }



footer{
  width:auto;
  height:auto;
    padding:0;
    margin:0;
    z-index:100;
position: absolute;
bottom:-20px;
left: 50%;
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
width:好きな値;
height:好きな値; 
  }


  ul.main-nav{
    width:auto;
    height:auto;
    margin:0;
    padding:0;
    overflow:auto;
  }
  
  ul.main-nav li {
    width:auto;
    height:auto;
    padding:0 5px;
    display:inline-block;
  }
  
  ul.main-nav img{
    height:30px;
  }
  

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

    ul.main-nav{
      width:100%;
      height:auto;
      margin:0;
      padding:0;
      overflow:auto;
    }
    
    ul.main-nav li {
      width:auto;
      height:auto;
      padding:0;
      display:inline-block;
    }
    
    ul.main-nav img{
      width:40px;
    }


  }






  a.btn_02 {
    display: block;
    text-align: center;
    vertical-align: middle;
    text-decoration: none;
    width: 120px;
    margin:20px auto 0 auto;
    padding: 0.4rem 1rem;
    font-weight: bold;
    border: 2px solid #ea6d8d;
    background: #ea6d8d;
    color: #fff;
    transition: 0.5s;
  }
  a.btn_02:hover {
    color: #ea6d8d;
    background: #fff;
  }


a{
    color:#ea6d8d;
  }