@charset "utf-8";
/*----------------------------
	guide
------------------------------*/

.searchBy {
	margin-bottom: 60px;
	padding-bottom: 60px;
	border-bottom: 1px solid #c2c2c2;
}

.search_form {
	width: 63%;
	border: solid 2px #c2c2c2;
	background: #fff;
	padding: 5px 3px 5px 15px;
	border-radius: 8px;
	margin-bottom: 20px;
}

.search_form form#form {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.search_form input.sBox {
	width: calc(100% - 65px);
	height: 44px;
}

.search_form input.sBtn {
	width: auto;
	max-width: 62px;
	height: 44px;
}

.searchBy.floormap .columns {
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
}

.searchBy.floormap .columns .column {
	width: 47%;
}

.searchBy.floormap .columns .column .floor_column {
	font-size: 2.0rem;
	font-weight: bold;
	margin-bottom: 12px;
}

ul.floorList {
	display: flex;
	flex-direction: column;
}

ul.floorList > li {
	position: relative;
	display: flex;
	align-items: stretch;
	flex-wrap: wrap;
	height: 92px;
	margin-bottom: 5px;
}

ul.floorList > li span.floorNum {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	width: 84px;
	background: #f5f5f5;
	font-family: Futura, 'Century Gothic';
    font-weight: bold;
    font-size: 2.5rem;
	color: #004ea1;
}

.height0 {
	height: 0;
}

ul.floorList > li span.floorNum span.u {
	font-size: 2rem;
	padding-top: 0.5rem;
}

ul.floorList > li .content {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: calc(100% - 89px);
	margin-left: 5px;
	padding: 0 10% 0 4%;
	background: #f5f5f5;
}

ul.floorList > li .content ul.icons li {
	width: 1.5em;
}

ul.floorList > li .content p {
	flex-grow: 10;
}

ul.floorList > li .content p span.facil {
	display: table;
	padding: 0 0.8em;
	font-size: 1.3rem;
	background: #dbdbdb;
}

ul.icons {
	display: flex;
	margin-right: 18px;
}

ul.floorList > li {
	position: relative;
	transition: 0.2s;
}

ul.floorList > li:hover {
	opacity: 0.7;
}

ul.floorList > li a {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	background: url(../../../common/img/icn_arrow01.png) 96% center no-repeat;
	background-size: 5.5%;
}

.searchBy.floormap .plaza2 {
	margin-bottom: 50px;
}

.searchBy.floormap .map img.floormap {
	width: 46%;
	margin-left: 2%;
}

.searchBy.floormap .map img.view {
	width: 42%;
	margin-left: 5%;
}

.searchBy.floormap .iconDesc {
	width: 100%;
	padding: 18px 0;
}
.searchBy.floormap .iconDesc ul.icons {
	display: block;
}

.searchBy.floormap .iconDesc ul.icons li {
	display: inline-block;
	font-size: 1.3rem;
	margin: 0 1em 0.5em 0;
	vertical-align: top;
}


.searchBy.floormap .iconDesc ul.icons li img {
	width: 1.5em;
}

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

.nameInitial .content{
	display: none;
}

input[name="tab"] {
	display: none;
}

#kana:checked ~ .kana,
#alphabet:checked ~ .alphabet {
	display: block;
}

label.tab {
	font-size: 1.8rem;
	position: relative;
	display: block;
	width: calc(50% - 16px);
	padding-bottom: 8px;
    background: url(../../../common/img/icn_arrow01.png) center right no-repeat;
    background-size: 32px;
    text-align: center;
    font-weight: bold;
}

label.tab::before,
label.tab::after {
	content: "";
	position: absolute;
	bottom: 0;
	right: 0;
	display: block;
	width: 100%;
	height: 3px;
	background: #c2c2c2;
	transition: 0.5s;
}

label.tab:nth-of-type(2n)::after {
	right: auto;
	left: 0;
}

label.tab::after {
	background: #004ea1;
	transition: 0.5s;
	width: 0;
}

input[name="tab"]:checked + label.tab::after {
	width: 100%;
}

input[name="tab"]:checked + label.tab {
    color: #004ea1;
}

.nameInitial .content {
	width: 100%;
	padding: 24px 0;
}

.nameInitial .content ul {
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
}

.nameInitial .content ul li {
	margin: 0 4.5px 10px;
	border: 1px solid #004ea1;
	text-align: center;
	transition: 0.2s;
}

