@charset "UTF-8";
html {font-size: 100%;}
header{width: auto;height: 620px;}
a {text-decoration: none;}
main{position: absolute;width: auto;top:10px}
/* ----- タイトル----- */
.title{display: none;}

/* -------slideの指定--------------------------------- */
.slide_mobile{position:relative;top:30px;z-index: -10;}
.slide_mobile img {position:absolute;
	          opacity:0;
	          transition:all 1s ease-in-out;
	          height:580px;
	          object-fit:contain;}
/* ----- aside------------------------------------------------ */
aside{width: 100%;height: 300px;background: white;margin-top: 10px;}
/* ----- jyuliyan.com の文字-------------------------------- */
.jyuliyan{font-family: 'Playfair Display', serif;text-align: center;
			     font-size:40px;padding-top: 0px;color:tan;}
/* ----- 写真-------------------------------- */
.p1,.p2,.p3,.p4{position: absolute;border-radius: 50%;cursor: pointer;}
.p1{width: 200px;height: 200px;top: 70%;left:5%;}
.p2{width: 100px;height: 100px;top: 55%;left:20.5%;}
.p3{width: 140px;height: 140px;top: 8%;right:15%;}
.p4{width: 130px;height: 130px;top: 65%;right:5%;}
/* ----- hover ----- */
.p1:hover {transform: scale(2.0) rotate(90deg);transition-duration: 0.5s;opacity: 0.0;}
.p2:hover {transform: scale(2.0) rotate(90deg);transition-duration: 0.5s;opacity: 0.0;}
.p3:hover {transform: scale(2.0) rotate(90deg);transition-duration: 0.5s;opacity: 0.0;}
.p4:hover {transform: scale(2.0) rotate(90deg);transition-duration: 0.5s;opacity: 0.0;}

/* ----- indexへ移動 ----- */
.to_index{font-family: 'Playfair Display', serif;text-align: center;
			    font-size: 20px;color:dimgray;}
.maru{width: 90px;height:90px;border-radius: 50%;}
.maru:hover {transform: scale(2.0) rotate(90deg);transition-duration: 0.5s;opacity: 0.0;}
/* ----- footer----------------------------------------------- */
footer{width: 100%;height:100px;text-align: center;background: white;}
#slide_speed {display: none;transform:rotateY(180deg);margin:20px auto;}

.maru{animation: rotation-s2 10s linear infinite; /* ●秒で一周 */
  height: 100px;  width: 100px;border-radius:50%; /* 線色_線幅_線の丸み */
	 right: calc(50% - 5px); /* 位置調整 線幅の半分ずらす */
    top: calc(50% - 5px); /* 位置調整 線幅の半分ずらす */;}


/* ---------レスポンシブ-------------------------------------------------- */
/* ---------1800px以下
@media screen and ( max-width :1800px )
{

  .jyuliyan{font-size:40px;padding-top: 0px;color:IndianRed;}

	.p1{width: 170px;height: 170px;top: 73%;left:5%}
	.p2{width: 100px;height: 100px;top: 70%;left:30%;}
	.p3{width: 100px;height: 100px;top: 3%;right:10%;}
	.p4{width: 130px;height: 130px;top: 75%;right:8%;}
}-------------- */

