@charset "utf-8";

/* 電話発信の無効 */
@media(min-width: 768px){
	a[href^="tel:"]{
		pointer-events: none;
	}
}

/* =================================================================== 
=================================================================== */
@media screen and (max-width: 1399px) {

	.gnav {
		width: 92%;
	}

	.inner {
		width: 92%;
		padding: 0;
	}

	/*　多賀日記　*/
	#container {
		max-width: 96%;
	}

	a.article_cover {
		width: 45%;
	}

	#inner-container {
		width: 55%;
	}

	.article div {
		margin: 0px;
	}

	#a0 .article-image {
		max-width: 100%;
		width: 100%;
		margin-right: 0px;
	}

	div.article-image {
		margin-right: 20px;
	}

	#a0 .article-image img {
		width: 100%;
	}

	.article-image img {
		width: 100%;
	}

	div.article-image {
		max-width: 300px;
		width: 40%;
		margin-right: 20px;
	}

	.article-body {
		width: 60%;
	}
	/*　多賀日記 ここまで */

	.news_cover {
		overflow: hidden;
	}

	.news {
		margin: 0 -30px 35px;
	}

	.news_inner {
		padding: 0 10px;
	}

	.news_item {
		max-width: 760px;
		padding: 0 30px;
	}

	.news_item .heading {
		font-size: 2.8rem;
		padding: 25px 0 8px 13%;
	}

	.news_item .heading--oshirase {
		background-size: 35px;
	}

	.news_item .heading--koushin {
		background-size: 50px;
	}

	.news_inner {
		padding: 0 20px;
	}

	.news_content {
		padding: 29px 3% 27px;
	}

	.news_content_time {
		font-size: 1.6rem;
		flex-shrink: 0;
		min-width: 130px;
	}

	.f_menu a {
		padding: 12px 29px 9px;
	}

	/*===========================================
    	中ページ
	===========================================*/

	.naka_title {
		font-size: 4.5rem;
	}

	.naka_title_pic_01 {
		top: 25px;
		left: 6%;
	}

	.naka_title_pic_02{
		display: none;
	}
	
	.naka_title_pic_03{
		display: none;
	}

	.naka_title_pic_04 {
		top: 35px;
		right: 6%;
	}

	/*
	.naka_title_cover {
		height: 250px;
		padding-bottom: 20px;
		background-position: center top 25px;
		background-size: 115px;
	}
	
	.naka_title_pic_01{
		top: 35px;
		left: 19px;
	}
	
	.naka_title_pic_01 img{
		width: 200px;
	}
	
	.naka_title_pic_02{
		top: 105px;
		left: 225px;
	}
	
	.naka_title_pic_02 img{
	    width: 120px;
	}
	
	.naka_title_pic_03{
		top: 105px;
		right: 210px;
	}
	
	.naka_title_pic_03 img{
		width: 120px;
	}

	.naka_title_pic_04{
		top: 35px;
	}
	
	.naka_title_pic_04 img{
		width: 200px;
	}
	*/

	.list_item{
		width: calc((100% - 120px) / 3);
		margin: 0 15px 30px;
	}

	.list_item_label {
		font-size: 1.6rem;
	}

	.list_item_title {
		font-size: 2.5rem;
	}
}

