@charset "utf-8";
*{
	position:relative;
	box-sizing:border-box;
}

body,input,select,textarea{
	font-family: "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "游ゴシック", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 500;
	font-size:16px;
	line-height:1.5;
	letter-spacing:0.08em;
	color:#333;
}

h1,h2,h3,h4,h5,h6{
}

a{
	color:rgb(47, 68, 160);
}

.btn{

}

.btn a{
	display:inline-block;
	padding:1em;
	color:#fff;
	background:#333;
	border: 1px solid #333;
	transition: .2s;
}

.btn a:hover{
	color:#333;
	background:#fff;
}

/* css animation (prefixes are cut) */
.animation {
	opacity:0;
}

.fadeup {
	transform-origin:center top;
	animation:fadeup 1s both;
}

.slidein_left {
	transform-origin:right center;
	animation:slidein_left 1s both;
}

.slidein_right {
	transform-origin:left center;
	animation:slidein_right 1s both;
}

.d3 {animation-delay:.3s;}
.d5 {animation-delay:.5s;}
.d10 {animation-delay:1s;}
.d15 {animation-delay:1.5s;}
.d20 {animation-delay:2s;}
.d25 {animation-delay:2.5s;}
.d30 {animation-delay:3s;}
.d35 {animation-delay:3.5s;}
.d40 {animation-delay:4s;}
.d45 {animation-delay:4.5s;}
.d50 {animation-delay:5s;}
.d55 {animation-delay:5.5s;}
.d60 {animation-delay:6s;}

@keyframes fadeup {
	0% {
		transform:translate(0,2em);
		opacity:0;
	}
	100% {
		transform:translate(0,0);
		opacity:1;
	}
}

@keyframes slidein_left {
	0% {
		transform:translate(-2em,0);
		opacity:0;
	}
	100% {
		transform:translate(0,0);
		opacity:1;
	}
}

@keyframes slidein_right {
	0% {
		transform:translate(2em,0);
		opacity:0;
	}
	100% {
		transform:translate(0,0);
		opacity:1;
	}
}

/* header */

header{
}

#title{
	position: absolute;
	display:flex;
	justify-content: space-between;
	align-items: center;
	margin:auto;
	padding: .5em 1em;
	width: 100%;
	background: linear-gradient(180deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.4) 38%, rgba(255,255,255,0) 100%);
    background:#fff;
    border-bottom:3px solid #f10;
    top:0;
	left:0;
	z-index: 100;

}

#page #title{
    border-bottom:0;
}

#title h1 a{
	display:flex;
    flex-direction: column;
    justify-content: center;
    padding-left:65px;
	width:560px;
	height: 85px;
	background-image:url(./img/lotas_icon.webp);
	background-repeat: no-repeat;
	background-position: left center;
	overflow: hidden;
}

#title h1 a span{
    display: inline-block;
    color:#333;
    font-family: 'M PLUS Rounded 1c', sans-serif;
}

#title h1 a span.title_main{
    font-size:155%;
    font-weight:bold;
}

#title p{
	font-size:130%;
}
#title p span{
	color: #cc2002;
	font-size: 150%;
	font-weight:bold;
}

#topimage{
	z-index: 1;
}

#topimage p{
	height:95vh;
	background-position: center;
	background-size: cover;
}

#topimage p span{
	position: absolute;
	display: table;
	margin: auto;
	padding:1em;
	color:#fff;
	font-weight: bold;
	font-size:230%;
	text-align: right;
	background-color: rgba(0,0,0,.5);
	top:150px;
	right:1em;
}

#topimage p span::before{
	position: absolute;
	content: '';
	margin: auto;
	height:1px;
	width:100%;
	background:#fff;
	bottom:.5em;
	right:-.5em;
}

#topimage p span::after{
	position: absolute;
	content: '';
	margin: auto;
	height:100%;
	width:1px;
	background:#fff;
	bottom:-.5em;
	right:.5em;
}

