@charset"UTF-8";

/* 
***********************************************************
* Copyright(C) CIDARIO Inc.
* URI:http://cidario.co.jp
* Editor:Hiromi Yoshino
***********************************************************
*/


/* article
========================================================================================================
*/

/*----------------------------------------
                 reason
-----------------------------------------*/

article#reason{
  width:100%;
  padding:0;
  margin:0;
}

/*----------------------------------------
                 reason01
-----------------------------------------*/

/* ======== section ========*/

article#reason section#reason01{
 width:90%;
 position:relative;
 background:url(/images/reason/reason-bg01.png) no-repeat 50% -430px;
 padding:40% 0 0 0;
 margin:45px auto 0 auto;
}


@media print, screen and (min-width:960px) { 
 article#reason section#reason01{
 width:980px;
 position:relative;
 background:url(/images/reason/reason-bg01.png) no-repeat 50% 0;
 background-size:auto;
 padding:350px 0 0 0;
 margin:140px auto 0 auto;
 }
}

/* ======== h1 ========*/

article#reason section#reason01 h1{
 width:110%;
 position:absolute;
 top:-45px;
 left:-5%;
}

@media print, screen and (min-width:960px) { 
 article#reason section#reason01 h1{
 width:100%;
 position:absolute;
 top:-140px;
 left:0;
 right:0;
 }
}

/* ======== dl ========*/


article#reason section#reason01 dl{
 width:90%;
 background-image:url(/images/reason/reason-bg03.png),url(/images/reason/reason-bg04.png);
 background-repeat:no-repeat;
 background-position:0 top,0 bottom;
 background-color:#FFF;
 background-position:contain;
 padding:45px 10px;
 margin:0 auto 20px auto;
}

@media print, screen and (min-width:960px) { 
 article#reason section#reason01 dl{
  width:800px;
  padding:45px 20px;
  margin:0 auto 50px auto;
 }
}

article#reason section#reason01 dl dd{
 font-size:14px; font-size:1.4rem;
 line-height:150%; margin:15px 0 0 0;
}

@media print, screen and (min-width:960px) { 
article#reason section#reason01 dl dd{
 font-size:16px; font-size:1.6rem;
 line-height:180%;
 margin:30px 0 0 0;
 }
}

article#reason section#reason01 dl dd.r-txt{
  padding:0 10px;
}

article#reason section#reason01 dl dt.r-lead01{
 font-size:14px; font-size:1.4rem;
 line-height:180%;
  text-align: center;
}

article#reason section#reason01 dl dt.r-lead01 span.rl01-01{
  font-weight: bold;
}

article#reason section#reason01 dl dt.r-lead01 span strong{
  font-size: 20px; font-size: 2.0rem;
  color:#D90000;
}

article#reason section#reason01 dl dd.r-lead02{
 background-color:#000;
 color:#FFF;
 font-size:16px; font-size:1.6rem;
 line-height:150%;
 text-align:center;
 padding:5px 0;
}


/* ======== h2 ========*/


article#reason section#reason01 h2{
 width:90%;
 background:url(/images/reason/reason05.png) no-repeat 50% bottom;
 background-size:187.6px 99.2px;
 padding:0 0 120px 0;
 margin:0 auto;
}


@media print, screen and (min-width:960px) { 
 article#reason section#reason01 h2{
 width:760px;
 background:url(/images/reason/reason05.png) no-repeat 50% bottom;
 padding:0 0 285px 0;
 background-size:469px 248px;
 margin:0 auto;
 }
}


/* ======== div ========*/

section#reason01 div{
 width:90%;
 background:url(/images/reason/reason-bg02.png) repeat;
 padding:10px;
 margin:0 auto;
}

@media print, screen and (min-width:960px) { 
 section#reason01 div{
 width:840px;
 background:url(/images/reason/reason-bg02.png) repeat;
 padding:20px;
 margin:0 auto;
 }
}

section#reason01 div p{
 width:100%;
 background:#FFF;
 font-size:14px; font-size:1.4rem;
 line-height:180%;
 padding:10px 15px;
}

@media print, screen and (min-width:960px) { 
 section#reason01 div p{
 width:100%;
 background:#FFF;
 font-size:16px; font-size:1.6rem;
 line-height:180%;
 padding:25px 30px;
 }
}

