/* CSS Document */

.forPc{
  display: none;
}
.forSp{
  display: block;
}
.nissankyoto h1,
.nissankyoto h2,
.nissankyoto h3{
  margin-bottom: 0;
}

.nissankyoto img{
  max-width: 100%;
  height: auto;
}
.nissankyoto p{
  margin: 1rem 0 0 0;
}
.nissankyoto p.imgBox{
  margin: 0;
}
.nissankyoto p.imgBox img{
  width: 100%;
  height: auto;
}
.titleArea h1{
  margin: 0;
  padding: 0;
}
.titleArea h1 span{
  display: block;
}
.titleArea h1 span:first-of-type{
  margin: .5rem;
  display: block;
  max-width: 50%;
}
.titleArea h1 span:last-of-type{
  border-top: 5px solid #000;
}
.titleArea h1{
  width: 100%;
}
.titleArea .copy{
  font-weight: 700;
  margin: 1rem;
  text-align: center;
}

.exampleArea{
  margin: 1rem;
}
.exampleArea h2{
  margin: .75rem;
  width: 100px;
}
.exampleBox h3{
  color: #004b8a;
  margin: 1rem 0 0 0;
  text-align: center;
}
.exampleBox p.imgBox{
  margin: .25rem 0 0 0;
}


.formulaArea{
  background: linear-gradient(to bottom , rgba(0,0,0, .1), rgba(255,255,255, 1));
  margin-top: 3rem;
  border-top: 2px solid #d40027;
  position: relative;
}
.formulaArea:before{
  background: #d40027;
  content: "Pick Up!";
  color: #fff;
  font-weight: 700;
  left: calc( 50% - 5em);
  position: absolute;
  padding: .25rem 0;
  text-align: center;
  top: -1em;
  width: 10em;
  z-index: 2;
}
/*.formulaArea:after{
  content: "";
  background: #d40027;
  height: 2px;
  left: 0;
  top: -1px;
  width: 100%;  
  z-index: 3;
  position: absolute;
}*/
.formulaArea .headerBox{
  background: #004b8a;
  color: #fff;  
  padding: 1rem;
  position: relative;
  text-align: center;
}
.formulaArea .headerBox:after{
  content: "";
  background: #004b8a;
  width: 100%;
  height: 30%;
  left: 0;
  bottom: -10%;
  transform: skew(0, -5deg);
  position: absolute;
  z-index: 1;
}
.formulaArea .headerBox h2{
  font-size: 1.5em;
  position: relative;
  text-align: center;
  z-index: 2;
}
.formulaArea .headerBox p{
  position: relative;
  z-index: 3;
}
.formulaArea .about{
  position: relative;
  z-index: 4;
  
}
.formulaArea .about,
.formulaArea .detail{
  display: flex;
  flex-direction: column-reverse;
  margin: 1rem;
}
.formulaArea .about h3{
  color: #d40027;
}

.cmArea{
  margin: 1rem;
}
.cmArea h2{
  color: #c62828;
  font-size: 1.75em;
  text-align: center;
}
.cmArea ul{
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
}
.cmArea ul li{
  margin-top: 1rem;
}
.cmArea ul a{
  background: #c62828;
  border-radius: .5rem;
  box-sizing: border-box;
  color: #fff;
  display: block;
  filter: drop-shadow(2px 2px 0 #ccc);
  line-height: 1.5;
  padding: 1rem 1rem 1rem 2rem;
  position: relative;
  text-align: center;
  height: 100%;
}
.cmArea ul a:before{
  border-color: #fff;
  border-style: solid;
  border-width: 2px 2px 0 0;
  content: "";
  height: .5rem;
  left: .5rem;
  position: absolute;
  top: calc(50% - .25rem);
  transform: rotate(45deg);
  width: .5rem;
}