#Dlight_image,
#Dlight_image.slick-slider .slick-track,
#Dlight_image.slick-slider .slick-list,
#Dlight_image.slick-slider .slick-list p{
    height:100%;
    min-height: 320px;
    width:100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

#Dlight_image.slick-slider .slick-list p span{
    position: absolute;
    padding:1em;
    width:100%;
    font-size:80%;
    color: #fff;
    background:rgba(0,0,0,.8);
    bottom:0;
    left: 0;
}

/* news */
#news{
	position: absolute;
	margin: auto;
	padding:1em;
	background-color: rgba(0,0,0,.5);
	bottom:70px;
	right:2.3em;
	z-index: 10;
}


#news::after{
	position: absolute;
	content: '';
	margin: auto;
	height:calc(100% - .5em);
	width:calc(100% - .5em);
	border:1px solid #fff;
	bottom:.25em;
	right:.25em;
}

#news p{
	margin-bottom: .5em;
	color: #fff;
	border-bottom:1px dotted #fff;
}

#news li{
	padding:.5em;
	color:#fff;
	font-size:90%;
}

#news li span{
	display: inline-block;
	margin-right:1em;
}

#news li a{
	color:#fff;
	text-decoration: underline;
}

#news li a:hover{
	text-decoration: none;
}

/* nav */
#gnav{
	position: absolute;
	margin: auto;
	padding-top: 160px;
	height:100%;
	background-color: rgba(0,0,0,.5);
	box-shadow: 2px 2px 5px #fff;
	z-index:5;
	bottom:0;
	left:0;
	opacity:0;
}

#gnav::before{
	position: absolute;
	content: '';
	margin: auto;
	height:100%;
	width:1px;
	background:#fff;
	top:0;
	left:1em;
}

#gnav > ul{
	margin:auto;
	max-width:1200px;
}

#gnav a{
	display: block;
	padding:1em 2em;
	color: #fff;
	font-weight:bold;
	font-size: 110%;
	transition:.2s;
}

#gnav a:hover{
	color: #333;
	background-color:#fff;
}

#gnav > ul > li{
	width:100%;
}

#gnav ul ul{
	position: absolute;
	margin:auto;
	width:0;
	overflow: hidden;
	top:0;
	left:100%;
	transition: .2s;
}

#gnav ul ul.open{
	width:100%;
}

#gnav ul ul a{
	padding:8px 16px;
	font-size:90%;
	color:#333;
	background-color: rgba(255,255,255,0.8);
	white-space: nowrap;
}

/* content */
main{
	padding:3em 0;
}

.content{
	margin:0  auto 3em;
	padding:1em;
	max-width:1200px;
}

.halfbox{
	display:flex;
	justify-content: space-between;
}

.halfbox .inner_left,
.halfbox .inner_right{
	padding:1em;
	width:100%;
    overflow:hidden;
}

.content h2 {
	text-align: center;
}
.content h2 span{
	display: inline-block;
	margin-bottom:1.5em;
	padding:1em;
	font-size:130%;
	font-weight: bold;
}

.content h2 span::first-letter{
	color:#cc2002;
	font-size:110%;
}

.content h2 span::before{
	position: absolute;
	content: '';
	margin: auto;
	height:1px;
	width:100%;
	background:#333;
	bottom:.5em;
	right:-.5em;
}

.content h2 span::after{
	position: absolute;
	content: '';
	margin: auto;
	height:100%;
	width:1px;
	background:#608be5;
	bottom:-.5em;
	right:.5em;
}

.content h3{
    display: table;
	margin:0 0 1.5em;
	padding:1em 2em;
	color:#fff;
	background: linear-gradient(180deg, rgba(96,139,229,1) 0%, rgba(96,139,229,1) 63%, rgba(70,115,207,1) 100%);	
    z-index: 10;
}

