@charset "UTF-8";
/* CSS Document */


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

    
.loader {
  height: 75vh;
  top: 45px;
   background-image: url("../../images/top/back-slide01-sp.webp");
}
    
    
/* contents-top */

.contents-top {
	padding-top: 45px;
}
	
/* mainimg-top */

.mainimg-top {
	height: 75vh;
}
	
.slideshow-container {
            height: 75vh;
        }
	
.slideshow-container p {
			bottom: 28%;
			padding-left: 11vw;
			font-size: 3.2vw;
		}
	
.text-slide {
            font-size: 8.5vw;
			padding-left: 10vw;
	letter-spacing: 0.05em;
        }
	
.text-slide-wrap-in::before {
			background-image: url("../../images/top/back-slide01-sp.webp");
	background-size: cover;
	animation: textSlidewrap 3.5s linear forwards, textSlideback 0s linear forwards 0s;
        }
	
	.text-slide-wrap-in::after {
			background-image: url("../../images/top/back-slide03-sp.webp");
			background-size: auto 100%;
        }
	
	@keyframes textSlideback {
            0% { background-image: url("../../images/top/back-slide01-sp.webp"); }
            100% { background-image: url("../../images/top/back-slide02-sp.webp"); }
        }
	
	.img-in img {
			 height: 90vh;
		width: auto;
        }

    
    .slideshow .slideimg02 img, .slideshow .slideimg05 img
		 {
			 top: 0%;
			 height: 75vh;
			 width: auto;
        }
    
    .slideshow .slideimg02 img.pc-view, .slideshow .slideimg05 img.pc-view
		 {
			display: none;
        }
    

/* contents01 */

.contents01 .box-inner {
	width: 88%;
	padding: 60px 6% 60px;
}
	
.contents03 .box-link {
	position: absolute;
right: 0px;
bottom: 7px;
}

.contents05 .box-link, .contents07 .box-link {
right: 5%;
bottom: 40px;
}

.contents01 p {
	width: 100%;
}


/* contents02 */

.contents02 .box-inner {
	width: 88%;
	padding: 60px 0px 50px;
}

.contents02 .box-list ul {
	display: flex;
  justify-content: space-between;
flex-wrap: wrap;
	gap:15px 4%;
}

.contents02 .box-list ul li {
	width: 48%;
}


/* contents03 */

.contents03 .lay01 {
	width: 88%;
	padding: 30px 20px;
}

.contents03 .lay02 {
	width: 100%;
	padding-bottom: 60px;
}

.contents03 .lay02 .box {
  justify-content: center;
min-height: 730px;
}

.contents03 .lay02 .box-img {
	width: 100%;
	height: 250px;
	overflow: hidden;
	position: relative;
}
	
.contents03 .lay02 .box-img img {
	width: 100%;
	height: 250px;
}

.contents03 .lay02 .box-detail {
	width: 100%;
	border-right-style : none;
	border-bottom-style : solid;
	padding: 30px 25px 90px;
}

.contents03 h3, .contents04 .lay01 h3, .contents05 .lay01 h3, .contents06 .lay01 h3, .contents08 .lay01 h3 {
	font-size: 18px;
letter-spacing: 0em;
}

.contents03 h4 {
	font-size: 30px;
}

.contents03 h5 {
	font-size: 18px;
	line-height: 1.4;
	letter-spacing: 0em;
	padding: 30px 0px 20px;
}

.contents03 p {
	width: 100%;
}

/* contents04 */

.contents04 .box-inner {
	padding: 60px 0px 40px;
}

.contents04 .lay01 {
	width: 88%;
	margin-bottom: 40px;
}

.contents04 .lay02 {
	width: 100%;
	padding-bottom: 80px;
}

.contents04 h5, .contents05 h5 {
	font-size: 18px;
}


/* contents05 */

.contents05 {
	width: 100%;
}

.contents05 .box-inner {
  justify-content: center;
	flex-direction: column;
}

.contents05 .lay01 {
	width: 100%;
	padding: 40px 4%;
	padding-bottom: 100px;
	border-bottom-style : solid;
border-color : #2D2D2D;
border-width : 1px;
}

.contents05 .lay02 {
	width: 92%;
	height: 400px;
	flex: none;
}

