@charset "utf-8";
@media only screen and (max-width:640px){
article{
  padding-bottom:10%;
	min-width:auto;
	min-width:initial;
	font-size:3.5vw;
  background-image:none;
}
article:before{
	content:'';
	display:block;
	width:100%;
	height:100vh;
	position:fixed;
	top:0;
	z-index:-1;
	background:url(../images/bg_s.png)no-repeat center top;
	background-size:cover;
}
.only_smart{
	display:block !important;
}
.only_smart_i{
	display:inline-block !important;
}
.only_pc{
	display:none !important;
}


article img{
	max-width:100%;
}

article h1{
  margin:0;
  padding:0;
  background-image:none;
}
article h1 img{
	vertical-align:bottom;
}
article h1 + p{
  margin:3% 0;
  padding:9%;
  text-align: justify;
  text-justify: inter-ideograph;
  font-size:3.9vw;
  background:url(../images/pr_bg_s.png)no-repeat center center;
  background-size:100% 100%;
}

article nav{
  margin:3% 0 5%;
}
article nav ul li{
  width:31%;
  margin:0;
}
article a.link{
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
  width:100%;
  height:auto;
  line-height:3.2;
  padding-right:0.6em;
  font-size:3vw;
}
article a.link.small{
  width:40%;
  line-height:3;
  margin:auto;
  font-size:4vw;
}


/* #intro */
#intro{
  width:90%;
  margin:auto;
  padding:5%;
  background:url(../images/intro_bg_s.png)no-repeat center top;
  background-size:100% 100%;
  position:relative;
}
#intro section{
  padding:5% 0;
  display: block;
}
#intro section figure{
  width:60%;
  margin:auto;
}
#intro section:first-child figure{
  margin-top:0;
}
#intro section figure figcaption{
  margin-bottom:0.3em;
  font-size:3.6vw;
  color:#4c2d09;
}
#intro section div{
  width:auto;
  margin-top:0.3em;
}
#intro section div h2{
  margin:auto;
  font-size:5vw;
  text-align:center;
}
#intro section div h2 span{
  font-size:3.4vw;
}
#intro section div h2 span:first-of-type{
  display:block;
  font-weight:bold;
}

#intro section div ul{
  margin:0.5em;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
}
#intro section div ul li{
  margin:0 1em;
}
#intro section div ul li a span{
  font-size:2.8vw;
}


#intro > img{
  width:35%;
  position:absolute;
  right:-3%;
  bottom:-1.5%;
}


/* .cont */
.cont{
  width:auto;
  margin: 20% auto 0;
  padding:0 0 5%;
}
.cont h2.tit{
  margin-bottom:-8%;
  line-height:4;
  font-size:5vw;
  background:url(../images/h2_bg.png)no-repeat center top;
  background-size:90% auto;
  text-shadow:-1px -1px 0px rgba(255,255,255,30),1px 1px 0px rgba(255,255,255,30),-1px 1px 0px rgba(255,255,255,30),1px -1px 0px rgba(255,255,255,30);
}
.cont .bold{
  font-weight:bold;
}


/* #cont1 */
#cont1{
  margin-top:18%;
}
#cont1 nav{
  margin-top:-2%;
}
#cont1 nav ul li{
  width:38%;
}
#cont1 nav ul li a.link{
  font-size:4vw;
}
#cont1 > section{
  width:90%;
  margin:3% auto;
}

#cont1 #cont1_0{
  padding:8% 5%;
  background:
    url(../images/cont1_2.png)no-repeat right 3% bottom 3%,
    url(../images/cont1_0_bg_s.png)no-repeat center top;
  background-size:25% auto,100% 100%;
}
#cont1 #cont1_0 figure img{
  max-width:300px;
  width:80%;
}
#cont1 #cont1_0 h3{
  margin-bottom:0.5em;
  font-size:4vw;
  text-align:left;
  border-bottom:none;
}
#cont1 #cont1_0 h3 span{
  transform:none;
}
#cont1 #cont1_0 dl{
  display: block;
}
#cont1 #cont1_0 dl div{
  width:auto;
  padding-bottom:1.5em;
  font-size:3.4vw;
}
#cont1 #cont1_0 dl div dd{
  margin-top:0.3em;
}
#cont1 #cont1_1,
#cont1 #cont1_2{
  margin-top:12%;
}
#cont1 #cont1_1 h3,
#cont1 #cont1_2 h3{
  margin-bottom:3%;
  padding-top:0.1em;
  line-height:3.5;
  font-size:5vw;
  background:url(../images/cont1_h3_bg.png)no-repeat center top;
  background-size:100% auto;
}
#cont1 #cont1_1 div{
  position:relative;
	height:0;
	padding-top:56%;
}
#cont1 #cont1_1 div iframe{
  position:absolute;
	top:0;
	left:0;
	width:100% !important;
	height:100% !important;
}
#cont1 #cont1_2 > ol > li{
  padding-bottom:7%;
}
#cont1 #cont1_2 > ol > li:last-child{
  padding-bottom:0;
}
#cont1 #cont1_2 > ol > li h4{
  width:auto;
  line-height:2.6;
  margin:0 auto 3%;
  font-size:5vw;
  background-color:#fff;
  border:1px solid #fc3f75;
  position:relative;
}
#cont1 #cont1_2 > ol > li h4:before{
  width:calc(100% - 8px);
  height:calc(100% - 8px);
}

