@charset "utf-8";
:root{
  --menu-mar:0pt;
}
/*common*/
main{
  font-size:36pt;
  font-weight:400;
  color:gray;
  transform: scaleY(1.075);
  background-color:transparent;
  font-family:"Helvetica" , sans-serif;
  width:230pt;
  display: block;
  position:absolute;right:190pt;top:32.5pt;
}

@font-face {
  font-family: "Helvetica"; /* 任意の名前 */
  src: url("/font/helvetica-255/Helvetica.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
.rire{
  color:white
}

.btns{
  display:block;
  position:absolute;left: 78%;top: 65.5%;
}
.custom-btn{
  display: block;
  padding-top:0;
  width: 100%;
  display:block;
  text-align: center;
  cursor:pointer;
  margin: 0;
}
.btn-1{
  line-height: 1;
  width:auto;
  height:auto;
  color:rgb(200, 200, 200);
  background-color: transparent;
  font-family:"Helvetica";
  font-size: 24pt;
  font-weight:0;
  transform: scaleY(0.85);
  border:none;
  cursor: pointer;
  margin:0 ;
  display: inline-block;
  text-align: center;
  transition-property: all;
  transition-delay: 20ms;
  transition-timing-function: ease-in;
  
};

.btn-1:hover{
  background:none;
  transition-duration:200ms;
}
.news:hover{
  color:rgb(0, 172, 0);
  transition-duration:200ms;
}
.works:hover{
  transition-duration:200ms;
  color:orangered;
}
.profile:hover{ 
  transition-duration:200ms;
  color:rgb(0, 68, 255);
}
.access:hover{
  color:rgb(255, 17, 0);
  transition-duration:200ms;
}
.contact:hover{
  color:rgb(165, 101, 42);
  transition-duration:200ms;
}

/*menu*/
.basement{
  display:flex;
  flex-direction: column;
  position:fixed;top: 0;left: 130pt;
  height:100%;
  width:130pt;
  background-color:transparent;

}
.logos{
  position: absolute;
  margin-top: 40pt;
}
.colum{
  width:auto;
  height: auto;
  display:inline-block;
  position:absolute;top:120pt;left: 0pt;
  z-index: 9000;
  background-color:transparent;
}
.btn-2{
  font-size: 24pt;
  font-family: "Helvetica";
  font-weight: 400;
  transform: scaleY(0.85);
  margin:none;
}
.btn-2.news{
  transition-property: all;
  transition-delay: 20ms;
  transition-timing-function: ease-in;
  color:rgb(0, 172, 0);
  transition-duration: 200ms;
  border:none;
  position:relative;top: 28.5pt;
}
.btn-2.news.active{
  transition-duration:200ms;
  transform: scaleY(0.85);
}

.btn-2.works{
  transition-property: all;
  transition-delay: 20ms;
  transition-timing-function: ease-in-out;
  color:orangered;
  transition-duration: 200ms;
  border:none;
  position:relative;top: 26pt;
  transition-property: all;
  transition-delay: 20ms;
}
.btn-2.works.active{
  transition-duration:200ms;
  transform:translateY(22pt) scaleY(0.85);
  display: inline-block;
}

.btn-2.profile{
  transition-property: all;
  transition-delay: 20ms;
  transition-timing-function: ease-in;
  color:rgb(0, 68, 255);
  transition-duration: 200ms;
  border:none;
  position:relative;top: 25pt;
}
.btn-2.profile.active{
  transition-duration:200ms;
  transform:translateY(48pt) scaleY(0.85);
}

.btn-2.access{
  transition-property: all;
  transition-delay: 20ms;
  transition-timing-function: ease-in;
  color:rgb(255, 17, 0);
  transition-duration: 200ms;
  border:none;
  position:relative;top: 23.5pt;
}
.btn-2.access.active{
  transition-duration:200ms;
  transform:translateY(72pt) scaleY(0.85);
}

.btn-2.contact{
  transition-property: all;
  transition-delay: 20ms;
  transition-timing-function: ease-in;
  color:rgb(165, 101, 42);
  transition-duration: 200ms;
  border:none;
  position:relative;top: 25.5pt;
}
.btn-2.contact.active{
  transition-duration:200ms;
  transform:translateY(105pt) scaleY(0.85);
}

.btn-other{
  line-height: 1;
  width:auto;
  height:auto;
  color:rgb(200, 200, 200);
  background-color: transparent;
  font-family:"Helvetica";
  font-size: 24pt;
  font-weight:400;
  transform: scaleY(0.85);
  border:none;
  cursor: pointer;
  margin:0 ;
  display: inline-block;
  opacity: 0;
  visibility: hidden;
  text-align: center;
  transition-property: all;
  transition-delay: 20ms;
  transition-timing-function: ease-in;
  transition: 400ms;
  
}
.btn-other.active{
  opacity: 1;
  transition:400ms;
  visibility: visible;
}
.none{
  display: none;
}

p{
  margin:0;
}

/*Happy Hamburger FIELD*/
.openbtn {
  position: absolute; /* 設置する位置を固定します */
  top: 0pt; /* 上から10pxの位置 */
  left: 0%; /* 右から10pxの位置 */
  z-index: 9999; /* 一番手前に表示 */
  cursor: pointer; /* カーソルが上に来たらポインターに変身 */
  width: 35pt; /* 横幅５０px */
  height: 50px; /* 縦幅５０px */
  display:block;
  background-color:transparent;
  
}
.openbtn span {
  display: block;
  transition: all 0.4s; /* 変化速度 */
  position: absolute; /* 四角い箱に対して線の位置を調整するためのおまじない */
  left: 0px; /* 四角の箱の左から１４pxの位置 */
  width: 45px; /* 線の幅 */
  height: 5.5pt; /* 線の太さ */
  border-radius: 1px; /* 線の角を少し丸く */
  background-color: #ffa600; /* 線の色 */
}

.openbtn span:nth-of-type(1) {
  top: var(--menu-mar); /* １本目の線の四角い箱の上からの位置 */
}
.openbtn span:nth-of-type(2) {
  top: calc(var(--menu-mar) + 12.5pt); /* ２本目の線の四角い箱の上からの位置 */
}
.openbtn span:nth-of-type(3) {
  top: calc(var(--menu-mar) + 25pt ); /* ３本目の線の四角い箱の上からの位置 */
}
/* ×に変化 */
.openbtn.active span:nth-of-type(1) {
  top: 00px;
  width:30px;
  height:3.5px;
  /* transform: translateY(6px) rotate(-45deg); １本目の線の角度と上からの位置の変更 */
  transform: translateY(10px) rotate(-30deg);
  background-color: gray;
}
.openbtn.active span:nth-of-type(2) {
  opacity: 0; /* ２本目の線を見えなくする */
}
.openbtn.active span:nth-of-type(3) {
  top: 30px;
  width:30px;
  height:3.5px;
  /* transform: translateY(-6px) rotate(45deg); １本目の線の角度と上からの位置の変更 */
  transform: translateY(-6.3px) rotate(30deg);
  background-color: gray;
}
.menus{
  padding-top:18px;
  height: auto;
  background-color: transparent;
}


*, *:before, *:after {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}
/* menu */

/* menu toggle */

/* contents */
/* .cp_contents {
	color: #333333;
	text-align: center;
} */
/*news*/

/*works*/
a{
  text-decoration: none;
  color: rgb(0, 0, 0);
}
.menus a{
  text-decoration: none;
  color: orangered;
}
/*profile*/

/*access*/

/*contact*/

/*その他カスども*/
.test{
  font-size: 500pt;
  display: none;
}

/*読み込み後　表示*/
/* ローディング画面設定 */
#load{
  width: 100%;
  text-align: center;
  display: block;
}

/* 本体スタイル */
#wrapper{
  width:100%;
  text-align: center;
  display: none;

}