@charset "utf-8";
/*---------------------------------------------------
* michigarden.css (michigarden.htmlページの設定)
*--------------------------------------------------*/

/* 最初にデフォルトのマージン等を消して0にする */
*{
  margin: 0;
  padding: 0;
  border: 0; 
}

/* body: ページ全体の設定 */
body {
  background-color: #60A07F ; /* Green Sheen */
  font-size: 16px; /* デフォルトのフォントサイズ設定 */
  padding: 10px 20px 20px 20px; /* 上10px, 右下左20pxを背景にする */
  text-align: center; /* ページをセンタリングするため */
}

#wrapper { /* ページをセンタリングするため、bodyでwrapperをセンタリングし
              wrapper内で左寄せにする */
  margin: 10px auto; /* 上側マージン指定、両側マージンの自動調整 */
  text-align: left; /* コンテンツ部分は左寄せ */
  background-color: #FEF0C3; /* 背景を生成り色にする */
  border-radius: 1.5em; /* 生成り色部分の角を丸くする */
}

/*---------------------------------------------------
* Header部分の設定
*--------------------------------------------------*/
#header {
  overflow: hidden; /* float解除のため */
}

/* ヘッダーのNavigation部分(Profile、プロフィールボタン及びハンバーガーメニュー) */
#header #navigation {
  float: right; /* 右寄せ */
  margin: 0% 0% 1% 1%;
  width: 80%;
}

/* ヘッダーのProfile、プロフィールボタン */
#button-navi {
  display: flex;
  margin: 2% 0% 0% 30%;
}

/* ヘッダーのProfile、プロフィールボタンの各リスト項目 */
#button-navi li {
  margin: auto;
  list-style: none; /* リストの黒丸を消す */
  max-height: 2em;
}

/* ヘッダーのProfile、プロフィールボタンのリンク設定 */
#button-navi a {
  color: #594639; /* 焦げ茶色 */
  display: block; /* 横に並べるため */
  text-align: center; /* ボタン内でセンタリング */
  font-family: Arial, Helvetica, sans-serif; /* フォント指定 */
  font-weight: bold; /* 太字 */
  font-size: 1em; /* フォントサイズ */
}

/* ヘッダーのProfile、プロフィールボタンのボタン設定 */
#button-navi a.button {
  margin: 0% 0% 0% 3%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #ffffff; /* ボタン背景色：白色 */
  border: 0.1em solid #594639; /* ボタン枠色：焦げ茶色 */
  border-radius: 0.2em;         /* 角丸め(CSS3) */
  -moz-border-radius: 0.2em;    /* 角丸め(Firefox) */
  -webkit-border-radius: 0.2em; /* 角丸め(Safari,Chrome) */
  text-decoration: none; /* リンクの下線を消すため */
  width: 7em; /* ボタン幅 */
  height:1.5em; /* ボタン高さ */
  white-space: nowrap; /* 改行しない設定 */
}

/* トップの画像2つ全体の設定 */
#image-top {
  margin: 4% 0% 0% 0%; /* 上4%空ける */
  display: flex; /* 横並び設定 */
  justify-content: center; /* 等間隔に配置 */
}

/* トップ画像のスライドショーの設定 */
#image-top #slideshow {
  margin: 2% 2% 2% 0% ; /* 上2%、右2%、下2%、左0%空ける */
  width: 50%; /* 幅指定 */
  max-width: 300px; /* 最大幅指定 */
}

/* トップ画像のスライドショーの横のタイトル (メイン + サブ) */
#image-top #title-top {
  margin: 2% 0% 2% 2%; /* 上2%、右0%、下2%、左2%空ける */
}

/*---------------------------------------------------
* ハンバーガーメニュー
*--------------------------------------------------*/
#nav-drawer {
  float: right; /* 右端に配置 */
  position: relative;
  margin: 0.5em 0.5em 0em 1em; /* 上0.5em, 右0.5em、下0em、左1em空ける */
  display: block;
}

/* チェックボックス等は非表示に */
.nav-unshown {
  display:none;
}

/* ハンバーガーアイコンのスペース */
#nav-open {
  display: inline-block;
  width: 30px; /* 幅指定 */
  height: 22px; /* 高さ指定 */
  vertical-align: middle;
}

/* ハンバーガーアイコンをCSSだけで表現 */
#nav-open span, #nav-open span:before, #nav-open span:after {
  position: absolute;
  height: 3px; /* 線の太さ */
  width: 25px; /* 長さ */
  border-radius: 3px;
  background: #555;
  display: block;
  content: '';
  cursor: pointer;
}
#nav-open span:before {
  bottom: -8px;
}
#nav-open span:after {
  bottom: -16px;
}

