@charset "utf-8";

/* Direction */
h2 {
    font-size: var(--font-size-18);
    font-weight: 700;
}	
.sub-h-txt {
    background-color: #f6fafd;
    margin-top: var(--margin-80);
    font-size: var(--font-size-18);
    line-height: var(--line-height-30);
    font-weight: 500;
    padding: 20px 20px;
}
.sub-h-txt span dd {
    font-weight: 600;
    color: var(--sub-color-0);
}
.container {
    max-width: var(--max-width-sub);
    margin: 0 auto;
}
.map-container {
    width: 100%;
    background-color: #f4f4f4;
    margin-bottom: var(--margin-40);
}
.map-container img {width: 100%; height: 100%;}
.info-section { display: grid; grid-template-columns: repeat(1, 1fr); gap: 20px; padding-top: 20px; }
.info-item {
    display: flex;
    align-items: flex-start;
    padding-bottom: var(--padding-20);
    margin-bottom: var(--margin-10);
    border-bottom: 1px solid #c4c4c4;
}
.info-item .material-symbols-outlined { 
    color: var(--sub-color-0);
}
.info-item-area {
    display: flex;
    align-items: flex-start;
	font-size: var(--font-size-16);
}
.label {
    width: 100px;
    font-weight: bold;
    color: var(--sub-color-0);
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.content {
    padding-left: var(--padding-40);
    color: var(--sub-color-1);
}
ul.tabs{
  margin-top: var(--margin-60);
  padding: 0px;
  list-style: none;
}
ul.tabs li{
  background: none;
  color: #222;
  display: inline-block;
  padding: var(--padding-10) var(--padding-40);
  cursor: pointer;
  border: solid 1px var(--sub-color-1);
}

ul.tabs li.current{
  background: var(--sub-color-0);
  border: solid 1px var(--sub-color-0);
  color: #fff;
}

.tab-content{
  display: none;  
  padding-top: var(--padding-60);
  /*border-top:3px solid var(--sub-color-0);*/
}

.tab-content.current{
  display: inherit;
}


/* Large Devices, Wide Screens : ~ 1200px */
@media only screen and (max-width : 1200px) {
	.info-section { grid-template-columns: 1fr; }
	ul.tabs li {
		width: calc(50% - 2px);
		text-align: center;
	}
	.info-item-area.column {
		flex-direction: column;
	}
	.label {
		gap: 5px;
	}
	.content {
		width: 100%;
		padding-left: 30px;
	}
}


/* Medium Devices, Desktops : ~ 992px */
@media only screen and (max-width : 992px) {

}


/* Small Devices, Tablets : ~ 768px */
@media only screen and (max-width : 768px) {

}


/* Extra Small Devices, Phones : ~ 480px */
@media only screen and (max-width : 480px) {

}


/* Custom, iPhone Retina : ~ 320px */
@media only screen and (max-width : 320px) {

}