@charset "utf-8";

h2{
	font-family: "Zen Old Mincho", serif;
	font-size:2rem;
	font-weight: 700;
	text-align: center;
	color:#2B2B2B;
}

#cacchi{
	font-size:1.2rem;
	text-align: center;
}


/*------------------------------------

	レスポンシブ

------------------------------------*/
@media screen and (max-width: 980px){
	h2{
		line-height: normal;
	}
}

@media screen and (max-width: 430px){
	h2{
		font-size:1.5rem;
		margin-bottom:30px;
	}
	#cacchi{
	font-size:1.15rem;
	text-align: center;
		line-height: normal;
	}

}

/*------------------------------------

	メイン

------------------------------------*/

main{
	margin-top:80px;
}


dl{
	width:min(95%,1200px);
	margin:80px auto 0 auto;
	border-bottom:1px solid #BCBCBC;
}

dt{
	border-top:1px solid #BCBCBC;
	border-bottom:1px dotted #BCBCBC;
	display: flex;
	position: relative;
	z-index: 0;
	padding-left:10px;
}

dt .no{
	width:66px;
	background-color:#353DCE;
	color:#fff;
	font-weight: 700;
	font-size:14px;
	margin-right:15px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	line-height: normal;
	position: relative;
	z-index: 1;
}

dt .no::after{
	content: '';
	width:100%;
	height: 20px;
	display: block;
	position: absolute;
	z-index: 2;
	left:0;
	bottom:-19px;
	background-color:#353DCE;
	clip-path: polygon(100% 0, 0 0, 50% 100%);
	clip-path: polygon(0% 0%, 100% 0, 100% 5%, 50% 100%, 0 5%);
}

dt .no strong{
	font-size:30px;
}

dt .text{
	flex:1;
	padding:20px 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	/*align-items: center;*/
	font-size:1.5rem;
	font-weight: 700;
}

dt .text h3{
	display: flex;
	justify-content: space-between;
	align-items: center;
	color:#21278A;
}

dd{
	padding:30px 10px 35px 91px;
}


/*------------------------------------

	レスポンシブ

------------------------------------*/
@media screen and (max-width: 430px){
	dt .no{
		width:50px;
	}
	
	dt .no strong{
		font-size:25px;
	}
	
	dt .no{
		clip-path: polygon(0 1%, 100% 0%, 100% calc(100% - 15px), 50% 100%, 0 calc(100% - 15px));
	}
	dt .no::after{
		content: none;
	}
	
	dt .text{
		font-size:1.2rem;
		padding:15px 0;
	}
	
	dd{
		padding:20px 15px 25px 15px;
	}
}

/*-----------------------------------------------


		各種設定


-----------------------------------------------*/

#nouhin{
	margin-top:15px;
	border:1px solid #353DCE;
	padding:10px 20px;
	border-radius: 5px;
	font-weight: 700;
}

#nouhin h3{
	color: #353DCE;
	font-weight: 800;
	font-size:1.15rem;
}
#nouhin ul{
	width:100%;
	margin-left:1em;
	display: flex;
	flex-wrap: wrap;
	column-gap:30px;
}

#nouhin li{
	display: inline-flex;
	align-items: center;
	white-space:nowrap;
	/*width:calc((100% / 4) - 10px);*/
}

#nouhin li::before{
	content:"●";
	font-size:12px;
	color: #353DCE;
	margin-right:5px;
}


dt .muryou{
	background-color:#BB004A;
	line-height: 1;
	border-radius: 3px;
	color:#fff;
	font-size:1rem;
	padding:3px 15px;
	display: inline-block;
}


dd .zumen {
	width:100%;
	margin:40px auto 0 auto;
	border:1px solid #ddd;
	padding:20px 5px 5px 5px;
}

dd .photo{
	width:100%;
	margin-top:20px;
	line-height: 0;
	display: flex;
	align-items: flex-start;
	flex-wrap: wrap;
	gap:15px;
}

dd .photo li{
	width:calc((100% / 3) - 15px);
	max-width:350px;
	border-radius: 5px;
	/*border:1px solid #ccc;*/
}

dd .photo li img{
	width:100%;
	height: auto;
	border-radius: 5px;
	aspect-ratio: 3 / 2;
	 object-fit: cover;
}


dd .photo li p{
	font-size:0.93rem;
	line-height: 1.6;
	margin-top:10px;
}

dd .contact{
	width:100%;
	display: flex;
	align-items: flex-end;
	line-height: normal;
	margin-top:20px;
}

dd .tel a[href^="tel:"]{
	font-size:1.8rem;
	font-weight: 700;
}

