@charset "utf-8";


/* ==========================
デフォルトクリア 
============================*/

p,h1,h2,h3,h4,h5,h6 {
  margin-top: 0;
}

img {
  vertical-align:bottom;
}

ul,figure {
  margin: 0;
  padding: 0;
}

button {
	  border: none;  /* 枠線を消す */
    outline: none; /* クリックしたときに表示される枠線を消す */
    background: transparent; /* 背景の灰色を消す */
}

/* 全部にborder-boxを適用 */
*, *:before, *:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box
}

/* ==========================
共通
============================*/

body {
 margin: 0;
 padding: 0;
 background-image: url(../img/bg_body.jpg);
 background-repeat: repeat-y;
 background-position: center 50%;
 color: #333333;
 font-size: 18px;
 line-height: 1.5;
}

img {
	image-rendering:auto;  
}


/* ==========================
ヘッダー
============================*/
header {
 width: 100%;
 height: 130px;
 background-image: url(../img/bg_header.jpg);
 background-repeat: repeat-x;
 background-position: right top;
}

.header_content {
  width: 1024px;
  margin: 0 auto;
	display: flex;
	justify-content: space-between;
 }

.logo {
 margin: 0px 30px 0px 0px;
}

.header-right{
 margin: 5px 0px 0px 0px;
 color: #FFFFFF;
}

/* ==========================
indexスライドショー
============================*/

#slideshow {
   position: relative;
   width:  1024px; /* 画像の横幅に合わせて記述 */
   height: 500px; /* 画像の高さに合わせて記述 */
}

#slideshow img {
   position: absolute;
   top: 0;
   left:0;
   z-index: 8;
   opacity: 0.0;
}
#slideshow img.active {
   z-index: 10;
   opacity: 1.0;
}
#slideshow img.last-active {
   z-index: 9;
}

/* ==========================
グローバルナビ
============================*/

#global-nav {
  width: 100%;
  background-color: #53778b;
}

nav {
  width: 1024px;
	margin: 0 auto;
}

ul.global-nav {
 display: flex;
 padding: 10px 10px;
}

ul.global-nav li {
	list-style: none;
	position: relative;/*下の階層の基点にするため*/
}

ul.global-nav li a {
	text-decoration: none;
	display: block;
	text-align: center;
	line-height: 2.5em;
	font-weight:bolder;
	color: #ffffff;
	padding: 10px 40px 10px 10px;
}

ul.global-nav li a:hover {
	color: #f7f0dd;
}

/*下の階層を持っているulの指定*/
nav li.has-child ul{
    /*絶対配置で位置を指定*/
	position: absolute;
	left: 10px;
	top:60px;
	z-index: 11;
    /*形状を指定*/
	width:200px;
    /*はじめは非表示*/
	visibility: hidden;
	opacity: 0;
    /*アニメーション設定*/
	transition: all .3s;
}

/*2階層目以降は横並びにしない*/
nav ul ul{
	display: block;
}

/*hoverしたら表示*/
nav li.has-child:hover > ul,
nav li.has-child ul li:hover > ul,
nav li.has-child:active > ul,
nav li.has-child ul li:active > ul{
  visibility: visible;
  opacity: 1;
}

nav ul li.has-child::before {
	content: '\e5cf';
	font-family: 'Material Icons';
	font-size: 24px;
	color: #ffffff;
	padding: 0px 3px 0px 0px;
	position: absolute;
	left: -13px;
	top: 13px;
	}

nav ul li.has-child:hover::before {
	color: #f7f0dd;
	}

/*サブナビaタグの形状*/
nav li.has-child ul li a{
	font-size: 16px;
	text-align: left;
	font-weight: normal;
	line-height: 1.5em;
	color: #53778b;
	border: solid 1px #a3bbc8;
	border-radius: 3px;
	background-color: #ffffff;
	box-shadow: 2px 6px 6px 2px rgba(0, 0, 0, 0.08);
	margin: 5px;
}

nav li.has-child ul li a:hover,
nav li.has-child ul li a:active{
	background-color: #f7f0dd;
	color: #53778b;
}

/* nav-toggleハンバーガーメニュー */

#nav-toggle {
	display: none;
	position: absolute;
	top: 15px;
	right: 35px;
	height: 61px;
	cursor: pointer;
}

#nav-toggle > div {
	position: relative;
	width: 50px;
}

#nav-toggle span {
	width: 100%;
	height: 3px;
	left: 0;
	display: block;
	background: #ffffff;
	position: absolute;
	-webkit-transition: .35s ease-in-out;
	-moz-transition: .35s ease-in-out;
	transition: .35s ease-in-out;
}

#nav-toggle span:nth-child(1) {
	top: 5px;
}
#nav-toggle span:nth-child(2) {
	top: 20px;
}
#nav-toggle span:nth-child(3) {
	top: 36px;
}

#overlay {
	display: none;
	position: fixed;
	background: rgba(0,0,0,0.6);
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

/* ==========================
レイアウト
============================*/
#wrap {
 width: 1024px;
 margin: 0 auto;
 clear: both;
 background-color: #ffffff;
}

