@charset "UTF-8";
html *{
 margin: 0;
 padding: 0;
}

header{
 background-color: #FFFFFF;
 width: 100%;
 height: 80px;
 display: flex;
 align-items: center;
}

h1#logo{
 width: 100px;
 height: 50px;
 margin:0 40px 0 10px;/*上 右 下 左*/
}
h1 a{
 height: 50px;
 line-height: 50px;
 color:cornflowerblue;
}
h1 a:hover{
color:aqua;
}
h1#logo a {
 display: block;
 background-color: #FFFFFF;
 text-align: center;
}
header nav{
width: 240px;
}
header nav ul {
list-style: none;
font-size: 20px;
display: flex;
justify-content: space-around;
}
 a{
 text-decoration-line: none;
 }
/*mainエリアの設定*/
#main{
 height: calc(100vh - (80px + 30px));
/*全体の高さ(100vh)からheaderの高さ(100px)とfooter(30px)の高さを
引いた分がmainの高さになるように*/
background-color: #FFFFFF;
position: relative;
}

.color-nav{
 width: 655px;
 height: 655px;
 position: absolute;
 top: 50%;
 left: 50%;
 margin: -327px 0 0 -327px;
}
.color-nav ul{
list-style: none;
}
/*追加*/
.color-nav {
/*position: relative;*/
}
div.circle-logo {
width: 100px;
height: 132px;
position: absolute;
top: 50%;
left: 50%;
margin: -61px 0 0 -50px;
}
div.item ul {
position: relative;
height: calc(655px / 2);
width: 120px;
margin: 0 auto;
}
div.item ul li{
position: absolute;
top: 0;
left: 50%;
margin-left: -60px;
transform-origin: center bottom;
width: 120px;
height: 100%;
}
div.item ul li:nth-child(1){
}
div.item ul li:nth-child(2){
transform: rotate(45deg);
}
div.item ul li:nth-child(3){
transform: rotate(90deg);
}
div.item ul li:nth-child(4){
transform: rotate(135deg);
}
div.item ul li:nth-child(5){
transform: rotate(180deg);
}
div.item ul li:nth-child(6){
transform: rotate(225deg);
}
div.item ul li:nth-child(7){
transform: rotate(270deg);
}
div.item ul li:nth-child(8){
transform: rotate(315deg);
}
.red, .orange, .yellow, .green, .blue, .purple,
.black, .white {
padding: 1em;
}
.red{
background-color: #FF888A;
 }
.orange{
background-color: #FBA76A;
}
.yellow{
background-color: #FFFFCC;
}
.green{
background-color: #CCFFCC;
}
.blue{
background-color: #CCCCFF;
}
.purple{
background-color: #F1CCFF;
}
.black{
background-color: #BABABA;
}
.white{
background-color: #FFFFFF;
}

/*ボタン設定*/
.btn{
margin:0 auto;
padding-top: 55px;
max-width: 1270px;
}

.btn ul {
 list-style: none;
 display: flex;
 justify-content: space-around;
 margin-bottom: 110px;
}



/* 何もしていない時の背景 */
.btn_red, .btn_orange, .btn_yellow, .btn_green, .btn_blue, 
.btn_purple, .btn_black, .btn_white{
  width: 100px;
  padding:23px;
  background-color: #cccccc;
  display: inline-block;
  cursor: pointer;
  border-radius: 5px;
}

/*red*/
/* マウスオーバーした際の背景 */
.btn_red:hover{
  background-color: #FF0000;
}
/*orange*/
.btn_orange:hover {
  background-color :#FF8F00;
}
/*yellow*/
.btn_yellow:hover {
background-color :#FFFF00;
}
/*green*/
.btn_green:hover {
background-color :#00FF00;
}
/*blue*/
.btn_blue:hover {
background-color :#0000FF;
}
/*purple*/
.btn_purple:hover {
background-color :#BB00FF;
}
/*black*/
.btn_black:hover {
background-color :#000000;
}
/*white*/
.btn_white:hover {
background-color :#FFFFFF;
}
.white .btn_white:hover{
border: 0.5px solid #CCCCCC;/*外枠*/
padding: 22px;
}


/*photograph*/
.photograph{
max-width: 1270px;
display: grid;
grid-gap: 25px;/*作品の余白*/
grid-template-columns: repeat(auto-fill,160px);
justify-content: space-around;
margin: 0 auto;
padding-bottom: 40px;
}

.photo-item img {
border-radius: 10px;/*角丸*/
}

/*Aboutの設定*/
.container {
 text-align: left;
 max-width: 700px;
 width: 90%;
 height: auto;
 margin: 0 auto;
 padding: 80px 16px 0;
}
.prof-item{
padding: 10px;
}
.container p{
text-indent: 1em;
}
h3{
padding: inherit;
}
.name, .photo-eqp{
display: flex;
}
.phone{
margin-left: -0.5em;
}

