@charset "utf-8";
@media only screen and (max-width:640px){
article{
	padding-bottom:0;
	min-width:auto;
	min-width:initial;
	font-size:13px;
	padding-top:0;
}
.only_smart{
	display:block !important;
}
.only_smart_i{
	display:inline-block !important;
}
.only_pc{
	display:none !important;
}


article{
  padding-bottom:0px;
}
article img{
	max-width:100%;
}
article h1{
	margin:0;
	padding:0;
}
article h1 img{
	vertical-align:bottom;
}


/* #mv */
#mv{
  width:300px;
  margin:20px auto 0;
  background:
    url(../images/mv_left.png)no-repeat left 60px,
    url(../images/mv_right.png)no-repeat right 50px;
   background-size:40px auto, 35px auto;
}
#mv h2{
  margin:5px;
  font-size:16px;
  color:#00a0e9;
}
#mv h2:before{
  content:'';
  display:inline-block;
  vertical-align:middle;
  width:2px;
  height:30px;
  margin-right:10px;
  background-color:#00a0e9;
  -webkit-transform:rotate(-30deg);
  transform:rotate(-30deg);
}
#mv h2:after{
  content:'';
  display:inline-block;
  vertical-align:middle;
  width:2px;
  height:30px;
  margin-left:10px;
  background-color:#00a0e9;
  -webkit-transform:rotate(30deg);
  transform:rotate(30deg);
}
#mv h2 + p{
  margin:0;
  line-height:1.6;
}
#mv h2 + p span{
  background-color:#fff43e;
}
#mv p.caution{
  width:280px;
  margin:20px auto;
  padding:10px 0 10px 50px;
  box-sizing:border-box;
  background:#fffeb2 url(../images/mv_caution.png)no-repeat 10px center;
  background-size:30px auto;
  color:#eb2e2e;
  border:2px solid #eb2e2e;
  border-radius:5px;
  text-align:left;
  line-height:1.5;
}


/* nav */
nav{
  padding:0 0 20px;
}
nav ul li{
  width:22%;
  max-width:120px;
  margin:0 0.5%;
  display:inline-block;
}


/* .cont */
.cont{
  padding:60px 0 30px;
}
.cont h2{
  width:150px;
  line-height:1.4;
  margin:0 auto 20px ;
  border-bottom:5px dotted;
  font-size:21px;
  font-weight:normal;
}
.cont h2 span{
  font-size:24px;
}
.cont div.point{
  width:90%;
  max-width:480px;
  margin:auto;
  padding:0 0 10px;
  border:2px solid #b2b2b2;
  border-radius:10px;
}
.cont div.point h3{
  margin:-22px 0 5px;
  line-height:1;
}
.cont div.point h3 img{
  width:150px;
}
.cont div.point p{
  line-height:1.5;
  margin:0;
  font-size:16px;
}
.cont div.point p span{
  color:#e4007f;
}
.cont div.point p ruby rt{
  transform:translateY(0);
  color:#4f4f50;
}


/* #cont1 */
#cont1{
  background:
    url(../images/cont1_bg.png)no-repeat right 3%,
    url(../images/cont1_top.png)repeat-x center top;
    background-size:110% auto, 200px auto;
}
#cont1 h2{
  color:#005bcb;
  border-color:#005bcb;
}
#cont1 h2 + p{
  font-size:16px;
  line-height:2.2;
}
#cont1 h2 + p span{
  color:#e4007f;
}

#cont1 > h3{
  width:3.5em;
  margin:auto;
  font-size:21px;
  font-weight:normal;
  color:#005bcb;
  position:relative;
  line-height:1;
}
#cont1 > h3 a{
  display:block;
  width:170px;
  line-height:34px;
  font-size:14px;
  font-weight:bold;
  background-color:#f6f35e;
  border-radius:4px;
  border:1px solid #ccc;
  letter-spacing:-0.03em;
  position:absolute;
  left:103%;
  bottom:0;
}
#cont1 > div.movie{
  margin:10px 0;
  padding:0 5%;
}
#cont1 > div.movie + a img{
  width:80%;
  max-width:420px;
}


#cont1 section{
  padding:40px 0 20px;
}
#cont1 section:first-of-type{
  background:url(../images/cont1_line.png)repeat-x center bottom;
  background-size:18px auto;
}
#cont1 section:first-of-type figure{
  width:90%;
  margin:40px auto 0;
  padding-bottom:70px;
  background:url(../images/cont1_1_2.png)no-repeat right bottom;
  background-size:210px auto;
}