.content h3:before{
	position: absolute;
	content: '';
	margin: auto;
	width:32px;
	height: 1px;
	background-color: #333;
	top:0;
	bottom:0;
	left: 99%;
	z-index: 1;
}

.content p{
	margin-bottom:1.5em;
}

.content img{
    margin:.5em;
	max-width:calc(100% - 1em);
	height:auto;
	box-shadow:8px 8px 0 #aaa;
}

.content table{
    margin-bottom: 1.5em;
    border-top:3px solid #666;
}

.content td{
    padding:1em;
    border-bottom:1px solid #ccc;
}

.content th{
    padding:1em;
    word-break: keep-all;
    font-weight: bold;
    border-bottom:1px solid #ccc;
}

.content table tbody tr:last-child th,
.content table tbody tr:last-child td{
    border-bottom:3px solid #666;
}

/* top content */
#company .halfbox{
	align-items: center;
}

#service{
	background-color: #eee;
}

#service .content{
    margin-bottom:0;
}

#service h2{
	margin:1em auto 1.5em;
}

#service p{
	text-align: center;
}

#service ul{
	display:flex;
	justify-content: space-between;
	flex-wrap:wrap;
	margin: auto;
	max-width:800px;
}

#service ul li{
	padding:1em;
	width:50%;
}

#carlist{
    background-image: url(./img/d-light_bg.jpg);
}

#carlist:before{
    position: absolute;
    content: '';
    margin: auto;
    width:40%;
    height:250px;
    background-image: url(./img/kumiki_d.jpg);
    background-size: 50%;
    border:5px solid #1a1a1a;
    border-left:0;
    top:150px;
    left:0;
    box-shadow: 5px 5px 10px #000;
}

#carlist > .content{
    max-width: 100%;
}

#carlist .content h2 span{
    width:320px;
    height:180px;
    font-size:100%;
    text-align: left;
    text-indent:-100%;
    background-image:url(./img/d-light_logo.svg);
    background-size:contain;
    background-repeat: no-repeat;
    overflow: hidden;
}

#carlist .content h2 span::before,
#carlist .content h2 span::after{
    display: none;
}

#carlist .grid_4{
	display: grid;
	grid-template-columns: 25% 25% 25% 25%;
}

#carlist .grid_4 .grid_item{
	margin:2%;
    transition:.3s;
}

#carlist .grid_4 .grid_item div{
	height:200px;
	background-size:auto 100%;
	background-repeat: no-repeat;
	background-position: center;
    transition:.3s;
}

#carlist .grid_4 .grid_item:hover div{
    background-size: auto 110%;
}


#carlist .grid_4 .grid_item div h3{
	position: absolute;
	margin:auto;
	padding:.5em;
	color:#fff;
	font-size:90%;
    background: rgb(0,0,0);
    background: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(75,75,75,1) 100%);
    top:-.5em;
	left:-.5em;
	z-index: 10;
}

#carlist .grid_4 .grid_item div h3:before{
	position: absolute;
	content: '';
	margin: auto;
	width:32px;
	height: 1px;
	background-color: #333;
	top:0;
	bottom:0;
	left: 99%;
	z-index: 1;
}

#carlist .grid_4 .grid_item div h3 span{
    font-size:80%;
}

#carlist .grid_4 .grid_item div p{
	position: absolute;
	margin:auto;
	padding:.5em .5em .5em 1em;
	font-size:90%;
    background: linear-gradient(495deg, transparent 10px, #fff 10px);
    background-position: top left;
    background-repeat: no-repeat;
	bottom:-.5em;
	right:-.5em;
}

#carlist .grid_4 .grid_item div p span{
    font-weight:bold;
}

#carlist .grid_4 .grid_item > p{
    padding:1em 0;
    color:#aaa;
    font-size:80%;
    text-align:right;
    right:-.5em;
}

