@charset "utf-8";
/* CSS Document */
/*
	ご当地ソフトをたずねて
-----------------------------------------------------------------------------------------------*/

/* 表示切替 */
.switch{
	visibility:hidden;
}

main{
	font-family:"游ゴシック体", "Yu Gothic", YuGothic, 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 'ＭＳ Ｐゴシック', sans-serif;
	font-weight:400;
	-moz-background-origin: 330;
}
@media screen\0 {
	main {
		font-family: 'Segoe UI', Meiryo, sans-serif;
	}
}
main p{
	font-size:15px;
}
main img{
	width:100%;
}
main .txt_s{
	font-size:12px;
}
#gotochi{
	margin:1.75% 0% 0% 0%;
	font-size:100%;
/*	font-family:sans-serif;*/
	font-size:inherit;
	position:relative;
	width:100%;
	}

.gtc_head{
	position:relative;
}
.top_intro{
	margin:-25px 0 20px 0;
}
.top_copy{
	margin:0 0 40px 0;
}
.gtcMap{
	margin:0 0 40px 0;
	position: relative;
}

/* ボタン */
.gtc_btnArea{
	margin:10px 0;
	font-size:12px;
	font-weight:bold;
}
.btnL{
	height:35px;
	display:table;
	float:left;
	position:relative;
}
.btnR{
	float:right;
}
.btnL:before , .btnR_back:before , .btnR_next:after{
	font-family: "Font Awesome 5 Free";
	font-size:12px;
	position: absolute;
	top:12px;
}
.btnL:before{
	content: '\f137';
	color: #EB7F00;
	left: 0;
}
.btnR_back:before{
	content: '\f137';
	color: #54c2f0;
}
.btnR_next:before{
	content:'\02022';
	color: #54c2f0;
	padding:0 10px;
	display:table-cell;
	vertical-align:middle;
}
.btnR_next:after{
	content: '\f138';
	color: #54c2f0;
	right:0;
}
.btnL a{
	padding:0 0 0 57px;
	display:table-cell;
	vertical-align:middle;
}
.btnL a:before{
	content:"";
	width:33px;
	height:35px;
	background:url(../images/icon_gtc_top.png) no-repeat;
	background-size: contain;
	position:absolute;
	top:0;
	left:18px;
}
.btnR li{
	height:35px;
	display:table;
	position:relative;
}
.btnR_back{
	float:left;
}
.btnR_next{
	float:right;
}
.btnR_back a , .btnR_next a{
	display:table-cell;
	vertical-align:middle;
}
.btnR_back a{
	padding:0 0 0 50px;
}
.btnR_next a{
	padding:0 50px 0 0;
}
.btnR_back a:before , .btnR_next a:after{
	content:"";
	width:20px;
	height:35px;
	background-size: contain;
	position:absolute;
	top:0;
}
.btnR_back a:before{
	background:url(../images/icon_gtc_back.png) no-repeat;
	left:20px;
}
.btnR_next a:after{
	background:url(../images/icon_gtc_next.png) no-repeat;
	right:20px;
}

.btnL_bottom{
	position:relative;
}
.btnL_bottom .btnL{
	width:227px;
	position:absolute;
	left: 50%;
	-webkit-transform: translate(-50%,0%);
	-moz-transform: translate(-50%,0%);
	-ms-transform: translate(-50%,0%);
	-o-transform: translate(-50%,0%);
	transform: translate(-50%,0%);
}
.btnL_bottom .btnL:before{
	content:none;
}
.btnL_bottom .btnL a{
	padding:0 0 0 37px;
}
.btnL_bottom .btnL a:before{
	left:0;
}
.btnL_bottom .btnR{
	width:100%;
}
.btnL_bottom .btnR_next:before{
	content:none;
}

.gtcArea{
	margin:0 0 80px 0;
}
.gtcArea:last-of-type{
	margin:0 0 0 0;
}
.columnArea{
	margin:0 0 40px 0;
}
.columnArea:last-child{
	margin:0;
}
.txtBox_01{
	margin:0 0 20px 0;
	position: relative;
}
.txtBox_01:last-of-type{
	margin: 0;
}

