@charset "UTF-8";
/* 共通部分 */

html {
  font-size: 100%;
}

body {
  line-height: 1.7;
  font-size: 9px;
  font-family: "Noto Sans JP", "游ゴシック", "Meiryo";
  margin: 0;
  padding: 0;
  width:100%;
  -webkit-text-size-adjust: 100%;
}

li {
  list-style-type: none;
}

img {
  max-width: 300px;
}

a {
  text-decoration: none;
  color: black;
}

/*ヘッダー、ロゴ部分*/

header img {
  margin: 30px 0 20px 40px;
}

/* メイン部分 */

main {
  display: flex;
  justify-content: space-between;
  width:980px;
}

/* list1 */

.list1 {
  width: 200px;
  margin-right: 40px;
}

.list1 li {
  margin-bottom: 12px;
  padding-left: 1em;
  text-indent: -1em;
}

.list1 a:hover {
  color: red;
  cursor: pointer;
}

/* list2 */

.list2 {
  width: 200px;
  
  margin-left: 40px;
}

.list2 li {
  margin-bottom: 12px;
}

.list2 a:hover {
  color: red;
  cursor: pointer;
}

/* works */

.works {
  width: 500px;
}

.works p {
  margin-bottom: 60px;
}

.works span {
  color: red;
}

/* works共通 */

.spantitle {
  color: red;
  font-size: 17px;
  font-weight: bold;
}

.blacktitle {
  font-size: 17px;
  font-weight: bold;
  color: black;
}

.caption {
  font-size: 14px;
}

.works .worksspace {
  margin-bottom: 30px;
}

/* ハリースミス*/

.harrysmith {
  color: red;
}

/* ジョンコルベット */

.johncorbett {
  color: red;
}

/* we oscilate */

.cmpns003 {
  color: red;
}

/* 大里俊晴 */

.cmpns002 {
  color: red;
}

/* 販売店様 */

.order {
  color: red;
}

/* 会社概要 */

.about {
  color: red;
}

/*クリック部分 */

.click {
  display: flex;
  align-items: center
}

/* フッター部分 */

.worksspace .link {
  color: #1279BE;
}

.red {
  color: red;
	}
	
.fluid {
  width:250px;/*横幅*/
  height: 250px;/*縦幅*/
  background:#000000;/*背景色*/
  animation: fluidrotate 180s ease 0s infinite;/*アニメーションの設定*/
}

@keyframes fluidrotate {  
		
0% {transform: rotate( 0 );
    border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;
}
5% {
    border-radius: 45% 55% 47% 53% / 49% 48% 52% 51%;
}
10% {
    border-radius: 55% 45% 56% 44% / 55% 41% 59% 45%;
}
15% {
    border-radius: 55% 45% 52% 48% / 47% 41% 59% 53%;
}
20% {
    border-radius: 50% 50% 51% 49% / 47% 58% 42% 53%%;
}
25% {
    border-radius: 45% 55% 52% 48% / 56% 49% 51% 44%;
}
30% {
    border-radius: 53% 47% 53% 47% / 59% 44% 56% 41%;
}
35% {
    border-radius: 47% 53% 53% 47% / 45% 56% 44% 55%;
}
40% {
    border-radius: 49% 51% 57% 43% / 53% 45% 55% 47%;
}
45% {
    border-radius: 48% 52% 54% 46% / 54% 56% 44% 46%;
}
50% {
    border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;
}
55% {
    border-radius: 57% 43% 56% 44% / 56% 49% 51% 44%;
}
60% {
    border-radius: 55% 45% 52% 48% / 54% 62% 38% 46%;
}
65% {
    border-radius: 58% 42% 52% 48% / 62% 41% 59% 38%;
}
70% {
    border-radius: 42% 58% 49% 51% / 44% 62% 38% 56%;
}
75% {
    border-radius: 58% 42% 63% 37% / 57% 54% 46% 43%;
}
80% {
    border-radius: 54% 46% 44% 56% / 54% 55% 45% 46%;
}
85% {
    border-radius: 47% 53% 41% 59% / 45% 54% 46% 55%;
}
90% {
    border-radius: 46% 54% 50% 50%/35% 61% 39% 65%;
}
95% {
    border-radius: 50% 50% 46% 54% / 51% 48% 52% 49%;
}
100% {transform: rotate( 360deg );
    border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;
}		
}