/* 閉じる用の薄黒カバー */
#nav-close {
  display: none; /* はじめは隠しておく */
  position: fixed;
  z-index: 99;
  top: 0; /* 全体に広がるように */
  left: 0;
  width: 100%;
  height: 100%;
  background: black;
  opacity: 0;
  transition: .3s ease-in-out;
}

/* チェックが入ったらもろもろ表示 */
#nav-input:checked ~ #nav-close {
  display: block; /* カバーを表示 */
  opacity: .5;
}

#nav-input:checked ~ #nav-content {
  -webkit-transform: translateX(0%);
  transform: translateX(0%); /* 中身を表示（右へスライド） */
  box-shadow: 6px 0 25px rgba(0,0,0,.15);
}

/* 中身 */
#nav-content {
  overflow: auto;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999; /* 最前面に */
  max-width: 80%; /* 右側に隙間を作る（閉じるカバーを表示） */
  height: 100%;
  background: #ffffff; /* 白色 */
  transition: .3s ease-in-out; /* 滑らかに表示 */
  -webkit-transform: translateX(-105%);
  transform: translateX(-105%); /* 左に隠しておく */
}

/* 中身のMENU文字 */
#nav-title {
  font-weight: bold;
  font-size: 1.5em; /* フォントサイズ */
  font-family: Arial, Helvetica, sans-serif; /* フォント指定 */
  color: #594639; /* 焦げ茶色 */
  margin: 5% 0% 5% 0%; /* 上5%、右0%、下5%、左0%空ける */
  text-align: center;
}

/* 中身のGlobal Navigation */
#global-navi {
  margin: 0% 2% 0% 10%; /* 上0%、右2%、下0%、左10%空ける */
}

#global-navi nav {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Global Navigationの各リスト項目 */
#global-navi li {
  font-size: 16px; /* フォントサイズ */
  margin: 5px 0px 0px 0px; /* 位置調整 */
  list-style: none; /* リストの黒丸を消す */
  width: 100%;
}

/* Global Navigationのリンク */
#global-navi a {
  color: #594639; /* 焦げ茶色 */
  display: block; /* 縦に並べるため */
}

/* SNSの各リンクの設定 */
#link-sns {
  margin: 3% 0% 2% 0%; /* 上右下左のマージン指定 */
  display: block; /* 等間隔に配置 */
  font-weight: bold; /* 太字 */
  font-family: Arial, Helvetica, sans-serif; /* フォント指定 */
  font-size: 1em; /* フォントサイズ */
}

#link-sns a {
  text-decoration: none; /* リンクの下線を消すため */
}

/* Instagramのリンクバナー設定 */
#link-sns-instagram img {
  max-width: 100%;
}

/* Etsyのリンクバナー設定 */
#link-sns-etsy {
  margin: 1em 0em 0em 0em; /* 上右下左のマージン指定 */
}

#link-sns-etsy img {
  max-width: 100%;
}

/* Creemaのリンクバナー設定 */
#link-sns-creema {
  margin: 1em 0em 0em 0em; /* 上右下左のマージン指定 */
}

#link-sns-creema img {
  max-width: 100%;
}

/* japan-tokyo-tourguide.comのリンクバナー設定 */
#link-sns-japan-tokyo-tourguide {
  margin: 1em 0em 0em 0em; /* 上右下左のマージン指定 */
}

#link-sns-japan-tokyo-tourguide img {
  max-width: 100%;
}
/* ================ハンバーガーメニュー=============== */

/*---------------------------------------------------
* Container部分(コンテンツ)
*--------------------------------------------------*/
/* 水平線の設定 (メニューバーとトップ画像の間の水平線 */
.content-hr-top {
  border-width: 1px 0 0 0; /* 幅1ピクセルを指定 */
  border-style: solid; /* 実線 */
  border-color: #60A07F; /* Green Sheen */
  margin-bottom: 1%; /* 下1%空ける */
}

