@charset "utf-8";

.pc {
  display: block !important;
}

.sp {
  display: none !important;
}


/* home-concept
 * ========================================================================== */
.home-concept{
  position: relative;
  margin: 0;
  padding: 0 0 25vw;
  display: block;
}

.home-concept-block{
  position: relative;
  margin: 0;
  padding: 3em 0;
  width: 100%;
  max-width: 70%;
  display: block;
  opacity: 0;
  transform: translateX(100%);
}

.action-start.home-concept .home-concept-block{
  animation: concept-block 1s 0.5s forwards;
}

@keyframes concept-block{
  0% { opacity: 0; transform: translateX(100%); filter: blur(2rem);}
  100% { opacity: 1; transform: translateX(0%); filter: blur(0);}
}

.home-concept-block:before{
  position: absolute;
  top: 0;
  left: -5vw;
  margin: 0;
  padding: 0;
  width: calc(100% + 10vw);
  height: 100%;
  display: block;
  background-color: rgba(255,255,255,0.5);
  content: "";
  z-index: -2;
}

.home-concept-block .home-concept-catch{
  margin: 2em 0;
  font-size: 2.2rem;
}

.home-concept-block .link-button a{
  position: relative;
  margin: 0;
  width: 100%;
  max-width: 48rem;
}

.home-concept .home-concept-image{
  position: absolute;
  right: 0;
  bottom: 0vw;
  margin: 0;
  padding: 0;
  width: 75vw;
  max-width: 80rem;
  display: block;
  z-index: -5;
  opacity: 0;
  transform: translateX(-100%);
} 

.action-start.home-concept .home-concept-image{
  animation: concept-image 1.5s 0.5s forwards;
}

@keyframes concept-image{
  0% { opacity: 0; transform: translateX(-100%); filter: blur(2rem);}
  100% { opacity: 1; transform: translateX(0%); filter: blur(0);}
}

.home-concept .home-concept-image img{
  margin: auto;
  padding: 0;
  width: 100%;
  display: block;
} 

.home-concept .bg-catch-txt{
  position: absolute;
  bottom: -8%;
  left: 0;
  right: 0;
  margin: auto;
  padding: 0;
  width: 75%;
  max-width: 64rem;
  display: block;
  opacity: 0;
  transform: translateY(0%);
} 

.action-start.home-concept .bg-catch-txt{
  animation: concept-txt 1.2s 1s forwards;
}

@keyframes concept-txt{
  0% { opacity: 0; transform: translateY(-100%); filter: blur(2rem);}
  100% { opacity: 0.5; transform: translateY(0%); filter: blur(0);}
}


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

.home-concept-block{
  padding: 3em 0;
  width: 100%;
  max-width: 100%;
}

.home-concept .home-concept-image{ width: 90vw;} 

}/* End max 640 */



@media screen and (min-width: 1000px) {

 .home-concept{
  position: relative;
  margin: 0;
  padding: 0 0 15vw;
  display: block;
}

.home-concept .home-concept-image{
  width: 70vw;
  max-width: 80rem;
} 

}/* End min 1000 */






/* home-advantage
 * ========================================================================== */
 
 .home-advantage{
  position: relative;
  margin: 0;
  padding: 10em 0 8em;
  display: block;
}

 .home-advantage .lead-txt{
  margin: 2em 0;
  font-size: 1.8rem;
  line-height: 1.6;
  text-align: center;
}

.five-advantages li{
  position: relative;
  padding: 2em 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: solid 0.1rem #fff;
}

.five-advantages li:last-child{ border-bottom: none;}





.five-advantages .left{
  opacity: 0;
  transform: translateX(100%);
}

.five-advantages .right{
  opacity: 0;
  transform: translateX(-100%);
}

.five-advantages .action-start.left{ animation: advantage-left 1s 0.2s forwards;}

@keyframes advantage-left{
  0% { opacity: 0; transform: translateX(-100%); filter: blur(2rem);}
  100% { opacity: 1; transform: translateX(0%); filter: blur(0);}
}

.five-advantages .action-start.right{ animation: advantage-right 1s 0.2s forwards;}

@keyframes advantage-right{
  0% { opacity: 0; transform: translateX(100%); filter: blur(2rem);}
  100% { opacity: 1; transform: translateX(0%); filter: blur(0);}
}


.five-advantages .txt-block{
  padding: 1em 1.5em;
  width: calc(100% - 40rem);
  display: block;
}

