@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700&family=Roboto:wght@400;500&display=swap');

html{
	font-size: 62.5%;/*16px*62.5%=10px*/
}
body{
	-webkit-font-smoothing: antialiased;
	-moz-osx-smoothing: grayscale;
	color: #000;
	font-family: 'Roboto', sans-serif;
	font-size: 1.6rem;
	font-feature-settings: "palt";
	line-height: 1;
	line-height: 1.3;
	margin: 0 auto;
	max-width: 428px;
	letter-spacing: 0.1em;
}
main{
	width: 100%;
	font-family: 'Noto Sans JP', sans-serif;
}

.main_container{
	margin: 0 auto;
	max-width: 428px;
	width: calc(100% - 40px);
}
/* 文字サイズCSS*/
.ft_l{
	font-size: 2.5rem;
	font-family: 'Noto Sans JP', sans-serif;
}
.ft_m{
	font-size: 1.8rem;
	font-family: 'Noto Sans JP', sans-serif;
}
.ft_s{
	font-size: 1.7rem;
	font-family: 'Noto Sans JP', sans-serif;
}
.section_content{
	margin-bottom: 60px;
	line-height: 1.7;
}

/* -----------------------
TOPページ
------------------------- */
.title--toppage{
font-weight: 900;
font-size: 2.5rem;
letter-spacing: 0.1em;
text-align: center;
color: #ef7601;
margin: 60px 0 60px;
font-family: 'Noto Sans JP', sans-serif;
}
.category_title{
	padding: 30px 0 30px 50px;
	
}
.category_title-wrap{
	border-top: 1px #D3CCCC solid;
}
.category_title-wrap:last-child{
	border-bottom: 1px #D3CCCC solid;
}
.shop_list--toppage{
	margin-top: 0px;
    margin-bottom: 40px;
}
/* 各カテゴリアイコン */
.g1,
.g2,
.g3,
.g4,
.g5,
.g6,
.g8,
.g9,
.g10{
	position: relative;
   }
 .g1::before,
 .g2::before,
 .g3::before,
 .g4::before,
 .g5::before,
 .g6::bifore,
 .g7::before,
 .g8::before,
 .g9::before,
 .g10::before{
	position: absolute;
	width: 30px;
	height: 30px;
	left: 0px;
}
.g1::before{
	content: url(../img/thum/g1.gif);
 }
.g2::before{
	content: url(../img/thum/g2.gif);
}
.g3::before{
	content: url(../img/thum/g3.gif);
}
.g4::before{
	content: url(../img/thum/g4.gif);
}
.g5::before{
	content: url(../img/thum/g5.gif);
}
.g6::before{
	content: url(../img/thum/g6.gif);
}
.g7::before{
	content: url(../img/thum/g7.gif);
}
.g8::before{
	content: url(../img/thum/g8.gif);
}
.g9::before{
	content: url(../img/thum/g9.gif);
}
.g10::before{
	content: url(../img/thum/g10.gif);
}
   /*==========================
   アコーディオンのためのcss
   ============================*/
   
   /*アコーディオン全体*/
   .accordion-area{
	   list-style: none;
	   /* width: 96%;
	   max-width: 900px; */
	   /* margin:0 auto; */
   }
   
   .accordion-area li{
	   margin: 10px 0;
   }
   
 
   /*アコーディオンタイトル*/
   .title-js{
	   position: relative;/*+マークの位置基準とするためrelative指定*/
	   cursor: pointer;
	   transition: all .5s ease;
   }
  
   .title-js::after{
	content: url(../img/arrow-dropdown.svg);
	position: absolute;
	width: 30px;
	height: 30px;
	right: 0;
	transition: all .5s ease;
   }
  
   /*　closeというクラスがついたら形状変化　*/
   .title-js.close::after{
	 transform: rotate(-180deg);
   }
   
   /*アコーディオンで現れるエリア*/
   .box {
	   display: none;/*はじめは非表示*/
   }

   
  
   
/*お店一覧*/
.shop_list--title{
	font-weight: 900;
}
.shop_list{
	margin-top: 30px;
	margin-bottom: 30px;
}
.shop_list--item{
	display: grid;
    grid-template-columns: 30% 70%;
	margin-bottom: 15px;
}
.shop_list--thumnail{
	object-fit: cover;
	max-width: 100px;
    width: 23vw;
    height: 23vw;
    max-height: 100px;
	border: 2px #707070 solid;
}
.shop_list--name_wrap{
	position: relative;
}
.shop_list--name{
	position: absolute;/*絶対配置*/
	top: 50%;
 left: 0%;
 -ms-transform: translate(0%,-50%);
 -webkit-transform: translate(0%,-50%);
 transform: translate(0%,-50%);
 margin:0;
 padding:0;
}

