@charset "UTF-8";
/* 基本色 */ :root {
  --main-color: #5D9AB2;
  --accent-color: #BF6A7A;
  --dark-main-color: #2B5566;
  --text-bright-color: #fff;
  --icon-color: #fff;
  --icon-bk-color: #ddd;
  --gray-color: #ddd;
  --large-width: 1000px;
  --middle-width: 800px;
}
/* 基本設定： フォントサイズ */
@media (max-width: 599px) {
  :root {
    font-size: 14px;
  }
}
@media (min-width: 600px) and (max-width: 799px) {
  :root {
    font-size: 16px;
  }
}
@media (min-width: 800px) {
  :root {
    font-size: 18px;
  }
}
body {
  font-size: 16px;
}
/* 基本設定： ページ全体 */
body {
  margin: 0;
  font-family: 'メイリオ', 'Hiragino Kaku Gothic Pro', sans-serif;
}
/* ヘッダー */
.container {
  position: relative;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100vw;
}
/* コンテンツA： 大きな写真 */
.conA {
  min-height: 450px;
  padding: 50px 0;
  background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url(../img/top_image.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: left;
  color: #fff; /*テキスト 白*/
  color: var(--text-bright-color);
  text-align: center; /* テキスト 中央*/
}
.conA img {
  width: 15%; /*片新 丸ロゴ*/
}
.conA h1 {
  margin-top: 20px;
  margin-bottom: 30px;
  font-family: "MS Pゴシック", sans-serif;
  font-size: 15vw;
  font-weight: 800;
  letter-spacing: 0.2em; /*字間*/
  margin-left: 0.1em; /*字間のずれ修正*/
}
/*ｈ１の表示*/
@keyframes open-keyanime1 { /* アニメーションの動き */
  0% {
    opacity: 0; /* 完全に透明 */
  }
  100% {
    opacity: 0.8; /* 透明度無し、通常表示 */
  }
}
.animation1 {
  animation-name: open-keyanime1;
  animation-duration: 3s; /* 3秒間で表示 */
  animation-fill-mode: both;
  animation-iteration-count: 1; /* 1回実行させています */
}
.conA p {
  /*font-family: "Osaka-mono", "MS Gothic", "monospace";*/
  font-size: 2.5vw;
  font-weight: 800;
  opacity: 0.9; /* 透明度無し、通常表示 */
}
@media (max-width: 768px) {
  .conA img {
    width: 20%; /*片新 丸ロゴ*/
  }
  .conA h1 {
    font-size: 20vw;
  }
  .conA p {
    font-size: 4vw;
  }
}
@media (max-width: 599px) {
  .conA {
    min-height: 300px;
  }
  .conA img {
    width: 20%; /*片新 丸ロゴ*/
  }
  .conA h1 {
    font-size: 20vw;
  }
  .conA p {
    font-size: 3vw;
  }
}
/*========= 上部固定させるためのCSS ===============*/
#header-menu {
  /*position: relative;/*fixedを設定して固定*/ */ height: 50px; /*高さ指定*/
  width: 100%; /*横幅指定*/
  z-index: 999; /*最前面へ*/
  /*以下はレイアウトのためのCSS*/
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: #333;
  color: #fff;
  text-align: center;
}
/*以下は検証用のレイアウトのためのCSS*/
nav ul {
  list-style: none;
  display: flex;
  justify-content: center;
}
nav ul li a {
  text-decoration: none;
  font-size: 20px;
  font-weight: 800;
  color: #fff;
  padding: 30px;
}
section {
  padding: 300px 0;
}
@media (max-width: 599px) {
  /* 小さい画面用の設定 */
  h2 {
    display: none;
  }
  nav ul li a {
    font-size: 14px;
    font-weight: 800;
    padding: 10px;
  }
}
/*========= お知らせ =========*/
.conB {
  display: flex;
  justify-content: center;
  padding: 50px 0;
  background-image: url(../img/bg4.jpg);
}
.conB-2 {
  text-align: justify;
  background-color: white;
  line-height: 1.6;
  width: 50%;
  border: #33CC99 5px solid; /*境界線の指定*/
  box-shadow: 0px 0px 20px 0px rgba(255, 255, 255, 1); /*影の指定*/
}
/* フェードイン用のCSS */
.slide-bottom {
  opacity: 0;
  transform: translateY(40px);
  transition: all 1.8s 0s ease-out;
}
.news_title {
  font-weight: bold;
  font-size: 20px;
  text-align: center;
  letter-spacing: 1em;
  background: #eaffdf; /*背景色の指定*/
  border: #82d35a 1px solid; /*境界線の指定*/
  border-radius: 6px; /*角丸の指定*/
  margin: 20px 30%;
  text-indent: 1.5rem;
}
.news_date {
  font-weight: 400;
  font-size: 14px;
  line-height: 1;
  margin-bottom: -7px;
}
.news_midashi {
  font-weight: 600;
  font-size: 18px;
  line-height: 1.2;
  margin-bottom: -10px;
  padding-right: 30px;
}
.news_honbun {
  font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
  line-height: 1.2;
  font-size: 18px;
  margin-bottom: 0px;
  padding-right: 30px;
}

