@charset "UTF-8";
body

{background-color: #1995F2;
}

.block1{
display: flex;
}

/*
.haikei2{
background-color:#1995F2;
position: absolute;
width: 5%;
height:3000px;
right: 0;
top: 0;
}*/

.haikei3{
background-color: #F23465;
width:100vw;
height: 79%;
position: absolute;
left: 0;
top: 0;
}
.haikei4{
width: 380px;
height: 380px;
background:#F23465;
border-radius: 50%;
position: absolute;
top: 47%;
left: 0;
}
/*.haikei5{
background-color: #1995F2;
width:96vw;
height: 20%;
position: absolute;
left: 0;
top: 3660px;
}*/
/******************************************************************************************************************************/

/**バー**/
.top{
text-align: center;
height:60px;
line-height: 60px;
color: black;
z-index: 90;
position: fixed;
top: 10px;
}
.top h1{
font-size: 10px;
font-family: "Osaka-mono", "MS Gothic", "monospace";
position: relative;
top: -10px;
left: 15px;
}
.top h2{
font-size: 15px;
font-family: "Osaka-mono", "MS Gothic", "monospace";
position: relative;
top: -58px;
left: 15px;
}


/**ヘッダー**/
.box {
width: 1000vw;
height: 13%;
z-index: 90;
background-color: aliceblue;
position: fixed;
top:0; 
left: -10%;
}

.line1{
background-color: #000000;
width: 110vw;
height: 0.5%;
position: fixed;
left: -5%;
z-index: 90;
top: 13%;
}
/******************************************************************************************************************************/

/*画像*/
.gazou{
position:absolute;
left: 35px;
top: 20%;
z-index: 10;
}
/******************************************************************************************************************************/

/*ハンバーガーメニュー*/
/* チェックボックスは非表示に */
.drawer-hidden {
  display: none;}
/* ハンバーガーアイコンの設置スペース */
.drawer-open {
  display: flex;
  height: 7%;
  width: 12%;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 2%;
  left: 2%;
  background: #F4FF00;
  z-index: 100;/* 重なり順を一番上に */
  cursor: pointer;}
/* ハンバーガーメニューのアイコン */
.drawer-open span,
.drawer-open span:before,
.drawer-open span:after {
  content: '';
  display: block;
  height: 3px;
  width: 25px;
  border-radius: 3px;
  background: #000000;
  transition: 0.5s;
  position: absolute;}
/* 三本線のうち一番上の棒の位置調整 */
.drawer-open span:before {
  bottom: 8px;}
/* 三本線のうち一番下の棒の位置調整 */
.drawer-open span:after {
  top: 8px;}
/* アイコンがクリックされたら真ん中の線を透明にする */
#drawer-check:checked ~ .drawer-open span {
  background: rgba(255, 255, 255, 0);}
/* アイコンがクリックされたらアイコンが×印になように上下の線を回転 */
#drawer-check:checked ~ .drawer-open span::before {
  bottom: 0;
  transform: rotate(45deg);}
#drawer-check:checked ~ .drawer-open span::after {
  top: 0;
  transform: rotate(-45deg);}
  /* メニューのデザイン*/
.drawer-content {
  width: 60%;
  height: 40%;
  position: fixed;
  top: 13%;
  left: 100%;/* メニューを画面の外に飛ばす */
  z-index: 99;
  transition: .5s;}

/* アイコンがクリックされたらメニューを表示 */
#drawer-check:checked ~ .drawer-content {
  left: 0;/* メニューを画面に入れる */}
.drawer-list{line-height: 3;}
.drawer-list{position: relative;
top: 20%;}
/******************************************************************************************************************************/

