@charset "UTF-8";
html {font-size: 100%;}

a{text-decoration: none;}
body{background:black;}
/* ---------fontの指定-------------- */
h2{font-size: 50px;color: tan;text-align: center;font-family: "Sawarabi Mincho";}
p{font-size: 20px;color: tan;text-align: center;font-family: "Sawarabi Mincho";}
h2{position: relative;top: 50px;z-index: 100;}
p{margin-top: 30px;}
main{text-align: center}
.p_main{width:800px;margin-top:40px;}
.p_a,.p_c{width: 150px; height: 150px;border-radius: 50%;margin-top: 10px;}
.modoru{font-size: 20px;color: tan;
  padding-top: 0px;padding-bottom: 0px;text-align: center;font-family: "Sawarabi Mincho";}
.tojiru{width: 70px;height: 70px;margin-top: 10px;}
aside{display: flex;justify-content: space-around;
      text-align: center;margin-top: 0px;}
.tojiru:hover {cursor: pointer;transform: scale(0.5,0.5);}
.tojiru{transition:-webkit-transform 0.3s;transition: transform 1s;}
.tojiru:hover {opacity: 20%;}
/* -------Pの回転--------------------------------- */
.p_a,.p_c{animation: rotation-s2 10s linear infinite; /* ●秒で一周 */
  height: 100px;  width: 100px;border-radius:50%; /* 線色_線幅_線の丸み */
	 right: calc(50% - 5px); /* 位置調整 線幅の半分ずらす */
    top: calc(50% - 5px); /* 位置調整 線幅の半分ずらす */;}
footer{height:60px;background: black;}

/* -------slideの指定--------------------------------- */
.slide{position:relative;height:550px;top:100px;right:265px;z-index: -10;}
.slide img {position:absolute;
	          opacity:0;
	          transition:all 1s ease-in-out;
	          height:350px;
	          object-fit:contain;}
#slide_speed {transform:rotateY(180deg);margin: 150px auto;}

/* ---------レスポンシブ-------------------------------------------------- */
/* ---------1500px以下-------------- */
@media screen and ( max-width :1500px )
{
h2{top: 50px;font-size: 40px;z-index: 100;}
p{font-size: 20px;margin-top: 30px;}
.p_a,.p_c{width: 90px; height: 90px;
  border-radius: 50%;margin-top:10px;}
.tojiru{width: 60px;height: 60px;margin-top:10px;}
}
/* ---------800px以下-------------- */
@media screen and ( max-width :800px )
{
h2{top:50px;font-size: 30px;z-index: 100;}
p{font-size: 20px;margin-top: 20px;}
.p_a,.p_c{width: 100px; height: 100px;border-radius: 50%;margin-top: 0px;}
.p_b{width: 50px;height:50px;margin-top: 3px;}
aside{margin-top: 10px;}
/* -------slideの指定--------------------------------- */
.slide{height:450px;top:100px;right:270px;}
.slide img {height:350px;}
}

/* ---------450px以下-------------- */
@media screen and ( max-width :450px)
{
h2{font-size: 30px;top: 30px;}
p{font-size: 15px;margin-top:10px;}
.p_a,.p_c{width: 60px; height: 60px;border-radius: 50%;margin-top:10px;}
.modoru{font-size: 12px;}
.p_b{width: 30px;height:30px;margin-top: 5px;}
.tojiru{width: 40px;height: 40px;margin-top: 10px;}
aside{margin-top: -100px;}
/* -------slideの指定--------------------------------- */
.slide{position:relative;top:70px;right:150px;z-index: -10;}
.slide img {position:absolute;
	          opacity:0;
	          transition:all 1s ease-in-out;
	          height:220px;width: 317px;
	          object-fit:contain;}
}

/* ---------320px以下-------------- */
@media screen and ( max-width :320px)
{
aside{margin-top: -150px;}
}