/*base▼*/
body {
    width: 100%;
    height: 100%;
    background: #fff;
    color: #333;
    font-size: 12px;
    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "游ゴシック", "Yu Gothic", "メイリオ", Meiryo, Osaka, sans-serif;
}
p {
    margin: 0 0 0px;
}
/*base▲*/

/*背景パララックス▼*/
.background {
  background: 
    url("../img/pc/lp/2018/new_life/sale/bg1.png")
    repeat;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
  background-size:cover;
}
/*背景パララックス▲*/

/* フェードイン▼ */
	.fadeInDown {
	 -webkit-animation-fill-mode:both;
	 -ms-animation-fill-mode:both;
	 animation-fill-mode:both;
	 -webkit-animation-duration:1s;
	 -ms-animation-duration:1s;
	 animation-duration:1s;
	 -webkit-animation-name: fadeInDown;
	 animation-name: fadeInDown;
	 visibility: visible !important;
	}
	@-webkit-keyframes fadeInDown {
	 0% { opacity: 0; -webkit-transform: translateY(50px); }
	 100% { opacity: 1; -webkit-transform: translateY(0); }
	}
	@keyframes fadeInDown {
	 0% { opacity: 0; -webkit-transform: translateY(50px); -ms-transform: translateY(50px); transform: translateY(50px); }
	 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
	}
/* フェードイン▲ */
h2{
font-family: 'Play', sans-serif;
font-size: 2.2em;
padding-bottom: 0;
margin-bottom: 0;
margin-top: 0;
}
h4{
font-size: 12px;
margin-bottom: 2px;
}
/*feature▼*/
.container2{
width: 1010px;
margin: 0 auto;
margin-top: 55%;
padding-bottom: 3%
}
#feature a{
list-style: none;
color: #333;
text-decoration: none;
}
#feature_box p{
font-size: 14px;
}
#feature_box .p1{
width:330px;
height: 205px;
/*overflow: hidden;*/
}
#feature_box img {
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition: .2s ease-in-out;
  transition: .2s ease-in-out;
}
#feature_box a :hover {
  -webkit-transform: scale(1.03);
  transform: scale(1.03);
}
@media (max-width: 1199px) {
.container2{
width: 90%;
margin: 0 auto;
margin-top: 55%;
padding-bottom: 3%
}
#feature_box .p1 {
width: 100%; 
height: auto; 
}
#feature_box img{
width: 100%;
}
 }
 @media (max-width: 767px) {
 .container2{
width: 90%;
margin: 0 auto;
margin-top: 0%;
padding-bottom: 3%
}
#sp_fv img{
width: 100%;
}
#feature_box .p1 {
width: 100%; 
height: auto; 
}
#feature_box img{
width: 100%;
margin-top: 5%;
}
 }

/*topics▼*/
#topics a:hover {
	opacity: 0.7 ;
}
#topics a{
list-style: none;
color: #333;
text-decoration: none;
}
.container3{
width: 1300px;
margin: 0 auto;
padding-bottom: 3%
}
.topic_box{
width: 320px;
padding-top: 4%;
padding-bottom: 10%;
padding-left: 5%;
padding-right: 5%;
background-color: #ffffff;
}
.topic_box p{
font-size: 14px;
}
#topics .row{
    margin-right: 0px;
    margin-left: 0px;
}
#topics .col-lg-3{
padding-left: 2px;
padding-right: 0;
}

#t5{
margin-top: 2%;
}
#t6{
margin-top: 2%;
}
#t7{
margin-top: 2%;
}
#t8{
margin-top: 2%;
}
#t9{
margin-top: -3.3%;
}
#t10{
margin-top: 2%;
}
#t11{
margin-top: 2%;
}
#t12{
margin-top: 2%;
}
#t13{
margin-top: 2%;
}
 @media (max-width: 1299px) {
 .container3{
width: 90%;
margin: 0 auto;
padding-bottom: 3%
}
.t_ph img{
width: 98%;
}
.topic_box{
width: 98%;
padding-top: 4%;
padding-bottom: 10%;
padding-left: 5%;
padding-right: 5%;
background-color: #ffffff;
}

}
 @media (max-width: 767px) {
 .container3{
width: 100%;
margin: 0 auto;
padding-bottom: 3%
}
.t_ph img{
width: 100%;
}
.topic_box{
width: 100%;
padding-top: 4%;
padding-bottom: 10%;
padding-left: 5%;
padding-right: 5%;
background-color: #ffffff;
}
#kisu .col-xs-6{
padding-left: 2%;
padding-right:0.5%;
}
#gusu .col-xs-6{
padding-left: 0.5%;
padding-right:2%;
}
#t3{
margin-top: 2%;
}
#t4{
margin-top: 2%;
}
#t9{
margin-top: 2%;
}
}
 @media (max-width: 380px) {
.ico img{
width: 100%;
}
 }