/* ---------1500px以下-------------- */
@media screen and ( max-width :1500px )
{
	/* -------slideの指定--------------------------------- */
	.slide_mobile img {object-fit:contain;height:480px;}
  /* ----- jyuliyan.com の文字-------------------------------- */
  .jyuliyan{font-size:40px;margin-top: -170px;color:darkgreen;}
	/* ----- 写真-------------------------------- */
	.p1{width: 160px;height: 160px;top: 50%;left:5%}
	.p2{width: 70px;height: 70px;top: 80%;left:25%;}
	.p3{width: 140px;height: 140px;top: 15%;right:2%;}
	.p4{width: 100px;height: 100px;top: 57%;right:15%;}
	/* ----- aside------------------------------------------------ */
	aside{height:200px;margin-top: 10px;}
	footer{height:30px;margin-top: 20px;}
}
/* ---------1400px以下-------------- */
@media screen and ( max-width :1400px )
{
	/* -------slideの指定--------------------------------- */
	.slide_mobile img {height:400px;}
	/* ----- jyuliyan.com の文字-------------------------------- */
	.jyuliyan{font-size:40px;margin-top: -250px;color:tan;}

	/* ----- 写真-------------------------------- */
	.p1{width: 160px;height: 160px;top: 25%;left:5%}
	.p2{width: 100px;height: 100px;top: 55%;left:25%;}
	.p3{width: 100px;height: 100px;top: 5%;right:5%;}
	.p4{width: 130px;height: 130px;top: 55%;right:20%;}
}
/* ---------1200px以下-------------- */
@media screen and ( max-width :1200px )
{
  /* ----- jyuliyan.com の文字-------------------------------- */
  .jyuliyan{font-size:40px;padding-top: 0px;color:IndianRed;}
	/* ----- 写真-------------------------------- */
	.p1{width: 100px;height: 100px;top: 30%;left:5%}
	.p2{width: 50px;height: 50px;top: 65%;left:20%;}
	.p3{width: 70px;height: 70px;top: 5%;right:5%;}
	.p4{width: 180px;height: 180px;top: 55%;right:15%;}
}
/* ---------1000px以下-------------- */
@media screen and ( max-width :1000px )
{
  /* ----- jyuliyan.com の文字-------------------------------- */
  .jyuliyan{font-size:40px;padding-top: 0px;color:darkorange;}
	/* ----- 写真-------------------------------- */
	.p1{width: 130px;height: 130px;top: 27%;left:5%}
	.p2{width: 100px;height: 100px;top: 65%;left:20%;}
	.p3{width: 70px;height:70px;top: 5%;right:5%;}
	.p4{width: 130px;height: 130px;top: 38%;right:10%;}
	/* -------slideの指定--------------------------------- */

}
/* ---------800px以下-------------- */
@media screen and ( max-width :800px )
{
  /* ----- jyuliyan.com の文字-------------------------------- */
	.jyuliyan{font-size:30px;padding-top:40px;color:IndianRed;}
	/* ----- 写真-------------------------------- */
	.p1{width: 80px;height: 80px;top: 400px;left:18%;}
	.p2{width: 60px;height: 60px;top: 80%;left:10%;}
	.p3{width: 100px;height: 100px;top:440px;right:10%;}
	.p4{width: 50px;height: 50px;top: 80%;right:10%;}
  /* -------slideの指定--------------------------------- */
    /* -.slide_pc{display: none;}------------------ */
  .slide_mobile{position:relative;top:-30px;z-index: -10;}
  .slide_mobile img {height:500px;}
  /* ----- aside------------------------------------------------ */
  aside{height: 300px;margin-top: -120px;}
	footer{height:30px;margin-top:0px;}
}