section#reason01 div p span{
  display:inline-block;
  margin:0 0 15px 0;
}

section#reason01 div p span:last-child{
  margin:0;
}

/*----------------------------------------
                 reason02
-----------------------------------------*/


/* ======== section ========*/


article#reason section#reason02{
 width:90%;
 background-color:#64AC28;
 position:relative;
 padding:30px 10px;
 margin:70px auto 0 auto;
}


@media print, screen and (min-width:960px) { 
 article#reason section#reason02{
 width:960px;
 padding:45px 20px 60px 20px;
 margin:90px auto 0 auto;
 }
}

/* ======== h1 ========*/

article#reason section#reason02 h1{
  position:absolute;
  top:-50px;
  left:-5px;
  z-index:5;
}

article#reason section#reason02 h1 img{
  width:30%;
  max-width: 286px;
  min-width: 143px;
}


@media print, screen and (min-width:960px) { 
 article#reason section#reason02 h1{
  position:absolute;
  top:-80px;
  left:40px;
  z-index:5;
 }
 
 article#reason section#reason02 h1 img{

 }
}

/* ======== dl ========*/

article#reason section#reason02 dl{
  width:100%;
  position:relative;  
  background-color:#FFF;
  padding:40px 15px 20px 15px;
  margin:0 0 60px 0;
  z-index:3;
}

@media print, screen and (min-width:960px) { 
 article#reason section#reason02 dl{
   width:920px;
   padding:40px 30px 60px 30px;
   margin:0 0 80px 0;
 }
}

article#reason section#reason02 dl:first-child{
  padding:40px 30px 100px 30px;
 }

article#reason section#reason02 dl:last-child{
   margin:0;
 }

/* ======== dt ========*/

article#reason section#reason02 dl dt{
  width:100%;
  text-align:center;
  margin:0 0 20px 0;
}

article#reason section#reason02 dl dt img{
  width:80%;
  max-width:360px;
}

article#reason section#reason02 dl dt span img{
  width:55%;
}

@media print, screen and (min-width:960px) { 
 article#reason section#reason02 dl dt{
  margin:0 0 40px 0;
 }
 
 article#reason section#reason02 dl dt span img{
  width:auto;
 } 
}

/* ======== dt span  ========*/


article#reason section#reason02 dl dt span{
  display:block;
  position:absolute;
}


/* ---------p01---------*/

article#reason section#reason02 dl dt span.p-01{
  top:-50px;
  right:-10px;
  text-align:right;
}

article#reason section#reason02 dl dt span.p01 img{
  width:179.4px;
}

@media print, screen and (min-width:640px) { 
 article#reason section#reason02 dl dt span.p-01{
  top:-80px;
  right:5px;
 }

 article#reason section#reason02 dl dt span.p-01 img{
  width:323px;
  right:124px;
 }
}

/* ---------p02---------*/

article#reason section#reason02 dl dt span.p-02{
  top:-30px;
  left:-10px;
  text-align:left;
}

article#reason section#reason02 dl dt span.p02 img{
   width:30%;
   max-width:323px;
   min-width:161px;
}

@media print, screen and (min-width:960px) { 
 article#reason section#reason02 dl dt span.p-02{
  top:-60px;
  left:10px;
 }

 article#reason section#reason02 dl dt span.p-02 img{
   right:124px;
 }
}

/* ---------p03---------*/

article#reason section#reason02 dl dt span.p-03{
  top:-30px;
  right:-10px;
  text-align:right;
}

article#reason section#reason02 dl dt span.p02 img{
  width:179.4px;
}

@media print, screen and (min-width:960px) { 
 article#reason section#reason02 dl dt span.p-03{
  top:-65px;
  right:10px;
 }

 article#reason section#reason02 dl dt span.p-03 img{
  width:299px;
  right:124px;
 }
}

/* ======== dd ========*/


article#reason section#reason02 dl dd{
  font-size:14px; font-size:1.4rem;
  line-height:180%;
}

@media print, screen and (min-width:960px) { 
 article#reason section#reason02 dl dd{
  font-size:17px; font-size:1.7rem;
  line-height:180%;
 }
}