/* ----------------------------
旭川富良野美瑛グルメマップとは？ CSS 
------------------------------*/
.introduction_container{
	background-image: url(../img/background.jpg);
	background-repeat: repeat;
	padding: 0 20px 70px 20px;
}
.introduction_title--wrap{
	position: relative;
}
.introduction_title--p{
	color: #fff;
    font-size: 5.6rem;
    position: absolute;
    z-index: 100;
    top: -8px;
    left: -20px;
    text-transform: uppercase;
    font-weight: 900;
    line-height: 0.9;
	font-family: 'Noto Sans JP', sans-serif;
}
.introduction_title{
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 900;
	font-size: 2.2rem;
	color: #ef7601;
	z-index: 200;
	position: absolute;
	top: 58px;
}

.introduction_img--wrap{
	max-width: 120px;
	width: 28.03vw;
    margin: 50px auto 50px;
}
.introduction_text{
	margin: 0 auto;
	text-align: justify;
    text-justify: inter-ideograph;
    line-height: 1.7;
	z-index: 200;
	padding: 145px 15px 0 15px;
	font-family: 'Noto Sans JP', sans-serif;
}
.introduction_text2{
	width: 191px;
	height: 53px;
	background: #ef7601;
	filter: drop-shadow(0px 3px 6px rgba(0, 0, 0, 0.16));
	border-radius:35px;
    -webkit-border-radius:35px;
    -moz-border-radius:35px;
	margin: 0 auto;
	position: relative;
	font-family: 'Noto Sans JP', sans-serif;
}
.introduction_text2 p{
	color: #fff;
	position: absolute;
	top: 50%;
	left: 50%;
	-ms-transform: translate(-50%,-50%);
	-webkit-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
	margin:0;
	padding:0;
	width: 100%;
    text-align: center;
}
/* ----------------------------
旭川富良野美瑛グルメマップとは？ CSSここまで 
------------------------------*/





/* ----------------------------
single page
------------------------------ */
/* 個別パーツごとCSS */
.titleWrap{
	margin-bottom: 80px;
}
.title_img{
	width: 100%;
}
.name{
	border-left: #EF7601 solid 3px;
	padding-left: 10px;
	font-weight: 900;
	margin-bottom: 15px;
	font-family: 'Noto Sans JP', sans-serif;
}
.category{
	color: #6e6c6c;
	margin-bottom: 25px;
	font-family: 'Noto Sans JP', sans-serif;
}
.shop_img{
	width: 100%;
}
.subtitle{
	margin-bottom: 30px;
	font-weight: 900;
	line-height: calc(27 / 18);
	font-family: 'Noto Sans JP', sans-serif;
}


.section_title{
	position: relative;
	font-size: 2.5rem;
	font-weight: 900;
	border-bottom: solid 3px #A7A7A7;
	padding: 5px 5px 5px 50px;
	margin-bottom: 15px;
	font-family: 'Noto Sans JP', sans-serif;
}
.section_title::after{
	position: absolute;
	bottom: -3px;
	left: 0;
	content: "";
    width: 30%;
    height: 3px;
    background-color: #EF7601;
}
.section_title--present{
	position: relative;
}
.section_title--present::before{
	content: url(../img/icon-present.svg);
}
.section_title--shop{
	position: relative;
}
.section_title--shop::before{
	content: url(../img/icon-shop.svg);
}
.section_title--present::before,
.section_title--shop::before{
    position: absolute;
   	width: 32px;
  	height: 32px;
	left: 0;
}


.shop_info{
	margin-bottom: 10px;
}
.shop_info dt, .shop_info dd{
	display: inline-block;
}
.shop_info dt{
	width: 23%;
	margin-bottom: 20px;
	vertical-align: top;
}
.shop_info dd{
	width: 75%;
	margin-inline-start: 0;
	margin-bottom: 20px;
}
.map{
	margin-bottom: 60px;
}
.map iframe{
	width: calc(100vw - 40px);
    height: calc(100vw - 40px);
	max-width: 388px;
    max-height: 388px;
}
.page_top{
	border: 2px solid #ef7601;
	font-size: 1.7rem;
	color: #EF7601;
	height: 50px;
	width: 80%;
	display: block;
	margin: 80px auto;
	position: relative;
	font-family: 'Noto Sans JP', sans-serif;
}
.page_top--p{
	position: absolute;/*絶対配置*/
	 top: 50%;
  left: 50%;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  margin:0;
  padding:0;
  width: 90%;
 text-align: center;
 font-size: min(3.9vw,1.7rem);
 font-family: 'Noto Sans JP', sans-serif;
}
.page_top--p svg{
	vertical-align: middle;
	margin-top: -5px;
	margin-right: 15px;
}
.footer p{
	text-align: center;
	margin-bottom: 10px;
	margin-top: 20px;
	font-size: 1.4rem;
	font-family: 'Noto Sans JP', sans-serif;
font-family: 'Roboto', sans-serif;
}

/*--------------------------
 slick
 -------------------------- */
    /*--------画像サイズ調整---------*/
    img{ width:100%; }
  
    /*-----------height調整----------*/
    .slick-slide{ height:auto!important; }

    /*-----------矢印表示----------*/
    .slick-next{ right:0!important; }
    .slick-prev{ left:0!important; }
    .slick-arrow{ z-index:2!important; }


	.slick-dots li button:before {
		font-size: 10rem !important;
	}