html {
  font-family: "Kiwi Maru", serif;
  
  font-style: normal;
}

div{
max-width:1280px;
margin-right:auto;
margin-left:auto;
}
  
.top{
  margin-top:3em;
  text-align:center;
  font-size: 150%;
}
        
h1{
font-size:200%
}

.coment{
font-size:45%;
}

footer{
text-align:center;
}
h2{
  margin-top:1em;
  font-weight: bold;
  padding:0;
  border-bottom: solid 3px #82cddd;
}

h1,tr,th{
text-align:left;
}

.nav{
  display:grid;
  grid-auto-columns: 1fr;
  grid-auto-flow: column;
  grid-template-rows:1em;
  gap:4em;
}
.nav li a{
display:grid;
color:#fff;
align-items: center;
justify-content: center;
height: 100%;
}
.nav li{
background-color:#82cddd;
box-shadow:0 0 20px 20px #82cddd; 
list-style:none;
}
ul{
padding:0;
margin:3em;
}
ul a{
color:#000;
}
li a:hover{
text-decoration:none;
opacity:0.7;
}

th{
width:100px;
padding:15px;
}
td{
width:500px;
padding:15px
}
td a{
pointer-events: none;
}
h3{
 background: linear-gradient(transparent 70%, #ffa3d1 70%);
 width:200px;
margin:20px;
}
h4{
 background: linear-gradient(transparent 70%, #ffa3d1 70%);
 width:500px;
margin:20px;
}
.btn{
  display: block;
  background: #82cddd;
  color: #fff;
  font-size: 120%;
  text-decoration:none;
  text-align:center;
  border-radius: 10px;
  margin-top: 32px;
  width:35%;
}
.btn1{
  border-radius: 6px;
  margin-top: 32px;
  margin-left: auto;
  margin-right: auto;
  padding-top: 20px;
  padding-bottom: 20px;
  width: 280px;
  display: block;
  letter-spacing: 0.05em;
  background: #82cddd;
  text-decoration:none;
  text-align:center;
  color: #fff;
  font-weight: bold;
  font-size: 1em;
}
.btn1:disabled{
background:#ccc;
}
.tel a:hover{
opacity:0.7;
}
.lesson{
padding:0;
margin:0;
}
.first-letter:first-letter{
font-size:2em;
color:#0000ff;
}
.border{
border-bottom:double 5px #ffa3d1;
width:60%;
}
.bubble{
position:relative;
padding-left:1.2em;
line-height:1.4;
}
.bubble:before{
font-family:"Font Awesome 5 Free";
content:"\f075";
font-weight:900;
position:absolute;
font-size:1em;
left:0;
top:0;
color:#0000ff;
}
.overview{
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-flow:column;
  grid-template-rows:1fr 1fr;
  gap:0.5em;
  max-width:1280px
  width:100%;
  height:100%
 }
.info{
float:right;
margin:1em;
}
.price{
margin-left:2em;
}
.box{
margin:0;
padding:1em;
width:90%;
}
.box h3{
margin:0;
padding:0;
}
.flow{
border: #000 1px solid;
margin-bottom:3em;
margin-left: auto;
margin-right: auto;
padding:10px;
max-width:600px;
}
.flow h3{
margin:0;
padding:10px;
}
.flow p{
margin:0;
padding:10px;
}
.arrow{
text-align:center;
font-size:150%;
}
.camera{
margin: auto;
max-width:600px;
}
address {
  font-style: normal;
}
.footer {
  padding: 2rem;
  font-size: 15px;
  color: #fff;
  background: #82cddd;
  margin-top:50px;
}
.footer__address {
 margin-bottom: 2rem;
}
.footer__address a {
color: #fff;
text-decoration: none;
pointer-events: none;
}

img{
max-width:100%;
}
iframe{
max-width:100%;
}
.Form{
  margin-top: 80px;
  margin-left: auto;
  margin-right: auto;
  max-width: 720px;
}
.Form-Item {
  border-top: 1px solid #ddd;
  padding-top: 24px;
  padding-bottom: 24px;
  width: 100%;
  display: flex;
  align-items: center;
}
.Form-Item:nth-child(5) {
  border-bottom: 1px solid #ddd;
}
.Form-Item-Label{
  width: 100%;
  max-width: 248px;
  letter-spacing: 0.05em;
  font-weight: bold;
  font-size: 100%;
}

.Form-Item-Label.isMsg{
  margin-top: 8px;
  margin-bottom: auto;
}
.Required{
  border-radius: 6px;
  margin-right: 8px;
  padding-top: 8px;
  padding-bottom: 8px;
  width: 48px;
  display: inline-block;
  text-align: center;
  background: #4169e1;
  color: #fff;
  font-size: 80%;
}
.any{
  border-radius: 6px;
  margin-right: 8px;
  padding-top: 8px;
  padding-bottom: 8px;
  width: 48px;
  display: inline-block;
  text-align: center;
  background: #87cefa;
  color: #fff;
  font-size: 80%;
}
.Form-Item-Input {
  border: 1px solid #ddd;
  border-radius: 6px;
  margin-left: 40px;
  padding-left: 1em;
  padding-right: 1em;
  height: 48px;
  flex: 1;
  width: 100%;
  max-width: 80%;
  background: #f8f8ff;
  font-size: 18px;
}
.Form-Item-Textarea {
  border: 1px solid #ddd;
  border-radius: 6px;
  margin-left: 40px;
  padding-left: 1em;
  padding-right: 1em;
  height: 216px;
  flex: 1;
  width: 100%;
  max-width: 80%;
  background: #f8f8ff;
  font-size: 18px;
}
#btn{
  border-radius: 6px;
  margin-top: 32px;
  margin-left: auto;
  margin-right: auto;
  padding-top: 20px;
  padding-bottom: 20px;
  width: 280px;
  display: block;
  letter-spacing: 0.05em;
  background: #4169e1;
  color: #fff;
  font-weight: bold;
  font-size: 20px;
}
#btn:disabled{
background:#ccc;
}
.use a:hover{
text-decoration:none;
opacity:0.7;
}