#cont1 #cont1_2 > ol > li h4 span{
  font-size:3.6vw;
}
#cont1 #cont1_2 > ol > li > section{
  margin-top:15px;
  padding:5% 8%;
  border-radius:0.5em;
}
#cont1 #cont1_2 > ol > li > section h5{
  font-size:4.5vw;
  display:inline-block;
  margin:0;
  padding:0 0.3em;
  background-color:#fffdfa;
}
#cont1 #cont1_2 > ol > li > section p{
  margin:0;
}
#cont1 #cont1_2 > ol > li > section.pink{
  border:1px solid #ffb2b2;
}
#cont1 #cont1_2 > ol > li > section.orange{
  border:1px solid #ffdfb2;
}
#cont1 #cont1_2 > ol > li > section.sky{
  border:1px solid #afeffa;
}
#cont1 #cont1_2 > ol > li > section.purple{
  border:1px solid #e3c4f5;
}
#cont1 #cont1_2 > ol > li > section.blue{
  border:1px solid #7ab2fd;
}

#cont1 #cont1_2 > ol > li > section .link{
  width:60%;
  line-height:1.5;
  margin:1em auto 0;
  padding:1em 0;
  font-size:3.4vw;
  font-weight:normal;
  text-align:center;
}
#cont1 #cont1_2 > ol > li > section ol li h5{
  font-size:4.5vw;
}
#cont1 #cont1_2 > ol > li > section ol li.flex{
  display: block;
}
#cont1 #cont1_2 > ol > li > section ol li.flex p,
#cont1 #cont1_2 > ol > li > section ol li.flex section,
#cont1 #cont1_2 > ol > li > section ol li.flex dl{
  width:auto;
}
#cont1 #cont1_2 > ol > li > section ol li.flex figure{
  width:auto;
  margin-top:0.5em;
}
#cont1 #cont1_2 > ol > li > section ol li dl dt{
  font-size:3.6vw;
}
#cont1 #cont1_2 > ol > li > section > .comment{
  text-align:left;
}

#cont1 #cont1_2 > ol > li > section ol.flex{
  display: block;
}
#cont1 #cont1_2 > ol > li > section ol.flex li{
  width:auto;
  margin:0 0 1.5em;
  padding:0;
}
#cont1 #cont1_2 > ol > li > section ol.flex li p{
  margin-bottom:0.5em;
}
#cont1 > figure img{
  width:85%;
  margin: 2% auto;
}


/* #cont2 */
#cont2{
}
#cont2 figure{
  max-width:690px;
  width:90%;
  margin:0 auto 20px;
}


/* #cont3 */
#cont3{
  padding-bottom:8%;
}
#cont3 ul{
  max-width:560px;
  width:80%;
  margin:auto;
  display: block;
}
#cont3 ul li{
  width:100%;
  margin-bottom:12%;
}
#cont3 ul li:last-child{
  margin-bottom:0;
}
#cont3 ul li figure{
  margin-bottom:0.3em;
}
#cont3 ul li figure figcaption{
  height:auto;
  font-size:4.5vw;
}
#cont3 ul li a{
  width:45%;
  font-size:3.8vw;
}


/* #cont4 */
#cont4{
}
#cont4 dl{
  width:90%;
}
#cont4 dl dt{
  padding:0 0 0.8em 1.5em;
  font-weight:bold;
  position:relative;
}
#cont4 dl dt:before{
  content:'Q.';
  font-weight:bold;
  color:#2e86fc;
  position:absolute;
  left:0;
}
#cont4 dl dd{
  margin-bottom:1.2em;
  padding: 0 0 1.2em 1.5em;
  position:relative;
  border-bottom:1px solid;
}
#cont4 dl dd:last-of-type{
  margin-bottom:0;
  padding-bottom:0;
  border-bottom:none;
}
#cont4 dl dd:before{
  content:'A.';
  font-weight:bold;
  color:#fc3f75;
  position:absolute;
  left:0;
}
}