/*recommend▼*/
#recommend a:hover {
	opacity: 0.7 ;
}
#recommend a{
list-style: none;
color: #333;
text-decoration: none;
}
.container4{
width: 1150px;
margin: 0 auto;
padding-bottom: 3%
}
#recommend .row{
    margin-right: 0px;
    margin-left: 0px;
}
#recommend .col-lg-3{
padding-left: 2px;
padding-right: 0;
}
#recommend h3 {
  position: relative;
  text-align: center;
  margin-bottom: 2.5%;
}
#recommend .row p{
font-size:14px;
padding-top: 2%;
}
#recommend h3 span {
  position: relative;
  z-index: 2;
  display: inline-block;
  margin: 0 2.5em;
  padding: 0 1em;
  background-color: #f6f6f6;
  text-align: left;
  font-size: 20px;
  font-weight: normal;
}
#recommend h3::before {
  position: absolute;
  top: 50%;
  z-index: 1;
  content: '';
  display: block;
  width: 100%;
  height: 1px;
  background-color: #ccc;
}
 @media (max-width: 1150px) {
 .container4{
width: 90%;
margin: 0 auto;
padding-bottom: 3%
}
#recommend img{
width: 98%;
}
#recommend .row p{
width: 98%;
font-size:14px;
padding-top: 2%;
}
 }
 @media (max-width: 767px) {
 .container4{
width: 90%;
margin: 0 auto;
padding-bottom: 3%
}
#recommend img{
width: 100%;
margin-left: 2%;
margin-top: 5%;
}
 #recommend h3 {
    position: relative;
    text-align: center;
    margin-bottom: 2.5%;
	margin-top: 8%;
} 
  }
@media (max-width: 355px) {
#recommend h3 span {
    position: relative;
    z-index: 2;
    display: inline-block;
    margin: 0 2.5em;
    padding: 0 1em;
    background-color: #f6f6f6;
    text-align: left;
    font-size: 18px;
    font-weight: normal;
}
}
/*footer▼*/
.bg_f{
width: 100%;
background: url("../img/pc/lp/2018/new_life/sale/footerbg.png");
background-size:cover;
}
 .container5{
width: 610px;
margin: 0 auto;
padding-bottom: 3%
}
#foot ul li{
margin-top: 8%;
list-style: none;
float: left;
margin-left: 5%;
}
#foot ul a {
color: #ffffff;
font-weight: bold;
font-size: 14px;
}
#foot ul li:first-child {padding-left:5%;}

@media (max-width: 610px) {
.container5{
width: 90%;
margin: 0 auto;
padding-bottom: 3%
}
#foot ul li:first-child {padding-left:2%;}
#foot img{
width: 60%;
}
}
@media (max-width: 350px) {
.container5{
width: 90%;
margin: 0 auto;
padding-bottom: 3%
}
#foot img{
width: 70%;
}
#foot ul li{
margin-top: 8%;
list-style: none;
float: left;
margin-left: 5%;
padding-bottom: 3%;
}
#foot #co{
padding-bottom: 3%;
}
}


/*common▼*/

.mt0{
margin-top: 0;
}
.mb0{
margin-bottom: 0;
}
.mt3{
margin-top: 3%;
}
.mt5{
margin-top: 5%;
}
.mt8{
margin-top: 8%;
}
.mt10{
margin-top: 10%;
}
.ml0{
margin-left: 0;
}
.mb3{
margin-bottom: 3%;
}
.mb4{
margin-bottom: 4%;
}
.mr2{
margin-right: 2%;
}
.pt0{
padding-top:0;
}
.pt5{
padding-top:5%;
}
.pt15{
padding-top:15%;
}
.pt20{
padding-top:20%;
}
.pb0{
padding-bottom:0;
}
.pb3{
padding-bottom:3%;
}
.bg_w{
background-color: #ffffff;
}
.bg_g{
background-color: #b2b1b1;
}
.bg_g2{
background-color: #f6f6f6;
}
.fc_w{
color: #ffffff;
}
.gray{
color: #999999;
}
.fs12{
font-size: 12px;
}