@charset "utf-8";



/* ==========================================================================
	mv
========================================================================== */
#mv{
    position: relative;
    width: 100%;
    height: 100vh;
    padding-top: 160px;
    position: relative;
    box-sizing:border-box;
}


#mv .main_inr{
    position: relative;
    width: 100%;
    height: 100%;
    z-index:50;
}



#mv .main_inr .mt {
    display: block;

    display: flex;
    align-items: center;
	-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
			flex-wrap: wrap;
flex-direction: row-reverse;
    align-items: flex-start;
    width: 120px;
    height: 290px;
    height: clamp(279px,19.375vw,310px);
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    z-index: 50;
}
#mv .main_inr h1 {
    font-size: 38px;
    font-size: clamp(38px,2.638vw,42px);
    letter-spacing: 0.05em;
    padding:18px 0;
    background:#fff;
    border-radius:2px;
    margin:0 8px;

}

#mv .main_inr h1:nth-child(2){
    padding-bottom: 0;
}

.scroll{
  display: inline-block;
  position: absolute;
    left: 3.8vw;
  bottom: 50px;
  z-index: 50;
  padding: 0 0 80px;
  overflow: hidden;
  color: #222;
  font-size: 14px;
  line-height: 1;
  text-decoration: none;
    -webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    -o-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
}
.scroll:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 47%;
  width: 1px;
  height: 60px;
  background: #222;
  animation: sdl 2.5s cubic-bezier(1, 0, 0, 1) infinite;
}
@keyframes sdl {
  0% {
    transform: scale(1, 0);
    transform-origin: 0 0;
  }
  35% {
    transform: scale(1, 1);
    transform-origin: 0 0;
  }
  35.1% {
    transform: scale(1, 1);
    transform-origin: 0 100%;
  }
  70%, 100% {
    transform: scale(1, 0);
    transform-origin: 0 100%;
  }
}


#mv .img_area{
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#mv .img_area li {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center center;
    opacity: 0;
    -webkit-animation: main 28s linear 0s infinite ;
    animation: main 28s linear 0s infinite ;
    
}
#mv .img_area li:nth-child(1) { 
    background-image: url(../image/main_bg01.jpg);  
}
#mv .img_area li:nth-child(2) {
    background-image: url(../image/main_bg02.jpg);  
    -webkit-animation-delay: 8s;
    animation-delay: 7s;
}
#mv .img_area li:nth-child(3) {
    background-image: url(../image/main_bg03.jpg);   
    -webkit-animation-delay: 16s;
    animation-delay: 14s;
}
#mv .img_area li:nth-child(4) {
    background-image: url(../image/main_bg04.jpg);  
    -webkit-animation-delay: 24s;
    animation-delay: 21s;
}
@-webkit-keyframes main { 
    0% {
        -webkit-animation-timing-function: ease-in;
        -webkit-transform: scale(1);
        opacity: 0;        
    }
    6% {        
        opacity: 1;
    }
    16% {
        opacity: 1;
    }
    25% {
        -webkit-animation-timing-function: ease-out;
        -webkit-transform: scale(1.1);
        opacity: 1;
    }
    31% {
        opacity:1;
    }
    38% {
        opacity: 0;
    }
    50%{
        
        -webkit-transform: scale(1.2);
    }
    
    
    100% { opacity: 0 }
}
@keyframes main { 
    0% {
        animation-timing-function: ease-in;
        transform: scale(1);
        opacity: 0;        
    }
    7% {
        opacity: 1;
    }
    33% {
        animation-timing-function: ease-out;
        transform: scale(1.1);
        opacity: 1;
    }
    40% {
        opacity:1;
    }
    49% {
        opacity: 0;
    }
    66% {
        transform: scale(1.1);
    }
    100% { opacity: 0 }
}




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

    #mv{
        padding-top: 117px;
        height:calc(100vh - 80px);
    }

    .scroll{
        left: 4vw;
      bottom: 5vw;
      padding: 0 0 53px;
      font-size: 10px;
    }

    .scroll:after {
      height: 42px;
    }
    
}
@media screen and (max-width : 600px ){
    
    #mv .main_inr .mt {
        width: 80px;
        height: 183px;
        height: clamp(180px,46.5vw,400px);
    }
    #mv .main_inr h1 {
        font-size: 26px;
        font-size: clamp(25px,6.375vw,28px);
        padding:10px 0;
        margin:0 4px;

    }
}
/* ==========================================================================
	con01
========================================================================== */
#con01 {
    padding:160px 0;
    padding:clamp(160px,11.11vw,200px) 0;
    max-width:1920px;
    margin:0 auto;
}
#con01 .con_inr {
    
    padding:30px 0;
    box-sizing:border-box;
    background:url(../image/con01_bg.jpg) center center;
    background-size:cover;
    
    height: 630px;
    height: clamp(630px,43.75vw,850px);
}
#con01 h2.v_txt {
    position: absolute;
    right: 10.416vw;
    top: -80px;
    padding:20px 0;
    background:#fff;
    border-radius:2px;
    font-size: 34px;
    font-size: clamp(34px,2.36vw,38px);
    z-index:10;
}