/* =================================================================== 
=================================================================== */
@media screen and (max-width: 1023px) {

	/*===========================================
		ヘッダー
	===========================================*/
	.header_top {
		display: block;
		padding: 15px 0px 5px 15px;
	}

	.header_title_area {
		display: inline-block;
		margin-bottom: 5px;
	}

	.header_title {
		margin-bottom: 5px;
	}

	.header_title img {
		width: 150px;
	}

	.inquiry {
		top: 20px;
		right: 80px;
	}

	.inquiry a {
		padding: 15px 15px 14px 65px;
		background-position: left 20px bottom 13px;
		border-radius: 30px;
	}

	/* googleカスタム検索 */
	form.gsc-search-box {
		margin-bottom: 0 !important;
	}

	.gsc-input-box {
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}

	.gsc-control-cse {
		width: 200px !important;
	}

	.gsc-search-button-v2 {
		padding: 8px !important;
	}
	/* googleカスタム検索 ここまで */

	.ui_box {
		justify-content: flex-end;
	}

	.fontsize_box {
		display: none;
	}

	/* ハンバーガーボタン */
	#toggle_btn {
		display: block;
		position: fixed;
		top: 19px;
		right: 15px;
		width: 50px;
		height: 50px;
		z-index: 100;
		background-color: #F58383;
		border-radius: 50%;
	}

	#toggle_line {
		display: block;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 20px;
		height: 2px;
		background-color: #fff;
		transition: .3s;
	}

	#toggle_line:before,
	#toggle_line:after{
		content: "";
		position: absolute;
		top: 50%;
		left: 0;
		width: 100%;
		height: 2px;
		background-color: #fff;
		transition: .3s;
	}

	#toggle_line:before {
		margin-top: -8px;
	}

	#toggle_line:after {
		margin-top: 6px;
	}

	#toggle_btn.is-active #toggle_line{
		background: transparent;
	}

	#toggle_btn.is-active #toggle_line:before,
	#toggle_btn.is-active #toggle_line:after{
		margin-top: 0;
	}

	#toggle_btn.is-active #toggle_line:before{
		transform: rotate(-45deg);
	}

	#toggle_btn.is-active #toggle_line:after{
		transform: rotate(-135deg);
	}

	/* スマホメニュー */
	.gnav {
        position: fixed;
        top: 0;
        left: auto;
        /* left:0; 打消し */
        right: 0;
        width: 70vw;
        height: 100vh;
        overflow-y: scroll;
        background-color: #fff;
        z-index: 100;
        transition: .4s;
        opacity: 0;
        visibility: hidden;
        transform: translateX(100%);
		margin: 0;
    }

    .is-open .gnav {
        opacity: 1;
        visibility: visible;
        transform: translateX(0);
    }

    .gnav_inner {
        padding: 85px 26px 110px;
    }

	.gnav_list {
		flex-wrap: wrap;
		justify-content: initial;
	}

	.gnav_item {
		max-width: 100%;
		width: 50%;
		margin-bottom: 25px;
	}

	.gnav_item a {
		height: 90px;
	}

	.gnav_item a:after {
		content: "";
		width: 2px;
		height: 70px;
		background-color: #F58383;
		position: absolute;
		bottom: 10px;
		right: 0;
	}

	.gnav_item:last-of-type a:after {
		content: "";
	}

	.gnav_item:nth-child(odd) a::before {
		content: "";
		width: 2px;
		height: 70px;
		background-color: #F58383;
		position: absolute;
		bottom: 10px;
		left: 0;
	}

	.gnav_sub{
		display: block;
		margin-top: 15px;
	}

	.gnav_tel {
		font-size: 2.3rem;
		letter-spacing: 0;
		text-align: center;
		margin-bottom: 20px;
		font-family: 'Kosugi Maru', sans-serif;
	}

	.gnav_inquiry {
		width: 100%;
		font-family: 'Kosugi Maru', sans-serif;
	}

	.gnav_inquiry a {
		display: block;
		color: #fff;
		letter-spacing: .1em;
		text-align: center;
		padding: 14px 0 14px 25px;
		background-color: #F58383;
		border-radius: 50px;
	}

	.gnav_inquiry span {
		position: relative;
	}

	.gnav_inquiry span::after {
		content: "";
		display: block;
		position: absolute;
		top: 0;
		left: -30px;
		width: 25px;
		height: 18px;
		background-image: url(../img/mail.png);
		background-repeat: no-repeat;
		background-position: center;
		background-size: contain;
	}

    #mask {
        display: none;
        transition: .5s;
    }

    .is-open #mask {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(255, 255, 255, 0.8);
        opacity: .8;
        z-index: 10;
    }

	/*===========================================
		コンテンツ
	===========================================*/
	/* お知らせ　大 */
	.inner {
		padding: 0;
		width: 90%;
	}

	.info .heading {
		font-size: 2.8rem;
		margin-bottom: 20px;
	}

	.info .heading::before, .info .heading::after {
		width: 32%;
	}

	/*　多賀日記　*/
	#container {
		display: block;
	}

	.article {
		margin: 0 0 15px;
	}

	.article#a0 {
		width: 100%;
	}

	#inner-container {
		width: 100%;
	}

	.article div {
		margin: 0;
	}

	#a0 .article-image {
		max-width: 100%;
		width: 100%;
	}

	#a0 .article-image {
		margin-right: 0px;
	}

	div.article-image {
		max-width: 300px;
		width: 40%;
		margin-right: 20px;
	}

	#a0 .article-image img {
		width: 100%;
	}

	.article-image img {
		width: 100%;
	}

	.article-body {
		width: 60%;
	}

	#a0 .article-title {
		font-size: 2.5rem;
		margin: 10px 0;
	}

	#a0 .eve_text {
		font-size: 2rem;
	}

	/* 観光バナー */
	.bnr_kankou_list li {
		width: calc((100% - (1.5% * 2)) / 3);
	}

	/* お知らせ、更新情報 */
	.news {
		display: block;
		margin: 0 -15px 35px;
	}

	.news_item {
		max-width: 100%;
		padding: 0 15px;
		margin-bottom: 40px;
	}

	.news_item .heading {
		font-size: 2.6rem;
		padding: 25px 0 8px 11%;
		margin-bottom: 20px;
	}

	.news_item .heading--koushin {
		background-size: 50px;
	}

	.instaglam .heading {
		font-size: 2.8rem;
	}