.contents05 .lay02 .box a {
	width: 100%;
	height: 400px;
  justify-content: center;
	padding: 20px 25px;
	flex-direction: column;
	gap:10px;
}

.contents05 .lay02 .box a::before {
right: 20px;
}

.contents05 .lay02 .box-img {
	width: 100%;
	text-align: center;
}

.contents05 .lay02 .box-img img {
	height: auto;
	max-width: 380px;
}

.contents05 .lay02 .box-detail {
	width: 100%;
	padding-left: 0px;
}

/* contents06 */

.contents06 .box-inner {
  justify-content:center;
}

.contents06 .lay01 {
	width: 100%;
	padding: 30px 20px;
}

.contents06 .lay02 {
	width: 100%;
	border-left-style : none;
	border-top-style : solid;
}

.contents06 .lay02 > div.box-link01 {
	height: 80px;
}
	
.contents06 .lay02 > div.box-link02 {
	height: 120px;
}

.contents06 .link-title {
	width: 35%;
}

.contents06 .box a {
	padding-left: 20px;
	padding-right: 20px;
}

.contents06 .box-link01 .box a {
	height: 80px;
	padding: 0px;
}
	
.contents06 .box-link01 h4 {
	width: 35%;
}

.contents06 .box-link01 .link01 {
	padding-right: 20px;
}

.contents06 .box-link02 .box a {
	height: 60px;
}

.contents06 h4 {
font-size: 18px;
}

.contents06 h4, .contents06 .box-link01 h4 {
font-size: 22px;
}


/* contents07 */

.contents07 .box-inner {
	flex-direction: column;
	padding-left: 0%;
}

.contents07 .lay01 {
	width: 100%;
	padding: 35px 20px;
	padding-bottom: 100px;
	text-align: right;
}

.contents07 .lay02 {
	flex: none;
	display: block;
	width: 100%;
	border-top-style : solid;
	border-left-style : none;
	border-right-style : none;
	padding: 40px 0px;
}
	
.contents07 .lay02 .inner-wrap {
	overflow-x: auto;
	white-space: nowrap;
	display: flex;
  justify-content: space-between;
	scrollbar-color: #D9D9D9 rgba(255,255,255,0);
}

.contents07 .lay02 .inner-wrap::-webkit-scrollbar {
    width: 6px;
	height: 6px;
	border-radius: 30px;
}

.contents07 .lay02 .inner-wrap::-webkit-scrollbar-track-piece  {
    background-color: rgba(255,255,255,0);
	border-radius: 30px;
}

.contents07 .lay02 .inner-wrap::-webkit-scrollbar-thumb  {
   border-radius: 30px;
	background-color: #D9D9D9;
}
	

.contents07 .lay02 a {
	border-bottom-style : none;
	border-right-style : solid;
	padding: 10px 25px;
	padding-bottom: 40px;
	display: inline-block;
vertical-align: top;
	width: 300px;
}

.contents07 .lay02 a::before {
right: 20px;
bottom: 15px;
}

.contents07 .lay02 a:hover::before {
right: 20px;
}

.contents07 p {
	font-size: 14px;
	white-space: normal;
}

/* contents08 */

.contents08 .lay01 {
	padding: 25px 35px;
}

.contents08 .lay02 {
  justify-content: center;
	flex-direction: column;
}

.contents08 .lay02 .box {
	width: 100%;
	padding: 25px 35px;
}

.contents08 .lay02 .box:not(:last-child) {
	border-right-style : none;
	border-bottom-style : solid;
}

.contents08 .lay02 .box-address {
	display: block;
	padding: 20px 0px;
	width: 100%;
}

.contents08 h3 {
	font-size: 25px;
}
	
.contents08 .map {
	text-align: right;
	padding-top: 10px;
}

.contents08 .map a {
	display: inline-block;
	position: relative;
	padding-right: 35px;
}

.contents08 .tel {
	font-size: 28px;
}

.contents08 .tel::before {
top: 7px;
	height: 28px;
}



    .pc-view {
        display: none;
    }
    .sp-view {
        display: inline-block;
    }
	
	.contents02 .sp-view {
        display: block;
    }
   
}