@charset "UTF-8";
:root{
	--body : #333;
	--link : #333;
	--title : #333;
	--main : #333;
	--base : #333;
	--mainBold : #333;
	--sub : #333;
	--white : #333;
	--bg : #333;
}
/*--------------------------------------------
HOME
---------------------------------------------*/
#mv{
	color : #fff;
}
#mv p:nth-of-type(1){
	border-bottom-color : #fff;
	border-bottom-style : solid;
}
#mv h2{
	border-bottom-color : #fff;
	border-bottom-style : solid;
}
#mv h2 img{
	width : auto;
	max-width : inherit;
}
#mv p:nth-of-type(2) img{
	width : auto;
	max-width : inherit;
}
.slide-items {
  width: 100%;
  height: 100%;
}

.slide-items img {
  width: 100%;
  object-fit: cover;
}
@media screen and (max-width: 768px){
	#mv{
		background : url("../images/home/mv_sp.jpg") center center / 100% auto no-repeat;
	}
	#mv .wrap{
		text-align : center;
		height : calc( 477 * 100vw / 768 );
		padding-top : calc( 233 * 100vw / 768 );
	}
	#mv p:nth-of-type(1){
		font-size : calc( 34 * 100vw / 768 );
		padding-bottom : 12px;
		border-bottom-width : calc( 2 * 100vw / 768 );
	}
	#mv h2{
		margin-top : calc( 16 * 100vw / 768 );
		padding-bottom : calc( 9 * 100vw / 768 );
		border-bottom-width : calc( 2 * 100vw / 768 );
	}
	#mv h2 img{
		height : calc( 64 * 100vw / 768 );
	}
	#mv p:nth-of-type(2) img{
		height : calc( 64 * 100vw / 768 );
	}
}
@media print,screen and (min-width: 769px){
	#mv{
        background-image:url(../images/home/mv_back_01.png),url(../images/home/mv_back_03.png),url(../images/home/mv_back_02.png);
      background-repeat: no-repeat,repeat,no-repeat;
      background-size:  auto 100%  , auto , cover ;
      background-position: center right , center center , center center;
	}
	#mv .wrap{
		height : 800px;
	}
    #mv .catch-wrap {
        position: relative;
		height : 800px;
    }
        #mv .catch-wrap img {
            position: absolute;
            left: 0px;
            top: calc(50% - 100px);
        }
        #mv .catch-wrap .catch01 {
            left: -20px;
            top: calc(50% - 140px);
        }
        #mv .catch-wrap .catch02 {
        }
        #mv .catch-wrap .catch04 {
        }
        #mv .catch-wrap .catch04 {
        }

}
@media screen and (max-width: 768px){
	main{
		padding-top : calc( 110 * 100vw / 768 );
	}
}
@media print,screen and (min-width: 769px){
	main{
        padding-top: 0px;
	}
}
/*--------------------------------------------
NEWS
---------------------------------------------*/
#news li{
    width: 100%;
    padding: 1em 0 ;
    border-bottom: 1px dotted #ccc;
}
#news li a{
    width: 100%;
	display : flex;
	align-items : flex-start;
}

#news time{
	color : #221815;
	flex-shrink : 0;
}
#news h4{
	font-weight : 500;
	color : #221815;
	letter-spacing : 0;
}
@media screen and (max-width: 768px){
	#news .wrap{
		padding-top : calc( 69 * 100vw / 768 );
		padding-bottom : calc( 63 * 100vw / 768 );
	}
	#news ul{
		margin-top : calc( 48 * 100vw / 678 );
	}
	#news li + li{
		margin-top : calc( 30 * 100vw / 768 );
	}
    #news li a{
        flex-wrap: wrap;
    }
	#news time{
		font-size : calc( 26 * 100vw / 768 );
		width : calc( 200 * 100vw / 768 );
        padding-top: calc( 12 * 100vw / 768 );
	}
	#news .categories{
		width : calc( 300 * 100vw / 768 );
		height : calc( 43 * 100vw / 768 );
		font-size : calc( 26 * 100vw / 768 );
	}
	#news h4{
		width : 100%;
		font-size : calc( 26 * 100vw / 768 );
		line-height : 1.46;
        padding-top: calc( 12 * 100vw / 768 );
	}
	#news .link-more{
		margin-top : calc( 38 * 100vw / 768 );
	}
}
@media print,screen and (min-width: 769px){
	#news .wrap{
		padding-top : 47px;
		padding-bottom : 45px;
	}
	#news ul{
		margin-top : 28px;
	}
	#news li{
	}

	#news time{
		font-size : 14px;
		width : 120px;
	}
	#news .categories{
		width : 130px;
		height : 25px;
		font-size : 14px;
        margin-right: 2em;
	}
	#news h4{
		font-size : 14px;
		line-height : 1.43;
        width:calc(100% - 130px - 120px - 2em);
	}
	#news .link-more{
		margin-top : 38px;
	}
}

/*--------------------------------------------
SECTION 01
---------------------------------------------*/
#section01 {
}
@media screen and (max-width: 768px){
	#section01{
        padding-top: calc( 60 * 100vw / 768 );
        background-size: 100% auto;
        background-position: bottom center;
        background-repeat: no-repeat;
        padding-bottom: calc( 300 * 100vw / 768 );
	}
	#section01 .wrap{
		padding-bottom : calc( 134 * 100vw / 768 );
	}
	#section01 .text{
		font-size : calc( 26 * 100vw / 768 );
		line-height : 1.77;
	}
        #section01 .text-box h3{
            font-size: calc( 40 * 100vw / 768 );
            margin-bottom: calc( 10 * 100vw / 768 );
            line-height: 1.3;
        }
}
@media print,screen and (min-width: 769px){
	#section01{
        padding-top: 80px;
        padding-bottom: 80px;
	}
    #section01 .wrap{
	}
        #section01 .wrap .box{
            justify-content: space-between;
        }
	#section01 .text-box{
		padding-top : 80px;
		padding-bottom : 80px;
        padding-left: 20px;
	}
        #section01 h2{
            font-size: 30px;
            margin-bottom: 20px;
            font-family : var(--fontFamilySerif);
            line-height: 1.3;
        }
        #section01 h3{
            font-size: 24px;
            margin-bottom: 20px;
            font-family : var(--fontFamilySerif);
            line-height: 1.3;
        }

}
/*--------------------------------------------
SECTION 02
---------------------------------------------*/


@media screen and (max-width: 768px){
	#section02{
		background-image : url("../images/home/products_back.png");
        background-position: center;
        padding: 30px 0 ;
	}
}
@media print,screen and (min-width: 769px){
	#section02{
		background-image : url("../images/home/products_back.png");
        background-position: center;
        background-repeat: repeat;
        background-attachment: fixed;
        padding: 80px 0 ;
        color: #fff;
	}
        .products-list{
            margin-top: 40px;
        }
        .products-list a{
            display: flex;
            justify-content: center;
            align-items: center;
            background: #efefef;
            flex-direction: column;
        }
            .products-list a:hover{
                opacity: .8;
                background: #fff;
            }
            .products-list a img{
                width: 100%;
                height: auto;
            }
            .products-list .text{
                padding: 15px;
                text-align: left;
                width: 100%;
            }
            .products-list h3{
            }
            .products-list a{
            }
}
#section02 #map iframe{
   filter: grayscale(100%);
   transition: all 0.7s ease;
}