#con01 p {
    position: absolute;
	-js-display: flex;
	display:-webkit-box;
	display: -webkit-flex;
	display:-moz-box;
	display:-ms-flexbox;
	display: flex;
	-webkit-justify-content: space-between;
    justify-content: space-between;
	-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
			flex-wrap: wrap;
    flex-direction: row-reverse;
    align-items: flex-start;
    width: 140px;
    right: calc(10.416vw + 120px);
        top: 80px;
    z-index:10;
    letter-spacing: 0.15em;
}
#con01 span.v_txt {
    display: block;
    position: relative;
    width: 36px;
    padding:0 10px;
    border-right:1px solid #ccc;
    font-size: 16px;
    font-size: clamp(16px,1.11vw,19px);
    box-sizing:border-box;
    opacity: .8;
}

#con01 a{

    display: flex;
    align-items: center;
    position: absolute;
    width: 60px;
    height: 300px;
    padding-top: 45px;
    border-radius:2px;
    border:1px solid #222;
    /*
    top: 250px;
    top:clamp(250px,17.2vw,300px);
    left: calc(50% - 370px);
    */
    bottom:80px;
    left:270px;
    left: clamp(270px,18.54vw,310px);
    z-index:10;
    font-size: 15px;
    box-sizing:border-box;
}
#con01 a:after{
    content:"";
    display: block;
    width: 11px;
    height: 80px;
    position: absolute;
    left: 0;
    right: 0;
    bottom:40px;
    margin:auto;
    z-index:10;
    background:url(../image/un_ar.png);
    background-size:cover;
}

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


    #con01 a{
        bottom:80px;
        left: 10vw;
    }
    #con01 h2.v_txt {
        right: 5vw;
    }

    #con01 p {
        right: calc(5vw + 90px);
      }

}
/*
@media screen and (max-width : 1920px ){
    
#con01 a{
    left: ;
    }
}
*/

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

    #con01 {
        padding:85px 0;
        max-width:1920px;
        margin:0 auto;
    }
    #con01 .con_inr {

        padding:87px 0 54px;
        background:#dee5eb;
        height: auto;
    }
    #con01 .img{
        width: 100%;
    }

    #con01 .tit_area {
        position: absolute;
        left: 0;
        right: 0;
        top: -32px;

        display: flex;
        align-items: center;
        justify-content: center; 
        flex-direction: row-reverse;
        align-items: flex-start;
        z-index:10;
    }
    #con01 .tit_area .v_txt {
        position: relative;
        display: inline-block;
        padding:10px 0;
        background:#fff;
        border-radius:2px;
        font-size: 21px;
        font-size: clamp(21px,5.25vw,23px);
        margin:0 7px;
        z-index:10;
    top: 0;
    right: auto;
    }
    #con01 p {
        position: relative;
            display: block;
        width: 220px;
        right:auto;
            top: auto;
        margin:0 auto;

    
    }
    #con01 span.v_txt {
        display: inline-block;
        position: relative;
        width: auto;
        padding:0;
        border-right:none;
        border-bottom:1px solid #cfd1d2;
        font-size: 12px;
        line-height: 32px;
    }
    #con01 span.v_txt:nth-child(2){
        margin: 5px 0;
    }
    #con01 a{

        justify-content: center; 
        position:relative;
        width:220px;
        height: 38px;
        padding-top: 0;
        border-radius:2px;
        border:1px solid #222;
        bottom:auto;
        left:auto;
        text-align: center;
        z-index:10;
        font-size: 11px;
        padding-right: 53px;
        box-sizing:border-box;
        margin:44px auto 0;
    }
    #con01 a:after{
        content:"";
        display: block;
        width: 48px;
        height: 4px;
        position: absolute;
        left:auto;
        right: 35px;
        bottom:0;
        top: 0;
        background-image:url(../image/rt_ar_sp02.png);
    }
    #con01 a:before{
    width: 0;
    height: 100%;
    }
    #con01 a:hover:before{
        width: 100%;
    }
   
}

