@charset "utf-8";

html, body, label, input, select, button, textarea {
	font-family: "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "小塚明朝 Pro", "ＭＳ Ｐ明朝", "MS PMincho", serif;
	/* font-family:"メイリオ", Meiryo, Osaka,"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",  "ＭＳ Ｐゴシック", "MS P Gothic", sans-serif; */
	-webkit-text-size-adjust: none;
}

/* ------------------------------
   リセット
------------------------------ */
ul {list-style-type: none;}
ol {padding-left: 40px;padding-bottom: 15px;}
img {border: none;max-width: 100%;height: auto;vertical-align: middle;}
table {border-collapse:collapse;font-size: 100%;border-spacing: 0;}
iframe {width: 100%;}
center {margin:0 !important; padding:0 !important;}

hr {
	height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-top: 1px solid var( --w450 );
}

hr.lite{	border-top: 1px solid var( --w444 ); }
hr.white{	border-top: 1px solid var( --w431 ); }

/* ------------------------------
   ベーススタイル
------------------------------ */
body {
  margin: 0;
  padding: 0;
  -webkit-text-size-adjust: 100%;
  background: var( --w431 );
  color: var( --w459 );
  line-height: 1.4;
}

@media screen and (min-width:801px){ body { font-size: 18px; } }
@media screen and (max-width:800px){ body { font-size: 16px; } }
@media screen and (max-width:600px){ body { font-size: 14px; } }

a {
  color: var(--w334);
  transition: 0.5s;
  text-decoration: none;
}

a:hover {
  color: var(--w324);	
}


ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ------------------------------
   見出し（h1〜h6）基準スタイル
------------------------------ */
h1, h2, h3, h4, h5, h6 {
  font-weight: bold;
  padding: 0;
}

/* サイズ基準（16pxベース） */
h1 { font-size: 2em;   /* 32px */ }
h2 { font-size: 1.75em; /* 28px */ }
h3 { font-size: 1.5em;  /* 24px */ }
h4 { font-size: 1.25em; /* 20px */ }
h5 { font-size: 1.1em;  /* 約18px */ }
h6 { font-size: 1em;    /* 16px */ }

/* 装飾例（見やすいように） */
h1 { padding-bottom: 0.5em; text-align: center; }
h2 { padding: 0.3em; text-align: center; }
h3 { border-left: 4px solid var(--w452); padding-left: 0.5em; padding-bottom: 0.3em; }

h1#seo,h2#seo,h3#seo{ display:none !important; }

/* ------------------------------
   ヘッダー（基本）
------------------------------ */
#site-header {
  text-align: center;
  position: fixed;
  top: 0;
  width: 100%;
  z-index:2000 !important;
  opacity: 1;
  transition: opacity 0.3s ease;
}

/* ------------------------------
   スクロール後にアニメーション発動
------------------------------ */
#site-header.main {
  background: var(--w000);
}

#site-header.sub {
  background: var(--w031);
}

#site-header.main.reset {
  background: var( --w000 );
  animation: none;
}

#site-header.sub.reset {
  background: var(--w031);
  animation: none;
}

#site-header.fade-in {
  background: var(--w031);
  animation: headerFadeIn 0.3s ease forwards;
}

#site-header.active, #site-header.main.active {
  background: var(--w031) !important;
}

#site-header.main a,
#site-header.main.reset a{
  color: var( --w431 );
  text-shadow: 0px 1px 3px hsla(360,0%,0%,0.5);
}

#site-header.sub a,
#site-header.sub.reset a,
#site-header.fade-in a,
#site-header.active a {
  color: var( --w459 ) !important;
  text-shadow: 0px 1px 3px hsla(360,0%,0%,0) !important;
}

/* アニメーション定義 */
@keyframes headerFadeIn {
  0% {
    opacity: 0.8;
  }
  100% {
    opacity: 1;
  }
}
/* ------------------------------
   ヘッダーの高さ × ヘッダータイトル × メインの開始位置調整
------------------------------ */