/* 2カラム */
.columnBox{
	width:48.7%;
}
.fl_L{
	margin:0 1.3% 0 0;
	float:left;
}
.fl_R{
	margin:0 0 0 1.3%;
	float:right;
}

/* 見出し18px */
.tit_l{
	font-size:18px;
	font-weight:bold;
	line-height:160%;
}

/* 見出し角丸 */
.tit_kadomaru{
	margin:0 0 15px 0;
	padding:5px 10px;
	font-size:20px;
	font-weight:bold;
	color:#FFF;
	letter-spacing:0.2px;
	border-radius:5px;
	display:inline-block;
	
}

/* 見出しアイコン */
.tit_ico{
	margin:0 0 10px 0;
}
.tit_icoIn{
	width:30px;
	height:30px;
	margin:0 10px 0 0;
	border-radius:100%;
	float:left;
}
.icoTxt{
	padding:0 0 0 40px;
	font-size:20px;
	font-weight:bold;
	line-height:150%;
}

/* 見出しマーカー */
.tit_maker{
	margin-bottom:10px;
	font-size:18px;
	font-weight:bold;
	line-height:150%;
}
.tit_maker span{
	padding:0 0 2px 0;
}

/* 写真フレーム */
figure.flame01 img{
	border:10px solid #F2F2F2;
	width:100%;
}
/* キャプション */
.columnBox figcaption,
.caption{
	margin:8px 0 0 0;
	font-size:12px;
	line-height:140%;
}
/* コピーライト（文中の著作権マーク） */
.notationC {
	margin:8px 0 0 0;
	font-size:12px;
	line-height:140%;
	text-align: right;
	display: block;
}

/* 文字強調 */
.gtc_em{
	font-weight:bold;
}

/* 会話 */
.balloon{
	margin:0 0 20px 0;
}
.balloon:last-child{
	margin:0;
}
.balloon .baln_img{
	width:70px;
	margin:0 10px 0 0;
	float:left;
}
.balloon .talk{
	width:calc(100% - 80px);
	padding:15px;
	background-size: 12px 12px;
	float:right;
}
.balloon .talk p{
	font-weight:bold;
}
/* 会話中紹介 */
.balloon .talk_intro{
	margin:0 0 5px 0;
	font-weight:bold;
	line-height:150%;
	display: block;
}
.balloon .talk_intro .talk_name{
	font-size:18px;
}

/* スポット枠 */
.bg_spot_out{
	margin:0 0 40px 0;
	padding:0 2.6% 2.6% 2.6%;
}
.bg_spot_in{
	padding:2.6%;
	background:#FFF;
}

/* コラム */
.intro{
	padding:20px;
	position: relative;
}
.intro_detail{
	width:calc(100% - 285px);
	margin:0 15px 0 0;
	display:inline-block;
	float:left;
}
.intro_img{
	width:270px;
	float:right;
}
.intro_ribbonArea {
	width:95px;
	height:96px;
	position: absolute;
	top:-6px;
	right:-6px;
	overflow: hidden;
}
.intro_ribbon {
	width: 160px;
	padding: 7px 0;
	position: absolute;
	left: -23px;
	top: 22px;
	text-align: center;
	display: inline-block;
	font-family: "Montserrat", sans-serif;
	font-size: 14px;
	font-weight:700;
	line-height: 16px;
	color: #fff;
}
.intro_ribbon:before,.intro_ribbon:after{
	position: absolute;
	content: "";
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	bottom: -4px;
}
.intro_ribbon:before{
	left: 14px;
}
.intro_ribbon:after{
	right: 12px;
}

