:root {
	--size-h2: 4vw;
	--size-h2a: 4vw;
	}

/***** メニューに関するＣＳＳ *****/

.navi ul .access_li a {
	color: var(--color-pink);
	font-weight: bold;
	}

/***** コンテンツに対するＣＳＳ *****/

.sp_br {
	display: none;
	}

main {
	width: 100vw;
	height: auto;
	background: var(--color-white);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	}

.page_title {
	width: 100%;
	height: 50vw;
	margin-top: 7vw;
	background: url(../image/access/aifeel_back.svg) center center / auto 100% no-repeat;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	}

.page_title h2 {
	box-sizing: border-box;
	width: 40%;
	margin-bottom: 5vw;
	padding: 6% 2%;
	background: var(--color-white);
	line-height: 5vw;
	box-shadow: 0 0 2vw var(--color-white);
	border-radius: 50%;
	font-size: var(--size-h2);
	font-weight: bold;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	}

.page_title h2::after {
	content: "Access";
	color: var(--color-yellowgreen);
	font-size: var(--size-h2a);
	font-family: 'CherryBombOne';
	letter-spacing: 0.3vw;
	}

.content {
	position: relative;
	width: 100%;
	height: auto;
	margin-top: 20vw;
	padding: 10vw 0 15vw 0;
	background: var(--color-lightgreen);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	}

.comment {
	position: absolute;
	top: -5%;
	background: var(--color-white);
	padding: 2%;
	border: solid 0.2vw var(--color-lightgray);
	border-radius: 0.5vw;
	box-shadow: 0.5vw 0.5vw 0.5vw var(--color-lightgray);
	font-size: 1.8vw;
	line-height: 3vw;
	}

.comment span {
	font-size: 1.5vw;
	line-height: 5vw;
	display: flex;
	flex-direction: column;
	align-items: center;
	}

.pack {
	position: relative;
	box-sizing: border-box;
	width: 75%;
	margin: 20vw 0 15vw 0;
	padding: 5% 0;
	background: var(--color-white);
	border-top: solid 0.8vw var(--color-orange);
	border-bottom: solid 0.8vw var(--color-orange);
	box-shadow: 0.5vw 0.5vw 1vw 0 rgba(255, 165, 0, 0.5);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	}

.mascot2 {
	position: absolute;
	top: -6.4vw;
	width: 20%;
	height: 7vw;
	background: url(../image/top/bose_mae.svg) center center / auto 100% no-repeat;
	}

section {
	width: 90%;
	height: auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	}

.place {
	background: var(--color-white);
	width: 100%;
	margin-bottom: 5%;
	font-size: 1.2vw;
	color: var(--color-black);
	display: flex;
	flex-direction: column;
	align-items: center;
	}

dl {
	width: 100%;
	padding: 2% 0;
	display: flex;
	justify-content: space-evenly;
	align-items: baseline;
	}

dt {
	flex-basis: 25%;
	}

dd {
	flex-basis: 60%;
	line-height: 2.5vw;
	}

.place dl dd a {
	color: var(--color-black);
	text-decoration: none;
	}

.map {
	aspect-ratio: 16/9;
	max-width: 100vw;
	width: 95%;
	height: auto;
	margin: 5% 0;
	}





@media (max-width: 960px){


	


.sp_br {
	display: block;
	}

main {
	width: 100%;
	}

.page_title {
	width: 98%;
	background: url(../image/access/aifeel_back.svg) center center / 100% auto no-repeat;
	margin: 20% 0 15% 0;
	}

.page_title h2 {
	width: 48%;
	margin-top: 5%;
	padding: 8% 2%;
	font-size: 6vw;
	}

.page_title h2::after {
	margin-top: 4%;
	font-size: 4.5vw;
	}

.content {
	margin-top: 30vw;
	}

.comment {
	top: -17vw;
	font-size: 3.5vw;
	width: 90%;
	line-height: 6vw;
	border: solid 0.3vw var(--color-lightgray);
	border-radius: 2vw;
	}

.comment span {
	padding: 3% 1%;
	font-size: 3vw;
	}

.pack {
	width: 90%;
	margin: 50vw 0 20vw 0;
	border-top: solid 1.1vw var(--color-orange);
	border-bottom: solid 1.1vw var(--color-orange);
	}

.mascot2 {
	top: -10vw;
	height: 11vw;
	}

.place {
	font-size: 3vw;
	}

dt {
	flex-basis: 20%;
	}

dd {
	flex-basis: 70%;
	line-height: 6vw;
	}

}