@media screen and (min-width:801px){
	#site-header {
	  height: 60px;
	  line-height: 60px; /* 縦中央揃えしたい場合 */
	  padding: 10px;
	}
}

@media screen and (max-width:800px){
	#site-header {
	  height: 60px;
	  line-height: 30px; 
	  padding: 10px;
	}
}

@media screen and (min-width:801px){ #titlebr { display: none; } }
@media screen and (max-width:800px){ #titlebr { display: inline; } }

.site-title{
	font-size: 1.2em;
	font-weight:bold;
	transition: 0s !important;
	text-align:left;
	padding-left:0.5em;
}
.site-title a { font-weight: bold; }

#site-header a, .site-title a { color: var( --w459 ); }
#site-header a:hover, .site-title a:hover { color: var( --w452 ); }

.site-main {	margin: 0 auto 0; }
.site-sub { margin: 80px auto 0; }
.content {
	padding: 10px;
	color: var( --w431 );
	background-size: auto, auto;
	background-attachment: fixed;

	/* 基本色と“少し明るい”色 */
	--base: hsla(357, 42%, 30%, 1);   /* 指定色 */
	--light: hsla(357, 42%, 45%, 1);  /* 少し明るい色 */

	/* ストライプ設定：線4px・間12px ⇒ 16px周期 */
	--line: 4px;
	--gap: 12px;
	--period: calc(var(--line) + var(--gap));

	/* 背景レイヤー構成 */
	background-image:
    /* 上：楕円状グラデーション（中心・比率を指定） */
    radial-gradient(
      ellipse 100% 60% at 50% 0%,
      hsla(357, 42%, 45%, 0.94) 0%,
      hsla(357, 42%, 22%, 0.94) 85%
    ),
	/* 下：縦ストライプ */
	repeating-linear-gradient(
	  to right,
	  var(--base) 0,
	  var(--base) var(--line),
	  transparent var(--line),
	  transparent var(--period)
	);

}

/* ------------------------------
   メニュー
------------------------------ */
.site-menu ul {
  display: flex;
  justify-content: center;
  gap: 2em;
  margin-top: 1em;
}

.site-menu a {
  padding: 0.5em 0;
  border-bottom: 2px solid transparent;
  transition: 0.3s;
}

.site-menu a:hover {
  border-bottom: 2px solid var( --w452 );
}

/* ------------------------------
   スライダー
------------------------------ */
.main-visual {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.slider {
  position: relative;
  width: 100%;
  height: 100%;
}

.slides {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 0.6s ease;
}

.slide {
  width: 100%;
  flex-shrink: 0;
  height: 100%;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

/* ------------------------------
   ナビボタン
------------------------------ */
.nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: hsla(0, 0%, 0%, 0.4);
  color: #fff;
  border: none;
  font-size: 2em;
  padding: 0.3em 0.5em;
  cursor: pointer;
  border-radius: 50%;
  z-index: 10;
  transition: background 0.3s;
}

.nav:hover {
  background: hsla(0, 0%, 0%, 0.6);
}

.nav.prev {
  left: 1em;
}

.nav.next {
  right: 1em;
}

/* ------------------------------
   ページネーション
------------------------------ */
.pagination {
  position: absolute;
  bottom: 1.5em;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.7em;
}

.dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border:2px solid hsla(0,100%,100%,0.5);
  background: hsla(0, 0%, 0%, 0.5);
  cursor: pointer;
  transition: background 0.3s;
}

.dot.active { border:2px solid hsla(0,100%,100%,1); }

.dot.active:nth-child(1) { background: var( --w035 ); }
.dot.active:nth-child(2) { background: var( --w281 ); }
.dot.active:nth-child(3) { background: var( --w313 ); }
.dot.active:nth-child(4) { background: var( --w062 ); }
.dot.active:nth-child(5) { background: var( --w155 ); }
.dot.active:nth-child(6) { background: var( --w232 ); }
.dot.active:nth-child(7) { background: var( --w110 ); }
.dot.active:nth-child(8) { background: var( --w391 ); }

/* ------------------------------
   レスポンシブ対応
------------------------------ */
@media (max-width: 800px) {
  .nav {
    font-size: 1.5em;
  }
  .dot {
    width: 10px;
    height: 10px;
  }
}

/* ------------------------------
   ギャラリー
------------------------------ */
.sub-visual {
  width: 100%;
  overflow: hidden;
}

.photo-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* ← 通常は2列 */
  grid-template-rows: auto;
}

.photo-item img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}