dd .bana{
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	margin-left:30px;
	background-color: #353DCE;
	background: #DD0058;
background: -webkit-linear-gradient(bottom, #232892 0%, #353DCE 100%);
background: -o-linear-gradient(bottom, #232892 0%, #353DCE 100%);
background: linear-gradient(to top, #232892 0%, #353DCE 100%);
	border-radius: 5px;
	padding:10px 10px;
	color:#fff;
	font-weight: 700;
	font-size:0.95rem;
	overflow: hidden;
  position: relative;
	line-height: 1;
}	

dd .bana:after{
	 font: var(--fa-font-solid); 
	content:"\f0da";
	font-size:12px;
	line-height: 0;
	margin-left:10px;
	margin-top: 3px;
}

dd .waku{
	width: 100%;
	margin-bottom:8px;
	display: inline-block;
	margin-top:20px;
	/*border:1px solid #ddd;*/
	padding:10px 15px;
	text-align: center;
	border-radius: 5px;
	background-color: rgba(243,243,243,0.4);
	color:#1F1F1F;
}

dd .waku .inner{
	display: flex;
	justify-content: center;
	/*align-items: center;*/
}

dd .waku .photo{
	align-items: center;
	justify-content: center;
}

dd .waku .photo li{
	width:auto;
}

dd .waku .photo li img{
	aspect-ratio: auto;
}

dd .waku .photo li img.tate{
	width:auto;
	height: 300px;
	
}

dd .waku p{
	font-size:1.02rem;
	font-weight: 800;
	margin-bottom:15px;
	text-align: left;
}

dd .waku p::first-letter{
	color: #353DCE;
	margin-right:3px;
}


#kumitate .item{
	width:300px;
	border-radius: 5px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	position: relative;
}

#kumitate .item img{
	width:100%;
	height: auto;
	border-radius: 5px;
	/*aspect-ratio: 3 / 2;
	object-fit: cover;*/
}

#kumitate .item:last-child{
	width:600px;
	border:none;
	margin-left:50px;
}

#kumitate .item:last-child img{
	width:100%;
	aspect-ratio: 5 / 2;
	object-fit: cover;
	
}

#kumitate .item .text{
	width:100%;
	text-align: center;
	position: absolute;
	bottom:2px;
	left:2px;
	font-size:0.93rem;
	font-weight: 700;
}

#kumitate .item:last-child .text{
	width: auto;
	display: inline-block;
	bottom:0;
	left:0;
	/*background-color: rgba(219,208,190,0.74);*/
	background-color: rgba(255,255,255,0.73);
	padding:0 20px 0 10px;
	 text-shadow:1px 1px 0 #FFF, -1px -1px 0 #FFF,
              -1px 1px 0 #FFF, 1px -1px 0 #FFF,
              0px 1px 0 #FFF,  0-1px 0 #FFF,
              -1px 0 0 #FFF, 1px 0 0 #FFF;
	color:#000;
	font-weight: 800;
	border-top-right-radius: 5px;
}

#seigyo {
	width:auto;
}

#seigyo ul{
	display: inline-flex;
	gap:20px 10px;
	justify-content: flex-start;
}


/*------------------------------------

	レスポンシブ

------------------------------------*/
@media screen and (min-width: 431px){
	
	dd .bana::before {
	  position: absolute;
	  top: 0;
	  left: -75%;
	  z-index: 2;
	  display: block;
	  content: '';
	  width: 50%;
	  height: 100%;
	  background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
	  background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
	  -webkit-transform: skewX(-25deg);
	  transform: skewX(-25deg);
	}
	
	dd .bana:hover::before {
	  -webkit-animation: shine .75s;
	  animation: shine .75s;
	}
}

@media screen and (max-width: 980px){
	dd .photo li,
	dd .waku .photo li{
		width:calc((100% / 3) - 15px);
		min-width:250px;
	}
	
	dd .waku .photo li img.tate{
		width: auto;
	}
	
	dd .waku .inner,
	dd .waku .photo{
		justify-content: flex-start;
	}
}
@media screen and (max-width: 430px){
	dd .contact{
		display: inline-block;
	}
	dd .bana{
		width:100%;
		margin-top:15px;
		margin-left:0;
		
	}
	
	dd .bana:after{
		content:"\f0da\f0da\f0da";
	}
	
	#nouhin ul{
		width:100%;
		display: block;
	}

	#nouhin li{
		display: flex;
		align-items: center;
		white-space:nowrap;
	/*width:calc((100% / 4) - 10px);*/
	}
	dd .photo,
	dd .waku .inner{
		flex-direction: column;
		row-gap:20px;
	}
	dd .photo li,
	#kumitate .item,
	#kumitate .item:last-child{
		width:100%;
		height: auto;
	}
	
	#kumitate .item:last-child{
		margin-left:0;
	}
	
	dd .photo li p{
		text-align: center;
	}
	
	dd .photo li.bicycle p{
		margin-top:-10px;
	}
	
	#seigyo {
		width: 100%;
		justify-content: center;
	}
	
}

/*------------------------------------

	アニメーション

------------------------------------*/

@-webkit-keyframes shine {
	  100% {
		left: 125%;
	  }
	}
	@keyframes shine {
	  100% {
		left: 125%;
	  }
	}