/* ==========================================================================
	con02
========================================================================== */
#con02 {
    position: relative;
    max-width:1920px;
    margin:0 auto;
}
#con02 .tit_area {
position: absolute;
    left: 0;
    right: 0;
    top: -80px;

    display: flex;
    align-items: center;
    justify-content: center; 
    flex-direction: row-reverse;
    align-items: flex-start;
    z-index:10;
}
#con02 .tit_area .v_txt {
    position: relative;
    display: inline-block;;
    padding:20px 0;
    background:#fff;
    border-radius:2px;
    font-size: 34px;
    font-size: clamp(34px,2.36vw,38px);
    z-index:10;
    margin:0 10px;
    z-index:10;
}
#con02 .img_area {
    position: relative;
    width: 100%;
    height: 33.33vw;
    min-height:480px;
    margin:0 auto;
    background:url(../image/con02_bg.jpg) center center;
    background-size:cover;
    border-radius:2px;
    z-index:1;
}
#con02 p {
    position: relative;
    width: 83%;
    max-width:1095px;
    right: 0;
    background:#f6f6f6;
    padding:4.14vw 2vw 4.14vw 4.14vw;
    box-sizing:border-box;
    font-size: 16px;
    font-size: clamp(16px,1.11vw,17px);
    line-height: 2.25;
    transform:translateY(-111px);
    margin-bottom: -111px;
    z-index:10;
    border-radius:2px;
    letter-spacing: 0.15em;
    color:#555;
    float:right;
}
#con02:after{
    content:"";
    display: block;
    clear:both;
}
#con02 .sp_img_slide{
    display:none !IMportant;
}
@media screen and (max-width : 800px ){

    #con02 .tit_area {
        top: -32px;
    }
    #con02 .tit_area .v_txt {
        padding:10px 0;
        background:#fff;
        border-radius:2px;
        font-size: 21px;
        font-size: clamp(21px,5.25vw,23px);
        margin:0 7px;
    }
    #con02 .img_area {
        position: relative;
        width: 100%;
        height: 64.125vw;
        min-height:200px;
    }
    #con02 .sp_img_slide{
        display: block !Important;
        position: relative;
    }    
    /*
    #con02 .sp_img_slide:before{
        
        content:"";
        display: block;
        padding-top: 72.8%;
    }
    #con02 .sp_img_slide li{
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        background-size: cover;
        background-position: center center;
        opacity: 0;
        -webkit-animation: sp_img_slide 24s linear 0s infinite ;
        animation: sp_img_slide 24s linear 0s infinite ;
    }
    */
    #con02 .sp_img_slide li{
        position: relative;
        background-image:url(../image/sp_img_slide01.jpg);
        background-size: cover;
        background-position: center center;
        border-radius:2px;
    }
    #con02 .sp_img_slide li:before{        
        content:"";
        display: block;
        padding-top: 72.8%;
        
    }
    #con02 .sp_img_slide li.slide02{
        background-image:url(../image/sp_img_slide02.jpg);
/*
        -webkit-animation-delay: 8s;
    animation-delay: 8s;
  */
    }
    #con02 .sp_img_slide li.slide03{
        background-image:url(../image/sp_img_slide03.jpg);
    /*
        -webkit-animation-delay: 16s;
    animation-delay: 16s;
    */
    }
    @-webkit-keyframes sp_img_slide { 
        0% {
            -webkit-animation-timing-function: ease-in;
            -webkit-transform: scale(1);
            opacity: 0;        
        }
        7% {        
            opacity: 1;
        }
        16% {
            opacity: 1;
        }
        33% {
            -webkit-animation-timing-function: ease-out;
            -webkit-transform: scale(1.1);
            opacity: 1;
        }
        40% {
            opacity:1;
        }
        49% {
            opacity: 0;
        }
        66%{

            -webkit-transform: scale(1.2);
        }


        100% { opacity: 0 }
    }
    @keyframes sp_img_slide { 
        0% {
            animation-timing-function: ease-in;
            transform: scale(1);
            opacity: 0;        
        }
        7% {
            opacity: 1;
        }
        33% {
            animation-timing-function: ease-out;
            transform: scale(1.1);
            opacity: 1;
        }
        40% {
            opacity:1;
        }
        49% {
            opacity: 0;
        }
        66% {
            transform: scale(1.2);
        }
        100% { opacity: 0 }
    }




    #con02 p {
        position: relative;
        width: 100%;
        right:auto;
        background:none;
        padding:0;

        margin:32px auto 75px;
        font-size: 12px;
        font-size: clamp(12px,2.93vw,13px);
        line-height: 2.25;
        transform:translateY(0);

        z-index:10;
        border-radius:0;
        letter-spacing: 0.15em;
        float:none;
    }
    #con02:after{
        display: none;
    }
   
}





/* ==========================================================================
	con03
========================================================================== */
#con03 {
    position: relative;
    padding-top: 130px;
}

#con03:before{
    content:"";
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 56.9vw;
    height: 1240px;
    background:#f0f0f0;
}
#con03 .tit_area {
    -js-display: flex;
    display:-webkit-box;
    display: -webkit-flex;
    display:-moz-box;
    display:-ms-flexbox;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    align-items: flex-start;
    width: 90px;
    position: absolute;
    left: 9.5vw;
    top: 80px;
    z-index: 50;
}
#con03 h2.v_txt {
    font-size: 36px;
    padding-left: 20px;
    border-left: 1px solid #222;
    letter-spacing: 0.15em;
}
#con03 .tit_area span {
     padding:2px;
    background:#fff;
    border-radius:2px;
    letter-spacing: 0.15em;
}
#con03 .product_slide {  
    z-index:10;
}
#con03 .slick-next{
    top: -37px;
    left:auto;
    right: 5.55vw;
}
#con03 .slick-prev{
    top: -37px;
    left:auto;
    right: calc(5.55vw + 72px);
}