/* ------------------------------------
   幅800px以下で1列に変更
------------------------------------ */
@media (max-width: 800px) {
  .photo-grid {
    grid-template-columns: 1fr; /* ← 1列 */
    grid-template-rows: auto;   /* ← 高さは自動に */
  }

  .photo-item img {
    height: auto; /* 画像比率を保つ */
  }
}

#photoboxA { background-color: hsla(358,77%,90%,1);  } 
#photoboxB  { background-color: hsla(358,77%,80%,1);  }
#photoboxC  { background-color: hsla(358,77%,70%,1);  }
#photoboxD  { background-color: hsla(358,77%,60%,1);  }
#photoboxE { background-color: hsla(358,77%,90%,1);  }
#photoboxF { background-color: hsla(358,77%,80%,1);  }
#photoboxG  { background-color: hsla(358,77%,70%,1);  }
#photoboxH { background-color: hsla(358,77%,60%,1);  }

/* ------------------------------
   お問い合わせページ
------------------------------ */
.contact {
  max-width: 700px;
  margin: 4em auto;
  padding: 10px;
}

.contact h2 {
  text-align: center;
  font-size: 1.8em;
  margin-bottom: 0.5em;
}

.contact-lead {
  text-align: center;
  color: #555;
  margin-bottom: 2em;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1.5em;
}

.form-group {
  display: flex;
  flex-direction: column;
}

.form-group label {
  font-weight: bold;
  margin-bottom: 0.3em;
}

.req {
  color: #d00;
  font-size: 0.9em;
}

input[type="text"],
input[type="email"],
textarea {
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 0.8em;
  font-size: 1em;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.3s;
}

input:focus,
textarea:focus {
  border-color: #333;
  outline: none;
}

.btn-send {
  display: inline-block;
  background: #333;
  color: #fff;
  font-size: 1em;
  padding: 0.8em 2.5em;
  border: none;
  border-radius: 30px;
  cursor: pointer;
  transition: background 0.3s;
}

.btn-send:hover {
  background: #555;
}

.form-submit {
  text-align: center;
  margin-top: 1em;
}

.form-error {
  color: #d00;
  text-align: center;
  font-weight: bold;
  margin-bottom: 1.5em;
}

.btn-back {
  display: inline-block;
  background: #888;
  color: #fff;
  padding: 0.7em 2em;
  border-radius: 30px;
  text-decoration: none;
  transition: background 0.3s;
}

.btn-back:hover {
  background: #666;
}

.pdf-download-btn{
display:inline-block;
padding:12px 18px;
border-radius:10px;
background:var( --w322 );
color:#fff;
text-decoration:none;
font-weight:600;
line-height:1;
border:1px solid rgba(0,0,0,.08);
box-shadow:0 6px 16px rgba(0,0,0,.12);
transition:transform .08s ease, box-shadow .12s ease, opacity .12s ease;
}
.pdf-download-btn:hover{
transform:translateY(-1px);
box-shadow:0 10px 20px rgba(0,0,0,.14);
opacity:.95;
color:var( --w336 );
}
.pdf-download-btn:active{
transform:translateY(0);
box-shadow:0 6px 16px rgba(0,0,0,.12);
}
.pdf-download-btn:focus{
outline:3px solid rgba(37,99,235,.35);
outline-offset:3px;
}