/*========= トップページのためのCSS ===============*/
/*リンクを右下に固定*/
#page-top {
position: fixed;
right: 2px;
bottom:30px;
z-index: 2;
/*はじめは非表示*/
opacity: 0;
transform: translateY(150px);}
/*　上に上がる動き　*/
#page-top.UpMove{
animation: UpAnime 0.5s forwards;}
@keyframes UpAnime{
from {
opacity: 0;
transform: translateY(150px);}
to {
opacity: 1;
transform: translateY(0);
}}
/*　下に下がる動き　*/
#page-top.DownMove{
animation: DownAnime 0.5s forwards;}
@keyframes DownAnime{
from {
opacity: 1;
transform: translateY(0);}
to {
opacity: 1;
transform: translateY(150px);}}
/*画像の切り替えと動き*/
#page-top a {
/*aタグの形状*/
display: block;
width: 65px;
height: 40px;
color: #333;
text-align: center;
text-transform: uppercase; 
text-decoration: none;
font-size:0.6rem;
/*背景画像の指定*/
background: url("1x/bikkuri3.png")center;
background-repeat: no-repeat;
background-size: contain;}
#page-top.floatAnime a{
width: 65px;
height: 40px;
/*背景画像の指定*/
background: url("1x/bikkuri2.png");
background-repeat: no-repeat;
background-size: contain;
/*アニメーションの指定*/
animation: floatAnime 5s linear infinite;
opacity: 0;}
@keyframes floatAnime {
0% { transform: translateX(0); opacity: 0; }
25% { transform: translateX(-6px);opacity: 1; }
50% { transform: translateX(0) }
100% { transform: translateX(6px);opacity: 1; }}
/*Page Topと書かれたテキストの位置*/
#page-top span{
position: absolute;
bottom: -10px;
right: 20px;
color: #666;}
/*検証のためのCSS*/
section{
padding: 500px 0;}
.slide-bottom img{
width: 100%;
height: auto;}
/******************************************************************************************************************************/
/* フェードイン用のCSS */

/* 下からフェードイン */
.slide-bottom {
opacity: 0;
transform: translate(0, 20px);
transition: all 1s ease-out;
}
.haikeida{
width: 100vw;
height: auto;
position: absolute;
left: -1px;
top: 37%;
z-index: 0;
}
.shintyaku{
width: 50%;
height: 50%;
position: absolute;
left: 3%;
top: 270px;
z-index: 2;
}
.uenotext{
font-size: 15px;
font-family: "Osaka-mono", "MS Gothic", "monospace";
color: aliceblue;
position:absolute;
top: 775px;
left: 19%;
z-index: 2;
}
.sen{
width: 77%;
height: auto;
position:absolute;
left: 10%;
top: 840px;
}
.sen1{
width: 77%;
height: auto;
position:absolute;
left: 10%;
top: 1100px;
}