#con03 .slick-track {
  display: flex;
}

#con03 .slick-slide{
    height:auto !Important;
}
#con03 .product_slide a {
    margin: 0 10px;
}
#con03 .product_slide a {
    position: relative;
    display: block;
    padding-top: 10px;
    padding-bottom: 80px;
    box-sizing:border-box;
}
#con03 .product_slide a.gentei:after{
    content:"";
    display: block;
    width: 22px;
    height: 90px;
    position: absolute;
    right: 30px;
    top: 0px;
    z-index:10;
    background:url(../image/gentei.png);
    background-size:cover;
    
}
#con03 .product_slide a .img_area{
    border-radius:3px;
    overflow: hidden
}
#con03 .product_slide a .img_area img{
    border-radius:3px;
-webkit-transition: all 0.4s cubic-bezier(0.61, 1, 0.88, 1);
-moz-transition: all 0.4s cubic-bezier(0.61, 1, 0.88, 1);
-o-transition: all 0.4s cubic-bezier(0.61, 1, 0.88, 1);
transition: all 0.4s cubic-bezier(0.61, 1, 0.88, 1);
}
#con03 .product_slide a:hover .img_area img{
    transform: scale(1.1);
-webkit-transition: all 0.4s cubic-bezier(0.61, 1, 0.88, 1);
-moz-transition: all 0.4s cubic-bezier(0.61, 1, 0.88, 1);
-o-transition: all 0.4s cubic-bezier(0.61, 1, 0.88, 1);
transition: all 0.4s cubic-bezier(0.61, 1, 0.88, 1);
}
#con03 .product_slide a h3{
    font-size: 22px;
    letter-spacing: 0.1em;
    margin:30px 0 10px;
    line-height:1.5;
    padding:0 1.38vw;
    box-sizing:border-box;
}
#con03 .product_slide a span{
     font-size: 14px;   
    padding:0 1.38vw;
    box-sizing:border-box;
}
#con03 p {
    font-size: 14px;
    line-height: 24px;
    letter-spacing: 0.1em;
    margin-top: 24px;
    padding:0 1.38vw;
    box-sizing:border-box;
}
#con03 h4{
    position: relative;
     width: calc(100% - 2.76vw);
    height: 50px;
    border:1px solid #222;
    border-radius:2px;

    display: flex;
    align-items: center;
    justify-content: center; 
    /*
    margin: 30px auto 0;
    */
    overflow: hidden;
    padding:0 1.38vw;
    position: absolute;
    left: 0;
    right: 0;
    bottom:0;
    margin:auto;
    box-sizing:border-box;
}
#con03 h4:before {
  content: '';
  position: absolute;
  top:0;
  left: 0;
  z-index: -1;
  background:  #fff;
  width: 0;
  height: 100%;
-webkit-transition: all 0.4s cubic-bezier(0.61, 1, 0.88, 1);
-moz-transition: all 0.4s cubic-bezier(0.61, 1, 0.88, 1);
-o-transition: all 0.4s cubic-bezier(0.61, 1, 0.88, 1);
transition: all 0.4s cubic-bezier(0.61, 1, 0.88, 1);
}

#con03 a:hover h4:before{
   width: 100%;  
   background-color: #fff;
	-webkit-transition: all 0.4s cubic-bezier(0.61, 1, 0.88, 1);
    -moz-transition: all 0.4s cubic-bezier(0.61, 1, 0.88, 1);
    -o-transition: all 0.4s cubic-bezier(0.61, 1, 0.88, 1);
    transition: all 0.4s cubic-bezier(0.61, 1, 0.88, 1);
}

#con03 .product_slide a h4 span{
    position: relative;
    padding:0 86px 0 0;
    font-size: 15px;
    letter-spacing: 0.1em;
}

#con03 h4 span:after{
    content:"";
    display: block;
    width: 80px;
    height: 7px;
    position: absolute;
    right: -20px;
    top: 3px;
    background:url(../image/rt_ar.png);
    background-size:cover;
}


#con03 .link{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center; 
    width: 440px;
    height: 70px;
    background:#222;
    border-radius:2px;
    border:1px solid #222;
    box-sizing:border-box;
    margin:90px auto 0;
}
#con03 .link:before{
    z-index:1;
}
#con03 .link span{
     position: relative;
    padding-right: 14px;
    font-size: 15px;
    letter-spacing: 0.1em;
    color:#fff;
    z-index:10;
	-webkit-transition: all 0.4s cubic-bezier(0.61, 1, 0.88, 1);
    -moz-transition: all 0.4s cubic-bezier(0.61, 1, 0.88, 1);
    -o-transition: all 0.4s cubic-bezier(0.61, 1, 0.88, 1);
    transition: all 0.4s cubic-bezier(0.61, 1, 0.88, 1);
}
#con03 .link span:after{
    content:"";
    display: block;
    width: 16px;
    height: 16px;
    position: absolute;
    right: -20px;
    top: 0;
    background:url(../image/link_blank.png);
    background-size:cover;
	-webkit-transition: all 0.4s cubic-bezier(0.61, 1, 0.88, 1);
    -moz-transition: all 0.4s cubic-bezier(0.61, 1, 0.88, 1);
    -o-transition: all 0.4s cubic-bezier(0.61, 1, 0.88, 1);
    transition: all 0.4s cubic-bezier(0.61, 1, 0.88, 1);
}

