@charset "utf-8";
/* CSS Document */
@import url(pc.css) screen and (min-width: 641px);
@import url(sp.css) screen and (max-width: 640px);

*,*:before,*:after{
  box-sizing: border-box;
}

.al-center{
	text-align:center;}

.grid-wrap{
    display:grid;
}
.grid-wrap > *{
    width:100%;
}
.row2{
    grid-template-columns: 1fr 1fr;
    gap: clamp(5px,1.5vw,40px);
}
.page_table,
.page_table2{
    width: calc(100% - 10px);
    margin:10px auto;
}
.page_table2 td {
	vertical-align: middle;
}
.page_table td,
.page_table2 td{
   vertical-align: middle;
}
.page_table .main_td1{
    width: 28%;
}
.page_table2 .main_td1{
    width:49%;
}
    .main_td1,.main_td2,.main_td3,.main_td4{
      font-size: 14px;  
    }

.row2-col2{
	display:grid;
	grid-template-columns: 1fr 6em;
	align-items: center;
	justify-content: center;
}
.main_td4.row2-col2{
	display:inherit;
}
.row2-col2 span{
	letter-spacing: -0.01em;
}
.sub{
	font-size: calc(100% * 0.8);
}
.cols-2-1{
    display: grid;

}
.intro.cols-2-1{
    gap: 0 clamp(20px,4vw,40px);
    margin-bottom: clamp(20px,4vw,40px);
    align-items: center;
}
.intro.cols-2-1 img{
    width: 100%;
    height: auto;
    aspect-ratio: 6 / 4;
    object-fit: cover;
}
@media screen and (min-width: 768px){
.cols-2-1{
    grid-template-columns: repeat(2,minmax(0,1fr));
}
}
@media screen and (max-width: 767px){
.cols-2-1{
    grid-template-columns: minmax(0,1fr);
} 
}
@media screen and (min-width:641px) and (max-width:767px){
.main_td1{   
     min-width:6em;
}
.main_td1,.main_td2,.main_td3,.main_td4{
      font-size: 12px;  
    }
}
@media screen and (max-width:400px){
.main_td1,.main_td2,.main_td3,.main_td4{
      font-size: 13px;  
    }
}
.header h1 img{
        width:min(90%,456px);
        height:auto;
        margin:0 auto;
    }
.header h1 a{
    width:100%;
}

@media screen and (max-width:640px){
  .row2{
    grid-template-columns: 1fr;
    gap:20px;
}  
}
@media screen and (min-width:641px) and (max-width:1000px){
header{
    height: auto;
    grid-template-columns: 1fr;
    background-size: cover;
    place-items: center;
    place-content:center;
}
    header h1{
        width:auto;
        justify-self: center;
        grid-column: 1 / -1;
    }
    header nav{
        width:auto;
        justify-self: center;
        grid-column: 1 / -1;
    }
    .contents{
	padding:160px 15px 100px;
}
	section .inner{
    padding: 30px 15px 50px;
}

}


.grid-wrap.row2.intro{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:30px clamp(15px,3vw,40px);
    margin-bottom:30px;
}
.grid-wrap.row2.intro > *{
    width:100%;
    height:100%;
}
.grid-wrap.row2.intro img{
    width:100%;
    height:auto;
}

/*特ページパターン*/
@media screen and (min-width:641px){
.grid-wrap.row2.intro.pattern > div:first-of-type img{
    width:79%;
    height:auto;
}  
}
.grid-wrap.row2.intro p.page_main_p{
    grid-column: 1 / -1;
    padding:0;
}
@media screen and (max-width:640px){
    .grid-wrap.row2.intro{
        grid-template-columns: 1fr;
        gap:10px clamp(15px,3vw,40px);
        margin-bottom:10px;
    }
}
.service-wrap{
    width:100%;
    display:grid;
    grid-template-columns: repeat(auto-fill,minmax(150px,1fr));
    gap:16px;
    margin:15px 0;
    padding:0 10px;
}
p.page_ari{
    display:grid;
    place-items:center;
    place-content:center;
    width:100%;
    margin:0;
    line-height: 1.4;
    min-height:50px;
}
p.page_ari:has(.aka){
    grid-template-columns: auto auto;
}
/*firefoxだけ上の:has()が効かないため ↓ ↓ ↓*/
@-moz-document url-prefix() {
    .excellent.service-wrap p.page_ari{
    grid-template-columns: auto auto;
}
}

p.page_ari span{
    display:inline-block;
    padding: 0;
    font-size: calc(100% * 0.8);
    line-height: 1.2;
}
.footer_inner{
    padding-inline: 15px;
    display:flex;
    justify-content: space-between;
}


.map_wrap{
    width:100%;
    height:auto;
    display:grid;
    grid-template-columns: 1fr auto 1fr; 
    grid-template-rows: 1fr;
    gap:0px;
    padding:0 0px;
/*    aspect-ratio:1056 / 559;*/
}
.atari{
    display:none;
    grid-column: 1 / -1;
    grid-row: 1 / 2;
    order:10;
    z-index: -1;
}


/*index map*/

.map_wrap > *{
    grid-row: 1 / 2;
    width:100%;
}
.map_wrap > .map_col:nth-of-type(1){
    grid-column: 1 / 2;
}
.map_wrap > .map_col:nth-of-type(2){
    grid-column: 2 / 3;
}
.map_wrap > .map_col:nth-of-type(3){
    grid-column: 3 / 4;
}
.map_col{
    display:flex;
    flex-direction: column;
    gap:5px;
}

