@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@400;700&display=swap');

html,body{margin:0;}
article{
  min-width:1012px;
  font-family: 'M PLUS Rounded 1c', sans-serif;
  font-size:16px;
  color:#450e6d;
  line-height:1.6;
  text-align:center;
  background:url(../images/bg.png) center top;
}


.only_smart,
.only_smart_i{
  display:none !important;
}
article img{
  max-width:100%;
}
article ul{
  margin:0;
  padding:0;
}
article ul li{
  list-style:none;
}

article a{
  text-decoration:none;
  -webkit-transition: opacity 0.3s ease-out;
  transition: opacity 0.3s ease-out;
}
article a:hover{
  opacity: 0.8;
}

article h1{
  margin:0 0 -200px;
  padding:10px 0 210px;
  background:url(../images/h1_bg.jpg)no-repeat center top;
}


/* #intro */
#intro{
  padding:40px 0 230px;
  background:url(../images/intro_base.png)no-repeat center top;
}
#intro p{
  margin:auto;
  padding:180px 0 100px;
  font-size:22px;
  font-weight:bold;
  color:#fff;
  background:url(../images/intro_bg.png)no-repeat center top;
  transform:rotate(0.03deg);
}
#intro nav{
  margin-top:80px;
}
#intro nav ul{
  width:1000px;
  margin:auto;
}
#intro nav ul li{
  display:inline-block;
  margin:10px 5px;
}
#intro nav ul li a:hover{
  opacity:1;
}
#intro nav ul li a img{
  vertical-align:bottom;
}


/* .cont */
.cont{
  margin:120px 0 230px;
  padding:50px 0 30px;
  background:url(../images/cont_bg.png)repeat-y center top;
  position:relative;
}
.cont:before{
  content:'';
  display:block;
  width:100%;
  height:80px;
  background:url(../images/cont_bg_top.png)no-repeat center top;
  position:absolute;
  bottom:100%;
}
.cont:after{
  content:'';
  display:block;
  width:100%;
  height:60px;
  background:url(../images/cont_bg_bottom.png)no-repeat center bottom;
  position:absolute;
  top:100%;
}
.cont .rotate{
  transform:rotate(0.03deg);
}
.cont h2{
  width:100%;
  height:154px;
  position:absolute;
  z-index:1;
  top:-140px;
}
.cont a.btn{
  display:inline-block;
  line-height:60px;
  font-size:22px;
  font-weight:bold;
  color:#fff;
  background:url(../images/btn_bg.png)no-repeat center center;
  background-size:100% 100%;
  border-radius:30px;
  transform:rotate(0.03deg);
}
.cont ul.list{
  width:1012px;
  margin:0 auto;
}
.cont ul.list li{
  width:286px;
  margin:20px 12px 0;
  padding:0;
  display:inline-block;
  vertical-align:top;
}
.cont ul.list li a{
  display:block;
}
.cont ul.list li a figure{
  margin:0;
}
.cont ul.list li a figure figcaption{
  height:2.8em;
  margin-top:5px;
  line-height:1.4;
  font-size:20px;
  font-weight:bold;
  white-space:nowrap;
  color:#450e6d;
}


/* #cont1 */
#cont1{
  padding:0;
}
#cont1 section{
  width:810px;
  margin:auto;
  padding:30px 0 50px;
}
#cont1 section:first-of-type{
  border-bottom:3px dotted #450e6d;
}
#cont1 section h3{
  margin:0 0 10px;
  font-size:30px;
}
#cont1 section a.btn{
  width:420px;
  margin-top:1em;
}


/* #cont2 */
#cont2{
}
#cont2 > div{
  width:910px;
  margin:20px auto 0;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}
#cont2 > div > section.book{
  width:470px;
  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:10px;
}
#cont2 > div > section.book a.book{
  width:140px;
  margin:0 0 10px;
}
#cont2 > div > section.book a.book figure{
  margin:0;
}
#cont2 > div > section.book section{
  width:300px;
  text-align:left;
}
#cont2 > div > section.book section h3{
  margin:0;
  font-size:20px;
}
#cont2 > div > section.book section h3 span:first-of-type{
  display:block;
  font-size:16px;
}
#cont2 > div > section.book section h3 span:last-of-type{
  font-size:12px;
  font-weight:normal;
  margin-left:0.5em;
}
#cont2 > div > section.book section p{
  margin-top:0;
  font-size:14px;
}

#cont2 > div > section.profile{
  width:420px;
}
#cont2 > div > section.profile figure{
  width:210px;
  margin:0 auto;
  padding-top:10px;
}
#cont2 > div > section.profile figure figcaption{
  margin:0;
  font-size:24px;
  font-weight:bold;
}
#cont2 > div > section.profile p{
  text-align: justify;
  text-justify: inter-ideograph;
}
#cont2 > div > section.profile ul{
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}
#cont2 > div > section.profile ul li{
  width:200px;
}
#cont2 > div > section.profile ul li a{
  display:block;
}


/* #cont6 */
#cont6{
  margin-bottom:140px;
}



/* .hallo_banner */
.hallo_banner{
  padding:0 0 80px;
}
.hallo_banner li:nth-child(n+2){
  display:inline-block;
  margin:20px 7px 0;
}