.home-advantage .advantage-title{
  margin: 0 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  color: #b1883a;
  font-size: 2.6rem;
  font-size: min(max(2.2rem, calc(2.2rem + ((1vw - 0.48rem) * 0.7692))), 2.6rem);
  font-weight: 500;
  min-height: 0vw;
  line-height: 1.6;
  text-align: left;
}

.home-advantage .advantage-title em{
  margin: 0;
  padding: 0 0.3em 0 0;
  min-height: 0vw;  
  color: #b1883a;
  font-size: 4.8rem;
  font-size: min(max(2.8rem, calc(2.8rem + ((1vw - 0.58rem) * 3.8462))), 4.8rem);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
}

.five-advantages .txt-block .txt{
  font-size: 1.8rem;
  line-height: 1.6;
  text-align: left;
}

.five-advantages .photo{
  width: 40rem;
  display: block;
}

.five-advantages li:nth-child(even) .photo{ order: -1;}



.contentsbanner   { display: flex; justify-content: space-between; flex-wrap: wrap; max-width: 100rem; margin: 2rem auto 0;}
.contentsbanner li{ padding:0 0 1% 0; width: 50%; max-width: 49rem; box-sizing: border-box; }


.kokudo_box {
display: flex;
max-width: 100rem;
margin: 2rem auto 0;
border: 1px solid #d5d5d5;
background-color: #f1f1f1;
padding: 2rem 3rem;
gap: 2rem;
}

.kokudo_box img {
max-width: 20rem;
object-fit: contain;
}

.kokudo_box p strong {
font-size: 2.25rem;
}

.kokudo_box p span {
font-size: 2rem;
}

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

.five-advantages .txt-block{ width: 50%;}
.five-advantages .photo{ width: 50%;}
}/* End max 768 */


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

.five-advantages li{ flex-wrap: wrap;}
.five-advantages .txt-block{ padding: 0; width: 100%;}
.five-advantages .photo{ width: 100%;}
.five-advantages li:nth-child(even) .photo{ order: 2;}

.five-advantages .photo{ width: 75%;}

}/* End max 580 */

/* キャンペーンバナー固定 */
body#TOP #HSMENU div.fairbana {
max-width: 1000px;
margin: 0 auto 10px auto;
}

body#LAYER #MAILFORM div.fairbana {
margin: 20px 0 25px;
}

body#TOP #HSMENU div.fairbana {
max-width: 640px;
margin: 0 auto 10px auto;
}

#WRAPPER{
position: relative;
}

.campaignbanner{
position: fixed;
bottom: 1rem;
left: 1rem;
width: 210px;
z-index: 9999;
}

.banner-close {
position: absolute;
top: -0.3rem;
left: 18.5rem;
z-index: 999;
cursor: pointer;
background: none;
border: none;
font-size: 2.5rem;
}

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

.campaignbanner{
  width: 160px;
}

.banner-close {
top: -0.3rem;
left: 13.5rem;
font-size: 2.4rem;
}

.pc {
display: none !important;
}

.sp {
display: block !important;
}

.contentsbanner li{ width: 100%; max-width: 100%; }

.contentsbanner{
margin-top: 0.5rem;
}

.kokudo_box {
justify-content: center;
align-items: center;
flex-direction: column;
padding: 2rem 1rem;
}

.kokudo_box img {
  max-width: 27rem; 
}
}

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

.campaignbanner{
width: 120px;
}

.banner-close {
left: 9.8rem;
font-size: 2.0rem;
}
}


.urgent-txt {
  width:95%;
  max-width: 46em;
  margin:0.5em auto 1em;
  text-align: center;
}

.urgent-txt .urgent {
  display: inline-block;
  margin: 0 auto;
  font-size: 2.2rem;
  position: relative;
  padding-left: 2.8rem;
  color: #cd2700;
  line-height: 1.2;
}
.urgent-txt .urgent:before {
    content: "!";
    font-weight: bold;
    width: 2.3rem;
    height: 2.3rem;
    background: #cd2700;
    border-radius: 2.5rem;
    color: #FFF;
    position: absolute;
    display: inline-block;
    left: 0;
	line-height: 1.2;
}

.urgent-txt p {
  margin: 0.5em auto 0;
  padding:0.5em 0;
  text-align: left;
  border-top: 0.1rem solid #cd2700;
  border-bottom: 0.1rem solid #cd2700;
}