/*footerエリアの設定*/
footer{
height: 30px;
text-align: center;
background-color: #FFFFFF;
}


/*タブレットの設定*/
@media (max-width: 959px){
header {
display: block;
padding: 10px 0 0;
}
h1#logo{
margin: 10px;
}
header nav{
margin: 0 auto;
}
#main{
height: calc(100vh - (90px + 30px));
}
.photograph{
max-width: 570px;
display: grid;
grid-gap: 25px;/*作品の余白*/
grid-template-columns: repeat(auto-fill,120px);
justify-content: space-around;
margin: 0 auto;
padding-bottom: 40px;
}
.photo-item img{
width: 120px;
height: auto;
}
.btn {
width: 100%;
padding: 20px 10px 0;
box-sizing: border-box;
}
.btn ul {
flex-wrap: wrap;
justify-content: center;
margin-bottom: 50px;
}
.btn ul li {
padding-right: 0.9em;
}
}

/*スマートフォン設定*/
@media(max-width:519px){
#nav-toggle {
position: absolute;
top: 25px;
right: 25px;
height: 32px;
cursor: pointer;
}
header{
height: 75px;
padding-left: 0;
box-sizing: border-box;
position: fixed;
top: 0;
left: 0;
z-index: 50;
}
h1#logo{
width: 100px;
height: auto;
margin: 0;
}
#main{
height: calc(100vh - 30px);
/*100vh使用しているデバイス(機器)のディスプレイの高さ*/
/*100vw横幅*/
}
.color-nav{
 width: 279px;
 height: 279px;
 position: absolute;
 top: 50%;
 left: 50%;
 margin: -139px 0 0 -139px;
}
div.circle-logo {
width: 50px;
height: 66px;
position: absolute;
top: 50%;
left: 50%;
margin: -33px 0 0 -25px;
}
div.circle-logo img {
width: 100%;
height: auto;
}
div.item ul {
position: relative;
height: calc(279px / 2);
width: 60px;
margin: 0 auto;
}
div.item ul li{
position: absolute;
top: 0;
left: 50%;
margin-left: -30px;
transform-origin: center bottom;
width: 60px;
height: 100%;
}
div.item ul li img{
width: 100%;
height: auto;
}
.photograph{
padding-top: 50px;
max-width: 300px;
display: grid;
grid-gap: 15px;
grid-template-columns: repeat(auto-fill,80px);
justify-content: space-around;
margin: 0 auto;
padding-bottom: 40px;
}
.photo-item img{
width: 80px;
height: auto;
}
.btn {
/*padding-top: 70px;
padding: 0;
padding-left: 0.5em;*/
padding:70px 0 0 0.5em;
max-width: 320px;
}
.btn ul {
padding-top: 1em;
margin-bottom: 1em;
}
.btn_red, .btn_orange, .btn_yellow, .btn_green, .btn_blue, 
.btn_purple, .btn_black, .btn_white{
 width: 20px;
 padding:20px;
 background-color: #cccccc;
 display: inline-block;
 cursor: pointer;
 border-radius: 5px;
}
.white .btn_white:hover{
border: 0.5px solid #CCCCCC;/*外枠*/
padding: 19px;
}
.photograph {
padding-top: 1em;
}
.container{
max-width: 350px;
}
.belongs, .photo-eqp{
display: block;
}
.phone{
margin-left: 0em;
}
}


/*========= LoadingのためのCSS ===============*/

/* Loading背景画面設定　*/

#splash {
    /*fixedで全面に固定*/
  position: fixed;
  z-index: 999;
  width: 100%;
  height: 100%;
  background:#333;
  text-align:center;
  color:#fff;
}

/*リンクの形状*/
#page-top a{
  display: flex;
  justify-content:center;
  align-items:center;
  background:#942D2F;
  border-radius: 5px;
  width: 60px;
  height: 60px;
  color: #fff;
  text-align: center;
  text-transform: uppercase; 
  text-decoration: none;
  font-size:0.6rem;
  transition:all 0.3s;
}

#page-top a:hover{
  background: #777;
}

/*リンクを右下に固定*/
#page-top {
  position: fixed;
  right: 10px;
  bottom:10px;
  z-index: 2;
    /*はじめは非表示*/
  opacity: 0;
  transform: translateY(100px);
}

/*　上に上がる動き　*/

#page-top.UpMove{
  animation: UpAnime 0.5s forwards;
}
@keyframes UpAnime{
  from {
    opacity: 0;
  transform: translateY(100px);
  }
  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(100px);
  }
}