#cont1 section:last-of-type{
  padding:40px 0 0;
  background:url(../images/cont1_bg.png)no-repeat right 4%;
  background-size:110% auto;
}
#cont1 section:last-of-type div.point p span:last-of-type{
  margin-top:10px;
  font-size:14px;
  color:#4f4f50;
  display:block;
  line-height:1.8;
}
#cont1 section:last-of-type ul{
  width:90%;
  margin:50px auto 0;
}
#cont1 section:last-of-type ul li{
  height:auto;
  margin-bottom:20px;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}
#cont1 section:last-of-type ul li:last-child{
  height:auto;
}
#cont1 section:last-of-type ul li > figure{
  width:35%;
  background:
    url(../images/cont1_2_arrow1_s_bottom.png)no-repeat center bottom,
    url(../images/cont1_2_arrow1_s.png)repeat-y center bottom;
  background-size:40px auto;
  position:relative;
}
#cont1 section:last-of-type ul li > figure:after{
  content:'';
  display:block;
  width:100%;
  margin-top:-10px;
  padding-top:70%;
  background:url(../images/cont1_2_arrow1_s_top.png)no-repeat center top;
  background-size:40px auto;
}
#cont1 section:last-of-type ul li:last-child > figure{
  background-image:none;
}
#cont1 section:last-of-type ul li:last-child > figure:after{
  content:none;
}
#cont1 section:last-of-type ul li > div{
  width:60%;
  display: block;
}
#cont1 section:last-of-type ul li > div dl{
  width:100%;
  margin:0 0 40px;
  font-weight:normal;
  letter-spacing:0.08em;
  position:relative;
}
#cont1 section:last-of-type ul li > div dl:after{
  content:'';
  display:block;
  width:25px;
  height:35px;
  background:url(../images/cont1_2_arrow2_s.png)no-repeat left top;
  background-size:100% auto;
  position:absolute;
  left:calc(50% - 10px);
  top:calc(100% + 3px);
}
#cont1 section:last-of-type ul li > div dl dt{
  line-height:30px;
  margin-bottom:10px;
  border-radius:6px;
  background-color:#fde497;
  color:#6a3906;
  font-size:18px;
}
#cont1 section:last-of-type ul li:nth-child(2) > div dl dt{
  background-color:#fbd253;
}
#cont1 section:last-of-type ul li:nth-child(3) > div dl dt{
  background-color:#edaa09;
}
#cont1 section:last-of-type ul li:last-child > div dl dt{
  background-color:#e96800;
  color:#fff;
}
#cont1 section:last-of-type ul li > div dl dd{
  text-align:left;
}
#cont1 section:last-of-type ul li > div dl dd br{
  display:none;
}
#cont1 section:last-of-type ul li > div a{
  width:170px;
  margin:0 auto;
  display:block;
}
#cont1 section:last-of-type ul li > div a span{
  color:#eb6100;
  letter-spacing:-0.05em;
}
#cont1 section:last-of-type ul li > div a span:before{
  content:'';
  display:inline-block;
  vertical-align:middle;
  width:1px;
  height:20px;
  margin-right:5px;
  border-left:2px dotted #eb6100;
  -webkit-transform:rotate(-25deg);
  transform:rotate(-25deg);
}
#cont1 section:last-of-type ul li > div a span:after{
  content:'';
  display:inline-block;
  vertical-align:middle;
  width:1px;
  height:20px;
  margin-left:5px;
  border-left:2px dotted #eb6100;
  -webkit-transform:rotate(25deg);
  transform:rotate(25deg);
}

#cont1 section:last-of-type ul li > div a figure{
  width:120px;
  margin:auto;
}
#cont1 section:last-of-type ul li > div a figure figcaption{
  line-height:1.3;
}