#carlist .grid_4 .grid_item > a{
    position:absolute;
    content: '';
    margin: auto;
    width: 100%;
    height: 100%;
    text-indent: -100%;
    top:0;
    left:0;
    overflow: hidden;
    z-index:10;
}

#contact .content{
	justify-content: space-around;
	margin-bottom:-100px;
}

#contact .content div{
	text-align: center;
	width:43%;
	background-color: #fff;
	border:1px solid #eee;
	box-shadow:8px 8px 0 #aaa;
	z-index: 10;
}

#contact .content h2{
	margin:1em auto 1.5em;
}

#contact #gmap{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height:400px;
	overflow:hidden;
}




/* page content */
#page main{
    opacity:0;
}

#page #title{
    position: relative;
    max-width: 1200px;
}

#page #gnav{
    position: relative;
    padding-top:0;
}

#page #gnav > ul{
    display: flex;
    max-width: auto;
}

#page #gnav > ul > li >a{
    font-size: 100%;
}

#page #gnav ul ul{
    top:100%;
    left:0;
    right:0;
}


/* form */
form{
    padding:1em;
	border:1px solid #ccc;
	border-radius:4px;
	box-shadow:2px 2px 10px #ccc;
}

.form-group{
	margin-bottom:1em;
}

.form-group label{
	display:inline-block;
	width:10em;
}

.btn-horizon{
	margin-bottom:1em;
}

input[type=submit],
button[type=submit]{
	display:block;
	color: #fff;;
	background:#f10;
	border: 1px solid #f10;
	transition:.2s;
}

input[type=submit]:hover,
button[type=submit]:hover{
	color: #f10;
	background:#fff;
}

form input,
form select,
form textarea,
form button{
	max-width:100%;
	padding:.2em;
	border:1px solid #ccc;
	border-radius:4px;
}

form :disabled{
	color:#ccc;
	background:#eee;
}

form span{
	display:inline-block;
}

/* foot nav */
#footnav{
	padding:1em;
	border-top:1px solid #ccc;
}

#footnav > ul{
	display: flex;
	flex-wrap:wrap;
}

#footnav > ul > li{
	padding:0 .5em;
	width:20%;
}

#footnav ul li a{
	color: #333;
	text-decoration: underline;
}

#footnav ul li a:hover{
	text-decoration: none;
}


#footnav ul li ul{
	padding:.5em;
	margin:.5em;
	border-left:1px dotted #333;
}

#footnav ul li ul li{
	margin-bottom:.5em;
}

#footnav ul li ul a{
	font-size:90%;
}

address{
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: center;
}

address p{
	text-align: center;
}

address p:first-of-type{
	font-weight: bold;
	font-size:130%;
}

small{
	display: block;
	padding:.5em;
	text-align:center;
}

#nav_toggle{
    display: none;
}