/* ---------600px以下-------------- */
@media screen and ( max-width :600px )
{
	/* ----- タイトル----- */
  .title{z-index: 1000;font-family: 'Playfair Display', serif;
        font-style: italic;display: block;}
	.title{margin-top:-10px;}

	.y2022{font-size: 30px;color:#33CC00;margin-left: 10%;}
  .A{font-size: 40px;color:#33CC00;margin-top: -40px;margin-left: 75%;}
	.happy{font-size:60px;color:#FF6600;margin-top: -30px;margin-left: 30%;}
	.n{font-size: 40px;color:#FF6600;}
	.nyaw{font-size: 60px;color:#CCCC99;margin-top: -28px;margin-left: 23%;}
	.year{font-size: 60px;color:#FF3399;margin-top: -23px;margin-left: 18%;}
  /* ----- jyuliyan.com の文字-------------------------------- */
	.jyuliyan{font-size:30px;padding-top:10px;color:tan;}
	/* ----- 写真-------------------------------- */
	.p1{width: 60px;height: 60px;top: 470px;left:45%;}
	.p2{width: 60px;height: 60px;top: 80%;left:10%;}
	.p3{width: 100px;height: 100px;top: 3%;right:5%;}
	.p4{width: 50px;height: 50px;top: 70%;right:5%;}
  /* -------slideの指定--------------------------------- */
  .slide_mobile{position:relative;top:210px;}
  .slide_mobile img {height:290px;}
  /* ----- aside------------------------------------------------ */
  aside{height: 160px;margin-top:140px;}
  /* ----- 写真-------------------------------- */
	.maru{width: 50px;height:50px;}
}
/* ---------400px以下-------------- */
@media screen and ( max-width :400px )
{
/* -------slideの指定--------------------------------- */
.slide_mobile{position:relative;top:0px;z-index: -10;}
.slide_mobile img {object-fit: cover;height:230px;}
/* ----- タイトル-------------------------------- */
.title{margin-top:170px;}
.y2022{font-size: 40px;color:white;margin-left: 20%;}
.A{font-size: 35px;color:tan;margin-top: -23px;margin-left: 80%;}
.happy{font-size: 60px;color:#FF3399;margin-top: -25px;margin-left: 38%;}
.n{font-size: 25px;color:#FF3399;}
.nyaw{font-size: 60px;color:#33CC00;margin-top: -20px;margin-left: 50%;}
.year{font-size: 60px;color:#FF6600;margin-top: -20px;margin-left: 55%;}

/* ----- 写真-------------------------------- */
	.p1{width: 60px;height: 60px;top: 55%;left:3%;}
	.p2{width: 50px;height: 50px;top: 80%;left:10%;}
	.p3{width: 60px;height: 60px;top: 55%;right:3%;}
	.p4{width: 50px;height: 50px;top: 80%;right:10%;}
	/* ----- aside------------------------------------------------ */
	aside{width: 100%;height: 50px;margin-top: -170px;}
	/* ----- jyuliyan.com の文字-------------------------------- */
	.jyuliyan{font-size:20px;padding-top: 50px;color:tan;}
	/* ----- 写真-------------------------------- */
	/* ----- indexへ移動 ----- */
	.to_index{font-size: 15px;color:dimgray;}
	.maru{width: 80px;height:80px;}
	/* ----- footer----------------------------------------------- */
	footer{height:100px;margin-top: 150px;}
	#slide_speed {transform:rotateY(180deg);margin:20px auto;}
}
/* ---------320px以下-------------- */
@media screen and ( max-width :320px )
{
/* -------slideの指定--------------------------------- */
.slide_mobile img {height:180px;}
/* ----- タイトル----- */
.title{margin-top:145px;}
	.y2022{font-size: 25px;margin-top: -10px;margin-left: 15%;}
        .A{font-size: 30px;color:tan;margin-top: -20px;margin-left: 105%;}
	.happy{font-size: 40px;margin-top: -20px;margin-left: 67%;}
	.nyaw{font-size: 40px;margin-top: -15px;margin-left: 77%;}
        .n{font-size: 20px;}
	.year{font-size: 40px;margin-top: -15px;margin-left: 78%;}
	/* ----- 写真-------------------------------- */
	.p1{width: 50px;height: 50px;top: 62%;left:3%;}
	.p2{width: 40px;height: 40px;top: 80%;left:15%;}
	.p3{width: 50px;height: 50px;top: 62%;right:3%;}
	.p4{width: 40px;height: 40px;top:80%;right:15%;}
	/* ----- aside------------------------------------------------ */
	aside{width: 100%;height: 50px;margin-top: -330px;}
	/* ----- jyuliyan.com の文字-------------------------------- */
	.jyuliyan{font-size:16px;padding-top: 17px;color:tan;}
	/* ----- 写真-------------------------------- */
	/* ----- indexへ移動 ----- */
	.to_index{font-size: 13px;color:dimgray;}
	.maru{width: 70px;height:70px;}
	/* ----- footer----------------------------------------------- */
	footer{height:100px;margin-top: 150px;}
	#slide_speed {transform:rotateY(180deg);margin:20px auto;}
}