.text1{
font-family: "Osaka-mono", "MS Gothic", "monospace";
}
.text1 h1{
font-size: 10px;
position: absolute;
color: #7D7D7D;
top: 870px;
left: 35px;
z-index: 10;
}
.text1 p{
font-size: 15px;
position: absolute;
top: 880px;
left: 35px;
z-index: 10;
}
.text1 h2{
font-size: 10px;
position: absolute;
color: #7D7D7D;
top: 930px;
left: 35px;
z-index: 10;
}
.text1 p1{
font-size: 15px;
position: absolute;
top: 960px;
left: 35px;
z-index: 10;
}
.text1 h3{
font-size: 10px;
position: absolute;
color: #7D7D7D;
top: 990px;
left: 35px;
z-index: 10;
}
.text1 p2{
font-size: 15px;
position: absolute;
top: 1020px;
left: 35px;
z-index: 10;
}
.text1 h4{
font-size: 10px;
position: absolute;
color: #7D7D7D;
top: 1040px;
left: 35px;
z-index: 10;
}
.text1 p3{
font-size: 15px;
position: absolute;
top: 1070px;
left: 35px;
z-index: 10;
}
.haikeida1{
width: 35vw;
height: auto;
position: absolute;
top: 97%;
left: 50%;
z-index: 0;
}
.sitaotext{
font-size: 15px;
font-family: "Osaka-mono", "MS Gothic", "monospace";
color: aliceblue;
position: absolute;
top: 1140px;
right: 22%;
z-index: 2;
}
.haikeida2{
width: 101vw;
height: 1250px;
background-color: #F6FF80;
position: absolute;
top: 1300px;
left: 0;
z-index: 0;
}
/********視覚通信********/
.tusin{
font-family: "YuGothic", "Yu Gothic medium", "Hiragino Sans", "sans-serif";
}
.tusin p{
font-size: 40px;
font-family: "Osaka-mono", "MS Gothic", "monospace";
position: absolute;
top: 330px;
left: 46px;
}
.tusin p1{
font-size: 12px;
font-family:"Osaka-mono", "MS Gothic", "monospace" ;
position: absolute;
letter-spacing: 0.2em;
top: 415px;
left: 78px;
}
.tusin p2{
font-size: 23px;
letter-spacing: 0.05em;
word-spacing: -0.1em;
position: absolute;
top:300px;
left:84px;
}
/*********視覚通信の記事の写真*********/
.box1_img{
position: absolute;
width: 65%;
height: auto;
left: -20%;
top: -40px;
}
.box2_img{
position: absolute;
width: 65%;
height: auto;
top: -40px;
right: -20%;
}
.box3_img{
position: absolute;
width: 65%;
height: auto;
left: -20%;
top: 260px;
}
.box4_img{
position: absolute;
width: 65%;
height: auto;
right: -20%;
top: 260px;
}
.box5_img{
position: absolute;
width: 65%;
height: auto;
left: -20%;
top: 560px;
}
.box6_img{
position: absolute;
width: 65%;
height: auto;
right: -20%;
top: 560px;
}
/*********視覚通信の記事の文字*********/
.block1{
font-family: "Osaka-mono", "MS Gothic", "monospace";
}
.box1_text{
position: absolute;
left: -10%;
top: 160px;
font-size: 10px;
}
.box1_text h2{
font-size: 15px;
letter-spacing: 0.2em;
}
.box2_text{
position: absolute;
right: -10%;
top: 160px;
font-size: 10px;
}
.box2_text h2{
font-size: 15px;
letter-spacing: 0.2em;
}
.box3_text{
position: absolute;
left: -10%;
top: 460px;
font-size: 10px;
}
.box3_text h2{
font-size: 15px;
letter-spacing: 0.2em;
}
.box4_text{
position: absolute;
right: 1%;
top: 460px;
font-size: 10px;
}
.box4_text h2{
font-size: 15px;
letter-spacing: 0.2em;
}
.box5_text{
position: absolute;
left: -10%;
top: 760px;
font-size: 10px;
}
.box5_text h2{
font-size: 15px;
letter-spacing: 0.2em;
}
.box6_text{
position: absolute;
right: -20%;
top: 760px;
font-size: 10px;
}
.box6_text h2{
font-size: 15px;
letter-spacing: 0.2em;
}
/*********************視覚デザイン*********************/
.sikakunohaikei1{
background-color: #B6FFD9;
width: 100vw;
height: 80%;
position: absolute;
left: 0;
z-index: 0;
top: 2890px;
}
.sikakunohaikei2{
width: 380px;
height: 380px;
background: #B6FFD9;
border-radius: 50%;
position: absolute;
left: 0;
top: 2700px;
}
.title{
font-family: "Osaka-mono", "MS Gothic", "monospace";
text-align: center;
font-size: 25px;
position: absolute;
left:23%;
top:2790px;
}
.titlenonaka{
font-family: "Osaka-mono", "MS Gothic", "monospace";
font-size: 12px;
width: 70%;
height: auto;
line-height: 1.7;
letter-spacing: 0.15em;
position: absolute;
left: 15.7%;
top: 2940px;
}
.aboutus{
font-size: 23px;
font-family: "YuGothic", "Yu Gothic medium", "Hiragino Sans", "sans-serif";
letter-spacing: 0.05em;
word-spacing: -0.1em;
position: absolute;
top:2740px;
left:117px;
}
.aboutus1{
font-size: 10px;
letter-spacing: 0.05em;
word-spacing: -0.1em;
position: absolute;
top:2877px;
left:30%;
}
/**********************最後************************/
.sigonohaikei1{
width: 380px;
height: 180px;
background:#FFFEFE;
border-radius: 50%/100% 100% 0 0;
position: absolute;
left: 0;
top: 3260px;
z-index: 0;
}
.sigonohaikei2{
width: 100vw;
height: 30%;
background:#FFFEFE;
position: absolute;
left: 0;
top: 3440px;
z-index: 0;
vertical-align: bottom;
}
/*.sigonohaikei3{
width: 360px;
height: 360px;
border-radius: 50%;
background:#FFFEFE;
position: absolute;
left: 0;
top: 3380px;
z-index: 0;
}*/
/*******************************/
.aicon1{
width: 8.7vw;
height: auto;
float: left;
margin: 5px;
}
.block2{
position: absolute;
top: 340px;
left: 105px;
}
.aicon1{
width: 10vw;
height: auto;
}
.aicon1_img{
position: relative;
top: 5px;
}
.nagaoka-aicon{
width: 20vw;
height: auto;
position: absolute;
top: 1310px;
left: 0px;
}
.text{
font-family:'Hiragino Sans', 'Hiragino Kaku Gothic ProN', Meiryo, 'sans-serif';
}
.text_1{
font-size: 13px;
letter-spacing: 0.1em;
position: absolute;
top: 770px;
right: 60px;
}
.text_2{
font-size: 12px;
position: absolute;
top: 950px;
left: -10px;
}
.text_3{
font-size: 10px;
position: absolute;
color: #808080;
text-align: center;
left: 55px;
top: 1000px;
}
.line_1{
background-color: #17EC63;
width: 80vw;
height: 1%;
position: absolute;
left: 30px;
top: 3480px;
z-index: 30;
}
/******************************************************************************************************************************/

