@import url('https://fonts.googleapis.com/css2?family=Rubik+Doodle+Shadow&display=swap');
              *            { box-sizing: border-box; }
           body            { background: repeating-linear-gradient(90deg, #f0f0f0 0, #f0f0f0 5%, transparent 0, transparent 50%) 0 / 15px 15px, repeating-linear-gradient(180deg, #f0f0f0 0, #f0f0f0 5%, transparent 0, transparent 50%) 0 / 15px 15px; }
             h1            { font-family: 'Rubik Doodle Shadow', sans-serif; font-size: 60px; text-align:center; color:#000000; line-height:normal;}
		     h2            { font-family: 'Rubik Doodle Shadow', sans-serif; font-size: 50px; text-align:center; color:#000000; line-height:normal;}
			 p             { font-family: Arial; font-size: 30px; text-align:center; color:#000000;}
	    .social            { width:100%; height:140px; background-color:#5a5d9d;  padding-top:20px; padding:10px; margin-bottom:15px; margin-top:33px;}
    .social img            { width:116px; }
		.number            { width:100%; height:140px; background-color:#5a5d9d; padding-top:20px;  padding-bottom:20px; margin-bottom:15px; margin-top:33px;}
	.number img            { width:460px; }
        .mylogo            { width:100%; height:220px;padding-left:10px; margin-top:31px;}
	.mylogo img            { width:486px;}
		   #pad            { margin-top:0px; }
     .rightside            { width:100%; height:100%; border-radius: 1em; border: 10px solid #eaf3fd; background-color:#eaf3fd; background-size: cover; }
	  label                { font-color:#ffffff !important; color:#ffffff !important; font-family: Arial !important; font-size:25px !important; text-align:left !important; }
	 .spacer               { padding-top:3%; padding-left:10%; padding-right:10%; }
	 .contact-sp           { width:100%; height:auto; font-size:60px; Color: #ffffff; text-align:center; font-family: 'Rubik Doodle Shadow', sans-serif; padding-bottom:18px; }
	  button               { font-size: 25px !important; width:100% !important; margin-top:20px; margin-bottom:0px !important; font-weight:bold !important; }
	 .mysubmit             { margin-top:20px !important; margin-bottom:0px !important;}
	 .myrating             { width:600px; margin:0 auto; margin-top:20px; }
	 .myrating img         { width:100%; }
 	 #box123               { height:500px !important;}
.grid-container            { margin: 30px auto; width: 100%; height: auto; min-height:50px; display: grid; grid-auto-columns: 1fr;  gap: 1em;  grid-template-areas: 'one one one ' 'three three four ' 'ten ten ten ' 'five six seven ' 'two eight nine' }
     .grid-item            { display:block;  color: white; position:relative;}

.grid-item:nth-child(1)    { grid-area: one; height:auto;}
.grid-item:nth-child(2)    { grid-area: two; background-color: #3c4c86; height:210px;  margin-top:20px;}
.grid-item:nth-child(3)    { grid-area: three; border-radius: 1em; background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab); background-size: 400% 400%; animation: gradient 15s ease infinite;	height: auto; text-align:center; font-size:20px;}
.grid-item:nth-child(3) p  { font-size:14px !important; }
.grid-item:nth-child(4)    { grid-area: four; border-radius: 1em; background-color: #f6511d; }
.grid-item:nth-child(5)    { grid-area: five; border-radius: 1em;}
.grid-item:nth-child(6)    { grid-area: six; border-radius: 1em; }
.grid-item:nth-child(7)    { grid-area: seven; border-radius: 1em; }
.grid-item:nth-child(8)    { grid-area: eight; background-color: #5a5d9d; height:210px; margin-top:20px;}
.grid-item:nth-child(9)    { grid-area: nine;  background-color: #5a5d9d; height:210px; margin-top:20px; }
.grid-item:nth-child(10)   { grid-area: ten;  }
@keyframes gradient        { 0% { background-position: 0% 50%;	}	50% { background-position: 100% 50%; }	100% { background-position: 0% 50%;	}
}

@media only screen and (min-device-width :2500px) and (max-device-width :2560px) { 
.grid-container { margin: 30px auto; width: 60%; height: auto; min-height:50px; display: grid; grid-auto-columns: 1fr;  gap: 1em;  grid-template-areas: 'one one one ' 'three three four ' 'ten ten ten ' 'five six seven ' 'two eight nine'  }
.rightside  { width:100%;  object-fit: fill; }
.spacer     { padding-top:4%; padding-left:10%; padding-right:10%; }
 button     { font-size: 25px !important; width:100% !important; margin-top:15px; font-weight:bold !important; }
.contact-sp { font-size:60px; Color: #ffffff; text-align:center; font-family: 'Rubik Doodle Shadow', sans-serif; padding-bottom:60px; }
.myrating   { width:700px; margin:0 auto; margin-top:20px; }
.myrating  img { width:100%; }
#box123     { height:480px !important;}
}
@media only screen and (min-device-width :1919px) and (max-device-width :1920px) { 
.grid-container { width:80%; height: 100vh;}
.rightside  { width:100%; }
.spacer     { padding-top:4%; padding-left:10%; padding-right:10%; }
 button     { font-size: 25px !important; width:100% !important; margin-top:15px; font-weight:bold !important; }
.contact-sp { font-size:60px; Color: #ffffff; text-align:center; font-family: 'Rubik Doodle Shadow', sans-serif; padding-bottom:60px; }
.myrating   { width:700px; margin:0 auto; margin-top:20px; }
.myrating  img { width:100%; }
#box123     { height:480px !important;}
}
@media only screen and (min-device-width :1550px) and (max-device-width :1600px) { .grid-container { width:90%; height: 100vh;}
.rightside  { width:100%; }
.spacer     { padding-top:2.5%; padding-left:6%; padding-right:5%; }
.myrating   { width:300px; bottom:-40px !important; }
.contact-sp { font-size:60px; Color: #ffffff; text-align:center; font-family: 'Rubik Doodle Shadow', sans-serif; padding-bottom:50px; }
.social     { height:130px; margin-top:33px;}
.social img { width:110px; }
.number { height:130px; margin-top:33px;}
.myrating   { width:700px; margin:0 auto; margin-top:20px;  }
.myrating  img { width:100%; }
#box123 {height:500px !important;}
}
@media only screen and (min-device-width :1368px) and (max-device-width :1440px) { .grid-container { width:90%; height: 100vh;}
.rightside  { width:100%; }
h1 { font-size: 55px; text-align:center; color:#000000; line-height:normal;}
h2 { font-size: 40px; text-align:center; color:#000000; line-height:normal;}
label { font-color:#ffffff !important; color:#ffffff !important; font-family: Arial !important; font-size:20px !important; }
.contact-sp { font-size:50px; padding-bottom:40px; }
.spacer { padding-top:3%; padding-left:5%; padding-right:5%; }
.social { height:120px; margin-top:33px;}
.social img { width:99px; }
.number { height:95px; margin-top:30px;}
 button   { font-size: 20px !important; width:100% !important; margin-top:10px; font-weight:bold !important; }
.mysubmit { margin-top:10px !important; }
.myrating   { width:700px; margin:0 auto; margin-top:20px; }
.myrating  img { width:100%; }
#box123 {height:500px !important;}
.grid-item:nth-child(2)    { grid-area: two;   background-color: #3c4c86; height:190px;  margin-top:20px;}
.grid-item:nth-child(8)    { grid-area: eight; background-color: #5a5d9d; height:190px;  margin-top:20px;}
.grid-item:nth-child(9)    { grid-area: nine;  background-color: #5a5d9d; height:190px;  margin-top:20px;}
}
@media only screen and (min-device-width :1360px) and (max-device-width :1366px) { .grid-container { width:90%; height: 100vh;}
.rightside  { width:100%; }
h1 { font-size: 40px; text-align:center; color:#000000; line-height:normal;}
h2 { font-size: 30px; text-align:center; color:#000000; line-height:normal;}
label { font-color:#ffffff !important; color:#ffffff !important; font-family: Arial !important; font-size:20px !important; }
.contact-sp { font-size:50px; padding-bottom:31px; }
.spacer { padding-top:2%; padding-left:5%; padding-right:5%; }
.social { height:120px; margin-top:33px;}
.social img { width:93px; }
.number { height:115px; margin-top:28px;}
.myrating   { width:500px; margin:0 auto; margin-top:20px;  }
.myrating  img { width:100%; }
#box123 {height:500px !important;}
.grid-item:nth-child(2)    { grid-area: two;    background-color: #3c4c86; height:180px;  margin-top:20px;}
.grid-item:nth-child(8)    { grid-area: eight;  background-color: #5a5d9d; height:180px;  margin-top:20px;}
.grid-item:nth-child(9)    { grid-area: nine;   background-color: #5a5d9d; height:180px;  margin-top:20px;}
}
@media only screen and (min-device-width :1200px) and (max-device-width :1280px) { .grid-container { width:90%; height: 100vh;}
.rightside  { width:100%; }
h1 { font-size: 48px; text-align:center; color:#000000; line-height:normal;}
h2 { font-size: 30px; text-align:center; color:#000000; line-height:normal;}
label { font-color:#ffffff !important; color:#ffffff !important; font-family: Arial !important; font-size:20px !important; }
.contact-sp { font-size:45px; padding-bottom:34px; }
 label  { font-size:20px !important; text-align:left !important; }
.spacer { padding-top:2%; padding-left:5%; padding-right:5%; }
.social { height:106px; margin-top:30px;}
.social img { width:85px; }
 button     { font-size: 18px !important; width:100% !important; margin-top:0px; font-weight:bold !important; }
.mysubmit   { margin-top:0px !important; }
.number { height:106px; margin-top:30px;}
.myrating   { width:500px; margin:0 auto; margin-top:20px; }
.myrating  img { width:100%; }
#box123 {height:580px !important;}
.grid-item:nth-child(2)    { grid-area: two;   background-color: #3c4c86; height:170px;  margin-top:20px;}
.grid-item:nth-child(8)    { grid-area: eight; background-color: #5a5d9d; height:170px;  margin-top:20px;}
.grid-item:nth-child(9)    { grid-area: nine;  background-color: #5a5d9d; height:170px;  margin-top:20px;}
}
@media (max-width: 1100px) { 
.grid-container { grid-template-areas: 'one' 'three' 'four' 'ten' 'five' 'six' 'seven' 'two' 'eight' 'nine'; width:90%; height: 100vh;}
.social { max-width:483px; margin: 0 auto; margin-bottom:20px; }
.social img { width:115px; }
.number { max-width:483px; margin: 0 auto; margin-bottom:20px; }
.mylogo { width:510px; height:169px; padding-left:10px; margin: 0 auto;}
.mylogo img { width:483px;}
.rightside { width:100%; }
.spacer { padding-top:3%; padding-left:5%; padding-right:5%; }
 button     { font-size: 25px !important; margin-bottom:120px !important; font-weight:bold !important; }
.mysubmit   { margin-top:20px !important; margin-bottom:120px !important;}
.myrating   { width:500px; margin:0 auto; margin-top:20px; }
.myrating  img { width:100%; }
#box123 {height:400px !important;}
.grid-item:nth-child(2)    { grid-area: two;   background-color: #3c4c86; height:150px;  margin-top:50px;}
.grid-item:nth-child(8)    { grid-area: eight; background-color: #5a5d9d; height:140px; margin-top:20px;}
.grid-item:nth-child(9)    { grid-area: nine;  background-color: #5a5d9d; height:140px; margin-top:20px; }
}
@media only screen and (min-device-width :610px) and (max-device-width :700px) { 
#box123 {height:450px !important;}
}
@media only screen and (min-device-width :320px) and (max-device-width :600px) { 
.grid-container { grid-template-areas: 'one' 'three' 'four' ' ten' 'five' 'six' 'seven' 'two' 'eight' 'nine'; width:96%; height: 100vh;}
.rightside { width:100%;}
.spacer { padding-top:3%; padding-left:5%; padding-right:5%; }
.contact-sp { width:100%; height:auto; font-size:70px; Color: #ffffff; text-align:center; font-family: 'Rubik Doodle Shadow', sans-serif; padding-bottom:30px; }
 button     { font-size: 25px !important; margin-bottom:120px !important; font-weight:bold !important; }
.mysubmit   { margin-top:20px !important; margin-bottom:120px !important;}
.myrating   { width:520px; margin:0 auto; margin-top:20px; margin-bottom:20px; }
.myrating  img { width:100%; }
#box123 {height:450px !important;}
.grid-item:nth-child(2)    { grid-area: two;   background-color: #3c4c86; height:150px;  margin-top:50px;}
.grid-item:nth-child(8)    { grid-area: eight; background-color: #5a5d9d; height:140px; margin-top:20px;}
.grid-item:nth-child(9)    { grid-area: nine;  background-color: #5a5d9d; height:140px; margin-top:20px; }
}