/* #cont2 */
#cont2{
  background:
    url(../images/cont2_bg.png)no-repeat right 20px,
    url(../images/cont2_top.png)repeat-x center top;
  background-size:110% auto, 200px auto;
}
#cont2 h2{
  margin-bottom:40px;
  color:#ff48b3;
  border-color:#ff48b3;
}
#cont2 div.point p span{
  color:#00a0e9;
}
#cont2 section{
  width:90%;
  margin:30px auto 0;
}
#cont2 section h3{
  line-height:1;
  padding:14px 0 2px;
  background-color:#ff7ec9;
  color:#fff;
  font-size:18px;
  font-weight:normal;
  border-radius:6px;
}
#cont2 section div{
  padding-left:0;
  position:relative;
  overflow:hidden;
}
#cont2 section div img{
  position:static;
  left:auto;
  width:40%;
  display:inline-block;
  float:left;
  margin-bottom:10px;
}
#cont2 section div p{
  font-weight:normal;
  text-align: justify;
  text-justify: inter-ideograph;
  margin:0;
  padding-left:45%;
}
#cont2 section div p span{
  color:#00a0e9;
}
#cont2 section:last-of-type div p span{
  color:#eb6100;
}
#cont2 section div dl{
  line-height:1.5;
  margin-top:10px;
  padding:10px;
  border:4px solid #ffdaf0;
  border-radius:8px;
  color:#fd52b6;
  text-align:left;
  font-weight:normal;
  clear:both;
}
#cont2 section div dl dt{
  width:8em;
  float:left;
}
#cont2 section div dl dd{
  padding-left:8em;
}
#cont2 ul{
  width:auto;
  margin:30px auto 0;
  display: block;
}
#cont2 ul li{
  width:43%;
  margin:0 1% 20px;
  display:inline-block;
}
#cont2 ul li span{
  margin-bottom:5px;
  display:inline-block;
  width:110px;
  position:relative;
}
#cont2 ul li:first-child span{
  color:#00a0e9;
}
#cont2 ul li:last-child span{
  color:#eb6100;
}
#cont2 ul li span:before{
  content:'';
  display:inline-block;
  vertical-align:middle;
  width:1px;
  height:20px;
  border-left:2px dotted;
  -webkit-transform:rotate(-25deg);
  transform:rotate(-25deg);
  position:absolute;
  left:0;
}
#cont2 ul li span:after{
  content:'';
  display:inline-block;
  vertical-align:middle;
  width:1px;
  height:20px;
  border-left:2px dotted;
  -webkit-transform:rotate(25deg);
  transform:rotate(25deg);
  position:absolute;
  right:0;
}
#cont2 ul li a{
  display:block;
}



/* #cont3 */
#cont3{
  background:
    url(../images/cont3_bg.png)no-repeat right 2%,
    url(../images/cont3_top.png)repeat-x center top;
    background-size:110% auto, 200px auto;
}
#cont3 h2{
  width:160px;
  margin-bottom:60px;
  color:#ffa200;
  border-color:#ffa200;
}
#cont3 section{
  width:90%;
  margin:30px auto 0;
}
#cont3 section h3{
  line-height:1.2;
  padding:12px 0 8px;
  background-color:#ffa200;
  color:#fff;
  font-size:18px;
  font-weight:normal;
  border-radius:6px;
}
#cont3 section h3 span{
  color:#fff45c;
}
#cont3 section h3 br.only_smart{
  display:none !important;
}
#cont3 section div{
  height:auto;
  padding-left:0;
  position:static;
  overflow:hidden;
}
#cont3 section div img{
  position:static;
  left:auto;
  width:40%;
  float:left;
}
#cont3 section div p{
  font-weight:normal;
  text-align: justify;
  text-justify: inter-ideograph;
  margin:0;
  padding-left:45%;
}
#cont3 section div p span{
  color:#e4007f;
}
#cont3 ul{
  width:auto;
  margin:30px auto 0;
  display: block;
}
#cont3 ul li{
  width:43%;
  margin:0 1% 20px;
  display:inline-block;
  vertical-align:top;
}
#cont3 ul li a{
  display:block;
}
#cont3 ul li a figure figcaption{
  line-height:1.3;
}


/* #cont4 */
#cont4{
  padding-bottom:12%;
  background:url(../images/cont4_top.png)repeat-x center top;
  background-size:200px auto;
}
#cont4 h2{
  width:200px;
  color:#3fb472;
  border-color:#3fb472;
  font-size:18px;
}
#cont4 h2 span{
  font-size:21px;
}
#cont4 ul{
  width:auto;
  margin:30px auto 0;
  display: block;
}
#cont4 ul li{
  width:43%;
  margin:0 1% 20px;
  display:inline-block;
  vertical-align:top;
}
#cont4 ul li a{
  display:block;
}
#cont4 ul li a figure figcaption{
  line-height:1.5;
  color:#097c25;
}

}


@media only screen and (max-width:480px){
#cont1 > h3{
  width:auto;
}
#cont1 > h3 a{
  display:block;
  width:170px;
  line-height:34px;
  font-size:14px;
  font-weight:bold;
  background-color:#f6f35e;
  border-radius:4px;
  border:1px solid #ccc;
  letter-spacing:-0.03em;
  position:static;
  left:auto;
  bottom:auto;
  margin:5px auto 0;
}
}


@media only screen and (max-width:420px){

#cont3 section h3{
  padding:5px 0 3px; 
}
#cont3 section h3 br.only_smart{
  display:block !important;
}

}