:root {
  --Select_circle_Side_length: 250px;
  --Select_circle_Margin: 8%;
}

/* すべてのマージンを0にする */
* {
  margin: 0;
  font-family: "YuGothic", "Yu Gothic", "Hiragino Kaku Gothic ProN",
    "ヒラギノ角ゴ ProN W3", "メイリオ", "Meiryo", "ＭＳ ゴシック", sans-serif;
}

/* ここからヘッダーについて */
header {
  background-color: #333;
  padding: 1% 0 0 1%;
}
header .logo img {
  width: 30%;
}
#googlemap {
  color: blue;
}
@media (max-width: 550px) {
  header .logo img {
    width: 60%;
  }
  .top_img img {
    width: auto !important;
  }
  .top_img {
    background-size: 100% !important;
  }
}

/* PC・タブレット用のヘッダー */
header .pc {
  display: flex;
  align-items: flex-end; /*水平方向の最も低い位置に寄せる*/
  justify-content: flex-end; /*ヘッダーの内容を右に寄せる*/
}
header .pc li {
  font-size: 1.5rem;
  font-weight: bold;
  list-style: none;
  margin: 0 3% 0 3%;
}
header .pc li :hover {
  text-decoration: none;
  color: rgb(92, 207, 241);
  cursor: pointer;
}
header .pc li a {
  text-decoration: none;
  color: #fff;
}
.input-hidden {
  display: none;
}
/* label */
.hamburgerswitch {
  cursor: pointer;
  position: absolute;
  right: 3%;
  top: 0; /* ハンバーガーアイコンの位置（上から） */
  z-index: 9999;
  width: 4em; /* アイコン（クリック可能領域）の幅 */
  height: 6em; /* アイコン（クリック可能領域の）高さ */
}
/* メニュー展開時にハンバーガーアイコンを固定 */
#hamburger-demo1:checked ~ .hamburgerswitch {
  position: fixed;
}
/* ハンバーガーアイコン */
.hamburger-switch-line1,
.hamburger-switch-line1:before,
.hamburger-switch-line1:after {
  width: 25px;
  height: 3px;
  background: #fff; /* ハンバーガーアイコンの色 */
  position: absolute;
  top: 50%;
  left: 50%;
  transition: 0.3s;
  content: "";
}
.hamburger-switch-line1 {
  transform: translate(-50%, -100%);
}
.hamburger-switch-line1:before {
  transform: translate(-50%, -300%);
}
.hamburger-switch-line1:after {
  transform: translate(-50%, 200%);
}
/* ハンバーガーアイコン･アニメーション */
#hamburger-demo1:checked ~ .hamburgerswitch .hamburger-switch-line1 {
  width: 0;
}
#hamburger-demo1:checked ~ .hamburgerswitch .hamburger-switch-line1:before {
  transform: rotate(45deg) translate(-40%, 325%);
}
#hamburger-demo1:checked ~ .hamburgerswitch .hamburger-switch-line1:after {
  transform: rotate(-45deg) translate(-40%, -325%);
}
/* メニューエリア */
.hamburgermenuwrap {
  position: fixed;
  background: #333; /* メニューエリアの背景色 */
  padding: 5em 3% 2em;
  z-index: 9998;
  transition: 0.3s;
  overflow-y: scroll; /* メニュー内容が多い場合に縦スクロールする */
  top: 0;
  left: 100%;
  width: 70%;
  border-radius: 10%;
}
/* メニューリスト */
.hamburgermenulist {
  margin-right: 3%;
  list-style: none;
}
.hamburgermenulist li a {
  text-decoration: none;
  color: #fff; /* メニューリストの文字色 */
  display: block;
  padding: 0.5em 0;
}
/* メニューエリア･アニメーション */
/* 右から */
#hamburger-demo1:checked ~ .hamburgermenuwrap {
  left: 30%;
}
/* コンテンツカバー */
#hamburger-demo1:checked ~ .hamburgercover {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 9997;
  background: rgba(3, 3, 3, 0.5);
  display: block;
}
/* 450px以上の時ハンバーガーメニュー消す */
@media (min-width: 450px) {
  .hamburgermenubox {
    display: none;
  }
}
/* 451px以下の時リストを消す */
@media (max-width: 451px) {
  header {
    padding: 5%;
  }
  .pc li {
    display: none;
  }
}
/* ヘッダーここまで */

