@charset "utf-8";
/*===========================================================================
all
==========================================================================*/
/*:::::::::::【背景】::::::::::*/
.back {
  padding: 100px 0;
}
@media (max-width:1280px) {}
@media (max-width:1024px) {}
@media (min-height:1366px) { /*ipad pro*/
  .back {
    padding: 60px 0;
  }
}
@media (max-width:900px) {
  .back {
    padding: 50px 0;
  }
}
@media (max-width:600px) {}
@media (max-width:450px) {}
@media (max-width: 400px) {}
/*:::::::::::【横幅】::::::::::*/
.width {
  max-width: 50%;
  margin: 0 auto;
  position: relative;
  z-index: 5;
}
@media (max-width:1500px) {
  .width {
    max-width: 60%;
  }
}
@media (max-width:1400px) {}
@media (max-width:1280px) {
  .width {
    max-width: 65%;
  }
}
@media (max-width:1024px) {}
@media (min-height:1366px) { /*ipad pro*/
  .width {
    max-width: 80%;
  }
}
@media (max-width:900px) {
  .width {
    max-width: 80%;
  }
}
@media (max-width:600px) {}
@media (max-width:450px) {}
@media (max-width: 400px) {}
/*:::::::::::【コンテンツ】::::::::::*/
.contents {
  position: relative;
  margin: 0 auto;
}
@media (max-width:1280px) {}
@media (max-width:1024px) {}
@media (min-height:1366px) { /*ipad pro*/
  /*  .contents {
    margin: 50px auto 0 auto;
  }*/
}
@media (max-width:900px) {
  /*  .contents {
    margin: 50px auto 0 auto;
  }*/
}
@media (max-width:600px) {}
@media (max-width:450px) {}
@media (max-width: 400px) {}
/*:::::::::::::::::::::::::::::【空白box】:::::::::::::::::::::::::::::::::*/
/*.empty {
  display: none;
}*/
@media (max-width:900px) {}
@media (max-width: 600px) {
  .empty {
    display: block;
    height: 80px;
  }
}
@media (max-width: 450px) {}
@media (max-width: 400px) {}
/*===========================================================================
ロード画面
==========================================================================*/
/* Loading背景画面設定　*/
#splash {
  /*fixedで全面に固定*/
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 999;
  background: #fff;
  text-align: center;
  color: #333;
}
/* Loading画像中央配置　*/
#splash_logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
/* Loading アイコンの大きさ設定　*/
#splash_logo img {
  width: 300px;
}
/* fadeUpをするアイコンの動き */
.fadeUp {
  animation-name: fadeUpAnime;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  opacity: 0;
}
@keyframes fadeUpAnime {
  from {
    opacity: 0;
    transform: translateY(100px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/*===========================================================================
TOP-back
==========================================================================*/
.top-back {}
/*===========================================================================
TOP
==========================================================================*/
/*:::::::::::【】::::::::::*/
#slider-box {
  position: relative;
  height: calc(100vh - 100px);
  margin: 0 auto;
  overflow: hidden;
}
.slider {
  position: relative;
  width: 100%;
  height: 90%;
  margin: auto;
  overflow: hidden;
}
.top-txt {
  width: 100%;
  display: block;
  font-size: 4rem;
  background-color: #fff;
  letter-spacing: 0.3em;
}
.top-txt p {
  height: 100%;
  width: 100%;
}
.rainbow-gradient-text {
  text-align: center;
  background: linear-gradient(90deg, #f2938c, #f7a072, #f3b683, #f2c94c, #87d68d, #8ac6d1, #6fc1d3, #6fa4e6, #69a3e1, #b388eb, #e895c5);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}
@media (max-width:1500px) {
  .top-txt {
    font-size: 3.5rem;
  }
}
@media (max-width:1400px) {
  .top-txt {
    font-size: 3rem;
  }
}
@media (max-width:1280px) {
  .top-txt {
    font-size: 3rem;
  }
}
@media (min-height:1366px) { /*ipad pro*/
  #slider-box {
    height: 60vh;
  }
  .slider {
    width: 100%;
  }
  .top-txt {
    font-size: 2.5rem;
    display: flex;
    justify-content: center;
  }
}
@media (max-width:900px) {
  #slider-box {
    height: 60vh;
  }
  .slider {
    width: 100%;
  }
  .top-txt {
    font-size: 2rem;
    display: flex;
    justify-content: center;
  }
}
@media (max-width:600px) {
  #slider-box {
    height: 50vh;
  }
  .top-txt {
    top: 0;
    font-size: 1.8rem;
    margin: 0 auto;
  }
}
@media (max-width:450px) {
  #slider-box {
    height: 40vh;
  }
  .top-txt {
    font-size: 22px;
  }
}
@media (max-width: 400px) {
  .slider {
    height: 87% !important;
  }
}
/*=========================================================
【ご挨拶】
==========================================================*/
/*:::::::::::【背景】::::::::::*/
.greeting-back {
  background-color: #fff;
}
.g-back-top {
  position: absolute;
  top: 0;
  width: 100%;
}
.g-back-bottom {
  position: absolute;
  bottom: 0;
  width: 100%;
}
/*:::::::::::【コンテンツ】::::::::::*/
.greeting-contents {}
/*:::::::::::【テキスト】::::::::::*/
.greeting-contents p {
  line-height: 2.3;
  text-align: center;
}
@media (max-width:1500px) {}
@media (max-width:1400px) {
  /*:::::::::::【テキスト】::::::::::*/
  .greeting-contents p {
    font-size: 1.2rem;
  }
}
@media (max-width:1280px) {}
@media (min-height:1366px) { /*ipad pro*/
  /*:::::::::::【コンテンツ】::::::::::*/
  .greeting-contents {
    width: 100%;
  }
}
@media (max-width:900px) {
  /*:::::::::::【コンテンツ】::::::::::*/
  .greeting-contents {
    width: 100%;
  }
  /*:::::::::::【テキスト】::::::::::*/
  .greeting-contents p {
    font-size: 16px;
  }
}
@media (max-width:600px) {
  .greeting-back {
    padding-top: 50px;
  }
  /*:::::::::::【テキスト】::::::::::*/
  .greeting-contents p {
    text-align: justify;
  }
  /*	.greeting-contents p span {
		display: block;
		text-align: right;
	}*/
}
@media (max-width:450px) {
  /*:::::::::::【コンテンツ】::::::::::*/
  .greeting-contents {
    margin-top: 20px;
  }
}
@media (max-width: 400px) {
  /*:::::::::::【テキスト】::::::::::*/
}
/*==========================================================================
どんなことをするの？
==========================================================================*/
/*:::::::::::【背景】::::::::::*/
.gimon-back {
  overflow-x: hidden;
  height: auto;
  background-image: url("../image/index/gimon-back.jpg");
  background-size: cover;
  background-position: center;
}
.gimon-width {
  max-width: 80%;
}
/*:::::::::::【クマ】::::::::::*/
/*:::::::::::【吹き出し】::::::::::*/
.speech-layout {
  position: relative;
  width: 100%;
  height: 60vh;
  margin: 100px auto;
}
.center-image {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, -100%);
  z-index: 1;
}
.center-image img {
  width: 100%;
  display: block;
  margin: 0 auto;
}
/* 吹き出し共通スタイル */
.hukidashi {
  position: absolute;
  top: 60%;
  left: 42%;
  height: 250px;
  width: 250px;
  padding: 20px;
  background: #e6f0f8;
  border-radius: 50%;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  text-align: center;
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 500;
  line-height: 1.4;
  z-index: 0;
  transform-origin: center center;
  /* ⚠️ transform は .f-01〜f-06 側で指定するので、ここでは書かない！ */
  display: flex;
  align-items: center;
  justify-content: center;
}
.city {
  box-shadow: 4px 4px 1px rgba(0, 0, 0, 0.2);
}
/* 扇形に配置 */
.f-01 {
  transform: rotate(-90deg) translateY(-356px) rotate(90deg);
}
.f-02 {
  transform: rotate(-60deg) translateY(-525px) rotate(60deg);
}
.f-03 {
  transform: rotate(-25deg) translateY(-435px) rotate(25deg);
}
.f-04 {
  transform: rotate(25deg) translateY(-435px) rotate(-25deg);
}
.f-05 {
  transform: rotate(60deg) translateY(-525px) rotate(-60deg);
}
.f-06 {
  transform: rotate(90deg) translateY(-356px) rotate(-90deg);
}
@media (max-width:1500px) {
  /*:::::::::::【吹き出し】::::::::::*/
  .speech-layout {
    height: 70vh;
  }
  /*クマ*/
  .center-image img {
    width: 90%;
  }
  /* 吹き出し共通スタイル */
  .hukidashi {
    height: 220px;
    width: 220px;
  }
  /* 扇形に配置 */
  .f-01 {
    transform: rotate(-90deg) translateY(-330px) rotate(90deg);
  }
  .f-02 {
    transform: rotate(-58deg) translateY(-460px) rotate(58deg);
  }
  .f-03 {
    transform: rotate(-20deg) translateY(-380px) rotate(20deg);
  }
  .f-04 {
    transform: rotate(20deg) translateY(-380px) rotate(-20deg);
  }
  .f-05 {
    transform: rotate(58deg) translateY(-460px) rotate(-58deg);
  }
  .f-06 {
    transform: rotate(90deg) translateY(-330px) rotate(-90deg);
  }
}
@media (max-width:1400px) {
  /*:::::::::::【吹き出し】::::::::::*/
  .speech-layout {
    height: 80vh;
  }
}
@media (max-width:1280px) {
  .speech-layout {
    height: 90vh;
  }
  /*クマ*/
  .center-image img {
    width: 90%;
  }
  /* 吹き出し共通スタイル */
  .hukidashi {
    height: 200px;
    width: 200px;
  }
  /* 扇形に配置 */
  .f-01 {
    transform: rotate(-90deg) translateY(-330px) rotate(90deg);
  }
  .f-02 {
    transform: rotate(-57deg) translateY(-400px) rotate(57deg);
  }
  .f-03 {
    transform: rotate(-23deg) translateY(-340px) rotate(23deg);
  }
  .f-04 {
    transform: rotate(23deg) translateY(-340px) rotate(-23deg);
  }
  .f-05 {
    transform: rotate(57deg) translateY(-400px) rotate(-57deg);
  }
  .f-06 {
    transform: rotate(90deg) translateY(-330px) rotate(-90deg);
  }
}
@media (min-height:1366px) { /*ipad pro*/
  .speech-layout {
    height: 40vh;
  }
  /* 扇形に配置 */
  .f-01 {
    transform: rotate(-95deg) translateY(-320px) rotate(95deg);
  }
  .f-02 {
    transform: rotate(-61deg) translateY(-375px) rotate(61deg);
  }
  .f-03 {
    transform: rotate(-27deg) translateY(-340px) rotate(27deg);
  }
  .f-04 {
    transform: rotate(10deg) translateY(-310px) rotate(-10deg);
  }
  .f-05 {
    transform: rotate(50deg) translateY(-300px) rotate(-50deg);
  }
  .f-06 {
    transform: rotate(95deg) translateY(-265px) rotate(-95deg);
  }
}
@media (max-width:900px) {
  .speech-layout {
    height: 50vh;
  }
  /*クマ*/
  .center-image img {
    width: 100%;
  }
  /* 吹き出し共通スタイル */
  .hukidashi {
    height: 170px;
    width: 170px;
    padding: 6px;
  }
  /* 扇形に配置 */
  .f-01 {
    transform: rotate(-95deg) translateY(-280px) rotate(95deg);
  }
  .f-02 {
    transform: rotate(-61deg) translateY(-330px) rotate(61deg);
  }
  .f-03 {
    transform: rotate(-27deg) translateY(-340px) rotate(27deg);
  }
  .f-04 {
    transform: rotate(10deg) translateY(-310px) rotate(-10deg);
  }
  .f-05 {
    transform: rotate(50deg) translateY(-250px) rotate(-50deg);
  }
  .f-06 {
    transform: rotate(95deg) translateY(-200px) rotate(-95deg);
  }
}
@media (max-width:600px) {
  .speech-layout {
    position: static; /* transform の影響を受けなくする */
    width: 100%;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    padding: 20px 0;
    margin: 50px auto;
  }
  .hukidashi {
    position: static !important; /* PC用の absolute を無効に */
    width: 90%;
    max-width: auto;
    height: auto;
    border-radius: 20px;
    padding: 14px;
    background: #e6f0f8;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    text-align: center;
    transform: none !important;
  }
  .center-image {
    order: 999; /* 吹き出しより後に表示させる */
    width: 70%;
    position: static;
    transform: none;
  }
  .center-image img {
    width: 100%;
    height: auto;
  }
  /*ボタン*/
  .gimon-btn {
    margin-top: 10px;
  }
}
@media (max-width:450px) {
  .hukidashi {
    width: 100%;
  }
}
@media (max-width: 400px) {}
/*=========================================================
【実施地域】
==========================================================*/
/*:::::::::::【背景】::::::::::*/
.area-back {
  padding-top: 0;
  background-color: #fffef5;
  background-image: url("../image/index/map.png");
  background-size: auto 90%;
  background-position: bottom;
  background-repeat: no-repeat;
}
.area-width {
  margin-top: 80px;
}
/*:::::::::::【コンテンツ】::::::::::*/
.area-contents {
  position: relative;
  /*  height: 50vh;*/
  display: flex;
  align-items: center;
  justify-content: center;
}
/*:::::::::::【グリッド】::::::::::*/
.area-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr); /* 5列に拡張 */
  grid-template-rows: repeat(2, auto);
  gap: 1rem;
  margin: 0 auto;
  justify-items: center;
}
.city {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  text-align: center;
  line-height: 100px;
  background: rgba(255, 255, 255, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
}
/* 上段の city 1〜3 を列1・3・5 に配置 */
.city:nth-child(1) {
  grid-column: 1;
  grid-row: 1;
}
.city:nth-child(2) {
  grid-column: 3;
  grid-row: 1;
}
.city:nth-child(3) {
  grid-column: 5;
  grid-row: 1;
}
/* 下段の city 4〜5 を列2・4（間）に配置 */
.city:nth-child(4) {
  grid-column: 2;
  grid-row: 2;
}
.city:nth-child(5) {
  grid-column: 4;
  grid-row: 2;
}
/*:::::::::::【】::::::::::*/
.city span {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  border: 4px dashed #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}
/*:::::::::::【色】::::::::::*/
.pink {
  background-color: #ffc8c9;
}
.orange {
  background-color: #fdd682;
}
.green {
  background-color: #e4fdc6;
}
.blue {
  background-color: #d4e5ff;
}
.purple {
  background-color: #ebe4ff;
}
@media (max-width:1500px) {
  .area-back {
    background-size: auto 88%;
  }
  .city {
    width: 180px;
    height: 180px;
  }
  .city span {
    width: 160px;
    height: 160px;
  }
}
@media (max-width:1400px) {
  .area-back {
    background-size: auto 86%;
  }
  .city {
    width: 180px;
    height: 180px;
  }
  .city span {
    width: 160px;
    height: 160px;
  }
}
@media (max-width:1280px) {
  .city {
    width: 160px;
    height: 160px;
  }
  .city span {
    width: 140px;
    height: 140px;
  }
}
@media (min-height:1366px) { /*ipad pro*/
  .area-back {
    background-size: auto 85%;
  }
  .area-width {
    margin-top: 50px;
  }
  .city {
    width: 180px;
    height: 180px;
  }
  .city span {
    width: 160px;
    height: 160px;
  }
}
@media (max-width:900px) {
  .area-back {
    background-size: auto 75%;
  }
  .area-width {
    margin-top: 50px;
  }
  .city {
    width: 120px;
    height: 120px;
  }
  .city span {
    width: 100px;
    height: 100px;
  }
}
@media (max-width:600px) {
  .area-back {
    background-size: auto 80%;
  }
  .area-grid {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto;
  }
  .area-grid .city {
    grid-column: auto !important;
    grid-row: auto !important;
  }
}
@media (max-width:450px) {
  .area-back {
    background-size: auto 72%;
  }
  .area-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin: 0 auto;
  }
  .area-grid .city {
    grid-column: auto !important;
    grid-row: auto !important;
  }
  .area-grid .city:nth-child(5) {
    grid-column: 1 / span 2 !important; /* 2列分またぐ */
    justify-self: center; /* グリッド内で中央配置 */
  }
}
@media (max-width: 400px) {
  .area-back {
    background-size: auto 63%;
    background-position: center;
  }