.map_col img{
    width:100%;
}
.map_col.mapimg{
	width:100%;
    overflow: hidden;
}
.map_col.mapimg img{
/*    transform: translate(-1px,-5px);*/
}

@font-face{
  font-family: 'logotype_g';
  src: url('fonts/logotype_g.woff') format('woff');
}
.map_col h5{ 
    text-align: center;
    font-size: clamp(12px,1.1vw,17px);
    border-radius: 10px;
    color:#333;
    padding:5px 10px;
    margin-bottom:5px;
    font-family: 'logotype_g';
    letter-spacing: 0.1em;
	line-height: 1.3;
	white-space: nowrap;
}
.map_col a{
    display:block;
    font-size: 14px;
    color:#333;
    text-align: left;
    line-height: 1.4;
    padding:0 5px 5px;
/*	letter-spacing: -0.01vw;*/
}

.map_col .area1 h5{
    background:#E0DBAA;
}
.map_col .area2 h5{
    background:#FBB7C0;
}
.map_col .area3 h5{
    background:#BCE0D4;
}
.map_col .area4 h5{
    background:#DDEFA4;
}
.map_col .area5 h5{
    background:#F5C58A;
}
.map_col .area6 h5{
    background:#EBCBE9;
}
.map_col .area a:hover{
	color:#09C;
	text-decoration:underline;
}

@media screen and (min-width:1001px){
	.tablet{
		display:none;
	}
	.map_col a{
		white-space: nowrap;
		
	}
	.map_col:first-of-type{
    padding-top: 20px;
}
	.map_col a:last-of-type{
    margin-bottom:10%;
}
	.map_col .area3{
    transform: translateY(40px);
}

.map_col .area5{
    transform: translateY(-7%);
}
}
@media screen and (max-width:640px){
	.tablet{
		display:none;
	}
}

@media screen and (min-width:641px) and (max-width:1000px){
.map_col h5{ 
    padding:3px 5px;
}	
.map_wrap{
    grid-template-columns: 25% 1fr 25%;
	gap:10px;
}
.map_col a{
    font-size: 11px;
    line-height: 1.2;
	padding: 0 0px 3px;
}
/*
	.map_col.mapimg{
		width:90%;
		margin:0 auto;
}
*/
	.pc1000{
		display:none;
	}
}
/*
@media screen and (max-width:640px){
    .map_wrap{
        display:none;
    }
}
*/
@media screen and (max-width:640px){
    .map_wrap{
        display: contents;
    }
    .pc .map_col.mapimg{
        display: none;
    }
}

/*index top_box*/

.grid-wrap.boxs{
	display:grid;
	grid-template-columns: repeat(auto-fill,minmax(250px,1fr));
	grid-auto-rows:auto;
	gap:clamp(15px,2vw,30px);
	padding:10px;
	width:98%;
	margin: 0 auto;
}
.grid-wrap.boxs > *{
	width:100%;
	height:100%;
}
.top_box{
/*	aspect-ratio:330 / 285;*/
	overflow: hidden;
	border-radius:10px;
	background-color:#EEE;
}

/*
.top_box{
	width:330px;
	float:left;
	margin:10px 15px;
}
*/


.top_box:link{
/*	display:block;*/
	background-color:#EEE;
/*	border-radius:10px;*/
}


.top_box a:hover{
	display:block;
	background-color:#C6E2FF;
	border-radius:10px;}

.top_box_bg{
	display:block;
	padding:10px;
}

.top_box_bg_img img{
	width:100%;
	border-radius:10px;
		object-fit: cover;
	aspect-ratio: 600 / 450;
}

.top_box_p1{
	font-size:15px;
	letter-spacing:1px;
	color:#000;
	padding:5px 0 0 0;
	line-height: 1.5;
}

.top_box_p2{
	font-size:15px;
	padding:0 0 0 15px;
	color:#036;
	background-image:url(../img/common/tel.png);
	background-repeat:no-repeat;
	background-position:left;
}

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

.top_box a:link{
	display:block;
	background-color:#EEE;
	border-radius:10px;}

.top_box a:hover{
	display:block;
	background-color:#C6E2FF;
	border-radius:10px;}

.top_box_bg{
	display:block;
	padding:10px;}

.top_box_p2{
	font-size:15px;
	padding:0 0 0 15px;
	color:#036;
	background-image:url(../img/common/tel.png);
	background-repeat:no-repeat;
	background-position:left;}
}

/*sightseeing*/

.event_linkbtn .boxs{
	display:grid;
	grid-template-columns: repeat(auto-fill,minmax(195px,auto));
	gap:10px;
}
.elbtn2 a:link , .elbtn2 a:visited , .elbtn2 a:active{
	display:block;
	width:100%;
	padding:10px;
	font-size:18px;
	text-align:center;
	color:#FFF;
	background-color:#84C1FF;
	border-radius:5px;
	text-decoration:none;
}

.elbtn2 a:hover{
	background-color:#069;
}

.event_wrap .wrap1080s{
	display:grid;
	grid-template-columns: repeat(auto-fill,minmax(250px,1fr));
	gap:30px 40px;
	padding-inline:20px;
	padding-block:30px;
}
.contents3{
	padding:0 0 clamp(30px,5vw,60px) 0;
}

.sight_box{
/*
	width:320px;
	height:420px;
*/
/*	margin:15px 20px;*/
/*	float:left;*/
}

.sight_box img{
	width:100%;
	height:auto;
	aspect-ratio:320 / 200;
	object-fit: cover;
}
@media print{
   .page_table .page_link.sp a{
        display:none;
    }
}