@charset "utf-8";

/* main content */

.area-all {
  position: relative;
  cursor: pointer;
}
.area-all .category {
  display: inline-block;
  padding: 0.9375rem 1.875rem;
  margin-bottom: 0.9375rem;
  background-color: #9c360a;
  font-size: 1.375rem;
  font-family: 'S-CoreDream-7ExtraBold';
  line-height: 100%;
  color: #fff;
  border-radius: 1.875rem;
}
.area-all .tit {
  margin-bottom: 0.625rem;
  font-size: 1.75rem;
  font-family: 'S-CoreDream-7ExtraBold';
  line-height: 1.4;
  letter-spacing: -0.025em;
  transform: skew(-0.1deg);
}
.area-all .txt {
  font-size: 1rem;
  line-height: 1.625rem;
  word-break: keep-all;
}
.area-all .more {
  position: absolute;
  left: 1.875rem;
  bottom: 1.875rem;
  display: inline-block;
  width: 6.813rem;
  /* height: 2.375rem; */
  border: 0.1875rem solid #9c360a;
  color: #9c360a;
  text-align: center;
  line-height: 2.375rem;
  font-weight: 500;
}

.cont1-area {
  position: relative;
  height: 30rem;
  background-color: #f3ece5;
}
.cont1-area .visual .area-all .tit {
  font-size: 2.5rem;
}
.cont1-area .showcase {
  position: absolute;
  right: 0;
  top: 50%;
transform: translateY(-50%);
}
.cont1-area .area1 {
  padding: 6.875rem 1.875rem;
}

.cont2-area {
  padding: 2.5rem 0;
}
.cont2-area:after {
  content: "";
  display: block;
  clear: both;
}
.cont2-area .area2 {
  float: left;
  width: 48.3333%;
  min-height: 21.25rem;
  margin-right: 3.3334%;
  padding: 2.125rem;
  background: #f4f4f4 url('../images/main/cont2_1_bg.png') no-repeat bottom right;
}
.cont2-area .area3 {
  float: left;
  width: 48.3333%;
  min-height: 21.25rem;
  padding: 2.125rem;
  background: #e3a042 url('../images/main/cont3_1_bg.png') no-repeat bottom right;
  background-size: auto 100%;
}
.cont2-area .area3 * {
  color: #fff !important;
}
.cont2-area .area3 .category .point {
  color: #a4e0ff;
}
.cont2-area .area3 .more {
  border-color: #fff;
}

.cont3-area {
  padding: 2.5rem 0;
  background-color: #fff7e7;
}

.cont3-area .area4 {
	position: relative;
}
.area4:after {
	content: "";
	clear: both;
	display: block;
}
.area4 .text_box {
	float: left;
	width: 37.5833%;
}
.area4 .img_box {
	float: left;
  width: 62.4166%;
}
.area4 .text_box .box {
	margin: 2.5rem 0;
}
.area4 .more {
  left: 0;
  bottom: 0;
}

.cont4-area {
  padding: 2.5rem 0;
}
.cont4-area:after {
  content: "";
  display: block;
  clear: both;
}

.cont4-area .area5 {
  float: left;
  width: 48.3333%;
  min-height: 21.25rem;
  margin-right: 3.3334%;
  padding: 2.125rem;
  background: #d6dbef url('../images/main/cont5_1_bg.png') no-repeat bottom right;
  background-size: auto 100%;
}
.cont4-area .area6 {
  float: left;
  width: 48.3333%;
  min-height: 21.25rem;
  padding: 2.125rem;
  background: #63636e url('../images/main/cont6_1_bg.png') no-repeat center right;
  background-size: auto 100%;
}
.cont4-area .area6 .category {
  background-color: #fff;
  color: #222;
}
.cont4-area .area6 .category .point {
  color: #9c360a;
}
.cont4-area .area6 .tit {
  color: #fff;
}
.cont4-area .area6 .more {
  border: 0.1875rem solid #fff;
  color: #fff;
}


@media all and (max-width:1200px) {

  .cont1-area .showcase {
    width: 50%;
  }
  .area4 .text_box {
  	float: none;
  	width: 100%;
    margin-bottom: 1.25rem;
  }
  .area4 .img_box {
    float: none;
  	width: 100%;
  }
  .area4 .text_box .more {
    position: relative;
    margin-top: 1.25rem;
  }
}

@media all and (max-width:960px) {
  .main-content {padding-top: 5.714rem;}

  .cont1-area {
    height: auto;
  }
  .cont1-area .showcase {
    position: static;
    width: auto;
    transform: none;
  }
  .cont1-area .area1 {
    padding: 1.875rem 0.625rem 0 0.625rem;
  }
  .cont1-area .area1 .more {
    position: static;
    left: 0;
    margin-top: 1.25rem;
  }
}

@media all and (max-width:768px) {
  .area-all .category {
    padding: 0.7143rem 1.429rem 0.5714rem 1.429rem;
    font-size: 0.85714rem;
  }
  .cont1-area .visual .area-all .tit,
  .area-all .tit {
    font-size: 1.4286rem;
  }
  .area-all .more,
  .cont4-area .area6 .more {
    position: static;
    margin-top: 1.25rem;
    border-width: 2px;
    line-height: 2rem;
    font-size: 0.85714rem;
  }
  .cont2-area,
  .cont3-area,
  .cont4-area {padding: 1.25rem 0;}
  .cont2-area .area2 {
    float: none;
    width: 100%;
    padding: 1.286rem 1rem;
    margin-right: 0;
    margin-bottom: 1.25rem;
    background-size: 50% auto;
  }
  .cont2-area .area3 {
    float: none;
    width: 100%;
    padding: 1.286rem 1rem;
    background-image: url('../images/main/m_cont3_1_bg.png');
  }

  .cont4-area .area5 {
    float: none;
    width: 100%;
    padding: 1.286rem 1rem;
    margin-right: 0;
    margin-bottom: 1.25rem;
    background-image: url('../images/main/m_cont5_1_bg.png');
    background-color: #d0d7ec;
  }
  .cont4-area .area6 {
    float: none;
    width: 100%;
    padding: 1.286rem 1rem;
    background-position: bottom right;
    /* background-size: 50% auto; */
    background-image: url('../images/main/m_cont6_1_bg.png');
  }
/*
  .cont4-area .area6 {
    float: left;
    width: 48.3333%;
    min-height: 21.25rem;
    padding: 2.125rem;
    background: #63636e url('../images/main/cont6_1_bg.png') no-repeat center right;
    background-size: auto 100%;
  } */
}