.top_img {
  border-bottom: solid black;
  border-top: solid black;
  background-image: url(../photos/top_pages/sakura.jpg);
  margin-top: 5%;
  margin-bottom: 5%;
  background-color: rgba(255, 255, 255, 0.5);
  background-blend-mode: lighten;
  background-size: 50%;
}
.top_img img {
  display: block;
  margin: 0 auto;
  width: 50%;
}
.dantai {
  text-align: center;
  margin-bottom: 4%;
}
.dantai h1 {
  display: inline-block;
  border-bottom: 6px double #000;
  margin: 0 auto;
}
.wrap {
  display: flex;
  /* justify-content: center; */
  justify-content: space-between;
  padding: 0 0;
  width: 65%;
  /* margin-bottom: 8em; */
}
.wrap .item h2 {
  display: inline-block;
  border-bottom: 3px dashed #000;
  border-left: 6px double #000;
  background: #f4f4f4;
  padding: 0 10px 0 5px;
}
.wrap .item p {
  font-weight: bold;
  margin-bottom: 8%;
}
.item {
  padding: 0 5%;
}
#left {
  margin-left: 1%;
}
.wrap .item p span {
  font-size: 150%;
}
.wrap .item .slide p {
  font-size: 3em;
  font-weight: bold;
  color: white;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: 0% 0%;
  transform: translate(-50%, -50%);
}

.slide {
  position: relative;
  overflow: hidden;
  /* 画像のサイズに合わせて変更ください */
  width: 25vw;
  height: 40vw;
  margin: auto; /* サンプルは中央寄せの背景：白 */
  background: #000000;
  padding: 0 0%;
  transform: skewX(-19deg);
  z-index: 1;
}

/*=== 画像の設定 ======================================= */
.slide img {
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
  display: block;
  position: absolute;
  /* 画像のサイズを表示エリアに合せる */

  /* max-height: 100%; こうしないとsafariではうまくいかなかった */
  padding: 18% 0%;
  opacity: 0;
  animation: slideAnime 6s ease infinite;
}
/*=== スライドのアニメーションを段差で開始する ========= */
.slide img:nth-of-type(1) {
  animation-delay: 0s;
}
.slide img:nth-of-type(2) {
  animation-delay: 2s;
}
.slide img:nth-of-type(3) {
  animation-delay: 4s;
}

/*=== スライドのアニメーション ========================= */
@keyframes slideAnime {
  0% {
    opacity: 0;
  }
  16% {
    opacity: 0.5;
  }
  33% {
    opacity: 0.5;
  }
  49% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

/* slideのレスポンシブデザイン */
@media (max-width: 550px) {
  .wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .wrap .item {
    display: block;
    margin: 0 auto;
    margin-bottom: 5%;
  }
  .slide {
    position: relative;
    overflow: hidden;
    /* 画像のサイズに合わせて変更ください */
    width: 86vw;
    height: 25vw;
    padding: 0 2%;
    margin: auto; /* サンプルは中央寄せの背景：白 */
    background: #000000;
    z-index: 1;
  }
  .slide img {
    padding: 18% 0%;
  }
}
@media (min-width: 700px) {
  /* .slide {
    width: 13em;
    height: 13em;
  } */
  .wrap .item .slide p {
    font-size: xx-large;
  }
}
@media (min-width: 900px) {
  /* .slide {
    width: 15em;
    height: 15em;
  } */
  .wrap .item .slide p {
    font-size: 3em;
  }
}
/* ここからフッター */
footer {
  position: relative;
  /* margin-top: 40px; */
  color: #fff;
}
footer a {
  text-decoration: none;
  color: #fff;
}
footer a:hover {
  color: rgb(92, 207, 241);
}
footer .primary {
  padding: 40px 20px;
  background: #333;
}
footer .secondary {
  display: flex;
  padding: 40px 20px;
  background: #222;
}

/* footer-logo */

footer .logo {
  position: relative;
  padding: 0;
  margin: 0;
  width: 100%;
  font-size: 26px;
  font-weight: bold;
}

/* address */

.address {
  margin: 10px 0 0;
  padding: 0;
}

/* navi */

.navi-row {
  display: flex;
  margin-top: 40px;
}

footer .navi {
  margin: 0;
  padding: 0;
  list-style: none;
}
footer .navi li {
  display: inline-block;
  margin: 0 20px 0 0;
  padding: 0;
}
footer .navi li:first-child {
  margin-left: 0;
}
/* copyright */

footer .copyright {
  margin: 0;
  padding: 0;
  text-align: center;
  color: #fff;
  background-color: black;
}

@media (max-width: 451px) {
  footer .primary .logo {
    font-size: 1.6em;
  }

  footer .navi li {
    display: block;
    margin-bottom: 1em;
  }
  footer .space {
    display: none;
  }
}
@media (min-width: 451px) {
  .br_sp {
    display: none;
  }
  footer .space {
    margin-right: 1em;
  }
}
/* フッターここまで */