/* ショップインフォ */
.info{
	padding:20px;
	position: relative;
	box-sizing: border-box;
}
.info_titArea{
	margin:0 0 20px 0;
}
.info_tit{
	padding:0 0 0 70px;
	font-size:20px;
	font-weight:bold;
	line-height:130%;
}
.info_detail{
	width:calc(100% - 285px);
	margin:0 15px 0 0;
	display:inline-block;
	float:left;
}
.info_price{
	font-size:18px;
	font-weight:bold;
}
.info_price li{
	margin:0 0 10px 0;
	padding:0 0 0 23px;
	line-height:130%;
	position:relative;
}
.info_price li:before{
	content:"";
	width:18px;
	height:30px;
	margin:0 10px 0 0;
	background:url(../images/ico_soft.svg) no-repeat;
	background-size: contain;
	position:absolute;
	top:-4px;
	left:0;
}
.tab{
	margin:0 3px;
	font-size:15px;
	font-weight:100;
}
.info_address{
	margin:10px 0 0 0;
	padding:10px;
	font-size:14px;
	line-height:140%;
	background:#FFF;
}
.info_img{
	width:270px;
	float:right;
}
.info_ribbon{
	display: inline-block;
	position: absolute;
	top: -6px;
	left: 20px;
	margin: 0;
	padding: 15px 0 5px 0;
	z-index: 2;
	width: 58px;
	text-align: center;
	color: #FFF;
	font-family: "Montserrat", sans-serif;
	font-size: 14px;
	font-weight:700;
	line-height:120%;
	border-radius: 2px 0 0 0;
}
.info_ribbon:before{
	position: absolute;
	content: '';
	top: 0;
	right: -6px;
	border: none;
	border-right: solid 6px transparent;
}
.info_ribbon:after{
	content: '';
	position: absolute;
	left: 0;
	top: 100%;
	height: 0;
	width: 0;
	border-bottom: 10px solid transparent;
}

/* リンク */
.list_link{
	margin:8px 0 0 0;
	position:relative;
}
.list_link li{
	padding:0 0 0 17px;
	font-weight:bold;
}
.list_link li:before{
	font-family: "Font Awesome 5 Free";
	content: '\f138';
	font-size:13px;
	font-weight:bold;
	position: absolute;
	left: 0;
}
.list_link li a{
	text-decoration:underline;
}
.list_link li a:hover{
	text-decoration:none;
}

/* 注釈 */
.red{
	color:#FF0000;
}
.gtc_note{
	margin:10px auto;
	font-size:12px;
	line-height:150%;
	color:#FF0000;
}

/* js スライド */
.slider_Box{
	position:relative;
	margin:35px 0 0 0;
}
.icon_cam{
	width:20%;
	position:absolute;
	top:-55px;
	right:20px;
}


/* タブレット版 ブレークポイント768px */
@media screen and (max-width: 768px)  {
	#gotochi{
		/*
		margin:0% -3.2%;/* 横幅いっぱいに使う場合 
		width:106.4%;/* 横幅いっぱいに使う場合 
		*/
	}
	#gotochi img{
		width:100%;
	}

	.btnR{
		float:none;
	}
	.btnR_back:after{
		content:none;
	}
	.btnL_bottom .btnL{
		width:auto;
	}

}