#con03 .link:hover span{
    color:#222;
	-webkit-transition: all 0.4s cubic-bezier(0.61, 1, 0.88, 1);
    -moz-transition: all 0.4s cubic-bezier(0.61, 1, 0.88, 1);
    -o-transition: all 0.4s cubic-bezier(0.61, 1, 0.88, 1);
    transition: all 0.4s cubic-bezier(0.61, 1, 0.88, 1);  
}

#con03 .link:hover span:after{
     background-image:url(../image/link_blank_af.png); 
	-webkit-transition: all 0.4s cubic-bezier(0.61, 1, 0.88, 1);
    -moz-transition: all 0.4s cubic-bezier(0.61, 1, 0.88, 1);
    -o-transition: all 0.4s cubic-bezier(0.61, 1, 0.88, 1);
    transition: all 0.4s cubic-bezier(0.61, 1, 0.88, 1);  
}


@media screen and (max-width : 800px ){
    
    #con03 {
        position: relative;
        padding: 90px 0 50px;
        background:#f0f0f0;
    }

    #con03:before{
        display: none;
    }
    #con03 .tit_area {
        width: 60px;
        position: absolute;
        left: 0;
        right: 0;
        top: -33px;
        margin:auto;
        z-index: 50;
        display: flex;
        justify-content: center;
        align-items: flex-start;
    }
    #con03 h2.v_txt {
        font-size: 23px;
        padding-left: 11px;
    margin-right: 5px;
    }
    #con03 .tit_area span {
        font-size: 10px;
        margin-left: 5px;
    }
    #con03 .product_slide a {
        margin: 0 5px;
        padding-bottom: 60px;
    }
    #con03 .product_slide a.gentei:after{
        width: 14px;
        height: 57px;
        right: 15px;

    }
    #con03 .product_slide a h3{
        font-size: 15px;
        margin:18px 0 4px;
        padding:0 2.5vw;
    }
    #con03 .product_slide a span{
         font-size: 10px;   
        padding:0 2.5vw;
    }
    #con03 p {
        font-size: 11px;
        line-height: 16px;
        margin-top: 12px;
        padding:0 2.5vw;
        box-sizing:border-box;
    }
    #con03 h4{
         width: calc(100% - 5vw);
        height: 38px;
        /*
        margin: 22px auto 0;
        */
        padding:0;
    }

    #con03 .product_slide a h4 span{
        font-size: 12px;
        padding:0 43px 0 0;
    }

    #con03 h4 span:after{
        /*
        width: 44px;
        */
        width: 48px;
        height: 4px;
        right: -10px;
        top: 3px;
        background-image:url(../image/rt_ar_sp02.png);
        background-size:cover;
        border-radius:0;
        padding:0;
        
    }


    #con03 .link{
        width: 88%;
        height: 49px;
        margin:50px auto 0;
    }
    #con03 .link span{
        padding-right: 10px;
        font-size: 12px;
    }
    #con03 .link span:after{
        width: 12px;
        height: 12px;
        right: -15px;
    }

    
}
/* ==========================================================================
	con04
========================================================================== */
#con04 {
    position: relative;
    max-width:1920px;
    margin:160px auto 115px;
	-js-display: flex;
	display:-webkit-box;
	display: -webkit-flex;
	display:-moz-box;
	display:-ms-flexbox;
	display: flex;
	-webkit-justify-content: space-between;
    justify-content: space-between;
	-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
			flex-wrap: wrap;
    align-items: flex-start;
}
#con04:before{
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 56.9vw;
    height: 180px;
    background: #f0f0f0;
    z-index:1;
}
#con04 .tit_area {
    position: relative;
    width: 25%;
    display: flex;
    justify-content: center;
    
    align-items: flex-start;
    padding-top: 90px;
    z-index:10;
}
#con04 h2.v_txt {
    font-size: 36px;
    padding-left: 20px;
    border-left: 1px solid #222;
    letter-spacing: 0.15em;
}
#con04 .tit_area span {
    display:inline-block;
     padding:2px;
    background:#fff;
    border-radius:2px;
    font-size: 12px;
    margin-left: 20px;
    letter-spacing: 0.15em;
}
#con04 .con_area {
    position: relative;
    z-index:10;
    width: 75%;
}
#con04 .b_con {
    position: relative;
    z-index:10;
}
#con04 .b_con .img_area {
    width: 100%;
    height: 500px;
    height: clamp(500px,34.72vw,550px);
    border-radius:3px;
    overflow: hidden;
    background:url(../image/con04_img01.jpg) center center;
    background-size:cover;
}
#con04 .txt_area {
	-js-display: flex;
	display:-webkit-box;
	display: -webkit-flex;
	display:-moz-box;
	display:-ms-flexbox;
	display: flex;
	-webkit-justify-content: space-between;
    justify-content: space-between;
	-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
			flex-wrap: wrap;
    padding:48px 7.4% 80px 1.85%;
    box-sizing:border-box;
}
#con04 h3.mincho {
    font-size: 24px;
    letter-spacing: 0.1em;
    padding-top: 8px;
}
#con04 .b_con p{
    font-size: 14px;
    line-height: 24px;
    letter-spacing: 0.1em;
}
#con04 .b_con p .en{
    font-size: 14px;
    line-height: 24px;
    letter-spacing: 0.1em;
}
#con04 .b_con p a{    
    display: inline-block;
    text-decoration: underline;
    margin-left: 5px;
}