@media(max-width:770px){

.nav{
  display:grid;
  grid-auto-columns: 1fr;
  grid-auto-flow: column;
  grid-template-rows:50px;
}
.info{
float:none;
}

th{
width:200px;
padding:15px;
}
.border{
border-bottom:double 5px #ffa3d1;
width:100%;
}


.overview{
display:block;
}

.overview th{
width:30%;
}
h2{
margin-top:10%;
}
.nav{
display:block;
}
.footer__address a {
color: #0000ff;
text-decoration:auto;
pointer-events:auto
}
td a {
pointer-events:auto
}
h4{
 width:300px;
}
.Form {
    margin-top: 40px;
}
.Form-Item {
    padding-left: 14px;
    padding-right: 14px;
    padding-top: 16px;
    padding-bottom: 16px;
    flex-wrap: wrap;
}
.Form-Item-Label {
    max-width: inherit;
    display: flex;
    align-items: center;
    font-size: 15px;
}

.Form-Item-Label.isMsg {
    margin-top: 0;
}

.Form-Item-Label-Required {
    border-radius: 4px;
    padding-top: 4px;
    padding-bottom: 4px;
    width: 32px;
    font-size: 10px;
}

.Form-Item-Input {
    margin-left: 0;
    margin-top: 18px;
    height: 40px;
    flex: inherit;
    font-size: 15px;
}

.Form-Item-Textarea {
    margin-top: 18px;
    margin-left: 0;
    height: 200px;
    flex: inherit;
    font-size: 15px;
}

#btn{
    margin-top: 24px;
    padding-top: 8px;
    padding-bottom: 8px;
    width: 160px;
    font-size: 16px;
}
}