.nameInitial .content ul li a {
	display: block;
	padding: 20px 0;
	width: 100%;
	height: 100%;
	transition: 0s;
	color: #004ea1;
}

.nameInitial .content ul li:hover {
	background: #004ea1;
}

.nameInitial .content ul li:hover a {
	color: #FFFFFF;
}

.kana ul li {
	width: calc(10% - 9px);
}

.alphabet ul li {
	/* width: calc((100% - 126px) / 14); */
	width: 76.7px;
}


@media screen and (min-width:769px) {
	.sp_only {
		display: none;
	}
}

@media screen and (max-width:768px) {
	.pc_only {
		display: none;
	}

	.searchBy {
		margin-bottom: 8vw;
		padding-bottom: 8vw;
	}


	.search_form {
		width: 100%;
		border: solid 1px #c2c2c2;
		padding: 3px 3px 3px 10px;
		margin: 0;
	}

	.search_form input.sBox,
	.search_form input.sBtn {
		height: 37px;
	}

	.searchBy.floormap .plaza1,
	.searchBy.floormap .plaza2 {
		margin-bottom: 8vw;
	}

	.searchBy.floormap .columns {
		flex-wrap: wrap;
	}

	.searchBy.floormap .columns .column {
		width: 100%;
	}

	.searchBy.floormap .columns .column .floor_column {
		font-size: 1.3rem;
	}


	ul.floorList > li {
		height: auto;
		margin-bottom: 3px;
	}

	ul.floorList > li span.floorNum {
		width: 52px;
		padding: 14px 0;
		font-size: 2rem;
		font-weight: 100;
	}

	ul.floorList > li span.floorNum span.u {
		font-size: 1.5rem;
	}

	ul.floorList > li .content {
    	width: calc(100% - 55px);
		margin-left: 3px;
		padding: 14px 12% 14px 4%;
	}

	ul.floorList > li .content ul.icons {
		margin-right: 0;
		max-width: 44px;
		justify-content: flex-end;
		flex-wrap: wrap;
	}

	ul.floorList > li .content ul.icons li {
		width: 1.4em;
	}

	ul.floorList > li a {
		background: url(../../../common/img/icn_arrow01.png) 97.5% center no-repeat;
		background-size: 20px;
	}

	.searchBy.floormap .iconDesc ul.icons li {
		font-size: 1.2rem;
	}

	.floorNum.two .height0 {
		height: auto;
	}

	label.tab {
		background-position: 100% 0.4em;
   		background-size: 5.5vw;
			font-size: 1.3rem;
	}

	label.tab[for="kana"] {
		width: calc(40% - 3vw);
		text-align: left;
	}

	label.tab[for="alphabet"] {
		width: calc(60% - 3vw);label.tab
		text-align: left;
	}

	.nameInitial .content ul li {
		margin: 0 0.8vw 1.6vw 0.8vw;
	}

	.nameInitial .content ul li a {
		padding: 2vw 0;
	}

	.kana ul li {
		width: calc((100% - 8vw) / 5);
	}

	.alphabet ul li {
		width: calc((100% - 11.2vw) / 7);
	}


	.toggleOpen {
		position: relative;
		width: 100%;
		margin: 25px auto 0;
		padding: 0 0.4em 1em;
		font-size: 1.3rem;
		font-weight: bold;
		color: #004ea1;
		cursor: pointer;
		transition: 0.5s;
		overflow: hidden;
	}

	.toggleOpen.closed {
		height: 44px;
	}

	.toggleOpen::before,
	.toggleOpen::after {
		content: "";
		position: absolute;
		width: 15px;
		height: 2px;
		margin: auto;
		left: auto;
		right: 15px;
		top: 1.5em;
		bottom: auto;
		background: #004ea1;
		transform-origin: center center;
		border-radius: 2px;
		transition: 0.5s;
	}

	.toggleOpen::after {
		transform: rotate(-90deg);
	}

	.toggleOpen.opened::before {
		opacity: 0;
	}

	.toggleOpen.opened::after {
		transform: rotate(0);
	}

	.toggleOpen p.text {
		background: #f5f5f5;
		padding: 1em;
    	margin: 0 -0.4em;
	}

	.toggleOpen .content {
		padding: 1em 0;
		transition: 0.8s;
	}

	.toggleOpen.closed .content {
		opacity: 0;
	}
}