/*　鉄道の関連情報　*/
.btn_box{
	display: block;
	}
	
a.train_btn_green {
	width: 100%;
	margin: 5px 0 5px 0;
}
	
a.train_btn_green::before {
	content: none;
	}
	
a.train_btn_green:hover {

	}
	
a.train_btn_blue {
	width: 100%;
	margin: 5px 0 5px 0;
}
	
a.train_btn_blue::before {
	content: none;
}
	
a.train_btn_blue:hover {
}

	/*===========================================
		フッター
	===========================================*/
	/* フッターバナー */
	.f_bnr_inner {
		padding: 20px 5%;
	}

	.f_bnr_list li {
		margin: 0 15px;
	}

	.f_slide_arrow {
		width: 35px;
    	height: 35px;
	}

	.f_slide_arrow--prev {
		left: -27px;
	}

	.f_slide_arrow--next {
		right: -27px;
	}

	.f_slide_arrow--prev:after {
		left: 9px;
	}

	.f_slide_arrow--next:after {
		right: 9px;
	}

	/* フッターメニュー以下 */
	.f_menu {
		display: none;
	}

	.f_contact_bg {
		max-width: 630px;
		background-size: 90px,100px;
		background-position: left bottom 50px, right bottom 20px;
		padding-top: 40px;
	}

	.f_tel {
		font-size: 4rem;
	}

	/*===========================================
    	中ページ
	===========================================*/
	.naka_inner {
		padding: 0 15px;
		max-width: 100%;
		width: 100%;
	}

	/* パンくずリスト */
	.breadcrumbs {
		overflow-x: auto;
	}

	.breadcrumbs ol li {
		white-space: nowrap;
		word-break: keep-all;
	}

	.list_item{
		width: calc((100% - 60px) / 2);
		margin: 0 15px 30px;
	}

	.list_item_label {
		font-size: 1.5rem;
	}

	.list_item_title {
		font-size: 2.3rem;
	}

	.naka_title_cover {
		height: 280px;
		padding-bottom: 25px;
	}

	.naka_title {
		font-size: 4rem;
	}

	.naka_title_pic_01 {
		top: 50%;
    	transform: translateY(-50%);
		left: 3%;
		width: 26%;
	}

	.naka_title_pic_01 img {
		width: 100%;
	}

	.naka_title_pic_04 {
		top: 50%;
    	transform: translateY(-50%);
		right: 3%;
		width: 23%;
	}

	.naka_title_pic_04 img {
		width: 100%;
	}

	/*===========================================
		観る・遊ぶ　詳細
	===========================================*/
	.detail_photo {
		display: block;
	}

	.detail_photo_main {
		max-width: 100%;
		padding-right: 0;
		margin-bottom: 5px;
	}

	.detail_photo_sub {
		max-width: 100%;
		display: flex;
	}

	.detail_photo_sub img {
		width: calc((100% - 10px) / 3);
		margin-bottom: 0;
		margin-right: 5px;
	}

	.detail_photo_sub img:last-of-type {
		margin-bottom: 0;
		margin-right: 0;
	}

}

