@charset "utf-8";

/*===========　基礎設定　===========*/
* {
  box-sizing: border-box;
  outline: none; /* PCでの青い線を消す */
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); /* スマホのタップ影を消す */
}

img {
  max-width: 100%;
  height: auto;
  aspect-ratio: auto;
  content-visibility: auto;
}

body {
  font-family: "メイリオ", Meiryo, sans-serif;
  margin: 0;
  overflow-x: hidden; /* 横はみ出しを禁止 */
  width: 100%;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 70px; /* ここをヘッダーの高さ以上に設定 */
}

header {
  width: 100%;
  min-height: 60px;
  background-color: #ff0101;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2000;
}

.head {
  display: flex; 
  height: 60px;
}
.tatsuya-btn {
  height: 60px;
  width: 60px;
}
.syoukai-btn, .kyu-syoku-btn, .apointo-btn {
  flex: 1; /* 均等に縮む */
  min-width: 0; /* 縮むことを許可 */
  height: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: 15px; /* スマホ幅で5つ並べるための限界サイズ */
  font-weight: bold;
  text-align: center;
  color: #fff;
  white-space: nowrap;
}

.kyu-syoku-btn { background-color: #1e90ff; line-height: 1.1; }
.apointo-btn { background-color: #333; }


/* ========== ハンバーガーメニュー本体 ========= */
.hamburger {
  background: #7d7d7d;
  cursor: pointer;
  position: relative;
  display: flex;          /* 追加：中身を整列させる */
  flex-direction: column;
  justify-content: center; /* 追加：上下中央 */
  align-items: center;     /* 追加：左右中央 */
  outline: none;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  user-select: none;
  width: 60px;
}

/* 上下の線 */
.hamburger span {
  display: block;
  width: 26px;
  height: 2px;
  background: #fff;
  transition: all 0.3s;
  position: absolute; /* 位置を固定 */
}

/* 1番目の線（上） */
.hamburger span:nth-of-type(1) {
  top: 18px;
}

/* 2番目の線（下） */
.hamburger span:nth-of-type(2) {
  bottom: 18px;
}

/* メニューの文字 */
.menu-text {
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  margin: 0;
  line-height: 1;
  transition: all 0.3s;
  /* position指定をなくし、flexboxに任せるのが一番ズレません */
}

/* ★開いた時（is-active）のアニメーション */

/* 上の線を中央に移動して回転 */
.hamburger.is-active span:nth-of-type(1) {
  top: 29px;
  transform: rotate(45deg);
}

/* 真ん中の文字を消す */
.hamburger.is-active .menu-text {
  opacity: 0;
}

/* 下の線を中央に移動して回転 */
.hamburger.is-active span:nth-of-type(2) {
  bottom: 29px;
  transform: rotate(-45deg);
}

/* メニューの中身 */
.navigation {
  position: fixed;
  top: 60px;
  right: -100%;
  width: 100%;
  height: calc(100vh - 60px);
  background: rgba(249, 248, 248, 0.900);
  transition: all 0.3s;
  z-index: 999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.navigation.is-active {
  right: 0;
}

.navigation ul {
  list-style: none;
  text-align: center;
  padding: 0;
  width: 100%;
}

.navigation li a {
  display: block;
  padding: 15px;
  color: #333;
  font-size: 20px;
  text-decoration: none;
  font-weight: bold;
}
/* ここからメイン */
.web-site {
  display: block;    /* スマホでは縦並び */
  width: 100%;
  padding-top: 5px;
  overflow: hidden;  /* はみ出しによる横揺れを防止 */
}

main {
  padding-top: 60px;
  width: 100%;       /* スマホでは幅いっぱい */
  margin-top: 10px;
}

aside {
  width: 100%;       /* スマホでは幅いっぱい */
}


main img {
  display: block;    /* 画像の下にできる隙間を消す */
  width: 100%;       /* 横幅いっぱいに広げる */
  height: auto;      /* 縦横比を維持 */
  object-fit: cover; /* 枠に合わせて綺麗に収める（必要に応じて） */
}
.syoukai-title {
	background-color: #ff0101 ;
	color: #fff;
	font-weight: bold;
	text-align: center;
	padding: 10px;
	border-top: #333 solid 3px;
	margin-bottom: 5px;
}
.syoukai-text {
	padding: 30px 30px 60px 30px;
	line-height: 1.5;
	border-bottom: #333 solid 3px;
	margin-bottom: 15px;
  position: relative;
  z-index: 1;
  height: 450px;
}
.syoukai-text::before {
  content: "";
  position: absolute;
  inset: 0; /* 全体に広げる */
  z-index: -1; /* 文字の後ろに配置 */
  background-image: url(../images/kako_mirai.webp);
  opacity: 0.4; /* ここで薄さを調整（0.1〜0.3くらいがおすすめ） */
  background-size: 100% auto; /* 横幅を100%にし、高さは自動調整 */
  background-position: center top;
  background-repeat: no-repeat;
}
.riyu-title {
	background-color: #1e90ff;
  color: #fff;
  font-weight: bold;
  text-align: center;
  padding: 10px;
  margin-top: 5px;
}
h3 {
	border: 3px solid #07f34e;
	padding: 5px;
	margin: 5px 0 5px 0;
	font-size: 1.1em;
	font-weight: bold;
	text-align: center;
}
.news dt {
	display: block;
	width: 100%;
	padding-left: 3.5em;
	background: url(../images/icon_01.png) no-repeat;
  background-position: 15px 8px;
	padding-top: 10px;
	margin-bottom: 2px;
  font-weight: bold;
}
.news dd {
	display: block;
	border-bottom: 1px dotted #07f34e;
	padding: 0 10px 15px 3.5em;
  margin-bottom: 10px;
  margin-inline-start: 0;
  line-height: 1.6;
}
.omoi dt {
  display: block;
	width: 100%;
	padding-left: 3.5em;
	background: url(../images/yakyuicon.jpg) no-repeat;
  background-position: 15px 8px;
  background-size: 20px auto;
	padding-top: 10px;
	margin-bottom: 2px;
  font-weight: bold;
}
.omoi dd {
  display: block;
	border-bottom: 3px dotted #f3e707;
	padding: 0 10px 15px 3.5em;
  margin-bottom: 10px;
  margin-inline-start: 0;
  line-height: 1.6;
}
.riyu {
	margin-bottom: 10px;
}
.portfolio-sp {
  margin-top: 10px;
}
.portfolio-title {
background-color: #1e90ff;
color: #fff;
text-align: center;
font-weight: bold;
padding: 10px;
border: #07f34e double 5px; 
border-bottom: none;
padding-bottom: 10px;
}
.portfolio-text {
	font-size: 0.8rem;
	text-align: center;
	font-weight: bold;
	padding: 10px 0;
  color: #fff; 
  border: #07f34e double 5px; 
  background-color: #7d7d7d;
  border-bottom: none;
  border-top: none;
}
.portfolio a, #tatsuya a  {
  display: block;
  width: 100%;
  text-align: center;
 border: #07f34e double 5px; 
 background-color: #7d7d7d;
 border-top: none;
}
.syumi {
  margin-top: 10px;
	margin-bottom: 10px;
}
.syumi-title {
	text-align: center;
	padding: 10px 0;
	background-color: #f5f5dc;
}
.rireki {
	margin-bottom: 10px;
}
.rireki-title {
	text-align: center;
	padding: 10px 0;
	background-color: #1e90ff;
	color: #fff;
}
.ouenka img {
  width: 100%;
  aspect-ratio: 16 / 9; /* 横16：縦9の比率で表示し、残りは削る */
  object-fit: cover;
}

.slider-title {
  text-align: center;
  font-weight: bold;
  margin-top: 20px;
  background-color: #07f34e;
  padding: 10px 0;
  color: #f0f0f0;
}

footer {
    padding-bottom: 50px;
    background-color: #fff; 
}
footer p {
  padding-top: 100px;
}

/* ========== スライド設定 ========== */
.main-slider {
  width: 100%;
  height: 200px; /* 固定高さ */
  min-height: 200px; /* 読み込み前でもこの高さを維持 */
  margin: 10px auto 60px;
  position: relative;
  background-color: #f0f0f0; /* 画像が来るまで薄いグレーを表示してガタつきを隠す */
}

/* 画像を枠いっぱいに綺麗に収める設定 */
.swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 矢印のサイズ設定 */
.swiper-button-prev:after,
.swiper-button-next:after {
  font-size: 20px;
}

/* 矢印のボタン全体（青い丸）の設定 */
.swiper-button-prev,
.swiper-button-next {
  background: rgba(226, 226, 250, 0.75);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: #0000ff;
  z-index: 110; /* 画像より手前に */
}

/* 点の位置：画像の下端からさらに外側へ */
.swiper-pagination {
  position: absolute;
  left: 0;
  width: 100%;
  z-index: 110;
  display: flex;
  justify-content: center;
  gap: 8px;
}

/* 動いていない点の色 */
.swiper-pagination-bullet {
  background: #07f34e;
  opacity: 0.8;
}

/* 今表示されているアクティブな点（青色） */
.swiper-pagination-bullet-active {
  background: #0000ff;
  opacity: 1;
}

.copyright {
  text-align: center;
  font-size: 15px;
  color: #888;
  margin-top: 80px;
}
.instagram {
  text-align: center;
    font-weight: bold;
    padding-top: 5px;
    border: solid 3px #f3e707;
}
.instagram h2 {
  margin-bottom: 10px;
  background: #07f34e;
  padding-top: 5px;
  padding-bottom: 5px;
}

/* --- CSSの一番下の @media 部分を以下に差し替え --- */
@media (min-width: 950px) {
    /* 1. レイアウトを横並びにする */
    .web-site {
        display: flex;
        justify-content: center;
        align-items: flex-start;
        gap: 40px;
        max-width: 1200px;
        margin: 0 auto;
        padding-top: 80px;
    }

    main {
        width: 60%;
        padding-top: 0;
    }

    aside {
        width: 30%;
        margin-top: 10px;
    }

    /* 2. スライダーのサイズ調整 */
    .main-slider {
        width: 80%;
        height: 500px;
        margin: 10px auto 60px;
    }

    /* 3. ヘッダーの文字サイズ調整 */
    .syoukai-btn, .kyu-syoku-btn, .apointo-btn, .hamburger {
        font-size: 20px;
    }
    .copyright {
      font-size: 150%;
    }
    .syoukai-text {
      line-height: 3.0;
      margin-top: 10px;
    }
    .pcbrnone {
      display: none;
    }
}
/* 2. 中間サイズ (スマホ大きめ〜949pxまで) */
@media screen and (min-width: 500px) and (max-width: 949px) {
  .syoukai-text::before {
    background-size: 100% auto;
    background-position: center center; /* 中間サイズで見栄えが良い位置 */
  }
  .syoukai-text {
    line-height: 2.5;
  }
  .main-slider {
    width: 100%;
    height: 400px;
  }
}
@media screen and (max-width: 499px) {
  .syoukai-text::before {
    background-position: left center; /* 左右は切らず、高さの真ん中に配置 */
    /* もし左右も真ん中にしたいなら center center にしてください */
  }
  .syoukai-text {
    padding: 30px 10px 0 10px;
    height: 380px;
  }
  
}
.floating-hatena {
  position: fixed;
  /* 初期位置 */
  top: 10%;
  left: 10%;
  width: 60px;
  height: 60px;
  background-color: #ff9800;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-weight: bold;
  font-size: 30px;
  z-index: 9999;

  /* 秒かけて画面を一周。もっと早くしたければ「2s」などに */
  animation: bounce-around 3s linear infinite;
}

/* 画面を縦横無尽に跳ね返る動き */
@keyframes bounce-around {
  0%   { top: 20%; left: 90%; }
  10%  { top: 80%; left: 90%; }
  20%  { top: 10%; left: 90%; }
  30%  { top: 90%; left: 90%; }
  40%  { top: 30%; left: 90%; }
  50%  { top: 70%; left: 90%; }
  60%  { top: 10%; left: 90%; }
  70%  { top: 85%; left: 90%; }
  80%  { top: 40%; left: 90%; }
  90%  { top: 60%; left: 90%; }
  100% { top: 20%; left: 90%; } /* 最後は0%と同じに戻すと動きが繋がります */
}

/* 動き回ってクリックしにくいので、触れた時は止まるようにする */
.floating-hatena:hover {
  animation-play-state: paused;
  background-color: #ff5722;
}
.floating-hatena:active {
  /* タッチしている間は動かない */
  animation-play-state: paused;
  /* 捕まえた感が出るように少し大きくする */
  transform: scale(1.2);
}
@media screen and (max-width: 499px) {
  .floating-hatena {
    display: none;
  }
  .instagram {
    height: 750px;
  }
  .riyu {
    margin-top: 10px;
  }
}

@media screen and (min-width: 500px) {
  .hatena {
    display: none;
  }
}