@charset "utf-8";
@import url('http://fonts.googleapis.com/earlyaccess/notosansjp.css');


body {
  font-family: 'Noto Sans JP', sans-serif;
  font-size:  18px;
  color: #00214d;
  background-color: #FFF;
}



main {  width: 1120px;
  max-width: 1120px;
  margin:  auto ; 
  font-size: 18px; line-height: 1.6em; 

}
main h2 {
  text-align: center;
  font-size: 24px;
  letter-spacing: 1em;
  margin-bottom: 30px;
    padding: 1rem 2rem;
    border: 3px solid #00214d;
    background-color: #fde24f;
}
header {
  width: 1120px;
  max-width: 1120px;
  margin:  auto ; 
  background: url('../img/fumikiri.svg') no-repeat right top;
  background-size: 10%;
  height: 150px;
  text-align: center;
  line-height: 100%;
}

header h1 {
 font-size: 40px;
 color: #ff5470;
 font-weight: 600;
 margin-top: 60px;
 margin-bottom: 20px;
 font-family: 'BIZ UDPGothic', sans-serif;
 vertical-align: text-bottom;
 position: relative;
 padding-top: 50px;
}

header h1 span {
  position: absolute;
  top:0;
  left: 50%;
  transform: translate(-50%, -50%);
  display: inline-block;
  margin: 0em 15px 0 0;
  padding: 7px 10px;
  min-width: 120px;
  max-width: 100%;
  color: #555;
  font-size: 16px;
  background: #FFF;
  border: solid 3px #555;
}





header p { line-height: 2em;}
#item a , #inquiry ul li a { 
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 auto;
  padding: 0.6em 1em 0.6em 0.6em ;
  width: 350px;
  color: #333;
  font-size: 18px;
  font-weight: 700;
  background-color: #00ebc7;
  transition: 0.3s;
}
#inquiry ul li a { 
  width: 300px;
}

#item a:after, #inquiry ul li a:after {
  content: '';
  width: 15px;
  height: 15px;
  border-top: 5px solid #333333;
  border-right: 5px solid #333333;
  transform: rotate(45deg);
}

#item a:hover,#inquiry ul li a:hover {
  text-decoration: none;
  background-color: 	#ADFF2F;
}

section {margin-bottom: 50px;}
section p { font-size: 14px; line-height: 1.2em; margin-bottom: 10px;}
ul { display: flex;
justify-content:space-around;
margin-top: 20px;}

ul li,section p a {text-align: center;line-height: 1.5em;}

ol{   counter-reset:list;
  list-style-type:none;
}
ol li {
  position:relative;
  padding: 0px 5px 0px 60px;
  margin-bottom: 30px;

}
ol li strong {
  font-weight: bold;}

  ol li:before{
    counter-increment: list;
    content: counter(list);
    position: absolute;
    left: 0px;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    color: #fff;
    background: #ff5470;
    border-radius: 50%;
    top: 0%;
  }
#item ul { margin-bottom: 20px;}
#item li {width: 30%; text-align: center;}
#item li figure img{ width: 100%;}
#item li figcaption {font-size: 10px; color: cadetblue;}

#form form { width: 60%;font-size: 16px; margin: auto;}

#form dl dt { line-height: 2em; color: #ff5470; font-size: 18px;  display: inline-block; margin-top: 20px;}
#form dl dt span { font-weight: normal; font-size: 12px; color: #00214d;}
#form label {
  display:inline-flex;
}
#form p {text-align: center;}


#form .required:after {
  margin-left: 1.0em;
  padding: 0px 6px 0px 6px;
  border-radius: 4px;
  font-size: 0.6em;
  color: white;
  background-color: #C44;
  content: "必須";
}
input[type="text"],
input[type="email"],
select,
textarea {
  border: 1px solid #fde24f;
  background-color: #ffffff;
  width: 100%;
  margin-top: 5px;
  padding: 4px 8px;
}
input[type="radio"],
input[type="checkbox"] {
  width: 16px;
  height: 16px;
  vertical-align: baseline;
  margin-right: 4px;
}

textarea {
  height: 148px;
  margin-bottom: 30px;
}
form > p {
  line-height: 1.4;
  margin-bottom: 20px;
}
.submitBtn {
  text-align: center;
  margin:  30px 0;
}
input[type="submit"] {
  background-color: #00ebc7;
  font-weight: bold;
  padding: 18px 80px;
}

  footer {text-align: center;
  padding-bottom: 10px;
font-size: 14px;
background-image: linear-gradient(
  90deg, 
  #fde24f 25%,
  #000000 25%, #000000 50%,
  #fde24f 50%, #fde24f 75%,
  #000000 75%
);
background-size: 100px 10px;
}

footer p { background: #FFF; padding-bottom: 20px; }

#thanks {text-align: center;}




/*-----スマホ向けの記述-----*/
@media screen and (max-width:700px) {

  main {
    width: 90%;
    margin:  auto ; 
    font-size: 16px;}
  header { 
    width: 90%;
    background: url('../img/fumikiri.svg') no-repeat right top;
    background-size: 30%;
    padding-bottom: 30px;}
  header h1 {
    font-size: 30px;
    margin-top: 25px;
    text-align: left;
   }
   header p {  width: 70%; text-align: left;font-size: 11px; line-height:1.5em; margin-top: 10px;}
  main h2 {
    font-size: 20px;
    letter-spacing: 0em;
    margin-bottom: 20px;
      padding: 0.5rem 1rem;
      border: 2px solid #00214d;
    
  }
  #item a , #inquiry ul li a { 
  width: 90%;
  font-size: 16px;
}
#flow li { font-size: 12px;line-height: 1.5em;}
#flow li strong { font-size: 15px;}

#item ul { display: flex;
  flex-wrap: wrap;
  margin-top: 20px;}

  #item ul  li{flex-basis: 50%;}
  #inquiry ul { display: block;}
    #inquiry ul li { 
      margin-top: 10px;}   

 #form form { width: 100%;}
 #form form dl dt { line-height: 1em;}

 #form p { font-size: 12px;}
  footer p { font-size: 10px;}
}