@charset "utf-8";
/* CSS Document */

article {
	width: 100%;
	background-attachment: fixed;
	background-image: url("../img/bk.png");
	background-color:#E2E2E2;
	font-size: 1.6rem;
}
article a:link,article a:hover,article a:focus,article a{
	text-decoration: underline;
	color: blue;
}
article .bk{
	width: 400px;
	background-color: #fff;
	margin: 0 auto;
	padding-bottom: 50px;
	box-shadow: 0 0 20px 0  hsla(0,0%,0%,0.30);
}
article section{
	width: 100%;
	padding: 50px 0;
}
.container {
      position: relative;
      width: 100%;
      height: 60px;
      background-color: #333;
      overflow: hidden;
      display: flex;
      align-items: center;
      margin-bottom: 50px;
    }

    .marquee {
      display: flex;
      white-space: nowrap;
      animation: scrollSteps 10s steps(40, end) infinite;
    }

    article h2 {
      color: #fff;
      padding-right: 25rem; /* テキストの間隔 */
		 padding-top: 100px;
 	 margin-top:-100px;
      white-space: nowrap;
    }

    @keyframes scrollSteps {
      0% {
        transform: translateX(0%);
      }
      100% {
        transform: translateX(-50%);
      }
    }

@media screen and (max-width: 768px) {
	article {
		background: none;
	}
	article .bk{
		width: 100%;
		box-shadow: none;
	}
	#gFooter{
		margin-top: 0;
	}
}
/*-------------------------

#top 

--------------------------*/
#top {
	text-align: center;
}
#top h1{
	width: 90%;
	margin: 0 auto 50px;
}
#top h1 img{
	width: 100%;
}
#top p{
	margin: 50px auto;
}

#top ul li:not(:last-child){
	margin-bottom: 20px;
}

/*-------------------------

#profile 

--------------------------*/

#profile .content,#works .content{
	width: 85%;
	margin: 0 auto;
}
#profile p{
	margin-bottom: 30px;
}
#profile dl {
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 30px;
	line-height: 2;
}
#profile dl dt{
	width: 80px;
}
#profile dl dd{
	width: calc(100% - 80px);
}
#profile ul{
	margin: 0 auto 50px;
	list-style: disc;
	list-style-position: inside;
}

#profile ul li:not(:last-child){
	margin-bottom: 20px;
}
@media screen and (max-width: 768px) {
	#profile .content,#works .content{
		width: 95%;
	}
}
/*-------------------------

#works 

--------------------------*/
#works h3{
	margin-bottom: 20px;
	text-align: center;
	 padding-top: 100px;
 	 margin-top:-100px;
}
#works h3::before,#works h3::after{
	content: "★";
}
#works ol{
	width: 70%;
	margin: 0 auto;
	counter-reset: count 0;
	line-height: 1.5;
}
#works ol li {
	padding-left: 1em;
	text-indent: -1.5em;
}
#works ol li:before {
	content: "その "counter(count) ". ";
	counter-increment: count 1;
}

#works ul{
	margin: 50px auto ;
}
#works ul li:not(:last-child){
	margin-bottom: 80px;
}