/* スマホ版 ブレークポイント640px */
@media screen and (max-width: 640px)  {
	main p{
		font-size:14px;
	}
	main .txt_s{
		font-size:11px;
	}
	
	
	.gtcArea{
		margin:0 0 60px 0;
	}
	.columnArea{
		margin:0 0 30px 0;
	}
	.columnArea:last-child{
		margin:0;
	}
	.txtBox_01{
		margin:0 0 15px 0;
	}
	/* 2カラム */
	.columnBox{
		width:100%;
	}
	.fl_L , .fl_R{
		margin:0 0 20px 0;
		float:none;
	}

	
	.top_intro{
		margin:-10px 0 25px 0;
	}
	.top_copy{
		margin:0 0 10px 0;
	}

	/* ボタン */
	.gtc_btnArea {
		margin: 10px 0 0 0;
		font-size:10px;
		position:relative;
	}
	.btnR{
		float:none;
	}
	.btnL:before , .btnR_back:before , .btnR_next:after{
		font-size:10px;
	}
	.btnL:before , .btnR_back:before , .btnR_next:after{
		top:12px;
	}
	.btnR_back:after{
		content:none;
	}
	.btnL a{
		padding:0 0 0 41px;
	}
	.btnL a:before{
		width:20px;
		height:22px;
		top:7px;
		left:16px;
	}

	.btnL_bottom .btnL{
		width:auto;
		height:auto;
	}
	.btnL_bottom .btnL:before{
		content:none;
	}
	.btnL_bottom .btnL a{
		padding:0 0 0 25px;
	}
	.btnL_bottom .btnL a:before{
		top:4px;
		left:0;
	}
	.btnL_bottom .btnR{
		width:100%;
	}
	.btnL_bottom .btnR li{
		height:auto;
	}
	.btnL_bottom .btnR_back:before , .btnL_bottom .btnR_next:after{
		top:7px;
	}
	.btnL_bottom .btnR_back a{
		padding:0 0 0 35px;
	}
	.btnL_bottom .btnR_back a:before{
		width:15px;
		left:15px;
		background-size: contain;
	}
	.btnL_bottom .btnR_next:before{
		content:none;
	}
	.btnL_bottom .btnR_next a:after{
		width:15px;
		right:15px;
		background-size: contain;
	}
	.btnL_bottom .btnR_next a{
		padding:0 35px 0 0;
	}

	/* スポット枠 */
	.bg_spot_out{
		padding:0 10px 10px 10px;
	}
	.bg_spot_in{
		padding:10px;
	}

	/* コラム */
	.intro{
		padding:15px;
	}
	.intro_detail{
		width:100%;
		margin:0 0 10px 0;
		float:none;
	}
	.intro_detail p{
		margin:10px 0 0 0;
	}
	.intro_img{
		width:100%;
		float:none;
	}
	.intro_ribbonArea {
		width:110px;
		height:73px;
		top:-5px;
		right:-5px;
	}
	.intro_ribbon {
		width:173px;
		padding:4px 0;
		left:-5px;
		top:16px;
		font-size:11px;
	}
	.intro_ribbon:before{
		left: 34px;
	}
	.intro_ribbon:after{
		right: 34px;
	}
	
	/* ショップインフォ */
	.info{
		padding:15px;
	}
	.info_titArea{
		margin:0 0 25px 0;
	}
	.info_tit{
		padding:0 0 0 65px;
		font-size:19px;
	}
	.info_detail{
		width:100%;
		margin:0 0 10px 0;
		display:block;
		float:none;
	}
	.info_price{
		font-size:16px;
	}
	.info_price li{
		margin:0 0 15px 0;
	}
	.tab{
		font-size:13px;
	}
	.info_address{
		margin:15px 0 0 0;
	}
	.info_img{
		margin:10px 0 0 0;
		float:none;
	}
	.info_ribbon{
		padding: 20px 0 5px 0;
		width: 50px;
		font-size: 11px;
		line-height:120%;
	}
	.info_ribbon:after{
		border-left: 25px solid #F26964;
		border-right: 25px solid #F26964;
	}
	
	/* 見出し18px */
	.tit_l{
		font-size:17px;
		line-height:140%;
	}
	
	/* 見出し角丸 */
	.tit_kadomaru{
		font-size:19px;
		line-height:160%;
	}
	
	/* 見出しアイコン */
	.icoTxt{
		font-size:19px;
		line-height:160%;
	}
	
	/* 見出しマーカー */
	.tit_maker{
		font-size:17px;
	}
	
	/* キャプション */
	.columnBox figcaption{
		margin:8px 0 0 0;
		font-size:10px;
	}
	
	/* 会話中紹介 */
	.balloon .talk_intro .talk_name{
		font-size:17px;
	}

	/* js スライド */
	.icon_cam{
		width:25%;
		top:-30px;
		right:10px;
	}
}



/* SNSボタン */
#snsShare{
	margin:3px 0px 10px 0px;
	float: right;
	text-align:right;
	position:relative;
	z-index:100;
	display:block;
	width: 100%;
	}
.twLike {
	margin:0px 6px 0px 0px;
	float:right;
	display:inline;
	width:auto;
	}
.fb-like {
	margin:0px 6px 0px 0px;
	float:right;
	display:inline;
	width:auto;
	}