@charset "UTF-8";

/* -----------------------------------------------------------------
Tabのレイアウト
-------------------------------------------------------------------- */
/*! tabの形状*/
.tab-wrap{
	width: 100%;
	margin: auto;
}
.jq-tab-button{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

	.jq-tab-button li a{
		display: block;
		background:#ddd;
		margin:0 2px;
		padding:10px 20px;
	}
	.jq-tab-button li:first-child a{
padding-right: 56px;
	}
	/*liにactiveクラスがついた時の形状*/
	.jq-tab-button li.active a{
		background-color:#ffd980;
		box-shadow: 3px -1px 2px #accc;
	}


/* !【コンテンツエリアの表示】 */
/*エリアの表示非表示と形状*/
.jq-change-area {
	display: none;/*はじめは非表示*/
	opacity: 0;/*透過0*/
	border: solid 4px #ffd980;
	padding:50px 20px;
}
	/*jq-change-areais-activeというクラスがついた時の形状*/
	.jq-change-area.is-active {
		display: block;/*表示*/
		animation-name: displayAnime;/*ふわっと表示させるためのアニメーション*/
		animation-duration: 2s;
		animation-fill-mode: forwards;
	}

@keyframes displayAnime{
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@media screen and (max-width:650px){
	.jq-tab-button li{
		width: 50%;
	}
}


/*========= レイアウトのためのCSS ===============*/

.tab-wrap{
	width:100%;
	max-width: 960px;
	margin:30px auto;
    background:#fefefe;
}
.office-address-area{
	max-width: 700px;
	width: 100%;
	margin: 0 auto;
	padding-bottom: 35px;
}
.office-address-area h3{
	margin-left: 3%;
	margin-bottom: 10px;
}
.office-address-area p{
	text-align: center;
	line-height: 2;
}

.jq-change-area li{
	padding: 10px; 
	border-bottom: 1px solid #c0ddf2;
}
iframe {
   width: 100%;
   aspect-ratio: 1/2; /* アスペクト比（縦横比）を指定 */
 }



/*========= レイアウトのためのCSS ===============*/

.TAB_wrapper{
	width:100%;
	max-width: 980px;
	margin:30px auto;
   background-color: aquamarine;
}
.jq-tab-button a{
	color:#333;
	text-decoration: none;
}




<!-- TODO 道順リスト連番とスタイル ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━-->


.jq-change-area h2{
	font-size:1.3rem;
	margin:5px 0 25px 2%;
}

.list-number1 li,
.list-number2 li{
	text-align: center;
	line-height:1.3;
	margin-bottom: 40px;
	position: relative;
}

.list-number1 li:not(:last-child)::after,
.list-number2 li:not(:last-child)::after{
 content: '▼';
 position: absolute;
 bottom:-23px;
 right: 55%;
 transform: scale(3,1);
	color: #c0ddf2;
}

.g_map span{
	font-weight: bold;
	margin: 0 5px;
	letter-spacing: 1px;
	font-size: 1.5rem;
}

.map-wrap{
	padding: 1%;
}
.map-wrap h2{
	letter-spacing: 1px;
}



/* 連番 */
body {
  counter-reset: number 0;           /* number のカウンタを 0 にセット */
}
@media screen and (max-width:513px){
	.list-number1{
		width: 98%;
		margin: 0 auto;
	}
}

.list-number1 li:before,
.list-number2 li:before {
  counter-increment: number 1;      /* number カウンタを増加 */
  content:  counter(number) ;      /* 表示形式を指定 */
  background-color: #c0ddf2;
  padding:0 11px ;
  border-radius:3px 40% 3px 40%;
  margin-right: 8px;
  font-size: .9em;
  position: relative;
  top:-2px
}
.number-reset {
      counter-reset: number;
		/* 連番は二系統にできないが1から再スタートすることで可能
		liにclass指定する */
}