/* 水平線　Profileとプロフィールの間の斜線 (https://copypet.jp/2304/) */
.content-hr1 {
	height: 3px;
	border-width: 0;
	background-color: #FEF0C3;
	background-image: -webkit-linear-gradient(135deg,
	#60A07F 0px,#60A07F 2px, transparent 2px, transparent 4px,
	#60A07F 4px, #60A07F 6px, transparent 6px, transparent);
	background-image:         linear-gradient(-45deg,
	#60A07F 0px,#60A07F 2px, transparent 2px, transparent 4px,
	#60A07F 4px, #60A07F 6px, transparent 6px, transparent);
	background-size: 6px 6px;
  margin: 0% 2% 0% 2%;
}

/* 水平線　プロフィールとリンクの間のクレヨンで描いたような滲んだ線 (https://copypet.jp/2304/) */
.content-hr2 {
  height: 3px;
  border-width: 0;
  background-repeat: repeat-x;
  background-size: 0.7em 0.3em,1.7em 0.3em,3.5em 0.3em,3.7em 0.3em;
  background-position: right bottom;
  background-image:
  radial-gradient(0.3em 0.2em at center center,#60A07F,rgba(246,89,115,0)),
  radial-gradient(0.5em 0.2em at center center,#60A07F,rgba(246,89,115,0)),
  radial-gradient(0.8em 0.2em at center center,#60A07F,rgba(246,89,115,0)),
  radial-gradient(7.2em 0.2em at center center,#60A07F,rgba(246,89,115,0));
  margin: 0% 2% 0% 2%;
}

/* プロフィール見出しの設定 */
.content-header {
  color:  #594639; /* 焦げ茶色 */
  font-size: 1.2em; /* フォントサイズ */
  font-weight: bold; /* 太字 */
  line-height: 2.2em; /* 行間の指定 */
  padding-left: 1.5em; /* 左パディングの指定 */
  position: relative; /* 表示位置指定 */
}

/* プロフィール見出し前の四角形の設定 */
.content-header:before {
  background-color: #594639; /* 焦げ茶色 */
  content: ""; /* 中身なし */
  height: 0.8em; /* 高さの指定 */
  left: 0.5em; /* 位置指定 */
  position: absolute; /* 表示位置指定 */
  top: 11px; /* 位置指定 */
  width: 0.8em; /* 幅の指定 */
  border-radius: 50%;
}

/* プロフィール文章全体の設定 */
#profile {
  overflow: hidden; /* floatの解除のため */
  padding: 10px 0px 0px 0px; /* 上10pxを空ける */
  font-family: Arial, Helvetica, sans-serif;
}

/* プロフィールの名前の設定 */
#profile #profile-name {
  font-weight: bold;
  font-size: 1.2em;
  margin: 0px 10px 10px 0px; /* 上右下左のマージン指定 */
}

/* プロフィールの本文部分(英語)の設定 */
#profile #profile-content1 {
  float: center; /* 左寄せ */
  margin: 10px 20px 10px 20px; /* 上右下左のマージン指定 */
  font-size: 18px; /* フォントサイズ設定 */
}

/* プロフィールの本文部分(日本語)の設定 */
#profile #profile-content2 {
  float: center; /* 左寄せ */
  margin: 10px 20px 10px 20px; /* 上右下左のマージン指定 */
  font-family: Arial, Helvetica, sans-serif;
  font-style: normal;
}

/* プロフィールの左寄せ挿入画像の設定 */
#float_left {
  float: left; /* 左寄せ */
  margin: 0em 1em 0.5em 0em; /* 上右下左のマージン指定 */
  max-width: 40%;
}

/* プロフィールの左寄せ挿入画像の説明文 */
#float_left_text {
  font-size: 0.8em; /* フォントサイズ指定 */
  font-family: Arial, Helvetica, sans-serif; /* フォント指定 */
}

/* プロフィールの右寄せ挿入画像の設定 */
#float_right {
  float: right; /* 右寄せ */
  margin: 0em 0em 0.5em 1em; /* 上右下左のマージン指定 */
  max-width: 40%;
}

/* プロフィールの右寄せ挿入画像の説明文 */
#float_right_text {
  font-size: 0.8em; /* フォントサイズ指定 */
  font-family: Arial, Helvetica, sans-serif; /* フォント指定 */
}

/* 左寄せ・右寄せの解除 */
.float_none {
  clear:both; /* float解除のため */
}

/*---------------------------------------------------
* footer部分
*--------------------------------------------------*/
/* footer部分の設定 */
#footer {
  clear:both; /* float解除のため */
  margin: 2% 2% 2% 2%; /* 上2%、右2%、下2%、左2%空ける */
}

/* 下部のSNSの各リンクの設定 */
#link-sns-bottom {
  margin: 5% 5% 2% 5%; /* 上右下左のマージン指定 */
  display: flex; /* 横並びに配置 */
  justify-content: space-evenly; /* 等間隔に配置 */
  text-decoration: none;
}

#link-sns-bottom img {
  width: 100%;
  max-width: 100%;
  height: auto;
}

/* 下部のInstagramバナーの設定 */
#link-sns-bottom-instagram {
  margin: 0% 5% 0% 0%; /* 上右下左のマージン指定 */
  border-radius: 5em;
  max-width: 40%;
}

/* 下部のEtsyバナーの設定 */
#link-sns-bottom-etsy {
  margin: 0% 5% 0% 5%; /* 上右下左のマージン指定 */
  border-radius: 5em;
  max-width: 40%;
}

/* 下部のCreemaバナーの設定 */
#link-sns-bottom-creema {
  margin: 0% 5% 0% 5%; /* 上右下左のマージン指定 */
  border-radius: 5em;
  max-width: 40%;
}