.news_idou{
	line-height: 1;
	margin-bottom: 30px;

}
@media (max-width: 970px) {
  /* 中さい画面用の設定 */
  .news_title {
    margin: 20px 20%;
    text-indent: 1.5rem;
  }
}
@media (max-width: 767px) {
  /* 小さい画面用の設定 */
  .conB-2 {
    margin: 0;
    padding: 0;
    width: 70%;
  }
}
@media (max-width: 599px) {
  /* 小さい画面用の設定 */
  .conB-2 {
    margin: 0;
    padding: 0;
    width: 90%;
  }
}
/* =============================================
カードのCSSはここから
============================================= */
/* 共通CSS */
.conC {
  width: 100%;
  padding: 5rem 0rem;
  justify-content: center;
  /*margin-top: 30;*/
  background-image: url(../img/bg3.jpg);
}
ul.photo_item {
  list-style: none;
  display: flex;
  justify-content: center;
  max-width: 1100px;
  padding: 0;
  margin: 0 auto;
}
li.photo_list {
  width: 33.3%;
  min-height: 380px;
  margin-right: 1rem;
  transform: translate(-0.5rem, 0);
  /*margin-left: 0rem;*/
}
li.photo_list:last-child {
  margin-right: 0;
}
div.photo_image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
h3.photo_title {
  font-weight: bold;
  font-size: 20px;
  text-align: center;
  letter-spacing: 0.5em;
  text-indent: 0.5em; /*左にずれた分を直す*/
  margin-top: 5%;
  margin-bottom: 0;
}
p.photo_content {
  line-height: 1.6;
  color: #333;
  margin: 5%;
}
/* サービス内容 */
li.photo_list {
  display: flex;
  flex-direction: column;
  min-height: 380px;
  background: #fff;
  box-shadow: 5px 5px 25px rgba(0, 0, 0, 0.2);
}
li.photo_list div.photo_image {
  width: 100%;
}
h3.photo_title {
  padding: 1rem 1rem 0.5rem;
}
p.photo_content {
  padding: 0 1rem;
}
li a.photo_btn {
  display: inline-block;
  text-align: center;
  font-weight: bold;
  font-size: 16px;
  border-radius: 30px;
  padding: 6px 18px;
  color: #fff;
  background: #ccebe6;
  margin: auto auto 1.5rem auto;
  border: 2px solid #ccebe6;
  transition: 0.2s;
}
li a.photo_btn:hover {
  color: #ccebe6;
  background: #fff;
}
/* =============================================
SPはここから
============================================= */
@media screen and (max-width: 956px) {
  ul.photo_item {
    flex-wrap: wrap;
    max-width: 420px;
  }
  ul.photo_item li.photo_list {
    width: 100%;
    margin-right: 0;
    margin-bottom: 3rem;
  }
  li.photo_list:last-child {
    margin-bottom: 0;
  }
  /* サービス内容 */
  ul.photo_item li.photo_list {
    min-height: 380px;
  }
  ul.photo_item li.photo_list .photo_image {
    height: 200px;
  }
}
/*==================================================
　5-3-10 線が伸びて枠線になる
===================================*/
.gnavi li {
  /*線の基点とするためrelativeを指定*/
  position: relative;
  margin: 0 10px;
}
/*線の基点位置*/
.gnavi li::before, .gnavi li::after {
  content: "";
  /*絶対配置で線の位置を決める*/
  position: absolute;
  background: #FFFFFF;
  /*線の形状*/
  width: 0;
  height: 6px;
  /*アニメーションの指定*/
  transition: all 0.2s linear;
}
.gnavi li::before {
  right: 0;
  bottom: 0;
}
.gnavi li::after {
  left: 0;
  top: 0;
}
/*線の基点位置2 spanタグ*/
.gnavi li span {
  display: block;
}
.gnavi li span::before, .gnavi li span::after {
  content: "";
  /*絶対配置で線の位置を決める*/
  position: absolute;
  background: #003366;
  /*線の形状*/
  width: 6px;
  height: 0;
  /*アニメーションの指定*/
  transition: all 0.1s linear;
}
.gnavi li span::before {
  left: 0;
  bottom: 0;
}
.gnavi li span::after {
  right: 0;
  top: 0;
}
/*現在地とhoverした際の線の変化*/
.gnavi li.current::before, .gnavi li.current::after, .gnavi li:hover::before, .gnavi li:hover::after {
  width: 100%;
}
.gnavi li:hover::after {
  transition-delay: 0s; /*すぐ線を出現させる*/
}
.gnavi li:hover::before {
  transition-delay: 0.3s; /*線の出現を0.3秒遅らせる*/
}
.gnavi li.current span::before, .gnavi li.current span::after, .gnavi li:hover span::before, .gnavi li:hover span::after {
  height: 100%;
}
.gnavi li:hover span::before {
  transition-delay: 0.5s; /*線の出現を0.5秒遅らせる*/
}
.gnavi li:hover span::after {
  transition-delay: 0.2s; /*線の出現を0.2秒遅らせる*/
}
/*---------- 地図 -----------------------*/
.conD {
  /*display: flex;*/
  /*justify-content: center;*/
  padding: 10px;
  background-image: url(../img/bg4.jpg);
  text-align: center;
}
.conD-2 {
  /*text-align: center;*/
  width: 50%;
}
.map_title {
  font-weight: bold;
  font-size: 30px;
  /*text-align: center;*/
  letter-spacing: 1em;
  text-indent: 1em; /*左にずれた分を直す*/
  color: #fff;
}
/* 横幅を指定するための要素 */
.map-wrap {
  width: 50%; /* ここに横幅を指定 */
  margin-right: auto;
  margin-left: auto;
  margin-bottom: 50px;
  transform: translate(-10px, 0);
}
.map {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 75%; /* 比率を4:3に固定 */
  boder-width: 10px;
  /*margin-bottom: 100px;*/
  border: 8px solid #fff;
}
/* Google Mapのiframe */
.map iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.conD_2 p {
  text-align: center;
  font-size: 16px;
  color: white;
}
@media (max-width: 960px) {
  /* 小さい画面用の設定 */
  .map-wrap {
    width: 80%; /* ここに横幅を指定 */
  }
}
@media (max-width: 599px) {
  /* 小さい画面用の設定 */
  .map-wrap {
    width: 95%; /* ここに横幅を指定 */
  }
}
/* =============================================
フッターのCSSはここから
============================================= */
nav.ul {
  padding: 0;
  list-style: none;
}
nav.a {
  background: transparent;
  text-decoration: none;
  color: inherit;
}
/* フッター03 */
footer.footer03 {
  background-image: linear-gradient(145deg, #e0c3fc 0%, #8ec5fc 100%);
  padding-top: 2rem;
}
.footer-container {
  text-align: center;
}
div.footerlogo {
  width: 70px;
  margin: 0 auto 2rem;
}
div.footerlogo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
nav.footernav {
  margin-bottom: 3rem;
}
nav.footernav ul.footeritem {
  display: flex;
  justify-content: space-around;
  /*margin-left: 25%;
	margin-right: 28%;*/
}
nav.footernav ul.footeritem li.footerlist {
  list-style: none;
}
nav.footernav ul.footeritem li.footerlist a {
  font-weight: bold;
  color: #fff;
  font-size: 1rem;
}
p.copyright {
  color: #fff;
  background-color: #3a94ed;
  padding: 1rem;
}
@media screen and (max-width: 768px) {
  div.footerlogo {
    margin: 0 auto 1.5rem;
  }
  nav.footernav {
    margin-bottom: 1.5rem;
    transform: translate(-20px, 0);
  }
  nav.footernav ul.footeritem {
    flex-wrap: nowrap;
    justify-content: space-around;
    /*margin-left: 10%;
	margin-right: 12%;*/
  }
  nav.footernav ul.footeritem li.footerlist {
    /*padding: 0 1.5rem 0.8rem;*/
  }
}