/* ------------------------------
   フッター
------------------------------ */
.site-footer {
  background: #f8f8f8;
  text-align: center;
  padding: 1.5em;
  font-size: 0.9em;
  color: #555;
  position: relative;        /* 馬を内部基準で動かすため必要 */
  overflow: hidden;          /* 馬がフッター外へ飛び出さないように */
  z-index: 10; /* ← 馬の方を z=50 にするので文字の後ろに入らない */
}

/* ------------------------------
   フッターを走る馬アニメ
------------------------------ */

.footer-horse {
    position: absolute;
    bottom: -70px;
    left: -200px;

    width: 150px;
    height: 150px;

    opacity: 0.08; /* ← 透け感で文字と重なっても邪魔しない */
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: none;

    z-index: 50; /* ← 文字より前に出す（重なりON） */

    animation: horseRun 1s steps(1) infinite,
               horseMove 8s linear infinite;
}

/* 走る馬のフレーム切替（12コマ） */
@keyframes horseRun {
    0%   { background-image: url('img/run/horse_running01.png'); }
    8.33%  { background-image: url('img/run/horse_running02.png'); }
    16.66% { background-image: url('img/run/horse_running03.png'); }
    24.99% { background-image: url('img/run/horse_running04.png'); }
    33.32% { background-image: url('img/run/horse_running05.png'); }
    41.65% { background-image: url('img/run/horse_running06.png'); }
    49.98% { background-image: url('img/run/horse_running07.png'); }
    58.31% { background-image: url('img/run/horse_running08.png'); }
    66.64% { background-image: url('img/run/horse_running09.png'); }
    74.97% { background-image: url('img/run/horse_running10.png'); }
    83.30% { background-image: url('img/run/horse_running11.png'); }
    91.63% { background-image: url('img/run/horse_running12.png'); }
    100%   { background-image: url('img/run/horse_running01.png'); }
}

/* 左→右へ走り抜ける動き */
@keyframes horseMove {
    0%   { transform: translateX(0); }
    100% { transform: translateX( calc(100vw + 200px ) ); }
}

.font_xs { font-size:0.6em !important; }
.font_s { font-size:0.9em !important; }
.font_1em{ font-size:1em !important; }
.font_m { font-size:1.2em !important; }
.font_l { font-size:1.5em !important; }
.font_xl { font-size:1.8em !important; }
.font_2l { font-size:1.8em !important; }
.font_3l { font-size:2.1em !important; }
.font_4l { font-size:2.4em !important; }

.square1, #square1{ width:1em; display:inline-block; }

.spacer5, #spacer5{ height:5px; }
.spacer10, #spacer10{ height:10px; }
.spacer20, #spacer20{ height:20px; }
.spacer30, #spacer30{ height:30px; }
.spacer40, #spacer40{ height:40px; }
.spacer50, #spacer50{ height:50px; }
.spacer60, #spacer60{ height:60px; }
.spacer70, #spacer70{ height:70px; }
.spacer80, #spacer80{ height:80px; }
.spacer90, #spacer90{ height:90px; }
.spacer100, #spacer100{ height:100px; }

#spacer10, #spacer20, #spacer30, #spacer40, #spacer50, 
#spacer60, #spacer70, #spacer80, #spacer90, #spacer100
{ clear:both; }

@media screen and (min-width:801px){
	#onlypc		{ display:block; }
	#onlyphone	{ display:none; }
}
@media screen and (max-width:800px){
	#onlypc		{ display:none; }
	#onlyphone	{ display:block; }
}

@media screen and (min-width:801px){
	#inline-pc		{ display:inline-block; }
	#inline-phone	{ display:none; }
}
@media screen and (max-width:800px){
	#inline-pc		{ display:none; }
	#inline-phone	{ display:inline-block; }
}

.hidden { display: none; }
.center { text-align: center; }

.f_end, #f_end, .floatend, #floatend { clear:both; }