#content {
 background-color: #ffffff;
 padding: 35px 20px;
}

#hero {
	margin-top: 0px;
	position: relative;
	height: 500px;
	}

.flex-box{
	display: flex;
	flex-wrap: wrap;
}

.flex-60{
	width: 60%;
	padding: 10px;
}

.flex-40{
	width: 40%;
	padding: 10px;
}

.flex-50{
	width: 50%;
	padding: 10px;
}


/* ==========================
共通要素
============================*/	

.bobile-contents{
	display: none;
}

h1 {
	font-size:28px;
	padding: 0px 0px 20px 10px;
}

.h1sub {
	font-size:18px;
	color: #8f8f8f;
}

h2{
 font-size:20px;
 font-weight:bolder;
 margin:20px 0px 10px 0px;
 padding:3px 10px 3px 10px;
 border-top:none;
 border-right:none;
 border-bottom:1px #a7c5d6 solid;
 border-left:5px #a7c5d6 solid;
}

h3{
	font-weight:bolder;
	padding:10px 10px 10px 0px;
	margin: 0;
}

p{
 margin:0px 0px 1em 0px;
}

/*　リンク　*/	
a {
 color: #53778b;
}

.w100{
	max-width: 100%;
}

span.tel {
	font-size: 24px;
	font-weight: bolder;
}

span.tel::before {
	font-size: 24px;
	content: '\e0b0';
	font-family: 'Material Icons';
	padding: 0px 5px 0px 0px;
	position: relative;
	top: 5px;
	}

span.tel a {
	text-decoration: none;
	color: #333333;
}

span.instagram {
	font-size: 24px;
	font-weight: bolder;
}

span.instagram::before {
	content: url(../img/icn_instagram.png);
	padding: 0px 5px 0px 0px;
	position: relative;
	top: 5px;
	}

span.facebook {
	font-size: 24px;
	font-weight: bolder;
}

span.facebook::before {
	content: url(../img/icn_facebook.png);
	padding: 0px 5px 0px 0px;
	position: relative;
	top: 5px;
	}

/* ==========================
画像リスト
============================*/
ul.images-list,
ul.thumb-list{
	display: flex;
	flex-wrap: wrap;
	list-style-type:none;
}

ul.thumb-list li{
	padding: 10px;
  width: 50%;
	display: flex;
}

ul.thumb-list figure{
	margin: 5px;
	width: 30%;
}

ul.thumb-list div{
	margin: 5px;
	width: 70%;
}

/* おみやげリスト */
ul.images-list li{
	padding: 10px;
  width: 50%;
}


/* のみものリスト */

ul.simple-list{
	list-style-type:circle;
}

ul.simple-list li{
	margin: 5px 0px 0px 25px;
}


/* ==========================
テーブル
============================*/
table.ippin{
	background-color: #cccccc;
	}
	
table.ippin th{
	background-color: #eeeeee;
	padding:5px;
	text-align: left;
	font-weight:normal;
	}
	
table.ippin tr{
	}

table.ippin td{
	background-color: #ffffff;
	padding:5px;
	}
	


/* ==========================
フッター
============================*/
footer {
 width: 1024px;
 margin: 0 auto;
}

.footer-content{
 padding: 20px 20px;
 background-image: url(../img/bg_header.jpg);
}


.footer-content2{
 padding: 20px;
 background-color: #cccccc;
 text-align: center;
}

.copy {
 font-size: 12px;
 color: #ffffff;
}

ul.footer-nav {
	display: flex;
	flex-wrap: wrap;
}

.footer-nav li {
 list-style: none;
 margin: 0px 20px 20px 0px;
}

.footer-nav li a {
 color: #FFFFFF;
 text-decoration: none;
}

.footer-nav a:hover {
 color: #FFFFFF;
 border-bottom : 1px solid #FFFFFF;
 padding-bottom: 2px;
}

ul.footer-info {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	color: #ffffff;
}

ul.footer-info li{
 margin :0px 30px 0px 0px;
 list-style: none;
}

ul.footer-info li a {
 color: #ffffff;
text-decoration: none;
}


/* ==============================
上に戻るボタン
=============================== */

#topbutton {
	/* ▼ボタンの表示位置を画面の右下に固定 */
	position: fixed; /* ←表示場所を固定 */
	bottom: 10px;   /* ←下端からの距離 */
	right: 25px;    /* ←右端からの距離 */
	display: none;/* ▼最初は非表示にしておく */
	text-align: center;
	opacity: 0.7;
}

#topbutton:hover {
	opacity: 1.0;
}

#topbutton a {
	position: relative;
  display: block;
  text-decoration: none;
	border: 1px solid #53778b;
	border-radius: 30px;
	background-color: #53778b;
	padding: 20px;
}

#topbutton a::before{
	font-size: 24px;
	content: '\e5d8';
	font-family: 'Material Icons';
  color: #fff;
  position: absolute;
  width: 25px;
  height: 25px;
  top: -5px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}