article#reason section#reason02 dl dd p{
  margin:0 0 15px 0;
}


/* ======== guts01 ========*/

article#reason section#reason02 dl dd.guts01{
  position:absolute;
  top:-65px;
  right:0;
  text-align:right;
}

article#reason section#reason02 dl dd.guts01 img{
  width:50%;
}

@media print, screen and (min-width:960px) { 
 article#reason section#reason02 dl dd.guts01{
  position:absolute;
  top:-130px;
  right:30px;
 }
 
article#reason section#reason02 dl dd.guts01 img{
  width:auto;
 }
}


article#reason section#reason02 dl dd.guts02{
  position:absolute;
  top:-65px;
  left:0;
}

article#reason section#reason02 dl dd.guts02 img{
  width:50%;
}

@media print, screen and (min-width:960px) { 
 article#reason section#reason02 dl dd.guts02{
  position:absolute;
  top:-130px;
  left:30px;
 }
 
article#reason section#reason02 dl dd.guts02 img{
  width:auto;
 }
}


/*----------------------------------------
                 reason03
-----------------------------------------*/

/* ======== section ========*/


article#reason section#reason03{
 width:90%;
 background:url(/images/reason/reason-bg05.png) no-repeat 0 bottom #64AC28;
 background-size:contain;
 text-align:center;
 padding:0 0 100px 0;
 margin:0 auto;
}

@media print, screen and (min-width:460px) and (max-width:960px){
article#reason section#reason03{
 width:90%;
 background:url(/images/reason/reason-bg05.png) no-repeat 0 bottom #64AC28;
 background-size:contain;
 padding:0 0 190px 0;
 margin:0 auto;
  }
}

@media print, screen and (min-width:960px) { 
 article#reason section#reason03{
 width:960px;
 background:url(/images/reason/reason-bg05.png) no-repeat 0 bottom #64AC28;
 background-size:auto;
 padding:0 0 230px 0;
 margin:0 auto;
 }
}

article#reason section#reason03 h1{
  width:90%;
  margin: 0 auto 20px auto;
}

article#reason section#reason03 h1 img{
  width:100%;
  max-width: 380px;
}

@media print, screen and (min-width:960px) { 
  article#reason section#reason03 h1{
   width:85%;
   margin: 0 auto 40px auto;
  }

  article#reason section#reason03 h1 img{
   width:100%;
   max-width: inherit;
  }
}

article#reason section#reason03 h1 + p{
  width:90%;
  margin: 0 auto 20px auto;
}

article#reason section#reason03 h1 + p img{
  width:90%;
}

@media print, screen and (min-width:960px) { 
  article#reason section#reason03 h1 + p{
    width:80%;
    margin: 0 auto 60px auto;
   }

  article#reason section#reason03 h1 + p img{
    width:100%;
  }
}

article#reason section#reason03 h2{
  width:80%;
  margin: 0 auto 40px auto;
}

article#reason section#reason03 h2 img{
  width:100%;
}

article#reason section#reason03 h2 + p{
  width:80%;
  margin: 0 auto 20px auto;
}

article#reason section#reason03 h2 + p img{
  width:100%;
}

@media print, screen and (min-width:960px) { 
article#reason section#reason03 h2 + p{
  width:60%;
  margin: 0 auto 60px auto;
}

article#reason section#reason03 h2 + p img{
  width:100%;
  }
}

article#reason section#reason03 p img.guts03{
  width:70%;
}

@media print, screen and (min-width:960px) { 
 article#reason section#reason03 p img.guts03{
    width:auto;
 }
}

/*----------------------------------------
                button
-----------------------------------------*/

article#reason a{
  width:75%;
  height:70px;
  display:block;
  font-size:17px; font-size:1.7rem;
  text-align:center;
  line-height:70px;
  color:#FFF;
  padding:0;
  margin:30px auto 60px auto;
}

@media print, screen and (min-width:960px) { 
 article#reason a{
  width:580px;
  height:100px;
  display:block;
  font-size:32px; font-size:3.2rem;
  text-align:center;
  line-height:100px;
  color:#FFF;
  padding:0;
  margin:50px auto 110px auto;
 }
}