@charset "UTF-8";
/*fonts*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;600&display=swap');
/* CSS Remedy */
/* base */
html {}
body {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
  color: #000;
}

a{color: #515151;}
a:hover{color: #000; }

#body-ai{
	position: relative;
  	width: 100%;
  	min-height: 100vh;
	padding: 2.0rem;
	background: url("https://photoshop2.five-doril.website/images/ps-bg.png") no-repeat right top /contain;
}

h1 {
	display:flex;
	justify-content: center;
	align-items: center;
	text-align: center;
}

h1 span{
  margin-left: 1rem;
  font-size: 90%;
}

.tlt{
	display:flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	font-weight: bold;
	font-size: 20px;
	letter-spacing:2px;
	margin-bottom: 3rem;
}


ol {
  padding: 0;
  counter-reset: list;
  list-style-type: none;
}

ol li {
  position: relative;
  line-height: 30px;
  margin: 7px 0 7px 40px;
  padding-left: 10px;
  color: #2A2A2A;
}
ol li:before {
  counter-increment: list;
  content: counter(list);
  position: absolute;
  left: -35px;
  width: 30px;
  height: 30px;
  background: #67b1c2;
  color: #000000;
  border: 2px solid #000;
  text-align: center;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;      /* 縦方向の中央揃え */
  justify-content: center;   /* 横方向の中央揃え */
  font-weight: bold;
}

ul li{
	line-height: 2;
}

hr{
	height: 0;
  margin: 2rem 0;
  padding: 0;
  border: 0;
border-top: 2px solid #000;
}

h2{
	margin-bottom: 1rem;
}

h3{
	margin-top: 2rem;
}

.inner {  
  margin: 0 2rem 3rem;
}

.inner p{
  margin-top:20px;
}

.center{
	text-align: center;
}

footer {
  text-align: center;
  background: #2A2A2A;
  padding: 20px;
  margin-top: 3rem;
}
footer p {
  color: #fff;
}
footer p span {
  font-weight: bold;
  font-size: 120%;
}

#youtube {
  position: relative;
  padding-top:64.94%;
}

#youtube iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

header h2{
  padding-bottom: 20px;
}

/* MediaQuery */

@media screen and (max-width: 600px) {
html {font-size: 80%;}
	footer p small{
		display: block;
	}
}