@charset "utf-8";
/* lp skill */
/* 同一項目で複数の指定行がある場合、後続の行が有効です */
h1, h2, h3, h4, h5, h6{
  margin: 0;
  padding : 0;
}
h1{
  padding: 0.35em;/*文字周りの余白*/
  color: #494949;/*文字色*/
  background: #fff1cf;/*背景色*/
  border-left: solid 0.25em #ffaf58;/*左線（実線 太さ 色）*/
  font-size : 150%;
  margin-bottom: 5px;
  font-weight: bold;
	width:770px;
  /*border-radius: 0 3rem 3rem 0;*/
}
h2{
  font-size : 150%;
/*  font-weight: bold;*/
  color : #d0826c;
/*  text-align: center;*/
}
h3{
  font-size : 100%;
/*  color : #ff0000;*/
}
h4, h5, h6{
  font-size : 100%;
/*  color : #ff0000;*/
}

main{
	max-whdth: 100%;
	margin: 1% 20% 0;	
}

.number1{
	background-color: #f2f2b0;/*#f5e56b*/
	width:150px;
	height: 72px;
	border-radius: 6rem 6rem 0 0;
	/*font-size: 1.1rem;*/
	text-align: center;
	line-height: 1.1;
	color: #636161;
	font-weight: bold;
}
.number2{
	background-color: #fddea5;/*#f6ad49*/
	width:150px;
	height: 72px;
	border-radius: 6rem 6rem 0 0;
	text-align: center;
	line-height: 1.1;
	color: #636161;
	font-weight: bold;
}
.number3{
	background-color: #d6e9ca;/*#83ccd2*/
	width:150px;
	height: 72px;
	border-radius: 6rem 6rem 0 0;
	/*font-size: 1.1rem;*/
	text-align: center;
	line-height: 1.1;
	color: #636161;
	font-weight: bold;
}
.number4{
	background-color: #bbc8e6;/*#bce2e8*/
	width:150px;
	height: 72px;
	border-radius: 6rem 6rem 0 0;
	/*font-size: 1.1rem;*/
	text-align: center;
	line-height: 1.1;
	color: #636161;
	font-weight: bold;
}
.number5{
	background-color: #fdeff2;/*#bbbcde*/
	width:150px;
	height: 72px;
	border-radius: 6rem 6rem 0 0;
	/*font-size: 1.1rem;*/
	text-align: center;
	line-height: 1.1;
	color: #636161;
	font-weight: bold;
}

