/* ------------------------------------------------------------
Access
---------------------------------------------------------------*/

#page_access main {
	padding-bottom: 0;
}
.sec-access .jp-box,
.sec-access .en-box{
	padding-right: 150px;
}
.sec-access .jp-box .sticky-fig img,
.sec-access .en-box .sticky-fig img{
	max-width: 635px;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.sec-access .r-box{
	margin-top: 50px;
	width: 100%;
}
.sec-access .r-box > .c-txt{
 color: #3DB7FC;
 font-size: 24px;
 font-weight: 500;
 padding: 0 0 10px;
 margin: 0 0 20px;
 border-bottom: solid 1px #ccc;
 line-height: 1.5em;
}
.sec-access .r-box .contents{
	margin-bottom: 30px;
    padding-bottom: 30px;
    border-bottom: 1px solid #CCCCCC;
}
.sec-access .r-box .contents + .contents{
 border-bottom: none;
}
.sec-access .r-box .contents:last-child{
	margin-bottom: 100px;
	padding-bottom: 0;
	border-bottom: none;
}
.sec-access .contents .wrapper{
	display: flex;
	gap: 20px;
}
.sec-access .contents .wrapper img{
	max-width: 180px;
    height: auto;
}
.sec-access .contents .name{
	font-size: 24px;
    color: #3DB7FC;
    margin: 10px 0;
}
.sec-access .contents .address,
.sec-access .contents .tel {
	margin-bottom: 10px;
}
.sec-access .contents a{
	text-decoration: underline;
}
.sec-access .contents .distance{
	position: relative;
    padding-left: 18px;
}
.sec-access .contents .distance::before{
	content: '';
	display: inline-block;
	width: 11px;
	height: 17px;
	background-image: url("../images/access/icon-distance.svg");
	background-size: 100%;
	position: absolute;
    left: 0;
    top: 3px;
}
.sec-access .contents .google-map{
	margin-top: 10px;
    width: 100%;
}
.sec-access .contents iframe{
	width: 100%;
}
.sec-access .jp-box,
.sec-access .en-box{
  display: grid;
  grid-template-columns: 635px 1fr;
  gap: 24px;
}
.sec-access .jp-box + .c-txt{
 font-size: 30px;
 text-align: center;
 padding: 80px 0 50px;
 color: #3DB7FC;
}

/* 画像を親の中でだけ固定させる */
.sticky-fig {
  position: sticky;  /* これだけで「親の範囲内で固定」 */
  top: 0;            /* 画面上端に吸着させる */
  align-self: start; /* グリッド内で上に揃える（重要） */
  height: fit-content;
}

.sticky-fig img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover; /* 必要なら */
}

/* 重要注意：stickyが効く条件 */
.sticky-section, .jp-box {
  /* 先祖要素に overflow: hidden/auto/scroll が付いていると sticky が無効化されます */
  overflow: visible;
}

@media screen and (max-width: 896px){

	.sticky-fig{
		display: none;
	}
	.sec-access .jp-box, .sec-access .en-box{
		grid-template-columns: auto;
		padding: 0 20px;
	}
	.sec-access .contents .google-map{
		margin-top: 30px;
	}
	.sec-access .r-box {
		margin-top: 0;
	}
	.sec-access .r-box .contents:last-child {
		margin-bottom: 30px;
		padding-bottom: 30px;
	}
	.sec-access .jp-box + .c-txt{
		padding: 40px 0 25px;
	}

}

@media screen and (max-width: 768px) {

	.sec-access {
		padding-top: 50px;
	}
	.sec-access .r-box > .c-txt {
		font-size: 18px;
	}
	.sec-access .contents .name {
		font-size: 20px;
	}
	.sec-access .r-box .contents {
		font-size: 14px;
	}
	.sec-access .contents .wrapper {
		flex-flow: column;
		gap: 0;
	}
	.sec-access .contents .wrapper img {
		margin: auto;
	}
	.sec-access .contents .address,
	.sec-access .contents .tel {
		margin-bottom: 5px;
	}

}