@charset "UTF-8";
/* CSS Document */

/*
Theme Name: My Original Theme (Video Hero + Responsive)
Author: You
Version: 1.0.0
Description: ヘッダーにロゴ+4ボタン、下に動画（トップは16:9、他ページは100%×200px）、固定ページ本文、フッター左右配置。PCはFlex横並び、スマホは縦並び98%幅。タブレットはPCと同様表示。
Text Domain: my-original-theme
*/

/* ===== リセット（簡易） ===== */
html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }
body { font-size: 16px; margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans JP", sans-serif; color: #222; line-height: 1.8; }
img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }

:root {
  --container: 1100px;
  --gap: 1rem;
  --brand: #104d8c;
  --light: #e9f1fa;
 --brandgreen: #c2d843;
	 --brandblue: #579bd4;
	--brandyellow: #f5cb3a;
  --border: #e5e7eb;
}


.container { width: min(100%, var(--container)); margin-inline: auto; }

.container_oto { width: min(100%, 600px); margin-inline: auto; }


/* ヘッダー全体 */
.site-header .container.inner {
  display: flex;
  align-items: center; /* ロゴとメニューを縦方向の中心で揃える */
  justify-content: space-between; /* 左右に配置 */
  padding: 20px 0;
}

/* ロゴ部分 */
.site-branding {
  display: flex;
  align-items: center; /* ロゴ画像の縦方向基準を中央に */
}
.site-branding img {
  /*height: auto;
  max-height: 30px;  上限だけ設定（可変にしたい場合は削除OK）
  width: auto; */
  display: block;
}

/* メインナビゲーション */
.main-nav {
  display: flex;
  align-items: center; /* ロゴと同じ高さに文字の中心を合わせる */
  justify-content: flex-end; /* メニューを右寄せ */
  gap: 20px; /* メニュー間の隙間 */
  margin: 0;
  padding: 0;
}

/* 各メニュー項目 */
.main-nav li {
  list-style: none;
  display: inline-block;
}

/* リンクデザイン */
.main-nav a {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 120px;
    margin: 0 auto;
    padding: 2px 0 2px 5px;

    border-radius: 5px;
    color: #666;
    border-bottom: thin solid #666;
    border-right: thin solid #666;
    border-top: thin solid #EEE;
    border-left: thin solid #EEE;
    font-size: 14px;
    letter-spacing: 5px;

    /* ▼ 透明状態から徐々に表示する（初期状態） */
    background-color: transparent;
    opacity: 1;
    transition: background-color 1.2s ease, opacity 1s ease, color 1s ease;
}

/* hover効果 */
.main-nav a:hover {
    /* ▼ 透明から一度フェードアウト → 背景色がふんわり現れる感じ */
    opacity: 0.3; /* 一旦薄くなる */
    background-color: var(--brand);
    color: #FFF;
}

.wpcf7 form p {
  text-align: center; /* ボタンを中央寄せ */
}