.flex-s-01 {
	display: flex;
	padding: 10px;
}
.flex-s-01 div {
	padding: 28px 10px;
}
.content{
	font-size: 2rem;
	font-weight: bold;
	opacity: 0.5;
	font-family: "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

/*アニメーションの参考サイト
https://askne.blog/2022/04/07/%E3%81%90%E3%82%8B%E3%81%90%E3%82%8B%E3%81%A8%E5%9B%9E%E3%82%8A%E3%81%AA%E3%81%8C%E3%82%89%E7%A7%BB%E5%8B%95%E3%81%97%E3%81%A6%E7%89%B9%E5%AE%9A%E3%81%AE%E4%BD%8D%E7%BD%AE%E3%81%A7%E3%82%B9%E3%83%88/*/
/*@keyframes move-to-right{
  0% {
    transform:rotateZ(0);
    left:-200px;
  }
  80% {
    transform:rotateZ(370deg);
    left:220px;
  }
  90% {
    transform:rotateZ(380deg);
    left:240px;
  }
  100% {
    transform:rotateZ(360deg);
    left:200px;
  }
}
*/
.p-container1{/*イラストレーター*/
  width:750px;
  height:64px;
  outline:none;
  display:flex;
  align-items:center;
  border-bottom: 1px solid #CCC;
  margin-left: 10px;
}

.illustrator{
  width:50px;
  height:50px;
  background-image:url(../../skill/images/ball_pink.png);
  background-size:cover;
  position:relative;
  animation: move-to-right1 2.9s linear forwards;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:20px;
}
@keyframes move-to-right1{
  0% {
    transform:rotateZ(0);
    left:-50px;
  }
  100% {
    transform:rotateZ(360deg);
    left:668px;/*イメージの右への動きの距離*/
  }
}

.p-container2{/*フォトショップ*/
  width:750px;
  height:64px;
  outline:none;
  display:flex;
  align-items:center;
  border-bottom: 1px solid #CCC;
  margin-left: 10px;
}
.photoshop{
  width:50px;
  height:50px;
  background-image:url(../../skill/images/ball_skyblue.png);
  background-size:cover;
  position:relative;
  animation: move-to-right2 2.7s linear forwards;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:20px;
}
@keyframes move-to-right2{
  0% {
    transform:rotateZ(0);
    left:-50px;
  }
  100% {
    transform:rotateZ(360deg);
    left:668px;/*イメージの右への動きの距離*/
  }
}

.p-container3{/*インデザイン*/
  width:750px;
  height:64px;
  outline:none;
  display:flex;
  align-items:center;
  border-bottom: 1px solid #CCC;
  margin-left: 10px;
}
.indesign{
  width:50px;
  height:50px;
  background-image:url("../../skill/images/ball_orange.png");
  background-size:cover;
  position:relative;
  animation: move-to-right3 2.5s linear forwards;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:20px;
}
@keyframes move-to-right3{
  0% {
    transform:rotateZ(0);
    left:-50px;
  }
  100% {
    transform:rotateZ(360deg);
    left:668px;/*イメージの右への動きの距離*/
  }
}

.p-container4{/*コーディング*/
  width:750px;
  height:64px;
  outline:none;
  display:flex;
  align-items:center;
  border-bottom: 1px solid #CCC;
  margin-left: 10px;
}
.coding{
  width:50px;
  height:50px;
  background-image:url("../../skill/images/ball_l-green.png");
  background-size:cover;
  position:relative;
  animation: move-to-right4 /*2.8*/3.1s linear forwards;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:20px;
}
@keyframes move-to-right4{
  0% {
    transform:rotateZ(0);
    left:-50px;
  }
  60% {
    transform:rotateZ(380deg);
    left:400px;
  }
	 /*▲▲行きすぎる動き */
/*  70% {
    transform:rotateZ(370deg);
    left:360px;
  }*/
  75% {
    transform:rotateZ(370deg);
    left:360px;
  }
	 /*▲▲ちょっと戻る動き */
  80% {
    transform:rotateZ(380deg);
    left:380px;
  }
  90% {
    transform:rotateZ(380deg);
    left:270px;
  }
	 /*▲▲ちょっと戻る動き */
  100% {
    transform:rotateZ(360deg);
    left:220px;/*イメージの右への動きの距離*/
  }
}

.p-container5{/*ワードプレス*/
  width:750px;
  height:64px;
  outline:none;
  display:flex;
  align-items:center;
  border-bottom: 1px solid #CCC;
  margin-left: 10px;
}
.wordpress{
  width:50px;
  height:50px;
  background-image:url("../../skill/images/ball_purple.png");
  background-size:cover;
  position:relative;
  animation: move-to-right5 2s linear forwards;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:20px;
}
@keyframes move-to-right5{
  0% {
    transform:rotateZ(0);
    left:-50px;
  }
  100% {
    transform:rotateZ(360deg);
    left:168px;/*イメージの右への動きの距離*/
  }
}

.p-container11{/*ドリームウェーバー*/
  width:750px;
  height:64px;
  outline:none;
  display:flex;
  align-items:center;
  border-bottom: 1px solid #CCC;
  margin-left: 10px;
}
.dreamwaver{
  width:50px;
  height:50px;
  background-image:url("../../skill/images/ball_momopink.png");
  background-size:cover;
  position:relative;
  animation: move-to-right11 2.3s linear forwards;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:20px;
}
@keyframes move-to-right11{
  0% {
    transform:rotateZ(0);
    left:-50px;
  }
  70% {
    transform:rotateZ(320deg);
    left:168px;/*イメージの右への動きの距離*/
  }
	100% {
    transform:rotateZ(360deg);
    left:250px;/*イメージの右への動きの距離*/
  }	
}

.p-container8{/*PDF*/
  width:750px;
  height:64px;
  outline:none;
  display:flex;
  align-items:center;
  border-bottom: 1px solid #CCC;
  margin-left: 10px;
}
.pdf{
  width:50px;
  height:50px;
  background-image:url("../../skill/images/ball_red.png");
  background-size:cover;
  position:relative;
  animation: move-to-right8 2.3s linear forwards;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:20px;
}
@keyframes move-to-right8{
  0% {
    transform:rotateZ(0);
    left:-50px;
  }
  100% {
    transform:rotateZ(360deg);
    left:500px;/*イメージの右への動きの距離*/
  }
}

.p-container9{/*ワード*/
  width:750px;
  height:64px;
  outline:none;
  display:flex;
  align-items:center;
  border-bottom: 1px solid #CCC;
  margin-left: 10px;
}
.word{
  width:50px;
  height:50px;
  background-image:url("../../skill/images/ball_blue.png");
  background-size:cover;
  position:relative;
  animation: move-to-right9 2s linear forwards;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:20px;
}
@keyframes move-to-right9{
  0% {
    transform:rotateZ(0);
    left:-50px;
  }
  100% {
    transform:rotateZ(360deg);
    left:430px;/*イメージの右への動きの距離*/
  }
}

.p-container10{/*エクセル*/
  width:750px;
  height:64px;
  outline:none;
  display:flex;
  align-items:center;
  border-bottom: 1px solid #CCC;
  margin-left: 10px;
}
.exel{
  width:50px;
  height:50px;
  background-image:url("../../skill/images/ball_kimidori.png");
  background-size:cover;
  position:relative;
  animation: move-to-right10 2s linear forwards;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:20px;
}
@keyframes move-to-right10{
  0% {
    transform:rotateZ(0);
    left:-50px;
  }
  100% {
    transform:rotateZ(360deg);
    left:430px;/*イメージの右への動きの距離*/
  }
}

.p-container6{/*アフィニティ パブリッシャー*/
  width:750px;
  height:64px;
  outline:none;
  display:flex;
  align-items:center;
  border-bottom: 1px solid #CCC;
  margin-left: 10px;
}
.Af-publisher{
  width:50px;
  height:50px;
  background-image:url("../../skill/images/ball_karehairo.png");
  background-size:cover;
  position:relative;
  animation: move-to-right6 2s linear forwards;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:20px;
}
@keyframes move-to-right6{
  0% {
    transform:rotateZ(0);
    left:-50px;
  }
  100% {
    transform:rotateZ(360deg);
    left:380px;/*イメージの右への動きの距離*/
  }
}

.p-container7{/*アフィニティ デザイナー*/
  width:750px;
  height:64px;
  outline:none;
  display:flex;
  align-items:center;
  border-bottom: 1px solid #CCC;
  margin-left: 10px;
}
.Af-designer{
  width:50px;
  height:50px;
  background-image:url("../../skill/images/ball_mizuiro.png");
  background-size:cover;
  position:relative;
  animation: move-to-right7 2s linear forwards;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:20px;
}
@keyframes move-to-right7{
  0% {
    transform:rotateZ(0);
    left:-50px;
  }
  100% {
    transform:rotateZ(360deg);
    left:410px;/*イメージの右への動きの距離*/
  }
}

.background{
	/*width: 750px;*/
	height:auto;
	display: flex;
	margin: 5px 10px;
	/*background-color: #f8f4e6*/
}
.box1{
	width: 150px;
	height: 50px;
	text-align: center;
	/*vertical-align: middle;*/
	line-height: 1.1;
	padding: 14px 0;
	color: #636161;
	background-color: #f2f2b0;
}
.box2{
	width: 150px;
	height: 50px;
	text-align: center;
	line-height: 1.1;
	padding: 8px 0;
	color: #636161;
	background-color: #fddea5;
}
.box3{
	width: 150px;
	height: 50px;
	text-align: center;
	line-height: 1.1;
	padding: 8px 0;
	color: #636161;
	background-color: #d6e9ca;
}
.box4{
	width: 150px;
	height: 50px;
	text-align: center;
	line-height: 1.1;
	padding: 14px 0;
	color: #636161;
	background-color: #bbc8e6;
}
.box5{
	width: 150px;
	height: 50px;
	text-align: center;
	line-height: 1.1;
	padding: 14px 0;
	color: #636161;
	background-color: #fdeff2;
}


/*========= 1文字ずつ出現させるためのCSS ===========*/
.eachTextAnime span{opacity: 0;
	font-size: 0.6em;
	color: #d69090;}/*#7ebeab*/
.eachTextAnime.appeartext span{ animation:text_anime_on 1s ease-out forwards; }
@keyframes text_anime_on {
  0% {opacity:0;}
  100% {opacity:0.8;}
}
/*======= 1文字ずつ出現させるためのCSS 終わり=========*/

@media only screen and (max-width: 1280px){
body{
background: #333333;
}
}
@media only screen and (max-width: 960px){
body{
background: #666666;
}
}
@media (max-width: 640px) {
  .item {
    width: 100%;
}
}


/*.daytime{
	font-size: 0.7em;
	text-align: left;
}*/