#gnav_overlay{
    display: none;
}


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

    #title{
        display: block;
    }
    
    #title p{
        display: none;
    }

    #gnav,
    #page #gnav{
        display: none;
        position: fixed;
        padding:0;
        top:0;
        right:0;
        z-index:500;
        background-color: rgba(0,0,0,.9);
        opacity: 1;
        animation:none;
    }

    #page #gnav > ul{
        display: block;
    }

    #gnav ul ul{
        position: relative;
        width: 100%;
        left:0;
    }

    #gnav ul ul a{
        padding-left:2.5em;
        color: #fff;
        background-color: rgba(255,255,255,0.2);
    }

    #title{
            z-index:9000;
    }
    #gnav,
    #page #gnav{
        width: auto;
        z-index: 9980;

    }

    #close_toggle{
        display:block;
        padding: 1em;
        text-align: right;
    }

       
        header #nav_toggle{
            position:fixed;
            display:block;
            padding:1em 0 1em 1.5em;
            height: 42px;;
            color:#333;
            font-size:80%;
            font-weight:bold;
            text-align:center;
            box-sizing:border-box;
            top:30px;
            right:1em;
            z-index: 9999;
        }
        
        header #nav_toggle #nav_toggle_icon{
            position: absolute;
            display: block;
            margin: -1px 0 0 -2.5em;
            width: 14px;
            height: 2px;
            background: #333;
            transition: .2s;
            top: 50%;
            right: 1em;
        }
        
        header #nav_toggle #nav_toggle_icon:before,
        header #nav_toggle #nav_toggle_icon:after{
            position: absolute;
            display: block;
            content: "";
            width: 14px;
            height: 2px;
            background: #333;
            transition: .3s;
            top: 50%;
            left: 0;
        }
        
        header #nav_toggle #nav_toggle_icon:before{
            margin-top: -6px;
        }
        
        header #nav_toggle #nav_toggle_icon:after{
            margin-top: 4px;
        }
        
        header #nav_toggle #nav_toggle_icon.close{
            background: transparent;
        }
        
        header #nav_toggle #nav_toggle_icon.close:before,
        #panel-btn .close:after{
            margin-top: 0;
        }
        
        header #nav_toggle #nav_toggle_icon.close:before{
            background: #fff;

            margin-top: -1px;
            transform: rotate(-45deg);
            -webkit-transform: rotate(-45deg);
        }
        
        header #nav_toggle #nav_toggle_icon.close:after{
            background: #fff;

            margin-top: -1px;
            
            transform: rotate(-135deg);
            -webkit-transform: rotate(-135deg);
        }
        
        #gnav ul li a.current, header ul li a:hover{
            border-radius: 0;
        }
        

    #carlist .grid_4 {
        display: grid;
        grid-template-columns: 33.3333% 33.3333% 33.3333%;
    }

}

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

    
body,input,select,textarea{
	font-size:15px;
}

.d3,.d5,.d10,.d15,.d20,.d25,.d30,.d35,.d40,.d45,.d50,.d55,.d60 {
    animation-delay:0s;
}

#title h1 a{
    padding-left: 50px;
    width:calc(100% - 20px);
    font-size:76%;
    background-size:auto 50px;
}


    #topimage p{
        height: 500px;
    }
    
    #topimage p span{
        font-size:110%;
    }

    #news{
        bottom: 2em;
    }

    .halfbox{
        display: block;
    }

    #page main{
        padding:1em 0 3em;
    }

    .content h2 span{
        display: block;
        text-align: left;
    }

    .content table{
        border-bottom: 3px solid #666;
    }

    .content table,
    .content tbody,
    .content tr{
        display:   block;
    }

    .content th,
    .content td{
        display: block;
        padding:1em 0;
        width: 100% !important;
    }

    .content th{
        padding-bottom: 0;
        border-bottom:0;
    }

    .content table tbody tr:last-child th,
    .content table tbody tr:last-child td{
        border-bottom: 0;
    }

    #service ul{
        display: block;
    }

    #service ul li{
        width:350px;
    }

    #contact .content div{
        margin-bottom:2em;
        width: 100%;
    }

    #carlist .content h2 span{
        margin:auto;
        background-size: auto 120px;
        background-position: center top;
    }

    #carlist .grid_4 {
        display: grid;
        grid-template-columns: 50% 50%;
    }

    #carlist .grid_4 .grid_item{
        padding: 0.5em;
    }

    #carlist .grid_4 .grid_item div{
        height:150px;
        background-size:100%;
    }

    #carlist .grid_4 .grid_item:hover div{
        background-size: 100%;
    }
    
    

    #carlist .grid_4 .grid_item div h3{
        top:-2.5em;
    }

    #carlist .grid_4 .grid_item div h3 span{
        display: block;
    }

    #carlist .grid_4 .grid_item div p{
        font-size:80%;
    }

    #footnav > ul{
        display: block;
    }

    #footnav > ul > li{
        margin-bottom:1.5em;
        width: 100%;
    }

}