/* ======================================
   Global CSS (base) 重複整理版
   ====================================== */
@import url("reset.css");
@import url("responsive.gs.12col.css");
@import url("keyframes.css");
@charset "utf-8";

body {
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "游ゴシック Medium", meiryo, sans-serif;
    color: #5E5A54;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

.sp-none { display: none; }
.page{ padding: 15px; }
.main { min-height: 450px; }
.index { margin-top: 50px; }
.siteid {
  box-sizing: border-box;
  vertical-align: baseline;
  white-space: normal;
  background: transparent;
  padding: 10px 10px 3px;
}
.logo { max-width: 100%; height: auto; padding: 10px; }

/* ----------- トップ画像まわり ----------- */
.top-img {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.mainimg-sp {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  margin: 0 auto;
}

.mainimg        { display: block; width: 100vw; height: auto; max-width: 100vw; object-fit: cover; margin: 0 auto; }
.mainimg-ipad   { display: none; }
.mainimg-sp     { display: none; }

@media (max-width: 767px) {
  .mainimg { display: none; }
  .mainimg-ipad { display: none; }
  .mainimg-sp {
    display: block;
    width: 100vw;
    height: auto;
    max-width: 100vw;
    object-fit: cover;
    margin: 0 auto;
  }
  /* .top-img { aspect-ratio: 16/9; min-height: 140px; max-height: 45vh; } ←削除！ */
  .wave-double { height: 36px; }
}

@media (min-width: 768px) and (max-width: 1100px) {
  .mainimg, .mainimg-sp { display: none !important; }
  .mainimg-ipad { display: block; width: 100vw; height: auto; max-width: 100vw; object-fit: cover; margin: 0 auto; }
}

@media (min-width: 768px) {
  .mainimg-sp { display: none; }
}

.wave-double {
  width: 100vw;
  height: 60px;
  display: block;
  position: absolute;
  left: 0; bottom: 0;
  z-index: 2;
}

.company { margin-top: 24px; }

/* ----------- 汎用・サイトレイアウト ----------- */
.contents {
    position: relative;
    overflow: hidden;
}
.contents:before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 120%;
    height: 18%;
    margin: 3% -10% 0;
    background: url(../images/gradation.jpg) no-repeat;
    background-size: cover;
    transform-origin: left center;
    transform: rotate(3deg);
    z-index: 3;
}

.first-txt { padding: 50px 30px 20px; font-weight: 600; }
.midashi01{ font-weight: 600; padding: 20px 10px; }
.txt01{ padding: 10px 10px 30px; }
.banner{ margin: 5px auto; max-width: 600px; padding: 5px 5px 30px; }
.decoration01{ font-weight: 800; margin: 20px 20px 10px; }
.genkiorange { text-align: center; }
.genkiorange img { width: 90%; max-width: 400px; height: auto; }
.b-grad{ border-top-width: 10px; border-image:url(../images/gradation.jpg) 10; border-style:solid; }

.link{ padding: 20px; }
.link li{ text-align: center; }
.link a{ display: block; text-align: center; background: url(../images/arrow.png) no-repeat right center; border-top: #e4e4e4 solid 1px; padding: 10px; }
.link li:last-child a{ border-bottom: #e4e4e4 solid 1px; }
.link img { height: 70px; width: auto; margin:10px 5px; }

.btn a{
  text-decoration: none; text-align: center; width:92%; display: block; appearance: none; font-size: 16px; font-weight:600; margin: 0px auto 5px; padding: 12px 12px;
  background:url(../images/gradation.jpg) no-repeat;
  background-size: 140% auto;
  color: #ffffff;
  border-radius: 10px; border:0; outline: 0;
}
a { color: rgb(94, 90, 84); font-weight: bold; }

/* ───────── ベージュ帯・中央寄せ ───────── */
.news {
  background:#FDEED7;
  width:100vw;
  margin:0 calc(50% - 50vw);      /* 全幅ベージュ帯 */
}
.news-inner{
  max-width:960px;                /* 幅はお好みで */
  margin:0 auto;                  /* ★ 中央寄せ */
  padding:48px 24px;              /* 上下左右余白 */
}

/* ───────── 見出し ───────── */
.newsfield-midashi01{
  font-size:clamp(22px,2.2vw,28px);
  font-weight:700;
  margin-bottom:24px;
}

/* ───────── 行全体（ul）を横並び ───────── */
.midashifield{
  display:flex;
  flex-wrap:wrap;                 /* モバイルで崩れたら縦に */
  align-items:center;
  gap:8px 16px;                   /* 行間・列間 */
  margin-bottom:8px;
  list-style:none;
  padding:0;
}

/* ─── 日付 ───*/
.midashi-left{
  width:140px;                    /* 同じ幅で揃えると整列しやすい */
  font-size:15px;
  color:#555;
}

/* ─── バッジ ───*/
.midashi-icon{
  display:inline-block;
  padding:4px 10px;
  border-radius:4px;
  font-size:12px;
  color:#fff;
  line-height:1.2;
}
.badge--open{ background:#EA5514; }  /* オレンジ */
.badge--news{ background:#1E88E5; }  /* ブルー */

.midashi-right{
  flex:1;                          /* 残り幅いっぱい */
  font-size:15px;
}

/* ───────── 一覧ボタン（任意）───────── */
.news-more{ text-align:center; margin-top:32px; }
.btn{
  display:inline-block;
  padding:10px 48px;
  background:#EA5514;
  color:#fff;
  font-weight:600;
  border-radius:4px;
  text-decoration:none;
  transition:opacity .3s;
}
.btn:hover{ opacity:.8; }

/* ───────── スマホ幅調整 ───────── */
@media(max-width:600px){
  .midashi-left{ width:100%; }
  .midashifield{ flex-direction:column; align-items:flex-start; }
}

/* ----------- フッター ----------- */
.footer {
  background-color: #464646;
  color: #ffffff;
  padding: 20px;
}
.footer .name { text-align: center; padding-top:10px; }
.footer .name img { max-width: 450px; width: 100%; height: auto; }
.footer p { text-align: center; padding: 5px; }
.footer p a { max-width: 350px; display: block; padding:10px 20px; text-align: center; border: 2px #ffffff solid; margin: 30px auto 40px; color: #ffffff; }

.privacy_a { text-decoration: underline; }
button { cursor: pointer; }
.backbtn a {
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  width: 92%; display: block; appearance: none; font-size: 16px; font-weight: 600;
  margin: -10px auto 50px; padding: 12px 12px;
  background: url(../images/gradation.jpg) no-repeat; background-size: 140% auto;
  color: #ffffff; border-radius: 10px; border: 0; outline: 0; text-align: center;
}
input, textarea{ font-size:16px; }
ul.privacy_ul { margin: 10px; padding-left: 30px; list-style-type: decimal; }

.suii { width: 100%; height: auto; margin: auto; }
.suiiimg { padding: 10px; margin: auto; }
.primary { font-size: 1.0em; color: #505050; font-weight: bold; padding: 5px 20px; margin-left: 300px; margin-right: 300px; text-align: center; }
.history { font-size: 1.0em; color: #505050; text-align: left; padding: 5px 20px 20px 20px; margin-left: 300px; margin-right: 300px; text-align: center; }

/* --- レスポンシブや補助スタイルは現状維持でOK --- */
@media ( min-width :860px ) {
  .mainimg img { width: 75%; max-width: 430px; padding: 7% 30px; }
  .link img { height: 75px; margin: 10px; }
  .id img { width: 90%; max-width: 420px; height: auto; }
}
@media ( min-width :600px ) {	
  .page{ padding: 50px; }
  .main{ min-height: 680px; }
  .decoration01{ background-color: #343434; color: #ffffff; font-weight: 800; padding: 10px 20px; border-radius: 80px; display: inline-block; line-height: 1.3; float: left; margin: 10px 0; }
  .decoration01 span{ display: block; }
  .link{ padding: 20px 20px 60px; text-align: left; }
  .link a{ background-image:none; border:0; display:inline-block; }
  .link li:last-child a{ border:0; }
  .footer { padding: 40px 20px; }
  .id img { width: 90%; max-width: 420px; height: auto; }
}
@media ( min-width :350px ) {         
  .suiiimg { max-width: 100%; height: auto; }
  .id img { width: 90%; max-width: 420px; height: auto; }
}

/*スライダー*/
.img-frame{ position: relative; width: 70%; height: 300px; overflow: hidden; margin: 0 auto; border-radius: 15px; }
@media screen and (max-width: 767px){ .img-frame{ width: 80%; height: 200px; } }
.img-01, .img-02, .img-03{ position: absolute; top:0; left:0; width: 100%; height: 100%; background-size: cover; background-repeat: no-repeat; }
.img-01{ background-image: url('https://genkiorange.com/images/main01.jpg'); animation: slide-animation-01 24s infinite; }
.img-02{ background-image: url('https://genkiorange.com/images/main02.jpg'); animation: slide-animation-02 24s infinite; }
.img-03{ background-image: url('https://genkiorange.com/images/main03.jpg'); animation: slide-animation-03 24s infinite; }
@keyframes slide-animation-01 { 0% {opacity: 1; transform: scale(1.0);} 30% {opacity: 1;} 40% {opacity: 0; transform: scale(1.15);} 90% {opacity: 0} 100% {opacity: 1; transform: scale(1.0);} }
@keyframes slide-animation-02 { 0% {opacity: 0;} 30% {opacity: 0; transform: scale(1.1);} 40% {opacity: 1;} 60% {opacity: 1;} 70% {opacity: 0; transform: scale(1.0);} 100% {opacity: 0;} }
@keyframes slide-animation-03 { 0% {opacity: 0;} 60% {opacity: 0; transform: scale(1.0);} 70% {opacity: 1;} 90% {opacity: 1;} 100% {opacity: 0; transform: scale(1.1);} }

#head {
  display: block;
  width: 100%;
  max-width: 100% !important;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  background-color: #ffffff;
  padding: 20px 100px 16px 100px; /* ←ここで下の余白を調整 */
  z-index: 1000;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.07);
}
@media (max-width: 1100px) {
  #head { padding: 20px 20px 16px 20px; }
}
.top-img {
  margin-top: 0px; /* ヘッダーの高さ分だけ空ける。必要なら微調整 */
}

.tel-number {
  color: #fff;
  display:flex;
  justify-content:center;   /* 横中央 */
  align-items:center;       /* 縦中央 ─任意 */
  margin:10px 0;
}

.inner { max-width: 720px; margin: 0 auto; line-height: 1.8; }