@charset "UTF-8";

/* ▼▼▼ about us
=====================================*/
/* ▼ 共通
----------------------------------------*/
#about h2{
	margin-bottom: 40px;
	font-size: 32px;
	text-align: center;
	text-decoration: underline;
	text-underline-offset: 10px;
}
/* ▼ タイトル
----------------------------------------*/
#about #main h1{
	margin-bottom: 35px;
	text-align: center;
	font-size: 50px;
	line-height: 1.4;
	}
	#about h1 span{
		display: block;
		margin-bottom: 5px;
		text-align: center;
		line-height: 1;
	}
	#about .read p{
		margin-bottom: 30px;
		text-align: center;
		font-size: 18px;
	}
	#about .read p:nth-child(1){
		font-size: 26px;
		font-weight: bold;
	}

/* ▼ DC CAFEの特徴
----------------------------------------*/
#about #feature ul{
	margin-bottom: 60px;
	}
	#about #feature ul li{
		flex: 1;
	}
	#about #feature ul li:not(:last-child){
		margin-right: 5%;
	}
	#about #feature ul li p.photo{
		margin-bottom: 25px;
	}
	#about #feature ul li h3{
		margin-bottom: 25px;
		font-size: 22px;
		text-align: center;
		line-height: 1;
	}
	#about #feature ul li h3 span{
		margin-right: 20px;
		font-size: 40px;
		font-weight: 500;
		vertical-align: -2px;
	}

/* ▼ アクセス
----------------------------------------*/
#about #access{
	background: #f7f7f7;
	}
	#about #access div{
		flex: 1;
	}
	#about #access .txt{
		flex: .9;
		margin-right: 5%;
	}
	#about #access .txt h3{
		padding-bottom: 10px;
		margin-bottom: 50px;
		border-bottom: 1px solid #000;
		font-size: 22px;
		font-weight: normal;
	}
	#about #access .txt dl{
		display: flex;
		flex-wrap: wrap;
	}
	#about #access .txt dl dt{
		width: 100px;
	}
	#about #access .txt dl dd{
		width: calc(100% - 100px);
		margin-bottom: 40px;
	}
	#about #access .map{
		border: 5px solid #fff;
		font-size: 0;
	}
	#about #access .map iframe{
		width: 100%;
		height: 400px;
	}

/* ▼ お問い合わせ
----------------------------------------*/
#about #contact_box{
	padding-bottom: 0;
	}
	#about #contact_box h2{
		margin-bottom: 25px;
	}
	#about #contact_box p{
		margin-bottom: 20px;
		text-align: center;
	}
	#about #contact_box p.tel-moji{
		margin-bottom: 20px;
		font-size: 42px;
		font-weight: bold;
	}
	#about #contact_box p.tel-moji::before{
		content: "TEL";
		margin-right: 15px;
		font-size: 22px;
	}
	#about #contact_box ul{
		max-width: 410px;
		margin: 0 auto;
	}
	#about #contact_box ul li{
		flex: 1;
	}
	/* #about #contact_box ul li:nth-child(1){
		margin-right: 10px;
	} */



/* ▼▼▼ 480px〜768px
=====================================*/
@media screen and (max-width: 768px) {
	/* ▼ 共通
	----------------------------------------*/
	#about h2{
		margin-bottom: 25px;
		font-size: 22px;
	}
	/* ▼ タイトル
	----------------------------------------*/
	#about #main h1{
		margin-bottom: 20px;
		font-size: 30px;
		}
		#about h1 span{
			display: block;
			width: 60px;
			margin: 0 auto 5px;
		}
		#about .read p{
			margin-bottom: 25px;
			font-size: 12px;
		}
		#about .read p:nth-child(1){
			font-size: 17px;
			line-height: 1.4;
		}

	/* ▼ DC CAFEの特徴
	----------------------------------------*/
	#about #feature ul{
		margin-bottom: 40px;
		}
		#about #feature ul li{
		}
		#about #feature ul li:not(:last-child){
			margin: 0 auto 25px;
		}
		#about #feature ul li p.photo{
			margin-bottom: 10px;
		}
		#about #feature ul li h3{
			margin-bottom: 15px;
			font-size: 20px;
		}
		#about #feature ul li h3 span{
			margin-right: 15px;
			font-size: 27px;
		}

	/* ▼ アクセス
	----------------------------------------*/
		#about #access .txt{
			margin: 0 auto 5%;
		}
		#about #access .txt h3{
			padding-bottom: 5px;
			margin-bottom: 30px;
			font-size: 20px;
		}
		#about #access .txt dl dt{
			width: 70px;
			font-size: 12px;
		}
		#about #access .txt dl dd{
			width: calc(100% - 70px);
			margin-bottom: 25px;
		}
		#about #access .map iframe{
			height: 250px;
		}

	/* ▼ お問い合わせ
	----------------------------------------*/
		#about #contact_box h2{
			margin-bottom: 25px;
		}
		#about #contact_box p{
			margin-bottom: 10px;
		}
		#about #contact_box p.tel-moji{
			margin-bottom: 0;
			font-size: 27px;
		}
		#about #contact_box p.tel-moji::before{
			font-size: 18px;
		}
		#about #contact_box ul{
			display: none;
		}


}