@charset "UTF-8";
/* CSS Document */


#yottekeyattl		{ margin:0 auto 40px auto; padding:0; width: 550px; }

#yottekeya 			{ margin:0 auto 80px auto; padding:0; width:1000px; }

.img-container { margin: 0 0 40px 0; padding: 0; width: 1000px; display: flex; gap: 10px; }
.img-container .mainimg { margin: 0; padding: 0; width: 490px; }
.img-container .mainimg img { width: 490px; height: 344px;  object-fit: cover; }
.img-container .detailimg { margin: 0; padding: 0; width: 490px; display: flex; flex-wrap: wrap; gap: 10px; }
.img-container .detailimg img { width: 240px; height: 165px; object-fit: cover; }

.img-container img { border-radius: 20px; }

.lead-container { margin: 0 auto 50px; padding: 0; width: 963px; display: flex; gap: 30px; }
.lead-container .text { margin: 0; padding: 0; flex: 1; }
.lead-container .text img { margin: 0 0 35px 0; width: 589px; }
.lead-container .img { margin: 0; padding: 25px 0 0 0; width: 344px; flex-shrink: 0; }
.lead-container .img img { margin: 0; width: 344px; }

.point-container { margin: 0 auto 75px; padding: 0; width: 914px; display: flex; flex-wrap: wrap; gap: 30px; }
.point-container li { margin: 0; padding: 0; width: 442px; list-style: none; }
.point-container li img { width: 442px; }

.insta  { margin: 0 auto 40px; padding: 0; width: 518px; }
.insta img { width: 518px; }

.access  { margin: 0 auto; padding: 45px 0 30px 0; width: 1000px; background: #f4f9f8; border-bottom: 35px solid #8fdaed; }
.access .ttl  { margin: 0; padding: 0 0 40px 0; font-size: 25px; color: #4d759e; line-height:1.4em; font-weight: 600; text-align: center; letter-spacing: 0.05em; }

.access-container { margin: 0 auto; padding: 0; width: 915px; display: flex; gap: 40px; }
.access-container .text { margin: 0; padding: 0; flex: 1; }
.access-container .map { margin: 0; padding: 0; width: 463px; height: 382px; flex-shrink: 0; }
.access-container table { margin: 0 0 30px; padding: 0; width: 100%; border-spacing: 0; }
.access-container th { margin: 0; padding: 0 0 7px 0; width: 30%; font-size: 16px; color:#000000; line-height:1.6em; font-weight: normal; vertical-align: text-top;}
.access-container td { margin: 0; padding: 0 0 7px 0; width: 70%; font-size: 16px; color:#000000; line-height:1.6em; font-weight: normal; }
.access-container span { color:#8fdaed; }


#yottekeya p			{ margin:0 0 0 0; padding:0; font-size: 16px; color:#000000; line-height:1.8em; }
#yottekeya p.shopname	{ margin:0 0 20px 0; padding:0; font-size: 18px; color:#000000; line-height:1.8em; font-weight: 600; }
#yottekeya p.reco	{ margin:0 0 0 0; padding:0; font-size: 25px; color:#4d759e; line-height:1.4em; font-weight: 600; }



@media only screen and (max-width: 800px) {
#yottekeyattl		{ margin:0 auto 20px auto; padding:0; width: 100%; }
    
#yottekeya 			{ margin:0 auto 80px auto; padding:0; width: 95%; }

.img-container { margin: 0 0 30px 0; padding: 0; width: 100%; display: block; }
.img-container .mainimg { margin: 0 0 10px 0; padding: 0; width: 100%; }
.img-container .mainimg img { width: 100%; height: auto; aspect-ratio: 490 / 344; object-fit: cover; }
.img-container .detailimg { margin: 0; padding: 0; width: 100%; display: flex; flex-wrap: wrap; gap: 10px; }
.img-container .detailimg > div { width: calc((100% - 10px) / 2); flex: 0 0 calc((100% - 10px) / 2); }
.img-container .detailimg img { width: 100%; height: auto; aspect-ratio: 240 / 165; object-fit: cover; }
.img-container img { border-radius: 15px; }

.lead-container { margin: 0 auto 30px; padding: 0; width: 98%; display: block; }
.lead-container .text { margin: 0; padding: 0; }
.lead-container .text img { margin: 0 0 25px 0; width: 100%; }
.lead-container .img { display: none; }

.point-container { margin: 0 auto 45px; padding: 0; width: 75%; display: block; }
.point-container li { margin: 0 0 10px 0; padding: 0; width: 100%; list-style: none; }
.point-container li img { width: 100%; }

.insta  { margin: 0 auto 40px; padding: 0; width: 100%; }
.insta img { width: 100%; }


.access  { margin: 0 auto; padding: 25px 0 20px 0; width: 100%; background: #f4f9f8; border-bottom: 18px solid #8fdaed; }
.access .ttl  { margin: 0; padding: 0 0 20px 0; font-size: 20px; color: #4d759e; line-height:1.4em; font-weight: 600; text-align: center; letter-spacing: 0.05em; }

.access-container { margin: 0 auto; padding: 0; width: 95%; display: block;}
.access-container .text { margin: 0; padding: 0; }
.access-container .map { margin: 0; padding: 0; width: 100%; height: 382px; }
.access-container table { margin: 0 auto 20px; padding: 0; width: 95%; border-spacing: 0; }
.access-container th { margin: 0; padding: 0 0 0px 0; width: 30%; font-size: 14px; color:#000000; line-height:1.6em; font-weight: normal; vertical-align: text-top;}
.access-container td { margin: 0; padding: 0 0 0px 0; width: 70%; font-size: 14px; color:#000000; line-height:1.6em; font-weight: normal; }
.access-container span { color:#8fdaed; }

#yottekeya p			{ margin:0 0 0 0; padding:0; font-size: 16px; color:#000000; line-height:1.8em; font-weight: 600; }
#yottekeya p.shopname	{ margin:0 0 10px 0; padding:0; font-size: 16px; color:#000000; line-height:1.8em; font-weight: 600; }
#yottekeya p.reco	{ margin: 0 12px 20px; padding:0; font-size: 20px; color:#4d759e; line-height:1.4em; font-weight: 600; }

}






.sp-img {
  display: none;
}

@media only screen and (max-width: 768px) {
.pc-img {
  display: none;
}
.sp-img {
  display: block;
}
}