#con04 .b_con p a:hover{
    color:#aa361b;
}
#con04 .b_con .hvw {
    position: relative;
    width: 320px;
    height: 50px;

    display: flex;
    align-items: center;
    justify-content: center; 
    border:1px solid #222;
}
#con04 .b_con .hvw span.mincho {
    position: relative;
    width: 208px;
    text-align:left;
    padding-right:55px;
    font-size: 15px;
    letter-spacing: -0.2em;
    box-sizing:border-box;

}
#con04 .b_con .hvw span.mincho:after{
    content:"";
    display: block;
    width: 80px;
    height: 7px;
    position: absolute;
    right: 0;
    top: 3px;
    background:url(../image/rt_ar.png);
    background-size:cover;
}

#con04 ul {
	-js-display: flex;
	display:-webkit-box;
	display: -webkit-flex;
	display:-moz-box;
	display:-ms-flexbox;
	display: flex;
	-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
			flex-wrap: wrap;
    padding-right:7.4%;
    box-sizing:border-box;
}

#con04 ul li {
    position: relative;
    width: 32%;
    margin-right: 2%;
    margin-bottom: 45px;
}
#con04 ul li:nth-child(3n){
    margin-right: 0;
}

#con04 ul li .img_area{
    position: relative;
    width: 100%;
    border-radius:3px;
    overflow: hidden;
    background:url(../image/shop_img01.jpg) center center;
    background-size:cover;
}
#con04 ul li:nth-child(2) .img_area{background-image:url(../image/shop_img02.jpg);}
#con04 ul li:nth-child(3) .img_area{background-image:url(../image/shop_img03.jpg);}
#con04 ul li:nth-child(4) .img_area{background-image:url(../image/shop_img04.jpg);}
#con04 ul li:nth-child(5) .img_area{background-image:url(../image/shop_img05.jpg);}



#con04 ul li .img_area:before{
    content:"";
    display: block;
    padding-top: 62.5%;

}

#con04 ul li .text_area{
    position: relative;
    padding-bottom: 50px;
}
#con04 ul li h4.mincho {
    padding:25px 0 0 10px;
    box-sizing:border-box;
    font-size: 22px;
}

#con04 ul li p{
    font-size: 14px;
    line-height: 24px;
    letter-spacing: 0.1em;
    margin:20px 0 30px;
        padding-left: 10px;
    box-sizing:border-box;
}
#con04 ul li p .en{
    font-size: 14px;
    line-height: 24px;
    letter-spacing: 0.1em;
}
#con04 ul li p a{    
    display: inline-block;
    text-decoration: underline;
    margin-left: 5px;
}

