@charset "utf-8";
@media only screen and (max-width:640px){
article{
  min-width:auto;
  min-width:initial;
  font-size:3.4vw;
  background-size:40px auto;
}
.only_smart{
  display:block !important;
}
.only_smart_i{
  display:inline-block !important;
}
.only_pc{
  display:none !important;
}
img{
  max-width:100%;
}


article h1{
  margin:0 0 -9%;
  padding:0;
  background-image:none;
}


/* #intro */
#intro{
  padding:3% 0 18%;
  background:url(../images/intro_base_s.png)no-repeat center top;
  background-size:100% auto;
  position:relative;
}
#intro p{
  padding:16% 0 10%;
  font-size:3.4vw;
  background-image:none;
}
#intro nav{
  margin-top:5%;
}
#intro nav ul{
  width:auto;
}
#intro nav ul li{
  width:46%;
  display:inline-block;
  margin:1.5% 0.5%;
}
#intro nav ul li a:hover{
  opacity:1;
}
#intro nav ul li a img{
  vertical-align:bottom;
}


/* .cont */
.cont{
  margin:14% 0 35%;
  padding:5% 0 3%;
  background:url(../images/cont_bg_s.png)repeat-y center top;
  background-size:90% auto;
}
.cont:before{
  height:6%;
  background:url(../images/cont_bg_top_s.png)no-repeat center top;
  background-size:90% auto;
}
.cont:after{
  height:6%;
  background:url(../images/cont_bg_bottom_s.png)no-repeat center bottom;
  background-size:90% auto;
}
.cont h2{
  width:78%;
  height:auto;
  position:absolute;
  z-index:1;
  top:-13%;
  left:50%;
  transform:translateX(-50%);
}
.cont a.btn{
  line-height:2.8;
  font-size:3.5vw;
  background:url(../images/btn_bg_s.png)no-repeat center center;
  background-size:100% 100%;
  border-radius:1.4em;
}
.cont ul.list{
  width:82%;
  padding-top:3%;
}
.cont ul.list li{
  width:48%;
  margin:5% 0.5% 0;
}
.cont ul.list li a figure figcaption{
  height:auto;
  margin-top:0;
  font-size:3.4vw;
}


/* #cont1 */
#cont1 section{
  width:80%;
  margin:auto;
  padding:5% 0 5%;
}
#cont1 section:first-of-type{
  border-bottom:2px dotted #450e6d;
}
#cont1 section h3{
  margin:0 0 0.3em;
  font-size:4vw;
}
#cont1 section a.btn{
  width:70%;
  margin-top:0.5em;
}


/* #cont2 */
#cont2{
}
#cont2 h2{
  top:-10.5%;
}
#cont2 > a{
  display:inline-block;
  width:65%;
}
#cont2 > div{
  width:80%;
  margin:1.5% auto 0;
  display: block;
}
#cont2 > div > section.book{
  width:100%;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}
#cont2 > div > section.book a{
  margin-bottom:1.5%;
}
#cont2 > div > section.book a.book{
  width:28%;
}
#cont2 > div > section.book section{
  width:70%;
}
#cont2 > div > section.book section h3{
  line-height:1.3;
  font-size:3.4vw;
}
#cont2 > div > section.book section h3 span:first-of-type{
  display:block;
  font-size:3.4vw;
}
#cont2 > div > section.book section h3 span:last-of-type{
  font-size:1.8vw;
}
#cont2 > div > section.book section p{
  line-height:1.4;
  font-size:2.8vw;
}

#cont2 > div > section.profile{
  width:100%;
}
#cont2 > div > section.profile figure{
  width:50%;
  margin:auto;
  padding-top:5%;
}
#cont2 > div > section.profile figure figcaption{
  font-size:3.6vw;
}
#cont2 > div > section.profile p{
  margin-top:0.5em;
}
#cont2 > div > section.profile ul li{
  width:48%;
}


#cont3,
#cont4,
#cont5{
  margin-bottom:28%;
}
#cont4 h2,
#cont5 h2,
#cont6 h2{
  top:-15.5%;
}


/* #cont6 */
#cont6{
  margin-bottom:14%;
}

/* .hallo_banner */
.hallo_banner{
  padding:3% 0 8%;
}
.hallo_banner li:first-child{
  display:inline-block;
  width:90%;
}
.hallo_banner li:nth-child(n+2){
  display:inline-block;
  width:43%;
  margin:2.5% 1% 0;
}

}