/* =================================================================== 
=================================================================== */
@media screen and (max-width: 599px) {
	
	.br_pc{
		display: none;
	}

	.br_sp{
		display: block;
	}

	.header_top {
		display: block;
		padding: 10px 0px 0px 10px;
	}

	.header_title img {
		width: 120px;
	}

	.header_title_sub {
		font-size: 1.1rem;
	}

	.inquiry {
		top: 10px;
		right: 65px;
	}

	.inquiry a {
		padding: 0;
		background-position: center;
		background-size: 25px;
		border-radius: 50%;
		width: 45px;
		height: 45px;
	}

	.inquiry span{
		display: none;
	}

	.mainvisual {
		display: flex;
		flex-direction: column;
	}

	.mainvisual_slide {
		max-width: 100%;
		padding-right: 0;
		margin-bottom: 2px;
	}

	.mainvisual_banner {
		max-width: 100%;
		display: flex;
		justify-content: space-between;
	}

	.mainvisual_banner li {
		width: calc((100% - 2px) / 2);
	}

	.mainvisual_banner li:first-of-type {
		margin-bottom: 0;
	}

	#toggle_btn {
		top: 10px;
		right: 10px;
		width: 45px;
		height: 45px;
	}

	.gnav {
        width: 80vw;
		padding: 0;
    }

    .gnav_inner {
        padding: 80px 20px 110px;
    }

	.gnav_item {
		font-size: 1.5rem;
		margin-bottom: 20px;
	}

	.inner {
		width: 93%;
	}

	.info .heading {
		font-size: 2.3rem;
		padding: 10px 0;
	}

	.info .heading::before, .info .heading::after {
		width: 28%;
	}

	.info .heading::before {
		left: 15px;
	}

	.info .heading::after {
		right: 15px;
	}

	/*　多賀日記　*/
	.article div {
		margin: 0;
	}

	#a0 .article-image {
		margin-right: 0px;
	}

	div.article-image {
		margin-right: 10px;
	}

	#a0 .article-body {
		width: 95%;
	}

	.article-body {
		margin: 0;
	}

	#a0 .article-title {
		font-size: 2.2rem;
		margin: 10px 0;
	}

	.article-title {
		font-size: 1.6rem;
	}

	#a0 .eve_text {
		font-size: 1.6rem;
	}

	.eve_text {
		font-size: 1.4rem;
	}

	/* 観光バナー */
	.bnr_kankou_list li {
		width: calc((100% - (1.5% * 1)) / 2);
	}

	/* お知らせ、更新情報 */
	.news_item .heading {
		font-size: 2.3rem;
		padding: 25px 0 8px 17%;
		margin-bottom: 0px;
	}

	.news_item .heading--oshirase {
		background-size: 30px;
		background-position: left 10px bottom 7px;
	}

	.news_item .heading--koushin {
		background-size: 40px;
	}

	.news_inner {
		padding: 0px 10px;
	}

	.news_content {
		display: block;
		padding: 25px 10px 23px;
	}

	.news_content_time {
		display: block;
		margin-bottom: 8px;
	}

	.instaglam .heading {
		font-size: 2.5rem;
		margin-bottom: 20px;
	}

	.f_bnr_list li {
		margin: 0 5px;
	}

	.f_slide_arrow--prev {
		left: -30px;
	}

	.f_slide_arrow--next {
		right: -30px;
	}

	/* フッターメニュー以下 */
	.f_contact_bg {
		background-size: 50px,60px;
		background-position: left 6% bottom 120px, right 5% bottom 100px;
		padding-top: 48px;
	}

	.f_contact {
		padding: 15px 0 30px;
	}

	.f_title img{
		width: 170px;
	}

	.f_address {
		font-size: 1.5rem;
	}

	.f_tel {
		font-size: 2.6rem;
	}

	/* ページトップへボタン */
	#page-top {
		position: fixed;
		right: 10px;
		bottom: 35px;
	}

	#page-top a{
		width: 50px;
		height: 50px;
		padding-top: 0;
	}

	#page-top a:before {
		content: "";
		position: absolute;
		left: 50%;
		top: 20px;
		width: 15px;
		height: 15px;
		border-left: 3px solid #fff;
		border-top: 3px solid #fff;
		transform: translateX(-50%) rotate(45deg);
	}

	#page-top a:after {
		content: none;
	}

	/*===========================================
    	中ページ
	===========================================*/
	.breadcrumbs {
		font-size: 1.4rem;
	}

	.breadcrumbs li:after {
		width: 7px;
		height: 7px;
	}

	.naka_title_cover {
		height: 200px;
		background-size: auto 100px;
		padding-bottom: 15px;
		margin-bottom: 35px;
	}

	.naka_title_cover--event {
		background-position: center top 30px;
	}

	.naka_title_cover--access {
		background-position: center top 30px;
	}

	.naka_title {
		font-size: 3rem;
	}

	.naka_title_pic_01 {
		display: none;
	}

	.naka_title_pic_02 {
		display: none;
	}

	.naka_title_pic_03 {
		display: none;
	}

	.naka_title_pic_04 {
		display: none;
	}

	.naka_content {
		padding: 0 0px;
	}

	.list_item{
		max-width: 100%;
		width: 100%;
		margin: 0 15px 20px;
	}

	.list_item_label {
		font-size: 1.4rem;
		padding: 6px 24px 6px;
	}

	.list_item_title {
		font-size: 2.4rem;
	}

	.pagination_item{
		display: none;
	}

	.pagination_item.first,
	.pagination_item.prev,
	.pagination_item.next,
	.pagination_item.last,
	.pagination_item.current{
		display: block;
	}
	
	.pagination_item a {
		font-size: 1.6rem;
	}

	/*===========================================
		観る・遊ぶ　詳細
	===========================================*/
	.naka_title_detail {
		font-size: 2.8rem;
		padding: 20px 10px 12px;
		margin-bottom: 40px;
	}

	.detail_box {
		padding: 0;
	}

	.detail_title {
		font-size: 2.5rem;
		padding: 20px 15px 17px;
	}

	.detail_inner {
		padding: 0 0px;
	}

	.detail_intro {
		font-size: 1.5rem;
		letter-spacing: .12em;
		line-height: 1.7;
		margin-bottom: 20px;
	}

	.detail_intro .emphasis {
		font-size: 2rem;
	}

	.detail_photo_main {
		margin-bottom: 2.5px;
	}

	.detail_photo_sub img {
		width: calc((100% - 5px) / 3);
		margin-right: 2.5px;
	}
	
	.detail_price_tbl th {
		display: block;
		width: 100%;
		font-size: 1.8rem;
	}

	.detail_price_tbl td {
		display: block;
		width: 100%;
		padding: 15px 20px;
	}

	.detail_info_tbl th {
		display: block;
		width: 100%;
		font-size: 1.8rem;
	}

	.detail_info_tbl td {
		display: block;
		width: 100%;
		padding: 15px 20px;
	}
	
	.others_pic img {
		width: 100%;
	}

	.detail_map iframe {
		width: 100%;
		height: 400px;
	}
	
/*===========================================
	ボランティア観光ガイド
===========================================*/
ul.vol_guide_list{
	margin: 0 auto 30px auto;
	padding: 0 0 0 0px;
}

}

/* =================================================================== 
=================================================================== */
@media screen and (max-width: 320px) {
	.detail_price_tbl th {
		padding: 15px 0 5px 10px;
	}

	.detail_price_tbl td {
		padding: 0px 10px 15px 10px;
	}

	.detail_info_tbl th {
		padding: 15px 0 15px 10px;
	}

	.detail_info_tbl td {
		padding: 15px 10px;
	}

}