@charset "UTF-8";

html {
  font-size: 62.5%;
}


body {
	margin: 0;
	padding:0;
	font-weight:400;
  line-height:180%;
	text-align: center;
  color:#000000;
  overflow: hidden;
  font-size:14px;
font-family: 'Noto Serif JP', serif;
  letter-spacing: 0.15em;
  -webkit-text-size-adjust: 100%;
  font-feature-settings: "palt";
  -webkit-text-size-adjust: none;
}



/* TTL
-------------------------------------------------------------------------------*/

h1{
  width:18px;
  height:auto;
  margin:25px 0 0 23px;
}



/* TXT
-------------------------------------------------------------------------------*/


/* contents box text
-------------------------------------------------------------------------------*/


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

header {
  width:65px;
  height: 100%;
  margin:0;
  padding:0;
  position:fixed;
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
  z-index:200;
  top:0;
  left:0px;
  float:left;
  background-color:#f4f4f2;
}


ul.mainNav{
  width:auto;
  margin:0;
  padding:0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height:50vh;
}

.mainNav li{
  width:80%;
  height:auto;
  padding:0;
  margin:10px 10px;
  font-size:11px;
  text-align:center;
  display:flex;
-webkit-align-items: center;
-webkit-justify-content: center; 
align-items: center; /*上下中央*/
justify-content: center; /*左右中央*/
-webkit-writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
}



nav{
  position: relative;
}


ul.sns-icon{
  width:auto;
  height:auto;
  margin:0;
  padding:0;
  position: fixed;
  left:25px;
  bottom:25px;
}

ul.sns-icon li{
  margin:15px auto 0 auto;
  padding:0;
  text-align:center;
}

ul.sns-icon li:first-child{
  width:8px;
 margin:0 0 3px 3px;
 padding:0;
}

ul.sns-icon li:last-child{
  width:17px;
  margin:0 0 0 -3px;
  padding:0;
}

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



h1{
  width:15px;
  height:auto;
  margin:25px 0 0 15px;
}




  header {
    width:45px;
    height: 100%;
    margin:0;
    padding:0;
    position:fixed;
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
    z-index:200;
    top:0;
    left:0px;
    float:left;
    background-color:#f4f4f2;
  }
  
  
  ul.mainNav{
    width:auto;
    margin:0;
    padding:0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height:45vh;
  }
  
  .mainNav li{
    width:80%;
    height:auto;
    padding:0;
    margin:7px 5px;
    text-align:center;
    display:flex;
    font-size:10px;
  -webkit-align-items: center;
  -webkit-justify-content: center; 
  align-items: center; /*上下中央*/
  justify-content: center; /*左右中央*/
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
      writing-mode: vertical-rl;
  }
  
  
  
  nav{
    position: relative;
  }
  
  
  ul.sns-icon{
    width:auto;
    height:auto;
    margin:0;
    padding:0;
    position: fixed;
    left:15px;
    bottom:15px;
  }
  
  ul.sns-icon li{
    margin:5px auto 0 auto;
    padding:0;
    text-align:center;
  }
  
  ul.sns-icon li:first-child{
    width:8px;
  }
  
  ul.sns-icon li:last-child{
    width:17px;
  }

}


/* MAIN CONTENTS
-------------------------------------------------------------------------------*/


.twocolumn-wrapper{
  margin:0;
  padding:0;
  overflow:hidden;
  -webkit-overflow-scrolling : touch;
}




main {
  width: 100%;
  height:auto;
  overflow:hidden;
  margin:0;
  padding:0;
  float: right;
  margin-right: -65px;
  padding-right:65px;
  box-sizing: border-box;
}

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

  main {
    width: 100%;
    height:auto;
    overflow:hidden;
    margin:0;
    padding:0;
    float:none;
    margin-right:0px;
    padding-right:0px;
    box-sizing: border-box;
  }

}





/* bg button
-----------------------------------------*/


  a.cp_btn {
    position: relative;
    display: block;
    width: 180px;
    padding: 0.8em 0.9em 0.8em 0.2em;
    margin:0 auto 4px auto;
    font-size:14px;
    text-align: center;
    text-decoration: none;
    color: #FFF;
    transition: .4s;
    border-radius:30px;
    box-shadow:6px 3px 10px -5px #cccccc;
    background: url("/images/button-common-linkw-right.svg") 160px center no-repeat #1a9b8d;
    background-size: 25px 13px;
  }
  
  a.cp_btn:hover {
    text-shadow: -6px 0px 15px rgba(255, 255, 240, 0.63), 6px 0px 15px rgba(255, 255, 240, 0.63);
    transition: .4s;
    color: #FFF;
  }
  



/* FOOTER
-----------------------------------------*/


footer{
  width:auto;
  height:auto;
    padding:0;
    margin:0;
    position: fixed;
    bottom:25px;
    right:25px;
    z-index:3;
  }

  .copyright{
    width:170px;
  }


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

    footer{
      width:auto;
      height:auto;
        padding:0;
        margin:0;
        position: fixed;
        bottom:10px;
        right:25px;
        z-index:3;
      }
    
      .copyright{
        width:150px;
      }
    

  }