/**オープニングシャッター**/
/***上にかぶせる背景***/
.mask{
position: fixed; /*固定表示*/
top: 0;
left: 0;
width: 100vw; /*画面幅*/
height: 100vh; /*画面の高さ*/
background-color: #F4FF00; /*背景色*/
z-index: 999; /*最前面に*/
animation: fadeOut 0.8s forwards; /*フェードアウト*/
animation-delay: 1.5s; /*ロゴ画像のアニメーション後に*/
}
/*フェードアウトアニメーション*/
@keyframes fadeOut{
0%{
opacity: 1;
}
100% {
opacity: 0;
visibility: hidden;
}
}
/***ロゴ画像***/
.mask img{
position: absolute;
width: 100px;
height: 100px;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
animation: bound 0.5s forwards; /*任意のアニメーション*/
animation-delay: 0.6s; /*好みで遅延*/
}
/*鼓動する*アニメーション*/
@keyframes bound{
30%{
transform: scale(1.1);
}
100% {
transform: scale(0.9);
}
}
/***サンプル装飾用***/
body{
padding: 3rem;
}
/******************************************************************************************************************************/

/*浮いてる*/
.fuwafuwa {
animation: fuwafuwa 3s infinite ease-in-out .8s alternate;
background:url("1x/hito1.png")
	center center / 300px auto;
display: inline-block;
transition: 1.5s ease-in-out;
width: 340px;
height: 320px;
position: absolute;
top: 30%;
left: -5%;
z-index: 80;
background-repeat: no-repeat;
}
 
@keyframes fuwafuwa {
0% {transform:translate(0, 0) rotate(-7deg);
}
50% {transform:translate(0, -7px) rotate(0deg);
}
100% {transform:translate(0, 0) rotate(7deg);
}
}