#con04 ul li .hvw {
    width: 100%;
    height: 50px;

    display: flex;
    align-items: center;
    justify-content: center; 
    border:1px solid #222;
    position: absolute;
    left: 0;
    bottom:0;
}
#con04 ul li .hvw span.mincho {
    position: relative;
    width: 208px;
    text-align:left;
    padding-right:40px;
    font-size: 15px;
    letter-spacing: -0.2em;
    box-sizing:border-box;

}
#con04 ul li .hvw span.mincho:after{
    content:"";
    display: block;
    width: 80px;
    height: 7px;
    position: absolute;
    right: 0;
    top: 3px;
    background:url(../image/rt_ar.png);
    background-size:cover;
}
@media screen and (max-width : 1100px ){
    
    #con04 ul{
        -webkit-justify-content: space-between;
        justify-content: space-between;
    }
    #con04 ul li {
        position: relative;
        width: 48%;
        margin-right:0;
    }
    
}
@media screen and (max-width : 800px ){

    #con04 {
        margin:0 auto;
        display: block;
        padding: 50px 5.55vw 20px;
        box-sizing:border-box;
    }
    #con04:before{
        display:none;
    }
    #con04 .tit_area {
        width: 53px;
        margin:0 auto;
        z-index: 50;
        padding-top: 0;
    }
    #con04 h2.v_txt {
        font-size: 23px;
        padding-left: 11px;
    margin-right: 5px;
}
    #con04 .tit_area span {
    font-size: 10px;
    margin-left: 5px;
}
    #con04 .con_area {
        width: 100%;
        margin-top: 30px;
    }
    #con04 .b_con {
        position: relative;
        z-index:10;
        margin-bottom: 40px;
    }
    #con04 .b_con .img_area {
        width: 100%;
        height: 57.5vw;
    }
    #con04 .txt_area {
        display: block;
        padding:10px 0 0;
        box-sizing:border-box;
    }
    #con04 h3.mincho {
        font-size: 15px;
    }
    #con04 .b_con p{
        font-size: 12px;
        line-height: 16px;
        margin:15px 0 18px;
    }
    #con04 .b_con p .en{
        font-size: 12px;
        line-height: 16px;
    }
    #con04 .b_con p span.enb{
        display: block;
    }
    #con04 .b_con .hvw {
        position: relative;
        width: 100%;
        height: 38px;
    }
    #con04 .b_con .hvw span.mincho {
        font-size: 12px;
        padding: 0 43px 0 0;
        width: auto;
    }
    #con04 .b_con .hvw span.mincho:after{
    /*width: 44px;*/
    width: 48px;
    height: 4px;
    right: -10px;
    top: 3px;
    background-image: url(../image/rt_ar_sp02.png);
    background-size: cover;
    }

    #con04 ul {
        display: block;
        padding-right:0;
    }

    #con04 ul li {
    	-js-display: flex;
    	display:-webkit-box;
    	display: -webkit-flex;
    	display:-moz-box;
    	display:-ms-flexbox;
    	display: flex;
    	-webkit-justify-content: space-between;
        justify-content: space-between;
    	-webkit-flex-wrap: wrap;
    		-ms-flex-wrap: wrap;
    			flex-wrap: wrap;
         width: 100%;
        margin-bottom: 40px;
    }

    #con04 ul li .img_area{
        width: 48.5%;

    }

    #con04 ul li .text_area{
        width: 45.45%;
    
        display: flex;
        align-items: center;
        padding-bottom:0 ;
        
    }

    #con04 ul li h4.mincho {
        padding:0;
        box-sizing:border-box;
        font-size: 15px;
        line-height: 1.5;
    }

    #con04 ul li p{
        font-size: 12px;
        line-height: 17px;
        margin:14px 0 0;
        padding-left: 0;
    }
    #con04 ul li p .en{
        font-size: 12px;
        line-height: 17px;
    }
    #con04 ul li p a{    
        display:block;
        text-decoration: underline;
        margin-left: 0px;
    }

    #con04 ul li .hvw {
    
        position: relative;
        width: 100%;
        height: 38px;
        margin-top: 15px;
    }
    
    #con04 ul li .hvw span.mincho {
        font-size: 12px;
        padding: 0 43px 0 0;
        width: auto;

    }
    
    #con04 ul li .hvw span.mincho:after{
    width: 44px;
    height: 4px;
    right: -10px;
    top: 3px;
    background-image: url(../image/rt_ar_sp02.png);
    background-size: cover;
    }
    
}



/* ==========================================================================
	con05
========================================================================== */
#con05 {
    position: relative;
    max-width:1920px;
    margin:0 auto 150px;
	-js-display: flex;
	display:-webkit-box;
	display: -webkit-flex;
	display:-moz-box;
	display:-ms-flexbox;
	display: flex;
	-webkit-justify-content: space-between;
    justify-content: space-between;
	-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
			flex-wrap: wrap;
    align-items: flex-start;
}
#con05 .b_img_area{
    
    width: 94.444%;
    height: 440px;
    height: clamp(440px,30.5vw,500px);
    border-radius: 3px;
    overflow: hidden;
    background: url(../image/con05_img.jpg) center center;
    background-size: cover;
}
#con05 .tit_area {
    position: relative;
    width: 25%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 95px;
}
#con05 h2.v_txt {
    font-size: 36px;
    padding-left: 18px;
    border-left:1px solid #222;
    margin-right: 10px;
}
#con05 .tit_area span {
    display:inline-block;
     padding:2px;
    background:#fff;
    border-radius:2px;
    font-size: 12px;
    margin-left: 10px;
}
#con05 .tit_area a {
    display: flex;
    align-items: center;
    position: absolute;
    width: 60px;
    height: 300px;
    padding-top: 45px;
    border-radius: 2px;
    border: 1px solid #222;
    top: 310px;
    left: 0;
    right: 0;
    margin:auto;
    z-index: 10;
    font-size: 15px;
    box-sizing: border-box;
    transform: translateX(-9px);
}
#con05 .tit_area a:after{
    content: "";
    display: block;
    width: 11px;
    height: 80px;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 40px;
    margin: auto;
    z-index: 10;
    background: url(../image/un_ar.png);
    background-size: cover;
}
#con05 .blog_slide{
    width: 75%;
    margin-top: 50px;
    padding-top: 95px;
}
#con05 .slick-next{
    top: 50px;
    left:auto;
    right: 5.55vw;
}
#con05 .slick-prev{
    top:50px;
    left:auto;
    right: calc(5.55vw + 72px);
}
#con05 .blog_slide a{
    position: relative;
     display: block;
    width: 360px;
    margin-right: 20px;
    padding-top: 11px;
}
#con05 .blog_slide a.new:after{
    content:"";
    display: block;
    width: 20px;
    height: 70px;
    position: absolute;
    right: 20px;
    top: 0;
    background:url(../image/new.png);
    background-size:cover;
    z-index:20;

}
#con05 .blog_slide .img_area{
     position: relative;
    width: 100%;
    background-position:center center;
    background-size:cover;
    border-radius:3px;
    overflow: hidden;
}

