@charset "utf-8";

/*



------------------------------------------------------------------------------------------*/
#contents{
  width: 100%;
}
.mv{
  width: 100%;
    /*background: url(../img/mvbg.jpg) repeat;*/
    background: #debf7d;
    position: relative;
    z-index: 1;
}
.mv:before{
  content: "";
  background: url(../img/mvbg.jpg) repeat;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  opacity: 0.4;
}
.mv:after{
  content: "";
    background: url(../img/a.png) repeat-x;
    width: 100%;
    height: 22px;
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 2;
}
.mv-inner{
  width: 960px;
    height: 334px;
    margin: 0 auto;
    background: url(../img/mv.png) no-repeat 1px center;
    background-size: 960px 334px;
    position: relative;
    z-index: 3;
}
.read{
  position: absolute;
    bottom: 48px;
    left: 52px;
    color: #1e1933;
    font-size: 16px;
    line-height: 1.5;
    background: url(../img/txt_read.svg) no-repeat center center;
    width: 232px;
    height: 68px;
    background-size: 232px;
    text-indent: -9999px;
    overflow: hidden;
    white-space: nowrap;
}
.sec{
  width: 960px;
  margin: 0 auto;
  position: relative;
}
.ttl{
  font-size: 20px;
  font-weight: bold;
  position: absolute;
  line-height: 1.3;
}

.txt{
  font-size: 14px;
  color: #1e1933;
  line-height: 1.4;
}
.txt-link{
  font-size: 14px;
  font-weight: bold;
  background: url('../img/arw.png') no-repeat 98% center;
  background-size: 21.5px;
  margin-bottom: 7px;
    line-height: 1.5;
  transition: .1s ease-in;
  -webkit-transition: .1s ease-in;
}
.txt-link:hover{
  background: url('../img/arw.png') no-repeat 100% center;
  background-size: 21.5px;
}
.txt-link > a{
  color: #1e1933;
  display: block;
  text-decoration: none;
}
.txtbox{
  width: 220px;
  position: absolute;
    letter-spacing: 0.01em;
    /*text-align: justify;*/
}
.txtbox-2{
  width: 500px;
  position: absolute;
    /*text-align: justify;*/
}
.txtbox-2-landscape{
  width: 212px;
    display: inline-block;
    vertical-align: top;
    margin: 0 15px;
}
.txtbox-3{
  width: 450px;
  position: absolute;
    /*text-align: justify;*/
}
.txtbox-3-landscape{
  width: 170px;
    display: inline-block;
    vertical-align: top;
    margin: 0 15px;
}
.sns-ul:after{
  content: "";
    display: block;
    clear: both;
}
.sns-ul li{
  float: left;
  list-style: none;
  margin-right: 10px;
}
.sns-ul li a{
  display: block;
  width: 43.5px;
  margin: 0 auto;
}
.sns-ul li a img{
  width: 100%;
}
.t:after{
  content: "Twitter";
  font-size: 12px;
  font-weight: bold;
  color: #1e1933;
  display: block;
  text-align: center;
    line-height: 1;
}
.f:after{
  content: "facebook";
  font-size: 12px;
  font-weight: bold;
  color: #1e1933;
  display: block;
  text-align: center;
    line-height: 1;
}
.i:after{
  content: "Instagram";
  font-size: 12px;
  font-weight: bold;
  color: #1e1933;
  display: block;
  text-align: center;
    line-height: 1;
}


/*



------------------------------------------------------------------------------------------*/
.bg-1{
  height: 451px;
  background: url('../img/bg_1.jpg') no-repeat center center;
}
.bg-2{
  height: 424px;
  background: url('../img/bg_2.jpg') no-repeat center center;
}
.bg-3{
  height: 410px;
  background: url('../img/bg_3.jpg') no-repeat center center;
}
.bg-4{
  height: 203px;
  background: url('../img/bg_4.jpg') no-repeat center center;
  margin-bottom: 60px;
}



/*



------------------------------------------------------------------------------------------*/

.dt-1{
    top: 71px;
    left: 128px;
    width: 279px;
    height: 26px;
    background: url('../img/ttl_1.svg') no-repeat center center;
    background-size: 279px;
    text-indent: -9999px;
    white-space: nowrap;
    overflow: hidden;
}
.dd-2{
    width: 228px;
    bottom: 35px;
    left: 75px;
}
.dt-3{
  color: #774c00;
    top: 79px;
    right: 233px;
    width: 170px;
    height: 26px;
    background: url(../img/ttl_2.svg) no-repeat center center;
    background-size: 170px ;
    text-indent: -9999px;
    white-space: nowrap;
    overflow: hidden;
}
.dd-4{
  width: 247px;
    right: 58px;
    bottom: 132px;
}
.dt-5{
  color: #0d5900;
    top: 110px;
    left: 123px;
    width: 279px;
    background: url(../img/ttl_3.svg) no-repeat center center;
    background-size: 279px;
    text-indent: -9999px;
    white-space: nowrap;
    overflow: hidden;
}
.dd-6{
  left: 64px;
    bottom: 65px;
}
.dt-7{
  color: #751300;
    top: 14px;
    right: 178px;
    width: 134px;
    background: url(../img/ttl_4.svg) no-repeat center center;
    background-size: 134px ;
    text-indent: -9999px;
    white-space: nowrap;
    overflow: hidden;
}
.dd-8{
    right: 64px;
    bottom: 126px;
}
.dt-9{
  color: #770044;
    top: -103px;
    left: 416px;
    width: 150px;
    height: 50px;
    background: url(../img/ttl_5.svg) no-repeat center center;
    background-size: 150px ;
    text-indent: -9999px;
    white-space: nowrap;
    overflow: hidden;
}
.dd-10{
  top: 30px;
    right: 92px;
}
.dt-11{
  color: #594200;
    top: -99px;
    left: 126px;
    width: 226px;
    height: 29px;
    background: url(../img/ttl_6.svg) no-repeat center center;
    background-size: 226px;
    text-indent: -9999px;
    white-space: nowrap;
    overflow: hidden;
}
.dd-12{
  top: 11px;
    left: 272px;
}