/* 下部のjapan-tokyo-tourguide.comバナーの設定 */
#link-sns-bottom-japan-tokyo-tourguide {
  margin: 0% 0% 0% 5%; /* 上右下左のマージン指定 */
  border-radius: 5em;
  max-width: 40%;
}

/* copyright表示の設定 */
#footer #copyright {
  clear: both; /* float解除のため */
  padding: 3% 0% 5% 0%; /* 上3%、右0%、下5%、左0%のパディングを設定 */ 
  text-align: center; /* テキストをセンタリング */
  font-family: Arial, Helvetica, sans-serif; /* フォント指定 */
}

/* ページ末尾の"Return to Top"の文字 */
#footer #return_to_top a{  
  padding: 0% 0% 2% 0%;
  display: block;
  text-align: right;
  color: #594639;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  text-decoration: none;
}

/*---------------------------------------------------
* スマホ用デザイン (横幅375px以下)
*--------------------------------------------------*/
@media screen and (max-width: 375px) {
  /* トップ画像2つの設定 */
  #image-top {
    display: block; /* 縦並びにする */
    text-align: center;
    margin: auto;
  }

  /* トップ画像のスライドショー大きさを横幅に応じて変更する設定 */
  #image-top #slideshow {
    width: 90%;
    margin: auto;
  }

  #image-top #slideshow img {
    width: 100%;
  }

  /* MICHI GARDENのロゴと文字の設定 */
  #image-top #title-top {
    width: 90%;
    margin: auto;
  }

  #image-top #title-top img {
    width: 100%;
    margin-top: 2%; /* 上部を2%空ける */
  }

  /* ハンバーガーメニュークリック時の白地部分の幅 */
  #nav-content {
    width: 50%; /*右側に隙間を作る（閉じるカバーを表示）*/
  }

  /* 以下の3つは「Profile」「プロフィール」ボタンの設定 */
  #button-navi {
    margin: 2% 0% 0% 0%; /* 上部を2%空ける */
  }

  #button-navi a {
    font-size: 0.7em; /* フォントサイズを小さくする */
  }

  #button-navi a.button {
    width: 6.5em; /* 幅を小さくする */
    height: 1.5em; /* 高さを小さくする */
  }
} /* @media */
/* ================ スマホ用デザイン (横幅375px以下) =============== */

/*---------------------------------------------------
* スマホ用デザイン (横幅376〜768px)
*--------------------------------------------------*/
@media screen and (min-width: 376px) and (max-width: 768px) {
  /* トップ画像2つの設定 */
  #image-top {
    display: block;
    text-align: center;
    margin: auto;
  }

  /* トップ画像のスライドショー大きさを横幅に応じて変更する設定 */
  #image-top #slideshow {
    width: 100%;
    margin: auto;
  }

  /* ハンバーガーメニュークリック時の白地部分の幅 */
  #nav-content {
    width: 50%; /*右側に隙間を作る（閉じるカバーを表示）*/
  }

  /* 以下の3つは「Profile」「プロフィール」ボタンの設定 */
  #button-navi {
    margin: 2% 0% 0% 0%; /* 上部を2%空ける */
  }
  
  #button-navi a {
    font-size: 1em; /* フォントサイズを小さくする */
  }
  
  #button-navi a.button {
    width: 6.5em; /* 幅を小さくする */
    height: 1.5em; /* 高さを小さくする */
  }
} /* @media */
/* ================ スマホ用デザイン (横幅376〜768px) =============== */

/*---------------------------------------------------
* タブレット用デザイン (横幅769〜1024px)
*--------------------------------------------------*/
@media screen and (min-width: 769px) and (max-width: 1024px) {
  
  #wrapper {
    width: 768px; /* コンテンツ部分の幅(生成り色部分)をPCより狭める */
  }

  #header {
    width: 768px; /* header部分の幅も同様に狭める */
  }

  /* ハンバーガーメニュークリック時の白地部分の幅 */
  #nav-content {
    width: 30%; /* 右側に隙間を作る（閉じるカバーを表示）、タブレットの場合は小さくする */
  }
} /* @media */
/* ================ タブレット用デザイン (横幅769〜1024px) =============== */

/*---------------------------------------------------
* PC用デザイン (横幅1025px以上)
*--------------------------------------------------*/
@media screen and (min-width: 1025px) {

  #wrapper {
    width: 800px; /* コンテンツ部分(生成り色部分)の幅 */
  }

  #header {
    width: 800px; /* header部分の幅 */
  }

  /* ハンバーガーメニュークリック時の白地部分の幅 */
  #nav-content {
    width: 30%; /* 右側に隙間を作る（閉じるカバーを表示）、PCの場合は小さくする */
  }

  /*---------------------------------------------------
  * Container部分(コンテンツおよびfooter)
  *--------------------------------------------------*/
  #container {
    width: 800px; /* containerの幅 */
  }
} /* @media */
/* ================ PC用デザイン (横幅1025px以上) =============== */