#con05 .blog_slide .img_area:before{
    content:"";
    display: block;
    padding-top: 100%;
}
#con05 .blog_slide .img_area div{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin:auto;
    width: 100%;
    height: 100%;
    z-index:10;
    background-position:center center;
    background-size:cover;    
    -webkit-transition: all 0.4s cubic-bezier(0.61, 1, 0.88, 1);
    -moz-transition: all 0.4s cubic-bezier(0.61, 1, 0.88, 1);
    -o-transition: all 0.4s cubic-bezier(0.61, 1, 0.88, 1);
    transition: all 0.4s cubic-bezier(0.61, 1, 0.88, 1);
}
#con05 .blog_slide a:hover .img_area div{
    transform: scale(1.1);
    -webkit-transition: all 0.4s cubic-bezier(0.61, 1, 0.88, 1);
    -moz-transition: all 0.4s cubic-bezier(0.61, 1, 0.88, 1);
    -o-transition: all 0.4s cubic-bezier(0.61, 1, 0.88, 1);
    transition: all 0.4s cubic-bezier(0.61, 1, 0.88, 1);
}
#con05 .blog_slide h3{
    
    padding:22px 0px 30px 20px;
    box-sizing:border-box;
}
#con05 .blog_slide h3 span{
    font-size: 22px;
    line-height: 34px;
    letter-spacing: 0.06em;
    background: linear-gradient(#222, #222) 0 100%/0 1px no-repeat;
    transition: background .4s cubic-bezier(0.61, 1, 0.88, 1);
}

#con05 .blog_slide a:hover h3 span {
  background-size: 100% 1px;
    transition: background .4s cubic-bezier(0.61, 1, 0.88, 1);
}
#con05 .blog_slide .day{
    font-size: 14px;
    padding-left: 20px;
    box-sizing:border-box;
}


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

    #con05 {
        margin:0 auto 55px;
        display: block;
    }
    #con05 .b_img_area{

        width: 100%;
        height: 58.5vw;
        border-radius: 0;
    }
    
    

    #con05 .tit_area {
        width: 53px;
        margin:0 auto;
        z-index: 50;
        padding-top: 55px;
    }
    #con05 h2.v_txt {
        font-size: 23px;
        padding-left: 11px;
    margin-right: 5px;
    }
    #con05 .tit_area span {
    font-size: 10px;
    margin-left: 5px;
    }
    
    #con05 .tit_area a {
        display:none;
    }
    #con05 .blog_slide{
        width: calc(100% - 5.8vw);
        margin-left: 5.8vw;
        margin-top: 32px;
        padding-top: 0;
    }
    #con05 .slick-next{
        display:none;
    }
    #con05 .slick-prev{
        display:none;
    }
    #con05 .blog_slide a{
        width: 214px;
        margin-right: 10px;
    }
    #con05 .blog_slide a.new:after{
        width: 14px;
        height: 49px;
        right: 15px;
    }
    #con05 .blog_slide .img_area{
         position: relative;
        width: 100%;
        background-position:center center;
        background-size:cover;
        border-radius:3px;
        overflow: hidden;
    }

    #con05 .blog_slide h3{

        padding:15px 0px 9px 10px;
    }
    #con05 .blog_slide h3 span{
        font-size: 14px;
        line-height: 22px;
    }

    #con05 .blog_slide .day{
        font-size: 10px;
        padding-left: 10px;
    }

    

    #con05 .sp_btn{
        width: calc(100% - 11.6vw);
        position: relative;

        margin:0 auto;

        display: flex;
        align-items: center;
        justify-content: center; 
        height: 49px;
        margin:50px auto 0;
        border-radius: 2px;
        border: 1px solid #222;
        box-sizing:border-box;
    }
    #con05 .sp_btn span{
        position: relative;
        padding: 0 43px 0 0;
        font-size: 12px;
    }
    #con05 .sp_btn span:after{
    content:"";
    display: block;
    position: absolute;
    /*width: 44px;*/
    width: 48px;
    height: 4px;
    right: -10px;
    top: 3px;
    background-image: url(../image/rt_ar_sp02.png);
    background-size: cover;
    }
    
}