.wpcf7-submit {
  display: inline-block;
  padding: 12px 40px;
  font-size: 16px;
  font-weight: bold;
  color: #fff;
  background: linear-gradient(135deg, #104d8c, #579bd4); /* ブランドカラーに合うグラデーション */
  border: none;
  border-radius: 50px; /* 丸みのあるデザイン */
  cursor: pointer;
  transition: all 0.3s ease; /* ホバー時のアニメーション */
  letter-spacing: 2px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* 立体感 */
}

.wpcf7-submit:hover {
  background: linear-gradient(135deg, #0c3a6c, #3e8acb);
  transform: translateY(-2px); /* ホバーで少し浮く感じ */
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
}

.wpcf7-submit:active {
  transform: translateY(0);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
}


/* ===== ヒーロー動画 ===== */

.hero .container { padding: 0; }
.hero-video-wrap { width: 100%; position: relative; overflow: hidden; }
/* トップページ（.home）では16:9で表示 */
.hero-video-wrap-top { aspect-ratio: 16 / 5; }
.hero-video-top{ width: 100%; aspect-ratio: 16 / 5; object-fit: cover; }

/* その他のページは高さ200px固定 */
:not(.home) .hero-video-wrap { height: 200px; 

  position: relative;
  overflow: hidden;

}
:not(.home) .hero-video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 100%;
  min-height: 100%;
  object-fit: cover; /* 拡大・トリミングしてフィット */
  object-position: center center; /* 中央寄せ */
}

/* ===== コンテンツ ===== */
.site-main { padding: 24px 0 48px; }
.page-title { font-size: 28px; margin: 0 0 16px; }

/* ===== フッター ===== */
.site-footer { border-top: 1px solid var(--border); background: #fff; }
.site-footer .inner { display: flex; align-items: center; justify-content: space-between; gap: var(--gap); padding: 18px 0; }
.footer-left { font-size: 14px; color: #555; }
.footer-right { display: flex; gap: 12px; flex-wrap: wrap; font-size: 14px; }
.footer-right a { color: #0366d6; text-decoration: underline; }


/* ===== 汎用Flexユーティリティ（PC横並び → スマホ縦並び98%） ===== */
.flex-row { display: flex; flex-wrap: wrap; gap: var(--gap); }


.button-55 {
    display: flex;
    justify-content: center;
    align-items: center;
    width:100%;
    margin: 0 auto;
    padding: .9em 2em;
    border: none;
    border-radius: 5px;
    background-color:var(--brandgreen);
    color: #fff;
    font-weight: 600;
    font-size: 1em;
}

.button-55::after {
    width: 1.25em;
    height: 1.25em;
    margin-left: 8px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 6V8H5V19H16V14H18V20C18 20.5523 17.5523 21 17 21H4C3.44772 21 3 20.5523 3 20V7C3 6.44772 3.44772 6 4 6H10ZM21 3V11H19L18.9999 6.413L11.2071 14.2071L9.79289 12.7929L17.5849 5H13V3H21Z' fill='%23fff'%3E%3C/path%3E%3C/svg%3E");
    content: '';
}

.button-55:hover {
    background-color: #9ec400;
}

/* -----------------------------------
  basic
----------------------------------- */


/* 動画を囲うdiv */
.video {
  position: relative;
  width:100%; 
  height:0; /* 高さは0にしておく(padding-topで高さを指定するため) */
  padding-top: 30.25%; 
}

/* YouTube埋め込み用のiframe */
.video iframe{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


.kadomaru{border-radius: 20px;}
.kadomaru2{border-radius: 20px 20px 0 0;}
.tate {

 -webkit-align-items: center; /* 縦方向中央揃え（Safari用） */
 align-items: center; /* 縦方向中央揃え */
 -webkit-jusstify-content: center; /* 横方向中央揃え（Safari用） */
 justify-content: center; /* 横方向中央揃え */
}


.contents_logo{
margin: 0;
	padding: 0;
	height: 200px;
text-align: center;
background-image: url("img/logo_back.png");

background-repeat: repeat-x;
background-color: #f6f4c1;


}


/* -----------------------------------
	色
----------------------------------- */

.bg_wht{background-color:#FFF;}
.bg_gry{background-color: #eee;}
.wht{color:#FFF;}
.red{color:#ab1f22;}
.main_c{color:#104d8c;}

/* -----------------------------------
	テキスト揃え
----------------------------------- */


.al_left{text-align:left;}
.al_center{text-align:center;}
.al_right{text-align:right;}
.lt_sp03{letter-spacing: 0.3em;}
.lt_sp05{letter-spacing: 0.5em;}

/* -----------------------------------
	マージンまたはパディング
----------------------------------- */


.pad1{padding:1em;}

.pad2{
	padding:2rem;
}


.pad3{
	padding:3em;
}

.pad0030{
	padding:0 0 3em 0 ;
}

.pad2233{
	padding:2em 3em ;
}

.pad_b4{
	padding:0 0 0 4em; ;
}
.padlr5{
	padding-left:5%;
	padding-right:5%;
}

.mar_t1{
	margin-top:1em;
}

.mar_t2{
	margin-top:2em;
}

.mar_t4{
	margin-top:4em;
}
.mar_b1{
	margin-bottom:1em;
}

.mar_b2{
	margin-bottom:2em;
}



.mar_tb2em{
	margin: 2em 0;
}


.mar_b4{
	margin-bottom:4em;
}




/* -----------------------------------
	flex
----------------------------------- */


.flex0{
	
	display:flex;
	flex-flow: row wrap;
	
	
}
.flex_sa{
	
	display:flex;
	flex-flow: row wrap;
	justify-content:space-around;
	
	
	
}

.flex_sa2{
	
	display:flex;
	flex-flow: row wrap;
	justify-content:space-around;
	 align-items: center;
}


.flex_sb
{
	
	display:flex;
	flex-flow: row wrap;
	justify-content:space-between;
}




.flex_sb2{
	
	display:flex;
	flex-flow: row wrap;
justify-content:space-between;
    align-items: stretch; 

}




/* -----------------------------------
	border
----------------------------------- */
.border_wht{border: 1px solid #FFF;}
.shadow{box-shadow: 0 10px 25px 0 rgba(0, 0, 0, .5);}
.border_l{border-right:1px solid #000;}


/* -----------------------------------
	child
----------------------------------- */
.child5{width:5%;}
.child10{width:10%;}
.child13{width:13%;}
.child14{width:14%;}
.child15{width:15%;}
.child20{width:20%;}
.child23{width:23%;}
.child22{width:22%;}
.child24{width:24%;box-sizing: border-box;
}
.child25{
  width:25%;
  overflow:hidden;
  position:relative;
  display:flex;                /* ← 内側で画像を伸縮しやすくする */
}

/* 画像：枠いっぱいにフィットさせて余りはトリム */
.child25 img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
  /* グローバルの max-width:100% は上書き不要（width:100% 指定でOK） */
}
.child29{width:29%;}
.child30{width:30%;
}
.child31{width:31%;}
.child32{width:32%;}
.child33{width:33%;}
.child35{width:35%;}
.child37{width:37%;}
.child38{width:38%;}
.child40{width:40%;}

.child43{width:43%;}
.child45{width:45%;}
.child46{width:46%;}
.child47{width:47%;}
.child48{width:48%;}
.child50{width:50%;}
.child55{width:55%;}
.child56{width:56%;}
.child60{width:60%;}
.child65{width:65%;}
.child70{width:70%;}
.child75{width:75%;}
.child80{width:80%;}
.child90{width:90%;}
.child98{width:98%;}

/* -----------------------------------
	img
----------------------------------- */
.img100{width:100%;}
.img90{width:90%;}
.img80{width:80%;}
.img70{width:70%;}
.img60{width:60%;}
.img50{width:50%;}

/* -----------------------------------
	fontサイズ
----------------------------------- */

.font200{font-size:2rem;}
.font180{font-size:1.8rem;}
.font170{font-size:1.7rem;}
.font160{font-size:1.6rem;}
.font150{font-size:1.5rem;}
.font140{font-size:1.4rem;}
.font130{font-size:1.3rem;}
.font120{font-size:1.2rem;}
.font90{font-size:0.9rem;}
.font80{font-size:0.8rem;}

.bold600{font-weight:600;}
.bold700{font-weight:700;}
.bold800{font-weight:800;}
.bold900{font-weight:900;}

/* -----------------------------------
	行間
----------------------------------- */

.lh14{line-height: 1.4rem;}
.lh18{line-height: 1.8rem;}



/* -----------------------------------
	透明度
----------------------------------- */

.tran8{
	opacity: 1;
}

/* ===== レスポンシブ ===== */
/* タブレットはPCと同じ表示 → 768px以上はPC扱い */
@media (max-width: 767.98px) {
    
    :not(.home) .hero-video-wrap { height: 100px; 

  position: relative;
  overflow: hidden;

}

  .main-nav {
    flex-wrap: wrap; /* 2段に折り返す */
    justify-content: space-between; /* 均等配置 */
    gap: 10px; /* ボタン間の隙間を少し狭める（任意） */
    padding: 10px 0;
      margin-top: 2rem;
  }

  .main-nav li {
    width: 45%; /* 2個ずつ並べる */
    display: flex; /* 子a要素を中央寄せに */
    justify-content: center;
  }

  .main-nav a {
    width: 100%; /* liの幅いっぱいにボタンを広げる */
    margin: 0;
    padding: 0.2rem 0;
    font-size: 16px; /* 少し大きめに（お好みで） */
    letter-spacing: 2px;
  }

    
    
    
    
    
  /* スマホ: 縦積み & 幅98% */
    
    .container { width: min(96%, var(--container)); margin-inline: auto; }
  .site-header .inner, .site-footer .inner { flex-direction: column; align-items: stretch; }
  .main-nav { justify-content: space-between; }

  .flex-row { flex-direction: column; }
  .flex-row > * { width: 98%; margin-inline: auto; }

  .site-title { font-size: 16px; }
  .page-title { font-size: 22px; }


.child5{width:100%;}
.child10{width:100%;}
.child13{width:100%;}
.child14{width:100%;}
.child15{width:100%;}
.child20{width:100%;}
.child21{width:100%;}
.child22{width:100%;}
.child23{width:100%;}
.child24{width:100%;}
.child25{width:100%;}
.child29{width:100%;}
.child30{width:100%;}
.child31{width:100%;}
.child32{width:100%;}
.child33{width:100%;}
.child35{width:100%;}
.child37{width:100%;}
.child38{width:100%;}
.child40{width:100%;}
.child41{width:100%;}
.child42{width:100%;}
.child43{width:100%;}
.child45{width:100%;}
.child46{width:100%;}
.child47{width:100%;}
.child48{width:100%;}
.child50{width:100%;}
.child55{width:100%;}
.child56{width:100%;}
.child60{width:100%;}
.child65{width:100%;}
.child70{width:100%;}
.child75{width:100%;}
.child80{width:100%;}
.child90{width:100%;}
.child98{width:100%;}
}